@leafygreen-ui/combobox 8.1.3 → 9.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.
- package/CHANGELOG.md +55 -0
- package/README.md +34 -33
- package/dist/Combobox/Combobox.d.ts +2 -2
- package/dist/Combobox/Combobox.d.ts.map +1 -1
- package/dist/Combobox/Combobox.styles.d.ts +9 -8
- package/dist/Combobox/Combobox.styles.d.ts.map +1 -1
- package/dist/Combobox/Combobox.types.d.ts +5 -1
- package/dist/Combobox/Combobox.types.d.ts.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/types/Combobox.types.d.ts +7 -6
- package/dist/types/Combobox.types.d.ts.map +1 -1
- package/package.json +8 -7
- package/src/Combobox/Combobox.spec.tsx +9 -0
- package/src/Combobox/Combobox.styles.ts +49 -79
- package/src/Combobox/Combobox.tsx +24 -34
- package/src/Combobox/Combobox.types.ts +6 -1
- package/src/Combobox.stories.tsx +2 -2
- package/src/ComboboxContext/ComboboxContext.tsx +2 -2
- package/src/types/Combobox.types.ts +7 -8
- package/stories.js +1 -1
- package/tsconfig.json +3 -0
- package/tsdoc.json +85 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,60 @@
|
|
|
1
1
|
# @leafygreen-ui/combobox
|
|
2
2
|
|
|
3
|
+
## 9.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- c406ab85: [LG-4133](https://jira.mongodb.org/browse/LG-4133)
|
|
8
|
+
|
|
9
|
+
1. Updated styling:
|
|
10
|
+
|
|
11
|
+
- updated spacing for `'small'`, `'xsmall'`, and `'large'` size variants
|
|
12
|
+
- updated placeholder text color
|
|
13
|
+
- moved error icon from inside the input to underneath the input, alongside the error message
|
|
14
|
+
|
|
15
|
+
2. A default `errorMessage` of `'This input needs your attention'` will render below combobox when state is invalid.
|
|
16
|
+
|
|
17
|
+
3. Added a `valid` state with success icon and `successMessage` prop. A default `successMessage` of `'Success'` will render when state is valid. `successMessage` prop allows customization.
|
|
18
|
+
|
|
19
|
+
4. Disabled `Combobox` component no longer renders the `disabled` attribute and instead relies on `aria-disabled` and `readonly` attributes.
|
|
20
|
+
|
|
21
|
+
The last change is made to ensure that disabled components are still focusable to users using keyboard navigation.
|
|
22
|
+
|
|
23
|
+
For more on `aria-disabled` see the [documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
|
|
24
|
+
|
|
25
|
+
#### Migration guide
|
|
26
|
+
|
|
27
|
+
Functionally, migration should be seamless, however there may be unit/integration/e2e tests that relied on this behavior.
|
|
28
|
+
|
|
29
|
+
##### Jest/RTL
|
|
30
|
+
|
|
31
|
+
Generally, only this repo should need to test that these components have a specific attribute. We recommend updating unit tests to check that some event was or was not called.
|
|
32
|
+
|
|
33
|
+
However, there are cases where this may still need to be tested. You can replace any `expect(combobox).toBeDisabled()` with an explicit check for `expect(combobox).toHaveAttribute('aria-disabled', 'true')`.
|
|
34
|
+
|
|
35
|
+
##### Cypress
|
|
36
|
+
|
|
37
|
+
Similar to unit tests, you should generally test functionality and not implementation details. However, to test this in Cypress replace any `cy.get(combobox).should('be.disabled');` checks with `cy.get(combobox).invoke('attr', 'aria-disabled').should('eq', 'true');`
|
|
38
|
+
|
|
39
|
+
### Patch Changes
|
|
40
|
+
|
|
41
|
+
- Updated dependencies [c406ab85]
|
|
42
|
+
- Updated dependencies [c406ab85]
|
|
43
|
+
- Updated dependencies [c406ab85]
|
|
44
|
+
- @leafygreen-ui/form-field@1.2.0
|
|
45
|
+
- @leafygreen-ui/typography@19.1.0
|
|
46
|
+
- @leafygreen-ui/tokens@2.6.0
|
|
47
|
+
|
|
48
|
+
## 8.1.4
|
|
49
|
+
|
|
50
|
+
### Patch Changes
|
|
51
|
+
|
|
52
|
+
- Updated dependencies [dfd6972c]
|
|
53
|
+
- Updated dependencies [1ec45a7e]
|
|
54
|
+
- @leafygreen-ui/typography@19.0.0
|
|
55
|
+
- @leafygreen-ui/checkbox@13.1.0
|
|
56
|
+
- @leafygreen-ui/input-option@1.1.3
|
|
57
|
+
|
|
3
58
|
## 8.1.3
|
|
4
59
|
|
|
5
60
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -77,39 +77,40 @@ import { Combobox, ComboboxOption } from '@leafygreen-ui/combobox';
|
|
|
77
77
|
|
|
78
78
|
## Properties
|
|
79
79
|
|
|
80
|
-
| Prop | Type | Description | Default
|
|
81
|
-
| ------------------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
82
|
-
| `children` | `<ComboboxOption>`, `<ComboboxGroup>` | Define the Combobox Options by passing children |
|
|
83
|
-
| `multiselect` | `boolean` | Defines whether a user can select multiple options, or only a single option. When using TypeScript, `multiselect` affects the valid values of `initialValue`, `value`, and `onChange` | `false`
|
|
84
|
-
| `initialValue` | `Array<string>`, `string` | The initial selection. Must be a string (or array of strings) that matches the `value` prop of a `ComboboxOption`. Changing the `initialValue` after initial render will not change the selection. |
|
|
85
|
-
| `value` | `Array<string>`, `string` | The controlled value of the Combobox. Must be a string (or array of strings) that matches the `value` prop of a `ComboboxOption`. Changing `value` after initial render _will_ affect the selection. `value` will always take precedence over `initialValue` if both are provided. |
|
|
86
|
-
| `onChange` | `(Array<string>) => void`, `(string) => void` | A callback called when the selection changes. Callback recieves a single argument that is the new selection, either string, or string array |
|
|
87
|
-
| `overflow` | `'expand-y'`, `'expand-x'`, `'scroll-x'` | Defines the overflow behavior of a multiselect combobox. **expand-y**: Combobox has fixed width, and additional selections will cause the element to grow in the block direction. **expand-x**: Combobox has fixed height, and additional selections will cause the elemenet to grow in the inline direction. **scroll-x**: Combobox has fixed height and width, and additional selections will cause the element to be scrollable in the x (horizontal) direction. | `'expand-y'`
|
|
88
|
-
| `label` | `string` | An accessible label for the input, rendered in a `<label>` to the DOM |
|
|
89
|
-
| `aria-label` | `string` | An accessible label for the input, used only for screen-readers |
|
|
90
|
-
| `description` | `React.ReactNode` | A description for the input |
|
|
91
|
-
| `placeholder` | `string` | A placeholder for the input element. Uses the native `placeholder` attribute. | 'Select'
|
|
92
|
-
| `disabled` | `boolean` | Disables all interaction with the component | false
|
|
93
|
-
| `size` | `'default'` | Defines the visual size of the component | 'default'
|
|
94
|
-
| `darkMode` | `boolean` | Toggles dark mode | false
|
|
95
|
-
| `state` | `'error'`, `'none'` | The error state of the component. Defines whether the error message is displayed. | 'none'
|
|
96
|
-
| `errorMessage` | `string` | The message shown below the input when `state` is `error` |
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
103
|
-
| `
|
|
104
|
-
| `
|
|
105
|
-
| `
|
|
106
|
-
| `
|
|
107
|
-
| `
|
|
108
|
-
| `
|
|
109
|
-
| `
|
|
110
|
-
| `
|
|
111
|
-
| `
|
|
112
|
-
| `
|
|
80
|
+
| Prop | Type | Description | Default |
|
|
81
|
+
| ------------------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
|
|
82
|
+
| `children` | `<ComboboxOption>`, `<ComboboxGroup>` | Define the Combobox Options by passing children | |
|
|
83
|
+
| `multiselect` | `boolean` | Defines whether a user can select multiple options, or only a single option. When using TypeScript, `multiselect` affects the valid values of `initialValue`, `value`, and `onChange` | `false` |
|
|
84
|
+
| `initialValue` | `Array<string>`, `string` | The initial selection. Must be a string (or array of strings) that matches the `value` prop of a `ComboboxOption`. Changing the `initialValue` after initial render will not change the selection. | |
|
|
85
|
+
| `value` | `Array<string>`, `string` | The controlled value of the Combobox. Must be a string (or array of strings) that matches the `value` prop of a `ComboboxOption`. Changing `value` after initial render _will_ affect the selection. `value` will always take precedence over `initialValue` if both are provided. | |
|
|
86
|
+
| `onChange` | `(Array<string>) => void`, `(string) => void` | A callback called when the selection changes. Callback recieves a single argument that is the new selection, either string, or string array | |
|
|
87
|
+
| `overflow` | `'expand-y'`, `'expand-x'`, `'scroll-x'` | Defines the overflow behavior of a multiselect combobox. **expand-y**: Combobox has fixed width, and additional selections will cause the element to grow in the block direction. **expand-x**: Combobox has fixed height, and additional selections will cause the elemenet to grow in the inline direction. **scroll-x**: Combobox has fixed height and width, and additional selections will cause the element to be scrollable in the x (horizontal) direction. | `'expand-y'` |
|
|
88
|
+
| `label` | `string` | An accessible label for the input, rendered in a `<label>` to the DOM | |
|
|
89
|
+
| `aria-label` | `string` | An accessible label for the input, used only for screen-readers | |
|
|
90
|
+
| `description` | `React.ReactNode` | A description for the input | |
|
|
91
|
+
| `placeholder` | `string` | A placeholder for the input element. Uses the native `placeholder` attribute. | 'Select' |
|
|
92
|
+
| `disabled` | `boolean` | Disables all interaction with the component | false |
|
|
93
|
+
| `size` | `'default'` | Defines the visual size of the component | 'default' |
|
|
94
|
+
| `darkMode` | `boolean` | Toggles dark mode | false |
|
|
95
|
+
| `state` | `'error'`, `'none'` | The error state of the component. Defines whether the error message is displayed. | 'none' |
|
|
96
|
+
| `errorMessage` | `string` | The message shown below the input when `state` is `error` | 'This input needs your attention' |
|
|
97
|
+
| `successMessage` | `string` | The message shown below the input when `state` is `valid` | 'Success' |
|
|
98
|
+
| `onFilter` | `(value: string) => void` | A callback called when the search input changes. Recieves a single argument that is the current input value. Use this callback to set `searchState` and/or `filteredOptions` appropriately | |
|
|
99
|
+
| `searchState` | `'unset'`, `'error'`, `'loading'` | The state of search results. Toggles search messages within the menu. | 'unset' |
|
|
100
|
+
| `searchErrorMessage` | `string` | A message shown within the menu when `searchState` is `error` | 'Could not get results!' |
|
|
101
|
+
| `searchLoadingMessage` | `string` | A message shown within the menu when `searchState` is `loading` | 'Loading results...' |
|
|
102
|
+
| `searchEmptyMessage` | `string` | A message shown within the menu when there are no options passed in as children, or `filteredOptions` is an empty array | 'No results found' |
|
|
103
|
+
| `clearable` | `boolean` | Defines whether the Clear button appears to the right of the input | |
|
|
104
|
+
| `onClear` | `(e: MouseEvent) => void` | A callback fired when the Clear button is pressed. Fired _after_ `onChange`, and _before_ `onFilter` | |
|
|
105
|
+
| `filteredOptions` | `Array<string>`, `null` | An array used to define which options are displayed. Do not remove Options from the JSX children, as this will affect the selected options | |
|
|
106
|
+
| `chipTruncationLocation` | `'start'`, `'middle'`, `'end'`, `'none'` | Defines where the ellipses appear in a Chip when the length exceeds the `chipCharacterLimit` | 'none' |
|
|
107
|
+
| `chipCharacterLimit` | `number` | Defined the character limit of a multiselect Chip before they start truncating. Note: the three ellipses dots are included in the character limit. | 12 |
|
|
108
|
+
| `className` | `string` | The className passed to the root element of the component. | |
|
|
109
|
+
| `usePortal` | `boolean` | Will position Popover's children relative to its parent without using a Portal, if `usePortal` is set to false. NOTE: The parent element should be CSS position `relative`, `fixed`, or `absolute` if using this option. | `true` |
|
|
110
|
+
| `portalContainer` | `HTMLElement` \| `null` | Sets the container used for the popover's portal. | |
|
|
111
|
+
| `scrollContainer` | `HTMLElement` \| `null` | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that element to allow the portal to position properly. | |
|
|
112
|
+
| `portalClassName` | `string` | Passes the given className to the popover's portal container if the default portal container is being used. | |
|
|
113
|
+
| `popoverZIndex` | `number` | Sets the z-index CSS property for the popover. | |
|
|
113
114
|
|
|
114
115
|
# ComboboxOption
|
|
115
116
|
|
|
@@ -6,7 +6,7 @@ import { ComboboxProps } from './Combobox.types';
|
|
|
6
6
|
* allowing the user to either type a value directly or select a value from the list.
|
|
7
7
|
* Can be configured to select a single or multiple options.
|
|
8
8
|
*/
|
|
9
|
-
export declare function Combobox<M extends boolean>({ children, label, description, placeholder, 'aria-label': ariaLabel, disabled, size, darkMode: darkModeProp, state, errorMessage, searchState, searchEmptyMessage, searchErrorMessage, searchLoadingMessage, filteredOptions, onFilter, clearable, onClear, overflow, multiselect, initialValue, inputValue: inputValueProp, onInputChange, onChange, value, chipTruncationLocation, chipCharacterLimit, className, usePortal, portalClassName, portalContainer, scrollContainer, popoverZIndex, ...rest }: ComboboxProps<M>): React.JSX.Element;
|
|
9
|
+
export declare function Combobox<M extends boolean>({ children, label, description, placeholder, 'aria-label': ariaLabel, disabled, size, darkMode: darkModeProp, state, errorMessage, successMessage, searchState, searchEmptyMessage, searchErrorMessage, searchLoadingMessage, filteredOptions, onFilter, clearable, onClear, overflow, multiselect, initialValue, inputValue: inputValueProp, onInputChange, onChange, value, chipTruncationLocation, chipCharacterLimit, className, usePortal, portalClassName, portalContainer, scrollContainer, popoverZIndex, ...rest }: ComboboxProps<M>): React.JSX.Element;
|
|
10
10
|
export declare namespace Combobox {
|
|
11
11
|
var propTypes: {
|
|
12
12
|
multiselect: PropTypes.Requireable<boolean>;
|
|
@@ -28,7 +28,7 @@ export declare namespace Combobox {
|
|
|
28
28
|
searchEmptyMessage: PropTypes.Requireable<string>;
|
|
29
29
|
searchState: PropTypes.Requireable<"error" | "unset" | "loading">;
|
|
30
30
|
errorMessage: PropTypes.Requireable<string>;
|
|
31
|
-
state: PropTypes.Requireable<"none" | "error">;
|
|
31
|
+
state: PropTypes.Requireable<"none" | "error" | "valid">;
|
|
32
32
|
size: PropTypes.Requireable<"xsmall" | "small" | "default" | "large">;
|
|
33
33
|
disabled: PropTypes.Requireable<boolean>;
|
|
34
34
|
description: PropTypes.Requireable<string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAYN,MAAM,OAAO,CAAC;AAQf,OAAO,SAAS,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAYN,MAAM,OAAO,CAAC;AAQf,OAAO,SAAS,MAAM,YAAY,CAAC;AAyEnC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,OAAO,EAAE,EAC1C,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAsB,EACtB,YAAY,EAAE,SAAS,EACvB,QAAgB,EAChB,IAA2B,EAC3B,QAAQ,EAAE,YAAY,EACtB,KAAc,EACd,YAAqC,EACrC,cAAyC,EACzC,WAAqB,EACrB,kBAAuC,EACvC,kBAA6C,EAC7C,oBAA2C,EAC3C,eAAe,EACf,QAAQ,EACR,SAAgB,EAChB,OAAO,EACP,QAA2B,EAC3B,WAAwB,EACxB,YAAY,EACZ,UAAU,EAAE,cAAc,EAC1B,aAAa,EACb,QAAQ,EACR,KAAK,EACL,sBAAsB,EACtB,kBAAuB,EACvB,SAAS,EACT,SAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,aAAa,EACb,GAAG,IAAI,EACR,EAAE,aAAa,CAAC,CAAC,CAAC,qBAmuClB;yBAvwCe,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAozCxB;;;GAGG"}
|
|
@@ -22,8 +22,12 @@ export declare const comboboxParentStyle: (size: Size) => string;
|
|
|
22
22
|
export declare const baseComboboxStyles: string;
|
|
23
23
|
export declare const comboboxThemeStyles: Record<Theme, string>;
|
|
24
24
|
export declare const comboboxSizeStyles: (size: Size, isMultiselectWithSelections: boolean) => string;
|
|
25
|
-
export declare const
|
|
26
|
-
export declare const
|
|
25
|
+
export declare const getComboboxDisabledStyles: (theme: Theme) => string;
|
|
26
|
+
export declare const getComboboxStateStyles: (theme: Theme) => {
|
|
27
|
+
error: string;
|
|
28
|
+
none: string;
|
|
29
|
+
valid: string;
|
|
30
|
+
};
|
|
27
31
|
export declare const comboboxFocusStyle: Record<Theme, string>;
|
|
28
32
|
export declare const iconsWrapperBaseStyles: string;
|
|
29
33
|
export declare const iconsWrapperSizeStyles: Record<Size, string>;
|
|
@@ -39,13 +43,10 @@ export declare const inputElementTransitionStyles: (isOpen: boolean) => string;
|
|
|
39
43
|
/** Should only be applied to a multiselect */
|
|
40
44
|
export declare const multiselectInputElementStyle: (size: Size, inputValue?: string) => string;
|
|
41
45
|
export declare const clearButtonStyle: string;
|
|
42
|
-
export declare const
|
|
43
|
-
export declare const errorMessageThemeStyle: Record<Theme, string>;
|
|
44
|
-
export declare const errorMessageSizeStyle: (size: Size) => string;
|
|
46
|
+
export declare const iconStyle: string;
|
|
45
47
|
export declare const labelDescriptionContainerStyle: string;
|
|
46
48
|
export declare const labelDescriptionLargeStyles: string;
|
|
47
49
|
export declare const comboboxOverflowShadowStyles: Record<Theme, string>;
|
|
48
|
-
export declare const
|
|
49
|
-
export declare const
|
|
50
|
-
export declare const caretIconDisabledStyles: Record<Theme, string>;
|
|
50
|
+
export declare const getCaretIconFill: (theme: Theme) => "#5C6C75" | "#C1C7C6";
|
|
51
|
+
export declare const getCaretIconDisabledFill: (theme: Theme) => "#5C6C75" | "#889397";
|
|
51
52
|
//# sourceMappingURL=Combobox.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.styles.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"Combobox.styles.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAiB3C,OAAO,EAAE,YAAY,IAAI,IAAI,EAAE,QAAQ,EAAS,MAAM,UAAU,CAAC;AAcjE;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAK9C,CAAC;AAUF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAClC,IAAI,EACJ;IACE,CAAC,EAAE,MAAM,CAAC;IACV,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC;CAChB,CA0BF,CAAC;AAEF,sCAAsC;AACtC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,+CAA+C;AAC/C,eAAO,MAAM,aAAa,IAAe,CAAC;AAE1C,eAAO,MAAM,mBAAmB,SAAU,IAAI,KAAG,MAShD,CAAC;AAEF,eAAO,MAAM,kBAAkB,QA4B9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CASrD,CAAC;AAEF,eAAO,MAAM,kBAAkB,SACvB,IAAI,+BACmB,OAAO,WAQrC,CAAC;AAEF,eAAO,MAAM,yBAAyB,UAAW,KAAK,WAKrD,CAAC;AAEF,eAAO,MAAM,sBAAsB,UAAW,KAAK;;;;CAUjD,CAAC;AAEH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAapD,CAAC;AAEF,eAAO,MAAM,sBAAsB,QAGlC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAavD,CAAC;AAEF,eAAO,MAAM,iBAAiB;cAIlB,QAAQ;UACZ,IAAI;wBAkDX,CAAC;AAEF,eAAO,MAAM,qBAAqB,QAwBjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAWxD,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAWhE,CAAC;AAEF,eAAO,MAAM,qBAAqB,SAAU,IAAI,WAK/C,CAAC;AAEF,eAAO,MAAM,4BAA4B,WAAY,OAAO,WAM3D,CAAC;AAGF,8CAA8C;AAC9C,eAAO,MAAM,4BAA4B,SACjC,IAAI,eACG,MAAM,WAOpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAI5B,CAAC;AAEF,eAAO,MAAM,SAAS,QAGrB,CAAC;AAEF,eAAO,MAAM,8BAA8B,QAI1C,CAAC;AAEF,eAAO,MAAM,2BAA2B,QAGvC,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAY9D,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,KAAK,0BACV,CAAC;AAEpC,eAAO,MAAM,wBAAwB,UAAW,KAAK,0BACjB,CAAC"}
|
|
@@ -82,7 +82,11 @@ export type BaseComboboxProps = Omit<HTMLElementProps<'div'>, 'onChange'> & Port
|
|
|
82
82
|
/**
|
|
83
83
|
* The message shown below the input when state is `error`
|
|
84
84
|
*/
|
|
85
|
-
errorMessage?:
|
|
85
|
+
errorMessage?: ReactNode;
|
|
86
|
+
/**
|
|
87
|
+
* The message shown below the input when state is `valid`
|
|
88
|
+
*/
|
|
89
|
+
successMessage?: ReactNode;
|
|
86
90
|
/**
|
|
87
91
|
* The state of search results. Toggles search messages within the menu.
|
|
88
92
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,eAAe,EACf,KAAK,EACN,MAAM,UAAU,CAAC;AAElB;;GAEG;AAEH,MAAM,WAAW,wBAAwB,CAAC,CAAC,SAAS,OAAO;IACzD;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC;IAChB;;;;OAIG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC3B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAE3B;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,QAAQ,GAAG,SAAS,CAAC;CAClD;AAED,KAAK,gBAAgB,GAAG,IAAI,CAC1B,SAAS,EACT,wBAAwB,GAAG,oBAAoB,GAAG,eAAe,CAClE,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GACvE,kBAAkB,GAClB,gBAAgB,GAAG;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,eAAe,EACf,KAAK,EACN,MAAM,UAAU,CAAC;AAElB;;GAEG;AAEH,MAAM,WAAW,wBAAwB,CAAC,CAAC,SAAS,OAAO;IACzD;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC;IAChB;;;;OAIG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC3B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAE3B;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,QAAQ,GAAG,SAAS,CAAC;CAClD;AAED,KAAK,gBAAgB,GAAG,IAAI,CAC1B,SAAS,EACT,wBAAwB,GAAG,oBAAoB,GAAG,eAAe,CAClE,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GACvE,kBAAkB,GAClB,gBAAgB,GAAG;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAE3B;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAEvE;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAE3D;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEJ,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,OAAO,IAAI,MAAM,CACnD,iBAAiB,GAAG,wBAAwB,CAAC,CAAC,CAAC,EAC/C,OAAO,GAAG,YAAY,CACvB,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e,{createContext as n,useContext as r,useEffect as t,useMemo as a,useCallback as o,useRef as i,useState as l}from"react";import c from"lodash/clone";import s from"lodash/debounce";import u from"lodash/isArray";import d from"lodash/isEqual";import p from"lodash/isNull";import f from"lodash/isString";import h from"lodash/isUndefined";import g from"prop-types";import{css as m,cx as b,keyframes as v}from"@leafygreen-ui/emotion";import{useForwardedRef as y,useIdAllocator as x,useAvailableSpace as k,useDynamicRefs as w,usePrevious as C,useAutoScroll as E,useBackdropClick as L}from"@leafygreen-ui/hooks";import S,{isComponentGlyph as N}from"@leafygreen-ui/icon";import O from"@leafygreen-ui/icon-button";import D,{useDarkMode as M}from"@leafygreen-ui/leafygreen-provider";import{createUniqueClassName as j,keyMap as I,Theme as z,isComponentType as T,consoleOnce as P}from"@leafygreen-ui/lib";import{Error as A,Label as F,Description as W}from"@leafygreen-ui/typography";import{chipTextClassName as X,TruncationLocation as R,Chip as G,BaseFontSize as H,Variant as V}from"@leafygreen-ui/chip";import{typeScales as Z,spacing as K,fontWeights as Y,fontFamilies as q,transitionDuration as B,focusRing as U}from"@leafygreen-ui/tokens";import{palette as $}from"@leafygreen-ui/palette";import J from"@leafygreen-ui/popover";import{transparentize as Q}from"polished";import{leftGlyphClassName as _,InputOption as ee,InputOptionContent as ne}from"@leafygreen-ui/input-option";import re from"lodash/kebabCase";import te from"lodash/escapeRegExp";import ae from"@leafygreen-ui/checkbox";function oe(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function ie(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?oe(Object(r),!0).forEach((function(n){ce(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):oe(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function le(e){return le="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},le(e)}function ce(e,n,r){return(n=function(e){var n=function(e,n){if("object"!=typeof e||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n||"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function se(){return se=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},se.apply(this,arguments)}function ue(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function de(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function pe(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,a,o,i,l=[],c=!0,s=!1;try{if(o=(r=r.call(e)).next,0===n){if(Object(r)!==r)return;c=!1}else for(;!(c=(t=o.call(r)).done)&&(l.push(t.value),l.length!==n);c=!0);}catch(e){s=!0,a=e}finally{try{if(!c&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(s)throw a}}return l}}(e,n)||he(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function fe(e){return function(e){if(Array.isArray(e))return ge(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||he(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function he(e,n){if(e){if("string"==typeof e)return ge(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?ge(e,n):void 0}}function ge(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}var me="Input",be="ClearButton",ve="FirstChip",ye="LastChip",xe="MiddleChip",ke="Combobox",we="Menu",Ce={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},Ee={expandY:"expand-y",scrollX:"scroll-x",expandX:"expand-x"},Le={none:"none",error:"error"},Se={unset:"unset",error:"error",loading:"loading"};var Ne,Oe,De,Me,je,Ie,ze,Te,Pe,Ae,Fe,We,Xe,Re,Ge,He=n({multiselect:!1,size:Ce.Default,withIcons:!1,disabled:!1,isOpen:!1,state:Le.none,searchState:Se.unset,overflow:Ee.expandY}),Ve=j("combobox-chip"),Ze=(ce(Ne={},Ce.XSmall,16),ce(Ne,Ce.Small,Z.body1.lineHeight),ce(Ne,Ce.Default,Z.body1.lineHeight),ce(Ne,Ce.Large,Z.body2.lineHeight),Ne),Ke=(ce(Oe={},Ce.XSmall,Z.body1.fontSize),ce(Oe,Ce.Small,Z.body1.fontSize),ce(Oe,Ce.Default,Z.body1.fontSize),ce(Oe,Ce.Large,Z.body2.fontSize),Oe),Ye=(ce(De={},Ce.XSmall,1),ce(De,Ce.Small,0),ce(De,Ce.Default,2),ce(De,Ce.Large,4),De),qe=(ce(Te={},Ce.XSmall,m(Me||(Me=de(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),Ke[Ce.XSmall],Ze[Ce.XSmall],X,Ye[Ce.XSmall])),ce(Te,Ce.Small,m(je||(je=de(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),Ke[Ce.Small],Ze[Ce.Small],X,Ye[Ce.Small])),ce(Te,Ce.Default,m(Ie||(Ie=de(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),Ke[Ce.Default],Ze[Ce.Default],X,Ye[Ce.Default])),ce(Te,Ce.Large,m(ze||(ze=de(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-inline-end: 10px;\n padding-block: ","px;\n }\n "])),Ke[Ce.Large],Ze[Ce.Large],X,Ye[Ce.Large])),Te),Be=e.forwardRef((function(n,a){var o,i=n.displayName,l=n.isFocused,c=n.onRemove,s=n.onFocus,u=r(He),d=u.size,p=u.disabled,f=u.overflow,h=u.chipTruncationLocation,g=void 0===h?R.End:h,m=u.chipCharacterLimit,v=void 0===m?12:m,x=u.popoverZIndex,k=f===Ee.scrollX?R.None:g,w=y(a,null),C=null===(o=w.current)||void 0===o?void 0:o.querySelector("button");t((function(){l&&!p&&(null==C||C.focus())}),[p,C,l]);return e.createElement(G,{label:i,className:b(Ve,qe[d]),role:"option","aria-selected":l,"data-testid":"lg-combobox-chip",onClick:function(e){null!=C&&C.contains(e.target)||s()},onKeyDown:function(e){p||e.key!==I.Delete&&e.key!==I.Backspace&&e.key!==I.Enter&&e.key!==I.Space||c()},onDismiss:function(){p||c()},baseFontSize:H.Body1,chipCharacterLimit:v,chipTruncationLocation:k,popoverZIndex:x,variant:V.Gray,ref:w,disabled:p,tabIndex:-1})}));Be.displayName="ComboboxChip";var Ue,$e,Je,Qe,_e,en,nn,rn,tn,an,on,ln,cn,sn,un,dn,pn,fn=(ce(Fe={},z.Light,m(Pe||(Pe=de(["\n padding-top: ","px;\n "])),K[2])),ce(Fe,z.Dark,m(Ae||(Ae=de(["\n padding-top: ","px;\n "])),K[2])),Fe),hn=m(We||(We=de(["\n cursor: default;\n width: 100%;\n padding: 0 12px 2px;\n outline: none;\n overflow-wrap: anywhere;\n font-size: 12px;\n line-height: 16px;\n font-weight: ",";\n text-transform: uppercase;\n letter-spacing: 0.4px;\n"])),Y.bold),gn=(ce(Ge={},z.Light,m(Xe||(Xe=de(["\n color: ",";\n "])),$.gray.dark1)),ce(Ge,z.Dark,m(Re||(Re=de(["\n color: ",";\n "])),$.gray.light1)),Ge);function mn(n){var r=n.label,t=n.className,a=n.children,o=M().theme,i=x({prefix:"combobox-group"});return e.Children.count(a)>0?e.createElement("div",{className:b(fn[o],t)},e.createElement("div",{className:b(hn,gn[o]),id:i},r),e.createElement("div",{role:"group","aria-labelledby":i},a)):e.createElement(e.Fragment,null)}function bn(e){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}bn.displayName="ComboboxGroup",bn.propTypes={className:g.string,children:g.node.isRequired,label:g.string.isRequired};var vn,yn=(ce(Ue={},Ce.XSmall,{x:12,y:8}),ce(Ue,Ce.Small,{x:12,y:8}),ce(Ue,Ce.Default,{x:12,y:8}),ce(Ue,Ce.Large,{x:12,y:8}),Ue),xn=function(e){return Ze[e]+2*yn[e].y},kn=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:384;return m($e||($e=de(["\n width: ","px;\n overflow: hidden;\n border-radius: 12px;\n border: 1px solid;\n"])),e)},wn=(ce(_e={},z.Light,m(Je||(Je=de(["\n box-shadow: 0px 4px 7px ",";\n border-color: ",";\n "])),Q(.85,$.black),$.gray.light2)),ce(_e,z.Dark,m(Qe||(Qe=de(["\n box-shadow: 0px 4px 7px ",";\n border-color: ",";\n "])),Q(.85,$.black),$.gray.dark2)),_e),Cn=m(en||(en=de(["\n position: relative;\n width: 100%;\n margin: 0;\n padding: ","px 0;\n font-family: ",";\n border-radius: inherit;\n overflow-y: auto;\n scroll-behavior: smooth;\n"])),K[2],q.default),En=(ce(tn={},z.Light,m(nn||(nn=de(["\n color: ",";\n background-color: ",";\n "])),$.black,$.white)),ce(tn,z.Dark,m(rn||(rn=de(["\n color: ",";\n background-color: ",";\n "])),$.gray.light1,$.gray.dark3)),tn),Ln=m(an||(an=de(["\n position: relative;\n margin: 0;\n padding: 0;\n"]))),Sn=m(on||(on=de(["\n font-family: inherit;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"]))),Nn=(ce(sn={},z.Light,m(ln||(ln=de(["\n color: ",";\n "])),$.gray.dark3)),ce(sn,z.Dark,m(cn||(cn=de(["\n color: ",";\n "])),$.gray.light3)),sn),On=function(e){return m(un||(un=de(["\n font-size: ","px;\n line-height: ","px;\n padding: ","px ","px;\n"])),Ke[e],Ze[e],yn[e].y,yn[e].x)},Dn=v(dn||(dn=de(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]))),Mn=m(pn||(pn=de(["\n animation: "," 1.5s linear infinite;\n"])),Dn),jn=["children","id","refEl","labelId","menuWidth","searchLoadingMessage","searchErrorMessage","searchEmptyMessage"],In=e.forwardRef((function(n,t){var o=n.children,i=n.id,l=n.refEl,c=n.labelId,s=n.menuWidth,u=n.searchLoadingMessage,d=n.searchErrorMessage,p=n.searchEmptyMessage,f=ue(n,jn),g=M(),v=g.darkMode,x=g.theme,w=r(He),C=w.disabled,E=w.size,L=w.isOpen,N=w.searchState,O=y(t,null),D=k(l),j=h(D)?"unset":"".concat(Math.min(D,256),"px"),I=a((function(){var n=b(Sn,Nn[x],On(E)),r=b(Sn,On(E));switch(N){case"loading":return e.createElement("span",{className:n},e.createElement(S,{glyph:"Refresh",color:v?$.blue.light1:$.blue.base,className:Mn}),u);case"error":return e.createElement(A,{className:r},e.createElement(S,{glyph:"Warning",color:v?$.red.light1:$.red.base}),e.createElement("span",null,d));default:return o&&"object"===le(o)&&"length"in o&&o.length>0?e.createElement("ul",{className:Ln},o):e.createElement("span",{className:n},p)}}),[x,E,N,v,u,d,o,p]);return e.createElement(J,se({active:L&&!C,spacing:4,align:"bottom",justify:"middle",refEl:l,adjustOnMutation:!0,className:b(kn(s),wn[x])},f),e.createElement("div",{ref:O,id:i,role:"listbox","aria-labelledby":c,"aria-expanded":L,className:b(Cn,En[x],m(vn||(vn=de(["\n max-height: ",";\n "])),j)),onMouseDownCapture:function(e){return e.preventDefault()}},I))}));In.displayName="ComboboxMenu";var zn,Tn,Pn,An,Fn,Wn,Xn,Rn,Gn,Hn,Vn,Zn,Kn,Yn,qn,Bn,Un,$n,Jn,Qn,_n,er,nr,rr,tr,ar,or=function(e){var n=e.scrollHeight;return e.scrollTop<n-e.clientHeight},ir=function(e){var n,r=e.value,t=e.displayName;return{value:null!=r?r:re(t),displayName:null!==(n=null!=t?t:r)&&void 0!==n?n:""}},lr=function n(r){return e.Children.toArray(r).reduce((function(e,r){if(T(r,"ComboboxOption")){var t=ir(r.props),a=t.value,o=t.displayName,i=r.props,l=i.glyph,c=i.disabled;return[].concat(fe(e),[{value:a,displayName:o,isDisabled:!!c,hasGlyph:!!l}])}if(T(r,"ComboboxGroup")){var s=r.props.children;if(s)return[].concat(fe(e),fe(n(s)))}}),[])},cr=function(e,n){if(e)return n.find((function(n){return n.value===e}))},sr=function(e,n){var r,t;return e?null!==(r=null===(t=cr(e,n))||void 0===t?void 0:t.displayName)&&void 0!==r?r:e:""},ur=function(e){return m(zn||(zn=de(["\n font-size: ","px;\n line-height: ","px;\n min-height: ","px;\n padding: ","px ","px;\n gap: ","px;\n\n &:before {\n max-height: ","px;\n }\n"])),Ke[e],Ze[e],xn(e),yn[e].y,yn[e].x,K[1],xn(e))},dr=(ce(Wn={},Ce.XSmall,m(Tn||(Tn=de(["\n min-width: ","px;\n "])),K[3])),ce(Wn,Ce.Small,m(Pn||(Pn=de(["\n min-width: ","px;\n "])),K[3])),ce(Wn,Ce.Default,m(An||(An=de(["\n min-width: ","px;\n "])),K[3])),ce(Wn,Ce.Large,m(Fn||(Fn=de(["\n min-width: ","px;\n "])),K[4])),Wn),pr=m(Xn||(Xn=de(["\n pointer-events: none;\n gap: 0;\n\n label {\n gap: 0;\n align-items: center;\n }\n"])));m(Rn||(Rn=de(["\n pointer-events: none;\n"])));var fr=function(e){return m(Gn||(Gn=de(["\n font-weight: ",";\n"])),e?Y.bold:Y.regular)},hr=(ce(Zn={},z.Light,m(Hn||(Hn=de(["\n color: ",";\n "])),$.gray.dark1)),ce(Zn,z.Dark,m(Vn||(Vn=de(["\n color: ",";\n "])),$.gray.base)),Zn),gr=(ce(qn={},z.Light,m(Kn||(Kn=de(["\n color: ",";\n "])),$.blue.dark1)),ce(qn,z.Dark,m(Yn||(Yn=de(["\n color: ",";\n "])),$.blue.light3)),qn),mr=(ce($n={},z.Light,m(Bn||(Bn=de(["\n color: ",";\n "])),$.gray.light1)),ce($n,z.Dark,m(Un||(Un=de(["\n color: ",";\n "])),$.gray.dark1)),$n),br=(ce(_n={},z.Light,m(Jn||(Jn=de(["\n color: ",";\n "])),$.blue.base)),ce(_n,z.Dark,m(Qn||(Qn=de(["\n color: ",";\n "])),$.blue.light1)),_n),vr=(ce(rr={},z.Light,m(er||(er=de(["\n color: ",";\n "])),$.gray.light1)),ce(rr,z.Dark,m(nr||(nr=de(["\n color: ",";\n "])),$.gray.dark1)),rr),yr=m(tr||(tr=de(["\n ."," {\n align-self: baseline;\n }\n"])),_),xr=m(ar||(ar=de(["\n ."," {\n height: 28px;\n }\n"])),_),kr=["glyph","isSelected","displayName","isFocused","setSelected","className","description","value","onClick","disabled"],wr=e.forwardRef((function(n,t){var i,l=n.glyph,c=n.isSelected,s=n.displayName,u=n.isFocused,d=n.setSelected,p=n.className,f=n.description,h=n.value,g=n.onClick,m=n.disabled,v=void 0!==m&&m,k=ue(n,kr),w=M(),C=w.darkMode,E=w.theme,L=r(He),O=L.multiselect,D=L.size,j=L.withIcons,I=L.inputValue,z=y(t,null),T=x({prefix:"combobox-option-text"}),P=o((function(e){e.stopPropagation(),v||(d(),null==g||g(e,h))}),[v,g,d,h]),A=a((function(){return function(n){var r,t=n.withIcons,a=n.isSelected,o=n.glyph,i=n.optionTextId,l=n.disabled,c=n.darkMode,s=n.size,u=n.multiselect,d=n.theme,p=n.isFocused;o&&!N(o)&&console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",o);var f=o&&N(o)?e.cloneElement(o,ie(ie({},o.props),{},{className:b(hr[d],(r={},ce(r,gr[d],p),ce(r,mr[d],l),r),o.props.className)})):e.createElement(e.Fragment,null),h=e.createElement(ae,{"aria-labelledby":i,checked:a,tabIndex:-1,disabled:l,darkMode:c,className:pr}),g=e.createElement(S,{glyph:"Checkmark",className:b(dr[s],br[d],ce({},vr[d],l))});return{leftGlyph:u?t?f:h:t?f:a?g:null,rightGlyph:u?t&&h:t&&a&&g}}({withIcons:j,isSelected:c,glyph:l,theme:E,darkMode:C,size:D,disabled:v,multiselect:O,optionTextId:T,isFocused:u})}),[C,v,l,c,O,T,D,E,j,u]),F=A.leftGlyph,W=A.rightGlyph,X=O&&!j;return e.createElement(ee,se({},k,{as:"li",ref:z,highlighted:u,disabled:v,"aria-label":s,darkMode:C,className:b(ur(D),(i={},ce(i,yr,X),ce(i,xr,X&&D===Ce.Large),i),p),onClick:P,onKeyDown:P}),e.createElement(ne,{leftGlyph:F,rightGlyph:W,description:f},e.createElement("span",{id:T,className:fr(c)},function(n,r,t){if(r&&t){var a=te(r),o=new RegExp(a,"gi"),i=n.matchAll(o);if(i){for(var l=n.split(""),c=0,s=Array.from(i);c<s.length;c++){var u,d=s[c],p=null!==(u=d.index)&&void 0!==u?u:-1,f=d[0],h=f.length,g=p+f+h,m=new Array(h).fill("");m[0]=e.createElement(t,{key:g},f),l.splice.apply(l,[p,h].concat(fe(m)))}return e.createElement(e.Fragment,null,l)}return e.createElement(e.Fragment,null,n)}return e.createElement(e.Fragment,null,n)}(s,I,"strong"))))}));function Cr(e){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}wr.displayName="ComboboxOption",Cr.displayName="ComboboxOption",Cr.propTypes={displayName:g.string,value:g.string,glyph:g.node,disabled:g.bool,className:g.string,description:g.string,onClick:g.func};var Er,Lr,Sr,Nr,Or,Dr,Mr,jr,Ir,zr,Tr,Pr,Ar,Fr,Wr,Xr,Rr,Gr,Hr,Vr,Zr,Kr,Yr,qr,Br,Ur,$r,Jr,Qr,_r,et,nt,rt,tt,at,ot,it,lt,ct,st,ut,dt,pt,ft,ht,gt,mt,bt,vt,yt,xt=function(e){return!h(e)&&!p(e)&&(f(e)||u(e)&&e.length>0)},kt=function(e){return Ze[e]+2*Ye[e]},wt=(ce(Er={},Ce.XSmall,22),ce(Er,Ce.Small,28),ce(Er,Ce.Default,36),ce(Er,Ce.Large,48),Er),Ct=function(e){return(wt[e]-kt(e)-2)/2},Et=(ce(Lr={},Ce.XSmall,{y:Ct(Ce.XSmall),xLeftWithChip:1,xLeftWithoutChip:10,xRight:4}),ce(Lr,Ce.Small,{y:Ct(Ce.Small),xLeftWithChip:4,xLeftWithoutChip:10,xRight:8}),ce(Lr,Ce.Default,{y:Ct(Ce.Default),xLeftWithChip:6,xLeftWithoutChip:12,xRight:12}),ce(Lr,Ce.Large,{y:Ct(Ce.Large),xLeftWithChip:K[2]-1,xLeftWithoutChip:K[2]-1,xRight:K[2]-1}),Lr),Lt=K[3],St=function(e){return m(Sr||(Sr=de(["\n font-family: ",";\n width: 100%;\n min-width: ","px;\n "])),q.default,Ke[e]+2*Et[e].xLeftWithChip+Lt+2)},Nt=m(Nr||(Nr=de(["\n display: flex;\n align-items: center;\n gap: ","px;\n cursor: text;\n transition: ","ms ease-in-out;\n transition-property: background-color, box-shadow, border-color;\n border: 1px solid;\n width: 100%;\n max-width: 100%;\n border-radius: 6px;\n position: relative;\n overflow: hidden;\n\n // Overflow shadow\n ::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 20px;\n bottom: -21px;\n left: 50%;\n translate: -50% 0%;\n border-radius: 20%;\n box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);\n transition: ","ms linear;\n transition-property: box-shadow;\n }\n"])),K[2],B.default,B.default),Ot=(ce(Mr={},z.Light,m(Or||(Or=de(["\n color: ",";\n background-color: ",";\n border-color: ",";\n "])),$.gray.dark3,$.white,$.gray.base)),ce(Mr,z.Dark,m(Dr||(Dr=de(["\n color: ",";\n background-color: ",";\n border-color: ",";\n "])),$.gray.light2,$.gray.dark4,$.gray.base)),Mr),Dt=function(e,n){return m(jr||(jr=de(["\n padding-top: ","px;\n padding-bottom: ","px;\n padding-left: ",";\n padding-right: ","px;\n"])),Et[e].y,Et[e].y,"".concat(n?Et[e].xLeftWithChip:Et[e].xLeftWithoutChip,"px"),Et[e].xRight)},Mt=(ce(Tr={},z.Light,m(Ir||(Ir=de(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n "])),$.gray.dark1,$.gray.light2,$.gray.light1)),ce(Tr,z.Dark,m(zr||(zr=de(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n "])),$.gray.dark1,$.gray.dark3,$.gray.dark2)),Tr),jt=(ce(Fr={},z.Light,m(Pr||(Pr=de(["\n border-color: ",";\n "])),$.red.base)),ce(Fr,z.Dark,m(Ar||(Ar=de(["\n border-color: ",";\n "])),$.red.light1)),Fr),It=(ce(Rr={},z.Light,m(Wr||(Wr=de(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),U[z.Light].input)),ce(Rr,z.Dark,m(Xr||(Xr=de(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),U[z.Dark].input)),Rr),zt=m(Gr||(Gr=de(["\n display: flex;\n align-items: center;\n"]))),Tt=(ce(Yr={},Ce.XSmall,m(Hr||(Hr=de(["\n gap: ","px;\n "])),K[1])),ce(Yr,Ce.Small,m(Vr||(Vr=de(["\n gap: ","px;\n "])),K[2])),ce(Yr,Ce.Default,m(Zr||(Zr=de(["\n gap: ","px;\n "])),K[2])),ce(Yr,Ce.Large,m(Kr||(Kr=de(["\n gap: ","px;\n "])),K[2])),Yr),Pt=function(e){var n=e.overflow,r=e.size,t=m(qr||(qr=de(["\n flex-grow: 1;\n width: 100%;\n "])));switch(n){case Ee.scrollX:return m(Br||(Br=de(["\n ","\n display: block;\n height: ","px;\n white-space: nowrap;\n overflow-x: scroll;\n scroll-behavior: smooth;\n scrollbar-width: none;\n line-height: 1;\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n & > ."," {\n margin-inline: 2px;\n\n &:first-child {\n margin-inline-start: 0;\n }\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n "])),t,kt(r),Ve);case Ee.expandY:return m(Ur||(Ur=de(["\n ","\n display: flex;\n flex-wrap: wrap;\n gap: ","px;\n overflow-x: hidden;\n min-height: ","px;\n max-height: calc((","px) + (","px * 2));\n "])),t,4,kt(r),3*kt(r),4)}},At=m($r||($r=de(["\n font-family: ",";\n width: 100%;\n border: none;\n cursor: inherit;\n background-color: inherit;\n color: inherit;\n box-sizing: content-box;\n padding: 0;\n margin: 0;\n text-overflow: ellipsis;\n vertical-align: top;\n\n // Only add padding if there are chips\n &:not(:first-child) {\n padding-left: ","px;\n }\n\n &:placeholder-shown {\n min-width: 100%;\n }\n &:focus {\n outline: none;\n }\n"])),q.default,K[1]),Ft=(ce(_r={},z.Light,m(Jr||(Jr=de(["\n &::placeholder {\n color: ",";\n }\n "])),$.gray.dark1)),ce(_r,z.Dark,m(Qr||(Qr=de(["\n &::placeholder {\n color: ",";\n }\n "])),$.gray.light1)),_r),Wt=(ce(rt={},z.Light,m(et||(et=de(["\n &::placeholder {\n color: ",";\n }\n "])),$.gray.dark1)),ce(rt,z.Dark,m(nt||(nt=de(["\n &::placeholder {\n color: ",";\n }\n "])),$.gray.dark1)),rt),Xt=function(e){return m(tt||(tt=de(["\n height: ","px;\n font-size: ","px;\n line-height: ","px;\n min-width: ","px;\n"])),kt(e),Ke[e],Ze[e],Ke[e])},Rt=function(e){return m(at||(at=de(["\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by `scroll-behavior` \n */\n transition: width ease-in-out ",";\n"],["\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by \\`scroll-behavior\\` \n */\n transition: width ease-in-out ",";\n"])),e?"0s":"100ms")},Gt=function(e,n){var r,t=null!==(r=null==n?void 0:n.length)&&void 0!==r?r:0;return m(ot||(ot=de(["\n width: ","px;\n max-width: 100%;\n "])),t*Ke[e])},Ht=m(it||(it=de(["\n // Add a negative margin so the button takes up the same space as the regular icons\n margin-block: calc(","px - 100%);\n margin-inline: -6px;\n"])),Lt/2),Vt=m(lt||(lt=de(["\n height: ","px;\n width: ","px;\n"])),Lt,Lt),Zt=(ce(ut={},z.Light,m(ct||(ct=de(["\n color: ",";\n "])),$.red.base)),ce(ut,z.Dark,m(st||(st=de(["\n color: ",";\n "])),$.red.light1)),ut),Kt=function(e){return m(dt||(dt=de(["\n font-size: ","px;\n line-height: ","px;\n padding-top: ","px;\n"])),Ke[e],Ze[e],Et[e].y)},Yt=m(pt||(pt=de(["\n margin-bottom: ","px;\n display: flex;\n flex-direction: column;\n"])),K[1]),qt=m(ft||(ft=de(["\n font-size: ","px;\n line-height: ","px;\n"])),Z.large.fontSize,Z.large.lineHeight),Bt=(ce(mt={},z.Light,m(ht||(ht=de(["\n ::after {\n box-shadow: 0px 0px 7px 5px ",";\n }\n "])),Q(.85,$.black))),ce(mt,z.Dark,m(gt||(gt=de(["\n ::after {\n width: 95%;\n box-shadow: 0px -7px 12px 5px rgb(0 0 0 / 50%);\n }\n "])))),mt),Ut=(ce(bt={},z.Light,$.red.base),ce(bt,z.Dark,$.red.light1),bt),$t=(ce(vt={},z.Light,$.gray.dark2),ce(vt,z.Dark,$.gray.light1),vt),Jt=(ce(yt={},z.Light,$.gray.base),ce(yt,z.Dark,$.gray.dark1),yt),Qt=["children","label","description","placeholder","aria-label","disabled","size","darkMode","state","errorMessage","searchState","searchEmptyMessage","searchErrorMessage","searchLoadingMessage","filteredOptions","onFilter","clearable","onClear","overflow","multiselect","initialValue","inputValue","onInputChange","onChange","value","chipTruncationLocation","chipCharacterLimit","className","usePortal","portalClassName","portalContainer","scrollContainer","popoverZIndex"],_t=["className","glyph","disabled"];function ea(n){var r,g,m,v=n.children,y=n.label,k=n.description,N=n.placeholder,j=void 0===N?"Select":N,z=n["aria-label"],A=n.disabled,X=void 0!==A&&A,R=n.size,G=void 0===R?Ce.Default:R,H=n.darkMode,V=n.state,Z=void 0===V?"none":V,K=n.errorMessage,Y=n.searchState,q=void 0===Y?"unset":Y,B=n.searchEmptyMessage,U=void 0===B?"No results found":B,$=n.searchErrorMessage,J=void 0===$?"Could not get results!":$,Q=n.searchLoadingMessage,_=void 0===Q?"Loading results...":Q,ee=n.filteredOptions,ne=n.onFilter,re=n.clearable,te=void 0===re||re,ae=n.onClear,oe=n.overflow,de=void 0===oe?Ee.expandY:oe,fe=n.multiselect,he=void 0!==fe&&fe,ge=n.initialValue,Se=n.inputValue,Ne=n.onInputChange,Oe=n.onChange,De=n.value,Me=n.chipTruncationLocation,je=n.chipCharacterLimit,Ie=void 0===je?12:je,ze=n.className,Te=n.usePortal,Pe=void 0===Te||Te,Ae=n.portalClassName,Fe=n.portalContainer,We=n.scrollContainer,Xe=n.popoverZIndex,Re=ue(n,Qt),Ge=M(H),Ve=Ge.darkMode,Ze=Ge.theme,Ke=w({prefix:"option"}),Ye=w({prefix:"chip"}),qe=x({prefix:"combobox-input"}),Ue=x({prefix:"combobox-label"}),$e=x({prefix:"combobox-menu"}),Je=i(null),Qe=i(null),_e=i(null),en=i(null),nn=i(null),rn=pe(l(!1),2),tn=rn[0],an=rn[1],on=C(tn),ln=pe(l(null),2),cn=ln[0],sn=ln[1],un=pe(l(null),2),dn=un[0],pn=un[1],fn=C(dn),hn=pe(l(null!=Se?Se:""),2),gn=hn[0],bn=hn[1];t((function(){h(Se)||bn(Se)}),[Se]);var vn=function(e){bn(e)},yn=C(gn),xn=pe(l(null),2),kn=xn[0],wn=xn[1],Cn=pe(l(!1),2),En=Cn[0],Ln=Cn[1],Sn=he&&u(dn)&&dn.length>0?void 0:j,Nn=function(){return an(!1)},On=function(){return an(!0)},Dn=a((function(){return lr(v)}),[v]),Mn=o((function(e){return!he||"string"!=typeof e&&"number"!=typeof e?!he&&u(e)&&P.error("Error in Combobox: multiselect is set to `false`, but received an Array value"):P.error("Error in Combobox: multiselect is set to `true`, but received a ".concat(le(e),' value: "').concat(e,'"')),he&&u(e)}),[he]),jn=o((function(e){!X&&en&&en.current&&(en.current.focus(),h(e)||en.current.setSelectionRange(e,e))}),[X]),zn=o((function(e){if(Mn(dn)){var n=c(dn),r=Oe,t={diffType:"delete",value:null!=e?e:dn};p(e)?n.length=0:dn.includes(e)?n.splice(n.indexOf(e),1):(n.push(e),t.diffType="insert",vn("")),pn(n),null==r||r(n,t)}else{var a=e,o=Oe;pn(a),null==o||o(a)}}),[Mn,Oe,dn]),Tn=o((function(e){var n,r,t,a;return function(e,n){return Array.isArray(n)?n.includes(e):e===n}((r=Dn,(n=e)?null!==(t=null===(a=r.find((function(e){return e.displayName===n})))||void 0===a?void 0:a.value)&&void 0!==t?t:n:""),dn)}),[Dn,dn]),Pn=o((function(e){var n="string"==typeof e?e:e.value;return ee&&ee.length>0?ee.includes(n):!!Tn(gn)||("string"==typeof e?sr(n,Dn):e.displayName).toLowerCase().includes(gn.toLowerCase())}),[ee,Tn,gn,Dn]),An=a((function(){return Dn.filter(Pn)}),[Dn,Pn]),Fn=o((function(e){return!!e&&!!Dn.find((function(n){return n.value===e}))}),[Dn]),Wn=o((function(e){return An?An.findIndex((function(n){return n.value===e})):-1}),[An]),Xn=o((function(e){if(An&&An.length>=e){var n=An[e];return n?n.value:void 0}}),[An]),Rn=o((function(){return Mn(dn)?dn.findIndex((function(e){var n,r;return null===(n=Ye(e))||void 0===n||null===(r=n.current)||void 0===r?void 0:r.contains(document.activeElement)})):-1}),[Ye,Mn,dn]),Gn=pe(l(),2),Hn=Gn[0],Vn=Gn[1],Zn=o((function(e){var n,r=null!==(n=null==An?void 0:An.length)&&void 0!==n?n:0,t=r-1>0?r-1:0,a=Wn(cn);switch(e&&tn&&(wn(null),jn()),e){case"next":var o=Xn(a+1<r?a+1:0);sn(null!=o?o:null);break;case"prev":var i=Xn(a-1>=0?a-1:t);sn(null!=i?i:null);break;case"last":var l=Xn(t);sn(null!=l?l:null);break;default:var c=Xn(0);sn(null!=c?c:null)}}),[cn,Wn,Xn,tn,jn,null==An?void 0:An.length]),Kn=o((function(e,n){if(Mn(dn))switch(e){case"next":var r=null!=n?n:Rn(),t=r+1<dn.length?r+1:dn.length-1,a=dn[t];wn(a);break;case"prev":var o=null!=n?n:Rn(),i=o>0?o-1:o<0?dn.length-1:0,l=dn[i];wn(l);break;case"first":var c=dn[0];wn(c);break;case"last":var s=dn[dn.length-1];wn(s);break;default:wn(null)}}),[Rn,Mn,dn]),Yn=o((function(e,n){switch(e&&sn(null),e){case"right":switch(Hn){case me:var r,t,a;if((null===(r=en.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=en.current)||void 0===t?void 0:t.value.length))null===(a=Qe.current)||void 0===a||a.focus();break;case ve:case xe:case ye:if(Hn===ye||1===(null==dn?void 0:dn.length)){jn(0),Kn(null),n.preventDefault();break}Kn("next")}break;case"left":switch(Hn){case be:var o;n.preventDefault(),jn(null==en||null===(o=en.current)||void 0===o?void 0:o.value.length);break;case me:case xe:case ye:if(Mn(dn)){var i;if(Hn===me&&0!==(null===(i=en.current)||void 0===i?void 0:i.selectionStart))break;Kn("prev")}}break;default:Kn(null)}}),[Hn,Mn,dn,jn,Kn]);t((function(){gn!==yn&&Zn("first")}),[gn,tn,yn,Zn]),E(cn?Ke(cn):void 0,nn);var qn=o((function(n){if(T(n,"ComboboxOption")){var r=ir(n.props),t=r.value,a=r.displayName;if(Pn(t)){var o=n.props,i=o.className,l=o.glyph,c=o.disabled,s=ue(o,_t),u=Dn.findIndex((function(e){return e.value===t})),d=cn===t,p=Mn(dn)?dn.includes(t):dn===t,f=Ke(t);return e.createElement(wr,se({},s,{value:t,displayName:a,isFocused:d,isSelected:p,disabled:c,setSelected:function(){sn(t),zn(t),jn(),t===dn&&Nn()},glyph:l,className:i,index:u,ref:f}))}}else if(T(n,"ComboboxGroup")){var h=e.Children.map(n.props.children,qn);if(h&&(null==h?void 0:h.length)>0)return e.createElement(mn,{label:n.props.label,className:n.props.className},e.Children.map(h,qn))}}),[Dn,Ke,cn,Mn,dn,jn,Pn,zn]),Bn=a((function(){return e.Children.map(v,qn)}),[v,qn]),Un=a((function(){if(Mn(dn))return dn.filter(Fn).map((function(n,r){var t=sr(n,Dn),a=kn===n,o=Ye(n),i=r>=dn.length-1;return e.createElement(Be,{key:n,displayName:t,isFocused:a,onRemove:function(){i?(jn(),Kn(null)):Kn("next",r),zn(n)},onFocus:function(){wn(n)},ref:o})}))}),[Mn,dn,Fn,Dn,kn,Ye,zn,jn,Kn]),$n=a((function(){return Dn.some((function(e){return e.hasGlyph}))}),[Dn]),Jn=o((function(){var e=An.find((function(e){return e.displayName===gn||e.value===gn}));if(!De&&e)zn(e.value);else if(!Mn(dn)){var n,r=null!==(n=sr(dn,Dn))&&void 0!==n?n:fn;vn(r)}}),[Dn,gn,Mn,fn,dn,zn,De,An]),Qn=o((function(){if(xt(dn)){if(Mn(dn))pr(de);else if(!Mn(dn)){var e,n=null!==(e=sr(dn,Dn))&&void 0!==e?e:"";vn(n),Nn()}}else vn("")}),[Dn,Mn,dn,de]);t((function(){if(ge)if(u(ge)){var e,n=null!==(e=ge.filter((function(e){return Fn(e)})))&&void 0!==e?e:[];pn(n)}else Fn(ge)&&pn(ge);else pn(function(e){return e?[]:null}(he))}),[]),t((function(){if(!h(De)&&De!==yn)if(p(De))pn(null);else if(Mn(De)){var e=De.filter(Fn);pn(e)}else pn(Fn(De)?De:null)}),[Mn,Fn,yn,De]),t((function(){!h(fn)&&(u(dn)&&!p(fn)||f(dn)||p(dn))&&!d(dn,fn)&&Qn()}),[Qn,fn,dn]),t((function(){!tn&&on&&Jn()}),[tn,on,Jn]);var _n=pe(l(0),2),er=_n[0],nr=_n[1];t((function(){var e,n;nr(null!==(e=null===(n=Je.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)}),[Je,tn,cn,dn]);L(Nn,[nn,Je],tn);var rr=Mn(dn)&&!!dn.length,tr=s((function(e){Ln(or(e.target))}),50,{leading:!0}),ar=o((function(e){de===Ee.expandY&&tr(e)}),[tr,de]);t((function(){_e.current&&Ln(or(_e.current))}),[]);var ur,dr=ie({popoverZIndex:Xe},Pe?{usePortal:Pe,portalClassName:Ae,portalContainer:Fe,scrollContainer:We}:{usePortal:Pe});return e.createElement(D,{darkMode:Ve},e.createElement(He.Provider,{value:{multiselect:he,size:G,withIcons:$n,disabled:X,isOpen:tn,state:Z,searchState:q,chipTruncationLocation:Me,chipCharacterLimit:Ie,inputValue:gn,overflow:de,popoverZIndex:Xe}},e.createElement("div",se({className:b(St(G),ze)},Re),(y||k)&&e.createElement("div",{className:Yt},y&&e.createElement(F,{id:Ue,htmlFor:qe,darkMode:Ve,disabled:X,className:b(ce({},qt,G===Ce.Large))},y),k&&e.createElement(W,{darkMode:Ve,disabled:X,className:b(ce({},qt,G===Ce.Large))},k)),e.createElement("div",{ref:Je,role:"combobox","aria-expanded":tn,"aria-controls":$e,"aria-owns":$e,tabIndex:-1,onMouseDown:function(e){X&&e.preventDefault()},onClick:function(e){if(e.target!==en.current){var n=0;if(en.current)n=e.nativeEvent.offsetX>en.current.offsetLeft+en.current.clientWidth?gn.length:0;jn(n)}On()},onFocus:function(e){pr(de),Vn(function(e){var n,r,t,a;if(!e)return;if(null!==(n=en.current)&&void 0!==n&&n.contains(e))return me;if(null!==(r=Qe.current)&&void 0!==r&&r.contains(e))return be;var o=Mn(dn)?dn.findIndex((function(n){var r,t;return null===(r=Ye(n))||void 0===r||null===(t=r.current)||void 0===t?void 0:t.contains(e)})):-1;if(Mn(dn)){if(0===o)return ve;if(o===dn.length-1)return ye;if(o>0)return xe}if(null!==(t=nn.current)&&void 0!==t&&t.contains(e))return we;if(null!==(a=Je.current)&&void 0!==a&&a.contains(e))return ke}(e.target))},onKeyDown:function(e){var n,r,t=null===(n=nn.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(r=Je.current)||void 0===r?void 0:r.contains(document.activeElement))||t){if(e.ctrlKey||e.shiftKey||e.altKey)return;switch(e.key){case I.Tab:switch(Hn){case"Input":xt(dn)||(Nn(),Zn("first"),Kn(null));break;case"LastChip":Kn(null)}break;case I.Escape:Nn(),Zn("first");break;case I.Enter:tn?!tn||Hn!==me||p(cn)||function(e){if("string"==typeof e){var n=cr(e,Dn);return!(null==n||!n.isDisabled)}return!!e.isDisabled}(cn)?Hn===be&&(zn(null),jn()):zn(cn):On();break;case I.Backspace:var a;if(Mn(dn))"Input"===Hn&&0===(null===(a=en.current)||void 0===a?void 0:a.selectionStart)&&Kn("last");On();break;case I.ArrowDown:tn?(e.preventDefault(),Zn("next")):On();break;case I.ArrowUp:tn?(e.preventDefault(),Zn("prev")):On();break;case I.ArrowRight:Yn("right",e);break;case I.ArrowLeft:Yn("left",e);break;default:tn||On()}}},onTransitionEnd:function(){var e,n;nr(null!==(e=null===(n=Je.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)},className:b(Nt,Ot[Ze],Dt(G,rr),(r={},ce(r,Mt[Ze],X),ce(r,jt[Ze],Z===Le.error),ce(r,It[Ze],(ur=me,ur===Hn)),ce(r,Bt[Ze],En),r))},e.createElement("div",{onScroll:ar,ref:_e,className:Pt({size:G,overflow:de})},Un,e.createElement("input",{"aria-label":null!=z?z:y,"aria-autocomplete":"list","aria-controls":$e,"aria-labelledby":Ue,ref:en,id:qe,className:b(At,Xt(G),Ft[Ze],Rt(tn),(g={},ce(g,Gt(G,gn),Mn(dn)),ce(g,Wt[Ze],X),g)),placeholder:Sn,disabled:null!=X?X:void 0,onChange:function(e){vn(e.target.value),null==ne||ne(e.target.value),null==Ne||Ne(e)},value:gn,autoComplete:"off"})),e.createElement("div",{className:b(zt,Tt[G])},"error"===Z&&e.createElement(S,{glyph:"Warning",fill:Ut[Ze],className:Vt}),te&&xt(dn)&&!X&&e.createElement(O,{"aria-label":"Clear selection","aria-disabled":X,disabled:X,ref:Qe,onClick:function(e){X||(e.stopPropagation(),zn(null),null==ae||ae(e),null==ne||ne(""),jn())},onFocus:function(){sn(null)},className:b(Ht),darkMode:Ve},e.createElement(S,{glyph:"XWithCircle"})),e.createElement(S,{glyph:"CaretDown",className:Vt,fill:b((m={},ce(m,$t[Ze],!X),ce(m,Jt[Ze],X),m))}))),"error"===Z&&K&&e.createElement("div",{className:b(Zt[Ze],Kt(G))},K),e.createElement(In,se({id:$e,labelId:Ue,refEl:Je,ref:nn,menuWidth:er,searchLoadingMessage:_,searchErrorMessage:J,searchEmptyMessage:U},dr),Bn))));function pr(e){_e&&_e.current&&(e===Ee.scrollX&&(_e.current.scrollLeft=_e.current.scrollWidth),e===Ee.expandY&&(_e.current.scrollTop=_e.current.scrollHeight))}}ea.propTypes={multiselect:g.bool,value:g.oneOfType([g.string,g.arrayOf(g.string)]),initialValue:g.oneOfType([g.string,g.arrayOf(g.string)]),overflow:g.oneOf(Object.values(Ee)),darkMode:g.bool,label:g.string,"aria-label":g.string,children:g.node,onChange:g.func,chipCharacterLimit:g.number,chipTruncationLocation:g.oneOf(Object.values(R)),onClear:g.func,onFilter:g.func,clearable:g.bool,searchLoadingMessage:g.string,searchErrorMessage:g.string,searchEmptyMessage:g.string,searchState:g.oneOf(Object.values(Se)),errorMessage:g.string,state:g.oneOf(Object.values(Le)),size:g.oneOf(Object.values(Ce)),disabled:g.bool,description:g.string,placeholder:g.string,filteredOptions:g.arrayOf(g.string),popoverZIndex:g.number,usePortal:g.bool,scrollContainer:g.elementType,portalContainer:g.elementType,portalClassName:g.string};export{ea as Combobox,bn as ComboboxGroup,Cr as ComboboxOption};
|
|
1
|
+
import e,{createContext as n,useContext as r,useEffect as t,useMemo as a,useCallback as o,useRef as i,useState as l}from"react";import s from"lodash/clone";import c from"lodash/debounce";import u from"lodash/isArray";import d from"lodash/isEqual";import p from"lodash/isNull";import f from"lodash/isString";import h from"lodash/isUndefined";import m from"prop-types";import{css as g,cx as b,keyframes as v}from"@leafygreen-ui/emotion";import{FormFieldState as y,DEFAULT_MESSAGES as x,FormFieldFeedback as w}from"@leafygreen-ui/form-field";import{useForwardedRef as k,useIdAllocator as E,useAvailableSpace as C,useDynamicRefs as S,usePrevious as L,useAutoScroll as O,useBackdropClick as N}from"@leafygreen-ui/hooks";import D,{isComponentGlyph as M}from"@leafygreen-ui/icon";import j from"@leafygreen-ui/icon-button";import I,{useDarkMode as z}from"@leafygreen-ui/leafygreen-provider";import{createUniqueClassName as T,keyMap as P,Theme as A,isComponentType as F,consoleOnce as X}from"@leafygreen-ui/lib";import{Error as W,Label as R,Description as G}from"@leafygreen-ui/typography";import{chipTextClassName as V,TruncationLocation as H,Chip as Z,BaseFontSize as K,Variant as Y}from"@leafygreen-ui/chip";import{typeScales as U,spacing as q,fontWeights as B,fontFamilies as $,transitionDuration as J,color as Q,focusRing as _}from"@leafygreen-ui/tokens";import{palette as ee}from"@leafygreen-ui/palette";import ne from"@leafygreen-ui/popover";import{transparentize as re}from"polished";import{leftGlyphClassName as te,InputOption as ae,InputOptionContent as oe}from"@leafygreen-ui/input-option";import ie from"lodash/kebabCase";import le from"lodash/escapeRegExp";import se from"@leafygreen-ui/checkbox";function ce(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function ue(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?ce(Object(r),!0).forEach((function(n){fe(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ce(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function de(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function pe(e){return pe="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},pe(e)}function fe(e,n,r){return(n=de(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function he(){return he=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},he.apply(this,arguments)}function me(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function ge(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function be(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,a,o,i,l=[],s=!0,c=!1;try{if(o=(r=r.call(e)).next,0===n);else for(;!(s=(t=o.call(r)).done)&&(l.push(t.value),l.length!==n);s=!0);}catch(e){c=!0,a=e}finally{try{if(!s&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(c)throw a}}return l}}(e,n)||ye(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function ve(e){return function(e){if(Array.isArray(e))return xe(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||ye(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function ye(e,n){if(e){if("string"==typeof e)return xe(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?xe(e,n):void 0}}function xe(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}var we="Input",ke="ClearButton",Ee="FirstChip",Ce="LastChip",Se="MiddleChip",Le="Combobox",Oe="Menu",Ne={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},De={expandY:"expand-y",scrollX:"scroll-x",expandX:"expand-x"},Me=y,je={Unset:"unset",Error:"error",Loading:"loading"};var Ie,ze,Te,Pe,Ae,Fe,Xe,We,Re,Ge=n({multiselect:!1,size:Ne.Default,withIcons:!1,disabled:!1,isOpen:!1,state:Me.None,searchState:je.Unset,overflow:De.expandY}),Ve=T("combobox-chip"),He=fe(fe(fe(fe({},Ne.XSmall,16),Ne.Small,U.body1.lineHeight),Ne.Default,U.body1.lineHeight),Ne.Large,U.body2.lineHeight),Ze=fe(fe(fe(fe({},Ne.XSmall,U.body1.fontSize),Ne.Small,U.body1.fontSize),Ne.Default,U.body1.fontSize),Ne.Large,U.body2.fontSize),Ke=fe(fe(fe(fe({},Ne.XSmall,1),Ne.Small,0),Ne.Default,2),Ne.Large,4),Ye=fe(fe(fe(fe({},Ne.XSmall,g(Ie||(Ie=ge(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),Ze[Ne.XSmall],He[Ne.XSmall],V,Ke[Ne.XSmall])),Ne.Small,g(ze||(ze=ge(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),Ze[Ne.Small],He[Ne.Small],V,Ke[Ne.Small])),Ne.Default,g(Te||(Te=ge(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),Ze[Ne.Default],He[Ne.Default],V,Ke[Ne.Default])),Ne.Large,g(Pe||(Pe=ge(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-inline-end: 10px;\n padding-block: ","px;\n }\n "])),Ze[Ne.Large],He[Ne.Large],V,Ke[Ne.Large])),Ue=e.forwardRef((function(n,a){var o,i=n.displayName,l=n.isFocused,s=n.onRemove,c=n.onFocus,u=r(Ge),d=u.size,p=u.disabled,f=u.overflow,h=u.chipTruncationLocation,m=void 0===h?H.End:h,g=u.chipCharacterLimit,v=void 0===g?12:g,y=u.popoverZIndex,x=f===De.scrollX?H.None:m,w=k(a,null),E=null===(o=w.current)||void 0===o?void 0:o.querySelector("button");t((function(){l&&!p&&(null==E||E.focus())}),[p,E,l]);return e.createElement(Z,{label:i,className:b(Ve,Ye[d]),role:"option","aria-selected":l,"data-testid":"lg-combobox-chip",onClick:function(e){null!=E&&E.contains(e.target)||c()},onKeyDown:function(e){p||e.key!==P.Delete&&e.key!==P.Backspace&&e.key!==P.Enter&&e.key!==P.Space||s()},onDismiss:function(){p||s()},baseFontSize:K.Body1,chipCharacterLimit:v,chipTruncationLocation:x,popoverZIndex:y,variant:Y.Gray,ref:w,disabled:p,tabIndex:-1})}));Ue.displayName="ComboboxChip";var qe,Be,$e,Je,Qe,_e,en,nn,rn,tn,an,on,ln,sn=fe(fe({},A.Light,g(Ae||(Ae=ge(["\n padding-top: ","px;\n "])),q[2])),A.Dark,g(Fe||(Fe=ge(["\n padding-top: ","px;\n "])),q[2])),cn=g(Xe||(Xe=ge(["\n cursor: default;\n width: 100%;\n padding: 0 12px 2px;\n outline: none;\n overflow-wrap: anywhere;\n font-size: 12px;\n line-height: 16px;\n font-weight: ",";\n text-transform: uppercase;\n letter-spacing: 0.4px;\n"])),B.bold),un=fe(fe({},A.Light,g(We||(We=ge(["\n color: ",";\n "])),ee.gray.dark1)),A.Dark,g(Re||(Re=ge(["\n color: ",";\n "])),ee.gray.light1));function dn(n){var r=n.label,t=n.className,a=n.children,o=z().theme,i=E({prefix:"combobox-group"});return e.Children.count(a)>0?e.createElement("div",{className:b(sn[o],t)},e.createElement("div",{className:b(cn,un[o]),id:i},r),e.createElement("div",{role:"group","aria-labelledby":i},a)):e.createElement(e.Fragment,null)}function pn(e){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}pn.displayName="ComboboxGroup",pn.propTypes={className:m.string,children:m.node.isRequired,label:m.string.isRequired};var fn,hn=fe(fe(fe(fe({},Ne.XSmall,{x:12,y:8}),Ne.Small,{x:12,y:8}),Ne.Default,{x:12,y:8}),Ne.Large,{x:12,y:8}),mn=function(e){return He[e]+2*hn[e].y},gn=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:384;return g(qe||(qe=ge(["\n width: ","px;\n overflow: hidden;\n border-radius: 12px;\n border: 1px solid;\n"])),e)},bn=fe(fe({},A.Light,g(Be||(Be=ge(["\n box-shadow: 0px 4px 7px ",";\n border-color: ",";\n "])),re(.85,ee.black),ee.gray.light2)),A.Dark,g($e||($e=ge(["\n box-shadow: 0px 4px 7px ",";\n border-color: ",";\n "])),re(.85,ee.black),ee.gray.dark2)),vn=g(Je||(Je=ge(["\n position: relative;\n width: 100%;\n margin: 0;\n padding: ","px 0;\n font-family: ",";\n border-radius: inherit;\n overflow-y: auto;\n scroll-behavior: smooth;\n"])),q[2],$.default),yn=fe(fe({},A.Light,g(Qe||(Qe=ge(["\n color: ",";\n background-color: ",";\n "])),ee.black,ee.white)),A.Dark,g(_e||(_e=ge(["\n color: ",";\n background-color: ",";\n "])),ee.gray.light1,ee.gray.dark3)),xn=g(en||(en=ge(["\n position: relative;\n margin: 0;\n padding: 0;\n"]))),wn=g(nn||(nn=ge(["\n font-family: inherit;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"]))),kn=fe(fe({},A.Light,g(rn||(rn=ge(["\n color: ",";\n "])),ee.gray.dark3)),A.Dark,g(tn||(tn=ge(["\n color: ",";\n "])),ee.gray.light3)),En=function(e){return g(an||(an=ge(["\n font-size: ","px;\n line-height: ","px;\n padding: ","px ","px;\n"])),Ze[e],He[e],hn[e].y,hn[e].x)},Cn=v(on||(on=ge(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]))),Sn=g(ln||(ln=ge(["\n animation: "," 1.5s linear infinite;\n"])),Cn),Ln=["children","id","refEl","labelId","menuWidth","searchLoadingMessage","searchErrorMessage","searchEmptyMessage"],On=e.forwardRef((function(n,t){var o=n.children,i=n.id,l=n.refEl,s=n.labelId,c=n.menuWidth,u=n.searchLoadingMessage,d=n.searchErrorMessage,p=n.searchEmptyMessage,f=me(n,Ln),m=z(),v=m.darkMode,y=m.theme,x=r(Ge),w=x.disabled,E=x.size,S=x.isOpen,L=x.searchState,O=k(t,null),N=C(l),M=h(N)?"unset":"".concat(Math.min(N,256),"px"),j=a((function(){var n=b(wn,kn[y],En(E)),r=b(wn,En(E));switch(L){case"loading":return e.createElement("span",{className:n},e.createElement(D,{glyph:"Refresh",color:v?ee.blue.light1:ee.blue.base,className:Sn}),u);case"error":return e.createElement(W,{className:r},e.createElement(D,{glyph:"Warning",color:v?ee.red.light1:ee.red.base}),e.createElement("span",null,d));default:return o&&"object"===pe(o)&&"length"in o&&o.length>0?e.createElement("ul",{className:xn},o):e.createElement("span",{className:n},p)}}),[y,E,L,v,u,d,o,p]);return e.createElement(ne,he({active:S&&!w,spacing:4,align:"bottom",justify:"middle",refEl:l,adjustOnMutation:!0,className:b(gn(c),bn[y])},f),e.createElement("div",{ref:O,id:i,role:"listbox","aria-labelledby":s,"aria-expanded":S,className:b(vn,yn[y],g(fn||(fn=ge(["\n max-height: ",";\n "])),M)),onMouseDownCapture:function(e){return e.preventDefault()}},j))}));On.displayName="ComboboxMenu";var Nn,Dn,Mn,jn,In,zn,Tn,Pn,An,Fn,Xn,Wn,Rn,Gn,Vn,Hn,Zn,Kn,Yn,Un,qn=function(e){var n=e.scrollHeight;return e.scrollTop<n-e.clientHeight},Bn=function(e){var n,r=e.value,t=e.displayName;return{value:null!=r?r:ie(t),displayName:null!==(n=null!=t?t:r)&&void 0!==n?n:""}},$n=function n(r){return e.Children.toArray(r).reduce((function(e,r){if(F(r,"ComboboxOption")){var t=Bn(r.props),a=t.value,o=t.displayName,i=r.props,l=i.glyph,s=i.disabled;return[].concat(ve(e),[{value:a,displayName:o,isDisabled:!!s,hasGlyph:!!l}])}if(F(r,"ComboboxGroup")){var c=r.props.children;if(c)return[].concat(ve(e),ve(n(c)))}}),[])},Jn=function(e,n){if(e)return n.find((function(n){return n.value===e}))},Qn=function(e,n){var r,t;return e?null!==(r=null===(t=Jn(e,n))||void 0===t?void 0:t.displayName)&&void 0!==r?r:e:""},_n=function(e){return g(Nn||(Nn=ge(["\n font-size: ","px;\n line-height: ","px;\n min-height: ","px;\n padding: ","px ","px;\n gap: ","px;\n\n &:before {\n max-height: ","px;\n }\n"])),Ze[e],He[e],mn(e),hn[e].y,hn[e].x,q[1],mn(e))},er=fe(fe(fe(fe({},Ne.XSmall,g(Dn||(Dn=ge(["\n min-width: ","px;\n "])),q[3])),Ne.Small,g(Mn||(Mn=ge(["\n min-width: ","px;\n "])),q[3])),Ne.Default,g(jn||(jn=ge(["\n min-width: ","px;\n "])),q[3])),Ne.Large,g(In||(In=ge(["\n min-width: ","px;\n "])),q[4])),nr=g(zn||(zn=ge(["\n pointer-events: none;\n gap: 0;\n\n label {\n gap: 0;\n align-items: center;\n }\n"])));g(Tn||(Tn=ge(["\n pointer-events: none;\n"])));var rr=function(e){return g(Pn||(Pn=ge(["\n font-weight: ",";\n"])),e?B.bold:B.regular)},tr=fe(fe({},A.Light,g(An||(An=ge(["\n color: ",";\n "])),ee.gray.dark1)),A.Dark,g(Fn||(Fn=ge(["\n color: ",";\n "])),ee.gray.base)),ar=fe(fe({},A.Light,g(Xn||(Xn=ge(["\n color: ",";\n "])),ee.blue.dark1)),A.Dark,g(Wn||(Wn=ge(["\n color: ",";\n "])),ee.blue.light3)),or=fe(fe({},A.Light,g(Rn||(Rn=ge(["\n color: ",";\n "])),ee.gray.light1)),A.Dark,g(Gn||(Gn=ge(["\n color: ",";\n "])),ee.gray.dark1)),ir=fe(fe({},A.Light,g(Vn||(Vn=ge(["\n color: ",";\n "])),ee.blue.base)),A.Dark,g(Hn||(Hn=ge(["\n color: ",";\n "])),ee.blue.light1)),lr=fe(fe({},A.Light,g(Zn||(Zn=ge(["\n color: ",";\n "])),ee.gray.light1)),A.Dark,g(Kn||(Kn=ge(["\n color: ",";\n "])),ee.gray.dark1)),sr=g(Yn||(Yn=ge(["\n ."," {\n align-self: baseline;\n }\n"])),te),cr=g(Un||(Un=ge(["\n ."," {\n height: 28px;\n }\n"])),te),ur=["glyph","isSelected","displayName","isFocused","setSelected","className","description","value","onClick","disabled"],dr=e.forwardRef((function(n,t){var i=n.glyph,l=n.isSelected,s=n.displayName,c=n.isFocused,u=n.setSelected,d=n.className,p=n.description,f=n.value,h=n.onClick,m=n.disabled,g=void 0!==m&&m,v=me(n,ur),y=z(),x=y.darkMode,w=y.theme,C=r(Ge),S=C.multiselect,L=C.size,O=C.withIcons,N=C.inputValue,j=k(t,null),I=E({prefix:"combobox-option-text"}),T=o((function(e){e.stopPropagation(),g||(u(),null==h||h(e,f))}),[g,h,u,f]),P=a((function(){return function(n){var r=n.withIcons,t=n.isSelected,a=n.glyph,o=n.optionTextId,i=n.disabled,l=n.darkMode,s=n.size,c=n.multiselect,u=n.theme,d=n.isFocused;a&&!M(a)&&console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",a);var p=a&&M(a)?e.cloneElement(a,ue(ue({},a.props),{},{className:b(tr[u],fe(fe({},ar[u],d),or[u],i),a.props.className)})):e.createElement(e.Fragment,null),f=e.createElement(se,{"aria-labelledby":o,checked:t,tabIndex:-1,disabled:i,darkMode:l,className:nr}),h=e.createElement(D,{glyph:"Checkmark",className:b(er[s],ir[u],fe({},lr[u],i))});return{leftGlyph:c?r?p:f:r?p:t?h:null,rightGlyph:c?r&&f:r&&t&&h}}({withIcons:O,isSelected:l,glyph:i,theme:w,darkMode:x,size:L,disabled:g,multiselect:S,optionTextId:I,isFocused:c})}),[x,g,i,l,S,I,L,w,O,c]),A=P.leftGlyph,F=P.rightGlyph,X=S&&!O;return e.createElement(ae,he({},v,{as:"li",ref:j,highlighted:c,disabled:g,"aria-label":s,darkMode:x,className:b(_n(L),fe(fe({},sr,X),cr,X&&L===Ne.Large),d),onClick:T,onKeyDown:T}),e.createElement(oe,{leftGlyph:A,rightGlyph:F,description:p},e.createElement("span",{id:I,className:rr(l)},function(n,r,t){if(r&&t){var a=le(r),o=new RegExp(a,"gi"),i=n.matchAll(o);if(i){for(var l=n.split(""),s=0,c=Array.from(i);s<c.length;s++){var u,d=c[s],p=null!==(u=d.index)&&void 0!==u?u:-1,f=d[0],h=f.length,m=p+f+h,g=new Array(h).fill("");g[0]=e.createElement(t,{key:m},f),l.splice.apply(l,[p,h].concat(ve(g)))}return e.createElement(e.Fragment,null,l)}return e.createElement(e.Fragment,null,n)}return e.createElement(e.Fragment,null,n)}(s,N,"strong"))))}));function pr(e){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}dr.displayName="ComboboxOption",pr.displayName="ComboboxOption",pr.propTypes={displayName:m.string,value:m.string,glyph:m.node,disabled:m.bool,className:m.string,description:m.string,onClick:m.func};var fr,hr,mr,gr,br,vr,yr,xr,wr,kr,Er,Cr,Sr,Lr,Or,Nr,Dr,Mr,jr,Ir,zr,Tr,Pr,Ar,Fr,Xr,Wr,Rr,Gr,Vr,Hr,Zr,Kr,Yr=function(e){return!h(e)&&!p(e)&&(f(e)||u(e)&&e.length>0)},Ur=function(e){return He[e]+2*Ke[e]},qr=q[100],Br=fe(fe(fe(fe({},Ne.XSmall,22),Ne.Small,28),Ne.Default,36),Ne.Large,48),$r=function(e){return(Br[e]-Ur(e)-2)/2},Jr=fe(fe(fe(fe({},Ne.XSmall,{y:$r(Ne.XSmall),xLeftWithChip:q[25],xLeftWithoutChip:q[200],xRight:q[100]}),Ne.Small,{y:$r(Ne.Small),xLeftWithChip:q[100],xLeftWithoutChip:q[200],xRight:q[100]}),Ne.Default,{y:$r(Ne.Default),xLeftWithChip:q[150],xLeftWithoutChip:q[300],xRight:q[200]}),Ne.Large,{y:$r(Ne.Large),xLeftWithChip:q[300],xLeftWithoutChip:q[300],xRight:q[200]}),Qr=q[400],_r=function(e){return g(fr||(fr=ge(["\n font-family: ",";\n width: 100%;\n min-width: ","px;\n "])),$.default,Ze[e]+2*Jr[e].xLeftWithChip+Qr+2)},et=g(hr||(hr=ge(["\n display: flex;\n align-items: center;\n gap: ","px;\n cursor: text;\n transition: ","ms ease-in-out;\n transition-property: background-color, box-shadow, border-color;\n border: 1px solid;\n width: 100%;\n max-width: 100%;\n border-radius: 6px;\n position: relative;\n overflow: hidden;\n\n // Overflow shadow\n ::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 20px;\n bottom: -21px;\n left: 50%;\n translate: -50% 0%;\n border-radius: 20%;\n box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);\n transition: ","ms linear;\n transition-property: box-shadow;\n }\n"])),q[200],J.default,J.default),nt=fe(fe({},A.Light,g(mr||(mr=ge(["\n color: ",";\n background-color: ",";\n "])),Q.light.text.primary.default,Q.light.background.primary.default)),A.Dark,g(gr||(gr=ge(["\n color: ",";\n background-color: ",";\n "])),Q.dark.text.primary.default,ee.gray.dark4)),rt=function(e,n){return g(br||(br=ge(["\n padding-top: ","px;\n padding-bottom: ","px;\n padding-left: ",";\n padding-right: ","px;\n"])),Jr[e].y,Jr[e].y,"".concat(n?Jr[e].xLeftWithChip:Jr[e].xLeftWithoutChip,"px"),Jr[e].xRight)},tt=function(e){return g(vr||(vr=ge(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),Q[e].text.disabled.default,Q[e].background.disabled.default,Q[e].border.disabled.default)},at=function(e){return fe(fe(fe({},Me.Error,g(yr||(yr=ge(["\n border-color: ",";\n "])),Q[e].border.error.default)),Me.None,g(xr||(xr=ge(["\n border-color: ",";\n "])),Q[e].border.primary.default)),Me.Valid,g(wr||(wr=ge(["\n border-color: ",";\n "])),Q[e].border.success.default))},ot=fe(fe({},A.Light,g(kr||(kr=ge(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),_[A.Light].input)),A.Dark,g(Er||(Er=ge(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),_[A.Dark].input)),it=g(Cr||(Cr=ge(["\n display: flex;\n align-items: center;\n"]))),lt=fe(fe(fe(fe({},Ne.XSmall,g(Sr||(Sr=ge(["\n gap: ","px;\n "])),q[100])),Ne.Small,g(Lr||(Lr=ge(["\n gap: ","px;\n "])),q[200])),Ne.Default,g(Or||(Or=ge(["\n gap: ","px;\n "])),q[200])),Ne.Large,g(Nr||(Nr=ge(["\n gap: ","px;\n "])),q[200])),st=function(e){var n=e.overflow,r=e.size,t=g(Dr||(Dr=ge(["\n flex-grow: 1;\n width: 100%;\n "])));switch(n){case De.scrollX:return g(Mr||(Mr=ge(["\n ","\n display: block;\n height: ","px;\n white-space: nowrap;\n overflow-x: scroll;\n scroll-behavior: smooth;\n scrollbar-width: none;\n line-height: 1;\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n & > ."," {\n margin-inline: 2px;\n\n &:first-child {\n margin-inline-start: 0;\n }\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n "])),t,Ur(r),Ve);case De.expandY:return g(jr||(jr=ge(["\n ","\n display: flex;\n flex-wrap: wrap;\n gap: ","px;\n overflow-x: hidden;\n min-height: ","px;\n max-height: calc((","px) + (","px * 2));\n "])),t,qr,Ur(r),3*Ur(r),qr)}},ct=g(Ir||(Ir=ge(["\n font-family: ",";\n width: 100%;\n border: none;\n cursor: inherit;\n background-color: inherit;\n color: inherit;\n box-sizing: content-box;\n padding: 0;\n margin: 0;\n text-overflow: ellipsis;\n vertical-align: top;\n\n // Only add padding if there are chips\n &:not(:first-child) {\n padding-left: ","px;\n }\n\n &:placeholder-shown {\n min-width: 100%;\n }\n &:focus {\n outline: none;\n }\n"])),$.default,q[100]),ut=fe(fe({},A.Light,g(zr||(zr=ge(["\n &::placeholder {\n color: ",";\n }\n "])),ee.gray.base)),A.Dark,g(Tr||(Tr=ge(["\n &::placeholder {\n color: ",";\n }\n "])),ee.gray.dark1)),dt=fe(fe({},A.Light,g(Pr||(Pr=ge(["\n &::placeholder {\n color: ",";\n }\n "])),ee.gray.base)),A.Dark,g(Ar||(Ar=ge(["\n &::placeholder {\n color: ",";\n }\n "])),ee.gray.dark1)),pt=function(e){return g(Fr||(Fr=ge(["\n height: ","px;\n font-size: ","px;\n line-height: ","px;\n min-width: ","px;\n"])),Ur(e),Ze[e],He[e],Ze[e])},ft=function(e){return g(Xr||(Xr=ge(["\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by `scroll-behavior` \n */\n transition: width ease-in-out ",";\n"],["\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by \\`scroll-behavior\\` \n */\n transition: width ease-in-out ",";\n"])),e?"0s":"100ms")},ht=function(e,n){var r,t=null!==(r=null==n?void 0:n.length)&&void 0!==r?r:0;return g(Wr||(Wr=ge(["\n width: ","px;\n max-width: 100%;\n "])),t*Ze[e])},mt=g(Rr||(Rr=ge(["\n // Add a negative margin so the button takes up the same space as the regular icons\n margin-block: calc(","px - 100%);\n margin-inline: -6px;\n"])),Qr/2),gt=g(Gr||(Gr=ge(["\n height: ","px;\n width: ","px;\n"])),Qr,Qr),bt=g(Vr||(Vr=ge(["\n margin-bottom: ","px;\n display: flex;\n flex-direction: column;\n"])),q[100]),vt=g(Hr||(Hr=ge(["\n font-size: ","px;\n line-height: ","px;\n"])),U.large.fontSize,U.large.lineHeight),yt=fe(fe({},A.Light,g(Zr||(Zr=ge(["\n ::after {\n box-shadow: 0px 0px 7px 5px ",";\n }\n "])),re(.85,ee.black))),A.Dark,g(Kr||(Kr=ge(["\n ::after {\n width: 95%;\n box-shadow: 0px -7px 12px 5px rgb(0 0 0 / 50%);\n }\n "])))),xt=function(e){return Q[e].icon.primary.default},wt=function(e){return Q[e].icon.disabled.default},kt=["children","label","description","placeholder","aria-label","disabled","size","darkMode","state","errorMessage","successMessage","searchState","searchEmptyMessage","searchErrorMessage","searchLoadingMessage","filteredOptions","onFilter","clearable","onClear","overflow","multiselect","initialValue","inputValue","onInputChange","onChange","value","chipTruncationLocation","chipCharacterLimit","className","usePortal","portalClassName","portalContainer","scrollContainer","popoverZIndex"],Et=["className","glyph","disabled"];function Ct(n){var r=n.children,m=n.label,g=n.description,v=n.placeholder,y=void 0===v?"Select":v,k=n["aria-label"],C=n.disabled,M=void 0!==C&&C,T=n.size,A=void 0===T?Ne.Default:T,W=n.darkMode,V=n.state,H=void 0===V?"none":V,Z=n.errorMessage,K=void 0===Z?x.error:Z,Y=n.successMessage,U=void 0===Y?x.success:Y,q=n.searchState,B=void 0===q?"unset":q,$=n.searchEmptyMessage,J=void 0===$?"No results found":$,Q=n.searchErrorMessage,_=void 0===Q?"Could not get results!":Q,ee=n.searchLoadingMessage,ne=void 0===ee?"Loading results...":ee,re=n.filteredOptions,te=n.onFilter,ae=n.clearable,oe=void 0===ae||ae,ie=n.onClear,le=n.overflow,se=void 0===le?De.expandY:le,ce=n.multiselect,de=void 0!==ce&&ce,ge=n.initialValue,ve=n.inputValue,ye=n.onInputChange,xe=n.onChange,Me=n.value,je=n.chipTruncationLocation,Ie=n.chipCharacterLimit,ze=void 0===Ie?12:Ie,Te=n.className,Pe=n.usePortal,Ae=void 0===Pe||Pe,Fe=n.portalClassName,Xe=n.portalContainer,We=n.scrollContainer,Re=n.popoverZIndex,Ve=me(n,kt),He=z(W),Ze=He.darkMode,Ke=He.theme,Ye=S({prefix:"option"}),qe=S({prefix:"chip"}),Be=E({prefix:"combobox-input"}),$e=E({prefix:"combobox-label"}),Je=E({prefix:"combobox-menu"}),Qe=i(null),_e=i(null),en=i(null),nn=i(null),rn=i(null),tn=be(l(!1),2),an=tn[0],on=tn[1],ln=L(an),sn=be(l(null),2),cn=sn[0],un=sn[1],pn=be(l(null),2),fn=pn[0],hn=pn[1],mn=L(fn),gn=be(l(null!=ve?ve:""),2),bn=gn[0],vn=gn[1];t((function(){h(ve)||vn(ve)}),[ve]);var yn=function(e){vn(e)},xn=L(bn),wn=be(l(null),2),kn=wn[0],En=wn[1],Cn=be(l(!1),2),Sn=Cn[0],Ln=Cn[1],Nn=de&&u(fn)&&fn.length>0?void 0:y,Dn=function(){return on(!1)},Mn=function(){return on(!0)},jn=a((function(){return $n(r)}),[r]),In=o((function(e){return!de||"string"!=typeof e&&"number"!=typeof e?!de&&u(e)&&X.error("Error in Combobox: multiselect is set to `false`, but received an Array value"):X.error("Error in Combobox: multiselect is set to `true`, but received a ".concat(pe(e),' value: "').concat(e,'"')),de&&u(e)}),[de]),zn=o((function(e){!M&&nn&&nn.current&&(nn.current.focus(),h(e)||nn.current.setSelectionRange(e,e))}),[M]),Tn=o((function(e){if(In(fn)){var n=s(fn),r=xe,t={diffType:"delete",value:null!=e?e:fn};p(e)?n.length=0:fn.includes(e)?n.splice(n.indexOf(e),1):(n.push(e),t.diffType="insert",yn("")),hn(n),null==r||r(n,t)}else{var a=e,o=xe;hn(a),null==o||o(a)}}),[In,xe,fn]),Pn=o((function(e){var n,r,t,a;return function(e,n){return Array.isArray(n)?n.includes(e):e===n}((r=jn,(n=e)?null!==(t=null===(a=r.find((function(e){return e.displayName===n})))||void 0===a?void 0:a.value)&&void 0!==t?t:n:""),fn)}),[jn,fn]),An=o((function(e){var n="string"==typeof e?e:e.value;return re&&re.length>0?re.includes(n):!!Pn(bn)||("string"==typeof e?Qn(n,jn):e.displayName).toLowerCase().includes(bn.toLowerCase())}),[re,Pn,bn,jn]),Fn=a((function(){return jn.filter(An)}),[jn,An]),Xn=o((function(e){return!!e&&!!jn.find((function(n){return n.value===e}))}),[jn]),Wn=o((function(e){return Fn?Fn.findIndex((function(n){return n.value===e})):-1}),[Fn]),Rn=o((function(e){if(Fn&&Fn.length>=e){var n=Fn[e];return n?n.value:void 0}}),[Fn]),Gn=o((function(){return In(fn)?fn.findIndex((function(e){var n;return null===(n=qe(e))||void 0===n||null===(n=n.current)||void 0===n?void 0:n.contains(document.activeElement)})):-1}),[qe,In,fn]),Vn=be(l(),2),Hn=Vn[0],Zn=Vn[1],Kn=o((function(e){var n,r=null!==(n=null==Fn?void 0:Fn.length)&&void 0!==n?n:0,t=r-1>0?r-1:0,a=Wn(cn);switch(e&&an&&(En(null),zn()),e){case"next":var o=Rn(a+1<r?a+1:0);un(null!=o?o:null);break;case"prev":var i=Rn(a-1>=0?a-1:t);un(null!=i?i:null);break;case"last":var l=Rn(t);un(null!=l?l:null);break;default:var s=Rn(0);un(null!=s?s:null)}}),[cn,Wn,Rn,an,zn,null==Fn?void 0:Fn.length]),Yn=o((function(e,n){if(In(fn))switch(e){case"next":var r=null!=n?n:Gn(),t=r+1<fn.length?r+1:fn.length-1,a=fn[t];En(a);break;case"prev":var o=null!=n?n:Gn(),i=o>0?o-1:o<0?fn.length-1:0,l=fn[i];En(l);break;case"first":var s=fn[0];En(s);break;case"last":var c=fn[fn.length-1];En(c);break;default:En(null)}}),[Gn,In,fn]),Un=o((function(e,n){switch(e&&un(null),e){case"right":switch(Hn){case we:var r,t,a;if((null===(r=nn.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=nn.current)||void 0===t?void 0:t.value.length))null===(a=_e.current)||void 0===a||a.focus();break;case Ee:case Se:case Ce:if(Hn===Ce||1===(null==fn?void 0:fn.length)){zn(0),Yn(null),n.preventDefault();break}Yn("next")}break;case"left":switch(Hn){case ke:var o;n.preventDefault(),zn(null==nn||null===(o=nn.current)||void 0===o?void 0:o.value.length);break;case we:case Se:case Ce:if(In(fn)){var i;if(Hn===we&&0!==(null===(i=nn.current)||void 0===i?void 0:i.selectionStart))break;Yn("prev")}}break;default:Yn(null)}}),[Hn,In,fn,zn,Yn]);t((function(){bn!==xn&&Kn("first")}),[bn,an,xn,Kn]),O(cn?Ye(cn):void 0,rn);var _n=o((function(n){if(F(n,"ComboboxOption")){var r=Bn(n.props),t=r.value,a=r.displayName;if(An(t)){var o=n.props,i=o.className,l=o.glyph,s=o.disabled,c=me(o,Et),u=jn.findIndex((function(e){return e.value===t})),d=cn===t,p=In(fn)?fn.includes(t):fn===t,f=Ye(t);return e.createElement(dr,he({},c,{value:t,displayName:a,isFocused:d,isSelected:p,disabled:s,setSelected:function(){un(t),Tn(t),zn(),t===fn&&Dn()},glyph:l,className:i,index:u,ref:f}))}}else if(F(n,"ComboboxGroup")){var h=e.Children.map(n.props.children,_n);if(h&&(null==h?void 0:h.length)>0)return e.createElement(dn,{label:n.props.label,className:n.props.className},e.Children.map(h,_n))}}),[jn,Ye,cn,In,fn,zn,An,Tn]),er=a((function(){return e.Children.map(r,_n)}),[r,_n]),nr=a((function(){if(In(fn))return fn.filter(Xn).map((function(n,r){var t=Qn(n,jn),a=kn===n,o=qe(n),i=r>=fn.length-1;return e.createElement(Ue,{key:n,displayName:t,isFocused:a,onRemove:function(){i?(zn(),Yn(null)):Yn("next",r),Tn(n)},onFocus:function(){En(n)},ref:o})}))}),[In,fn,Xn,jn,kn,qe,Tn,zn,Yn]),rr=a((function(){return jn.some((function(e){return e.hasGlyph}))}),[jn]),tr=o((function(){var e=Fn.find((function(e){return e.displayName===bn||e.value===bn}));if(!Me&&e)Tn(e.value);else if(!In(fn)){var n,r=null!==(n=Qn(fn,jn))&&void 0!==n?n:mn;yn(r)}}),[jn,bn,In,mn,fn,Tn,Me,Fn]),ar=o((function(){if(Yr(fn)){if(In(fn))mr(se);else if(!In(fn)){var e,n=null!==(e=Qn(fn,jn))&&void 0!==e?e:"";yn(n),Dn()}}else yn("")}),[jn,In,fn,se]);t((function(){if(ge)if(u(ge)){var e,n=null!==(e=ge.filter((function(e){return Xn(e)})))&&void 0!==e?e:[];hn(n)}else Xn(ge)&&hn(ge);else hn(function(e){return e?[]:null}(de))}),[]),t((function(){if(!h(Me)&&Me!==xn)if(p(Me))hn(null);else if(In(Me)){var e=Me.filter(Xn);hn(e)}else hn(Xn(Me)?Me:null)}),[In,Xn,xn,Me]),t((function(){!h(mn)&&(u(fn)&&!p(mn)||f(fn)||p(fn))&&!d(fn,mn)&&ar()}),[ar,mn,fn]),t((function(){!an&&ln&&tr()}),[an,ln,tr]);var or=be(l(0),2),ir=or[0],lr=or[1];t((function(){var e,n;lr(null!==(e=null===(n=Qe.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)}),[Qe,an,cn,fn]);N(Dn,[rn,Qe],an);var sr=In(fn)&&!!fn.length,cr=c((function(e){Ln(qn(e.target))}),50,{leading:!0}),ur=o((function(e){se===De.expandY&&cr(e)}),[cr,se]);t((function(){en.current&&Ln(qn(en.current))}),[]);var pr,fr=ue({popoverZIndex:Re},Ae?{usePortal:Ae,portalClassName:Fe,portalContainer:Xe,scrollContainer:We}:{usePortal:Ae}),hr={disabled:M,errorMessage:K,size:A,state:H,successMessage:U};return e.createElement(I,{darkMode:Ze},e.createElement(Ge.Provider,{value:{multiselect:de,size:A,withIcons:rr,disabled:M,isOpen:an,state:H,searchState:B,chipTruncationLocation:je,chipCharacterLimit:ze,inputValue:bn,overflow:se,popoverZIndex:Re}},e.createElement("div",he({className:b(_r(A),Te)},Ve),(m||g)&&e.createElement("div",{className:bt},m&&e.createElement(R,{id:$e,htmlFor:Be,darkMode:Ze,disabled:M,className:b(fe({},vt,A===Ne.Large))},m),g&&e.createElement(G,{darkMode:Ze,disabled:M,className:b(fe({},vt,A===Ne.Large))},g)),e.createElement("div",{ref:Qe,role:"combobox","aria-expanded":an,"aria-controls":Je,"aria-owns":Je,tabIndex:-1,onMouseDown:function(e){M&&e.preventDefault()},onClick:function(e){if(e.target!==nn.current){var n=0;if(nn.current)n=e.nativeEvent.offsetX>nn.current.offsetLeft+nn.current.clientWidth?bn.length:0;zn(n)}Mn()},onFocus:function(e){mr(se),Zn(function(e){var n,r,t,a;if(!e)return;if(null!==(n=nn.current)&&void 0!==n&&n.contains(e))return we;if(null!==(r=_e.current)&&void 0!==r&&r.contains(e))return ke;var o=In(fn)?fn.findIndex((function(n){var r;return null===(r=qe(n))||void 0===r||null===(r=r.current)||void 0===r?void 0:r.contains(e)})):-1;if(In(fn)){if(0===o)return Ee;if(o===fn.length-1)return Ce;if(o>0)return Se}if(null!==(t=rn.current)&&void 0!==t&&t.contains(e))return Oe;if(null!==(a=Qe.current)&&void 0!==a&&a.contains(e))return Le}(e.target))},onKeyDown:function(e){var n,r,t=null===(n=rn.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(r=Qe.current)||void 0===r?void 0:r.contains(document.activeElement))||t){if(e.ctrlKey||e.shiftKey||e.altKey)return;switch(e.key){case P.Tab:switch(Hn){case"Input":Yr(fn)||(Dn(),Kn("first"),Yn(null));break;case"LastChip":Yn(null)}break;case P.Escape:Dn(),Kn("first");break;case P.Enter:an?!an||Hn!==we||p(cn)||function(e){if("string"==typeof e){var n=Jn(e,jn);return!(null==n||!n.isDisabled)}return!!e.isDisabled}(cn)?Hn===ke&&(Tn(null),zn()):Tn(cn):Mn();break;case P.Backspace:var a;if(In(fn))"Input"===Hn&&0===(null===(a=nn.current)||void 0===a?void 0:a.selectionStart)&&Yn("last");Mn();break;case P.ArrowDown:an?(e.preventDefault(),Kn("next")):Mn();break;case P.ArrowUp:an?(e.preventDefault(),Kn("prev")):Mn();break;case P.ArrowRight:Un("right",e);break;case P.ArrowLeft:Un("left",e);break;default:an||Mn()}}},onTransitionEnd:function(){var e,n;lr(null!==(e=null===(n=Qe.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)},className:b(et,nt[Ke],rt(A,sr),at(Ke)[H],fe(fe(fe({},ot[Ke],(pr=we,pr===Hn)),tt(Ke),M),yt[Ke],Sn))},e.createElement("div",{onScroll:ur,ref:en,className:st({size:A,overflow:se})},nr,e.createElement("input",{"aria-label":null!=k?k:m,"aria-autocomplete":"list","aria-controls":Je,"aria-labelledby":$e,ref:nn,id:Be,className:b(ct,pt(A),ut[Ke],ft(an),fe(fe({},ht(A,bn),In(fn)),dt[Ke],M)),placeholder:Nn,"aria-disabled":M,readOnly:M,onChange:function(e){yn(e.target.value),null==te||te(e.target.value),null==ye||ye(e)},value:bn,autoComplete:"off"})),e.createElement("div",{className:b(it,lt[A])},oe&&Yr(fn)&&!M&&e.createElement(j,{"aria-label":"Clear selection",disabled:M,ref:_e,onClick:function(e){M||(e.stopPropagation(),Tn(null),null==ie||ie(e),null==te||te(""),zn())},onFocus:function(){un(null)},className:b(mt),darkMode:Ze},e.createElement(D,{glyph:"XWithCircle"})),e.createElement(D,{glyph:"CaretDown",className:gt,fill:b(fe(fe({},xt(Ke),!M),wt(Ke),M))}))),e.createElement(w,hr),e.createElement(On,he({id:Je,labelId:$e,refEl:Qe,ref:rn,menuWidth:ir,searchLoadingMessage:ne,searchErrorMessage:_,searchEmptyMessage:J},fr),er))));function mr(e){en&&en.current&&(e===De.scrollX&&(en.current.scrollLeft=en.current.scrollWidth),e===De.expandY&&(en.current.scrollTop=en.current.scrollHeight))}}Ct.propTypes={multiselect:m.bool,value:m.oneOfType([m.string,m.arrayOf(m.string)]),initialValue:m.oneOfType([m.string,m.arrayOf(m.string)]),overflow:m.oneOf(Object.values(De)),darkMode:m.bool,label:m.string,"aria-label":m.string,children:m.node,onChange:m.func,chipCharacterLimit:m.number,chipTruncationLocation:m.oneOf(Object.values(H)),onClear:m.func,onFilter:m.func,clearable:m.bool,searchLoadingMessage:m.string,searchErrorMessage:m.string,searchEmptyMessage:m.string,searchState:m.oneOf(Object.values(je)),errorMessage:m.string,state:m.oneOf(Object.values(Me)),size:m.oneOf(Object.values(Ne)),disabled:m.bool,description:m.string,placeholder:m.string,filteredOptions:m.arrayOf(m.string),popoverZIndex:m.number,usePortal:m.bool,scrollContainer:m.elementType,portalContainer:m.elementType,portalClassName:m.string};export{Ct as Combobox,pn as ComboboxGroup,pr as ComboboxOption};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|