@leafygreen-ui/combobox 0.9.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/README.md +48 -41
  3. package/dist/Combobox.d.ts +1 -1
  4. package/dist/Combobox.d.ts.map +1 -1
  5. package/dist/Combobox.styles.d.ts.map +1 -1
  6. package/dist/Combobox.types.d.ts +23 -0
  7. package/dist/Combobox.types.d.ts.map +1 -1
  8. package/dist/ComboboxOption.d.ts.map +1 -1
  9. package/dist/esm/index.js +1 -1
  10. package/dist/esm/index.js.map +1 -1
  11. package/dist/index.js +1 -1
  12. package/dist/index.js.map +1 -1
  13. package/package.json +33 -30
  14. package/src/Chip.tsx +1 -1
  15. package/src/Combobox.spec.tsx +286 -124
  16. package/src/Combobox.story.tsx +10 -4
  17. package/src/Combobox.styles.ts +14 -24
  18. package/src/Combobox.tsx +37 -13
  19. package/src/Combobox.types.ts +28 -0
  20. package/src/ComboboxOption.tsx +7 -2
  21. package/tsconfig.tsbuildinfo +135 -47
package/CHANGELOG.md ADDED
@@ -0,0 +1,37 @@
1
+ # @leafygreen-ui/combobox
2
+
3
+ ## 1.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [acd6919]
8
+ - Updated dependencies [acd6919]
9
+ - Updated dependencies [acd6919]
10
+ - Updated dependencies [acd6919]
11
+ - Updated dependencies [acd6919]
12
+ - @leafygreen-ui/lib@9.2.0
13
+ - @leafygreen-ui/icon@11.8.0
14
+ - @leafygreen-ui/checkbox@7.0.0
15
+ - @leafygreen-ui/palette@3.3.2
16
+
17
+ ## 1.0.1
18
+
19
+ ### Patch Changes
20
+
21
+ - e8f1a97: - Updates focus behavior, allowing users to re-open the menu with the mouse after making a selection
22
+ - Adds a warning if `multiselect` and `value` props don't align
23
+ - Fixes a bug where long display names would get truncated early
24
+ - Fixes a bug where the space bar wouldn't type a space character
25
+ - Fixes a bug where some characters could not be typed when a `value` prop was passed in
26
+ - Updates hooks dependency to `^7.2.0`
27
+ - Updated dependencies [e8f1a97]
28
+ - @leafygreen-ui/icon@11.7.0
29
+ - @leafygreen-ui/icon-button@10.0.0
30
+
31
+ ## 1.0.0
32
+
33
+ ### Major Changes
34
+
35
+ - 548ca2c: - Release Combobox as v1
36
+ - Adds standard popover props: `usePortal`, `popoverZIndex`, `popoverClassName`, `portalContainer`, and `scrollContainer`.
37
+ - Fixes issue where clicking on elements within a Combobox option wouldn't select that option.
package/README.md CHANGED
@@ -20,7 +20,9 @@ npm install @leafygreen-ui/combobox
20
20
 
21
21
  ## Example
22
22
 
23
- ```tsx
23
+ ```js
24
+ import { Combobox, ComboboxOption } from '@leafygreen-ui/combobox';
25
+
24
26
  <Combobox
25
27
  label="Choose a fruit"
26
28
  description="Please pick one"
@@ -35,7 +37,7 @@ npm install @leafygreen-ui/combobox
35
37
  <ComboboxOption value="habanero" />
36
38
  <ComboboxOption value="jalapeno" displayName="Jalapeño" />
37
39
  </ComboboxGroup>
38
- </Combobox>
40
+ </Combobox>;
39
41
  ```
40
42
 
41
43
  **Output HTML**
@@ -75,52 +77,57 @@ npm install @leafygreen-ui/combobox
75
77
 
76
78
  ## Properties
77
79
 
78
- | Prop | Type | Description | Default |
79
- | ---------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
80
- | children | <ComboboxOption>, <ComboboxGroup> | Define the Combobox Options by passing children | |
81
- | 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 |
82
- | initialValue | Array<string>, string | The initial selection. Must be a string for a single-select, or an array of strings for multiselect. Changing the `initialValue` after initial render will not change the selection. | |
83
- | value | Array<string>, string | The controlled value of the Combobox. Must be a string for a single-select, or an array of strings for multiselect. Changing `value` after initial render _will_ affect the selection. | |
84
- | 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 | |
85
- | 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' |
86
- | label | string | An accessible label for the input, rendered in a `<label>` to the DOM | |
87
- | aria-label | string | An accessible label for the input, used only for screen-readers | |
88
- | description | string | A description for the input | |
89
- | placeholder | string | A placeholder for the input element. Uses the native `placeholder` attribute. | 'Select' |
90
- | disabled | boolean | Disables all interaction with the component | false |
91
- | size | 'default' | Defines the visual size of the component | 'default' |
92
- | darkMode | boolean | Toggles dark mode | false |
93
- | state | 'error', 'none' | The error state of the component. Defines whether the error message is displayed. | 'none' |
94
- | errorMessage | string | The message shown below the input when `state` is `error` | |
95
- | 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 | |
96
- | searchState | 'unset', 'error', 'loading' | The state of search results. Toggles search messages within the menu. | 'unset' |
97
- | searchErrorMessage | string | A message shown within the menu when `searchState` is `error` | 'Could not get results!' |
98
- | searchLoadingMessage | string | A message shown within the menu when `searchState` is `loading` | 'Loading results...' |
99
- | 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' |
100
- | clearable | boolean | Defines whether the Clear button appears to the right of the input | |
101
- | onClear | (e: MouseEvent) => void | A callback fired when the Clear button is pressed. Fired _after_ `onChange`, and _before_ `onFilter` | |
102
- | 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 | |
103
- | chipTruncationLocation | 'start', 'middle', 'end', 'none' | Defines where the ellipses appear in a Chip when the length exceeds the `chipCharacterLimit` | 'none' |
104
- | 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 |
105
- | className | string | Styling prop | |
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 for a single-select, or an array of strings for multiselect. 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 for a single-select, or an array of strings for multiselect. Changing `value` after initial render _will_ affect the selection. | |
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` | `string` | 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
+ | `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 | |
98
+ | `searchState` | `'unset'`, `'error'`, `'loading'` | The state of search results. Toggles search messages within the menu. | 'unset' |
99
+ | `searchErrorMessage` | `string` | A message shown within the menu when `searchState` is `error` | 'Could not get results!' |
100
+ | `searchLoadingMessage` | `string` | A message shown within the menu when `searchState` is `loading` | 'Loading results...' |
101
+ | `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' |
102
+ | `clearable` | `boolean` | Defines whether the Clear button appears to the right of the input | |
103
+ | `onClear` | `(e: MouseEvent) => void` | A callback fired when the Clear button is pressed. Fired _after_ `onChange`, and _before_ `onFilter` | |
104
+ | `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 | |
105
+ | `chipTruncationLocation` | `'start'`, `'middle'`, `'end'`, `'none'` | Defines where the ellipses appear in a Chip when the length exceeds the `chipCharacterLimit` | 'none' |
106
+ | `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 |
107
+ | `className` | `string` | The className passed to the root element of the component. | |
108
+ | `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` |
109
+ | `portalContainer` | `HTMLElement` \| `null` | Sets the container used for the popover's portal. | |
110
+ | `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. | |
111
+ | `portalClassName` | `string` | Passes the given className to the popover's portal container if the default portal container is being used. | |
112
+ | `popoverZIndex` | `number` | Sets the z-index CSS property for the popover. | |
106
113
 
107
114
  # ComboboxOption
108
115
 
109
116
  ## Props
110
117
 
111
- | Prop | Type | Description | Default |
112
- | ----------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
113
- | value | string | The internal value of the option. Used as the identifier in Combobox `initialValue`, `value` and `filteredOptions`. When undefined, this is set to `_.kebabCase(displayName)` | |
114
- | displayName | string | The display value of the option. Used as the rendered string within the menu and chips. When undefined, this is set to `value` | |
115
- | glyph | <Icon/> | The icon to display to the left of the option in the menu. | |
116
- | className | string | Styling prop | |
118
+ | Prop | Type | Description | Default |
119
+ | ------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
120
+ | `value` | `string` | The internal value of the option. Used as the identifier in Combobox `initialValue`, `value` and `filteredOptions`. When undefined, this is set to `_.kebabCase(displayName)` | |
121
+ | `displayName` | `string` | The display value of the option. Used as the rendered string within the menu and chips. When undefined, this is set to `value` | |
122
+ | `glyph` | `<Icon/>` | The icon to display to the left of the option in the menu. | |
123
+ | `className` | `string` | The className passed to the root element of the component. | |
117
124
 
118
125
  # ComboboxGroup
119
126
 
120
127
  ## Props
121
128
 
122
- | Prop | Type | Description | Default |
123
- | --------- | ---------------- | ------------------------------ | ------- |
124
- | label | string | Label for the group of options | |
125
- | children | <ComboboxOption> | Options in the group | |
126
- | className | string | Styling prop | |
129
+ | Prop | Type | Description | Default |
130
+ | ----------- | ------------------ | ---------------------------------------------------------- | ------- |
131
+ | `label` | `string` | Label for the group of options | |
132
+ | `children` | `<ComboboxOption>` | Options in the group | |
133
+ | `className` | `string` | The className passed to the root element of the component. | |
package/dist/Combobox.d.ts CHANGED
@@ -3,5 +3,5 @@ import { ComboboxProps } from './Combobox.types';
3
3
  /**
4
4
  * Component
5
5
  */
6
- export default function Combobox<M extends boolean>({ children, label, description, placeholder, 'aria-label': ariaLabel, disabled, size, darkMode, state, errorMessage, searchState, searchEmptyMessage, searchErrorMessage, searchLoadingMessage, filteredOptions, onFilter, clearable, onClear, overflow, multiselect, initialValue, onChange, value, chipTruncationLocation, chipCharacterLimit, className, ...rest }: ComboboxProps<M>): JSX.Element;
6
+ export default function Combobox<M extends boolean>({ children, label, description, placeholder, 'aria-label': ariaLabel, disabled, size, darkMode, state, errorMessage, searchState, searchEmptyMessage, searchErrorMessage, searchLoadingMessage, filteredOptions, onFilter, clearable, onClear, overflow, multiselect, initialValue, onChange, value, chipTruncationLocation, chipCharacterLimit, className, usePortal, portalClassName, portalContainer, scrollContainer, popoverZIndex, ...rest }: ComboboxProps<M>): JSX.Element;
7
7
  //# sourceMappingURL=Combobox.d.ts.map
package/dist/Combobox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../src/Combobox.tsx"],"names":[],"mappings":";AAuBA,OAAO,EACL,aAAa,EAId,MAAM,kBAAkB,CAAC;AAuB1B;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,OAAO,EAAE,EAClD,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAsB,EACtB,YAAY,EAAE,SAAS,EACvB,QAAgB,EAChB,IAAgB,EAChB,QAAgB,EAChB,KAAc,EACd,YAAY,EACZ,WAAqB,EACrB,kBAAuC,EACvC,kBAA6C,EAC7C,oBAA2C,EAC3C,eAAe,EACf,QAAQ,EACR,SAAgB,EAChB,OAAO,EACP,QAAqB,EACrB,WAAwB,EACxB,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,sBAAsB,EACtB,kBAAuB,EACvB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,CAAC,CAAC,CAAC,eAykClB"}
1
+ {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../src/Combobox.tsx"],"names":[],"mappings":";AAuBA,OAAO,EACL,aAAa,EAId,MAAM,kBAAkB,CAAC;AAuB1B;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,OAAO,EAAE,EAClD,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAsB,EACtB,YAAY,EAAE,SAAS,EACvB,QAAgB,EAChB,IAAgB,EAChB,QAAgB,EAChB,KAAc,EACd,YAAY,EACZ,WAAqB,EACrB,kBAAuC,EACvC,kBAA6C,EAC7C,oBAA2C,EAC3C,eAAe,EACf,QAAQ,EACR,SAAgB,EAChB,OAAO,EACP,QAAqB,EACrB,WAAwB,EACxB,YAAY,EACZ,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,eA4lClB"}
package/dist/Combobox.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.styles.d.ts","sourceRoot":"","sources":["../src/Combobox.styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAMH,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEjE,eAAO,MAAM,mBAAmB;cAKpB,OAAO;UACX,YAAY;cACR,QAAQ;YAoDnB,CAAC;AAEF,eAAO,MAAM,aAAa,QAgCzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,QAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB;WAIxB,KAAK;cACF,OAAO;;;;;CAWlB,CAAC;AAEF,eAAO,MAAM,iBAAiB;cAMlB,QAAQ;YACV,OAAO;eACJ,MAAM,GAAG,MAAM,MAAM,CAAC,GAAG,IAAI;;YA8EzC,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAmB7B,CAAC;AAEF,eAAO,MAAM,WAAW,QAGvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAK7B,CAAC;AAEF,eAAO,MAAM,OAAO,QAEnB,CAAC;AAUF,eAAO,MAAM,gBAAgB,QAE5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;cAKjB,OAAO;UACX,YAAY;;YA4CnB,CAAC;AAEF,eAAO,MAAM,SAAS;eAAgC,MAAM;YAc3D,CAAC;AAEF,eAAO,MAAM,QAAQ,QAIpB,CAAC;AAEF,eAAO,MAAM,WAAW,QAYvB,CAAC"}
1
+ {"version":3,"file":"Combobox.styles.d.ts","sourceRoot":"","sources":["../src/Combobox.styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAMH,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEjE,eAAO,MAAM,mBAAmB;cAKpB,OAAO;UACX,YAAY;cACR,QAAQ;YAmDnB,CAAC;AAEF,eAAO,MAAM,aAAa,QAgCzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,QAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB;WAIxB,KAAK;cACF,OAAO;;;;;CAWlB,CAAC;AAEF,eAAO,MAAM,iBAAiB;cAMlB,QAAQ;YACV,OAAO;eACJ,MAAM,GAAG,MAAM,MAAM,CAAC,GAAG,IAAI;;YAwEzC,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAgB7B,CAAC;AAEF,eAAO,MAAM,WAAW,QAGvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAK7B,CAAC;AAEF,eAAO,MAAM,OAAO,QAEnB,CAAC;AAUF,eAAO,MAAM,gBAAgB,QAE5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;cAKjB,OAAO;UACX,YAAY;;YA4CnB,CAAC;AAEF,eAAO,MAAM,SAAS;eAAgC,MAAM;YAc3D,CAAC;AAEF,eAAO,MAAM,QAAQ,QAIpB,CAAC;AAEF,eAAO,MAAM,WAAW,QAYvB,CAAC"}
package/dist/Combobox.types.d.ts CHANGED
@@ -164,6 +164,29 @@ export interface BaseComboboxProps {
164
164
  * Styling prop
165
165
  */
166
166
  className?: string;
167
+ /**
168
+ * Specifies that the popover content should be rendered at the end of the DOM,
169
+ * rather than in the DOM tree.
170
+ *
171
+ * default: `true`
172
+ */
173
+ usePortal?: boolean;
174
+ /**
175
+ * When usePortal is `true`, specifies a class name to apply to the root element of the portal.
176
+ */
177
+ portalClassName?: undefined;
178
+ /**
179
+ * When usePortal is `true`, specifies an element to portal within. The default behavior is to generate a div at the end of the document to render within.
180
+ */
181
+ portalContainer?: null;
182
+ /**
183
+ * When usePortal is `true`, specifies the scrollable element to position relative to.
184
+ */
185
+ scrollContainer?: null;
186
+ /**
187
+ * Number that controls the z-index of the popover element directly.
188
+ */
189
+ popoverZIndex?: number;
167
190
  }
168
191
  export declare type ComboboxProps<M extends boolean> = Either<BaseComboboxProps & ComboboxMultiselectProps<M>, 'label' | 'aria-label'>;
169
192
  /**
package/dist/Combobox.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../src/Combobox.types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../src/Combobox.types.ts"],"names":[],"mappings":"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"}
package/dist/ComboboxOption.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ComboboxOption.d.ts","sourceRoot":"","sources":["../src/ComboboxOption.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAMhE,OAAO,EACL,mBAAmB,EACnB,2BAA2B,EAC5B,MAAM,kBAAkB,CAAC;AA4D1B;;GAEG;AAEH,QAAA,MAAM,sBAAsB,mGAsH3B,CAAC;AAGF,OAAO,EAAE,sBAAsB,EAAE,CAAC;AAClC,iBAAwB,cAAc,CAAC,CAAC,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAE1E;kBAFuB,cAAc;;;eAAd,cAAc"}
1
+ {"version":3,"file":"ComboboxOption.d.ts","sourceRoot":"","sources":["../src/ComboboxOption.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAMhE,OAAO,EACL,mBAAmB,EACnB,2BAA2B,EAC5B,MAAM,kBAAkB,CAAC;AAgE1B;;GAEG;AAEH,QAAA,MAAM,sBAAsB,mGAuH3B,CAAC;AAGF,OAAO,EAAE,sBAAsB,EAAE,CAAC;AAClC,iBAAwB,cAAc,CAAC,CAAC,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAE1E;kBAFuB,cAAc;;;eAAd,cAAc"}
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import n,{createContext as o,useContext as e,useCallback as r,useMemo as t,useRef as i,useEffect as a,useState as l}from"react";import{kebabCase as c,isArray as u,isNull as s,isString as d,isUndefined as b,clone as g}from"lodash";import{Label as p,Description as m}from"@leafygreen-ui/typography";import f from"@leafygreen-ui/popover";import{useIdAllocator as h,useForwardedRef as v,useDynamicRefs as x,usePrevious as y,useViewportSize as w,useEventListener as k}from"@leafygreen-ui/hooks";import C from"@leafygreen-ui/interaction-ring";import N,{isComponentGlyph as O}from"@leafygreen-ui/icon";import j from"@leafygreen-ui/icon-button";import{css as M,cx as E,keyframes as z}from"@leafygreen-ui/emotion";import{uiColors as I}from"@leafygreen-ui/palette";import{isComponentType as S,keyMap as D,createDataProp as L}from"@leafygreen-ui/lib";import F from"@leafygreen-ui/checkbox";import{jsx as P}from"@emotion/react";import A from"@leafygreen-ui/inline-definition";import{fontFamilies as T}from"@leafygreen-ui/tokens";function R(n,o){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);o&&(r=r.filter((function(o){return Object.getOwnPropertyDescriptor(n,o).enumerable}))),e.push.apply(e,r)}return e}function W(n){for(var o=1;o<arguments.length;o++){var e=null!=arguments[o]?arguments[o]:{};o%2?R(Object(e),!0).forEach((function(o){B(n,o,e[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):R(Object(e)).forEach((function(o){Object.defineProperty(n,o,Object.getOwnPropertyDescriptor(e,o))}))}return n}function B(n,o,e){return o in n?Object.defineProperty(n,o,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[o]=e,n}function G(){return(G=Object.assign||function(n){for(var o=1;o<arguments.length;o++){var e=arguments[o];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r])}return n}).apply(this,arguments)}function K(n,o){if(null==n)return{};var e,r,t=function(n,o){if(null==n)return{};var e,r,t={},i=Object.keys(n);for(r=0;r<i.length;r++)e=i[r],o.indexOf(e)>=0||(t[e]=n[e]);return t}(n,o);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(r=0;r<i.length;r++)e=i[r],o.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(n,e)&&(t[e]=n[e])}return t}function V(n,o){return o||(o=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(o)}}))}function H(n,o){return function(n){if(Array.isArray(n))return n}(n)||function(n,o){var e=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null==e)return;var r,t,i=[],a=!0,l=!1;try{for(e=e.call(n);!(a=(r=e.next()).done)&&(i.push(r.value),!o||i.length!==o);a=!0);}catch(n){l=!0,t=n}finally{try{a||null==e.return||e.return()}finally{if(l)throw t}}return i}(n,o)||X(n,o)||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 U(n){return function(n){if(Array.isArray(n))return Y(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||X(n)||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 X(n,o){if(n){if("string"==typeof n)return Y(n,o);var e=Object.prototype.toString.call(n).slice(8,-1);return"Object"===e&&n.constructor&&(e=n.constructor.name),"Map"===e||"Set"===e?Array.from(n):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?Y(n,o):void 0}}function Y(n,o){(null==o||o>n.length)&&(o=n.length);for(var e=0,r=new Array(o);e<o;e++)r[e]=n[e];return r}var $,q,J,Q,Z,_,nn,on,en,rn=o({multiselect:!1,darkMode:!1,size:"default",withIcons:!1,disabled:!1}),tn=W(W({},D),{},{Backspace:8,Delete:46}),an=function(o,e,r){if(e&&r){var t=new RegExp(e,"gi"),i=o.search(t),a=i+e.length,l=o.split(""),c=l.slice(0,i).join(""),u=l.slice(a).join(""),s=l.slice(i,a).join(""),d=n.createElement(r,null,s);return P(n.Fragment,null,c,d,u)}return P(n.Fragment,null,o)},ln=function(n){var o,e=n.value,r=n.displayName;return{value:null!=e?e:c(r),displayName:null!==(o=null!=r?r:e)&&void 0!==o?o:""}},cn=function o(e){return n.Children.toArray(e).reduce((function(n,e){if(S(e,"ComboboxOption")){var r=ln(e.props),t=r.value,i=r.displayName,a=e.props.glyph;return[].concat(U(n),[{value:t,displayName:i,hasGlyph:!!a}])}if(S(e,"ComboboxGroup")){var l=e.props.children;if(l)return[].concat(U(n),U(o(l)))}}),[])},un=M(q||(q=V(["\n display: inline-flex;\n gap: 8px;\n justify-content: start;\n align-items: inherit;\n"]))),sn=function(n){return M(J||(J=V(["\n font-weight: ",";\n"])),n?"bold":"normal")},dn=n.forwardRef((function(o,i){var a=o.displayName,l=o.glyph,c=o.isSelected,u=o.isFocused,s=o.setSelected,d=o.className,b=e(rn),g=b.multiselect,p=b.darkMode,m=b.withIcons,f=b.inputValue,x=h({prefix:"combobox-option-text"}),y=v(i,null),w=r((function(n){n.stopPropagation(),n.target!==y.current&&"INPUT"!==n.target.tagName||s()}),[y,s]),k=t((function(){if(l){if(O(l)||S(l,"Icon"))return l;console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",l)}}),[l]),C=t((function(){if(g){var o=P(F,{label:"","aria-labelledby":x,checked:c,tabIndex:-1,animate:!1});return P(n.Fragment,null,P("span",{className:un},m?k:o,P("span",{id:x,className:sn(c)},an(a,f,"strong"))),m&&o)}return P(n.Fragment,null,P("span",{className:un},k,P("span",{className:sn(c)},an(a,f,"strong"))),c&&P(N,{glyph:"Checkmark",color:p?I.blue.light1:I.blue.base}))}),[g,k,c,a,f,p,x,m]);return P("li",{ref:y,role:"option","aria-selected":u,"aria-label":a,tabIndex:-1,className:E(M($||($=V(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n list-style: none;\n color: inherit;\n cursor: pointer;\n overflow: hidden;\n font-size: var(--lg-combobox-item-font-size);\n line-height: var(--lg-combobox-item-line-height);\n padding: var(--lg-combobox-item-padding-y) var(--lg-combobox-item-padding-x);\n\n &:before {\n content: '';\n position: absolute;\n left: 0;\n width: 3px;\n height: var(--lg-combobox-item-wedge-height);\n background-color: transparent;\n border-radius: 0 2px 2px 0;\n transform: scaleY(0.3);\n transition: 150ms ease-in-out;\n transition-property: transform, background-color;\n }\n\n &:hover {\n outline: none;\n background-color: var(--lg-combobox-item-hover-color);\n }\n\n &[aria-selected='true'] {\n outline: none;\n background-color: var(--lg-combobox-item-active-color);\n\n &:before {\n background-color: var(--lg-combobox-item-wedge-color);\n transform: scaleY(1);\n }\n }\n"]))),d),onClick:w,onKeyPress:w},C)}));function bn(n){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}dn.displayName="ComboboxOption",bn.displayName="ComboboxOption";var gn,pn,mn,fn,hn,vn,xn,yn,wn,kn,Cn,Nn,On,jn,Mn,En,zn,In,Sn,Dn,Ln,Fn,Pn,An=function(n){var o,e,r=n.darkMode,t=n.size;switch(o=r?M(Q||(Q=V([""]))):M(Z||(Z=V(["\n --lg-combobox-chip-text-color: ",";\n --lg-combobox-chip-icon-color: ",";\n --lg-combobox-chip-background-color: ",";\n --lg-combobox-chip-hover-color: ",";\n --lg-combobox-chip-focus-color: ",";\n "])),I.gray.dark3,I.gray.dark2,I.gray.light2,I.gray.light1,I.blue.light2),t){case"default":e=M(_||(_=V(["\n --lg-combobox-chip-height: 24px;\n --lg-combobox-chip-border-radius: 4px;\n --lg-combobox-chip-font-size: 14px;\n --lg-combobox-chip-line-height: 20px;\n --lg-combobox-chip-padding-x: 6px;\n "])))}return E(o,e,M(nn||(nn=V(["\n display: inline-flex;\n align-items: center;\n overflow: hidden;\n white-space: nowrap;\n height: var(--lg-combobox-chip-height);\n font-size: var(--lg-combobox-chip-font-size);\n line-height: var(--lg-combobox-chip-line-height);\n border-radius: var(--lg-combobox-chip-border-radius);\n color: var(--lg-combobox-chip-text-color);\n background-color: var(--lg-combobox-chip-background-color);\n\n // TODO - refine these styles\n /* &:focus, */\n &:focus-within {\n background-color: var(--lg-combobox-chip-focus-color);\n }\n "]))))},Tn=M(on||(on=V(["\n padding-inline: var(--lg-combobox-chip-padding-x);\n"]))),Rn=M(en||(en=V(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n outline: none;\n border: none;\n background-color: transparent;\n color: var(--lg-combobox-chip-icon-color);\n cursor: pointer;\n transition: background-color 100ms ease-in-out;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 1px;\n background-color: var(--lg-combobox-chip-hover-color);\n }\n\n &:hover {\n background-color: var(--lg-combobox-chip-hover-color);\n }\n"]))),Wn=n.forwardRef((function(n,o){var r=n.displayName,l=n.isFocused,c=n.onRemove,u=n.onFocus,s=e(rn),d=s.darkMode,b=s.size,g=s.disabled,p=s.chipTruncationLocation,m=s.chipCharacterLimit,f=void 0===m?12:m,h=!!f&&!!p&&"none"!==p&&r.length>f,v=i(null),x=t((function(){if(h){var n=f-3;switch(p){case"start":return"…"+r.substring(r.length-n).trim();case"middle":return r.substring(0,n/2).trim()+"…"+r.substring(r.length-n/2).trim();case"end":return r.substring(0,n).trim()+"…";default:return r}}return!1}),[f,p,r,h]);a((function(){var n;l&&!g&&(null==v||null===(n=v.current)||void 0===n||n.focus())}),[g,o,l]);var y=L("combobox-chip");return P("span",G({role:"option","aria-selected":l,"data-test-id":"lg-combobox-chip"},y.prop,{ref:o,className:An({darkMode:d,size:b}),onClick:function(n){var o;null!==(o=v.current)&&void 0!==o&&o.contains(n.target)||u()},tabIndex:-1}),P("span",{className:Tn},x?P(A,{definition:r,align:"bottom"},x):r),P("button",{"aria-label":"Deselect ".concat(r),"aria-disabled":g,disabled:g,ref:v,className:Rn,onClick:function(){g||c()},onKeyDown:function(n){g||n.keyCode!==tn.Delete&&n.keyCode!==tn.Backspace&&n.keyCode!==tn.Enter&&n.keyCode!==tn.Space||c()}},P(N,{glyph:"X"})))}));Wn.displayName="Chip";var Bn,Gn,Kn=function(n){var o=n.darkMode,e=n.size,r=n.overflow;return E(function(n){return n?M(gn||(gn=V([""]))):M(pn||(pn=V(["\n --lg-combobox-color-error: ",";\n --lg-combobox-text-color: ",";\n --lg-combobox-text-color-disabled: ",";\n\n --lg-combobox-background-color: ",";\n --lg-combobox-background-color-focus: ",";\n --lg-combobox-background-color-disabled: ",";\n\n --lg-combobox-border-color: ",";\n --lg-combobox-border-color-disabled: ",";\n --lg-combobox-border-color-error: ",";\n\n --lg-combobox-shadow: 0px 1px 2px rgba(6, 22, 33, 0.3);\n --lg-combobox-shadow-focus: 0px 4px 4px rgba(6, 22, 33, 0.3);\n "])),I.red.base,I.gray.dark3,I.gray.dark1,I.gray.light3,I.white,I.gray.light2,I.gray.base,I.gray.light1,I.red.base)}(o),function(n){switch(n){case"default":return M(mn||(mn=V(["\n --lg-combobox-padding-y: 5px;\n --lg-combobox-padding-x: 7px;\n --lg-combobox-height: 24px;\n --lg-combobox-font-size: 14px;\n --lg-combobox-line-height: 20px;\n --lg-combobox-border-radius: 3px;\n --lg-combobox-input-default-width: 12ch;\n --lg-combobox-icon-height: 16px;\n "])))}}(e),M(fn||(fn=V(["\n --lg-combobox-width: ",";\n --lg-combobox-padding: var(--lg-combobox-padding-y)\n var(--lg-combobox-padding-x) var(--lg-combobox-padding-y)\n ",";\n width: var(--lg-combobox-width);\n "])),"expand-x"===r?"unset":"100%","scroll-x"===r?"0":"var(--lg-combobox-padding-x)"))},Vn=M(hn||(hn=V(["\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n padding: var(--lg-combobox-padding);\n color: var(--lg-combobox-text-color);\n background-color: var(--lg-combobox-background-color);\n box-shadow: var(--lg-combobox-shadow);\n border: 1px solid var(--lg-combobox-border-color);\n border-radius: var(--lg-combobox-border-radius);\n width: var(--lg-combobox-width);\n cursor: text;\n transition: 150ms ease-in-out;\n transition-property: background-color, box-shadow;\n min-width: 256px;\n\n &:focus-within {\n background-color: var(--lg-combobox-background-color-focus);\n box-shadow: var(--lg-combobox-shadow-focus);\n }\n\n &[data-disabled='true'] {\n color: var(--lg-combobox-text-color-disabled);\n background-color: var(--lg-combobox-background-color-disabled);\n border-color: var(--lg-combobox-border-color-disabled);\n box-shadow: unset;\n cursor: not-allowed;\n }\n\n &[data-state='error'] {\n border-color: var(--lg-combobox-border-color-error);\n }\n"]))),Hn=M(vn||(vn=V(["\n width: var(--lg-combobox-width);\n"]))),Un=function(n){var o=n.state;return n.darkMode?{hovered:"error"===o?I.red.dark2:void 0}:{hovered:"error"===o?I.red.light3:void 0}},Xn=function(n){var o,e=n.overflow,r=n.isOpen,t=n.selection,i=n.value,a=u(t)&&t.length>0,l=null!==(o=null==i?void 0:i.length)&&void 0!==o?o:0,c=a?r||l>0?"".concat(l+1,"ch"):"0":"var(--lg-combobox-input-default-width)",s=M(xn||(xn=V(["\n flex-grow: 1;\n width: var(--lg-combobox-width);\n\n --lg-combobox-input-width: ",";\n "])),c);switch(e){case"scroll-x":return M(yn||(yn=V(["\n ","\n display: block;\n height: var(--lg-combobox-height);\n white-space: nowrap;\n overflow-x: scroll;\n scroll-behavior: smooth;\n scrollbar-width: none;\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by `scroll-behavior` \n */\n --lg-combobox-input-transition: width ease-in-out\n ",";\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n & > * {\n margin-inline: 2px;\n\n &:first-child {\n margin-inline-start: var(--lg-combobox-padding-x);\n }\n\n &:last-child {\n margin-inline-end: var(--lg-combobox-padding-x);\n }\n }\n "],["\n ","\n display: block;\n height: var(--lg-combobox-height);\n white-space: nowrap;\n overflow-x: scroll;\n scroll-behavior: smooth;\n scrollbar-width: none;\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by \\`scroll-behavior\\` \n */\n --lg-combobox-input-transition: width ease-in-out\n ",";\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n & > * {\n margin-inline: 2px;\n\n &:first-child {\n margin-inline-start: var(--lg-combobox-padding-x);\n }\n\n &:last-child {\n margin-inline-end: var(--lg-combobox-padding-x);\n }\n }\n "])),s,r?"0":"100ms");case"expand-x":return M(wn||(wn=V(["\n ","\n display: flex;\n gap: 4px;\n flex-wrap: nowrap;\n white-space: nowrap;\n --lg-combobox-input-transition: width 150ms ease-in-out;\n "])),s);case"expand-y":return M(kn||(kn=V(["\n ","\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n overflow-x: visible;\n "])),s)}},Yn=M(Cn||(Cn=V(["\n border: none;\n cursor: inherit;\n background-color: inherit;\n box-sizing: content-box;\n padding-block: calc(\n (var(--lg-combobox-height) - var(--lg-combobox-line-height)) / 2\n );\n padding-inline: 0;\n height: var(--lg-combobox-line-height);\n width: var(\n --lg-combobox-input-width,\n var(--lg-combobox-input-default-width, auto)\n );\n transition: var(--lg-combobox-input-transition);\n\n &:focus {\n outline: none;\n }\n"]))),$n=M(Nn||(Nn=V(["\n // Add a negative margin so the button takes up the same space as the regular icons\n margin-block: calc(var(--lg-combobox-icon-height) / 2 - 100%);\n"]))),qn=M(On||(On=V(["\n font-size: var(--lg-combobox-font-size);\n line-height: var(--lg-combobox-line-height);\n color: var(--lg-combobox-color-error);\n padding-top: var(--lg-combobox-padding-y);\n"]))),Jn=M(jn||(jn=V(["\n margin-inline-end: calc(var(--lg-combobox-padding-x) / 2);\n"]))),Qn=z(Mn||(Mn=V(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]))),Zn=M(En||(En=V(["\n animation: "," 1.5s linear infinite;\n"])),Qn),_n=function(n){var o,e,r=n.darkMode,t=n.size,i=n.width,a=void 0===i?384:i;switch(o=r?M(zn||(zn=V([""]))):M(In||(In=V(["\n --lg-combobox-menu-color: ",";\n --lg-combobox-menu-message-color: ",";\n --lg-combobox-menu-background-color: ",";\n --lg-combobox-menu-shadow: 0px 3px 7px rgba(0, 0, 0, 0.25);\n --lg-combobox-item-hover-color: ",";\n --lg-combobox-item-active-color: ",";\n --lg-combobox-item-wedge-color: ",";\n "])),I.gray.dark3,I.gray.dark1,I.white,I.gray.light2,I.blue.light3,I.blue.base),t){case"default":e=M(Sn||(Sn=V(["\n --lg-combobox-menu-border-radius: 4px;\n --lg-combobox-item-height: 36px;\n --lg-combobox-item-padding-y: 8px;\n --lg-combobox-item-padding-x: 12px;\n --lg-combobox-item-font-size: 14px;\n --lg-combobox-item-line-height: 21px;\n --lg-combobox-item-wedge-height: 22px;\n "])))}return E(o,e,M(Dn||(Dn=V(["\n width: ","px;\n border-radius: var(--lg-combobox-menu-border-radius);\n\n & > * {\n border-radius: inherit;\n }\n "])),a))},no=function(n){var o=n.maxHeight;return M(Ln||(Ln=V(["\n position: relative;\n width: 100%;\n margin: 0;\n padding: 0;\n font-family: ",";\n color: var(--lg-combobox-menu-color);\n background-color: var(--lg-combobox-menu-background-color);\n box-shadow: var(--lg-combobox-menu-shadow);\n border-radius: inherit;\n overflow: auto;\n min-height: var(--lg-combobox-item-height);\n max-height: ","px;\n scroll-behavior: smooth;\n"])),T.default,o)},oo=M(Fn||(Fn=V(["\n position: relative;\n margin: 0;\n padding: 0;\n"]))),eo=M(Pn||(Pn=V(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-size: var(--lg-combobox-item-font-size);\n color: var(--lg-combobox-menu-message-color);\n padding: var(--lg-combobox-item-padding-y) var(--lg-combobox-item-padding-x);\n\n & > svg {\n width: 1em;\n height: 1em;\n }\n"]))),ro=function(n){return M(Bn||(Bn=V(["\n --lg-combobox-group-label-color: ",";\n --lg-combobox-group-border-color: ",";\n padding-top: 8px;\n border-bottom: 1px solid var(--lg-combobox-group-border-color);\n"])),n?I.gray.light1:I.gray.dark1,n?I.gray.dark1:I.gray.light1)},to=M(Gn||(Gn=V(["\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: bold;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--lg-combobox-group-label-color);\n"])));function io(o){var r=o.label,t=o.className,i=o.children,a=e(rn).darkMode,l=h({prefix:"combobox-group"});return n.Children.count(i)>0?P("div",{className:E(ro(a),t)},P("div",{className:to,id:l},r),P("div",{role:"group","aria-labelledby":l},i)):P(n.Fragment,null)}function ao(n){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}ao.displayName="ComboboxGroup";var lo=["children","label","description","placeholder","aria-label","disabled","size","darkMode","state","errorMessage","searchState","searchEmptyMessage","searchErrorMessage","searchLoadingMessage","filteredOptions","onFilter","clearable","onClear","overflow","multiselect","initialValue","onChange","value","chipTruncationLocation","chipCharacterLimit","className"];function co(o){var e=o.children,c=o.label,v=o.description,O=o.placeholder,M=void 0===O?"Select":O,z=o["aria-label"],D=o.disabled,L=void 0!==D&&D,F=o.size,A=void 0===F?"default":F,T=o.darkMode,R=void 0!==T&&T,W=o.state,B=void 0===W?"none":W,V=o.errorMessage,U=o.searchState,X=void 0===U?"unset":U,Y=o.searchEmptyMessage,$=void 0===Y?"No results found":Y,q=o.searchErrorMessage,J=void 0===q?"Could not get results!":q,Q=o.searchLoadingMessage,Z=void 0===Q?"Loading results...":Q,_=o.filteredOptions,nn=o.onFilter,on=o.clearable,en=void 0===on||on,an=o.onClear,un=o.overflow,sn=void 0===un?"expand-y":un,bn=o.multiselect,gn=void 0!==bn&&bn,pn=o.initialValue,mn=o.onChange,fn=o.value,hn=o.chipTruncationLocation,vn=o.chipCharacterLimit,xn=void 0===vn?12:vn,yn=o.className,wn=K(o,lo),kn=x({prefix:"option"}),Cn=x({prefix:"chip"}),Nn=h({prefix:"combobox-input"}),On=h({prefix:"combobox-label"}),jn=h({prefix:"combobox-menu"}),Mn=i(null),En=i(null),zn=i(null),In=i(null),Sn=i(null),Dn=H(l(!1),2),Ln=Dn[0],Fn=Dn[1],Pn=y(Ln),An=H(l(null),2),Tn=An[0],Rn=An[1],Bn=H(l(null),2),Gn=Bn[0],Qn=Bn[1],ro=y(Gn),to=H(l(""),2),ao=to[0],co=to[1],uo=y(ao),so=H(l(null),2),bo=so[0],go=so[1],po=!s(Gn)&&(u(Gn)&&Gn.length>0||d(Gn)),mo=r((function(n){return gn&&u(n)}),[gn]),fo=r((function(n){!L&&In&&In.current&&(In.current.focus(),b(n)||In.current.setSelectionRange(n,n))}),[L]),ho=r((function(n){if(mo(Gn)){var o=g(Gn);s(n)?o.length=0:Gn.includes(n)?o.splice(o.indexOf(n),1):(o.push(n),co("")),Qn(o),null==mn||mn(o)}else{var e=n;Qn(e),null==mn||mn(e)}}),[mo,mn,Gn]),vo=function(){zn&&zn.current&&(zn.current.scrollLeft=zn.current.scrollWidth)},xo=gn&&u(Gn)&&Gn.length>0?void 0:M,yo=t((function(){return cn(e)}),[e]),wo=r((function(n){var o,e;return n?null!==(o=null===(e=yo.find((function(o){return o.value===n})))||void 0===e?void 0:e.displayName)&&void 0!==o?o:n:""}),[yo]),ko=r((function(n){var o="string"==typeof n?n:n.value;return _&&_.length>0?_.includes(o):("string"==typeof n?wo(o):n.displayName).toLowerCase().includes(ao.toLowerCase())}),[_,wo,ao]),Co=t((function(){return yo.filter(ko)}),[yo,ko]),No=r((function(n){return!!n&&!!yo.find((function(o){return o.value===n}))}),[yo]),Oo=r((function(n){return Co?Co.findIndex((function(o){return o.value===n})):-1}),[Co]),jo=r((function(n){if(Co&&Co.length>=n){var o=Co[n];return o?o.value:void 0}}),[Co]),Mo=r((function(){return mo(Gn)?Gn.findIndex((function(n){var o,e;return null===(o=Cn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})):-1}),[Cn,mo,Gn]),Eo=r((function(){var n,o,e,r=null===(n=In.current)||void 0===n?void 0:n.contains(document.activeElement),t=null===(o=En.current)||void 0===o?void 0:o.contains(document.activeElement),i=mo(Gn)&&Gn.some((function(n){var o,e;return null===(o=Cn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})),a=function(){return mo(Gn)?Gn.findIndex((function(n){var o,e;return null===(o=Cn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})):-1};return mo(Gn)&&i?0===a()?"FirstChip":a()===Gn.length-1?"LastChip":"MiddleChip":r?"Input":t?"ClearButton":null!==(e=Mn.current)&&void 0!==e&&e.contains(document.activeElement)?"Combobox":void 0}),[Cn,mo,Gn]),zo=r((function(n){var o,e=null!==(o=null==Co?void 0:Co.length)&&void 0!==o?o:0,r=e-1>0?e-1:0,t=Oo(Tn);switch(n&&Ln&&(go(null),fo()),n){case"next":var i=jo(t+1<e?t+1:0);Rn(null!=i?i:null);break;case"prev":var a=jo(t-1>=0?t-1:r);Rn(null!=a?a:null);break;case"last":var l=jo(r);Rn(null!=l?l:null);break;case"first":default:var c=jo(0);Rn(null!=c?c:null)}}),[Tn,Oo,jo,Ln,fo,null==Co?void 0:Co.length]),Io=r((function(n,o){if(mo(Gn))switch(n){case"next":var e=null!=o?o:Mo(),r=e+1<Gn.length?e+1:Gn.length-1,t=Gn[r];go(t);break;case"prev":var i=null!=o?o:Mo(),a=i>0?i-1:i<0?Gn.length-1:0,l=Gn[a];go(l);break;case"first":var c=Gn[0];go(c);break;case"last":var u=Gn[Gn.length-1];go(u);break;default:go(null)}}),[Mo,mo,Gn]),So=r((function(n,o){n&&Rn(null);var e=Eo();switch(n){case"right":switch(e){case"Input":var r,t,i;if((null===(r=In.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=In.current)||void 0===t?void 0:t.value.length))null===(i=En.current)||void 0===i||i.focus();break;case"LastChip":o.preventDefault(),fo(0),Io(null);break;case"FirstChip":case"MiddleChip":Io("next")}break;case"left":switch(e){case"ClearButton":var a;o.preventDefault(),fo(null==In||null===(a=In.current)||void 0===a?void 0:a.value.length);break;case"Input":case"MiddleChip":case"LastChip":if(mo(Gn)){var l;if("Input"===e&&0!==(null===(l=In.current)||void 0===l?void 0:l.selectionStart))break;Io("prev")}}break;default:Io(null)}}),[Eo,mo,Gn,fo,Io]);a((function(){ao!==uo&&zo("first")}),[ao,Ln,uo,zo]),a((function(){if(Tn){var n=kn(Tn);if(n&&n.current&&Sn.current){var o=n.current.offsetTop,e=Sn.current,r=e.scrollTop;(o>e.offsetHeight||o<r)&&(Sn.current.scrollTop=o)}}}),[Tn,kn]);var Do=r((function(o){return n.Children.map(o,(function(n){if(S(n,"ComboboxOption")){var o=ln(n.props),e=o.value,r=o.displayName;if(ko(e)){var t=n.props,i=t.className,a=t.glyph,l=yo.findIndex((function(n){return n.value===e})),c=Tn===e,u=mo(Gn)?Gn.includes(e):Gn===e,s=kn(e);return P(dn,{value:e,displayName:r,isFocused:c,isSelected:u,setSelected:function(){Rn(e),ho(e),fo(),e===Gn&&Wo()},glyph:a,className:i,index:l,ref:s})}}else if(S(n,"ComboboxGroup")){var d=Do(n.props.children);if(d&&(null==d?void 0:d.length)>0)return P(io,{label:n.props.label,className:n.props.className},Do(d))}}))}),[yo,Tn,kn,mo,ko,Gn,fo,ho]),Lo=t((function(){return Do(e)}),[e,Do]),Fo=t((function(){if(mo(Gn))return Gn.filter(No).map((function(n,o){var e=wo(n),r=bo===n,t=Cn(n);return P(Wn,{key:n,displayName:e,isFocused:r,onRemove:function(){Io("next",o),ho(n)},onFocus:function(){go(n)},ref:t})}))}),[mo,Gn,No,wo,bo,Cn,Io,ho]),Po=t((function(){return P(n.Fragment,null,en&&po&&P(j,{"aria-label":"Clear selection","aria-disabled":L,disabled:L,ref:En,onClick:function(n){L||(ho(null),null==an||an(n),null==nn||nn(""),Ln||Bo())},onFocus:Yo,className:$n},P(N,{glyph:"XWithCircle"})),P(N,"error"===B?{glyph:"Warning",color:I.red.base,className:Jn}:{glyph:"CaretDown",className:Jn}))}),[en,po,L,B,ho,an,nn,Ln]),Ao=t((function(){return yo.some((function(n){return n.hasGlyph}))}),[yo]),To=r((function(){if(!mo(Gn)&&Gn===ro){var n=Co.find((function(n){return n.displayName===ao||n.value===ao}));if(n&&!fn)Qn(n.value);else{var o,e=null!==(o=wo(Gn))&&void 0!==o?o:"";co(e)}}}),[wo,ao,mo,ro,Gn,fn,Co]),Ro=r((function(){if(po){if(mo(Gn))vo();else if(!mo(Gn)){var n,o=null!==(n=wo(Gn))&&void 0!==n?n:"";co(o),Wo()}}else co("")}),[po,wo,mo,Gn]);a((function(){if(pn)if(u(pn)){var n,o=null!==(n=pn.filter((function(n){return No(n)})))&&void 0!==n?n:[];Qn(o)}else No(pn)&&Qn(pn);else Qn(function(n){return n?[]:null}(gn))}),[]),a((function(){if(!b(fn)&&fn!==uo)if(s(fn))Qn(null);else if(mo(fn)){var n=fn.filter(No);Qn(n)}else Qn(No(fn)?fn:null)}),[mo,No,uo,fn]),a((function(){Gn!==ro&&Ro()}),[Ro,ro,Gn]),a((function(){Ln||Pn===Ln||To()}),[Ln,Pn,To]);var Wo=function(){return Fn(!1)},Bo=function(){return Fn(!0)},Go=H(l(0),2),Ko=Go[0],Vo=Go[1];a((function(){var n,o;Vo(null!==(n=null===(o=Mn.current)||void 0===o?void 0:o.clientWidth)&&void 0!==n?n:0)}),[Mn,Ln,Tn,Gn]);var Ho=t((function(){switch(X){case"loading":return P("span",{className:eo},P(N,{glyph:"Refresh",color:I.blue.base,className:Zn}),Z);case"error":return P("span",{className:eo},P(N,{glyph:"Warning",color:I.red.base}),J);case"unset":default:return Lo&&Lo.length>0?P("ul",{className:oo},Lo):P("span",{className:eo},$)}}),[Lo,$,J,Z,X]),Uo=w(),Xo=t((function(){if(Uo&&Mn.current&&Sn.current){var n=Mn.current.getBoundingClientRect(),o=n.top,e=n.bottom,r=Math.max(Uo.height-e,o);return Math.min(274,r-8)}return 274}),[Uo,Mn,Sn]);a((function(){}),[Tn]);var Yo=function(){Rn(null)};return k("mousedown",(function(n){var o,e,r=n.target;(null===(o=Sn.current)||void 0===o?void 0:o.contains(r))||(null===(e=Mn.current)||void 0===e?void 0:e.contains(r))||!1||Fn(!1)})),P(rn.Provider,{value:{multiselect:gn,darkMode:R,size:A,withIcons:Ao,disabled:L,chipTruncationLocation:hn,chipCharacterLimit:xn,inputValue:ao}},P("div",G({className:E(Kn({darkMode:R,size:A,overflow:sn}),yn)},wn),P("div",null,c&&P(p,{id:On,htmlFor:Nn},c),v&&P(m,null,v)),P(C,{className:Hn,disabled:L,color:Un({state:B,darkMode:R})},P("div",{ref:Mn,role:"combobox","aria-expanded":Ln,"aria-controls":jn,"aria-owns":jn,tabIndex:-1,className:Vn,onMouseDown:function(n){n.target!==In.current&&n.preventDefault()},onClick:function(n){if(n.target!==In.current){var o=0;if(In.current)o=n.nativeEvent.offsetX>In.current.offsetLeft+In.current.clientWidth?ao.length:0;fo(o)}},onFocus:function(){vo(),Bo()},onKeyDown:function(n){var o,e,r=null===(o=Sn.current)||void 0===o?void 0:o.contains(document.activeElement);if((null===(e=Mn.current)||void 0===e?void 0:e.contains(document.activeElement))||r){if(n.ctrlKey||n.shiftKey||n.altKey)return;var t=Eo();switch(n.keyCode){case tn.Tab:switch(t){case"Input":po||(Wo(),zo("first"),Io(null));break;case"LastChip":Io(null)}break;case tn.Escape:Wo(),zo("first");break;case tn.Enter:case tn.Space:Ln&&n.preventDefault(),document.activeElement===In.current&&Ln&&!s(Tn)?ho(Tn):document.activeElement===En.current&&(ho(null),fo());break;case tn.Backspace:var i;mo(Gn)&&0===(null===(i=In.current)||void 0===i?void 0:i.selectionStart)?Io("last"):Bo();break;case tn.ArrowDown:Ln&&n.preventDefault(),Bo(),zo("next");break;case tn.ArrowUp:Ln&&n.preventDefault(),zo("prev");break;case tn.ArrowRight:So("right",n);break;case tn.ArrowLeft:So("left",n);break;default:Ln||Bo()}}},onTransitionEnd:function(){var n,o;Vo(null!==(n=null===(o=Mn.current)||void 0===o?void 0:o.clientWidth)&&void 0!==n?n:0)},"data-disabled":L,"data-state":B},P("div",{ref:zn,className:Xn({overflow:sn,isOpen:Ln,selection:Gn,value:ao})},Fo,P("input",{"aria-label":null!=z?z:c,"aria-autocomplete":"list","aria-controls":jn,"aria-labelledby":On,ref:In,id:Nn,className:Yn,placeholder:xo,disabled:null!=L?L:void 0,onChange:function(n){var o=n.target.value;co(o),null==nn||nn(o)},value:ao,autoComplete:"off"})),Po)),"error"===B&&V&&P("div",{className:qn},V),P(f,{active:Ln&&!L,spacing:4,align:"bottom",justify:"middle",refEl:Mn,adjustOnMutation:!0,className:_n({darkMode:R,size:A,width:Ko})},P("div",{id:jn,role:"listbox","aria-labelledby":On,"aria-expanded":Ln,ref:Sn,className:no({maxHeight:Xo}),onMouseDownCapture:function(n){return n.preventDefault()}},Ho))))}export{co as Combobox,ao as ComboboxGroup,bn as ComboboxOption};
1
+ import n,{createContext as o,useContext as e,useCallback as r,useMemo as t,useRef as i,useEffect as a,useState as l}from"react";import{kebabCase as c,isArray as u,isNull as s,isString as d,isUndefined as b,clone as p,isEqual as g}from"lodash";import{Label as m,Description as f}from"@leafygreen-ui/typography";import h from"@leafygreen-ui/popover";import{useIdAllocator as v,useForwardedRef as x,useDynamicRefs as y,usePrevious as w,useViewportSize as k,useEventListener as C}from"@leafygreen-ui/hooks";import N from"@leafygreen-ui/interaction-ring";import O,{isComponentGlyph as j}from"@leafygreen-ui/icon";import M from"@leafygreen-ui/icon-button";import{css as E,cx as I,keyframes as S}from"@leafygreen-ui/emotion";import{uiColors as z}from"@leafygreen-ui/palette";import{isComponentType as P,keyMap as D,createDataProp as L,consoleOnce as F}from"@leafygreen-ui/lib";import A from"@leafygreen-ui/checkbox";import{jsx as T}from"@emotion/react";import R from"@leafygreen-ui/inline-definition";import{fontFamilies as W}from"@leafygreen-ui/tokens";function B(n,o){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);o&&(r=r.filter((function(o){return Object.getOwnPropertyDescriptor(n,o).enumerable}))),e.push.apply(e,r)}return e}function G(n){for(var o=1;o<arguments.length;o++){var e=null!=arguments[o]?arguments[o]:{};o%2?B(Object(e),!0).forEach((function(o){V(n,o,e[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):B(Object(e)).forEach((function(o){Object.defineProperty(n,o,Object.getOwnPropertyDescriptor(e,o))}))}return n}function K(n){return(K="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n})(n)}function V(n,o,e){return o in n?Object.defineProperty(n,o,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[o]=e,n}function H(){return(H=Object.assign||function(n){for(var o=1;o<arguments.length;o++){var e=arguments[o];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r])}return n}).apply(this,arguments)}function U(n,o){if(null==n)return{};var e,r,t=function(n,o){if(null==n)return{};var e,r,t={},i=Object.keys(n);for(r=0;r<i.length;r++)e=i[r],o.indexOf(e)>=0||(t[e]=n[e]);return t}(n,o);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(r=0;r<i.length;r++)e=i[r],o.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(n,e)&&(t[e]=n[e])}return t}function X(n,o){return o||(o=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(o)}}))}function Z(n,o){return function(n){if(Array.isArray(n))return n}(n)||function(n,o){var e=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null==e)return;var r,t,i=[],a=!0,l=!1;try{for(e=e.call(n);!(a=(r=e.next()).done)&&(i.push(r.value),!o||i.length!==o);a=!0);}catch(n){l=!0,t=n}finally{try{a||null==e.return||e.return()}finally{if(l)throw t}}return i}(n,o)||$(n,o)||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 Y(n){return function(n){if(Array.isArray(n))return q(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||$(n)||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 $(n,o){if(n){if("string"==typeof n)return q(n,o);var e=Object.prototype.toString.call(n).slice(8,-1);return"Object"===e&&n.constructor&&(e=n.constructor.name),"Map"===e||"Set"===e?Array.from(n):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?q(n,o):void 0}}function q(n,o){(null==o||o>n.length)&&(o=n.length);for(var e=0,r=new Array(o);e<o;e++)r[e]=n[e];return r}var J,Q,_,nn,on,en,rn,tn,an,ln,cn=o({multiselect:!1,darkMode:!1,size:"default",withIcons:!1,disabled:!1}),un=G(G({},D),{},{Backspace:8,Delete:46}),sn=function(o,e,r){if(e&&r){var t=new RegExp(e,"gi"),i=o.search(t),a=i+e.length,l=o.split(""),c=l.slice(0,i).join(""),u=l.slice(a).join(""),s=l.slice(i,a).join(""),d=n.createElement(r,null,s);return T(n.Fragment,null,c,d,u)}return T(n.Fragment,null,o)},dn=function(n){var o,e=n.value,r=n.displayName;return{value:null!=e?e:c(r),displayName:null!==(o=null!=r?r:e)&&void 0!==o?o:""}},bn=function o(e){return n.Children.toArray(e).reduce((function(n,e){if(P(e,"ComboboxOption")){var r=dn(e.props),t=r.value,i=r.displayName,a=e.props.glyph;return[].concat(Y(n),[{value:t,displayName:i,hasGlyph:!!a}])}if(P(e,"ComboboxGroup")){var l=e.props.children;if(l)return[].concat(Y(n),Y(o(l)))}}),[])},pn=E(Q||(Q=X(["\n display: inline-flex;\n gap: 8px;\n justify-content: start;\n align-items: inherit;\n"]))),gn=E(_||(_=X(["\n pointer-events: none;\n"]))),mn=function(n){return E(nn||(nn=X(["\n font-weight: ",";\n"])),n?"bold":"normal")},fn=n.forwardRef((function(o,i){var a=o.displayName,l=o.glyph,c=o.isSelected,u=o.isFocused,s=o.setSelected,d=o.className,b=e(cn),p=b.multiselect,g=b.darkMode,m=b.withIcons,f=b.inputValue,h=v({prefix:"combobox-option-text"}),y=x(i,null),w=r((function(n){n.stopPropagation(),n.target!==y.current&&"INPUT"!==n.target.tagName||s()}),[y,s]),k=t((function(){if(l){if(j(l)||P(l,"Icon"))return l;console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",l)}}),[l]),C=t((function(){if(p){var o=T(A,{label:"","aria-labelledby":h,checked:c,tabIndex:-1,animate:!1});return T(n.Fragment,null,T("span",{className:I(pn,gn)},m?k:o,T("span",{id:h,className:mn(c)},sn(a,f,"strong"))),m&&o)}return T(n.Fragment,null,T("span",{className:I(pn,gn)},k,T("span",{className:mn(c)},sn(a,f,"strong"))),c&&T(O,{glyph:"Checkmark",color:g?z.blue.light1:z.blue.base}))}),[p,k,c,a,f,g,h,m]);return T("li",{ref:y,role:"option","aria-selected":u,"aria-label":a,tabIndex:-1,className:I(E(J||(J=X(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n list-style: none;\n color: inherit;\n cursor: pointer;\n overflow: hidden;\n font-size: var(--lg-combobox-item-font-size);\n line-height: var(--lg-combobox-item-line-height);\n padding: var(--lg-combobox-item-padding-y) var(--lg-combobox-item-padding-x);\n\n &:before {\n content: '';\n position: absolute;\n left: 0;\n width: 3px;\n height: var(--lg-combobox-item-wedge-height);\n background-color: transparent;\n border-radius: 0 2px 2px 0;\n transform: scaleY(0.3);\n transition: 150ms ease-in-out;\n transition-property: transform, background-color;\n }\n\n &:hover {\n outline: none;\n background-color: var(--lg-combobox-item-hover-color);\n }\n\n &[aria-selected='true'] {\n outline: none;\n background-color: var(--lg-combobox-item-active-color);\n\n &:before {\n background-color: var(--lg-combobox-item-wedge-color);\n transform: scaleY(1);\n }\n }\n"]))),d),onClick:w,onKeyPress:w},C)}));function hn(n){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}fn.displayName="ComboboxOption",hn.displayName="ComboboxOption";var vn,xn,yn,wn,kn,Cn,Nn,On,jn,Mn,En,In,Sn,zn,Pn,Dn,Ln,Fn,An,Tn,Rn,Wn,Bn,Gn=function(n){var o,e,r=n.darkMode,t=n.size;switch(o=r?E(on||(on=X([""]))):E(en||(en=X(["\n --lg-combobox-chip-text-color: ",";\n --lg-combobox-chip-icon-color: ",";\n --lg-combobox-chip-background-color: ",";\n --lg-combobox-chip-hover-color: ",";\n --lg-combobox-chip-focus-color: ",";\n "])),z.gray.dark3,z.gray.dark2,z.gray.light2,z.gray.light1,z.blue.light2),t){case"default":e=E(rn||(rn=X(["\n --lg-combobox-chip-height: 24px;\n --lg-combobox-chip-border-radius: 4px;\n --lg-combobox-chip-font-size: 14px;\n --lg-combobox-chip-line-height: 20px;\n --lg-combobox-chip-padding-x: 6px;\n "])))}return I(o,e,E(tn||(tn=X(["\n display: inline-flex;\n align-items: center;\n overflow: hidden;\n white-space: nowrap;\n height: var(--lg-combobox-chip-height);\n font-size: var(--lg-combobox-chip-font-size);\n line-height: var(--lg-combobox-chip-line-height);\n border-radius: var(--lg-combobox-chip-border-radius);\n color: var(--lg-combobox-chip-text-color);\n background-color: var(--lg-combobox-chip-background-color);\n\n // TODO - refine these styles\n /* &:focus, */\n &:focus-within {\n background-color: var(--lg-combobox-chip-focus-color);\n }\n "]))))},Kn=E(an||(an=X(["\n padding-inline: var(--lg-combobox-chip-padding-x);\n"]))),Vn=E(ln||(ln=X(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n outline: none;\n border: none;\n background-color: transparent;\n color: var(--lg-combobox-chip-icon-color);\n cursor: pointer;\n transition: background-color 100ms ease-in-out;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 1px;\n background-color: var(--lg-combobox-chip-hover-color);\n }\n\n &:hover {\n background-color: var(--lg-combobox-chip-hover-color);\n }\n"]))),Hn=n.forwardRef((function(n,o){var r=n.displayName,l=n.isFocused,c=n.onRemove,u=n.onFocus,s=e(cn),d=s.darkMode,b=s.size,p=s.disabled,g=s.chipTruncationLocation,m=void 0===g?"end":g,f=s.chipCharacterLimit,h=void 0===f?12:f,v=!!h&&!!m&&"none"!==m&&r.length>h,x=i(null),y=t((function(){if(v){var n=h-3;switch(m){case"start":return"…"+r.substring(r.length-n).trim();case"middle":return r.substring(0,n/2).trim()+"…"+r.substring(r.length-n/2).trim();case"end":return r.substring(0,n).trim()+"…";default:return r}}return!1}),[h,m,r,v]);a((function(){var n;l&&!p&&(null==x||null===(n=x.current)||void 0===n||n.focus())}),[p,o,l]);var w=L("combobox-chip");return T("span",H({role:"option","aria-selected":l,"data-test-id":"lg-combobox-chip"},w.prop,{ref:o,className:Gn({darkMode:d,size:b}),onClick:function(n){var o;null!==(o=x.current)&&void 0!==o&&o.contains(n.target)||u()},tabIndex:-1}),T("span",{className:Kn},y?T(R,{definition:r,align:"bottom"},y):r),T("button",{"aria-label":"Deselect ".concat(r),"aria-disabled":p,disabled:p,ref:x,className:Vn,onClick:function(){p||c()},onKeyDown:function(n){p||n.keyCode!==un.Delete&&n.keyCode!==un.Backspace&&n.keyCode!==un.Enter&&n.keyCode!==un.Space||c()}},T(O,{glyph:"X"})))}));Hn.displayName="Chip";var Un,Xn,Zn=function(n){var o=n.darkMode,e=n.size,r=n.overflow;return I(function(n){return n?E(vn||(vn=X([""]))):E(xn||(xn=X(["\n --lg-combobox-color-error: ",";\n --lg-combobox-text-color: ",";\n --lg-combobox-text-color-disabled: ",";\n\n --lg-combobox-background-color: ",";\n --lg-combobox-background-color-focus: ",";\n --lg-combobox-background-color-disabled: ",";\n\n --lg-combobox-border-color: ",";\n --lg-combobox-border-color-disabled: ",";\n --lg-combobox-border-color-error: ",";\n\n --lg-combobox-shadow: 0px 1px 2px rgba(6, 22, 33, 0.3);\n --lg-combobox-shadow-focus: 0px 4px 4px rgba(6, 22, 33, 0.3);\n "])),z.red.base,z.gray.dark3,z.gray.dark1,z.gray.light3,z.white,z.gray.light2,z.gray.base,z.gray.light1,z.red.base)}(o),function(n){switch(n){case"default":return E(yn||(yn=X(["\n --lg-combobox-padding-y: 5px;\n --lg-combobox-padding-x: 7px;\n --lg-combobox-height: 24px;\n --lg-combobox-font-size: 14px;\n --lg-combobox-line-height: 20px;\n --lg-combobox-border-radius: 3px;\n --lg-combobox-icon-height: 16px;\n "])))}}(e),E(wn||(wn=X(["\n --lg-combobox-width: ",";\n --lg-combobox-padding: var(--lg-combobox-padding-y)\n var(--lg-combobox-padding-x) var(--lg-combobox-padding-y)\n ",";\n width: var(--lg-combobox-width);\n "])),"expand-x"===r?"unset":"100%","scroll-x"===r?"0":"var(--lg-combobox-padding-x)"))},Yn=E(kn||(kn=X(["\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n padding: var(--lg-combobox-padding);\n color: var(--lg-combobox-text-color);\n background-color: var(--lg-combobox-background-color);\n box-shadow: var(--lg-combobox-shadow);\n border: 1px solid var(--lg-combobox-border-color);\n border-radius: var(--lg-combobox-border-radius);\n width: var(--lg-combobox-width);\n cursor: text;\n transition: 150ms ease-in-out;\n transition-property: background-color, box-shadow;\n min-width: 256px;\n\n &:focus-within {\n background-color: var(--lg-combobox-background-color-focus);\n box-shadow: var(--lg-combobox-shadow-focus);\n }\n\n &[data-disabled='true'] {\n color: var(--lg-combobox-text-color-disabled);\n background-color: var(--lg-combobox-background-color-disabled);\n border-color: var(--lg-combobox-border-color-disabled);\n box-shadow: unset;\n cursor: not-allowed;\n }\n\n &[data-state='error'] {\n border-color: var(--lg-combobox-border-color-error);\n }\n"]))),$n=E(Cn||(Cn=X(["\n width: var(--lg-combobox-width);\n"]))),qn=function(n){var o=n.state;return n.darkMode?{hovered:"error"===o?z.red.dark2:void 0}:{hovered:"error"===o?z.red.light3:void 0}},Jn=function(n){var o,e=n.overflow,r=n.isOpen,t=n.selection,i=n.value,a=u(t)&&t.length>0,l=null!==(o=null==i?void 0:i.length)&&void 0!==o?o:0,c=E(Nn||(Nn=X(["\n flex-grow: 1;\n width: var(--lg-combobox-width);\n\n --lg-combobox-input-width: ",";\n "])),a?"".concat(l,"ch"):"100%");switch(e){case"scroll-x":return E(On||(On=X(["\n ","\n display: block;\n height: var(--lg-combobox-height);\n white-space: nowrap;\n overflow-x: scroll;\n scroll-behavior: smooth;\n scrollbar-width: none;\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by `scroll-behavior` \n */\n --lg-combobox-input-transition: width ease-in-out\n ",";\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n & > * {\n margin-inline: 2px;\n\n &:first-child:not(input) {\n margin-inline-start: 0;\n }\n\n &:last-child:not(input) {\n margin-inline-end: 0;\n }\n }\n "],["\n ","\n display: block;\n height: var(--lg-combobox-height);\n white-space: nowrap;\n overflow-x: scroll;\n scroll-behavior: smooth;\n scrollbar-width: none;\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by \\`scroll-behavior\\` \n */\n --lg-combobox-input-transition: width ease-in-out\n ",";\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n & > * {\n margin-inline: 2px;\n\n &:first-child:not(input) {\n margin-inline-start: 0;\n }\n\n &:last-child:not(input) {\n margin-inline-end: 0;\n }\n }\n "])),c,r?"0":"100ms");case"expand-x":return E(jn||(jn=X(["\n ","\n display: flex;\n gap: 4px;\n flex-wrap: nowrap;\n white-space: nowrap;\n height: var(--lg-combobox-height);\n --lg-combobox-input-transition: none;\n "])),c);case"expand-y":return E(Mn||(Mn=X(["\n ","\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n overflow-x: visible;\n min-height: var(--lg-combobox-height);\n "])),c)}},Qn=E(En||(En=X(["\n border: none;\n cursor: inherit;\n background-color: inherit;\n box-sizing: content-box;\n padding: 0;\n margin: 0;\n text-overflow: ellipsis;\n line-height: var(--lg-combobox-line-height);\n height: var(--lg-combobox-height);\n width: var(--lg-combobox-input-width, 0);\n transition: var(--lg-combobox-input-transition);\n\n &:focus {\n outline: none;\n }\n"]))),_n=E(In||(In=X(["\n // Add a negative margin so the button takes up the same space as the regular icons\n margin-block: calc(var(--lg-combobox-icon-height) / 2 - 100%);\n"]))),no=E(Sn||(Sn=X(["\n font-size: var(--lg-combobox-font-size);\n line-height: var(--lg-combobox-line-height);\n color: var(--lg-combobox-color-error);\n padding-top: var(--lg-combobox-padding-y);\n"]))),oo=E(zn||(zn=X(["\n margin-inline-end: calc(var(--lg-combobox-padding-x) / 2);\n"]))),eo=S(Pn||(Pn=X(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]))),ro=E(Dn||(Dn=X(["\n animation: "," 1.5s linear infinite;\n"])),eo),to=function(n){var o,e,r=n.darkMode,t=n.size,i=n.width,a=void 0===i?384:i;switch(o=r?E(Ln||(Ln=X([""]))):E(Fn||(Fn=X(["\n --lg-combobox-menu-color: ",";\n --lg-combobox-menu-message-color: ",";\n --lg-combobox-menu-background-color: ",";\n --lg-combobox-menu-shadow: 0px 3px 7px rgba(0, 0, 0, 0.25);\n --lg-combobox-item-hover-color: ",";\n --lg-combobox-item-active-color: ",";\n --lg-combobox-item-wedge-color: ",";\n "])),z.gray.dark3,z.gray.dark1,z.white,z.gray.light2,z.blue.light3,z.blue.base),t){case"default":e=E(An||(An=X(["\n --lg-combobox-menu-border-radius: 4px;\n --lg-combobox-item-height: 36px;\n --lg-combobox-item-padding-y: 8px;\n --lg-combobox-item-padding-x: 12px;\n --lg-combobox-item-font-size: 14px;\n --lg-combobox-item-line-height: 21px;\n --lg-combobox-item-wedge-height: 22px;\n "])))}return I(o,e,E(Tn||(Tn=X(["\n width: ","px;\n border-radius: var(--lg-combobox-menu-border-radius);\n\n & > * {\n border-radius: inherit;\n }\n "])),a))},io=function(n){var o=n.maxHeight;return E(Rn||(Rn=X(["\n position: relative;\n width: 100%;\n margin: 0;\n padding: 0;\n font-family: ",";\n color: var(--lg-combobox-menu-color);\n background-color: var(--lg-combobox-menu-background-color);\n box-shadow: var(--lg-combobox-menu-shadow);\n border-radius: inherit;\n overflow: auto;\n min-height: var(--lg-combobox-item-height);\n max-height: ","px;\n scroll-behavior: smooth;\n"])),W.default,o)},ao=E(Wn||(Wn=X(["\n position: relative;\n margin: 0;\n padding: 0;\n"]))),lo=E(Bn||(Bn=X(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-size: var(--lg-combobox-item-font-size);\n color: var(--lg-combobox-menu-message-color);\n padding: var(--lg-combobox-item-padding-y) var(--lg-combobox-item-padding-x);\n\n & > svg {\n width: 1em;\n height: 1em;\n }\n"]))),co=function(n){return E(Un||(Un=X(["\n --lg-combobox-group-label-color: ",";\n --lg-combobox-group-border-color: ",";\n padding-top: 8px;\n border-bottom: 1px solid var(--lg-combobox-group-border-color);\n"])),n?z.gray.light1:z.gray.dark1,n?z.gray.dark1:z.gray.light1)},uo=E(Xn||(Xn=X(["\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: bold;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--lg-combobox-group-label-color);\n"])));function so(o){var r=o.label,t=o.className,i=o.children,a=e(cn).darkMode,l=v({prefix:"combobox-group"});return n.Children.count(i)>0?T("div",{className:I(co(a),t)},T("div",{className:uo,id:l},r),T("div",{role:"group","aria-labelledby":l},i)):T(n.Fragment,null)}function bo(n){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}bo.displayName="ComboboxGroup";var po=["children","label","description","placeholder","aria-label","disabled","size","darkMode","state","errorMessage","searchState","searchEmptyMessage","searchErrorMessage","searchLoadingMessage","filteredOptions","onFilter","clearable","onClear","overflow","multiselect","initialValue","onChange","value","chipTruncationLocation","chipCharacterLimit","className","usePortal","portalClassName","portalContainer","scrollContainer","popoverZIndex"];function go(o){var e=o.children,c=o.label,x=o.description,j=o.placeholder,E=void 0===j?"Select":j,S=o["aria-label"],D=o.disabled,L=void 0!==D&&D,A=o.size,R=void 0===A?"default":A,W=o.darkMode,B=void 0!==W&&W,V=o.state,X=void 0===V?"none":V,Y=o.errorMessage,$=o.searchState,q=void 0===$?"unset":$,J=o.searchEmptyMessage,Q=void 0===J?"No results found":J,_=o.searchErrorMessage,nn=void 0===_?"Could not get results!":_,on=o.searchLoadingMessage,en=void 0===on?"Loading results...":on,rn=o.filteredOptions,tn=o.onFilter,an=o.clearable,ln=void 0===an||an,sn=o.onClear,pn=o.overflow,gn=void 0===pn?"expand-y":pn,mn=o.multiselect,hn=void 0!==mn&&mn,vn=o.initialValue,xn=o.onChange,yn=o.value,wn=o.chipTruncationLocation,kn=o.chipCharacterLimit,Cn=void 0===kn?12:kn,Nn=o.className,On=o.usePortal,jn=void 0===On||On,Mn=o.portalClassName,En=o.portalContainer,In=o.scrollContainer,Sn=o.popoverZIndex,zn=U(o,po),Pn=y({prefix:"option"}),Dn=y({prefix:"chip"}),Ln=v({prefix:"combobox-input"}),Fn=v({prefix:"combobox-label"}),An=v({prefix:"combobox-menu"}),Tn=i(null),Rn=i(null),Wn=i(null),Bn=i(null),Gn=i(null),Kn=Z(l(!1),2),Vn=Kn[0],Un=Kn[1],Xn=w(Vn),eo=Z(l(null),2),co=eo[0],uo=eo[1],bo=Z(l(null),2),go=bo[0],mo=bo[1],fo=w(go),ho=Z(l(""),2),vo=ho[0],xo=ho[1],yo=w(vo),wo=Z(l(null),2),ko=wo[0],Co=wo[1],No=!s(go)&&(u(go)&&go.length>0||d(go)),Oo=r((function(n){return!hn||"string"!=typeof n&&"number"!=typeof n?!hn&&u(n)&&F.error("Error in Combobox: multiselect is set to `false`, but recieved an Array value"):F.error("Error in Combobox: multiselect is set to `true`, but recieved a ".concat(K(n),' value: "').concat(n,'"')),hn&&u(n)}),[hn]),jo=r((function(n){!L&&Bn&&Bn.current&&(Bn.current.focus(),b(n)||Bn.current.setSelectionRange(n,n))}),[L]),Mo=r((function(n){if(Oo(go)){var o=p(go);s(n)?o.length=0:go.includes(n)?o.splice(o.indexOf(n),1):(o.push(n),xo("")),mo(o),null==xn||xn(o)}else{var e=n;mo(e),null==xn||xn(e)}}),[Oo,xn,go]),Eo=function(){Wn&&Wn.current&&(Wn.current.scrollLeft=Wn.current.scrollWidth)},Io=hn&&u(go)&&go.length>0?void 0:E,So=t((function(){return bn(e)}),[e]),zo=r((function(n){var o,e;return n?null!==(o=null===(e=So.find((function(o){return o.value===n})))||void 0===e?void 0:e.displayName)&&void 0!==o?o:n:""}),[So]),Po=r((function(n){var o="string"==typeof n?n:n.value;return rn&&rn.length>0?rn.includes(o):("string"==typeof n?zo(o):n.displayName).toLowerCase().includes(vo.toLowerCase())}),[rn,zo,vo]),Do=t((function(){return So.filter(Po)}),[So,Po]),Lo=r((function(n){return!!n&&!!So.find((function(o){return o.value===n}))}),[So]),Fo=r((function(n){return Do?Do.findIndex((function(o){return o.value===n})):-1}),[Do]),Ao=r((function(n){if(Do&&Do.length>=n){var o=Do[n];return o?o.value:void 0}}),[Do]),To=r((function(){return Oo(go)?go.findIndex((function(n){var o,e;return null===(o=Dn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})):-1}),[Dn,Oo,go]),Ro=r((function(){var n,o,e,r=null===(n=Bn.current)||void 0===n?void 0:n.contains(document.activeElement),t=null===(o=Rn.current)||void 0===o?void 0:o.contains(document.activeElement),i=Oo(go)&&go.some((function(n){var o,e;return null===(o=Dn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})),a=function(){return Oo(go)?go.findIndex((function(n){var o,e;return null===(o=Dn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})):-1};return Oo(go)&&i?0===a()?"FirstChip":a()===go.length-1?"LastChip":"MiddleChip":r?"Input":t?"ClearButton":null!==(e=Tn.current)&&void 0!==e&&e.contains(document.activeElement)?"Combobox":void 0}),[Dn,Oo,go]),Wo=r((function(n){var o,e=null!==(o=null==Do?void 0:Do.length)&&void 0!==o?o:0,r=e-1>0?e-1:0,t=Fo(co);switch(n&&Vn&&(Co(null),jo()),n){case"next":var i=Ao(t+1<e?t+1:0);uo(null!=i?i:null);break;case"prev":var a=Ao(t-1>=0?t-1:r);uo(null!=a?a:null);break;case"last":var l=Ao(r);uo(null!=l?l:null);break;case"first":default:var c=Ao(0);uo(null!=c?c:null)}}),[co,Fo,Ao,Vn,jo,null==Do?void 0:Do.length]),Bo=r((function(n,o){if(Oo(go))switch(n){case"next":var e=null!=o?o:To(),r=e+1<go.length?e+1:go.length-1,t=go[r];Co(t);break;case"prev":var i=null!=o?o:To(),a=i>0?i-1:i<0?go.length-1:0,l=go[a];Co(l);break;case"first":var c=go[0];Co(c);break;case"last":var u=go[go.length-1];Co(u);break;default:Co(null)}}),[To,Oo,go]),Go=r((function(n,o){n&&uo(null);var e=Ro();switch(n){case"right":switch(e){case"Input":var r,t,i;if((null===(r=Bn.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=Bn.current)||void 0===t?void 0:t.value.length))null===(i=Rn.current)||void 0===i||i.focus();break;case"LastChip":o.preventDefault(),jo(0),Bo(null);break;case"FirstChip":case"MiddleChip":Bo("next")}break;case"left":switch(e){case"ClearButton":var a;o.preventDefault(),jo(null==Bn||null===(a=Bn.current)||void 0===a?void 0:a.value.length);break;case"Input":case"MiddleChip":case"LastChip":if(Oo(go)){var l;if("Input"===e&&0!==(null===(l=Bn.current)||void 0===l?void 0:l.selectionStart))break;Bo("prev")}}break;default:Bo(null)}}),[Ro,Oo,go,jo,Bo]);a((function(){vo!==yo&&Wo("first")}),[vo,Vn,yo,Wo]),a((function(){if(co){var n=Pn(co);if(n&&n.current&&Gn.current){var o=n.current.offsetTop,e=Gn.current,r=e.scrollTop;(o>e.offsetHeight||o<r)&&(Gn.current.scrollTop=o)}}}),[co,Pn]);var Ko=r((function(o){return n.Children.map(o,(function(n){if(P(n,"ComboboxOption")){var o=dn(n.props),e=o.value,r=o.displayName;if(Po(e)){var t=n.props,i=t.className,a=t.glyph,l=So.findIndex((function(n){return n.value===e})),c=co===e,u=Oo(go)?go.includes(e):go===e,s=Pn(e);return T(fn,{value:e,displayName:r,isFocused:c,isSelected:u,setSelected:function(){uo(e),Mo(e),jo(),e===go&&$o()},glyph:a,className:i,index:l,ref:s})}}else if(P(n,"ComboboxGroup")){var d=Ko(n.props.children);if(d&&(null==d?void 0:d.length)>0)return T(so,{label:n.props.label,className:n.props.className},Ko(d))}}))}),[So,co,Pn,Oo,Po,go,jo,Mo]),Vo=t((function(){return Ko(e)}),[e,Ko]),Ho=t((function(){if(Oo(go))return go.filter(Lo).map((function(n,o){var e=zo(n),r=ko===n,t=Dn(n);return T(Hn,{key:n,displayName:e,isFocused:r,onRemove:function(){Bo("next",o),Mo(n)},onFocus:function(){Co(n)},ref:t})}))}),[Oo,go,Lo,zo,ko,Dn,Bo,Mo]),Uo=t((function(){return T(n.Fragment,null,ln&&No&&T(M,{"aria-label":"Clear selection","aria-disabled":L,disabled:L,ref:Rn,onClick:function(n){L||(Mo(null),null==sn||sn(n),null==tn||tn(""),Vn||qo())},onFocus:re,className:_n},T(O,{glyph:"XWithCircle"})),T(O,"error"===X?{glyph:"Warning",color:z.red.base,className:oo}:{glyph:"CaretDown",className:oo}))}),[ln,No,L,X,Mo,sn,tn,Vn]),Xo=t((function(){return So.some((function(n){return n.hasGlyph}))}),[So]),Zo=r((function(){if(!Oo(go)&&go===fo){var n=Do.find((function(n){return n.displayName===vo||n.value===vo}));if(n&&!yn)mo(n.value);else{var o,e=null!==(o=zo(go))&&void 0!==o?o:"";xo(e)}}}),[zo,vo,Oo,fo,go,yn,Do]),Yo=r((function(){if(No){if(Oo(go))Eo();else if(!Oo(go)){var n,o=null!==(n=zo(go))&&void 0!==n?n:"";xo(o),$o()}}else xo("")}),[No,zo,Oo,go]);a((function(){if(vn)if(u(vn)){var n,o=null!==(n=vn.filter((function(n){return Lo(n)})))&&void 0!==n?n:[];mo(o)}else Lo(vn)&&mo(vn);else mo(function(n){return n?[]:null}(hn))}),[]),a((function(){if(!b(yn)&&yn!==yo)if(s(yn))mo(null);else if(Oo(yn)){var n=yn.filter(Lo);mo(n)}else mo(Lo(yn)?yn:null)}),[Oo,Lo,yo,yn]),a((function(){g(go,fo)||Yo()}),[Yo,fo,go]),a((function(){Vn||Xn===Vn||Zo()}),[Vn,Xn,Zo]);var $o=function(){return Un(!1)},qo=function(){return Un(!0)},Jo=Z(l(0),2),Qo=Jo[0],_o=Jo[1];a((function(){var n,o;_o(null!==(n=null===(o=Tn.current)||void 0===o?void 0:o.clientWidth)&&void 0!==n?n:0)}),[Tn,Vn,co,go]);var ne=t((function(){switch(q){case"loading":return T("span",{className:lo},T(O,{glyph:"Refresh",color:z.blue.base,className:ro}),en);case"error":return T("span",{className:lo},T(O,{glyph:"Warning",color:z.red.base}),nn);case"unset":default:return Vo&&Vo.length>0?T("ul",{className:ao},Vo):T("span",{className:lo},Q)}}),[Vo,Q,nn,en,q]),oe=k(),ee=t((function(){if(oe&&Tn.current&&Gn.current){var n=Tn.current.getBoundingClientRect(),o=n.top,e=n.bottom,r=Math.max(oe.height-e,o);return Math.min(274,r-8)}return 274}),[oe,Tn,Gn]);a((function(){}),[co]);var re=function(){uo(null)};C("mousedown",(function(n){var o,e,r=n.target;(null===(o=Gn.current)||void 0===o?void 0:o.contains(r))||(null===(e=Tn.current)||void 0===e?void 0:e.contains(r))||!1||Un(!1)}));var te=G({popoverZIndex:Sn},jn?{usePortal:jn,portalClassName:Mn,portalContainer:En,scrollContainer:In}:{usePortal:jn});return T(cn.Provider,{value:{multiselect:hn,darkMode:B,size:R,withIcons:Xo,disabled:L,chipTruncationLocation:wn,chipCharacterLimit:Cn,inputValue:vo}},T("div",H({className:I(Zn({darkMode:B,size:R,overflow:gn}),Nn)},zn),T("div",null,c&&T(m,{id:Fn,htmlFor:Ln},c),x&&T(f,null,x)),T(N,{className:$n,disabled:L,color:qn({state:X,darkMode:B})},T("div",{ref:Tn,role:"combobox","aria-expanded":Vn,"aria-controls":An,"aria-owns":An,tabIndex:-1,className:Yn,onMouseDown:function(n){L&&n.preventDefault()},onClick:function(n){if(n.target!==Bn.current){var o=0;if(Bn.current)o=n.nativeEvent.offsetX>Bn.current.offsetLeft+Bn.current.clientWidth?vo.length:0;jo(o)}},onFocus:function(){Eo(),qo()},onKeyDown:function(n){var o,e,r=null===(o=Gn.current)||void 0===o?void 0:o.contains(document.activeElement);if((null===(e=Tn.current)||void 0===e?void 0:e.contains(document.activeElement))||r){if(n.ctrlKey||n.shiftKey||n.altKey)return;var t=Ro();switch(n.keyCode){case un.Tab:switch(t){case"Input":No||($o(),Wo("first"),Bo(null));break;case"LastChip":Bo(null)}break;case un.Escape:$o(),Wo("first");break;case un.Enter:document.activeElement===Bn.current&&Vn&&!s(co)?Mo(co):document.activeElement===Rn.current&&(Mo(null),jo());break;case un.Backspace:var i;Oo(go)&&0===(null===(i=Bn.current)||void 0===i?void 0:i.selectionStart)?Bo("last"):qo();break;case un.ArrowDown:Vn&&n.preventDefault(),qo(),Wo("next");break;case un.ArrowUp:Vn&&n.preventDefault(),Wo("prev");break;case un.ArrowRight:Go("right",n);break;case un.ArrowLeft:Go("left",n);break;default:Vn||qo()}}},onTransitionEnd:function(){var n,o;_o(null!==(n=null===(o=Tn.current)||void 0===o?void 0:o.clientWidth)&&void 0!==n?n:0)},"data-disabled":L,"data-state":X},T("div",{ref:Wn,className:Jn({overflow:gn,isOpen:Vn,selection:go,value:vo})},Ho,T("input",{"aria-label":null!=S?S:c,"aria-autocomplete":"list","aria-controls":An,"aria-labelledby":Fn,ref:Bn,id:Ln,className:Qn,placeholder:Io,disabled:null!=L?L:void 0,onChange:function(n){var o=n.target.value;xo(o),null==tn||tn(o)},value:vo,autoComplete:"off"})),Uo)),"error"===X&&Y&&T("div",{className:no},Y),T(h,H({active:Vn&&!L,spacing:4,align:"bottom",justify:"middle",refEl:Tn,adjustOnMutation:!0,className:to({darkMode:B,size:R,width:Qo})},te),T("div",{id:An,role:"listbox","aria-labelledby":Fn,"aria-expanded":Vn,ref:Gn,className:io({maxHeight:ee}),onMouseDownCapture:function(n){return n.preventDefault()}},ne))))}export{go as Combobox,bo as ComboboxGroup,hn as ComboboxOption};
2
2
  //# sourceMappingURL=index.js.map