@leafygreen-ui/combobox 9.1.6 → 10.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 CHANGED
@@ -1,5 +1,43 @@
1
1
  # @leafygreen-ui/combobox
2
2
 
3
+ ## 10.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 04bb887c0: [LG-4121](https://jira.mongodb.org/browse/LG-4121): Replaces `usePortal` prop with `renderMode` prop. `renderMode="inline"` and `renderMode="portal"` are deprecated, and all popover elements should migrate to using the top layer. The old default was `usePortal=true`, and the new default is `renderMode="top-layer"`.
8
+
9
+ See [@leafygreen-ui/popover package 12.0.0 changelog](https://github.com/mongodb/leafygreen-ui/blob/main/packages/popover/CHANGELOG.md#1200) for more info.
10
+
11
+ #### Migration guide
12
+
13
+ Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance.
14
+
15
+ ##### Old
16
+
17
+ ```js
18
+ <Combobox popoverZIndex={9999} usePortal={false} />
19
+ <Combobox portalClassName="portal-class" usePortal />
20
+ ```
21
+
22
+ ##### New
23
+
24
+ ```js
25
+ <Combobox popoverZIndex={9999} renderMode="inline" />
26
+ <Combobox portalClassName="portal-class" renderMode="portal" />
27
+ ```
28
+
29
+ ### Patch Changes
30
+
31
+ - Updated dependencies [04bb887c0]
32
+
33
+ - @leafygreen-ui/chip@2.0.0
34
+ - @leafygreen-ui/hooks@8.3.0
35
+ - @leafygreen-ui/leafygreen-provider@3.2.0
36
+ - @leafygreen-ui/popover@12.0.0
37
+
38
+ - Updated dependencies [117a463f8]
39
+ - @leafygreen-ui/lib@13.8.1
40
+
3
41
  ## 9.1.6
4
42
 
5
43
  ### Patch Changes
package/README.md CHANGED
@@ -78,7 +78,7 @@ import { Combobox, ComboboxOption } from '@leafygreen-ui/combobox';
78
78
  ## Properties
79
79
 
80
80
  | Prop | Type | Description | Default |
81
- | ------------------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
81
+ | ------------------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------ |
82
82
  | `children` | `<ComboboxOption>`, `<ComboboxGroup>` | Define the Combobox Options by passing children | |
83
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
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. | |
@@ -106,7 +106,7 @@ import { Combobox, ComboboxOption } from '@leafygreen-ui/combobox';
106
106
  | `chipTruncationLocation` | `'start'`, `'middle'`, `'end'`, `'none'` | Defines where the ellipses appear in a Chip when the length exceeds the `chipCharacterLimit` | 'none' |
107
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
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` |
109
+ | `renderMode` | `'inline'` \| `'portal'` \| `'top-layer'` | Options to render the popover element <br> \* [deprecated] `'inline'` will render the popover element inline in the DOM where it's written <br> \* [deprecated] `'portal'` will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer` <br> \* `'top-layer'` will render the popover element in the top layer | `'top-layer'` | `true` |
110
110
  | `portalContainer` | `HTMLElement` \| `null` | Sets the container used for the popover's portal. | |
111
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
112
  | `portalClassName` | `string` | Passes the given className to the popover's portal container if the default portal container is being used. | |
@@ -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, successMessage, searchState, searchEmptyMessage, searchErrorMessage, searchLoadingMessage, filteredOptions, onFilter, clearable, onClear, overflow, multiselect, initialValue, inputValue: inputValueProp, onInputChange, onChange, value, chipTruncationLocation, chipCharacterLimit, className, usePortal, portalClassName, portalContainer, portalRef, 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, renderMode, portalClassName, portalContainer, portalRef, scrollContainer, popoverZIndex, ...rest }: ComboboxProps<M>): React.JSX.Element;
10
10
  export declare namespace Combobox {
11
11
  var propTypes: {
12
12
  multiselect: PropTypes.Requireable<boolean>;
@@ -35,7 +35,7 @@ export declare namespace Combobox {
35
35
  placeholder: PropTypes.Requireable<string>;
36
36
  filteredOptions: PropTypes.Requireable<(string | null | undefined)[]>;
37
37
  popoverZIndex: PropTypes.Requireable<number>;
38
- usePortal: PropTypes.Requireable<boolean>;
38
+ renderMode: PropTypes.Requireable<"inline" | "portal" | "top-layer">;
39
39
  scrollContainer: PropTypes.Requireable<PropTypes.ReactComponentLike>;
40
40
  portalContainer: PropTypes.Requireable<PropTypes.ReactComponentLike>;
41
41
  portalRef: PropTypes.Requireable<PropTypes.InferProps<{
@@ -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;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,SAAS,EACT,eAAe,EACf,aAAa,EACb,GAAG,IAAI,EACR,EAAE,aAAa,CAAC,CAAC,CAAC,qBAouClB;yBAzwCe,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4zCxB;;;GAGG"}
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;AA+EnC,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,UAAgC,EAChC,eAAe,EACf,eAAe,EACf,SAAS,EACT,eAAe,EACf,aAAa,EACb,GAAG,IAAI,EACR,EAAE,aAAa,CAAC,CAAC,CAAC,qBAouClB;yBAzwCe,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4zCxB;;;GAGG"}
@@ -1,7 +1,7 @@
1
1
  import React, { ReactNode } from 'react';
2
2
  import { type ChipProps } from '@leafygreen-ui/chip';
3
3
  import { Either, HTMLElementProps } from '@leafygreen-ui/lib';
4
- import { PortalControlProps } from '@leafygreen-ui/popover';
4
+ import { PopoverProps } from '@leafygreen-ui/popover';
5
5
  import { ComboboxSize, onChangeType, Overflow, SearchState, SelectValueType, State } from '../types';
6
6
  /**
7
7
  * Combobox Props
@@ -41,8 +41,8 @@ export interface ComboboxMultiselectProps<M extends boolean> {
41
41
  */
42
42
  overflow?: M extends true ? Overflow : undefined;
43
43
  }
44
- type PartialChipProps = Pick<ChipProps, 'chipTruncationLocation' | 'chipCharacterLimit' | 'popoverZIndex'>;
45
- export type BaseComboboxProps = Omit<HTMLElementProps<'div'>, 'onChange'> & PortalControlProps & PartialChipProps & {
44
+ type PartialChipProps = Pick<ChipProps, 'chipTruncationLocation' | 'chipCharacterLimit'>;
45
+ export type BaseComboboxProps = Omit<HTMLElementProps<'div'>, 'onChange'> & Pick<PopoverProps, 'popoverZIndex' | 'portalClassName' | 'portalContainer' | 'portalRef' | 'renderMode' | 'scrollContainer'> & PartialChipProps & {
46
46
  /**
47
47
  * Defines the Combobox Options by passing children. Must be `ComboboxOption` or `ComboboxGroup`
48
48
  */
@@ -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,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"}
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,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD,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,CAChD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GACvE,IAAI,CACF,YAAY,EACV,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,WAAW,GACX,YAAY,GACZ,iBAAiB,CACpB,GACD,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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ComboboxChip.d.ts","sourceRoot":"","sources":["../../src/ComboboxChip/ComboboxChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAWrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,eAAO,MAAM,YAAY,2FA6ExB,CAAC"}
1
+ {"version":3,"file":"ComboboxChip.d.ts","sourceRoot":"","sources":["../../src/ComboboxChip/ComboboxChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAWrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,eAAO,MAAM,YAAY,2FA2ExB,CAAC"}
@@ -1,13 +1,10 @@
1
1
  import React from 'react';
2
- import { PortalControlProps } from '@leafygreen-ui/popover';
3
2
  import { ComboboxProps } from '../Combobox';
4
- type ComboboxMenuProps = {
3
+ export declare const ComboboxMenu: React.ForwardRefExoticComponent<{
5
4
  children?: React.ReactNode;
6
5
  refEl: React.RefObject<HTMLDivElement>;
7
6
  id: string;
8
7
  labelId: string;
9
8
  menuWidth: number;
10
- } & PortalControlProps & Pick<ComboboxProps<any>, 'searchLoadingMessage' | 'searchErrorMessage' | 'searchEmptyMessage' | 'popoverZIndex'>;
11
- export declare const ComboboxMenu: React.ForwardRefExoticComponent<ComboboxMenuProps & React.RefAttributes<HTMLDivElement>>;
12
- export {};
9
+ } & Pick<ComboboxProps<any>, "searchEmptyMessage" | "searchErrorMessage" | "searchLoadingMessage"> & React.RefAttributes<HTMLDivElement>>;
13
10
  //# sourceMappingURL=ComboboxMenu.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ComboboxMenu.d.ts","sourceRoot":"","sources":["../../src/ComboboxMenu/ComboboxMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAQnD,OAAgB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGrE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAe5C,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,kBAAkB,GACpB,IAAI,CACF,aAAa,CAAC,GAAG,CAAC,EAChB,sBAAsB,GACtB,oBAAoB,GACpB,oBAAoB,GACpB,eAAe,CAClB,CAAC;AAEJ,eAAO,MAAM,YAAY,0FA2HxB,CAAC"}
1
+ {"version":3,"file":"ComboboxMenu.d.ts","sourceRoot":"","sources":["../../src/ComboboxMenu/ComboboxMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAWnD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AA0B5C,eAAO,MAAM,YAAY;eAVZ,MAAM,SAAS;WACnB,MAAM,SAAS,CAAC,cAAc,CAAC;QAClC,MAAM;aACD,MAAM;eACJ,MAAM;yIA+HlB,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 o,useCallback as a,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 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 R}from"@leafygreen-ui/lib";import{Error as X,Label as W,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 $,color as J,transitionDuration 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{descriptionClassName as te,titleClassName as oe,leftGlyphClassName as ae,InputOption as ie,InputOptionContent as le}from"@leafygreen-ui/input-option";import ce from"lodash/kebabCase";import se from"lodash/escapeRegExp";import ue from"@leafygreen-ui/checkbox";function de(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 pe(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?de(Object(r),!0).forEach((function(n){me(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):de(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function fe(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 he(e){return he="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},he(e)}function me(e,n,r){return(n=fe(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function ge(){return ge=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},ge.apply(this,arguments)}function be(e,n){if(null==e)return{};var r,t,o=function(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function ve(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function ye(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,o,a,i,l=[],c=!0,s=!1;try{if(a=(r=r.call(e)).next,0===n);else for(;!(c=(t=a.call(r)).done)&&(l.push(t.value),l.length!==n);c=!0);}catch(e){s=!0,o=e}finally{try{if(!c&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(s)throw o}}return l}}(e,n)||we(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 xe(e){return function(e){if(Array.isArray(e))return ke(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||we(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 we(e,n){if(e){if("string"==typeof e)return ke(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)?ke(e,n):void 0}}function ke(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 Ee="Input",Ce="ClearButton",Se="FirstChip",Le="LastChip",Oe="MiddleChip",Ne="Combobox",De="Menu",Me={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},je={expandY:"expand-y",scrollX:"scroll-x",expandX:"expand-x"},Ie=y,ze={Unset:"unset",Error:"error",Loading:"loading"};var Te,Pe,Ae,Fe,Re,Xe,We,Ge,Ve,He=n({multiselect:!1,size:Me.Default,withIcons:!1,disabled:!1,isOpen:!1,state:Ie.None,searchState:ze.Unset,overflow:je.expandY}),Ze=T("combobox-chip"),Ke=me(me(me(me({},Me.XSmall,16),Me.Small,U.body1.lineHeight),Me.Default,U.body1.lineHeight),Me.Large,U.body2.lineHeight),Ye=me(me(me(me({},Me.XSmall,U.body1.fontSize),Me.Small,U.body1.fontSize),Me.Default,U.body1.fontSize),Me.Large,U.body2.fontSize),Ue=me(me(me(me({},Me.XSmall,1),Me.Small,0),Me.Default,2),Me.Large,4),qe=me(me(me(me({},Me.XSmall,g(Te||(Te=ve(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),Ye[Me.XSmall],Ke[Me.XSmall],V,Ue[Me.XSmall])),Me.Small,g(Pe||(Pe=ve(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),Ye[Me.Small],Ke[Me.Small],V,Ue[Me.Small])),Me.Default,g(Ae||(Ae=ve(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),Ye[Me.Default],Ke[Me.Default],V,Ue[Me.Default])),Me.Large,g(Fe||(Fe=ve(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-inline-end: 10px;\n padding-block: ","px;\n }\n "])),Ye[Me.Large],Ke[Me.Large],V,Ue[Me.Large])),Be=e.forwardRef((function(n,o){var a,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,m=void 0===h?H.End:h,g=u.chipCharacterLimit,v=void 0===g?12:g,y=u.popoverZIndex,x=f===je.scrollX?H.None:m,w=k(o,null),E=null===(a=w.current)||void 0===a?void 0:a.querySelector("button");t((function(){l&&!p&&(null==E||E.focus())}),[p,E,l]);return e.createElement(Z,{label:i,className:b(Ze,qe[d]),role:"option","aria-selected":l,"data-testid":"lg-combobox-chip",onClick:function(e){null!=E&&E.contains(e.target)||s()},onKeyDown:function(e){p||e.key!==P.Delete&&e.key!==P.Backspace&&e.key!==P.Enter&&e.key!==P.Space||c()},onDismiss:function(){p||c()},baseFontSize:K.Body1,chipCharacterLimit:v,chipTruncationLocation:x,popoverZIndex:y,variant:Y.Gray,ref:w,disabled:p,tabIndex:-1})}));Be.displayName="ComboboxChip";var $e,Je,Qe,_e,en,nn,rn,tn,on,an,ln,cn,sn,un,dn=me(me({},A.Light,g(Re||(Re=ve(["\n padding-top: ","px;\n "])),q[2])),A.Dark,g(Xe||(Xe=ve(["\n padding-top: ","px;\n "])),q[2])),pn=g(We||(We=ve(["\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),fn=me(me({},A.Light,g(Ge||(Ge=ve(["\n color: ",";\n "])),ee.gray.dark1)),A.Dark,g(Ve||(Ve=ve(["\n color: ",";\n "])),ee.gray.light1));function hn(n){var r=n.label,t=n.className,o=n.children,a=z().theme,i=E({prefix:"combobox-group"});return e.Children.count(o)>0?e.createElement("div",{className:b(dn[a],t)},e.createElement("div",{className:b(pn,fn[a]),id:i},r),e.createElement("div",{role:"group","aria-labelledby":i},o)):e.createElement(e.Fragment,null)}function mn(e){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}mn.displayName="ComboboxGroup",mn.propTypes={className:m.string,children:m.node.isRequired,label:m.string.isRequired};var gn=me(me(me(me({},Me.XSmall,{x:12,y:8}),Me.Small,{x:12,y:8}),Me.Default,{x:12,y:8}),Me.Large,{x:12,y:8}),bn=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:384;return g($e||($e=ve(["\n width: ","px;\n overflow: hidden;\n border-radius: 12px;\n border: 1px solid;\n"])),e)},vn=me(me({},A.Light,g(Je||(Je=ve(["\n box-shadow: 0px 4px 7px ",";\n border-color: ",";\n "])),re(.85,ee.black),ee.gray.light2)),A.Dark,g(Qe||(Qe=ve(["\n box-shadow: 0px 4px 7px ",";\n border-color: ",";\n "])),re(.85,ee.black),ee.gray.dark2)),yn=g(_e||(_e=ve(["\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);me(me({},A.Light,g(en||(en=ve(["\n color: ",";\n background-color: ",";\n "])),ee.black,ee.white)),A.Dark,g(nn||(nn=ve(["\n color: ",";\n background-color: ",";\n "])),ee.gray.light1,ee.gray.dark3));var xn,wn=function(e){return g(rn||(rn=ve(["\n background-color: ",";\n"])),J[e].background.primary.default)},kn=g(tn||(tn=ve(["\n position: relative;\n margin: 0;\n padding: 0;\n"]))),En=g(on||(on=ve(["\n font-family: inherit;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"]))),Cn=me(me({},A.Light,g(an||(an=ve(["\n color: ",";\n "])),ee.gray.dark3)),A.Dark,g(ln||(ln=ve(["\n color: ",";\n "])),ee.gray.light3)),Sn=function(e){return g(cn||(cn=ve(["\n font-size: ","px;\n line-height: ","px;\n padding: ","px ","px;\n"])),Ye[e],Ke[e],gn[e].y,gn[e].x)},Ln=v(sn||(sn=ve(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]))),On=g(un||(un=ve(["\n animation: "," 1.5s linear infinite;\n"])),Ln),Nn=["children","id","refEl","labelId","menuWidth","searchLoadingMessage","searchErrorMessage","searchEmptyMessage"],Dn=e.forwardRef((function(n,t){var a=n.children,i=n.id,l=n.refEl,c=n.labelId,s=n.menuWidth,u=n.searchLoadingMessage,d=n.searchErrorMessage,p=n.searchEmptyMessage,f=be(n,Nn),m=z(),v=m.darkMode,y=m.theme,x=r(He),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=o((function(){var n=b(En,Cn[y],Sn(E)),r=b(En,Sn(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:On}),u);case"error":return e.createElement(X,{className:r},e.createElement(D,{glyph:"Warning",color:v?ee.red.light1:ee.red.base}),e.createElement("span",null,d));default:return a&&"object"===he(a)&&"length"in a&&a.length>0?e.createElement("ul",{className:kn},a):e.createElement("span",{className:n},p)}}),[y,E,L,v,u,d,a,p]);return e.createElement(ne,ge({active:S&&!w,spacing:4,align:"bottom",justify:"middle",refEl:l,adjustOnMutation:!0,className:b(bn(s),vn[y])},f),e.createElement("div",{ref:O,id:i,role:"listbox","aria-labelledby":c,"aria-expanded":S,className:b(yn,wn(y),g(xn||(xn=ve(["\n max-height: ",";\n "])),M)),onMouseDownCapture:function(e){return e.preventDefault()}},j))}));Dn.displayName="ComboboxMenu";var Mn,jn,In,zn,Tn,Pn,An,Fn,Rn,Xn,Wn,Gn,Vn,Hn,Zn,Kn,Yn,Un,qn,Bn,$n=function(e){var n=e.scrollHeight;return e.scrollTop<n-e.clientHeight},Jn=function(e){var n,r=e.value,t=e.displayName;return{value:null!=r?r:ce(t),displayName:null!==(n=null!=t?t:r)&&void 0!==n?n:""}},Qn=function n(r){return e.Children.toArray(r).reduce((function(e,r){if(F(r,"ComboboxOption")){var t=Jn(r.props),o=t.value,a=t.displayName,i=r.props,l=i.glyph,c=i.disabled;return[].concat(xe(e),[{value:o,displayName:a,isDisabled:!!c,hasGlyph:!!l}])}if(F(r,"ComboboxGroup")){var s=r.props.children;if(s)return[].concat(xe(e),xe(n(s)))}}),[])},_n=function(e,n){if(e)return n.find((function(n){return n.value===e}))},er=function(e,n){var r,t;return e?null!==(r=null===(t=_n(e,n))||void 0===t?void 0:t.displayName)&&void 0!==r?r:e:""},nr=g(Mn||(Mn=ve(["\n .",", ."," {\n font-size: ","px;\n line-height: 20px;\n }\n"])),te,oe,U.body2.fontSize),rr=me(me(me(me({},Me.XSmall,g(jn||(jn=ve(["\n min-width: ","px;\n "])),q[3])),Me.Small,g(In||(In=ve(["\n min-width: ","px;\n "])),q[3])),Me.Default,g(zn||(zn=ve(["\n min-width: ","px;\n "])),q[3])),Me.Large,g(Tn||(Tn=ve(["\n min-width: ","px;\n "])),q[4])),tr=g(Pn||(Pn=ve(["\n pointer-events: none;\n gap: 0;\n\n label {\n gap: 0;\n align-items: center;\n }\n"])));g(An||(An=ve(["\n pointer-events: none;\n"])));var or=function(e){return g(Fn||(Fn=ve(["\n font-weight: ",";\n"])),e?B.bold:B.regular)},ar=me(me({},A.Light,g(Rn||(Rn=ve(["\n color: ",";\n "])),ee.gray.dark1)),A.Dark,g(Xn||(Xn=ve(["\n color: ",";\n "])),ee.gray.base)),ir=me(me({},A.Light,g(Wn||(Wn=ve(["\n color: ",";\n "])),ee.blue.dark1)),A.Dark,g(Gn||(Gn=ve(["\n color: ",";\n "])),ee.blue.light3)),lr=me(me({},A.Light,g(Vn||(Vn=ve(["\n color: ",";\n "])),ee.gray.light1)),A.Dark,g(Hn||(Hn=ve(["\n color: ",";\n "])),ee.gray.dark1)),cr=me(me({},A.Light,g(Zn||(Zn=ve(["\n color: ",";\n "])),ee.blue.base)),A.Dark,g(Kn||(Kn=ve(["\n color: ",";\n "])),ee.blue.light1)),sr=me(me({},A.Light,g(Yn||(Yn=ve(["\n color: ",";\n "])),ee.gray.light1)),A.Dark,g(Un||(Un=ve(["\n color: ",";\n "])),ee.gray.dark1)),ur=g(qn||(qn=ve(["\n ."," {\n align-self: baseline;\n position: relative;\n // aligns the checkbox with the option name\n top: 1px;\n }\n"])),ae),dr=g(Bn||(Bn=ve(["\n ."," {\n // aligns the checkbox with the option name\n top: 3px;\n }\n"])),ae),pr=["glyph","isSelected","displayName","isFocused","setSelected","className","description","value","onClick","disabled"],fr=e.forwardRef((function(n,t){var i=n.glyph,l=n.isSelected,c=n.displayName,s=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=be(n,pr),y=z(),x=y.darkMode,w=y.theme,C=r(He),S=C.multiselect,L=C.size,O=C.withIcons,N=C.inputValue,j=k(t,null),I=E({prefix:"combobox-option-text"}),T=a((function(e){e.stopPropagation(),g||(u(),null==h||h(e,f))}),[g,h,u,f]),P=o((function(){return function(n){var r=n.withIcons,t=n.isSelected,o=n.glyph,a=n.optionTextId,i=n.disabled,l=n.darkMode,c=n.size,s=n.multiselect,u=n.theme,d=n.isFocused;o&&!M(o)&&console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",o);var p=o&&M(o)?e.cloneElement(o,pe(pe({},o.props),{},{className:b(ar[u],me(me({},ir[u],d),lr[u],i),o.props.className)})):e.createElement(e.Fragment,null),f=e.createElement(ue,{"aria-labelledby":a,checked:t,tabIndex:-1,disabled:i,darkMode:l,className:tr}),h=e.createElement(D,{glyph:"Checkmark",className:b(rr[c],cr[u],me({},sr[u],i))});return{leftGlyph:s?r?p:f:r?p:t?h:null,rightGlyph:s?r&&f:r&&t&&h}}({withIcons:O,isSelected:l,glyph:i,theme:w,darkMode:x,size:L,disabled:g,multiselect:S,optionTextId:I,isFocused:s})}),[x,g,i,l,S,I,L,w,O,s]),A=P.leftGlyph,F=P.rightGlyph,R=S&&!O;return e.createElement(ie,ge({},v,{as:"li",ref:j,highlighted:s,disabled:g,"aria-label":c,darkMode:x,className:b(me(me(me({},nr,L===Me.Large),ur,R),dr,R&&L===Me.Large),d),onClick:T,onKeyDown:T}),e.createElement(le,{leftGlyph:A,rightGlyph:F,description:p},e.createElement("span",{id:I,className:or(l)},function(n,r,t){if(r&&t){var o=se(r),a=new RegExp(o,"gi"),i=n.matchAll(a);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,m=p+f+h,g=new Array(h).fill("");g[0]=e.createElement(t,{key:m},f),l.splice.apply(l,[p,h].concat(xe(g)))}return e.createElement(e.Fragment,null,l)}return e.createElement(e.Fragment,null,n)}return e.createElement(e.Fragment,null,n)}(c,N,"strong"))))}));function hr(e){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}fr.displayName="ComboboxOption",hr.displayName="ComboboxOption",hr.propTypes={displayName:m.string,value:m.string,glyph:m.node,disabled:m.bool,className:m.string,description:m.string,onClick:m.func};var mr,gr,br,vr,yr,xr,wr,kr,Er,Cr,Sr,Lr,Or,Nr,Dr,Mr,jr,Ir,zr,Tr,Pr,Ar,Fr,Rr,Xr,Wr,Gr,Vr,Hr,Zr,Kr,Yr,Ur,qr=function(e){return!h(e)&&!p(e)&&(f(e)||u(e)&&e.length>0)},Br=function(e){return Ke[e]+2*Ue[e]},$r=q[100],Jr=me(me(me(me({},Me.XSmall,22),Me.Small,28),Me.Default,36),Me.Large,48),Qr=function(e){return(Jr[e]-Br(e)-2)/2},_r=me(me(me(me({},Me.XSmall,{y:Qr(Me.XSmall),xLeftWithChip:q[25],xLeftWithoutChip:q[200],xRight:q[100]}),Me.Small,{y:Qr(Me.Small),xLeftWithChip:q[100],xLeftWithoutChip:q[200],xRight:q[100]}),Me.Default,{y:Qr(Me.Default),xLeftWithChip:q[150],xLeftWithoutChip:q[300],xRight:q[200]}),Me.Large,{y:Qr(Me.Large),xLeftWithChip:q[300],xLeftWithoutChip:q[300],xRight:q[200]}),et=q[400],nt=function(e){return g(mr||(mr=ve(["\n font-family: ",";\n width: 100%;\n min-width: ","px;\n "])),$.default,Ye[e]+2*_r[e].xLeftWithChip+et+2)},rt=g(gr||(gr=ve(["\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],Q.default,Q.default),tt=me(me({},A.Light,g(br||(br=ve(["\n color: ",";\n background-color: ",";\n "])),J.light.text.primary.default,J.light.background.primary.default)),A.Dark,g(vr||(vr=ve(["\n color: ",";\n background-color: ",";\n "])),J.dark.text.primary.default,ee.gray.dark4)),ot=function(e,n){return g(yr||(yr=ve(["\n padding-top: ","px;\n padding-bottom: ","px;\n padding-left: ",";\n padding-right: ","px;\n"])),_r[e].y,_r[e].y,"".concat(n?_r[e].xLeftWithChip:_r[e].xLeftWithoutChip,"px"),_r[e].xRight)},at=function(e){return g(xr||(xr=ve(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),J[e].text.disabled.default,J[e].background.disabled.default,J[e].border.disabled.default)},it=function(e){return me(me(me({},Ie.Error,g(wr||(wr=ve(["\n border-color: ",";\n "])),J[e].border.error.default)),Ie.None,g(kr||(kr=ve(["\n border-color: ",";\n "])),J[e].border.primary.default)),Ie.Valid,g(Er||(Er=ve(["\n border-color: ",";\n "])),J[e].border.success.default))},lt=me(me({},A.Light,g(Cr||(Cr=ve(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),_[A.Light].input)),A.Dark,g(Sr||(Sr=ve(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),_[A.Dark].input)),ct=g(Lr||(Lr=ve(["\n display: flex;\n align-items: center;\n"]))),st=me(me(me(me({},Me.XSmall,g(Or||(Or=ve(["\n gap: ","px;\n "])),q[100])),Me.Small,g(Nr||(Nr=ve(["\n gap: ","px;\n "])),q[200])),Me.Default,g(Dr||(Dr=ve(["\n gap: ","px;\n "])),q[200])),Me.Large,g(Mr||(Mr=ve(["\n gap: ","px;\n "])),q[200])),ut=function(e){var n=e.overflow,r=e.size,t=g(jr||(jr=ve(["\n flex-grow: 1;\n width: 100%;\n "])));switch(n){case je.scrollX:return g(Ir||(Ir=ve(["\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,Br(r),Ze);case je.expandY:return g(zr||(zr=ve(["\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,$r,Br(r),3*Br(r),$r)}},dt=g(Tr||(Tr=ve(["\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]),pt=me(me({},A.Light,g(Pr||(Pr=ve(["\n &::placeholder {\n color: ",";\n }\n "])),ee.gray.base)),A.Dark,g(Ar||(Ar=ve(["\n &::placeholder {\n color: ",";\n }\n "])),ee.gray.dark1)),ft=me(me({},A.Light,g(Fr||(Fr=ve(["\n &::placeholder {\n color: ",";\n }\n "])),ee.gray.base)),A.Dark,g(Rr||(Rr=ve(["\n &::placeholder {\n color: ",";\n }\n "])),ee.gray.dark1)),ht=function(e){return g(Xr||(Xr=ve(["\n height: ","px;\n font-size: ","px;\n line-height: ","px;\n min-width: ","px;\n"])),Br(e),Ye[e],Ke[e],Ye[e])},mt=function(e){return g(Wr||(Wr=ve(["\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 g(Gr||(Gr=ve(["\n width: ","px;\n max-width: 100%;\n "])),t*Ye[e])},bt=g(Vr||(Vr=ve(["\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"])),et/2),vt=g(Hr||(Hr=ve(["\n height: ","px;\n width: ","px;\n"])),et,et),yt=g(Zr||(Zr=ve(["\n margin-bottom: ","px;\n display: flex;\n flex-direction: column;\n"])),q[100]),xt=g(Kr||(Kr=ve(["\n font-size: ","px;\n line-height: ","px;\n"])),U.large.fontSize,U.large.lineHeight),wt=me(me({},A.Light,g(Yr||(Yr=ve(["\n ::after {\n box-shadow: 0px 0px 7px 5px ",";\n }\n "])),re(.85,ee.black))),A.Dark,g(Ur||(Ur=ve(["\n ::after {\n width: 95%;\n box-shadow: 0px -7px 12px 5px rgb(0 0 0 / 50%);\n }\n "])))),kt=function(e){return J[e].icon.primary.default},Et=function(e){return J[e].icon.disabled.default},Ct=["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","portalRef","scrollContainer","popoverZIndex"],St=["className","glyph","disabled"];function Lt(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?Me.Default:T,X=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,oe=n.clearable,ae=void 0===oe||oe,ie=n.onClear,le=n.overflow,ce=void 0===le?je.expandY:le,se=n.multiselect,ue=void 0!==se&&se,de=n.initialValue,fe=n.inputValue,ve=n.onInputChange,xe=n.onChange,we=n.value,ke=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,Re=n.portalContainer,Xe=n.portalRef,We=n.scrollContainer,Ge=n.popoverZIndex,Ve=be(n,Ct),Ze=z(X),Ke=Ze.darkMode,Ye=Ze.theme,Ue=S({prefix:"option"}),qe=S({prefix:"chip"}),$e=E({prefix:"combobox-input"}),Je=E({prefix:"combobox-label"}),Qe=E({prefix:"combobox-menu"}),_e=i(null),en=i(null),nn=i(null),rn=i(null),tn=i(null),on=ye(l(!1),2),an=on[0],ln=on[1],cn=L(an),sn=ye(l(null),2),un=sn[0],dn=sn[1],pn=ye(l(null),2),fn=pn[0],mn=pn[1],gn=L(fn),bn=ye(l(null!=fe?fe:""),2),vn=bn[0],yn=bn[1];t((function(){h(fe)||yn(fe)}),[fe]);var xn=function(e){yn(e)},wn=L(vn),kn=ye(l(null),2),En=kn[0],Cn=kn[1],Sn=ye(l(!1),2),Ln=Sn[0],On=Sn[1],Nn=ue&&u(fn)&&fn.length>0?void 0:y,Mn=function(){return ln(!1)},jn=function(){return ln(!0)},In=o((function(){return Qn(r)}),[r]),zn=a((function(e){return!ue||"string"!=typeof e&&"number"!=typeof e?!ue&&u(e)&&R.error("Error in Combobox: multiselect is set to `false`, but received an Array value"):R.error("Error in Combobox: multiselect is set to `true`, but received a ".concat(he(e),' value: "').concat(e,'"')),ue&&u(e)}),[ue]),Tn=a((function(e){!M&&rn&&rn.current&&(rn.current.focus(),h(e)||rn.current.setSelectionRange(e,e))}),[M]),Pn=a((function(e){if(zn(fn)){var n=c(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",xn("")),mn(n),null==r||r(n,t)}else{var o=e,a=xe;mn(o),null==a||a(o)}}),[zn,xe,fn]),An=a((function(e){var n,r,t,o;return function(e,n){return Array.isArray(n)?n.includes(e):e===n}((r=In,(n=e)?null!==(t=null===(o=r.find((function(e){return e.displayName===n})))||void 0===o?void 0:o.value)&&void 0!==t?t:n:""),fn)}),[In,fn]),Fn=a((function(e){var n="string"==typeof e?e:e.value;return re&&re.length>0?re.includes(n):!!An(vn)||("string"==typeof e?er(n,In):e.displayName).toLowerCase().includes(vn.toLowerCase())}),[re,An,vn,In]),Rn=o((function(){return In.filter(Fn)}),[In,Fn]),Xn=a((function(e){return!!e&&!!In.find((function(n){return n.value===e}))}),[In]),Wn=a((function(e){return Rn?Rn.findIndex((function(n){return n.value===e})):-1}),[Rn]),Gn=a((function(e){if(Rn&&Rn.length>=e){var n=Rn[e];return n?n.value:void 0}}),[Rn]),Vn=a((function(){return zn(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,zn,fn]),Hn=ye(l(),2),Zn=Hn[0],Kn=Hn[1],Yn=a((function(e){var n,r=null!==(n=null==Rn?void 0:Rn.length)&&void 0!==n?n:0,t=r-1>0?r-1:0,o=Wn(un);switch(e&&an&&(Cn(null),Tn()),e){case"next":var a=Gn(o+1<r?o+1:0);dn(null!=a?a:null);break;case"prev":var i=Gn(o-1>=0?o-1:t);dn(null!=i?i:null);break;case"last":var l=Gn(t);dn(null!=l?l:null);break;default:var c=Gn(0);dn(null!=c?c:null)}}),[un,Wn,Gn,an,Tn,null==Rn?void 0:Rn.length]),Un=a((function(e,n){if(zn(fn))switch(e){case"next":var r=null!=n?n:Vn(),t=r+1<fn.length?r+1:fn.length-1,o=fn[t];Cn(o);break;case"prev":var a=null!=n?n:Vn(),i=a>0?a-1:a<0?fn.length-1:0,l=fn[i];Cn(l);break;case"first":var c=fn[0];Cn(c);break;case"last":var s=fn[fn.length-1];Cn(s);break;default:Cn(null)}}),[Vn,zn,fn]),qn=a((function(e,n){switch(e&&dn(null),e){case"right":switch(Zn){case Ee:var r,t,o;if((null===(r=rn.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=rn.current)||void 0===t?void 0:t.value.length))null===(o=en.current)||void 0===o||o.focus();break;case Se:case Oe:case Le:if(Zn===Le||1===(null==fn?void 0:fn.length)){Tn(0),Un(null),n.preventDefault();break}Un("next")}break;case"left":switch(Zn){case Ce:var a;n.preventDefault(),Tn(null==rn||null===(a=rn.current)||void 0===a?void 0:a.value.length);break;case Ee:case Oe:case Le:if(zn(fn)){var i;if(Zn===Ee&&0!==(null===(i=rn.current)||void 0===i?void 0:i.selectionStart))break;Un("prev")}}break;default:Un(null)}}),[Zn,zn,fn,Tn,Un]);t((function(){vn!==wn&&Yn("first")}),[vn,an,wn,Yn]),O(un?Ue(un):void 0,tn);var Bn=a((function(n){if(F(n,"ComboboxOption")){var r=Jn(n.props),t=r.value,o=r.displayName;if(Fn(t)){var a=n.props,i=a.className,l=a.glyph,c=a.disabled,s=be(a,St),u=In.findIndex((function(e){return e.value===t})),d=un===t,p=zn(fn)?fn.includes(t):fn===t,f=Ue(t);return e.createElement(fr,ge({},s,{value:t,displayName:o,isFocused:d,isSelected:p,disabled:c,setSelected:function(){dn(t),Pn(t),Tn(),t===fn&&Mn()},glyph:l,className:i,index:u,ref:f}))}}else if(F(n,"ComboboxGroup")){var h=e.Children.map(n.props.children,Bn);if(h&&(null==h?void 0:h.length)>0)return e.createElement(hn,{label:n.props.label,className:n.props.className},e.Children.map(h,Bn))}}),[In,Ue,un,zn,fn,Tn,Fn,Pn]),nr=o((function(){return e.Children.map(r,Bn)}),[r,Bn]),rr=o((function(){if(zn(fn))return fn.filter(Xn).map((function(n,r){var t=er(n,In),o=En===n,a=qe(n),i=r>=fn.length-1;return e.createElement(Be,{key:n,displayName:t,isFocused:o,onRemove:function(){i?(Tn(),Un(null)):Un("next",r),Pn(n)},onFocus:function(){Cn(n)},ref:a})}))}),[zn,fn,Xn,In,En,qe,Pn,Tn,Un]),tr=o((function(){return In.some((function(e){return e.hasGlyph}))}),[In]),or=a((function(){var e=Rn.find((function(e){return e.displayName===vn||e.value===vn}));if(!we&&e)Pn(e.value);else if(!zn(fn)){var n,r=null!==(n=er(fn,In))&&void 0!==n?n:gn;xn(r)}}),[In,vn,zn,gn,fn,Pn,we,Rn]),ar=a((function(){if(qr(fn)){if(zn(fn))gr(ce);else if(!zn(fn)){var e,n=null!==(e=er(fn,In))&&void 0!==e?e:"";xn(n),Mn()}}else xn("")}),[In,zn,fn,ce]);t((function(){if(de)if(u(de)){var e,n=null!==(e=de.filter((function(e){return Xn(e)})))&&void 0!==e?e:[];mn(n)}else Xn(de)&&mn(de);else mn(function(e){return e?[]:null}(ue))}),[]),t((function(){if(!h(we)&&we!==wn)if(p(we))mn(null);else if(zn(we)){var e=we.filter(Xn);mn(e)}else mn(Xn(we)?we:null)}),[zn,Xn,wn,we]),t((function(){!h(gn)&&(u(fn)&&!p(gn)||f(fn)||p(fn))&&!d(fn,gn)&&ar()}),[ar,gn,fn]),t((function(){!an&&cn&&or()}),[an,cn,or]);var ir=ye(l(0),2),lr=ir[0],cr=ir[1];t((function(){var e,n;cr(null!==(e=null===(n=_e.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)}),[_e,an,un,fn]);N(Mn,[tn,_e],an);var sr=zn(fn)&&!!fn.length,ur=s((function(e){On($n(e.target))}),50,{leading:!0}),dr=a((function(e){ce===je.expandY&&ur(e)}),[ur,ce]);t((function(){nn.current&&On($n(nn.current))}),[]);var pr,hr=pe({popoverZIndex:Ge},Ae?{usePortal:Ae,portalClassName:Fe,portalContainer:Re,portalRef:Xe,scrollContainer:We}:{usePortal:Ae}),mr={disabled:M,errorMessage:K,size:A,state:H,successMessage:U};return e.createElement(I,{darkMode:Ke},e.createElement(He.Provider,{value:{multiselect:ue,size:A,withIcons:tr,disabled:M,isOpen:an,state:H,searchState:B,chipTruncationLocation:ke,chipCharacterLimit:ze,inputValue:vn,overflow:ce,popoverZIndex:Ge}},e.createElement("div",ge({className:b(nt(A),Te)},Ve),(m||g)&&e.createElement("div",{className:yt},m&&e.createElement(W,{id:Je,htmlFor:$e,darkMode:Ke,disabled:M,className:b(me({},xt,A===Me.Large))},m),g&&e.createElement(G,{darkMode:Ke,disabled:M,className:b(me({},xt,A===Me.Large))},g)),e.createElement("div",{ref:_e,role:"combobox","aria-expanded":an,"aria-controls":Qe,"aria-owns":Qe,tabIndex:-1,onMouseDown:function(e){M&&e.preventDefault()},onClick:function(e){if(e.target!==rn.current){var n=0;if(rn.current)n=e.nativeEvent.offsetX>rn.current.offsetLeft+rn.current.clientWidth?vn.length:0;Tn(n)}jn()},onFocus:function(e){gr(ce),Kn(function(e){var n,r,t,o;if(!e)return;if(null!==(n=rn.current)&&void 0!==n&&n.contains(e))return Ee;if(null!==(r=en.current)&&void 0!==r&&r.contains(e))return Ce;var a=zn(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(zn(fn)){if(0===a)return Se;if(a===fn.length-1)return Le;if(a>0)return Oe}if(null!==(t=tn.current)&&void 0!==t&&t.contains(e))return De;if(null!==(o=_e.current)&&void 0!==o&&o.contains(e))return Ne}(e.target))},onKeyDown:function(e){var n,r,t=null===(n=tn.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(r=_e.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(Zn){case"Input":qr(fn)||(Mn(),Yn("first"),Un(null));break;case"LastChip":Un(null)}break;case P.Escape:Mn(),Yn("first");break;case P.Enter:an?!an||Zn!==Ee||p(un)||function(e){if("string"==typeof e){var n=_n(e,In);return!(null==n||!n.isDisabled)}return!!e.isDisabled}(un)?Zn===Ce&&(Pn(null),Tn()):Pn(un):jn();break;case P.Backspace:var o;if(zn(fn))"Input"===Zn&&0===(null===(o=rn.current)||void 0===o?void 0:o.selectionStart)&&Un("last");jn();break;case P.ArrowDown:an?(e.preventDefault(),Yn("next")):jn();break;case P.ArrowUp:an?(e.preventDefault(),Yn("prev")):jn();break;case P.ArrowRight:qn("right",e);break;case P.ArrowLeft:qn("left",e);break;default:an||jn()}}},onTransitionEnd:function(){var e,n;cr(null!==(e=null===(n=_e.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)},className:b(rt,tt[Ye],ot(A,sr),it(Ye)[H],me(me(me({},lt[Ye],(pr=Ee,pr===Zn)),at(Ye),M),wt[Ye],Ln))},e.createElement("div",{onScroll:dr,ref:nn,className:ut({size:A,overflow:ce})},rr,e.createElement("input",{"aria-label":null!=k?k:m,"aria-autocomplete":"list","aria-controls":Qe,"aria-labelledby":Je,ref:rn,id:$e,className:b(dt,ht(A),pt[Ye],mt(an),me(me({},gt(A,vn),zn(fn)),ft[Ye],M)),placeholder:Nn,"aria-disabled":M,readOnly:M,onChange:function(e){xn(e.target.value),null==te||te(e.target.value),null==ve||ve(e)},value:vn,autoComplete:"off"})),e.createElement("div",{className:b(ct,st[A])},ae&&qr(fn)&&!M&&e.createElement(j,{"aria-label":"Clear selection",disabled:M,ref:en,onClick:function(e){M||(e.stopPropagation(),Pn(null),null==ie||ie(e),null==te||te(""),Tn())},onFocus:function(){dn(null)},className:b(bt),darkMode:Ke},e.createElement(D,{glyph:"XWithCircle"})),e.createElement(D,{glyph:"CaretDown",className:vt,fill:b(me(me({},kt(Ye),!M),Et(Ye),M))}))),e.createElement(w,mr),e.createElement(Dn,ge({id:Qe,labelId:Je,refEl:_e,ref:tn,menuWidth:lr,searchLoadingMessage:ne,searchErrorMessage:_,searchEmptyMessage:J},hr),nr))));function gr(e){nn&&nn.current&&(e===je.scrollX&&(nn.current.scrollLeft=nn.current.scrollWidth),e===je.expandY&&(nn.current.scrollTop=nn.current.scrollHeight))}}Lt.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(je)),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(ze)),errorMessage:m.string,state:m.oneOf(Object.values(Ie)),size:m.oneOf(Object.values(Me)),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,portalRef:m.shape({current:"undefined"!=typeof window?m.instanceOf(Element):m.any}),portalClassName:m.string};export{Lt as Combobox,mn as ComboboxGroup,hr as ComboboxOption};
1
+ import e,{createContext as n,useContext as r,useEffect as t,useMemo as o,useCallback as a,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 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 C,useAvailableSpace as E,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,PopoverPropsProvider as T}from"@leafygreen-ui/leafygreen-provider";import{createUniqueClassName as A,keyMap as F,Theme as R,isComponentType as X,consoleOnce as W}from"@leafygreen-ui/lib";import P,{RenderMode as G,getPopoverRenderModeProps as V,DismissMode as H}from"@leafygreen-ui/popover";import{Error as K,Label as Y,Description as U}from"@leafygreen-ui/typography";import{chipTextClassName as Z,TruncationLocation as q,Chip as B,BaseFontSize as $,Variant as J}from"@leafygreen-ui/chip";import{typeScales as Q,spacing as _,fontWeights as ee,fontFamilies as ne,color as re,transitionDuration as te,focusRing as oe}from"@leafygreen-ui/tokens";import{palette as ae}from"@leafygreen-ui/palette";import{transparentize as ie}from"polished";import{descriptionClassName as le,titleClassName as ce,leftGlyphClassName as se,InputOption as ue,InputOptionContent as de}from"@leafygreen-ui/input-option";import pe from"lodash/kebabCase";import fe from"lodash/escapeRegExp";import he from"@leafygreen-ui/checkbox";function me(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 ge(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?me(Object(r),!0).forEach((function(n){ye(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):me(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function be(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 ve(e){return ve="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},ve(e)}function ye(e,n,r){return(n=be(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function xe(){return xe=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},xe.apply(this,arguments)}function we(e,n){if(null==e)return{};var r,t,o=function(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function ke(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function Ce(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,o,a,i,l=[],c=!0,s=!1;try{if(a=(r=r.call(e)).next,0===n);else for(;!(c=(t=a.call(r)).done)&&(l.push(t.value),l.length!==n);c=!0);}catch(e){s=!0,o=e}finally{try{if(!c&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(s)throw o}}return l}}(e,n)||Se(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 Ee(e){return function(e){if(Array.isArray(e))return Le(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||Se(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 Se(e,n){if(e){if("string"==typeof e)return Le(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)?Le(e,n):void 0}}function Le(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 Oe="Input",Ne="ClearButton",De="FirstChip",Me="LastChip",je="MiddleChip",Ie="Combobox",ze="Menu",Te={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},Ae={expandY:"expand-y",scrollX:"scroll-x",expandX:"expand-x"},Fe=y,Re={Unset:"unset",Error:"error",Loading:"loading"};var Xe,We,Pe,Ge,Ve,He,Ke,Ye,Ue,Ze=n({multiselect:!1,size:Te.Default,withIcons:!1,disabled:!1,isOpen:!1,state:Fe.None,searchState:Re.Unset,overflow:Ae.expandY}),qe=A("combobox-chip"),Be=ye(ye(ye(ye({},Te.XSmall,16),Te.Small,Q.body1.lineHeight),Te.Default,Q.body1.lineHeight),Te.Large,Q.body2.lineHeight),$e=ye(ye(ye(ye({},Te.XSmall,Q.body1.fontSize),Te.Small,Q.body1.fontSize),Te.Default,Q.body1.fontSize),Te.Large,Q.body2.fontSize),Je=ye(ye(ye(ye({},Te.XSmall,1),Te.Small,0),Te.Default,2),Te.Large,4),Qe=ye(ye(ye(ye({},Te.XSmall,g(Xe||(Xe=ke(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),$e[Te.XSmall],Be[Te.XSmall],Z,Je[Te.XSmall])),Te.Small,g(We||(We=ke(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),$e[Te.Small],Be[Te.Small],Z,Je[Te.Small])),Te.Default,g(Pe||(Pe=ke(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),$e[Te.Default],Be[Te.Default],Z,Je[Te.Default])),Te.Large,g(Ge||(Ge=ke(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-inline-end: 10px;\n padding-block: ","px;\n }\n "])),$e[Te.Large],Be[Te.Large],Z,Je[Te.Large])),_e=e.forwardRef((function(n,o){var a,i=n.displayName,l=n.isFocused,c=n.onRemove,s=n.onFocus,u=r(Ze),d=u.size,p=u.disabled,f=u.overflow,h=u.chipTruncationLocation,m=void 0===h?q.End:h,g=u.chipCharacterLimit,v=void 0===g?12:g,y=f===Ae.scrollX?q.None:m,x=k(o,null),w=null===(a=x.current)||void 0===a?void 0:a.querySelector("button");t((function(){l&&!p&&(null==w||w.focus())}),[p,w,l]);return e.createElement(B,{label:i,className:b(qe,Qe[d]),role:"option","aria-selected":l,"data-testid":"lg-combobox-chip",onClick:function(e){null!=w&&w.contains(e.target)||s()},onKeyDown:function(e){p||e.key!==F.Delete&&e.key!==F.Backspace&&e.key!==F.Enter&&e.key!==F.Space||c()},onDismiss:function(){p||c()},baseFontSize:$.Body1,chipCharacterLimit:v,chipTruncationLocation:y,variant:J.Gray,ref:x,disabled:p,tabIndex:-1})}));_e.displayName="ComboboxChip";var en,nn,rn,tn,on,an,ln,cn,sn,un,dn,pn,fn,hn,mn=ye(ye({},R.Light,g(Ve||(Ve=ke(["\n padding-top: ","px;\n "])),_[2])),R.Dark,g(He||(He=ke(["\n padding-top: ","px;\n "])),_[2])),gn=g(Ke||(Ke=ke(["\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"])),ee.bold),bn=ye(ye({},R.Light,g(Ye||(Ye=ke(["\n color: ",";\n "])),ae.gray.dark1)),R.Dark,g(Ue||(Ue=ke(["\n color: ",";\n "])),ae.gray.light1));function vn(n){var r=n.label,t=n.className,o=n.children,a=z().theme,i=C({prefix:"combobox-group"});return e.Children.count(o)>0?e.createElement("div",{className:b(mn[a],t)},e.createElement("div",{className:b(gn,bn[a]),id:i},r),e.createElement("div",{role:"group","aria-labelledby":i},o)):e.createElement(e.Fragment,null)}function yn(e){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}yn.displayName="ComboboxGroup",yn.propTypes={className:m.string,children:m.node.isRequired,label:m.string.isRequired};var xn=ye(ye(ye(ye({},Te.XSmall,{x:12,y:8}),Te.Small,{x:12,y:8}),Te.Default,{x:12,y:8}),Te.Large,{x:12,y:8}),wn=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:384;return g(en||(en=ke(["\n width: ","px;\n overflow: hidden;\n border-radius: 12px;\n border: 1px solid;\n"])),e)},kn=ye(ye({},R.Light,g(nn||(nn=ke(["\n box-shadow: 0px 4px 7px ",";\n border-color: ",";\n "])),ie(.85,ae.black),ae.gray.light2)),R.Dark,g(rn||(rn=ke(["\n box-shadow: 0px 4px 7px ",";\n border-color: ",";\n "])),ie(.85,ae.black),ae.gray.dark2)),Cn=g(tn||(tn=ke(["\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"])),_[2],ne.default);ye(ye({},R.Light,g(on||(on=ke(["\n color: ",";\n background-color: ",";\n "])),ae.black,ae.white)),R.Dark,g(an||(an=ke(["\n color: ",";\n background-color: ",";\n "])),ae.gray.light1,ae.gray.dark3));var En,Sn=function(e){return g(ln||(ln=ke(["\n background-color: ",";\n"])),re[e].background.primary.default)},Ln=g(cn||(cn=ke(["\n position: relative;\n margin: 0;\n padding: 0;\n"]))),On=g(sn||(sn=ke(["\n font-family: inherit;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"]))),Nn=ye(ye({},R.Light,g(un||(un=ke(["\n color: ",";\n "])),ae.gray.dark3)),R.Dark,g(dn||(dn=ke(["\n color: ",";\n "])),ae.gray.light3)),Dn=function(e){return g(pn||(pn=ke(["\n font-size: ","px;\n line-height: ","px;\n padding: ","px ","px;\n"])),$e[e],Be[e],xn[e].y,xn[e].x)},Mn=v(fn||(fn=ke(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]))),jn=g(hn||(hn=ke(["\n animation: "," 1.5s linear infinite;\n"])),Mn),In=e.forwardRef((function(n,t){var a=n.children,i=n.id,l=n.refEl,c=n.labelId,s=n.menuWidth,u=n.searchLoadingMessage,d=n.searchErrorMessage,p=n.searchEmptyMessage,f=z(),m=f.darkMode,v=f.theme,y=r(Ze),x=y.disabled,w=y.size,C=y.isOpen,S=y.searchState,L=k(t,null),O=E(l),N=h(O)?"unset":"".concat(Math.min(O,256),"px"),M=o((function(){var n=b(On,Nn[v],Dn(w)),r=b(On,Dn(w));switch(S){case"loading":return e.createElement("span",{className:n},e.createElement(D,{glyph:"Refresh",color:m?ae.blue.light1:ae.blue.base,className:jn}),u);case"error":return e.createElement(K,{className:r},e.createElement(D,{glyph:"Warning",color:m?ae.red.light1:ae.red.base}),e.createElement("span",null,d));default:return a&&"object"===ve(a)&&"length"in a&&a.length>0?e.createElement("ul",{className:Ln},a):e.createElement("span",{className:n},p)}}),[v,w,S,m,u,d,a,p]);return e.createElement(P,{active:C&&!x,spacing:4,align:"bottom",justify:"middle",refEl:l,adjustOnMutation:!0,className:b(wn(s),kn[v])},e.createElement("div",{ref:L,id:i,role:"listbox","aria-labelledby":c,"aria-expanded":C,className:b(Cn,Sn(v),g(En||(En=ke(["\n max-height: ",";\n "])),N)),onMouseDownCapture:function(e){return e.preventDefault()}},M))}));In.displayName="ComboboxMenu";var zn,Tn,An,Fn,Rn,Xn,Wn,Pn,Gn,Vn,Hn,Kn,Yn,Un,Zn,qn,Bn,$n,Jn,Qn,_n=function(e){var n=e.scrollHeight;return e.scrollTop<n-e.clientHeight},er=function(e){var n,r=e.value,t=e.displayName;return{value:null!=r?r:pe(t),displayName:null!==(n=null!=t?t:r)&&void 0!==n?n:""}},nr=function n(r){return e.Children.toArray(r).reduce((function(e,r){if(X(r,"ComboboxOption")){var t=er(r.props),o=t.value,a=t.displayName,i=r.props,l=i.glyph,c=i.disabled;return[].concat(Ee(e),[{value:o,displayName:a,isDisabled:!!c,hasGlyph:!!l}])}if(X(r,"ComboboxGroup")){var s=r.props.children;if(s)return[].concat(Ee(e),Ee(n(s)))}}),[])},rr=function(e,n){if(e)return n.find((function(n){return n.value===e}))},tr=function(e,n){var r,t;return e?null!==(r=null===(t=rr(e,n))||void 0===t?void 0:t.displayName)&&void 0!==r?r:e:""},or=g(zn||(zn=ke(["\n .",", ."," {\n font-size: ","px;\n line-height: 20px;\n }\n"])),le,ce,Q.body2.fontSize),ar=ye(ye(ye(ye({},Te.XSmall,g(Tn||(Tn=ke(["\n min-width: ","px;\n "])),_[3])),Te.Small,g(An||(An=ke(["\n min-width: ","px;\n "])),_[3])),Te.Default,g(Fn||(Fn=ke(["\n min-width: ","px;\n "])),_[3])),Te.Large,g(Rn||(Rn=ke(["\n min-width: ","px;\n "])),_[4])),ir=g(Xn||(Xn=ke(["\n pointer-events: none;\n gap: 0;\n\n label {\n gap: 0;\n align-items: center;\n }\n"])));g(Wn||(Wn=ke(["\n pointer-events: none;\n"])));var lr=function(e){return g(Pn||(Pn=ke(["\n font-weight: ",";\n"])),e?ee.bold:ee.regular)},cr=ye(ye({},R.Light,g(Gn||(Gn=ke(["\n color: ",";\n "])),ae.gray.dark1)),R.Dark,g(Vn||(Vn=ke(["\n color: ",";\n "])),ae.gray.base)),sr=ye(ye({},R.Light,g(Hn||(Hn=ke(["\n color: ",";\n "])),ae.blue.dark1)),R.Dark,g(Kn||(Kn=ke(["\n color: ",";\n "])),ae.blue.light3)),ur=ye(ye({},R.Light,g(Yn||(Yn=ke(["\n color: ",";\n "])),ae.gray.light1)),R.Dark,g(Un||(Un=ke(["\n color: ",";\n "])),ae.gray.dark1)),dr=ye(ye({},R.Light,g(Zn||(Zn=ke(["\n color: ",";\n "])),ae.blue.base)),R.Dark,g(qn||(qn=ke(["\n color: ",";\n "])),ae.blue.light1)),pr=ye(ye({},R.Light,g(Bn||(Bn=ke(["\n color: ",";\n "])),ae.gray.light1)),R.Dark,g($n||($n=ke(["\n color: ",";\n "])),ae.gray.dark1)),fr=g(Jn||(Jn=ke(["\n ."," {\n align-self: baseline;\n position: relative;\n // aligns the checkbox with the option name\n top: 1px;\n }\n"])),se),hr=g(Qn||(Qn=ke(["\n ."," {\n // aligns the checkbox with the option name\n top: 3px;\n }\n"])),se),mr=["glyph","isSelected","displayName","isFocused","setSelected","className","description","value","onClick","disabled"],gr=e.forwardRef((function(n,t){var i=n.glyph,l=n.isSelected,c=n.displayName,s=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=we(n,mr),y=z(),x=y.darkMode,w=y.theme,E=r(Ze),S=E.multiselect,L=E.size,O=E.withIcons,N=E.inputValue,j=k(t,null),I=C({prefix:"combobox-option-text"}),T=a((function(e){e.stopPropagation(),g||(u(),null==h||h(e,f))}),[g,h,u,f]),A=o((function(){return function(n){var r=n.withIcons,t=n.isSelected,o=n.glyph,a=n.optionTextId,i=n.disabled,l=n.darkMode,c=n.size,s=n.multiselect,u=n.theme,d=n.isFocused;o&&!M(o)&&console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",o);var p=o&&M(o)?e.cloneElement(o,ge(ge({},o.props),{},{className:b(cr[u],ye(ye({},sr[u],d),ur[u],i),o.props.className)})):e.createElement(e.Fragment,null),f=e.createElement(he,{"aria-labelledby":a,checked:t,tabIndex:-1,disabled:i,darkMode:l,className:ir}),h=e.createElement(D,{glyph:"Checkmark",className:b(ar[c],dr[u],ye({},pr[u],i))});return{leftGlyph:s?r?p:f:r?p:t?h:null,rightGlyph:s?r&&f:r&&t&&h}}({withIcons:O,isSelected:l,glyph:i,theme:w,darkMode:x,size:L,disabled:g,multiselect:S,optionTextId:I,isFocused:s})}),[x,g,i,l,S,I,L,w,O,s]),F=A.leftGlyph,R=A.rightGlyph,X=S&&!O;return e.createElement(ue,xe({},v,{as:"li",ref:j,highlighted:s,disabled:g,"aria-label":c,darkMode:x,className:b(ye(ye(ye({},or,L===Te.Large),fr,X),hr,X&&L===Te.Large),d),onClick:T,onKeyDown:T}),e.createElement(de,{leftGlyph:F,rightGlyph:R,description:p},e.createElement("span",{id:I,className:lr(l)},function(n,r,t){if(r&&t){var o=fe(r),a=new RegExp(o,"gi"),i=n.matchAll(a);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,m=p+f+h,g=new Array(h).fill("");g[0]=e.createElement(t,{key:m},f),l.splice.apply(l,[p,h].concat(Ee(g)))}return e.createElement(e.Fragment,null,l)}return e.createElement(e.Fragment,null,n)}return e.createElement(e.Fragment,null,n)}(c,N,"strong"))))}));function br(e){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}gr.displayName="ComboboxOption",br.displayName="ComboboxOption",br.propTypes={displayName:m.string,value:m.string,glyph:m.node,disabled:m.bool,className:m.string,description:m.string,onClick:m.func};var vr,yr,xr,wr,kr,Cr,Er,Sr,Lr,Or,Nr,Dr,Mr,jr,Ir,zr,Tr,Ar,Fr,Rr,Xr,Wr,Pr,Gr,Vr,Hr,Kr,Yr,Ur,Zr,qr,Br,$r,Jr=function(e){return!h(e)&&!p(e)&&(f(e)||u(e)&&e.length>0)},Qr=function(e){return Be[e]+2*Je[e]},_r=_[100],et=ye(ye(ye(ye({},Te.XSmall,22),Te.Small,28),Te.Default,36),Te.Large,48),nt=function(e){return(et[e]-Qr(e)-2)/2},rt=ye(ye(ye(ye({},Te.XSmall,{y:nt(Te.XSmall),xLeftWithChip:_[25],xLeftWithoutChip:_[200],xRight:_[100]}),Te.Small,{y:nt(Te.Small),xLeftWithChip:_[100],xLeftWithoutChip:_[200],xRight:_[100]}),Te.Default,{y:nt(Te.Default),xLeftWithChip:_[150],xLeftWithoutChip:_[300],xRight:_[200]}),Te.Large,{y:nt(Te.Large),xLeftWithChip:_[300],xLeftWithoutChip:_[300],xRight:_[200]}),tt=_[400],ot=function(e){return g(vr||(vr=ke(["\n font-family: ",";\n width: 100%;\n min-width: ","px;\n "])),ne.default,$e[e]+2*rt[e].xLeftWithChip+tt+2)},at=g(yr||(yr=ke(["\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"])),_[200],te.default,te.default),it=ye(ye({},R.Light,g(xr||(xr=ke(["\n color: ",";\n background-color: ",";\n "])),re.light.text.primary.default,re.light.background.primary.default)),R.Dark,g(wr||(wr=ke(["\n color: ",";\n background-color: ",";\n "])),re.dark.text.primary.default,ae.gray.dark4)),lt=function(e,n){return g(kr||(kr=ke(["\n padding-top: ","px;\n padding-bottom: ","px;\n padding-left: ",";\n padding-right: ","px;\n"])),rt[e].y,rt[e].y,"".concat(n?rt[e].xLeftWithChip:rt[e].xLeftWithoutChip,"px"),rt[e].xRight)},ct=function(e){return g(Cr||(Cr=ke(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),re[e].text.disabled.default,re[e].background.disabled.default,re[e].border.disabled.default)},st=function(e){return ye(ye(ye({},Fe.Error,g(Er||(Er=ke(["\n border-color: ",";\n "])),re[e].border.error.default)),Fe.None,g(Sr||(Sr=ke(["\n border-color: ",";\n "])),re[e].border.primary.default)),Fe.Valid,g(Lr||(Lr=ke(["\n border-color: ",";\n "])),re[e].border.success.default))},ut=ye(ye({},R.Light,g(Or||(Or=ke(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),oe[R.Light].input)),R.Dark,g(Nr||(Nr=ke(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),oe[R.Dark].input)),dt=g(Dr||(Dr=ke(["\n display: flex;\n align-items: center;\n"]))),pt=ye(ye(ye(ye({},Te.XSmall,g(Mr||(Mr=ke(["\n gap: ","px;\n "])),_[100])),Te.Small,g(jr||(jr=ke(["\n gap: ","px;\n "])),_[200])),Te.Default,g(Ir||(Ir=ke(["\n gap: ","px;\n "])),_[200])),Te.Large,g(zr||(zr=ke(["\n gap: ","px;\n "])),_[200])),ft=function(e){var n=e.overflow,r=e.size,t=g(Tr||(Tr=ke(["\n flex-grow: 1;\n width: 100%;\n "])));switch(n){case Ae.scrollX:return g(Ar||(Ar=ke(["\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,Qr(r),qe);case Ae.expandY:return g(Fr||(Fr=ke(["\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,_r,Qr(r),3*Qr(r),_r)}},ht=g(Rr||(Rr=ke(["\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"])),ne.default,_[100]),mt=ye(ye({},R.Light,g(Xr||(Xr=ke(["\n &::placeholder {\n color: ",";\n }\n "])),ae.gray.base)),R.Dark,g(Wr||(Wr=ke(["\n &::placeholder {\n color: ",";\n }\n "])),ae.gray.dark1)),gt=ye(ye({},R.Light,g(Pr||(Pr=ke(["\n &::placeholder {\n color: ",";\n }\n "])),ae.gray.base)),R.Dark,g(Gr||(Gr=ke(["\n &::placeholder {\n color: ",";\n }\n "])),ae.gray.dark1)),bt=function(e){return g(Vr||(Vr=ke(["\n height: ","px;\n font-size: ","px;\n line-height: ","px;\n min-width: ","px;\n"])),Qr(e),$e[e],Be[e],$e[e])},vt=function(e){return g(Hr||(Hr=ke(["\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")},yt=function(e,n){var r,t=null!==(r=null==n?void 0:n.length)&&void 0!==r?r:0;return g(Kr||(Kr=ke(["\n width: ","px;\n max-width: 100%;\n "])),t*$e[e])},xt=g(Yr||(Yr=ke(["\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"])),tt/2),wt=g(Ur||(Ur=ke(["\n height: ","px;\n width: ","px;\n"])),tt,tt),kt=g(Zr||(Zr=ke(["\n margin-bottom: ","px;\n display: flex;\n flex-direction: column;\n"])),_[100]),Ct=g(qr||(qr=ke(["\n font-size: ","px;\n line-height: ","px;\n"])),Q.large.fontSize,Q.large.lineHeight),Et=ye(ye({},R.Light,g(Br||(Br=ke(["\n ::after {\n box-shadow: 0px 0px 7px 5px ",";\n }\n "])),ie(.85,ae.black))),R.Dark,g($r||($r=ke(["\n ::after {\n width: 95%;\n box-shadow: 0px -7px 12px 5px rgb(0 0 0 / 50%);\n }\n "])))),St=function(e){return re[e].icon.primary.default},Lt=function(e){return re[e].icon.disabled.default},Ot=["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","renderMode","portalClassName","portalContainer","portalRef","scrollContainer","popoverZIndex"],Nt=["className","glyph","disabled"];function Dt(n){var r=n.children,m=n.label,g=n.description,v=n.placeholder,y=void 0===v?"Select":v,k=n["aria-label"],E=n.disabled,M=void 0!==E&&E,A=n.size,R=void 0===A?Te.Default:A,P=n.darkMode,K=n.state,Z=void 0===K?"none":K,q=n.errorMessage,B=void 0===q?x.error:q,$=n.successMessage,J=void 0===$?x.success:$,Q=n.searchState,_=void 0===Q?"unset":Q,ee=n.searchEmptyMessage,ne=void 0===ee?"No results found":ee,re=n.searchErrorMessage,te=void 0===re?"Could not get results!":re,oe=n.searchLoadingMessage,ae=void 0===oe?"Loading results...":oe,ie=n.filteredOptions,le=n.onFilter,ce=n.clearable,se=void 0===ce||ce,ue=n.onClear,de=n.overflow,pe=void 0===de?Ae.expandY:de,fe=n.multiselect,he=void 0!==fe&&fe,me=n.initialValue,be=n.inputValue,ke=n.onInputChange,Ee=n.onChange,Se=n.value,Le=n.chipTruncationLocation,Fe=n.chipCharacterLimit,Re=void 0===Fe?12:Fe,Xe=n.className,We=n.renderMode,Pe=void 0===We?G.TopLayer:We,Ge=n.portalClassName,Ve=n.portalContainer,He=n.portalRef,Ke=n.scrollContainer,Ye=n.popoverZIndex,Ue=we(n,Ot),qe=z(P),Be=qe.darkMode,$e=qe.theme,Je=S({prefix:"option"}),Qe=S({prefix:"chip"}),en=C({prefix:"combobox-input"}),nn=C({prefix:"combobox-label"}),rn=C({prefix:"combobox-menu"}),tn=i(null),on=i(null),an=i(null),ln=i(null),cn=i(null),sn=Ce(l(!1),2),un=sn[0],dn=sn[1],pn=L(un),fn=Ce(l(null),2),hn=fn[0],mn=fn[1],gn=Ce(l(null),2),bn=gn[0],yn=gn[1],xn=L(bn),wn=Ce(l(null!=be?be:""),2),kn=wn[0],Cn=wn[1];t((function(){h(be)||Cn(be)}),[be]);var En=function(e){Cn(e)},Sn=L(kn),Ln=Ce(l(null),2),On=Ln[0],Nn=Ln[1],Dn=Ce(l(!1),2),Mn=Dn[0],jn=Dn[1],zn=he&&u(bn)&&bn.length>0?void 0:y,Tn=function(){return dn(!1)},An=function(){return dn(!0)},Fn=o((function(){return nr(r)}),[r]),Rn=a((function(e){return!he||"string"!=typeof e&&"number"!=typeof e?!he&&u(e)&&W.error("Error in Combobox: multiselect is set to `false`, but received an Array value"):W.error("Error in Combobox: multiselect is set to `true`, but received a ".concat(ve(e),' value: "').concat(e,'"')),he&&u(e)}),[he]),Xn=a((function(e){!M&&ln&&ln.current&&(ln.current.focus(),h(e)||ln.current.setSelectionRange(e,e))}),[M]),Wn=a((function(e){if(Rn(bn)){var n=c(bn),r=Ee,t={diffType:"delete",value:null!=e?e:bn};p(e)?n.length=0:bn.includes(e)?n.splice(n.indexOf(e),1):(n.push(e),t.diffType="insert",En("")),yn(n),null==r||r(n,t)}else{var o=e,a=Ee;yn(o),null==a||a(o)}}),[Rn,Ee,bn]),Pn=a((function(e){var n,r,t,o;return function(e,n){return Array.isArray(n)?n.includes(e):e===n}((r=Fn,(n=e)?null!==(t=null===(o=r.find((function(e){return e.displayName===n})))||void 0===o?void 0:o.value)&&void 0!==t?t:n:""),bn)}),[Fn,bn]),Gn=a((function(e){var n="string"==typeof e?e:e.value;return ie&&ie.length>0?ie.includes(n):!!Pn(kn)||("string"==typeof e?tr(n,Fn):e.displayName).toLowerCase().includes(kn.toLowerCase())}),[ie,Pn,kn,Fn]),Vn=o((function(){return Fn.filter(Gn)}),[Fn,Gn]),Hn=a((function(e){return!!e&&!!Fn.find((function(n){return n.value===e}))}),[Fn]),Kn=a((function(e){return Vn?Vn.findIndex((function(n){return n.value===e})):-1}),[Vn]),Yn=a((function(e){if(Vn&&Vn.length>=e){var n=Vn[e];return n?n.value:void 0}}),[Vn]),Un=a((function(){return Rn(bn)?bn.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,Rn,bn]),Zn=Ce(l(),2),qn=Zn[0],Bn=Zn[1],$n=a((function(e){var n,r=null!==(n=null==Vn?void 0:Vn.length)&&void 0!==n?n:0,t=r-1>0?r-1:0,o=Kn(hn);switch(e&&un&&(Nn(null),Xn()),e){case"next":var a=Yn(o+1<r?o+1:0);mn(null!=a?a:null);break;case"prev":var i=Yn(o-1>=0?o-1:t);mn(null!=i?i:null);break;case"last":var l=Yn(t);mn(null!=l?l:null);break;default:var c=Yn(0);mn(null!=c?c:null)}}),[hn,Kn,Yn,un,Xn,null==Vn?void 0:Vn.length]),Jn=a((function(e,n){if(Rn(bn))switch(e){case"next":var r=null!=n?n:Un(),t=r+1<bn.length?r+1:bn.length-1,o=bn[t];Nn(o);break;case"prev":var a=null!=n?n:Un(),i=a>0?a-1:a<0?bn.length-1:0,l=bn[i];Nn(l);break;case"first":var c=bn[0];Nn(c);break;case"last":var s=bn[bn.length-1];Nn(s);break;default:Nn(null)}}),[Un,Rn,bn]),Qn=a((function(e,n){switch(e&&mn(null),e){case"right":switch(qn){case Oe:var r,t,o;if((null===(r=ln.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=ln.current)||void 0===t?void 0:t.value.length))null===(o=on.current)||void 0===o||o.focus();break;case De:case je:case Me:if(qn===Me||1===(null==bn?void 0:bn.length)){Xn(0),Jn(null),n.preventDefault();break}Jn("next")}break;case"left":switch(qn){case Ne:var a;n.preventDefault(),Xn(null==ln||null===(a=ln.current)||void 0===a?void 0:a.value.length);break;case Oe:case je:case Me:if(Rn(bn)){var i;if(qn===Oe&&0!==(null===(i=ln.current)||void 0===i?void 0:i.selectionStart))break;Jn("prev")}}break;default:Jn(null)}}),[qn,Rn,bn,Xn,Jn]);t((function(){kn!==Sn&&$n("first")}),[kn,un,Sn,$n]),O(hn?Je(hn):void 0,cn);var or=a((function(n){if(X(n,"ComboboxOption")){var r=er(n.props),t=r.value,o=r.displayName;if(Gn(t)){var a=n.props,i=a.className,l=a.glyph,c=a.disabled,s=we(a,Nt),u=Fn.findIndex((function(e){return e.value===t})),d=hn===t,p=Rn(bn)?bn.includes(t):bn===t,f=Je(t);return e.createElement(gr,xe({},s,{value:t,displayName:o,isFocused:d,isSelected:p,disabled:c,setSelected:function(){mn(t),Wn(t),Xn(),t===bn&&Tn()},glyph:l,className:i,index:u,ref:f}))}}else if(X(n,"ComboboxGroup")){var h=e.Children.map(n.props.children,or);if(h&&(null==h?void 0:h.length)>0)return e.createElement(vn,{label:n.props.label,className:n.props.className},e.Children.map(h,or))}}),[Fn,Je,hn,Rn,bn,Xn,Gn,Wn]),ar=o((function(){return e.Children.map(r,or)}),[r,or]),ir=o((function(){if(Rn(bn))return bn.filter(Hn).map((function(n,r){var t=tr(n,Fn),o=On===n,a=Qe(n),i=r>=bn.length-1;return e.createElement(_e,{key:n,displayName:t,isFocused:o,onRemove:function(){i?(Xn(),Jn(null)):Jn("next",r),Wn(n)},onFocus:function(){Nn(n)},ref:a})}))}),[Rn,bn,Hn,Fn,On,Qe,Wn,Xn,Jn]),lr=o((function(){return Fn.some((function(e){return e.hasGlyph}))}),[Fn]),cr=a((function(){var e=Vn.find((function(e){return e.displayName===kn||e.value===kn}));if(!Se&&e)Wn(e.value);else if(!Rn(bn)){var n,r=null!==(n=tr(bn,Fn))&&void 0!==n?n:xn;En(r)}}),[Fn,kn,Rn,xn,bn,Wn,Se,Vn]),sr=a((function(){if(Jr(bn)){if(Rn(bn))xr(pe);else if(!Rn(bn)){var e,n=null!==(e=tr(bn,Fn))&&void 0!==e?e:"";En(n),Tn()}}else En("")}),[Fn,Rn,bn,pe]);t((function(){if(me)if(u(me)){var e,n=null!==(e=me.filter((function(e){return Hn(e)})))&&void 0!==e?e:[];yn(n)}else Hn(me)&&yn(me);else yn(function(e){return e?[]:null}(he))}),[]),t((function(){if(!h(Se)&&Se!==Sn)if(p(Se))yn(null);else if(Rn(Se)){var e=Se.filter(Hn);yn(e)}else yn(Hn(Se)?Se:null)}),[Rn,Hn,Sn,Se]),t((function(){!h(xn)&&(u(bn)&&!p(xn)||f(bn)||p(bn))&&!d(bn,xn)&&sr()}),[sr,xn,bn]),t((function(){!un&&pn&&cr()}),[un,pn,cr]);var ur=Ce(l(0),2),dr=ur[0],pr=ur[1];t((function(){var e,n;pr(null!==(e=null===(n=tn.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)}),[tn,un,hn,bn]);N(Tn,[cn,tn],un);var fr=Rn(bn)&&!!bn.length,hr=s((function(e){jn(_n(e.target))}),50,{leading:!0}),mr=a((function(e){pe===Ae.expandY&&hr(e)}),[hr,pe]);t((function(){an.current&&jn(_n(an.current))}),[]);var br,vr=ge({popoverZIndex:Ye},V({dismissMode:H.Manual,portalClassName:Ge,portalContainer:Ve,portalRef:He,renderMode:Pe,scrollContainer:Ke})),yr={disabled:M,errorMessage:B,size:R,state:Z,successMessage:J};return e.createElement(I,{darkMode:Be},e.createElement(Ze.Provider,{value:{multiselect:he,size:R,withIcons:lr,disabled:M,isOpen:un,state:Z,searchState:_,chipTruncationLocation:Le,chipCharacterLimit:Re,inputValue:kn,overflow:pe,popoverZIndex:Ye}},e.createElement("div",xe({className:b(ot(R),Xe)},Ue),(m||g)&&e.createElement("div",{className:kt},m&&e.createElement(Y,{id:nn,htmlFor:en,darkMode:Be,disabled:M,className:b(ye({},Ct,R===Te.Large))},m),g&&e.createElement(U,{darkMode:Be,disabled:M,className:b(ye({},Ct,R===Te.Large))},g)),e.createElement("div",{ref:tn,role:"combobox","aria-expanded":un,"aria-controls":rn,"aria-owns":rn,tabIndex:-1,onMouseDown:function(e){M&&e.preventDefault()},onClick:function(e){if(e.target!==ln.current){var n=0;if(ln.current)n=e.nativeEvent.offsetX>ln.current.offsetLeft+ln.current.clientWidth?kn.length:0;Xn(n)}An()},onFocus:function(e){xr(pe),Bn(function(e){var n,r,t,o;if(!e)return;if(null!==(n=ln.current)&&void 0!==n&&n.contains(e))return Oe;if(null!==(r=on.current)&&void 0!==r&&r.contains(e))return Ne;var a=Rn(bn)?bn.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(Rn(bn)){if(0===a)return De;if(a===bn.length-1)return Me;if(a>0)return je}if(null!==(t=cn.current)&&void 0!==t&&t.contains(e))return ze;if(null!==(o=tn.current)&&void 0!==o&&o.contains(e))return Ie}(e.target))},onKeyDown:function(e){var n,r,t=null===(n=cn.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(r=tn.current)||void 0===r?void 0:r.contains(document.activeElement))||t){if(e.ctrlKey||e.shiftKey||e.altKey)return;switch(e.key){case F.Tab:switch(qn){case"Input":Jr(bn)||(Tn(),$n("first"),Jn(null));break;case"LastChip":Jn(null)}break;case F.Escape:Tn(),$n("first");break;case F.Enter:un?!un||qn!==Oe||p(hn)||function(e){if("string"==typeof e){var n=rr(e,Fn);return!(null==n||!n.isDisabled)}return!!e.isDisabled}(hn)?qn===Ne&&(Wn(null),Xn()):Wn(hn):An();break;case F.Backspace:var o;if(Rn(bn))"Input"===qn&&0===(null===(o=ln.current)||void 0===o?void 0:o.selectionStart)&&Jn("last");An();break;case F.ArrowDown:un?(e.preventDefault(),$n("next")):An();break;case F.ArrowUp:un?(e.preventDefault(),$n("prev")):An();break;case F.ArrowRight:Qn("right",e);break;case F.ArrowLeft:Qn("left",e);break;default:un||An()}}},onTransitionEnd:function(){var e,n;pr(null!==(e=null===(n=tn.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)},className:b(at,it[$e],lt(R,fr),st($e)[Z],ye(ye(ye({},ut[$e],(br=Oe,br===qn)),ct($e),M),Et[$e],Mn))},e.createElement("div",{onScroll:mr,ref:an,className:ft({size:R,overflow:pe})},ir,e.createElement("input",{"aria-label":null!=k?k:m,"aria-autocomplete":"list","aria-controls":rn,"aria-labelledby":nn,ref:ln,id:en,className:b(ht,bt(R),mt[$e],vt(un),ye(ye({},yt(R,kn),Rn(bn)),gt[$e],M)),placeholder:zn,"aria-disabled":M,readOnly:M,onChange:function(e){En(e.target.value),null==le||le(e.target.value),null==ke||ke(e)},value:kn,autoComplete:"off"})),e.createElement("div",{className:b(dt,pt[R])},se&&Jr(bn)&&!M&&e.createElement(j,{"aria-label":"Clear selection",disabled:M,ref:on,onClick:function(e){M||(e.stopPropagation(),Wn(null),null==ue||ue(e),null==le||le(""),Xn())},onFocus:function(){mn(null)},className:b(xt),darkMode:Be},e.createElement(D,{glyph:"XWithCircle"})),e.createElement(D,{glyph:"CaretDown",className:wt,fill:b(ye(ye({},St($e),!M),Lt($e),M))}))),e.createElement(w,yr),e.createElement(T,vr,e.createElement(In,{id:rn,labelId:nn,refEl:tn,ref:cn,menuWidth:dr,searchLoadingMessage:ae,searchErrorMessage:te,searchEmptyMessage:ne},ar)))));function xr(e){an&&an.current&&(e===Ae.scrollX&&(an.current.scrollLeft=an.current.scrollWidth),e===Ae.expandY&&(an.current.scrollTop=an.current.scrollHeight))}}Dt.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(Ae)),darkMode:m.bool,label:m.string,"aria-label":m.string,children:m.node,onChange:m.func,chipCharacterLimit:m.number,chipTruncationLocation:m.oneOf(Object.values(q)),onClear:m.func,onFilter:m.func,clearable:m.bool,searchLoadingMessage:m.string,searchErrorMessage:m.string,searchEmptyMessage:m.string,searchState:m.oneOf(Object.values(Re)),errorMessage:m.string,state:m.oneOf(Object.values(Fe)),size:m.oneOf(Object.values(Te)),disabled:m.bool,description:m.string,placeholder:m.string,filteredOptions:m.arrayOf(m.string),popoverZIndex:m.number,renderMode:m.oneOf(Object.values(G)),scrollContainer:m.elementType,portalContainer:m.elementType,portalRef:m.shape({current:"undefined"!=typeof window?m.instanceOf(Element):m.any}),portalClassName:m.string};export{Dt as Combobox,yn as ComboboxGroup,br as ComboboxOption};
2
2
  //# sourceMappingURL=index.js.map