Merge branch 'master' into dependabot/npm_and_yarn/testing-library/re…

…act-14.0.0
react-component · Dec 10, 2023 · 5c056e5 · 5c056e5
2 parents 413115c + 026724e
commit 5c056e5
Show file tree

Hide file tree

Showing 70 changed files with 1,606 additions and 1,098 deletions.
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],
+  themeConfig: {
+    name: 'Select',
+    logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
+  },
+});
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
@@ -0,0 +1,41 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+  schedule:
+    - cron: "36 13 * * 3"
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ javascript ]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          queries: +security-and-quality
+
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
+        with:
+          category: "/language:${{ matrix.language }}"
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -2,9 +2,9 @@ name: CI
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   setup:
@@ -15,7 +15,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: '12'
+          node-version: '18'
 
       - name: cache package-lock.json
         uses: actions/cache@v2
@@ -24,7 +24,7 @@ jobs:
           key: lock-${{ github.sha }}
 
       - name: create package-lock.json
-        run: npm i --package-lock-only
+        run: npm i --package-lock-only --ignore-scripts
 
       - name: hack for singe file
         run: |
@@ -43,7 +43,7 @@ jobs:
       - name: install
         if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
         run: npm ci
-  
+
   lint:
     runs-on: ubuntu-latest
     steps:
@@ -69,7 +69,7 @@ jobs:
         run: npm run tsc
 
     needs: setup
-  
+
   compile:
     runs-on: ubuntu-latest
     steps:
@@ -92,7 +92,7 @@ jobs:
         run: npm run compile
 
     needs: setup
-  
+
   coverage:
     runs-on: ubuntu-latest
     steps:

diff --git a/.gitignore b/.gitignore
@@ -36,7 +36,8 @@ src/*.map
 tslint.json
 tsconfig.test.json
 .prettierignore
-.storybook
-storybook/index.js
 .doc
-.umi
+.umi
+.dumi/tmp
+.dumi/tmp-test
+.dumi/tmp-production
diff --git a/README.md b/README.md
@@ -4,11 +4,13 @@
 
 React Select
 
+<!-- prettier-ignore -->
 [![NPM version][npm-image]][npm-url]
 [![npm download][download-image]][download-url]
 [![build status][github-actions-image]][github-actions-url]
-[![Test coverage][codecov-image]][codecov-url]
+[![Codecov][codecov-image]][codecov-url]
 [![bundle size][bundlephobia-image]][bundlephobia-url]
+[![dumi][dumi-image]][dumi-url]
 
 [npm-image]: http://img.shields.io/npm/v/rc-select.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/rc-select
@@ -26,6 +28,8 @@ React Select
 [download-url]: https://npmjs.org/package/rc-select
 [bundlephobia-url]: https://bundlephobia.com/package/rc-select
 [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-select
+[dumi-url]: https://github.com/umijs/dumi
+[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
 
 ## Screenshots
 
@@ -50,6 +54,7 @@ React Select
 
 ```jsx | pure
 import Select, { Option } from 'rc-select';
+import 'rc-select/assets/index.css';
 
 export default () => (
   <Select>
@@ -64,6 +69,7 @@ export default () => (
 
 ### Select props
 
+<!-- prettier-ignore -->
 | name | description | type | default |
 | --- | --- | --- | --- |
 | id | html id to set on the component wrapper | String | '' |
@@ -73,35 +79,34 @@ export default () => (
 | animation | dropdown animation name. only support slide-up now | String | '' |
 | transitionName | dropdown css animation name | String | '' |
 | choiceTransitionName | css animation name for selected items at multiple mode | String | '' |
-| dropdownMatchSelectWidth | whether dropdown's width is same with select | bool | true |
+| dropdownMatchSelectWidth | whether dropdown's width is same with select | boolean | true |
 | dropdownClassName | additional className applied to dropdown | String | - |
-| dropdownStyle | additional style applied to dropdown | Object | {} |
-| dropdownAlign | additional align applied to dropdown | Object | {} |
-| dropdownMenuStyle | additional style applied to dropdown menu | Object | {} |
+| dropdownStyle | additional style applied to dropdown | React.CSSProperties | {} |
+| dropdownAlign | additional align applied to dropdown | [AlignType](https://github.com/react-component/trigger/blob/728d7e92394aa4b3214650f743fc47e1382dfa68/src/interface.ts#L25-L80) | {} |
+| dropdownMenuStyle | additional style applied to dropdown menu | Object | React.CSSProperties |
 | notFoundContent | specify content to show when no result matches. | ReactNode | 'Not Found' |
 | tokenSeparators | separator used to tokenize on tag/multiple mode | string[]? |  |
-| open | control select open | bool |  |
-| defaultOpen | control select default open | bool |  |
+| open | control select open | boolean |  |
+| defaultOpen | control select default open | boolean |  |
 | placeholder | select placeholder | React Node |  |
-| showSearch | whether show search input in single mode | bool | true |
-| showArrow | whether show arrow | bool | true (single mode), false (multiple mode) |
-| allowClear | whether allowClear | bool | false |
-| tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | bool | false |
+| showSearch | whether show search input in single mode | boolean | true |
+| allowClear | whether allowClear | boolean | { clearIcon?: ReactNode } | false |
+| tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | boolean | false |
 | tagRender | render custom tags. | (props: CustomTagProps) => ReactNode | - |
 | maxTagTextLength | max tag text length to show | number | - |
 | maxTagCount | max tag count to show | number | - |
 | maxTagPlaceholder | placeholder for omitted values | ReactNode/function(omittedValues) | - |
-| combobox | enable combobox mode(can not set multiple at the same time) | bool | false |
-| multiple | whether multiple select | bool | false |
-| disabled | whether disabled select | bool | false |
-| filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | bool | true/Function(inputValue:string, option:Option) |
+| combobox | enable combobox mode(can not set multiple at the same time) | boolean | false |
+| multiple | whether multiple select | boolean | false |
+| disabled | whether disabled select | boolean | false |
+| filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | boolean | true/Function(inputValue:string, option:Option) |
 | optionFilterProp | which prop value of option will be used for filter if filterOption is true | String | 'value' |
 | filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. | Function(optionA:Option, optionB: Option) | - |
 | optionLabelProp | render option value or option children as content of select | String: 'value'/'children' | 'value' |
 | defaultValue | initial selected option(s) | String \| String[] | - |
 | value | current selected option(s) | String \| String[] \| {key:String, label:React.Node} \| {key:String, label:React.Node}[] | - |
-| labelInValue | whether to embed label in value, see above value type. Not support `combobox` mode | Bool | false |
-| backfill | whether backfill select option to search input (Only works in single and combobox mode) | Bool | false |
+| labelInValue | whether to embed label in value, see above value type. Not support `combobox` mode | boolean | false |
+| backfill | whether backfill select option to search input (Only works in single and combobox mode) | boolean | false |
 | onChange | called when select an option or input value change(combobox) | function(value, option:Option \| Option[]) | - |
 | onSearch | called when input changed | function | - |
 | onBlur | called when blur | function | - |
@@ -110,20 +115,21 @@ export default () => (
 | onSelect | called when a option is selected. param is option's value and option instance | Function(value, option:Option) | - |
 | onDeselect | called when a option is deselected. param is option's value. only called for multiple or tags | Function(value, option:Option) | - |
 | onInputKeyDown | called when key down on input | Function(event) | - |
-| defaultActiveFirstOption | whether active first option by default | bool | true |
+| defaultActiveFirstOption | whether active first option by default | boolean | true |
 | getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} |
 | getInputElement | customize input element | function(): Element | - |
 | showAction | actions trigger the dropdown to show | String[]? | - |
-| autoFocus | focus select after mount | Bool | - |
+| autoFocus | focus select after mount | boolean | - |
 | autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true |
-| inputIcon | specify the select arrow icon | ReactNode | - |
+| suffixIcon | specify the select arrow icon | ReactNode | - |
 | clearIcon | specify the clear icon | ReactNode | - |
 | removeIcon | specify the remove icon | ReactNode | - |
 | menuItemSelectedIcon | specify the item selected icon | ReactNode \| (props: MenuItemProps) => ReactNode | - |
-| dropdownRender | render custom dropdown menu | (menu: React.Node, props: MenuProps) => ReactNode | - |
-| loading | show loading icon in arrow | Boolean | false |
-| virtual | Disable virtual scroll | Boolean | true |
+| dropdownRender | render custom dropdown menu | (menu: React.Node) => ReactNode | - |
+| loading | show loading icon in arrow | boolean | false |
+| virtual | Disable virtual scroll | boolean | true |
 | direction | direction of dropdown | 'ltr' \| 'rtl' | 'ltr' |
+| optionRender | Custom rendering options | (oriOption: FlattenOptionData\<BaseOptionType\> , info: { index: number }) => React.ReactNode | - |
 
 ### Methods
 
@@ -137,7 +143,7 @@ export default () => (
 | name | description | type | default |
 | --- | --- | --- | --- |
 | className | additional class to option | String | '' |
-| disabled | no effect for click or keydown for this item | bool | false |
+| disabled | no effect for click or keydown for this item | boolean | false |
 | key | if react want you to set key, then key is same as value, you can omit value | String/number | - |
 | value | default filter by this attribute. if react want you to set key, then key is same as value, you can omit value | String/number | - |
 | title | if you are not satisfied with auto-generated `title` which is show while hovering on selected value, you can customize it with this property | String | - |

diff --git a/docs/demo/auto-adjust-dropdown.md b/docs/demo/auto-adjust-dropdown.md
@@ -1,2 +1,8 @@
-## auto-adjust-dropdown
-<code src="../examples/auto-adjust-dropdown.tsx">
+---
+title: auto-adjust-dropdown
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/auto-adjust-dropdown.tsx"></code>
diff --git a/docs/demo/combobox.md b/docs/demo/combobox.md
@@ -1,2 +1,8 @@
-## combobox
-<code src="../examples/combobox.tsx">
+---
+title: combobox
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/combobox.tsx"></code>
diff --git a/docs/demo/controlled.md b/docs/demo/controlled.md
@@ -1,2 +1,8 @@
-## controlled
-<code src="../examples/controlled.tsx">
+---
+title: controlled
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/controlled.tsx"></code>
diff --git a/docs/demo/custom-icon.md b/docs/demo/custom-icon.md
@@ -1,2 +1,8 @@
-## custom-icon
-<code src="../examples/custom-icon.tsx">
+---
+title: custom-icon
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/custom-icon.tsx"></code>
diff --git a/docs/demo/custom-selector.md b/docs/demo/custom-selector.md
@@ -1,2 +1,8 @@
-## custom-selector
-<code src="../examples/custom-selector.tsx">
+---
+title: custom-selector
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/custom-selector.tsx"></code>
diff --git a/docs/demo/custom-tags.md b/docs/demo/custom-tags.md
@@ -1,2 +1,8 @@
-## custom-tags
-<code src="../examples/custom-tags.tsx">
+---
+title: custom-tags
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/custom-tags.tsx"></code>
diff --git a/docs/demo/dropdownRender.md b/docs/demo/dropdownRender.md
@@ -1,2 +1,8 @@
-## dropdownRender
-<code src="../examples/dropdownRender.tsx">
+---
+title: dropdownRender
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/dropdownRender.tsx"></code>
diff --git a/docs/demo/email.md b/docs/demo/email.md
@@ -1,2 +1,8 @@
-## email
-<code src="../examples/email.tsx">
+---
+title: email
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/email.tsx"></code>
diff --git a/docs/demo/filterSort.md b/docs/demo/filterSort.md
@@ -1,2 +1,8 @@
-## filterSort
-<code src="../examples/filterSort.tsx">
+---
+title: filterSort
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/filterSort.tsx"></code>
diff --git a/docs/demo/force-suggest.md b/docs/demo/force-suggest.md
@@ -1,2 +1,8 @@
-## force-suggest
-<code src="../examples/force-suggest.tsx">
+---
+title: force-suggest
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/force-suggest.tsx"></code>
diff --git a/docs/demo/getPopupContainer.md b/docs/demo/getPopupContainer.md
@@ -1,2 +1,8 @@
-## getPopupContainer
-<code src="../examples/getPopupContainer.tsx">
+---
+title: getPopupContainer
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/getPopupContainer.tsx"></code>
diff --git a/docs/demo/loading.md b/docs/demo/loading.md
@@ -1,2 +1,8 @@
-## loading
-<code src="../examples/loading.tsx">
+---
+title: loading
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/loading.tsx"></code>
diff --git a/docs/demo/mul-suggest.md b/docs/demo/mul-suggest.md
@@ -1,2 +1,8 @@
-## mul-suggest
-<code src="../examples/mul-suggest.tsx">
+---
+title: mul-suggest
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/mul-suggest.tsx"></code>