@atlaskit/react-select 3.16.2 → 4.0.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.
Files changed (139) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/accessibility/package.json +1 -8
  3. package/async/package.json +1 -8
  4. package/async-creatable/package.json +1 -8
  5. package/base/package.json +1 -8
  6. package/clear-indicator/package.json +1 -8
  7. package/components/package.json +1 -8
  8. package/control/package.json +1 -8
  9. package/creatable/package.json +1 -8
  10. package/dist/cjs/components/control.compiled.css +3 -3
  11. package/dist/cjs/components/control.js +1 -1
  12. package/dist/es2019/components/control.compiled.css +3 -3
  13. package/dist/es2019/components/control.js +1 -1
  14. package/dist/esm/components/control.compiled.css +3 -3
  15. package/dist/esm/components/control.js +1 -1
  16. package/dropdown-indicator/package.json +1 -8
  17. package/filters/package.json +1 -8
  18. package/group/package.json +1 -8
  19. package/group-heading/package.json +1 -8
  20. package/indicators-container/package.json +1 -8
  21. package/input/package.json +1 -8
  22. package/loading-indicator/package.json +1 -8
  23. package/menu/package.json +1 -8
  24. package/menu-list/package.json +1 -8
  25. package/menu-portal/package.json +1 -8
  26. package/multi-value/package.json +1 -8
  27. package/multi-value-remove/package.json +1 -8
  28. package/option/package.json +1 -8
  29. package/package.json +12 -20
  30. package/placeholder/package.json +1 -8
  31. package/select-container/package.json +1 -8
  32. package/single-value/package.json +1 -8
  33. package/state-manager/package.json +1 -8
  34. package/styles/package.json +1 -8
  35. package/types/package.json +1 -8
  36. package/use-async/package.json +1 -8
  37. package/use-creatable/package.json +1 -8
  38. package/use-state-manager/package.json +1 -8
  39. package/value-container/package.json +1 -8
  40. package/dist/types-ts4.5/accessibility/index.d.ts +0 -123
  41. package/dist/types-ts4.5/async-creatable.d.ts +0 -10
  42. package/dist/types-ts4.5/async.d.ts +0 -8
  43. package/dist/types-ts4.5/builtins.d.ts +0 -4
  44. package/dist/types-ts4.5/colors.d.ts +0 -19
  45. package/dist/types-ts4.5/compiled/components/indicators-container.d.ts +0 -18
  46. package/dist/types-ts4.5/compiled/components/select-container.d.ts +0 -22
  47. package/dist/types-ts4.5/compiled/components/value-container.d.ts +0 -22
  48. package/dist/types-ts4.5/components/containers/indicators-container.d.ts +0 -18
  49. package/dist/types-ts4.5/components/containers/multi-value-container.d.ts +0 -6
  50. package/dist/types-ts4.5/components/containers/select-container.d.ts +0 -22
  51. package/dist/types-ts4.5/components/containers/value-container.d.ts +0 -22
  52. package/dist/types-ts4.5/components/control.d.ts +0 -40
  53. package/dist/types-ts4.5/components/dummy-input.d.ts +0 -8
  54. package/dist/types-ts4.5/components/group-heading.d.ts +0 -19
  55. package/dist/types-ts4.5/components/group.d.ts +0 -36
  56. package/dist/types-ts4.5/components/index.d.ts +0 -80
  57. package/dist/types-ts4.5/components/indicators/clear-indicator.d.ts +0 -29
  58. package/dist/types-ts4.5/components/indicators/dropdown-indicator.d.ts +0 -26
  59. package/dist/types-ts4.5/components/indicators/loading-indicator.d.ts +0 -25
  60. package/dist/types-ts4.5/components/input.d.ts +0 -35
  61. package/dist/types-ts4.5/components/live-region.d.ts +0 -17
  62. package/dist/types-ts4.5/components/menu-list.d.ts +0 -29
  63. package/dist/types-ts4.5/components/menu-loading-message.d.ts +0 -2
  64. package/dist/types-ts4.5/components/menu-no-options-message.d.ts +0 -2
  65. package/dist/types-ts4.5/components/menu-placer.d.ts +0 -49
  66. package/dist/types-ts4.5/components/menu-portal.d.ts +0 -23
  67. package/dist/types-ts4.5/components/menu.d.ts +0 -22
  68. package/dist/types-ts4.5/components/multi-value-label.d.ts +0 -6
  69. package/dist/types-ts4.5/components/multi-value-remove.d.ts +0 -20
  70. package/dist/types-ts4.5/components/multi-value.d.ts +0 -25
  71. package/dist/types-ts4.5/components/option.d.ts +0 -47
  72. package/dist/types-ts4.5/components/placeholder.d.ts +0 -20
  73. package/dist/types-ts4.5/components/single-value.d.ts +0 -26
  74. package/dist/types-ts4.5/creatable.d.ts +0 -9
  75. package/dist/types-ts4.5/diacritics.d.ts +0 -1
  76. package/dist/types-ts4.5/entry-points/accessibility.d.ts +0 -2
  77. package/dist/types-ts4.5/entry-points/async-creatable.d.ts +0 -2
  78. package/dist/types-ts4.5/entry-points/async.d.ts +0 -3
  79. package/dist/types-ts4.5/entry-points/base.d.ts +0 -3
  80. package/dist/types-ts4.5/entry-points/clear-indicator.d.ts +0 -2
  81. package/dist/types-ts4.5/entry-points/components.d.ts +0 -2
  82. package/dist/types-ts4.5/entry-points/control.d.ts +0 -2
  83. package/dist/types-ts4.5/entry-points/creatable.d.ts +0 -3
  84. package/dist/types-ts4.5/entry-points/dropdown-indicator.d.ts +0 -2
  85. package/dist/types-ts4.5/entry-points/filters.d.ts +0 -2
  86. package/dist/types-ts4.5/entry-points/group-heading.d.ts +0 -2
  87. package/dist/types-ts4.5/entry-points/group.d.ts +0 -2
  88. package/dist/types-ts4.5/entry-points/indicators-container.d.ts +0 -2
  89. package/dist/types-ts4.5/entry-points/input.d.ts +0 -2
  90. package/dist/types-ts4.5/entry-points/loading-indicator.d.ts +0 -2
  91. package/dist/types-ts4.5/entry-points/menu-list.d.ts +0 -2
  92. package/dist/types-ts4.5/entry-points/menu-portal.d.ts +0 -2
  93. package/dist/types-ts4.5/entry-points/menu.d.ts +0 -2
  94. package/dist/types-ts4.5/entry-points/multi-value-remove.d.ts +0 -2
  95. package/dist/types-ts4.5/entry-points/multi-value.d.ts +0 -2
  96. package/dist/types-ts4.5/entry-points/option.d.ts +0 -2
  97. package/dist/types-ts4.5/entry-points/placeholder.d.ts +0 -2
  98. package/dist/types-ts4.5/entry-points/select-container.d.ts +0 -2
  99. package/dist/types-ts4.5/entry-points/single-value.d.ts +0 -2
  100. package/dist/types-ts4.5/entry-points/state-manager.d.ts +0 -1
  101. package/dist/types-ts4.5/entry-points/styles.d.ts +0 -2
  102. package/dist/types-ts4.5/entry-points/types.d.ts +0 -1
  103. package/dist/types-ts4.5/entry-points/use-async.d.ts +0 -2
  104. package/dist/types-ts4.5/entry-points/use-creatable.d.ts +0 -2
  105. package/dist/types-ts4.5/entry-points/use-state-manager.d.ts +0 -2
  106. package/dist/types-ts4.5/entry-points/value-container.d.ts +0 -2
  107. package/dist/types-ts4.5/filters.d.ts +0 -14
  108. package/dist/types-ts4.5/format-group-label.d.ts +0 -2
  109. package/dist/types-ts4.5/get-option-label.d.ts +0 -1
  110. package/dist/types-ts4.5/get-option-value.d.ts +0 -1
  111. package/dist/types-ts4.5/get-style-props.d.ts +0 -6
  112. package/dist/types-ts4.5/index.d.ts +0 -34
  113. package/dist/types-ts4.5/internal/a11y-text.d.ts +0 -2
  114. package/dist/types-ts4.5/internal/classnames.d.ts +0 -2
  115. package/dist/types-ts4.5/internal/clean-common-props.d.ts +0 -2
  116. package/dist/types-ts4.5/internal/clean-value.d.ts +0 -2
  117. package/dist/types-ts4.5/internal/is-document-el.d.ts +0 -1
  118. package/dist/types-ts4.5/internal/multi-value-as-value.d.ts +0 -2
  119. package/dist/types-ts4.5/internal/notify-open-layer-observer.d.ts +0 -11
  120. package/dist/types-ts4.5/internal/passive-event-detector.d.ts +0 -1
  121. package/dist/types-ts4.5/internal/portal-placement-context.d.ts +0 -14
  122. package/dist/types-ts4.5/internal/required-input.d.ts +0 -10
  123. package/dist/types-ts4.5/internal/scroll-manager.d.ts +0 -12
  124. package/dist/types-ts4.5/internal/scroll-to.d.ts +0 -1
  125. package/dist/types-ts4.5/internal/select-get-styles-context.d.ts +0 -12
  126. package/dist/types-ts4.5/internal/single-value-as-value.d.ts +0 -2
  127. package/dist/types-ts4.5/internal/use-scroll-capture.d.ts +0 -12
  128. package/dist/types-ts4.5/internal/use-scroll-lock.d.ts +0 -9
  129. package/dist/types-ts4.5/internal/use-select-get-styles.d.ts +0 -1
  130. package/dist/types-ts4.5/internal/value-ternary.d.ts +0 -2
  131. package/dist/types-ts4.5/is-option-disabled.d.ts +0 -1
  132. package/dist/types-ts4.5/select.d.ts +0 -597
  133. package/dist/types-ts4.5/state-manager.d.ts +0 -16
  134. package/dist/types-ts4.5/styles.d.ts +0 -50
  135. package/dist/types-ts4.5/theme.d.ts +0 -6
  136. package/dist/types-ts4.5/types.d.ts +0 -154
  137. package/dist/types-ts4.5/use-async.d.ts +0 -31
  138. package/dist/types-ts4.5/use-creatable.d.ts +0 -46
  139. package/dist/types-ts4.5/use-state-manager.d.ts +0 -15
@@ -1,12 +0,0 @@
1
- /**
2
- * Internal context used to pass the original Select instance's getStyles function
3
- * down to components like MultiValue, without polluting the public CommonProps API.
4
- *
5
- * This allows MultiValue to detect whether getStyles has been overridden on a
6
- * component instance (e.g. via a custom component wrapper passing a different
7
- * getStyles prop), by comparing props.getStyles against the original.
8
- *
9
- * @internal — not part of the public API
10
- */
11
- import { type Context } from 'react';
12
- export declare const SelectGetStylesContext: Context<Function | undefined>;
@@ -1,2 +0,0 @@
1
- import type { OnChangeValue, SingleValue } from '../types';
2
- export declare function singleValueAsValue<Option, IsMulti extends boolean>(singleValue: SingleValue<Option>): OnChangeValue<Option, IsMulti>;
@@ -1,12 +0,0 @@
1
- interface Options {
2
- readonly isEnabled: boolean;
3
- readonly onBottomArrive?: (event: WheelEvent | TouchEvent) => void;
4
- readonly onBottomLeave?: (event: WheelEvent | TouchEvent) => void;
5
- readonly onTopArrive?: (event: WheelEvent | TouchEvent) => void;
6
- readonly onTopLeave?: (event: WheelEvent | TouchEvent) => void;
7
- }
8
- /**
9
- * {description}.
10
- */
11
- export default function useScrollCapture({ isEnabled, onBottomArrive, onBottomLeave, onTopArrive, onTopLeave, }: Options): (element: HTMLElement | null) => void;
12
- export {};
@@ -1,9 +0,0 @@
1
- interface Options {
2
- readonly isEnabled: boolean;
3
- readonly accountForScrollbars?: boolean;
4
- }
5
- /**
6
- * {description}.
7
- */
8
- export default function useScrollLock({ isEnabled, accountForScrollbars }: Options): (element: HTMLElement | null) => void;
9
- export {};
@@ -1 +0,0 @@
1
- export declare const useSelectGetStyles: () => Function | undefined;
@@ -1,2 +0,0 @@
1
- import type { MultiValue, OnChangeValue, SingleValue } from '../types';
2
- export declare function valueTernary<Option, IsMulti extends boolean>(isMulti: IsMulti | undefined, multiValue: MultiValue<Option>, singleValue: SingleValue<Option>): OnChangeValue<Option, IsMulti>;
@@ -1 +0,0 @@
1
- export declare const isOptionDisabled: <Option>(option: Option) => boolean;
@@ -1,597 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React, { type AriaAttributes, Component, type FocusEventHandler, type FormEventHandler, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type RefCallback, type TouchEventHandler } from 'react';
6
- import { type AriaLiveMessages, type AriaSelection } from './accessibility';
7
- import { defaultComponents, type SelectComponentsConfig } from './components';
8
- import { type FilterOptionOption } from './filters';
9
- import { type ClassNamesConfig, type StylesConfig, type StylesProps } from './styles';
10
- import { type ActionMeta, type CommonProps, type FocusDirection, type GetOptionLabel, type GetOptionValue, type GroupBase, type InputActionMeta, type MenuPlacement, type MenuPosition, type OnChangeValue, type Options, type OptionsOrGroups, type PropsValue, type SetValueAction } from './types';
11
- export type FormatOptionLabelContext = 'menu' | 'value';
12
- export interface FormatOptionLabelMeta<Option> {
13
- context: FormatOptionLabelContext;
14
- inputValue: string;
15
- selectValue: Options<Option>;
16
- }
17
- export interface SelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
18
- /**
19
- * HTML ID of an element containing an error message related to the input
20
- *
21
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
22
- * aria-errormessage is not supported widely by assistive technologies. Do not use!
23
- */
24
- 'aria-errormessage'?: AriaAttributes['aria-errormessage'];
25
- /**
26
- * Indicate if the value entered in the field is invalid
27
- *
28
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
29
- * Use `isInvalid` instead.
30
- */
31
- 'aria-invalid'?: AriaAttributes['aria-invalid'];
32
- /**
33
- * Aria label (for assistive tech)
34
- *
35
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
36
- * Use `label` instead.
37
- */
38
- 'aria-label'?: AriaAttributes['aria-label'];
39
- /**
40
- * HTML ID of an element that should be used as the label (for assistive tech)
41
- *
42
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
43
- * Use `labelId` instead.
44
- */
45
- 'aria-labelledby'?: AriaAttributes['aria-labelledby'];
46
- /**
47
- * HTML ID of an element that should be used as a description (for assistive tech)
48
- *
49
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
50
- * Use `descriptionId` instead.
51
- */
52
- 'aria-describedby'?: AriaAttributes['aria-describedby'];
53
- /**
54
- * Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive
55
- *
56
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
57
- * Will be removed in future versions.
58
- */
59
- 'aria-live'?: AriaAttributes['aria-live'];
60
- /**
61
- * Customise the messages used by the aria-live component
62
- *
63
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
64
- */
65
- ariaLiveMessages?: AriaLiveMessages<Option, IsMulti, Group>;
66
- /**
67
- * Focus the control when it is mounted. There are very few cases that this should be used, and using incorrectly may violate accessibility guidelines.
68
- */
69
- autoFocus?: boolean;
70
- /**
71
- * Remove the currently focused option when the user presses backspace when Select isClearable or isMulti
72
- *
73
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be handled automatically to support expected keyboard accessibility.
74
- */
75
- backspaceRemovesValue: boolean;
76
- /**
77
- * Remove focus from the input when the user selects an option (handy for dismissing the keyboard on touch devices)
78
- */
79
- blurInputOnSelect: boolean;
80
- /**
81
- * When the user reaches the top/bottom of the menu, prevent scroll on the scroll-parent
82
- *
83
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
84
- */
85
- captureMenuScroll: boolean;
86
- /**
87
- * Sets a className attribute on the outer component
88
- *
89
- *
90
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
91
- * If used for testing purposes, use the `testId` prop as a locator instead.
92
- * If used for styling purposes, use the `components` API with the xcss prop
93
- */
94
- className?: string;
95
- /**
96
- * If provided, all inner components will be given a prefixed className attribute.
97
- *
98
- * This is useful when styling via CSS classes instead of the Styles API approach.
99
- */
100
- classNamePrefix?: string | null;
101
- /**
102
- * Provide classNames based on state for each inner component
103
- */
104
- classNames: ClassNamesConfig<Option, IsMulti, Group>;
105
- /**
106
- * Set the `aria-label` for the clear icon button.
107
- */
108
- clearControlLabel?: string;
109
- /**
110
- * Close the select menu when the user selects an option
111
- */
112
- closeMenuOnSelect: boolean;
113
- /**
114
- * If `true`, close the select menu when the user scrolls the document/body.
115
- *
116
- * If a function, takes a standard javascript `ScrollEvent` you return a boolean:
117
- *
118
- * `true` => The menu closes
119
- *
120
- * `false` => The menu stays open
121
- *
122
- * This is useful when you have a scrollable modal and want to portal the menu out,
123
- * but want to avoid graphical issues.
124
- *
125
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
126
- */
127
- closeMenuOnScroll: boolean | ((event: Event) => boolean);
128
- /**
129
- * This complex object includes all the compositional components that are used
130
- * in `react-select`. If you wish to overwrite a component, pass in an object
131
- * with the appropriate namespace. If you wish to restyle a component, we recommend
132
- * using this prop with the `xcss` prop.
133
- *
134
- */
135
- components: SelectComponentsConfig<Option, IsMulti, Group>;
136
- /**
137
- * Whether the value of the select, e.g. SingleValue, should be displayed in the control.
138
- *
139
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
140
- */
141
- controlShouldRenderValue: boolean;
142
- /**
143
- * Delimiter used to join multiple values into a single HTML Input value
144
- *
145
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
146
- */
147
- delimiter?: string;
148
- /**
149
- * This sets the aria-describedby attribute. It sets an accessible description for the select, for people who use assistive technology. Use '<HelperMessage>' from '@atlaskit/form' is preferred.
150
- */
151
- descriptionId?: string;
152
- /**
153
- * Clear all values when the user presses escape AND the menu is closed.
154
- *
155
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be handled automatically to support expected keyboard accessibility.
156
- */
157
- escapeClearsValue: boolean;
158
- /**
159
- * Custom method to filter whether an option should be displayed in the menu
160
- */
161
- filterOption: ((option: FilterOptionOption<Option>, inputValue: string) => boolean) | null;
162
- /**
163
- * Formats group labels in the menu as React components
164
- *
165
- * An example can be found in the [Replacing builtins](https://react-select.com/advanced#replacing-builtins) documentation.
166
- */
167
- formatGroupLabel: (group: Group) => ReactNode;
168
- /**
169
- * Formats option labels in the menu and control as React components
170
- */
171
- formatOptionLabel?: (data: Option, formatOptionLabelMeta: FormatOptionLabelMeta<Option>) => ReactNode;
172
- /**
173
- * Resolves option data to a string to be displayed as the label by components
174
- *
175
- * Note: Failure to resolve to a string type can interfere with filtering and
176
- * screen reader support.
177
- */
178
- getOptionLabel: GetOptionLabel<Option>;
179
- /**
180
- * Resolves option data to a string to compare options and specify value attributes
181
- */
182
- getOptionValue: GetOptionValue<Option>;
183
- /**
184
- * Hide the selected option from the menu
185
- */
186
- hideSelectedOptions?: boolean;
187
- /**
188
- * The id to set on the SelectContainer component.
189
- */
190
- id?: string;
191
- /**
192
- * The value of the search input
193
- */
194
- inputValue: string;
195
- /**
196
- * The id of the search input
197
- */
198
- inputId?: string;
199
- /**
200
- * Define an id prefix for the select components e.g. {your-id}-value
201
- */
202
- instanceId?: number | string;
203
- /**
204
- * Is the select value clearable
205
- */
206
- isClearable?: boolean;
207
- /**
208
- * Is the select disabled
209
- */
210
- isDisabled: boolean;
211
- /**
212
- * Is the select invalid
213
- */
214
- isInvalid?: boolean;
215
- /**
216
- * Is the select in a state of loading (async)
217
- */
218
- isLoading: boolean;
219
- /**
220
- * Override the built-in logic to detect whether an option is disabled
221
- *
222
- * An example can be found in the [Replacing builtins](https://react-select.com/advanced#replacing-builtins) documentation.
223
- */
224
- isOptionDisabled: (option: Option, selectValue: Options<Option>) => boolean;
225
- /**
226
- * Override the built-in logic to detect whether an option is selected
227
- */
228
- isOptionSelected?: (option: Option, selectValue: Options<Option>) => boolean;
229
- /**
230
- * Support multiple selected options
231
- */
232
- isMulti: IsMulti;
233
- /**
234
- * This prop indicates if the component is required.
235
- */
236
- isRequired?: boolean;
237
- /**
238
- * Is the select direction right-to-left
239
- *
240
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
241
- */
242
- isRtl: boolean;
243
- /**
244
- * Whether to enable search functionality
245
- */
246
- isSearchable: boolean;
247
- /**
248
- * This sets the aria-label attribute. It sets an accessible name for the select, for people who use assistive technology. Use of a visible label is highly recommended for greater accessibility support.
249
- */
250
- label?: string;
251
- /**
252
- * This sets the aria-labelledby attribute. It sets an accessible name for the select, for people who use assistive technology. Use of a visible label is highly recommended for greater accessibility support.
253
- */
254
- labelId?: string;
255
- /**
256
- * Async: Text to display when loading options
257
- */
258
- loadingMessage: (obj: {
259
- inputValue: string;
260
- }) => ReactNode;
261
- /**
262
- * Minimum height of the menu before flipping
263
- */
264
- minMenuHeight: number;
265
- /**
266
- * Maximum height of the menu before scrolling
267
- */
268
- maxMenuHeight: number;
269
- /**
270
- * Whether the menu is open
271
- */
272
- menuIsOpen: boolean;
273
- /**
274
- * Default placement of the menu in relation to the control. 'auto' will flip
275
- * when there isn't enough space below the control.
276
- */
277
- menuPlacement: MenuPlacement;
278
- /**
279
- * The CSS position value of the menu, when "fixed" extra layout management is required
280
- */
281
- menuPosition: MenuPosition;
282
- /**
283
- * Whether the menu should use a portal, and where it should attach
284
- *
285
- * An example can be found in the [Portaling](https://react-select.com/advanced#portaling) documentation
286
- */
287
- menuPortalTarget?: HTMLElement | null;
288
- /**
289
- * Whether to block scroll events when the menu is open
290
- *
291
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
292
- */
293
- menuShouldBlockScroll: boolean;
294
- /**
295
- * Whether the menu should be scrolled into view when it opens
296
- */
297
- menuShouldScrollIntoView: boolean;
298
- /**
299
- * Name of the HTML Input (optional - without this, no input will be rendered)
300
- */
301
- name?: string;
302
- /**
303
- * Text to display when there are no options
304
- */
305
- noOptionsMessage: (obj: {
306
- inputValue: string;
307
- }) => ReactNode;
308
- /**
309
- * Handle blur events on the control
310
- */
311
- onBlur?: FocusEventHandler<HTMLInputElement>;
312
- /**
313
- * Handle change events on the select
314
- */
315
- onChange: (newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
316
- /**
317
- * Handle focus events on the control
318
- */
319
- onFocus?: FocusEventHandler<HTMLInputElement>;
320
- /**
321
- * Handle change events on the input
322
- */
323
- onInputChange: (newValue: string, actionMeta: InputActionMeta) => void;
324
- /**
325
- * Handle key down events on the select
326
- */
327
- onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
328
- /**
329
- * Handle the menu opening
330
- */
331
- onMenuOpen: () => void;
332
- /**
333
- * Handle the menu closing
334
- */
335
- onMenuClose: () => void;
336
- /**
337
- * Fired when the user scrolls to the top of the menu
338
- */
339
- onMenuScrollToTop?: (event: WheelEvent | TouchEvent) => void;
340
- /**
341
- * Fired when the user scrolls to the bottom of the menu
342
- */
343
- onMenuScrollToBottom?: (event: WheelEvent | TouchEvent) => void;
344
- /**
345
- * Allows control of whether the menu is opened when the Select is focused
346
- *
347
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be removed to support expected accessibility interactions.
348
- */
349
- openMenuOnFocus: boolean;
350
- /**
351
- * Allows control of whether the menu is opened when the Select is clicked
352
- *
353
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be removed to support expected accessibility interactions.
354
- */
355
- openMenuOnClick: boolean;
356
- /**
357
- * Prevents "Escape" keydown event propagation
358
- */
359
- shouldPreventEscapePropagation?: boolean;
360
- /**
361
- * Array of options that populate the select menu
362
- */
363
- options: OptionsOrGroups<Option, Group>;
364
- /**
365
- * Number of options to jump in menu when page{up|down} keys are used
366
- */
367
- pageSize: number;
368
- /**
369
- * Placeholder for the select value
370
- */
371
- placeholder: ReactNode;
372
- /**
373
- * Status to relay to screen readers
374
- *
375
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
376
- */
377
- screenReaderStatus: (obj: {
378
- count: number;
379
- }) => string;
380
- /**
381
- * Style modifier methods
382
- *
383
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
384
- * Use the `components` API with the xcss prop for custom styling.
385
- */
386
- styles: StylesConfig<Option, IsMulti, Group>;
387
- /**
388
- * Sets the tabIndex attribute on the input for focus. Since focus is already managed, the only acceptable value to be used is '-1' in rare cases when removing this field from the document tab order is required.
389
- *
390
- */
391
- tabIndex: number;
392
- /**
393
- * Select the currently focused option when the user presses tab
394
- *
395
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be handled automatically to support expected keyboard accessibility.
396
- */
397
- tabSelectsValue: boolean;
398
- /**
399
- * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
400
- * Use this instead of using ARIA properties as locators.
401
- *
402
- * - Container: `${testId}-select--container`
403
- * - Control : `${testId}-select--control`
404
- * - Value container: `${testId}-select--value-container`
405
- * - Placeholder: `${testId}-select--placeholder`
406
- * - Input container: `${testId}-select--input-container`
407
- * - Input: `${testId}-select--input`
408
- * - Indicators container: `${testId}-select--indicators-container`
409
- * - Dropdown indicator: `${testId}-select--dropdown-indicator`
410
- * - Clear indicator: `${testId}-select--clear-indicator`
411
- * - Loading indicator: `${testId}-select--loading-indicator`
412
- * - Listbox container: `${testId}-select--listbox-container`
413
- * - Listbox: `${testId}-select--listbox`
414
- * - Option group heading: `${testId}-select--group-${groupIndex}-heading`
415
- * - Option: `${testId}-select--option-${id}`
416
- */
417
- testId?: string;
418
- /**
419
- * The value of the select; reflected by the selected option
420
- */
421
- value: PropsValue<Option>;
422
- /**
423
- * Sets the form attribute on the input
424
- */
425
- form?: string;
426
- /**
427
- * Marks the value-holding input as required for form validation
428
- *
429
- * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
430
- * Use `isRequired` instead.
431
- */
432
- required?: boolean;
433
- /**
434
- * This prop affects the height of the select control. Compact is gridSize() * 4, default is gridSize * 5
435
- */
436
- spacing?: 'compact' | 'default';
437
- appearance: 'default' | 'subtle' | 'none';
438
- [key: string]: any;
439
- UNSAFE_is_experimental_generic?: boolean;
440
- }
441
- export declare const defaultProps: Omit<SelectProps<unknown, false, GroupBase<unknown>>, 'inputValue' | 'onChange' | 'onInputChange' | 'onMenuOpen' | 'onMenuClose' | 'value' | 'appearance'>;
442
- interface State<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
443
- ariaSelection: AriaSelection<Option, IsMulti> | null;
444
- inputIsHidden: boolean;
445
- isFocused: boolean;
446
- focusedOption: Option | null;
447
- focusedOptionId: string | null;
448
- focusableOptionsWithIds: FocusableOptionWithId<Option>[];
449
- focusedValue: Option | null;
450
- focusedValueId: string | null;
451
- selectValue: Options<Option>;
452
- clearFocusValueOnUpdate: boolean;
453
- prevWasFocused: boolean;
454
- inputIsHiddenAfterUpdate: boolean | null | undefined;
455
- prevProps: SelectProps<Option, IsMulti, Group> | void;
456
- instancePrefix: string;
457
- }
458
- interface CategorizedOption<Option> {
459
- type: 'option';
460
- data: Option;
461
- isDisabled: boolean;
462
- isSelected: boolean;
463
- label: string;
464
- value: string;
465
- index: number;
466
- }
467
- interface FocusableOptionWithId<Option> {
468
- data: Option;
469
- id: string;
470
- }
471
- interface CategorizedGroup<Option, Group extends GroupBase<Option>> {
472
- type: 'group';
473
- data: Group;
474
- options: readonly CategorizedOption<Option>[];
475
- index: number;
476
- }
477
- type CategorizedGroupOrOption<Option, Group extends GroupBase<Option>> = CategorizedGroup<Option, Group> | CategorizedOption<Option>;
478
- export default class Select<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends Component<SelectProps<Option, IsMulti, Group>, State<Option, IsMulti, Group>> {
479
- static defaultProps: typeof defaultProps;
480
- state: State<Option, IsMulti, Group>;
481
- blockOptionHover: boolean;
482
- isComposing: boolean;
483
- commonProps: any;
484
- initialTouchX: number;
485
- initialTouchY: number;
486
- openAfterFocus: boolean;
487
- scrollToFocusedOptionOnUpdate: boolean;
488
- userIsDragging?: boolean;
489
- controlRef: HTMLDivElement | null;
490
- getControlRef: RefCallback<HTMLDivElement>;
491
- focusedOptionRef: HTMLDivElement | null;
492
- getFocusedOptionRef: RefCallback<HTMLDivElement>;
493
- menuListRef: HTMLDivElement | null;
494
- getMenuListRef: RefCallback<HTMLDivElement>;
495
- inputRef: HTMLInputElement | null;
496
- getInputRef: RefCallback<HTMLInputElement>;
497
- constructor(props: SelectProps<Option, IsMulti, Group>);
498
- static getDerivedStateFromProps(props: SelectProps<unknown, boolean, GroupBase<unknown>>, state: State<unknown, boolean, GroupBase<unknown>>): {
499
- prevProps: SelectProps<unknown, boolean, GroupBase<unknown>>;
500
- ariaSelection: AriaSelection<unknown, boolean> | null;
501
- prevWasFocused: boolean;
502
- inputIsHidden: boolean;
503
- inputIsHiddenAfterUpdate: undefined;
504
- } | {
505
- prevProps: SelectProps<unknown, boolean, GroupBase<unknown>>;
506
- ariaSelection: AriaSelection<unknown, boolean> | null;
507
- prevWasFocused: boolean;
508
- inputIsHidden?: undefined;
509
- inputIsHiddenAfterUpdate?: undefined;
510
- };
511
- componentDidMount(): void;
512
- componentDidUpdate(prevProps: SelectProps<Option, IsMulti, Group>): void;
513
- componentWillUnmount(): void;
514
- onMenuOpen(): void;
515
- onMenuClose(): void;
516
- onInputChange(newValue: string, actionMeta: InputActionMeta): void;
517
- focusInput(): void;
518
- blurInput(): void;
519
- focus: () => void;
520
- blur: () => void;
521
- openMenu(focusOption: 'first' | 'last'): void;
522
- updateInputLabel(inputLabel?: string): void;
523
- calculateInputLabel(focusedOption: Option, optionIndex: number): string;
524
- focusValue(direction: 'previous' | 'next'): void;
525
- focusOption(direction?: FocusDirection): void;
526
- onChange: (newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
527
- setValue: (newValue: OnChangeValue<Option, IsMulti>, action: SetValueAction, option?: Option) => void;
528
- selectOption: (newValue: Option) => void;
529
- removeValue: (removedValue: Option) => void;
530
- clearValue: () => void;
531
- popValue: () => void;
532
- getFocusedOptionId: (focusedOption: Option) => string | null;
533
- getFocusableOptionsWithIds: () => FocusableOptionWithId<Option>[];
534
- getValue: () => Options<Option>;
535
- cx: (...args: any) => string;
536
- getCommonProps(): CommonProps<Option, IsMulti, Group>;
537
- getOptionLabel: (data: Option) => string;
538
- getOptionValue: (data: Option) => string;
539
- getStyles: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => any;
540
- getClassNames: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => string | undefined;
541
- getElementId: (element: "group" | "input" | "listbox" | "option" | "placeholder" | "live-region" | "multi-message" | "single-value" | "selected-value") => string;
542
- getComponents: () => ReturnType<typeof defaultComponents>;
543
- buildCategorizedOptions: () => CategorizedGroupOrOption<Option, Group>[];
544
- getCategorizedOptions: () => CategorizedGroupOrOption<Option, Group>[];
545
- buildFocusableOptions: () => Option[];
546
- getFocusableOptions: () => Option[];
547
- ariaOnChange: (value: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
548
- hasValue(): boolean;
549
- hasOptions(): boolean;
550
- isClearable(): boolean;
551
- isOptionDisabled(option: Option, selectValue: Options<Option>): boolean;
552
- isOptionSelected(option: Option, selectValue: Options<Option>): boolean;
553
- filterOption(option: FilterOptionOption<Option>, inputValue: string): boolean;
554
- formatOptionLabel(data: Option, context: FormatOptionLabelContext): ReactNode;
555
- formatGroupLabel(data: Group): React.ReactNode;
556
- calculateDescription(): {
557
- 'aria-describedby': string;
558
- };
559
- onMenuMouseDown: MouseEventHandler<HTMLDivElement>;
560
- onMenuMouseMove: MouseEventHandler<HTMLDivElement>;
561
- onControlMouseDown: (event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => void;
562
- onDropdownIndicatorMouseDown: (event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => void;
563
- onClearIndicatorMouseDown: (event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => void;
564
- onScroll: (event: Event) => void;
565
- startListeningComposition(): void;
566
- stopListeningComposition(): void;
567
- onCompositionStart: () => void;
568
- onCompositionEnd: () => void;
569
- startListeningToTouch(): void;
570
- stopListeningToTouch(): void;
571
- onTouchStart: ({ touches }: TouchEvent) => void;
572
- onTouchMove: ({ touches }: TouchEvent) => void;
573
- onTouchEnd: (event: TouchEvent) => void;
574
- onControlTouchEnd: TouchEventHandler<HTMLDivElement>;
575
- onClearIndicatorTouchEnd: TouchEventHandler<HTMLDivElement>;
576
- onDropdownIndicatorTouchEnd: TouchEventHandler<HTMLDivElement>;
577
- handleInputChange: FormEventHandler<HTMLInputElement>;
578
- onInputFocus: FocusEventHandler<HTMLInputElement>;
579
- onInputBlur: FocusEventHandler<HTMLInputElement>;
580
- onOptionHover: (focusedOption: Option) => void;
581
- shouldHideSelectedOptions: () => boolean;
582
- onValueInputFocus: FocusEventHandler;
583
- onKeyDown: KeyboardEventHandler<HTMLDivElement>;
584
- renderInput(): React.JSX.Element;
585
- renderPlaceholderOrValue(): React.JSX.Element | React.JSX.Element[] | null;
586
- renderClearIndicator(): React.JSX.Element | null;
587
- renderLoadingIndicator(): React.JSX.Element | null;
588
- renderDropdownIndicator(): React.JSX.Element | null;
589
- renderMenu(): React.JSX.Element | null;
590
- renderFormField(): React.JSX.Element | undefined;
591
- renderLiveRegion(): React.JSX.Element;
592
- renderMultiselectMessage(): React.JSX.Element;
593
- handleOpenLayerObserverCloseSignal: () => void;
594
- render(): React.JSX.Element;
595
- }
596
- export type PublicBaseSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<Option, IsMulti, Group>>;
597
- export {};
@@ -1,16 +0,0 @@
1
- import { type ReactElement, type RefAttributes } from 'react';
2
- import Select from './select';
3
- import type { GroupBase } from './types';
4
- import { type StateManagerProps } from './use-state-manager';
5
- /**
6
- * __StateManagedSelect__
7
- *
8
- * A state managed select {description}.
9
- *
10
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
11
- * - [Code](https://atlassian.design/components/{packageName}/code)
12
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
13
- */
14
- type StateManagedSelect = <Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: StateManagerProps<Option, IsMulti, Group> & RefAttributes<Select<Option, IsMulti, Group>>) => ReactElement;
15
- declare const StateManagedSelect: StateManagedSelect;
16
- export default StateManagedSelect;