@leafygreen-ui/combobox 0.9.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/README.md +44 -39
  3. package/dist/Combobox.d.ts +1 -1
  4. package/dist/Combobox.d.ts.map +1 -1
  5. package/dist/Combobox.types.d.ts +23 -0
  6. package/dist/Combobox.types.d.ts.map +1 -1
  7. package/dist/ComboboxOption.d.ts.map +1 -1
  8. package/dist/esm/index.js +1 -1
  9. package/dist/esm/index.js.map +1 -1
  10. package/dist/index.js +1 -1
  11. package/dist/index.js.map +1 -1
  12. package/package.json +33 -30
  13. package/src/Combobox.story.tsx +0 -2
  14. package/src/Combobox.tsx +19 -0
  15. package/src/Combobox.types.ts +28 -0
  16. package/src/ComboboxOption.tsx +7 -2
  17. package/tsconfig.tsbuildinfo +5 -5
package/CHANGELOG.md ADDED
@@ -0,0 +1,9 @@
1
+ # @leafygreen-ui/combobox
2
+
3
+ ## 1.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 548ca2c: - Release Combobox as v1
8
+ - Adds standard popover props: `usePortal`, `popoverZIndex`, `popoverClassName`, `portalContainer`, and `scrollContainer`.
9
+ - Fixes issue where clicking on elements within a Combobox option wouldn't select that option.
package/README.md CHANGED
@@ -75,52 +75,57 @@ npm install @leafygreen-ui/combobox
75
75
 
76
76
  ## Properties
77
77
 
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 | |
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` | The className passed to the root element of the component. | |
106
+ | `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` |
107
+ | `portalContainer` | `HTMLElement` \| `null` | Sets the container used for the popover's portal. | |
108
+ | `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. | |
109
+ | `portalClassName` | `string` | Passes the given className to the popover's portal container if the default portal container is being used. | |
110
+ | `popoverZIndex` | `number` | Sets the z-index CSS property for the popover. | |
106
111
 
107
112
  # ComboboxOption
108
113
 
109
114
  ## Props
110
115
 
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 | |
116
+ | Prop | Type | Description | Default |
117
+ | ------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
118
+ | `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)` | |
119
+ | `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` | |
120
+ | `glyph` | `<Icon/>` | The icon to display to the left of the option in the menu. | |
121
+ | `className` | `string` | The className passed to the root element of the component. | |
117
122
 
118
123
  # ComboboxGroup
119
124
 
120
125
  ## Props
121
126
 
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 | |
127
+ | Prop | Type | Description | Default |
128
+ | ----------- | ------------------ | ---------------------------------------------------------- | ------- |
129
+ | `label` | `string` | Label for the group of options | |
130
+ | `children` | `<ComboboxOption>` | Options in the group | |
131
+ | `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,eAulClB"}
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 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 I}from"@leafygreen-ui/emotion";import{uiColors as z}from"@leafygreen-ui/palette";import{isComponentType as S,keyMap as D,createDataProp as P}from"@leafygreen-ui/lib";import L from"@leafygreen-ui/checkbox";import{jsx as F}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 Z(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 Z(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)?Z(n,o):void 0}}function Z(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 Y,$,q,J,Q,_,nn,on,en,rn,tn=o({multiselect:!1,darkMode:!1,size:"default",withIcons:!1,disabled:!1}),an=W(W({},D),{},{Backspace:8,Delete:46}),ln=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 F(n.Fragment,null,c,d,u)}return F(n.Fragment,null,o)},cn=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:""}},un=function o(e){return n.Children.toArray(e).reduce((function(n,e){if(S(e,"ComboboxOption")){var r=cn(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)))}}),[])},sn=M($||($=V(["\n display: inline-flex;\n gap: 8px;\n justify-content: start;\n align-items: inherit;\n"]))),dn=M(q||(q=V(["\n pointer-events: none;\n"]))),bn=function(n){return M(J||(J=V(["\n font-weight: ",";\n"])),n?"bold":"normal")},gn=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(tn),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=F(L,{label:"","aria-labelledby":x,checked:c,tabIndex:-1,animate:!1});return F(n.Fragment,null,F("span",{className:E(sn,dn)},m?k:o,F("span",{id:x,className:bn(c)},ln(a,f,"strong"))),m&&o)}return F(n.Fragment,null,F("span",{className:E(sn,dn)},k,F("span",{className:bn(c)},ln(a,f,"strong"))),c&&F(N,{glyph:"Checkmark",color:p?z.blue.light1:z.blue.base}))}),[g,k,c,a,f,p,x,m]);return F("li",{ref:y,role:"option","aria-selected":u,"aria-label":a,tabIndex:-1,className:E(M(Y||(Y=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 pn(n){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}gn.displayName="ComboboxOption",pn.displayName="ComboboxOption";var mn,fn,hn,vn,xn,yn,wn,kn,Cn,Nn,On,jn,Mn,En,In,zn,Sn,Dn,Pn,Ln,Fn,An,Tn,Rn=function(n){var o,e,r=n.darkMode,t=n.size;switch(o=r?M(Q||(Q=V([""]))):M(_||(_=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 "])),z.gray.dark3,z.gray.dark2,z.gray.light2,z.gray.light1,z.blue.light2),t){case"default":e=M(nn||(nn=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(on||(on=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 "]))))},Wn=M(en||(en=V(["\n padding-inline: var(--lg-combobox-chip-padding-x);\n"]))),Bn=M(rn||(rn=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"]))),Gn=n.forwardRef((function(n,o){var r=n.displayName,l=n.isFocused,c=n.onRemove,u=n.onFocus,s=e(tn),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=P("combobox-chip");return F("span",G({role:"option","aria-selected":l,"data-test-id":"lg-combobox-chip"},y.prop,{ref:o,className:Rn({darkMode:d,size:b}),onClick:function(n){var o;null!==(o=v.current)&&void 0!==o&&o.contains(n.target)||u()},tabIndex:-1}),F("span",{className:Wn},x?F(A,{definition:r,align:"bottom"},x):r),F("button",{"aria-label":"Deselect ".concat(r),"aria-disabled":g,disabled:g,ref:v,className:Bn,onClick:function(){g||c()},onKeyDown:function(n){g||n.keyCode!==an.Delete&&n.keyCode!==an.Backspace&&n.keyCode!==an.Enter&&n.keyCode!==an.Space||c()}},F(N,{glyph:"X"})))}));Gn.displayName="Chip";var Kn,Vn,Hn=function(n){var o=n.darkMode,e=n.size,r=n.overflow;return E(function(n){return n?M(mn||(mn=V([""]))):M(fn||(fn=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 "])),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 M(hn||(hn=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(vn||(vn=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)"))},Un=M(xn||(xn=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"]))),Xn=M(yn||(yn=V(["\n width: var(--lg-combobox-width);\n"]))),Zn=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}},Yn=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(wn||(wn=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(kn||(kn=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(Cn||(Cn=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(Nn||(Nn=V(["\n ","\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n overflow-x: visible;\n "])),s)}},$n=M(On||(On=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"]))),qn=M(jn||(jn=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"]))),Jn=M(Mn||(Mn=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"]))),Qn=M(En||(En=V(["\n margin-inline-end: calc(var(--lg-combobox-padding-x) / 2);\n"]))),_n=I(In||(In=V(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]))),no=M(zn||(zn=V(["\n animation: "," 1.5s linear infinite;\n"])),_n),oo=function(n){var o,e,r=n.darkMode,t=n.size,i=n.width,a=void 0===i?384:i;switch(o=r?M(Sn||(Sn=V([""]))):M(Dn||(Dn=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 "])),z.gray.dark3,z.gray.dark1,z.white,z.gray.light2,z.blue.light3,z.blue.base),t){case"default":e=M(Pn||(Pn=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(Ln||(Ln=V(["\n width: ","px;\n border-radius: var(--lg-combobox-menu-border-radius);\n\n & > * {\n border-radius: inherit;\n }\n "])),a))},eo=function(n){var o=n.maxHeight;return M(Fn||(Fn=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)},ro=M(An||(An=V(["\n position: relative;\n margin: 0;\n padding: 0;\n"]))),to=M(Tn||(Tn=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"]))),io=function(n){return M(Kn||(Kn=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?z.gray.light1:z.gray.dark1,n?z.gray.dark1:z.gray.light1)},ao=M(Vn||(Vn=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 lo(o){var r=o.label,t=o.className,i=o.children,a=e(tn).darkMode,l=h({prefix:"combobox-group"});return n.Children.count(i)>0?F("div",{className:E(io(a),t)},F("div",{className:ao,id:l},r),F("div",{role:"group","aria-labelledby":l},i)):F(n.Fragment,null)}function co(n){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}co.displayName="ComboboxGroup";var uo=["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 so(o){var e=o.children,c=o.label,v=o.description,O=o.placeholder,M=void 0===O?"Select":O,I=o["aria-label"],D=o.disabled,P=void 0!==D&&D,L=o.size,A=void 0===L?"default":L,T=o.darkMode,R=void 0!==T&&T,B=o.state,V=void 0===B?"none":B,U=o.errorMessage,X=o.searchState,Z=void 0===X?"unset":X,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,_=void 0===Q?"Loading results...":Q,nn=o.filteredOptions,on=o.onFilter,en=o.clearable,rn=void 0===en||en,ln=o.onClear,sn=o.overflow,dn=void 0===sn?"expand-y":sn,bn=o.multiselect,pn=void 0!==bn&&bn,mn=o.initialValue,fn=o.onChange,hn=o.value,vn=o.chipTruncationLocation,xn=o.chipCharacterLimit,yn=void 0===xn?12:xn,wn=o.className,kn=o.usePortal,Cn=void 0===kn||kn,Nn=o.portalClassName,On=o.portalContainer,jn=o.scrollContainer,Mn=o.popoverZIndex,En=K(o,uo),In=x({prefix:"option"}),zn=x({prefix:"chip"}),Sn=h({prefix:"combobox-input"}),Dn=h({prefix:"combobox-label"}),Pn=h({prefix:"combobox-menu"}),Ln=i(null),Fn=i(null),An=i(null),Tn=i(null),Rn=i(null),Wn=H(l(!1),2),Bn=Wn[0],Kn=Wn[1],Vn=y(Bn),_n=H(l(null),2),io=_n[0],ao=_n[1],co=H(l(null),2),so=co[0],bo=co[1],go=y(so),po=H(l(""),2),mo=po[0],fo=po[1],ho=y(mo),vo=H(l(null),2),xo=vo[0],yo=vo[1],wo=!s(so)&&(u(so)&&so.length>0||d(so)),ko=r((function(n){return pn&&u(n)}),[pn]),Co=r((function(n){!P&&Tn&&Tn.current&&(Tn.current.focus(),b(n)||Tn.current.setSelectionRange(n,n))}),[P]),No=r((function(n){if(ko(so)){var o=g(so);s(n)?o.length=0:so.includes(n)?o.splice(o.indexOf(n),1):(o.push(n),fo("")),bo(o),null==fn||fn(o)}else{var e=n;bo(e),null==fn||fn(e)}}),[ko,fn,so]),Oo=function(){An&&An.current&&(An.current.scrollLeft=An.current.scrollWidth)},jo=pn&&u(so)&&so.length>0?void 0:M,Mo=t((function(){return un(e)}),[e]),Eo=r((function(n){var o,e;return n?null!==(o=null===(e=Mo.find((function(o){return o.value===n})))||void 0===e?void 0:e.displayName)&&void 0!==o?o:n:""}),[Mo]),Io=r((function(n){var o="string"==typeof n?n:n.value;return nn&&nn.length>0?nn.includes(o):("string"==typeof n?Eo(o):n.displayName).toLowerCase().includes(mo.toLowerCase())}),[nn,Eo,mo]),zo=t((function(){return Mo.filter(Io)}),[Mo,Io]),So=r((function(n){return!!n&&!!Mo.find((function(o){return o.value===n}))}),[Mo]),Do=r((function(n){return zo?zo.findIndex((function(o){return o.value===n})):-1}),[zo]),Po=r((function(n){if(zo&&zo.length>=n){var o=zo[n];return o?o.value:void 0}}),[zo]),Lo=r((function(){return ko(so)?so.findIndex((function(n){var o,e;return null===(o=zn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})):-1}),[zn,ko,so]),Fo=r((function(){var n,o,e,r=null===(n=Tn.current)||void 0===n?void 0:n.contains(document.activeElement),t=null===(o=Fn.current)||void 0===o?void 0:o.contains(document.activeElement),i=ko(so)&&so.some((function(n){var o,e;return null===(o=zn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})),a=function(){return ko(so)?so.findIndex((function(n){var o,e;return null===(o=zn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})):-1};return ko(so)&&i?0===a()?"FirstChip":a()===so.length-1?"LastChip":"MiddleChip":r?"Input":t?"ClearButton":null!==(e=Ln.current)&&void 0!==e&&e.contains(document.activeElement)?"Combobox":void 0}),[zn,ko,so]),Ao=r((function(n){var o,e=null!==(o=null==zo?void 0:zo.length)&&void 0!==o?o:0,r=e-1>0?e-1:0,t=Do(io);switch(n&&Bn&&(yo(null),Co()),n){case"next":var i=Po(t+1<e?t+1:0);ao(null!=i?i:null);break;case"prev":var a=Po(t-1>=0?t-1:r);ao(null!=a?a:null);break;case"last":var l=Po(r);ao(null!=l?l:null);break;case"first":default:var c=Po(0);ao(null!=c?c:null)}}),[io,Do,Po,Bn,Co,null==zo?void 0:zo.length]),To=r((function(n,o){if(ko(so))switch(n){case"next":var e=null!=o?o:Lo(),r=e+1<so.length?e+1:so.length-1,t=so[r];yo(t);break;case"prev":var i=null!=o?o:Lo(),a=i>0?i-1:i<0?so.length-1:0,l=so[a];yo(l);break;case"first":var c=so[0];yo(c);break;case"last":var u=so[so.length-1];yo(u);break;default:yo(null)}}),[Lo,ko,so]),Ro=r((function(n,o){n&&ao(null);var e=Fo();switch(n){case"right":switch(e){case"Input":var r,t,i;if((null===(r=Tn.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=Tn.current)||void 0===t?void 0:t.value.length))null===(i=Fn.current)||void 0===i||i.focus();break;case"LastChip":o.preventDefault(),Co(0),To(null);break;case"FirstChip":case"MiddleChip":To("next")}break;case"left":switch(e){case"ClearButton":var a;o.preventDefault(),Co(null==Tn||null===(a=Tn.current)||void 0===a?void 0:a.value.length);break;case"Input":case"MiddleChip":case"LastChip":if(ko(so)){var l;if("Input"===e&&0!==(null===(l=Tn.current)||void 0===l?void 0:l.selectionStart))break;To("prev")}}break;default:To(null)}}),[Fo,ko,so,Co,To]);a((function(){mo!==ho&&Ao("first")}),[mo,Bn,ho,Ao]),a((function(){if(io){var n=In(io);if(n&&n.current&&Rn.current){var o=n.current.offsetTop,e=Rn.current,r=e.scrollTop;(o>e.offsetHeight||o<r)&&(Rn.current.scrollTop=o)}}}),[io,In]);var Wo=r((function(o){return n.Children.map(o,(function(n){if(S(n,"ComboboxOption")){var o=cn(n.props),e=o.value,r=o.displayName;if(Io(e)){var t=n.props,i=t.className,a=t.glyph,l=Mo.findIndex((function(n){return n.value===e})),c=io===e,u=ko(so)?so.includes(e):so===e,s=In(e);return F(gn,{value:e,displayName:r,isFocused:c,isSelected:u,setSelected:function(){ao(e),No(e),Co(),e===so&&Xo()},glyph:a,className:i,index:l,ref:s})}}else if(S(n,"ComboboxGroup")){var d=Wo(n.props.children);if(d&&(null==d?void 0:d.length)>0)return F(lo,{label:n.props.label,className:n.props.className},Wo(d))}}))}),[Mo,io,In,ko,Io,so,Co,No]),Bo=t((function(){return Wo(e)}),[e,Wo]),Go=t((function(){if(ko(so))return so.filter(So).map((function(n,o){var e=Eo(n),r=xo===n,t=zn(n);return F(Gn,{key:n,displayName:e,isFocused:r,onRemove:function(){To("next",o),No(n)},onFocus:function(){yo(n)},ref:t})}))}),[ko,so,So,Eo,xo,zn,To,No]),Ko=t((function(){return F(n.Fragment,null,rn&&wo&&F(j,{"aria-label":"Clear selection","aria-disabled":P,disabled:P,ref:Fn,onClick:function(n){P||(No(null),null==ln||ln(n),null==on||on(""),Bn||Zo())},onFocus:ne,className:qn},F(N,{glyph:"XWithCircle"})),F(N,"error"===V?{glyph:"Warning",color:z.red.base,className:Qn}:{glyph:"CaretDown",className:Qn}))}),[rn,wo,P,V,No,ln,on,Bn]),Vo=t((function(){return Mo.some((function(n){return n.hasGlyph}))}),[Mo]),Ho=r((function(){if(!ko(so)&&so===go){var n=zo.find((function(n){return n.displayName===mo||n.value===mo}));if(n&&!hn)bo(n.value);else{var o,e=null!==(o=Eo(so))&&void 0!==o?o:"";fo(e)}}}),[Eo,mo,ko,go,so,hn,zo]),Uo=r((function(){if(wo){if(ko(so))Oo();else if(!ko(so)){var n,o=null!==(n=Eo(so))&&void 0!==n?n:"";fo(o),Xo()}}else fo("")}),[wo,Eo,ko,so]);a((function(){if(mn)if(u(mn)){var n,o=null!==(n=mn.filter((function(n){return So(n)})))&&void 0!==n?n:[];bo(o)}else So(mn)&&bo(mn);else bo(function(n){return n?[]:null}(pn))}),[]),a((function(){if(!b(hn)&&hn!==ho)if(s(hn))bo(null);else if(ko(hn)){var n=hn.filter(So);bo(n)}else bo(So(hn)?hn:null)}),[ko,So,ho,hn]),a((function(){so!==go&&Uo()}),[Uo,go,so]),a((function(){Bn||Vn===Bn||Ho()}),[Bn,Vn,Ho]);var Xo=function(){return Kn(!1)},Zo=function(){return Kn(!0)},Yo=H(l(0),2),$o=Yo[0],qo=Yo[1];a((function(){var n,o;qo(null!==(n=null===(o=Ln.current)||void 0===o?void 0:o.clientWidth)&&void 0!==n?n:0)}),[Ln,Bn,io,so]);var Jo=t((function(){switch(Z){case"loading":return F("span",{className:to},F(N,{glyph:"Refresh",color:z.blue.base,className:no}),_);case"error":return F("span",{className:to},F(N,{glyph:"Warning",color:z.red.base}),J);case"unset":default:return Bo&&Bo.length>0?F("ul",{className:ro},Bo):F("span",{className:to},$)}}),[Bo,$,J,_,Z]),Qo=w(),_o=t((function(){if(Qo&&Ln.current&&Rn.current){var n=Ln.current.getBoundingClientRect(),o=n.top,e=n.bottom,r=Math.max(Qo.height-e,o);return Math.min(274,r-8)}return 274}),[Qo,Ln,Rn]);a((function(){}),[io]);var ne=function(){ao(null)};k("mousedown",(function(n){var o,e,r=n.target;(null===(o=Rn.current)||void 0===o?void 0:o.contains(r))||(null===(e=Ln.current)||void 0===e?void 0:e.contains(r))||!1||Kn(!1)}));var oe=W({popoverZIndex:Mn},Cn?{usePortal:Cn,portalClassName:Nn,portalContainer:On,scrollContainer:jn}:{usePortal:Cn});return F(tn.Provider,{value:{multiselect:pn,darkMode:R,size:A,withIcons:Vo,disabled:P,chipTruncationLocation:vn,chipCharacterLimit:yn,inputValue:mo}},F("div",G({className:E(Hn({darkMode:R,size:A,overflow:dn}),wn)},En),F("div",null,c&&F(p,{id:Dn,htmlFor:Sn},c),v&&F(m,null,v)),F(C,{className:Xn,disabled:P,color:Zn({state:V,darkMode:R})},F("div",{ref:Ln,role:"combobox","aria-expanded":Bn,"aria-controls":Pn,"aria-owns":Pn,tabIndex:-1,className:Un,onMouseDown:function(n){n.target!==Tn.current&&n.preventDefault()},onClick:function(n){if(n.target!==Tn.current){var o=0;if(Tn.current)o=n.nativeEvent.offsetX>Tn.current.offsetLeft+Tn.current.clientWidth?mo.length:0;Co(o)}},onFocus:function(){Oo(),Zo()},onKeyDown:function(n){var o,e,r=null===(o=Rn.current)||void 0===o?void 0:o.contains(document.activeElement);if((null===(e=Ln.current)||void 0===e?void 0:e.contains(document.activeElement))||r){if(n.ctrlKey||n.shiftKey||n.altKey)return;var t=Fo();switch(n.keyCode){case an.Tab:switch(t){case"Input":wo||(Xo(),Ao("first"),To(null));break;case"LastChip":To(null)}break;case an.Escape:Xo(),Ao("first");break;case an.Enter:case an.Space:Bn&&n.preventDefault(),document.activeElement===Tn.current&&Bn&&!s(io)?No(io):document.activeElement===Fn.current&&(No(null),Co());break;case an.Backspace:var i;ko(so)&&0===(null===(i=Tn.current)||void 0===i?void 0:i.selectionStart)?To("last"):Zo();break;case an.ArrowDown:Bn&&n.preventDefault(),Zo(),Ao("next");break;case an.ArrowUp:Bn&&n.preventDefault(),Ao("prev");break;case an.ArrowRight:Ro("right",n);break;case an.ArrowLeft:Ro("left",n);break;default:Bn||Zo()}}},onTransitionEnd:function(){var n,o;qo(null!==(n=null===(o=Ln.current)||void 0===o?void 0:o.clientWidth)&&void 0!==n?n:0)},"data-disabled":P,"data-state":V},F("div",{ref:An,className:Yn({overflow:dn,isOpen:Bn,selection:so,value:mo})},Go,F("input",{"aria-label":null!=I?I:c,"aria-autocomplete":"list","aria-controls":Pn,"aria-labelledby":Dn,ref:Tn,id:Sn,className:$n,placeholder:jo,disabled:null!=P?P:void 0,onChange:function(n){var o=n.target.value;fo(o),null==on||on(o)},value:mo,autoComplete:"off"})),Ko)),"error"===V&&U&&F("div",{className:Jn},U),F(f,G({active:Bn&&!P,spacing:4,align:"bottom",justify:"middle",refEl:Ln,adjustOnMutation:!0,className:oo({darkMode:R,size:A,width:$o})},oe),F("div",{id:Pn,role:"listbox","aria-labelledby":Dn,"aria-expanded":Bn,ref:Rn,className:eo({maxHeight:_o}),onMouseDownCapture:function(n){return n.preventDefault()}},Jo))))}export{so as Combobox,co as ComboboxGroup,pn as ComboboxOption};
2
2
  //# sourceMappingURL=index.js.map