@synerise/ds-select 1.3.34 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -0
- package/CLAUDE.md +136 -92
- package/README.md +163 -99
- package/dist/Option.d.ts +28 -0
- package/dist/Option.js +5 -0
- package/dist/Select.d.ts +82 -17
- package/dist/Select.js +386 -64
- package/dist/Select.styles.d.ts +42 -11
- package/dist/Select.styles.js +98 -66
- package/dist/Select.types.d.ts +141 -11
- package/dist/components/OptionList.d.ts +23 -0
- package/dist/components/OptionList.js +32 -0
- package/dist/components/SelectorContent.d.ts +34 -0
- package/dist/components/SelectorContent.js +97 -0
- package/dist/hooks/useResponsiveTagCount.d.ts +27 -0
- package/dist/hooks/useResponsiveTagCount.js +72 -0
- package/dist/hooks/useSelectOptions.d.ts +28 -0
- package/dist/hooks/useSelectOptions.js +41 -0
- package/dist/index.d.ts +3 -1
- package/dist/index.js +6 -1
- package/dist/utils/getOptionsFromChildren.d.ts +11 -0
- package/dist/utils/getOptionsFromChildren.js +41 -0
- package/dist/utils/helpers.d.ts +9 -0
- package/dist/utils/helpers.js +18 -0
- package/package.json +8 -5
- package/dist/assets/style/index-tn0RQdqM.css +0 -0
- package/dist/style/index.css +0 -1
package/README.md
CHANGED
|
@@ -3,9 +3,13 @@ id: select
|
|
|
3
3
|
title: Select
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
Select UI Component
|
|
6
|
+
Select UI Component.
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
A fully DS-native select (no Ant Design): a selector trigger plus a floating options
|
|
9
|
+
dropdown built on [`@synerise/ds-dropdown`](https://design.synerise.com/docs/components/dropdown)
|
|
10
|
+
(floating-ui) and `@synerise/ds-list-item`, wrapped in a `FormField` label/description/error
|
|
11
|
+
layer. Supports single-select, `multiple` (chip selector), `tags` (free-text) and in-selector
|
|
12
|
+
search, with full keyboard navigation and combobox/listbox ARIA.
|
|
9
13
|
|
|
10
14
|
## Installation
|
|
11
15
|
|
|
@@ -22,112 +26,172 @@ pnpm add @synerise/ds-select
|
|
|
22
26
|
```jsx
|
|
23
27
|
import Select from '@synerise/ds-select';
|
|
24
28
|
|
|
25
|
-
|
|
29
|
+
// Options as data
|
|
30
|
+
<Select
|
|
31
|
+
label="Platform"
|
|
32
|
+
description="Choose your platform"
|
|
33
|
+
defaultValue="insta"
|
|
34
|
+
options={[
|
|
35
|
+
{ value: 'insta', label: 'Instagram' },
|
|
36
|
+
{ value: 'fb', label: 'Facebook' },
|
|
37
|
+
]}
|
|
38
|
+
/>;
|
|
39
|
+
|
|
40
|
+
// Or declarative <Select.Option> children (read only when `options` is absent)
|
|
41
|
+
const { Option } = Select;
|
|
26
42
|
|
|
27
43
|
<Select defaultValue="insta">
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
<Option value="fb">Facebook</Option>
|
|
31
|
-
</OptGroup>
|
|
32
|
-
<OptGroup label="Followers">
|
|
33
|
-
<Option value="1M">1 Million</Option>
|
|
34
|
-
<Option value="1B">1 Billion</Option>
|
|
35
|
-
</OptGroup>
|
|
44
|
+
<Option value="insta">Instagram</Option>
|
|
45
|
+
<Option value="fb">Facebook</Option>
|
|
36
46
|
</Select>;
|
|
37
47
|
```
|
|
38
48
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<iframe src="/storybook-static/iframe.html?id=components-select-basic--default"></iframe>
|
|
49
|
+
> There is **no `OptGroup`** — the antd `Select.OptGroup` is intentionally not reimplemented.
|
|
42
50
|
|
|
43
|
-
##
|
|
51
|
+
## Examples
|
|
44
52
|
|
|
53
|
+
<iframe src="/storybook-static/iframe.html?id=components-select--default"></iframe>
|
|
45
54
|
<iframe src="/storybook-static/iframe.html?id=components-select--multiple-mode"></iframe>
|
|
55
|
+
<iframe src="/storybook-static/iframe.html?id=components-select--with-search"></iframe>
|
|
56
|
+
<iframe src="/storybook-static/iframe.html?id=components-select--tags"></iframe>
|
|
46
57
|
|
|
47
|
-
##
|
|
58
|
+
## API
|
|
48
59
|
|
|
49
|
-
|
|
60
|
+
`Select` also extends `FormFieldCommonProps` (`label`, `description`, `errorText`, `tooltip`,
|
|
61
|
+
`tooltipConfig`) and `AriaAttributes`, and forwards native `data-*` / `aria-*` attributes to the
|
|
62
|
+
select root.
|
|
63
|
+
|
|
64
|
+
### Value & selection
|
|
65
|
+
|
|
66
|
+
| Property | Description | Type | Default |
|
|
67
|
+
| --- | --- | --- | --- |
|
|
68
|
+
| value / defaultValue | Controlled / uncontrolled value. Array for `multiple` / `tags`. | `SelectValue` (`string \| number \| (string \| number)[]`) | - |
|
|
69
|
+
| mode | Omit for single-select; `multiple` = chips; `tags` = free-text create. | `'multiple' \| 'tags'` | - |
|
|
70
|
+
| onChange | Fired when the selection changes. | `(value, option?) => void` | - |
|
|
71
|
+
| onSelect / onDeselect | Fired when an option is added / removed. | `(value, option?) => void` | - |
|
|
72
|
+
| onClear | Fired when the clear affordance is used. | `() => void` | - |
|
|
73
|
+
| allowClear | Show a clear control (replaces the chevron on hover) when a value is set. | `boolean` | `false` |
|
|
74
|
+
| clearIcon | Custom clear icon. | `ReactNode` | - |
|
|
75
|
+
| clearTooltip | Tooltip on hover of the clear button. | `string` | - |
|
|
76
|
+
|
|
77
|
+
### Options & search
|
|
78
|
+
|
|
79
|
+
| Property | Description | Type | Default |
|
|
80
|
+
| --- | --- | --- | --- |
|
|
81
|
+
| options | Options as data; when absent, `<Select.Option>` children are read. | `SelectOption[]` | - |
|
|
82
|
+
| showSearch | Render an in-selector search input. | `boolean` | `false` |
|
|
83
|
+
| searchValue | Controlled search-input value (pairs with `onSearch`). | `string` | - |
|
|
84
|
+
| onSearch | Fired on each keystroke in the search input (remote search). | `(value: string) => void` | - |
|
|
85
|
+
| filterOption | Client filtering. `false` = remote (feed `options` from `onSearch`); a function = custom predicate. | `boolean \| ((input, option) => boolean)` | `true` |
|
|
86
|
+
| optionFilterProp | Option field the built-in filter matches against. | `string` | label |
|
|
87
|
+
| optionLabelProp | Option field rendered in the selector. | `string` | label |
|
|
88
|
+
| notFoundContent | Shown when there are no (filtered) options. | `ReactNode` | `'No data'` |
|
|
89
|
+
| tokenSeparators | Characters that create a tag in `tags` mode. | `string[]` | - |
|
|
90
|
+
| loading | Show a spinner inside the dropdown. | `boolean` | `false` |
|
|
91
|
+
| rowKey | Item key extractor for options / children. | `(option) => Key` | - |
|
|
92
|
+
|
|
93
|
+
### Dropdown
|
|
94
|
+
|
|
95
|
+
| Property | Description | Type | Default |
|
|
96
|
+
| --- | --- | --- | --- |
|
|
97
|
+
| open / defaultOpen | Controlled / initial dropdown visibility. | `boolean` | - |
|
|
98
|
+
| onDropdownVisibleChange | Fired when dropdown visibility changes. | `(open: boolean) => void` | - |
|
|
99
|
+
| onPopupScroll | Fired as the open option list scrolls (e.g. to page in more options). | `(event: UIEvent<HTMLDivElement>) => void` | - |
|
|
100
|
+
| getPopupContainer | Container the floating dropdown mounts into. | `(node: HTMLElement) => HTMLElement \| ParentNode \| null` | ds-utils default |
|
|
101
|
+
| placement | Dropdown placement. | `DropdownPlacement` | - |
|
|
102
|
+
| dropdownClassName / popupClassName | Class on the dropdown overlay (`popupClassName` is the antd v4 alias). | `string` | - |
|
|
103
|
+
| dropdownAlign | Dropdown alignment config (accepted for compatibility). | `object` | - |
|
|
104
|
+
| dropdownStyle | Inline style on the dropdown overlay. | `CSSProperties` | - |
|
|
105
|
+
| dropdownMatchSelectWidth | Match dropdown width to the selector; a number fixes the width (px). | `boolean \| number` | `true` |
|
|
106
|
+
| dropdownRender | Wrap the rendered option menu (custom footer / scroll container). | `(menu: ReactElement) => ReactNode` | - |
|
|
107
|
+
| listHeight | Max dropdown list height (px). | `number \| string` | `256` |
|
|
108
|
+
| listItemHeight | Fixed height per option row (accepted; list is non-virtualised). | `number` | - |
|
|
109
|
+
|
|
110
|
+
### Display & tags
|
|
111
|
+
|
|
112
|
+
| Property | Description | Type | Default |
|
|
113
|
+
| --- | --- | --- | --- |
|
|
114
|
+
| placeholder | Placeholder of the select. | `ReactNode` | - |
|
|
115
|
+
| showArrow | Show the dropdown chevron. | `boolean` | `true` |
|
|
116
|
+
| suffixIcon | Custom icon replacing the dropdown arrow. | `ReactNode` | - |
|
|
117
|
+
| maxTagCount | Max tags shown before collapsing (multiple / tags). | `number` | - |
|
|
118
|
+
| maxTagTextLength | Max characters per tag. | `number` | - |
|
|
119
|
+
| maxTagPlaceholder | Node shown for the collapsed overflow count. | `ReactNode` | - |
|
|
120
|
+
| size | Selector height. | `'default' \| 'middle' \| 'large'` | `'default'` |
|
|
121
|
+
| grey | `grey-050` selector background (when not in error state). | `boolean` | `false` |
|
|
122
|
+
|
|
123
|
+
### State & focus
|
|
124
|
+
|
|
125
|
+
| Property | Description | Type | Default |
|
|
126
|
+
| --- | --- | --- | --- |
|
|
127
|
+
| disabled | Disabled state; blocks interaction and opening. | `boolean` | `false` |
|
|
128
|
+
| readOnly | Non-interactive with readable styling (white bg, `default` cursor, `grey-600` text) instead of the disabled look. | `boolean` | - |
|
|
129
|
+
| error | Error visual state without a message. | `boolean` | - |
|
|
130
|
+
| errorText | Error message below the field; also activates the error state. | `ReactNode` | - |
|
|
131
|
+
| autoFocus | Focus the selector / search input on mount. | `boolean` | `false` |
|
|
132
|
+
| defaultActiveFirstOption | Accepted for antd back-compat; **no effect** — the dropdown always highlights the selected / first option on open. | `boolean` | - |
|
|
133
|
+
| tabIndex | Tab index forwarded to the selector / search input. | `number` | - |
|
|
134
|
+
| onFocus / onBlur | Fired when focus enters / leaves the whole select. | `(event) => void` | - |
|
|
135
|
+
| onClick | Click handler on the selector box. | `(event) => void` | - |
|
|
136
|
+
| onKeyDown / onInputKeyDown | Keydown on the selector / on the inner search input. | `(event) => void` | - |
|
|
137
|
+
|
|
138
|
+
### Layout & DS-specific
|
|
139
|
+
|
|
140
|
+
| Property | Description | Type | Default |
|
|
141
|
+
| --- | --- | --- | --- |
|
|
142
|
+
| label / description / tooltip / tooltipConfig | `FormField` chrome (label, helper text, info tooltip). | `ReactNode` / `TooltipProps` | - |
|
|
143
|
+
| prefixel / suffixel | Addon nodes attached to the left / right of the selector (shared border). | `ReactNode` | - |
|
|
144
|
+
| raw | Skip the `FormField` wrapper; render only the selector. `ref` attaches to the selector wrapper. | `boolean` | - |
|
|
145
|
+
| asFormElement | Force a 16 px bottom margin even when `errorText` / `description` are absent. | `boolean` | - |
|
|
146
|
+
| selectorStyle | Inline style object applied to the selector box. | `CSSObject` | - |
|
|
147
|
+
| style | Applied to the selector wrapper (flex row: selector + addons). | `CSSProperties` | - |
|
|
148
|
+
| className | Added to the outer container. | `string` | - |
|
|
149
|
+
| id | Forwarded to the search input. | `string` | - |
|
|
150
|
+
|
|
151
|
+
### `Select.Option` props
|
|
152
|
+
|
|
153
|
+
Marker component — renders nothing; `Select` reads its props to build the option list when the
|
|
154
|
+
`options` prop is absent.
|
|
155
|
+
|
|
156
|
+
| Property | Description | Type | Default |
|
|
157
|
+
| --- | --- | --- | --- |
|
|
158
|
+
| value | Option value. Optional — falls back to the element's React `key` when omitted. | `string \| number` | - |
|
|
159
|
+
| children | Rendered content / label of the option. | `ReactNode` | - |
|
|
160
|
+
| label | Rendered in the selector instead of `children` (antd `optionLabelProp`). | `ReactNode` | - |
|
|
161
|
+
| disabled | Disable this option. | `boolean` | `false` |
|
|
162
|
+
| title | Native hover title (any node; coerced to a string at render). | `ReactNode` | - |
|
|
163
|
+
| style | Forwarded to the rendered option row. | `CSSProperties` | - |
|
|
164
|
+
| className | Added to the option row. | `string` | - |
|
|
165
|
+
|
|
166
|
+
## Exports
|
|
167
|
+
|
|
168
|
+
```ts
|
|
169
|
+
import Select, {
|
|
170
|
+
Option,
|
|
171
|
+
SelectStyles, // styled-components namespace (Selector, SelectWrapper, …)
|
|
172
|
+
getOptionsFromChildren,
|
|
173
|
+
findOption,
|
|
174
|
+
} from '@synerise/ds-select';
|
|
175
|
+
|
|
176
|
+
import type {
|
|
177
|
+
SelectProps,
|
|
178
|
+
SelectValue,
|
|
179
|
+
SelectOption,
|
|
180
|
+
SelectMode,
|
|
181
|
+
SelectHandler,
|
|
182
|
+
RawValueType,
|
|
183
|
+
FilterOptionFn,
|
|
184
|
+
OptionProps,
|
|
185
|
+
} from '@synerise/ds-select';
|
|
186
|
+
```
|
|
50
187
|
|
|
51
|
-
##
|
|
188
|
+
## Notes
|
|
52
189
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
| defaultActiveFirstOption | Whether active first option by default | boolean | `true` |
|
|
62
|
-
| defaultOpen | Initial open state of dropdown | boolean | - |
|
|
63
|
-
| defaultValue | Initial selected option. | `string` / `string[]` / `number` / `number[]` / `LabeledValue` / `LabeledValue[]` | - |
|
|
64
|
-
| description | input description | ReactNode | - |
|
|
65
|
-
| disabled | Whether disabled select | boolean | `false` |
|
|
66
|
-
| dropdownClassName | className of dropdown menu | string | - |
|
|
67
|
-
| dropdownMatchSelectWidth | Whether dropdown's width is same with select. | boolean | `true` |
|
|
68
|
-
| dropdownMenuStyle | additional style applied to dropdown menu | React.CSSProperties | - |
|
|
69
|
-
| dropdownRender | Customize dropdown content | (menuNode: React.ReactNode, props) => React.ReactNode | - |
|
|
70
|
-
| dropdownStyle | style of dropdown menu | React.CSSProperties | - |
|
|
71
|
-
| errorText | error message, if provided input will be set in error state | ReactNode | - |
|
|
72
|
-
| error | if provided input will be set in error state, without error message | boolean | - |
|
|
73
|
-
| filterOption | If true, filter options by input, if function, filter options against it. | boolean / (inputValue: string / number / LabeledValue, option: Option) => void | `true` |
|
|
74
|
-
| firstActiveValue | Value of action option by default | string or string[] | - |
|
|
75
|
-
| grey | Turn on grey background of the component | boolean | false |
|
|
76
|
-
| getPopupContainer | Parent Node which the selector should be rendered to. Default to body | (triggerNode: React.ReactNode) => void | () => document.body |
|
|
77
|
-
| label | input label | ReactNode | - |
|
|
78
|
-
| labelInValue | whether to embed label in value | boolean | `false` |
|
|
79
|
-
| loading | indicate loading state | Boolean | `false` |
|
|
80
|
-
| maxTagCount | Max tag count to show | number | - |
|
|
81
|
-
| maxTagPlaceholder | Placeholder for not showing tags | React.ReactNode/function(omittedValues) | - |
|
|
82
|
-
| maxTagTextLength | Max tag count to show | number | - |
|
|
83
|
-
| menuItemSelectedIcon | The custom menuItemSelected icon with multiple options | React.ReactNode | - |
|
|
84
|
-
| mode | Set mode of Select | `default` / `multiple` / `tags` | `default` |
|
|
85
|
-
| notFoundContent | Specify content to show when no result matches. | string | `Not Found` |
|
|
86
|
-
| onBlur | Called when blur | (e: Event) => void | - |
|
|
87
|
-
| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | (value: string / number / LabeledValue, option: Option / Option[]) => void | - |
|
|
88
|
-
| onDeselect | Called when a option is deselected, param is the selected option's value. | (value: string / number / LabeledValue) => void | - |
|
|
89
|
-
| onDropdownVisibleChange | Call when dropdown open | (open: boolean) => void | - |
|
|
90
|
-
| onFocus | Called when focus | (e: Event) => void | - |
|
|
91
|
-
| onInputKeyDown | Called when key pressed | (e: Event) => void | - |
|
|
92
|
-
| onMouseEnter | Called when mouse enter | (e: Event) => void | - |
|
|
93
|
-
| onMouseLeave | Called when mouse leave | (e: Event) => void | - |
|
|
94
|
-
| onPopupScroll | Called when dropdown scrolls | (e: Event) => void | - |
|
|
95
|
-
| onSearch | Callback function that is fired when input changed. | (value: string) => void | |
|
|
96
|
-
| onSelect | Called when a option is selected, the params are option's value (or key) and option instance. | (value: string / number / LabeledValue, option:Option) => void | - |
|
|
97
|
-
| open | Controlled open state of dropdown | boolean | - |
|
|
98
|
-
| optionFilterProp | Which prop value of option will be used for filter if filterOption is `true` | string | value |
|
|
99
|
-
| optionLabelProp | Which prop value of option will render as content of select. | string | value for combobox, children for other modes |
|
|
100
|
-
| placeholder | Placeholder of select | string / React.ReactNode | - |
|
|
101
|
-
| removeIcon | The custom remove icon | React.ReactNode | - |
|
|
102
|
-
| showArrow | Whether to show the drop-down arrow | boolean | `true` |
|
|
103
|
-
| showSearch | Whether show search input in single mode. | boolean | `false` |
|
|
104
|
-
| size | Size of Select input. `default` or `large`. `small` is deprecated | string | `default` |
|
|
105
|
-
| suffixIcon | The custom suffix icon | React.ReactNode | - |
|
|
106
|
-
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string[] | |
|
|
107
|
-
| tooltip | Tooltip content | React.ReactNode | - |
|
|
108
|
-
| tooltipConfig | Config of tooltip | [TooltipProps](https://design.synerise.com/docs/components/tooltip#api) | - |
|
|
109
|
-
| value | Current selected option. | `string` / `string[]` / `number` / `number[]` / `LabeledValue` / `LabeledValue[]` | - |
|
|
110
|
-
| asFormElement | Forces 16px bottom margin even when `errorText` and `description` are absent | boolean | - |
|
|
111
|
-
| clearTooltip | Tooltip text shown on hover of the clear (×) button | string | - |
|
|
112
|
-
| prefixel | Addon node attached to the left of the selector | React.ReactNode | - |
|
|
113
|
-
| raw | Skips the FormField wrapper; renders only the selector div | boolean | - |
|
|
114
|
-
| readOnly | Disables selection while using readable styling (white bg, default cursor, grey-600 text) | boolean | - |
|
|
115
|
-
| selectorStyle | Additional CSS applied to the inner `.ant-select-selector` element | CSSObject | - |
|
|
116
|
-
| suffixel | Addon node attached to the right of the selector | React.ReactNode | - |
|
|
117
|
-
|
|
118
|
-
### Option props
|
|
119
|
-
|
|
120
|
-
| Property | Description | Type | Default |
|
|
121
|
-
| --------- | -------------------------------------------------------------------------------------------------------------------------------- | ------ | ------- |
|
|
122
|
-
| disabled | Disable this option | boolean | `false` |
|
|
123
|
-
| key | Same usage as value. If React request you to set this property, you can set it to value of option, and then omit value property. | string | |
|
|
124
|
-
| title | title of Select after select this Option | string | - |
|
|
125
|
-
| value | default to filter with this property string | number | - |
|
|
126
|
-
| className | additional class to option string | - | |
|
|
127
|
-
|
|
128
|
-
### Option group props
|
|
129
|
-
|
|
130
|
-
| Property | Description | Type | Default | |
|
|
131
|
-
| -------- | ---------------- | ------- | -------------- | --- |
|
|
132
|
-
| key | Key of an option | string | - | |
|
|
133
|
-
| label | Group label | `string | React.Element` | - |
|
|
190
|
+
- **Class hooks are `ds-select-*`** — the antd `.ant-select-*` classes are gone; target
|
|
191
|
+
`.ds-select`, `.ds-select-wrapper`, `.ds-select-selection-item`, `.ds-select-dropdown`, etc.
|
|
192
|
+
- **Remote search** — set `filterOption={false}` and update `options` from your `onSearch`
|
|
193
|
+
handler; the component won't filter locally in that mode.
|
|
194
|
+
- **Keyboard & ARIA** — Arrow / Home / End / Enter / Escape / Space (and Backspace to drop the
|
|
195
|
+
last chip in multiple mode), with combobox / listbox `aria-activedescendant`.
|
|
196
|
+
- **Not reimplemented from antd** — `OptGroup`, `labelInValue` / `LabeledValue`,
|
|
197
|
+
`autoClearSearchValue`, `firstActiveValue`, `menuItemSelectedIcon`.
|
package/dist/Option.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
import { RawValueType } from './Select.types';
|
|
3
|
+
export type OptionProps = {
|
|
4
|
+
/** antd parity: optional — falls back to the element's React `key` when omitted. */
|
|
5
|
+
value?: RawValueType;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
/** Native title (hover text). antd parity: accepts any node (coerced to a string title at render). */
|
|
8
|
+
title?: ReactNode;
|
|
9
|
+
/** When set, rendered in the selector instead of `children` (antd `optionLabelProp`). */
|
|
10
|
+
label?: ReactNode;
|
|
11
|
+
children?: ReactNode;
|
|
12
|
+
/** antd parity: forwarded to the rendered option row. */
|
|
13
|
+
style?: CSSProperties;
|
|
14
|
+
className?: string;
|
|
15
|
+
/** antd parity: native `data-*` / `aria-*` attributes, forwarded to the rendered option row. */
|
|
16
|
+
[dataAttr: `data-${string}`]: unknown;
|
|
17
|
+
[ariaAttr: `aria-${string}`]: unknown;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Declarative option marker. Renders nothing on its own — `Select` reads its
|
|
21
|
+
* props (`value`, `children` → label, `disabled`, `title`) to build the internal
|
|
22
|
+
* options list. Kept for back-compat with the antd `Select.Option` API. The antd
|
|
23
|
+
* `Select.OptGroup` is intentionally NOT reimplemented (zero real usage).
|
|
24
|
+
*/
|
|
25
|
+
export declare const Option: {
|
|
26
|
+
(_props: OptionProps): null;
|
|
27
|
+
displayName: string;
|
|
28
|
+
};
|
package/dist/Option.js
ADDED
package/dist/Select.d.ts
CHANGED
|
@@ -1,21 +1,86 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { default as React, FocusEvent, KeyboardEvent, ReactElement, ReactNode } from 'react';
|
|
2
|
+
import { Option } from './Option';
|
|
3
|
+
import { RawValueType, SelectOption, SelectValue } from './Select.types';
|
|
4
|
+
/**
|
|
5
|
+
* DS-native Select (antd-free). Single-select, `mode="multiple"` (chip selector),
|
|
6
|
+
* `mode="tags"` (free-text), in-selector `showSearch` with client `filterOption` /
|
|
7
|
+
* `optionFilterProp` and remote `onSearch` (`filterOption={false}`). Built on
|
|
8
|
+
* `@synerise/ds-dropdown` (floating-ui) + `ds-list-item`. Full keyboard support
|
|
9
|
+
* (Arrow/Home/End/Enter/Escape/Space, Backspace to drop the last chip) and
|
|
10
|
+
* combobox/listbox ARIA (`aria-activedescendant`) are wired in.
|
|
11
|
+
*/
|
|
12
|
+
declare const SelectInner: React.ForwardRefExoticComponent<{
|
|
13
|
+
[dataAttr: `data-${string}`]: unknown;
|
|
14
|
+
value?: SelectValue;
|
|
15
|
+
defaultValue?: SelectValue;
|
|
16
|
+
onChange?: ((value: SelectValue, option?: SelectOption | SelectOption[]) => void) | undefined;
|
|
17
|
+
onSelect?: (value: RawValueType, option?: SelectOption) => void;
|
|
18
|
+
onDeselect?: (value: RawValueType, option?: SelectOption) => void;
|
|
19
|
+
onBlur?: (event: FocusEvent<HTMLElement>) => void;
|
|
20
|
+
onFocus?: (event: FocusEvent<HTMLElement>) => void;
|
|
21
|
+
onDropdownVisibleChange?: (open: boolean) => void;
|
|
22
|
+
onSearch?: (value: string) => void;
|
|
23
|
+
onPopupScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
|
|
24
|
+
onClear?: () => void;
|
|
25
|
+
onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
|
|
26
|
+
onInputKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
|
|
27
|
+
onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
|
|
28
|
+
mode?: import('./Select.types').SelectMode;
|
|
29
|
+
options?: SelectOption[];
|
|
30
|
+
showSearch?: boolean;
|
|
31
|
+
searchValue?: string;
|
|
32
|
+
maxLength?: number;
|
|
33
|
+
filterOption?: boolean | import('./Select.types').FilterOptionFn;
|
|
34
|
+
optionFilterProp?: string;
|
|
35
|
+
optionLabelProp?: string;
|
|
36
|
+
placeholder?: ReactNode;
|
|
37
|
+
disabled?: boolean;
|
|
38
|
+
loading?: boolean;
|
|
39
|
+
allowClear?: boolean;
|
|
40
|
+
autoFocus?: boolean;
|
|
41
|
+
defaultActiveFirstOption?: boolean;
|
|
42
|
+
showArrow?: boolean;
|
|
43
|
+
suffixIcon?: ReactNode;
|
|
44
|
+
tabIndex?: number;
|
|
45
|
+
maxTagCount?: number | "responsive";
|
|
46
|
+
maxTagTextLength?: number;
|
|
47
|
+
maxTagPlaceholder?: ReactNode | ((omittedValues: Array<{
|
|
48
|
+
value: RawValueType;
|
|
49
|
+
label: ReactNode;
|
|
50
|
+
}>) => ReactNode);
|
|
51
|
+
tokenSeparators?: string[];
|
|
52
|
+
open?: boolean;
|
|
53
|
+
defaultOpen?: boolean;
|
|
54
|
+
getPopupContainer?: (trigger: HTMLElement) => HTMLElement | ParentNode | null;
|
|
55
|
+
placement?: import('@synerise/ds-dropdown').DropdownPlacement;
|
|
56
|
+
dropdownClassName?: string;
|
|
57
|
+
popupClassName?: string;
|
|
58
|
+
dropdownAlign?: Record<string, unknown>;
|
|
59
|
+
dropdownStyle?: React.CSSProperties;
|
|
60
|
+
dropdownMatchSelectWidth?: boolean | number;
|
|
61
|
+
dropdownRender?: (menu: ReactElement) => ReactNode;
|
|
62
|
+
listHeight?: number | string;
|
|
63
|
+
listItemHeight?: number;
|
|
64
|
+
notFoundContent?: ReactNode;
|
|
65
|
+
clearIcon?: ReactNode;
|
|
66
|
+
rowKey?: (option: SelectOption) => React.Key;
|
|
67
|
+
prefixel?: ReactNode;
|
|
68
|
+
suffixel?: ReactNode;
|
|
9
69
|
grey?: boolean;
|
|
10
|
-
asFormElement?: boolean;
|
|
11
|
-
selectorStyle?: import('styled-components').CSSObject;
|
|
12
70
|
raw?: boolean;
|
|
13
71
|
readOnly?: boolean;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
72
|
+
asFormElement?: boolean;
|
|
73
|
+
selectorStyle?: import('styled-components').CSSObject;
|
|
74
|
+
clearTooltip?: string;
|
|
75
|
+
size?: "middle" | "large" | "default";
|
|
76
|
+
error?: boolean;
|
|
77
|
+
id?: string;
|
|
78
|
+
className?: string;
|
|
79
|
+
style?: React.CSSProperties;
|
|
80
|
+
children?: ReactNode;
|
|
81
|
+
} & Omit<import('@synerise/ds-form-field').ContentAboveProps, "id" | "rightSide"> & import('@synerise/ds-form-field').ContentBelowProps & React.AriaAttributes & React.RefAttributes<HTMLDivElement>>;
|
|
82
|
+
type SelectComponent = typeof SelectInner & {
|
|
83
|
+
Option: typeof Option;
|
|
19
84
|
};
|
|
20
|
-
declare const
|
|
21
|
-
export default
|
|
85
|
+
declare const Select: SelectComponent;
|
|
86
|
+
export default Select;
|