🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

@rc-component/select

Package Overview
Dependencies
Maintainers
5
Versions
60
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rc-component/select - npm Package Compare versions

Comparing version
1.9.0
 to
1.9.1
+21
LICENSE
MIT License
Copyright (c) 2019-present react-component
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+168
README.zh-CN.md
<div align="center">
<h1>@rc-component/select</h1>
<p><sub><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /> Ant Design 生态的一部分。</sub></p>
<p>🎯 React 选择器组件，支持单选、多选、搜索、标签和自定义渲染。</p>
<p>
<a href="https://npmjs.org/package/@rc-component/select"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/select.svg?style=flat-square"></a>
<a href="https://npmjs.org/package/@rc-component/select"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/select.svg?style=flat-square"></a>
<a href="https://github.com/react-component/select/actions/workflows/test.yml"><img alt="build status" src="https://github.com/react-component/select/actions/workflows/test.yml/badge.svg"></a>
<a href="https://app.codecov.io/gh/react-component/select"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/select/master.svg?style=flat-square"></a>
<a href="https://bundlephobia.com/package/@rc-component/select"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/select?style=flat-square"></a>
<a href="https://github.com/umijs/dumi"><img alt="dumi" src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square"></a>
</p>
</div>
<p align="center"><a href="./README.md">English</a> | 简体中文</p>
## 特性
| 范围 | 支持 |
| ---- | -------------------------------------------- |
| 数据 | `options` 数据，旧版 `Option` 子项，分组选项 |
| 模式 | 单选、`multiple`、`tags` 和 `combobox` 模式 |
| 搜索 | 受控搜索、自定义过滤和自定义排序 |
| 渲染 | 自定义选项、标签、选中项、清除图标和菜单图标 |
| 规模 | 支持可配置项高度的虚拟滚动 |
## 安装
```bash
npm install @rc-component/select
```
## 使用
```tsx | pure
import Select from '@rc-component/select';
import '@rc-component/select/assets/index.css';
export default () => (
<Select
placeholder="Select a user"
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'yiminghe', label: 'Yiminghe' },
]}
/>
);
```
## 示例
运行本地 dumi 站点：
```bash
npm install
npm start
```
然后打开 `http://localhost:8000`。
## API
### Select
Select 还接受来自 `BaseSelect` 的公共属性，但由 Select 重新定义的 `showSearch` 除外。
| 名称 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoClearSearchValue | 已弃用。请改用 `showSearch.autoClearSearchValue`。 | boolean | true |
| backfill | 将活动选项回填到输入中。仅适用于 `combobox` 模式。 | boolean | false |
| children | 旧版选项子节点。新代码推荐使用 `options`。 | ReactNode | - |
| classNames | 语义 className。 | `Partial<Record<SemanticName, string>>` | - |
| defaultActiveFirstOption | 默认情况下第一个选项是否处于活动状态。 | boolean | true |
| defaultValue | 初始选中值。 | `ValueType` \| null | - |
| direction | 下拉方向。 | `ltr` \| `rtl` | `ltr` |
| fieldNames | 自定义选项字段名称。 | `FieldNames` | - |
| filterOption | 已弃用。请改用 `showSearch.filterOption`。 | boolean \| `FilterFunc<OptionType>` | - |
| filterSort | 已弃用。请改用 `showSearch.filterSort`。 | `(optionA, optionB, info) => number` | - |
| labelInValue | 返回标记值对象而不是原始值。 | boolean | false |
| labelRender | 自定义选定的标签渲染。 | `(props: LabelInValueType) => ReactNode` | - |
| listHeight | 弹层列表高度。 | number | 200 |
| listItemHeight | 弹层列表项的高度。 | number | 20 |
| maxCount | 最大选定项目数。 | number | - |
| menuItemSelectedIcon | 自定义选定的选项图标。 | `RenderNode` | - |
| mode | 选择模式。 | `combobox` \| `multiple` \| `tags` | - |
| onActive | 当活动值改变时调用。 | `(value: ValueType) => void` | - |
| onChange | 当选定值更改时调用。 | `(value: ValueType, option?: OptionType \| OptionType[]) => void` | - |
| onDeselect | 当取消选择某个值时调用。 | `(value, option) => void` | - |
| onSearch | 已弃用。请改用 `showSearch.onSearch`。 | `(value: string) => void` | - |
| onSelect | 选择值时调用。 | `(value, option) => void` | - |
| optionFilterProp | 已废弃。请使用 `showSearch.optionFilterProp`。 | string \| string[] | - |
| optionLabelProp | 用作所选标签的选项道具。 | string | - |
| optionRender | 自定义选项渲染器。 | `(oriOption, info: { index: number }) => ReactNode` | - |
| options | 选项数据。 | `OptionType[]` | - |
| searchValue | 已弃用。请改用 `showSearch.searchValue`。 | string | - |
| showSearch | 启用搜索或配置搜索行为。 | boolean \| `SearchConfig<OptionType>` | - |
| styles | 语义化样式。 | `Partial<Record<SemanticName, CSSProperties>>` | - |
| value | 受控选中值。 | `ValueType` \| null | - |
| virtual | 设置为 `false` 时禁用虚拟滚动。 | boolean | true |
### 方法
| 名称 | 说明 | 参数 |
| ----- | ------------ | ---- |
| blur | 移除焦点。 | - |
| focus | 聚焦选择器。 | - |
### SearchConfig
| 名称 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoClearSearchValue | 在多种模式下选择或取消选择后清除搜索输入。 | boolean | true |
| filterOption | 按搜索输入过滤选项。 | boolean \| `FilterFunc<OptionType>` | - |
| filterSort | 对过滤的选项进行排序。 | `(optionA, optionB, info: { searchValue: string }) => number` | - |
| onSearch | 当搜索输入更改时调用。 | `(value: string) => void` | - |
| optionFilterProp | 启用 `filterOption` 时用于过滤的选项属性。 | string \| string[] | - |
| searchValue | 受控搜索输入值。 | string | - |
### Option
`Option` 是一个旧的占位符组件。对于新用途，更喜欢 `options` 属性。
| 名称 | 说明 | 类型 | 默认值 |
| --------- | ---------------- | ------------------------ | ------ |
| children | 选项标签。 | ReactNode | - |
| className | 选项 className。 | string | - |
| disabled | 禁用该选项。 | boolean | false |
| title | 选项标题。 | string | - |
| value | 选项值。 | string \| number \| null | - |
### OptGroup
`OptGroup` 是一个旧的占位符组件。优选嵌套 `options` 数据以供新用途。
| 名称 | 说明 | 类型 | 默认值 |
| --------- | ---------------- | --------- | ------ |
| children | 组选项。 | ReactNode | - |
| className | 分组 className。 | string | - |
| disabled | 禁用该组。 | boolean | false |
| label | Group label. | ReactNode | - |
| title | Group title. | string | - |
## 本地开发
```bash
npm install
npm start
npm test
npm run lint
npm run tsc
npm run compile
```
dumi 站点默认运行在 `http://localhost:8000`。
## 发布
```bash
npm run prepublishOnly
```
包构建完成后，发布流程由 `@rc-component/np` 通过 `rc-np` 命令处理。
## 许可证
@rc-component/select 基于 [MIT](./LICENSE) 许可证发布。
+1
-1
es/Select.d.ts

@@ -128,3 +128,3 @@ /**

}
declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
Option: typeof Option;

@@ -131,0 +131,0 @@ OptGroup: typeof OptGroup;

+3
-1
es/SelectInput/Content/Placeholder.js

@@ -24,3 +24,5 @@ import * as React from 'react';

style: {
visibility: show ? 'visible' : 'hidden',
...(show ? {} : {
visibility: 'hidden'
}),
...styles?.placeholder

@@ -27,0 +29,0 @@ }

+1
-1
lib/Select.d.ts

@@ -128,3 +128,3 @@ /**

}
declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
Option: typeof Option;

@@ -131,0 +131,0 @@ OptGroup: typeof OptGroup;

+3
-1
lib/SelectInput/Content/Placeholder.js

@@ -33,3 +33,5 @@ "use strict";

style: {
visibility: show ? 'visible' : 'hidden',
...(show ? {} : {
visibility: 'hidden'
}),
...styles?.placeholder

@@ -36,0 +38,0 @@ }

+29
-27
package.json
{
"name": "@rc-component/select",
"version": "1.9.0",
"version": "1.9.1",
"description": "React Select",

@@ -16,3 +16,3 @@ "engines": {

"module": "./es/index",
"types": "./lib/index.d.ts",
"types": "./es/index.d.ts",
"files": [

@@ -24,9 +24,9 @@ "assets/*.css",

],
"homepage": "http://github.com/react-component/select",
"homepage": "https://react-component.github.io/select",
"repository": {
"type": "git",
"url": "git@github.com:react-component/select.git"
"url": "https://github.com/react-component/select.git"
},
"bugs": {
"url": "http://github.com/react-component/select/issues"
"url": "https://github.com/react-component/select/issues"
},

@@ -43,4 +43,3 @@ "license": "MIT",

"test": "rc-test",
"tsc": "tsc --noEmit",
"now-build": "npm run build"
"tsc": "tsc --noEmit"
},

@@ -62,27 +61,30 @@ "lint-staged": {

"devDependencies": {
"@rc-component/dialog": "^1.10.0",
"@rc-component/father-plugin": "^2.2.0",
"@rc-component/np": "^1.0.0",
"@testing-library/jest-dom": "^6.4.5",
"@testing-library/react": "^15.0.6",
"@types/jest": "^29.5.12",
"@types/node": "^24.5.2",
"@types/react": "^18.3.0",
"@types/react-dom": "^18.3.0",
"@rc-component/np": "^1.0.4",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^15.0.7",
"@types/jest": "^29.5.14",
"@types/node": "^26.0.1",
"@types/react": "^18.3.31",
"@types/react-dom": "^18.3.7",
"@umijs/fabric": "^4.0.1",
"babel-jest": "^29.6.1",
"dumi": "^2.2.13",
"eslint": "^8.55.0",
"father": "^4.0.0",
"husky": "^9.1.5",
"babel-jest": "^29.7.0",
"dumi": "^2.4.35",
"eslint": "^8.57.1",
"father": "^4.6.23",
"husky": "^9.1.7",
"jsonp": "^0.2.1",
"less": "^4.2.0",
"lint-staged": "^15.2.9",
"prettier": "^3.1.1",
"less": "^4.6.7",
"lint-staged": "^16.4.0",
"prettier": "^3.9.0",
"querystring": "^0.2.1",
"rc-dialog": "^9.0.0",
"rc-test": "^7.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^5.2.2"
"rc-test": "^7.1.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"typescript": "^5.9.3"
},
"publishConfig": {
"access": "public"
}
}
+125
-152
README.md

@@ -1,195 +0,168 @@

# @rc-component/select
<div align="center">
<h1>@rc-component/select</h1>
<p><sub><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /> Part of the Ant Design ecosystem.</sub></p>
<p>🎯 Composable Select component for React, with search, async-friendly option data, custom rendering, and virtual scrolling.</p>
---
<p>
<a href="https://npmjs.org/package/@rc-component/select"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/select.svg?style=flat-square"></a>
<a href="https://npmjs.org/package/@rc-component/select"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/select.svg?style=flat-square"></a>
<a href="https://github.com/react-component/select/actions/workflows/test.yml"><img alt="build status" src="https://github.com/react-component/select/actions/workflows/test.yml/badge.svg"></a>
<a href="https://app.codecov.io/gh/react-component/select"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/select/master.svg?style=flat-square"></a>
<a href="https://bundlephobia.com/package/@rc-component/select"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/select?style=flat-square"></a>
<a href="https://github.com/umijs/dumi"><img alt="dumi" src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square"></a>
</p>
</div>
React Select Component.
<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>
<!-- prettier-ignore -->
[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]
[![build status][github-actions-image]][github-actions-url]
[![Codecov][codecov-image]][codecov-url]
[![bundle size][bundlephobia-image]][bundlephobia-url]
[![dumi][dumi-image]][dumi-url]
## Highlights
[npm-image]: https://img.shields.io/npm/v/@rc-component/select.svg?style=flat-square
[npm-url]: http://npmjs.org/package/@rc-component/select
[github-actions-image]: https://github.com/react-component/select/actions/workflows/test.yml/badge.svg
[github-actions-url]: https://github.com/react-component/select/actions/workflows/test.yml
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/select/master.svg?style=flat-square
[codecov-url]: https://app.codecov.io/gh/react-component/select
[david-url]: https://david-dm.org/react-component/select
[david-image]: https://david-dm.org/react-component/select/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/select?type=dev
[david-dev-image]: https://david-dm.org/react-component/select/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@rc-component/select.svg?style=flat-square
[download-url]: https://npmjs.org/package/@rc-component/select
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/select
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/select
[dumi-url]: https://github.com/umijs/dumi
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
| Area | Support |
| --------- | ---------------------------------------------------------- |
| Data | `options` data, legacy `Option` children, grouped options |
| Modes | Single select, `multiple`, `tags`, and `combobox` |
| Search | Controlled search, custom filter, custom sort |
| Rendering | Custom option, label, selected item, clear, and menu icons |
| Scale | Virtual scrolling with configurable item height |
## Screenshots
## Install
<img src="https://gw.alipayobjects.com/zos/antfincdn/d13eUZlgdJ/tupian.png" />
```bash
npm install @rc-component/select
```
## Feature
- support IE11+,Chrome,Firefox,Safari
### Keyboard
- Open select (focus input || focus and click)
- KeyDown/KeyUp/Enter to navigate menu
## install
[![@rc-component/select](https://nodei.co/npm/@rc-component/select.png)](https://npmjs.org/package/@rc-component/select)
## Usage
### basic use
```jsx | pure
import Select, { Option } from '@rc-component/select';
```tsx | pure
import Select from '@rc-component/select';
import '@rc-component/select/assets/index.css';
export default () => (
<Select>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
<Select
placeholder="Select a user"
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'yiminghe', label: 'Yiminghe' },
]}
/>
);
```
## Examples
Run the local dumi site:
```bash
npm install
npm start
```
Then open `http://localhost:8000`.
## API
### Select props
### Select
<!-- prettier-ignore -->
| name | description | type | default |
Select also accepts public props from `BaseSelect`, except `showSearch`, which is redefined by Select.
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| id | html id to set on the component wrapper | String | '' |
| className | additional css class of root dom node | String | '' |
| data-\* | html data attributes to set on the component wrapper | String | '' |
| prefixCls | prefix class | String | '' |
| 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 | boolean | true |
| dropdownClassName | additional className applied to dropdown | String | - |
| 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[] \| ((input: string) => string[])` | |
| open | control select open | boolean | |
| defaultOpen | control select default open | boolean | |
| placeholder | select placeholder | React Node | |
| showSearch | whether show search input in single mode | boolean \| Object | 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) | boolean | false |
| multiple | whether multiple select | boolean | false |
| disabled | whether disabled select | boolean | false |
| 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 | 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[]) | - |
| onBlur | called when blur | function | - |
| onFocus | called when focus | function | - |
| onPopupScroll | called when menu is scrolled | function | - |
| 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 | 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 | boolean | - |
| prefix | specify the select prefix icon or text | 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) => 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 | - |
| labelRender | Custom rendering label | (props: LabelInValueType) => React.ReactNode | - |
| maxCount | The max number of items can be selected | number | - |
| autoClearSearchValue | Deprecated. Use `showSearch.autoClearSearchValue` instead. | boolean | true |
| backfill | Backfill the active option into the input. Only works in `combobox` mode. | boolean | false |
| children | Legacy option children. Prefer `options` for new code. | ReactNode | - |
| classNames | Semantic class names. | `Partial<Record<SemanticName, string>>` | - |
| defaultActiveFirstOption | Whether the first option is active by default. | boolean | true |
| defaultValue | Initial selected value. | `ValueType` \| null | - |
| direction | Dropdown direction. | `ltr` \| `rtl` | `ltr` |
| fieldNames | Customize option field names. | `FieldNames` | - |
| filterOption | Deprecated. Use `showSearch.filterOption` instead. | boolean \| `FilterFunc<OptionType>` | - |
| filterSort | Deprecated. Use `showSearch.filterSort` instead. | `(optionA, optionB, info) => number` | - |
| labelInValue | Return labeled value objects instead of raw values. | boolean | false |
| labelRender | Custom selected label render. | `(props: LabelInValueType) => ReactNode` | - |
| listHeight | Popup list height. | number | 200 |
| listItemHeight | Popup list item height. | number | 20 |
| maxCount | Maximum selected item count. | number | - |
| menuItemSelectedIcon | Custom selected option icon. | `RenderNode` | - |
| mode | Select mode. | `combobox` \| `multiple` \| `tags` | - |
| onActive | Called when the active value changes. | `(value: ValueType) => void` | - |
| onChange | Called when selected value changes. | `(value: ValueType, option?: OptionType \| OptionType[]) => void` | - |
| onDeselect | Called when a value is deselected. | `(value, option) => void` | - |
| onSearch | Deprecated. Use `showSearch.onSearch` instead. | `(value: string) => void` | - |
| onSelect | Called when a value is selected. | `(value, option) => void` | - |
| optionFilterProp | Deprecated. Use `showSearch.optionFilterProp` instead. | string \| string[] | - |
| optionLabelProp | Option prop used as the selected label. | string | - |
| optionRender | Custom option renderer. | `(oriOption, info: { index: number }) => ReactNode` | - |
| options | Option data. | `OptionType[]` | - |
| searchValue | Deprecated. Use `showSearch.searchValue` instead. | string | - |
| showSearch | Enable search or configure search behavior. | boolean \| `SearchConfig<OptionType>` | - |
| styles | Semantic styles. | `Partial<Record<SemanticName, CSSProperties>>` | - |
| value | Controlled selected value. | `ValueType` \| null | - |
| virtual | Disable virtual scrolling when set to `false`. | boolean | true |
### Methods
| name | description | parameters | return |
| ----- | ------------------------- | ---------- | ------ |
| focus | focus select programmably | - | - |
| blur | blur select programmably | - | - |
| Name | Description | Parameters |
| ----- | ------------------- | ---------- |
| blur | Remove focus. | - |
| focus | Focus the selector. | - |
### showSearch
### SearchConfig
| name | description | type | default |
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true |
| filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | boolean\| (inputValue: string, option: Option) => boolean | true |
| 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) | - |
| optionFilterProp | which prop value of option will be used for filter if filterOption is true | String | 'value' |
| searchValue | The current input "search" text | string | - |
| onSearch | called when input changed | function | - |
| autoClearSearchValue | Clear search input after selecting or deselecting in multiple mode. | boolean | true |
| filterOption | Filter options by search input. | boolean \| `FilterFunc<OptionType>` | - |
| filterSort | Sort filtered options. | `(optionA, optionB, info: { searchValue: string }) => number` | - |
| onSearch | Called when search input changes. | `(value: string) => void` | - |
| optionFilterProp | Option prop used for filtering when `filterOption` is enabled. | string \| string[] | - |
| searchValue | Controlled search input value. | string | - |
### Option props
### Option
| name | description | type | default |
| --- | --- | --- | --- |
| className | additional class to option | String | '' |
| 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 | - |
`Option` is a legacy placeholder component. Prefer the `options` prop for new usage.
### OptGroup props
| Name | Description | Type | Default |
| --------- | ------------------- | ------------------------ | ------- |
| children | Option label. | ReactNode | - |
| className | Option class name. | string | - |
| disabled | Disable the option. | boolean | false |
| title | Option title. | string | - |
| value | Option value. | string \| number \| null | - |
| name | description | type | default |
| --- | --- | --- | --- |
| label | group label | String/React.Element | - |
| key | - | String | - |
| value | default filter by this attribute. if react want you to set key, then key is same as value, you can omit value | String | - |
| className | same as `Option props` | String | '' |
| title | same as `Option props` | String | - |
### OptGroup
`OptGroup` is a legacy placeholder component. Prefer nested `options` data for new usage.
| Name | Description | Type | Default |
| --------- | ------------------ | --------- | ------- |
| children | Group options. | ReactNode | - |
| className | Group class name. | string | - |
| disabled | Disable the group. | boolean | false |
| label | Group label. | ReactNode | - |
| title | Group title. | string | - |
## Development
```
```bash
npm install
npm start
npm test
npm run lint
npm run tsc
npm run compile
```
## Example
The dumi site runs at `http://localhost:8000` by default.
local example: http://localhost:9001/
## Release
online example: https://select-react-component.vercel.app/
## Test Case
```bash
npm run prepublishOnly
```
npm test
```
## Coverage
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
```
npm run coverage
```
## License
@rc-component/select is released under the MIT license.
@rc-component/select is released under the [MIT](./LICENSE) license.