@leafygreen-ui/combobox 6.0.3-next.1 → 6.0.3-next.3
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 +42 -0
- package/dist/Chip/Chip.d.ts.map +1 -1
- package/dist/Combobox/Combobox.d.ts +3 -3
- package/dist/Combobox/Combobox.d.ts.map +1 -1
- package/dist/ComboboxContext/ComboboxContext.d.ts +1 -0
- package/dist/ComboboxContext/ComboboxContext.d.ts.map +1 -1
- package/dist/ComboboxMenu/ComboboxMenu.d.ts +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/test-utils/getTestOptions.testutils.d.ts +2 -0
- package/dist/test-utils/getTestOptions.testutils.d.ts.map +1 -0
- package/dist/utils/ComboboxTestUtils.d.ts +1 -0
- package/dist/utils/ComboboxTestUtils.d.ts.map +1 -1
- package/package.json +12 -12
- package/src/Chip/Chip.tsx +2 -0
- package/src/Combobox/Combobox.tsx +1 -0
- package/src/Combobox.story.tsx +8 -21
- package/src/ComboboxContext/ComboboxContext.tsx +1 -0
- package/stories.js +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getTestOptions.testutils.d.ts","sourceRoot":"","sources":["../../src/test-utils/getTestOptions.testutils.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,kBAAkB,yCA4E9B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxTestUtils.d.ts","sourceRoot":"","sources":["../../src/utils/ComboboxTestUtils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EACb,MAAM,mBAAmB,CAAC;AAG3B,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC,CAAC;CACxC;AAED,oBAAY,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC3C,aAAK,mBAAmB,GAAG;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,YAAY,GAAG,YAAY,CAAC,CAAC;CACvD,GAAG,iBAAiB,GACnB,wBAAwB,CAAC,OAAO,CAAC,CAAC;AAEpC,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,YAAY,CAiB9C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,YAAY,CA+B9C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,0DA+C1B,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,EAC7C,MAAM,GAAE,CAAiB,EACzB,KAAK,CAAC,EAAE,mBAAmB;iCAsDS,mBAAmB;;gBAetB,MAAM,GAAG,WAAW,GAAG,IAAI;gBAC3B,MAAM,MAAM,CAAC,GAAG,MAAM,WAAW,CAAC,GAAG,IAAI;;;gBAgBxC,MAAM,GAAG,WAAW,GAAG,IAAI;gBAC3B,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,IAAI;gBACrC,MAAM,MAAM,CAAC,GAAG,MAAM,WAAW,CAAC,GAAG,IAAI;;yBA5BjD,MAAM,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6D7C;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,cAAe,OAAO,YAAmC,CAAC;AAiC7E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,IAAI,CAAC;QACb,UAAU,QAAQ,CAAC,CAAC;YAClB,cAAc,IAAI,CAAC,CAAC;SACrB;KACF;CACF"}
|
|
1
|
+
{"version":3,"file":"ComboboxTestUtils.d.ts","sourceRoot":"","sources":["../../src/utils/ComboboxTestUtils.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EACb,MAAM,mBAAmB,CAAC;AAG3B,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC,CAAC;CACxC;AAED,oBAAY,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC3C,aAAK,mBAAmB,GAAG;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,YAAY,GAAG,YAAY,CAAC,CAAC;CACvD,GAAG,iBAAiB,GACnB,wBAAwB,CAAC,OAAO,CAAC,CAAC;AAEpC,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,YAAY,CAiB9C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,YAAY,CA+B9C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,0DA+C1B,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,EAC7C,MAAM,GAAE,CAAiB,EACzB,KAAK,CAAC,EAAE,mBAAmB;iCAsDS,mBAAmB;;gBAetB,MAAM,GAAG,WAAW,GAAG,IAAI;gBAC3B,MAAM,MAAM,CAAC,GAAG,MAAM,WAAW,CAAC,GAAG,IAAI;;;gBAgBxC,MAAM,GAAG,WAAW,GAAG,IAAI;gBAC3B,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,IAAI;gBACrC,MAAM,MAAM,CAAC,GAAG,MAAM,WAAW,CAAC,GAAG,IAAI;;yBA5BjD,MAAM,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6D7C;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,cAAe,OAAO,YAAmC,CAAC;AAiC7E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,IAAI,CAAC;QACb,UAAU,QAAQ,CAAC,CAAC;YAClB,cAAc,IAAI,CAAC,CAAC;SACrB;KACF;CACF"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leafygreen-ui/combobox",
|
|
3
|
-
"version": "6.0.3-next.
|
|
3
|
+
"version": "6.0.3-next.3",
|
|
4
4
|
"description": "leafyGreen UI Kit Combobox",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
@@ -20,27 +20,27 @@
|
|
|
20
20
|
"access": "public"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@leafygreen-ui/checkbox": "^12.0.11-next.
|
|
23
|
+
"@leafygreen-ui/checkbox": "^12.0.11-next.3",
|
|
24
24
|
"@leafygreen-ui/emotion": "^4.0.4",
|
|
25
|
-
"@leafygreen-ui/hooks": "^7.7.4-next.
|
|
26
|
-
"@leafygreen-ui/icon": "^11.16.1-next.
|
|
27
|
-
"@leafygreen-ui/icon-button": "^15.0.11-next.
|
|
28
|
-
"@leafygreen-ui/inline-definition": "^6.0.6-next.
|
|
29
|
-
"@leafygreen-ui/input-option": "^1.0.4-next.
|
|
30
|
-
"@leafygreen-ui/lib": "^10.3.4-next.
|
|
25
|
+
"@leafygreen-ui/hooks": "^7.7.4-next.3",
|
|
26
|
+
"@leafygreen-ui/icon": "^11.16.1-next.3",
|
|
27
|
+
"@leafygreen-ui/icon-button": "^15.0.11-next.3",
|
|
28
|
+
"@leafygreen-ui/inline-definition": "^6.0.6-next.3",
|
|
29
|
+
"@leafygreen-ui/input-option": "^1.0.4-next.3",
|
|
30
|
+
"@leafygreen-ui/lib": "^10.3.4-next.3",
|
|
31
31
|
"@leafygreen-ui/palette": "^4.0.4",
|
|
32
|
-
"@leafygreen-ui/popover": "^11.0.10-next.
|
|
32
|
+
"@leafygreen-ui/popover": "^11.0.10-next.3",
|
|
33
33
|
"@leafygreen-ui/tokens": "^2.1.0",
|
|
34
|
-
"@leafygreen-ui/typography": "^16.4.1-next.
|
|
34
|
+
"@leafygreen-ui/typography": "^16.4.1-next.3",
|
|
35
35
|
"chalk": "^4.1.2",
|
|
36
36
|
"lodash": "^4.17.21",
|
|
37
37
|
"polished": "^4.2.2"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
|
-
"@leafygreen-ui/leafygreen-provider": "^3.1.3-next.
|
|
40
|
+
"@leafygreen-ui/leafygreen-provider": "^3.1.3-next.3"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@leafygreen-ui/button": "^20.0.8-next.
|
|
43
|
+
"@leafygreen-ui/button": "^20.0.8-next.3"
|
|
44
44
|
},
|
|
45
45
|
"homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/combobox",
|
|
46
46
|
"repository": {
|
package/src/Chip/Chip.tsx
CHANGED
|
@@ -33,6 +33,7 @@ export const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(
|
|
|
33
33
|
overflow,
|
|
34
34
|
chipTruncationLocation = 'end',
|
|
35
35
|
chipCharacterLimit = 12,
|
|
36
|
+
popoverZIndex,
|
|
36
37
|
} = useContext(ComboboxContext);
|
|
37
38
|
|
|
38
39
|
const isTruncated =
|
|
@@ -139,6 +140,7 @@ export const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(
|
|
|
139
140
|
darkMode={darkMode}
|
|
140
141
|
definition={displayName}
|
|
141
142
|
align="bottom"
|
|
143
|
+
popoverZIndex={popoverZIndex}
|
|
142
144
|
>
|
|
143
145
|
{truncatedName}
|
|
144
146
|
</InlineDefinition>
|
package/src/Combobox.story.tsx
CHANGED
|
@@ -4,11 +4,7 @@ import { StoryFn } from '@storybook/react';
|
|
|
4
4
|
import Button from '@leafygreen-ui/button';
|
|
5
5
|
import { css } from '@leafygreen-ui/emotion';
|
|
6
6
|
import Icon from '@leafygreen-ui/icon';
|
|
7
|
-
import {
|
|
8
|
-
storybookArgTypes,
|
|
9
|
-
storybookExcludedControlParams as defaultExclude,
|
|
10
|
-
type StoryMetaType,
|
|
11
|
-
} from '@leafygreen-ui/lib';
|
|
7
|
+
import { storybookArgTypes, type StoryMetaType } from '@leafygreen-ui/lib';
|
|
12
8
|
|
|
13
9
|
import {
|
|
14
10
|
ComboboxSize,
|
|
@@ -36,10 +32,9 @@ const meta: StoryMetaType<typeof Combobox> = {
|
|
|
36
32
|
),
|
|
37
33
|
],
|
|
38
34
|
parameters: {
|
|
39
|
-
default: '
|
|
35
|
+
default: 'Demo',
|
|
40
36
|
controls: {
|
|
41
37
|
exclude: [
|
|
42
|
-
...defaultExclude,
|
|
43
38
|
'as',
|
|
44
39
|
'filteredOptions',
|
|
45
40
|
'initialValue',
|
|
@@ -201,11 +196,7 @@ const getComboboxOptions = (withGlyphs = true) => [
|
|
|
201
196
|
|
|
202
197
|
const SingleTemplate: StoryFn<ComboboxProps<false>> = (
|
|
203
198
|
args: ComboboxProps<false>,
|
|
204
|
-
) =>
|
|
205
|
-
<div className={wrapperStyle}>
|
|
206
|
-
<Combobox {...args} />
|
|
207
|
-
</div>
|
|
208
|
-
);
|
|
199
|
+
) => <Combobox {...args} />;
|
|
209
200
|
|
|
210
201
|
export const SingleSelect: StoryFn<ComboboxProps<false>> = (
|
|
211
202
|
args: ComboboxProps<false>,
|
|
@@ -245,11 +236,7 @@ WithError.args = {
|
|
|
245
236
|
|
|
246
237
|
const MultiTemplate: StoryFn<ComboboxProps<true>> = (
|
|
247
238
|
args: ComboboxProps<true>,
|
|
248
|
-
) =>
|
|
249
|
-
<div className={wrapperStyle}>
|
|
250
|
-
<Combobox {...args} />
|
|
251
|
-
</div>
|
|
252
|
-
);
|
|
239
|
+
) => <Combobox {...args} />;
|
|
253
240
|
|
|
254
241
|
export const Multiselect = MultiTemplate.bind({});
|
|
255
242
|
Multiselect.args = {
|
|
@@ -287,7 +274,7 @@ export const ControlledSingleSelect = () => {
|
|
|
287
274
|
};
|
|
288
275
|
|
|
289
276
|
return (
|
|
290
|
-
|
|
277
|
+
<div>
|
|
291
278
|
<Combobox
|
|
292
279
|
multiselect={false}
|
|
293
280
|
label="Choose a fruit"
|
|
@@ -301,7 +288,7 @@ export const ControlledSingleSelect = () => {
|
|
|
301
288
|
<ComboboxOption value="carrot" />
|
|
302
289
|
</Combobox>
|
|
303
290
|
<Button onClick={() => setSelection('carrot')}>Select Carrot</Button>
|
|
304
|
-
|
|
291
|
+
</div>
|
|
305
292
|
);
|
|
306
293
|
};
|
|
307
294
|
|
|
@@ -346,14 +333,14 @@ export const Demo: StoryFn<ComboboxProps<boolean>> = (
|
|
|
346
333
|
args: ComboboxProps<boolean>,
|
|
347
334
|
) => {
|
|
348
335
|
return (
|
|
349
|
-
|
|
336
|
+
<>
|
|
350
337
|
{/* Since Combobox doesn't fully refresh when `multiselect` changes, we need to explicitly render a different instance */}
|
|
351
338
|
{args.multiselect ? (
|
|
352
339
|
<Combobox key="multi" {...args} multiselect={true} />
|
|
353
340
|
) : (
|
|
354
341
|
<Combobox key="single" {...args} multiselect={false} />
|
|
355
342
|
)}
|
|
356
|
-
|
|
343
|
+
</>
|
|
357
344
|
);
|
|
358
345
|
};
|
|
359
346
|
Demo.args = {
|
package/stories.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{createContext as n,useContext as r,useRef as t,useMemo as a,useEffect as l,useCallback as o,useState as i}from"react";import c from"@leafygreen-ui/button";import{css as s,cx as u,keyframes as d}from"@leafygreen-ui/emotion";import p,{isComponentGlyph as f}from"@leafygreen-ui/icon";import{Theme as g,createUniqueClassName as m,keyMap as h,isComponentType as b,consoleOnce as y,storybookArgTypes as v,storybookExcludedControlParams as x}from"@leafygreen-ui/lib";import k from"lodash/clone";import w from"lodash/debounce";import E from"lodash/isArray";import C from"lodash/isEqual";import N from"lodash/isNull";import S from"lodash/isString";import L from"lodash/isUndefined";import O from"prop-types";import{useIdAllocator as D,useForwardedRef as M,useAvailableSpace as j,useDynamicRefs as I,usePrevious as P,useAutoScroll as z,useBackdropClick as T}from"@leafygreen-ui/hooks";import F from"@leafygreen-ui/icon-button";import W,{useDarkMode as A}from"@leafygreen-ui/leafygreen-provider";import{Error as X,Label as R,Description as G}from"@leafygreen-ui/typography";import H from"@leafygreen-ui/inline-definition";import{transparentize as V}from"polished";import{palette as q}from"@leafygreen-ui/palette";import{typeScales as K,transitionDuration as Y,spacing as B,hoverRing as Z,focusRing as U,fontFamilies as J,fontWeights as $}from"@leafygreen-ui/tokens";import Q from"@leafygreen-ui/popover";import{leftGlyphClassName as _,InputOption as ee,InputOptionContent as ne}from"@leafygreen-ui/input-option";import re from"lodash/kebabCase";import te from"lodash/escapeRegExp";import ae from"@leafygreen-ui/checkbox";function le(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 oe(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?le(Object(r),!0).forEach((function(n){ce(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):le(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function ie(e){return ie="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},ie(e)}function ce(e,n,r){return(n=function(e){var n=function(e,n){if("object"!=typeof e||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n||"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function se(){return se=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},se.apply(this,arguments)}function ue(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},l=Object.keys(e);for(t=0;t<l.length;t++)r=l[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(t=0;t<l.length;t++)r=l[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function de(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function pe(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,a,l,o,i=[],c=!0,s=!1;try{if(l=(r=r.call(e)).next,0===n){if(Object(r)!==r)return;c=!1}else for(;!(c=(t=l.call(r)).done)&&(i.push(t.value),i.length!==n);c=!0);}catch(e){s=!0,a=e}finally{try{if(!c&&null!=r.return&&(o=r.return(),Object(o)!==o))return}finally{if(s)throw a}}return i}}(e,n)||ge(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function fe(e){return function(e){if(Array.isArray(e))return me(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||ge(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 ge(e,n){if(e){if("string"==typeof e)return me(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)?me(e,n):void 0}}function me(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 he,be,ye,ve,xe,ke,we,Ee,Ce,Ne,Se,Le,Oe,De,Me,je,Ie,Pe,ze,Te,Fe,We,Ae,Xe,Re,Ge,He="Input",Ve="ClearButton",qe="FirstChip",Ke="LastChip",Ye="MiddleChip",Be="Combobox",Ze="Menu",Ue={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},Je={start:"start",middle:"middle",end:"end",none:"none"},$e={expandY:"expand-y",scrollX:"scroll-x",expandX:"expand-x"},Qe={error:"error",none:"none"},_e={unset:"unset",error:"error",loading:"loading"};var en,nn,rn,tn,an,ln,on,cn,sn,un,dn,pn,fn,gn,mn,hn,bn,yn,vn,xn,kn,wn,En,Cn,Nn,Sn,Ln,On,Dn,Mn,jn,In,Pn,zn,Tn,Fn,Wn,An,Xn,Rn,Gn,Hn,Vn,qn,Kn,Yn,Bn,Zn,Un,Jn,$n,Qn,_n,er,nr,rr,tr,ar=(ce(he={},Ue.XSmall,16),ce(he,Ue.Small,K.body1.lineHeight),ce(he,Ue.Default,K.body1.lineHeight),ce(he,Ue.Large,K.body2.lineHeight),he),lr=(ce(be={},Ue.XSmall,K.body1.fontSize),ce(be,Ue.Small,K.body1.fontSize),ce(be,Ue.Default,K.body1.fontSize),ce(be,Ue.Large,K.body2.fontSize),be),or=(ce(ye={},Ue.XSmall,1),ce(ye,Ue.Small,0),ce(ye,Ue.Default,2),ce(ye,Ue.Large,4),ye),ir=function(e){return ar[e]+2*or[e]},cr=s(ve||(ve=de(["\n display: inline-flex;\n align-items: center;\n overflow: hidden;\n white-space: nowrap;\n box-sizing: border-box;\n border-radius: 4px;\n"]))),sr=function(e){return s(xe||(xe=de(["\n font-size: ","px;\n line-height: ","px;\n"])),lr[e],ar[e])},ur=(ce(Ee={},g.Light,s(ke||(ke=de(["\n color: ",";\n background-color: ",";\n\n // TODO: - refine these styles with Design\n &:focus-within {\n background-color: ",";\n }\n "])),q.black,q.gray.light2,q.blue.light2)),ce(Ee,g.Dark,s(we||(we=de(["\n color: ",";\n background-color: ",";\n\n &:focus-within {\n background-color: ",";\n }\n "])),q.gray.light2,q.gray.dark2,q.blue.dark2)),Ee),dr=s(Ce||(Ce=de(["\n cursor: not-allowed;\n pointer-events: none;\n"]))),pr=(ce(Le={},g.Light,s(Ne||(Ne=de(["\n color: ",";\n background-color: ",";\n "])),q.gray.base,q.gray.light3)),ce(Le,g.Dark,s(Se||(Se=de(["\n color: ",";\n background-color: ",";\n box-shadow: inset 0 0 1px 1px ",";\n "])),q.gray.dark2,q.gray.dark4,q.gray.dark2)),Le),fr=(ce(Ie={},Ue.XSmall,s(Oe||(Oe=de(["\n padding-inline-start: 6px;\n padding-inline-end: 2px;\n padding-block: ","px;\n "])),or[Ue.XSmall])),ce(Ie,Ue.Small,s(De||(De=de(["\n padding-inline-start: 6px;\n padding-inline-end: 2px;\n padding-block: ","px;\n "])),or[Ue.Small])),ce(Ie,Ue.Default,s(Me||(Me=de(["\n padding-inline-start: 6px;\n padding-inline-end: 2px;\n padding-block: ","px;\n "])),or[Ue.Default])),ce(Ie,Ue.Large,s(je||(je=de(["\n padding-inline: 10px;\n padding-block: ","px;\n "])),or[Ue.Large])),Ie),gr=s(Pe||(Pe=de(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n outline: none;\n border: none;\n background-color: transparent;\n cursor: pointer;\n transition: background-color ","ms ease-in-out;\n padding: 0 2px;\n"])),Y.faster),mr=function(e){return s(ze||(ze=de(["\n height: ","px;\n"])),ir(e))},hr=(ce(We={},g.Light,s(Te||(Te=de(["\n color: ",";\n\n &:hover {\n color: ",";\n background-color: ",";\n }\n "])),q.gray.dark2,q.black,q.gray.light1)),ce(We,g.Dark,s(Fe||(Fe=de(["\n color: ",";\n\n &:hover {\n color: ",";\n background-color: ",";\n }\n "])),q.gray.light1,q.gray.light3,q.gray.dark1)),We),br=s(Ae||(Ae=de(["\n cursor: not-allowed;\n &:hover {\n color: inherit;\n background-color: unset;\n }\n"]))),yr=(ce(Ge={},g.Light,s(Xe||(Xe=de(["\n color: ",";\n "])),q.gray.light1)),ce(Ge,g.Dark,s(Re||(Re=de(["\n color: ",";\n "])),q.gray.dark2)),Ge),vr=ir,xr=(ce(en={},Ue.XSmall,22),ce(en,Ue.Small,28),ce(en,Ue.Default,36),ce(en,Ue.Large,48),en),kr=function(e){return(xr[e]-vr(e)-2)/2},wr=(ce(nn={},Ue.XSmall,{y:kr(Ue.XSmall),xLeftWithChip:1,xLeftWithoutChip:10,xRight:4}),ce(nn,Ue.Small,{y:kr(Ue.Small),xLeftWithChip:4,xLeftWithoutChip:10,xRight:8}),ce(nn,Ue.Default,{y:kr(Ue.Default),xLeftWithChip:6,xLeftWithoutChip:12,xRight:12}),ce(nn,Ue.Large,{y:kr(Ue.Large),xLeftWithChip:B[2]-1,xLeftWithoutChip:B[2]-1,xRight:B[2]-1}),nn),Er=B[3],Cr=m("combobox-chip"),Nr=function(e){return s(rn||(rn=de(["\n font-family: ",";\n width: 100%;\n min-width: ","px;\n "])),J.default,lr[e]+2*wr[e].xLeftWithChip+Er+2)},Sr=s(tn||(tn=de(["\n display: flex;\n align-items: center;\n gap: ","px;\n cursor: text;\n transition: ","ms ease-in-out;\n transition-property: background-color, box-shadow, border-color;\n border: 1px solid;\n width: 100%;\n max-width: 100%;\n border-radius: 6px;\n position: relative;\n overflow: hidden;\n\n // Overflow shadow\n ::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 20px;\n bottom: -21px;\n left: 50%;\n translate: -50% 0%;\n border-radius: 20%;\n box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);\n transition: ","ms linear;\n transition-property: box-shadow;\n }\n"])),B[2],Y.default,Y.default),Lr=(ce(on={},g.Light,s(an||(an=de(["\n color: ",";\n background-color: ",";\n border-color: ",";\n\n &:hover {\n box-shadow: ",";\n }\n "])),q.gray.dark3,q.white,q.gray.base,Z[g.Light].gray)),ce(on,g.Dark,s(ln||(ln=de(["\n color: ",";\n background-color: ",";\n border-color: ",";\n\n &:hover {\n box-shadow: ",";\n }\n "])),q.gray.light2,q.gray.dark4,q.gray.base,Z[g.Dark].gray)),on),Or=function(e,n){return s(cn||(cn=de(["\n padding-top: ","px;\n padding-bottom: ","px;\n padding-left: ",";\n padding-right: ","px;\n"])),wr[e].y,wr[e].y,"".concat(n?wr[e].xLeftWithChip:wr[e].xLeftWithoutChip,"px"),wr[e].xRight)},Dr=(ce(dn={},g.Light,s(sn||(sn=de(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n "])),q.gray.dark1,q.gray.light2,q.gray.light1)),ce(dn,g.Dark,s(un||(un=de(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n "])),q.gray.dark1,q.gray.dark3,q.gray.dark2)),dn),Mr=(ce(gn={},g.Light,s(pn||(pn=de(["\n border-color: ",";\n "])),q.red.base)),ce(gn,g.Dark,s(fn||(fn=de(["\n border-color: ",";\n "])),q.red.light1)),gn),jr=(ce(bn={},g.Light,s(mn||(mn=de(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),U[g.Light].input)),ce(bn,g.Dark,s(hn||(hn=de(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),U[g.Dark].input)),bn),Ir=s(yn||(yn=de(["\n display: flex;\n align-items: center;\n"]))),Pr=(ce(En={},Ue.XSmall,s(vn||(vn=de(["\n gap: ","px;\n "])),B[1])),ce(En,Ue.Small,s(xn||(xn=de(["\n gap: ","px;\n "])),B[2])),ce(En,Ue.Default,s(kn||(kn=de(["\n gap: ","px;\n "])),B[2])),ce(En,Ue.Large,s(wn||(wn=de(["\n gap: ","px;\n "])),B[2])),En),zr=function(e){var n=e.overflow,r=e.size,t=s(Cn||(Cn=de(["\n flex-grow: 1;\n width: 100%;\n "])));switch(n){case $e.scrollX:return s(Nn||(Nn=de(["\n ","\n display: block;\n height: ","px;\n white-space: nowrap;\n overflow-x: scroll;\n scroll-behavior: smooth;\n scrollbar-width: none;\n line-height: 1;\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n & > ."," {\n margin-inline: 2px;\n\n &:first-child {\n margin-inline-start: 0;\n }\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n "])),t,vr(r),Cr);case $e.expandY:return s(Sn||(Sn=de(["\n ","\n display: flex;\n flex-wrap: wrap;\n gap: ","px;\n overflow-x: hidden;\n min-height: ","px;\n max-height: calc((","px) + (","px * 2));\n "])),t,4,vr(r),3*ir(r),4)}},Tr=s(Ln||(Ln=de(["\n font-family: ",";\n width: 100%;\n border: none;\n cursor: inherit;\n background-color: inherit;\n color: inherit;\n box-sizing: content-box;\n padding: 0;\n margin: 0;\n text-overflow: ellipsis;\n vertical-align: top;\n\n // Only add padding if there are chips\n &:not(:first-child) {\n padding-left: ","px;\n }\n\n &:placeholder-shown {\n min-width: 100%;\n }\n &:focus {\n outline: none;\n }\n"])),J.default,B[1]),Fr=(ce(Mn={},g.Light,s(On||(On=de(["\n &::placeholder {\n color: ",";\n }\n "])),q.gray.dark1)),ce(Mn,g.Dark,s(Dn||(Dn=de(["\n &::placeholder {\n color: ",";\n }\n "])),q.gray.light1)),Mn),Wr=(ce(Pn={},g.Light,s(jn||(jn=de(["\n &::placeholder {\n color: ",";\n }\n "])),q.gray.dark1)),ce(Pn,g.Dark,s(In||(In=de(["\n &::placeholder {\n color: ",";\n }\n "])),q.gray.dark1)),Pn),Ar=function(e){return s(zn||(zn=de(["\n height: ","px;\n font-size: ","px;\n line-height: ","px;\n min-width: ","px;\n"])),vr(e),lr[e],ar[e],lr[e])},Xr=function(e){return s(Tn||(Tn=de(["\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by `scroll-behavior` \n */\n transition: width ease-in-out ",";\n"],["\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by \\`scroll-behavior\\` \n */\n transition: width ease-in-out ",";\n"])),e?"0s":"100ms")},Rr=function(e,n){var r,t=null!==(r=null==n?void 0:n.length)&&void 0!==r?r:0;return s(Fn||(Fn=de(["\n width: ","px;\n max-width: 100%;\n "])),t*lr[e])},Gr=s(Wn||(Wn=de(["\n // Add a negative margin so the button takes up the same space as the regular icons\n margin-block: calc(","px - 100%);\n margin-inline: -6px;\n"])),Er/2),Hr=s(An||(An=de(["\n height: ","px;\n width: ","px;\n"])),Er,Er),Vr=(ce(Gn={},g.Light,s(Xn||(Xn=de(["\n color: ",";\n "])),q.red.base)),ce(Gn,g.Dark,s(Rn||(Rn=de(["\n color: ",";\n "])),q.red.light1)),Gn),qr=function(e){return s(Hn||(Hn=de(["\n font-size: ","px;\n line-height: ","px;\n padding-top: ","px;\n"])),lr[e],ar[e],wr[e].y)},Kr=s(Vn||(Vn=de(["\n margin-bottom: ","px;\n display: flex;\n flex-direction: column;\n"])),B[1]),Yr=s(qn||(qn=de(["\n font-size: ","px;\n line-height: ","px;\n"])),K.large.fontSize,K.large.lineHeight),Br=(ce(Bn={},g.Light,s(Kn||(Kn=de(["\n ::after {\n box-shadow: 0px 0px 7px 5px ",";\n }\n "])),V(.85,q.black))),ce(Bn,g.Dark,s(Yn||(Yn=de(["\n ::after {\n width: 95%;\n box-shadow: 0px -7px 12px 5px rgb(0 0 0 / 50%);\n }\n "])))),Bn),Zr=(ce(Zn={},g.Light,q.red.base),ce(Zn,g.Dark,q.red.light1),Zn),Ur=(ce(Un={},g.Light,q.gray.dark2),ce(Un,g.Dark,q.gray.light1),Un),Jr=(ce(Jn={},g.Light,q.gray.base),ce(Jn,g.Dark,q.gray.dark2),Jn),$r=n({multiselect:!1,size:Ue.Default,withIcons:!1,disabled:!1,isOpen:!1,state:Qe.none,searchState:_e.unset,overflow:$e.expandY}),Qr=e.forwardRef((function(n,o){var i=n.displayName,c=n.isFocused,s=n.onRemove,d=n.onFocus,f=A(),g=f.darkMode,m=f.theme,b=r($r),y=b.size,v=b.disabled,x=b.overflow,k=b.chipTruncationLocation,w=void 0===k?"end":k,E=b.chipCharacterLimit,C=void 0===E?12:E,N=x!==$e.scrollX&&!!C&&!!w&&"none"!==w&&i.length>C,S=t(null),L=a((function(){if(N){var e=C-3;switch(w){case"start":return"…"+i.substring(i.length-e).trim();case"middle":return i.substring(0,e/2).trim()+"…"+i.substring(i.length-e/2).trim();case"end":return i.substring(0,e).trim()+"…";default:return i}}return!1}),[C,w,i,N]);l((function(){var e;c&&!v&&(null==S||null===(e=S.current)||void 0===e||e.focus())}),[v,o,c]);return e.createElement("span",{role:"option","aria-selected":c,"data-testid":"lg-combobox-chip",ref:o,className:u(Cr,cr,ur[m],sr(y),ce({},u(pr[m],dr),v)),onClick:function(e){var n;null!==(n=S.current)&&void 0!==n&&n.contains(e.target)||d()},onKeyDown:function(e){v||e.keyCode!==h.Delete&&e.keyCode!==h.Backspace&&e.keyCode!==h.Enter&&e.keyCode!==h.Space||s()},tabIndex:-1},e.createElement("span",{className:u(fr[y])},L?e.createElement(H,{darkMode:g,definition:i,align:"bottom"},L):i),e.createElement("button",{"aria-label":"Deselect ".concat(i),"aria-disabled":v,disabled:v,ref:S,className:u(gr,hr[m],mr(y),ce({},u(yr[m],br),v)),onClick:function(){v||s()}},e.createElement(p,{glyph:"X"})))}));Qr.displayName="Chip";var _r,et,nt,rt,tt,at,lt,ot,it,ct,st,ut,dt,pt,ft,gt,mt,ht=(ce(_n={},g.Light,s($n||($n=de(["\n padding-top: ","px;\n "])),B[2])),ce(_n,g.Dark,s(Qn||(Qn=de(["\n padding-top: ","px;\n "])),B[2])),_n),bt=s(er||(er=de(["\n cursor: default;\n width: 100%;\n padding: 0 12px 2px;\n outline: none;\n overflow-wrap: anywhere;\n font-size: 12px;\n line-height: 16px;\n font-weight: ",";\n text-transform: uppercase;\n letter-spacing: 0.4px;\n"])),$.bold),yt=(ce(tr={},g.Light,s(nr||(nr=de(["\n color: ",";\n "])),q.gray.dark1)),ce(tr,g.Dark,s(rr||(rr=de(["\n color: ",";\n "])),q.gray.light1)),tr);function vt(n){var r=n.label,t=n.className,a=n.children,l=A().theme,o=D({prefix:"combobox-group"});return e.Children.count(a)>0?e.createElement("div",{className:u(ht[l],t)},e.createElement("div",{className:u(bt,yt[l]),id:o},r),e.createElement("div",{role:"group","aria-labelledby":o},a)):e.createElement(e.Fragment,null)}function xt(e){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}xt.displayName="ComboboxGroup",xt.propTypes={className:O.string,children:O.node.isRequired,label:O.string.isRequired};var kt,wt=(ce(_r={},Ue.XSmall,{x:12,y:8}),ce(_r,Ue.Small,{x:12,y:8}),ce(_r,Ue.Default,{x:12,y:8}),ce(_r,Ue.Large,{x:12,y:8}),_r),Et=function(e){return ar[e]+2*wt[e].y},Ct=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:384;return s(et||(et=de(["\n width: ","px;\n overflow: hidden;\n border-radius: 12px;\n border: 1px solid;\n"])),e)},Nt=(ce(tt={},g.Light,s(nt||(nt=de(["\n box-shadow: 0px 4px 7px ",";\n border-color: ",";\n "])),V(.85,q.black),q.gray.light2)),ce(tt,g.Dark,s(rt||(rt=de(["\n box-shadow: 0px 4px 7px ",";\n border-color: ",";\n "])),V(.85,q.black),q.gray.dark3)),tt),St=s(at||(at=de(["\n position: relative;\n width: 100%;\n margin: 0;\n padding: ","px 0;\n font-family: ",";\n border-radius: inherit;\n overflow-y: auto;\n scroll-behavior: smooth;\n"])),B[2],J.default),Lt=(ce(it={},g.Light,s(lt||(lt=de(["\n color: ",";\n background-color: ",";\n "])),q.black,q.white)),ce(it,g.Dark,s(ot||(ot=de(["\n color: ",";\n background-color: ",";\n "])),q.gray.light1,q.gray.dark3)),it),Ot=s(ct||(ct=de(["\n position: relative;\n margin: 0;\n padding: 0;\n"]))),Dt=s(st||(st=de(["\n font-family: inherit;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"]))),Mt=(ce(pt={},g.Light,s(ut||(ut=de(["\n color: ",";\n "])),q.gray.dark3)),ce(pt,g.Dark,s(dt||(dt=de(["\n color: ",";\n "])),q.gray.light3)),pt),jt=function(e){return s(ft||(ft=de(["\n font-size: ","px;\n line-height: ","px;\n padding: ","px ","px;\n"])),lr[e],ar[e],wt[e].y,wt[e].x)},It=d(gt||(gt=de(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]))),Pt=s(mt||(mt=de(["\n animation: "," 1.5s linear infinite;\n"])),It),zt=["children","id","refEl","labelId","menuWidth","searchLoadingMessage","searchErrorMessage","searchEmptyMessage"],Tt=e.forwardRef((function(n,t){var l=n.children,o=n.id,i=n.refEl,c=n.labelId,d=n.menuWidth,f=n.searchLoadingMessage,g=n.searchErrorMessage,m=n.searchEmptyMessage,h=ue(n,zt),b=A(),y=b.darkMode,v=b.theme,x=r($r),k=x.disabled,w=x.size,E=x.isOpen,C=x.searchState,N=M(t,null),S=j(i),O=L(S)?"unset":"".concat(Math.min(S,256),"px"),D=a((function(){var n=u(Dt,Mt[v],jt(w)),r=u(Dt,jt(w));switch(C){case"loading":return e.createElement("span",{className:n},e.createElement(p,{glyph:"Refresh",color:y?q.blue.light1:q.blue.base,className:Pt}),f);case"error":return e.createElement(X,{className:r},e.createElement(p,{glyph:"Warning",color:y?q.red.light1:q.red.base}),e.createElement("span",null,g));default:return l&&"object"===ie(l)&&"length"in l&&l.length>0?e.createElement("ul",{className:Ot},l):e.createElement("span",{className:n},m)}}),[v,w,C,y,f,g,l,m]);return e.createElement(Q,se({active:E&&!k,spacing:4,align:"bottom",justify:"middle",refEl:i,adjustOnMutation:!0,className:u(Ct(d),Nt[v])},h),e.createElement("div",{ref:N,id:o,role:"listbox","aria-labelledby":c,"aria-expanded":E,className:u(St,Lt[v],s(kt||(kt=de(["\n max-height: ",";\n "])),O)),onMouseDownCapture:function(e){return e.preventDefault()}},D))}));Tt.displayName="ComboboxMenu";var Ft,Wt,At,Xt,Rt,Gt,Ht,Vt,qt,Kt,Yt,Bt,Zt,Ut,Jt,$t,Qt,_t,ea,na,ra,ta,aa,la,oa,ia,ca=function(e){var n=e.scrollHeight;return e.scrollTop<n-e.clientHeight},sa=function(e){var n,r=e.value,t=e.displayName;return{value:null!=r?r:re(t),displayName:null!==(n=null!=t?t:r)&&void 0!==n?n:""}},ua=function n(r){return e.Children.toArray(r).reduce((function(e,r){if(b(r,"ComboboxOption")){var t=sa(r.props),a=t.value,l=t.displayName,o=r.props,i=o.glyph,c=o.disabled;return[].concat(fe(e),[{value:a,displayName:l,isDisabled:!!c,hasGlyph:!!i}])}if(b(r,"ComboboxGroup")){var s=r.props.children;if(s)return[].concat(fe(e),fe(n(s)))}}),[])},da=function(e,n){if(e)return n.find((function(n){return n.value===e}))},pa=function(e,n){var r,t;return e?null!==(r=null===(t=da(e,n))||void 0===t?void 0:t.displayName)&&void 0!==r?r:e:""},fa=function(e){return s(Ft||(Ft=de(["\n font-size: ","px;\n line-height: ","px;\n min-height: ","px;\n padding: ","px ","px;\n gap: ","px;\n\n &:before {\n max-height: ","px;\n }\n"])),lr[e],ar[e],Et(e),wt[e].y,wt[e].x,B[1],Et(e))},ga=(ce(Gt={},Ue.XSmall,s(Wt||(Wt=de(["\n min-width: ","px;\n "])),B[3])),ce(Gt,Ue.Small,s(At||(At=de(["\n min-width: ","px;\n "])),B[3])),ce(Gt,Ue.Default,s(Xt||(Xt=de(["\n min-width: ","px;\n "])),B[3])),ce(Gt,Ue.Large,s(Rt||(Rt=de(["\n min-width: ","px;\n "])),B[4])),Gt),ma=s(Ht||(Ht=de(["\n pointer-events: none;\n gap: 0;\n\n label {\n gap: 0;\n align-items: center;\n }\n"])));s(Vt||(Vt=de(["\n pointer-events: none;\n"])));var ha=function(e){return s(qt||(qt=de(["\n font-weight: ",";\n"])),e?$.bold:$.regular)},ba=(ce(Bt={},g.Light,s(Kt||(Kt=de(["\n color: ",";\n "])),q.gray.dark1)),ce(Bt,g.Dark,s(Yt||(Yt=de(["\n color: ",";\n "])),q.gray.base)),Bt),ya=(ce(Jt={},g.Light,s(Zt||(Zt=de(["\n color: ",";\n "])),q.blue.dark1)),ce(Jt,g.Dark,s(Ut||(Ut=de(["\n color: ",";\n "])),q.blue.light3)),Jt),va=(ce(_t={},g.Light,s($t||($t=de(["\n color: ",";\n "])),q.gray.light1)),ce(_t,g.Dark,s(Qt||(Qt=de(["\n color: ",";\n "])),q.gray.dark1)),_t),xa=(ce(ra={},g.Light,s(ea||(ea=de(["\n color: ",";\n "])),q.blue.base)),ce(ra,g.Dark,s(na||(na=de(["\n color: ",";\n "])),q.blue.light1)),ra),ka=(ce(la={},g.Light,s(ta||(ta=de(["\n color: ",";\n "])),q.gray.light1)),ce(la,g.Dark,s(aa||(aa=de(["\n color: ",";\n "])),q.gray.dark1)),la),wa=s(oa||(oa=de(["\n ."," {\n align-self: baseline;\n }\n"])),_),Ea=s(ia||(ia=de(["\n ."," {\n height: 28px;\n }\n"])),_),Ca=["glyph","isSelected","displayName","isFocused","setSelected","className","description","value","onClick","disabled"],Na=e.forwardRef((function(n,t){var l,i=n.glyph,c=n.isSelected,s=n.displayName,d=n.isFocused,g=n.setSelected,m=n.className,h=n.description,b=n.value,y=n.onClick,v=n.disabled,x=void 0!==v&&v,k=ue(n,Ca),w=A(),E=w.darkMode,C=w.theme,N=r($r),S=N.multiselect,L=N.size,O=N.withIcons,j=N.inputValue,I=M(t,null),P=D({prefix:"combobox-option-text"}),z=o((function(e){e.stopPropagation(),x||(g(),null==y||y(e,b))}),[x,y,g,b]),T=a((function(){return function(n){var r,t=n.withIcons,a=n.isSelected,l=n.glyph,o=n.optionTextId,i=n.disabled,c=n.darkMode,s=n.size,d=n.multiselect,g=n.theme,m=n.isFocused;l&&!f(l)&&console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",l);var h=l&&f(l)?e.cloneElement(l,oe(oe({},l.props),{},{className:u(ba[g],(r={},ce(r,ya[g],m),ce(r,va[g],i),r),l.props.className)})):e.createElement(e.Fragment,null),b=e.createElement(ae,{"aria-labelledby":o,checked:a,tabIndex:-1,disabled:i,darkMode:c,className:ma}),y=e.createElement(p,{glyph:"Checkmark",className:u(ga[s],xa[g],ce({},ka[g],i))});return{leftGlyph:d?t?h:b:t?h:a?y:null,rightGlyph:d?t&&b:t&&a&&y}}({withIcons:O,isSelected:c,glyph:i,theme:C,darkMode:E,size:L,disabled:x,multiselect:S,optionTextId:P,isFocused:d})}),[E,x,i,c,S,P,L,C,O,d]),F=T.leftGlyph,W=T.rightGlyph,X=S&&!O;return e.createElement(ee,se({},k,{as:"li",ref:I,highlighted:d,disabled:x,"aria-label":s,darkMode:E,className:u(fa(L),(l={},ce(l,wa,X),ce(l,Ea,X&&L===Ue.Large),l),m),onClick:z,onKeyDown:z}),e.createElement(ne,{leftGlyph:F,rightGlyph:W,description:h},e.createElement("span",{id:P,className:ha(c)},function(n,r,t){if(r&&t){var a=te(r),l=new RegExp(a,"gi"),o=n.matchAll(l);if(o){for(var i=n.split(""),c=0,s=Array.from(o);c<s.length;c++){var u,d=s[c],p=null!==(u=d.index)&&void 0!==u?u:-1,f=d[0],g=f.length,m=p+f+g,h=new Array(g).fill("");h[0]=e.createElement(t,{key:m},f),i.splice.apply(i,[p,g].concat(fe(h)))}return e.createElement(e.Fragment,null,i)}return e.createElement(e.Fragment,null,n)}return e.createElement(e.Fragment,null,n)}(s,j,"strong"))))}));function Sa(e){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}Na.displayName="ComboboxOption",Sa.displayName="ComboboxOption",Sa.propTypes={displayName:O.string,value:O.string,glyph:O.node,disabled:O.bool,className:O.string,description:O.string,onClick:O.func};var La,Oa=["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"],Da=["className","glyph","disabled"];function Ma(n){var r,c,s,d=n.children,f=n.label,g=n.description,m=n.placeholder,v=void 0===m?"Select":m,x=n["aria-label"],O=n.disabled,M=void 0!==O&&O,j=n.size,X=void 0===j?Ue.Default:j,H=n.darkMode,V=n.state,q=void 0===V?"none":V,K=n.errorMessage,Y=n.searchState,B=void 0===Y?"unset":Y,Z=n.searchEmptyMessage,U=void 0===Z?"No results found":Z,J=n.searchErrorMessage,$=void 0===J?"Could not get results!":J,Q=n.searchLoadingMessage,_=void 0===Q?"Loading results...":Q,ee=n.filteredOptions,ne=n.onFilter,re=n.clearable,te=void 0===re||re,ae=n.onClear,le=n.overflow,de=void 0===le?$e.expandY:le,fe=n.multiselect,ge=void 0!==fe&&fe,me=n.initialValue,he=n.onChange,be=n.value,ye=n.chipTruncationLocation,ve=n.chipCharacterLimit,xe=void 0===ve?12:ve,ke=n.className,we=n.usePortal,Ee=void 0===we||we,Ce=n.portalClassName,Ne=n.portalContainer,Se=n.scrollContainer,Le=n.popoverZIndex,Oe=ue(n,Oa),De=A(H),Me=De.darkMode,je=De.theme,Ie=I({prefix:"option"}),Pe=I({prefix:"chip"}),ze=D({prefix:"combobox-input"}),Te=D({prefix:"combobox-label"}),Fe=D({prefix:"combobox-menu"}),We=t(null),Ae=t(null),Xe=t(null),Re=t(null),Ge=t(null),Je=pe(i(!1),2),_e=Je[0],en=Je[1],nn=P(_e),rn=pe(i(null),2),tn=rn[0],an=rn[1],ln=pe(i(null),2),on=ln[0],cn=ln[1],sn=P(on),un=pe(i(""),2),dn=un[0],pn=un[1],fn=P(dn),gn=pe(i(null),2),mn=gn[0],hn=gn[1],bn=pe(i(!1),2),yn=bn[0],vn=bn[1],xn=!N(on)&&(E(on)&&on.length>0||S(on)),kn=ge&&E(on)&&on.length>0?void 0:v,wn=function(){return en(!1)},En=function(){return en(!0)},Cn=a((function(){return ua(d)}),[d]),Nn=o((function(e){return!ge||"string"!=typeof e&&"number"!=typeof e?!ge&&E(e)&&y.error("Error in Combobox: multiselect is set to `false`, but received an Array value"):y.error("Error in Combobox: multiselect is set to `true`, but received a ".concat(ie(e),' value: "').concat(e,'"')),ge&&E(e)}),[ge]),Sn=o((function(e){!M&&Re&&Re.current&&(Re.current.focus(),L(e)||Re.current.setSelectionRange(e,e))}),[M]),Ln=o((function(e){if(Nn(on)){var n=k(on);N(e)?n.length=0:on.includes(e)?n.splice(n.indexOf(e),1):(n.push(e),pn("")),cn(n),null==he||he(n)}else{var r=e;cn(r),null==he||he(r)}}),[Nn,he,on]),On=o((function(e){return Nn(on)?on.includes(e):e===on}),[Nn,on]),Dn=o((function(e){var n,r,t,a,l=(r=Cn,(n=e)?null!==(t=null===(a=r.find((function(e){return e.displayName===n})))||void 0===a?void 0:a.value)&&void 0!==t?t:n:"");return On(l)}),[Cn,On]),Mn=o((function(e){var n="string"==typeof e?e:e.value;return ee&&ee.length>0?ee.includes(n):!!Dn(dn)||("string"==typeof e?pa(n,Cn):e.displayName).toLowerCase().includes(dn.toLowerCase())}),[ee,Dn,dn,Cn]),jn=a((function(){return Cn.filter(Mn)}),[Cn,Mn]),In=o((function(e){return!!e&&!!Cn.find((function(n){return n.value===e}))}),[Cn]),Pn=o((function(e){return jn?jn.findIndex((function(n){return n.value===e})):-1}),[jn]),zn=o((function(e){if(jn&&jn.length>=e){var n=jn[e];return n?n.value:void 0}}),[jn]),Tn=o((function(){return Nn(on)?on.findIndex((function(e){var n,r;return null===(n=Pe(e))||void 0===n||null===(r=n.current)||void 0===r?void 0:r.contains(document.activeElement)})):-1}),[Pe,Nn,on]),Fn=pe(i(),2),Wn=Fn[0],An=Fn[1],Xn=o((function(e){var n,r=null!==(n=null==jn?void 0:jn.length)&&void 0!==n?n:0,t=r-1>0?r-1:0,a=Pn(tn);switch(e&&_e&&(hn(null),Sn()),e){case"next":var l=zn(a+1<r?a+1:0);an(null!=l?l:null);break;case"prev":var o=zn(a-1>=0?a-1:t);an(null!=o?o:null);break;case"last":var i=zn(t);an(null!=i?i:null);break;default:var c=zn(0);an(null!=c?c:null)}}),[tn,Pn,zn,_e,Sn,null==jn?void 0:jn.length]),Rn=o((function(e,n){if(Nn(on))switch(e){case"next":var r=null!=n?n:Tn(),t=r+1<on.length?r+1:on.length-1,a=on[t];hn(a);break;case"prev":var l=null!=n?n:Tn(),o=l>0?l-1:l<0?on.length-1:0,i=on[o];hn(i);break;case"first":var c=on[0];hn(c);break;case"last":var s=on[on.length-1];hn(s);break;default:hn(null)}}),[Tn,Nn,on]),Gn=o((function(e,n){switch(e&&an(null),e){case"right":switch(Wn){case He:var r,t,a;if((null===(r=Re.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=Re.current)||void 0===t?void 0:t.value.length))null===(a=Ae.current)||void 0===a||a.focus();break;case qe:case Ye:case Ke:if(Wn===Ke||1===(null==on?void 0:on.length)){Sn(0),Rn(null),n.preventDefault();break}Rn("next")}break;case"left":switch(Wn){case Ve:var l;n.preventDefault(),Sn(null==Re||null===(l=Re.current)||void 0===l?void 0:l.value.length);break;case He:case Ye:case Ke:if(Nn(on)){var o;if(Wn===He&&0!==(null===(o=Re.current)||void 0===o?void 0:o.selectionStart))break;Rn("prev")}}break;default:Rn(null)}}),[Wn,Nn,on,Sn,Rn]);l((function(){dn!==fn&&Xn("first")}),[dn,_e,fn,Xn]),z(tn?Ie(tn):void 0,Ge);var Hn=o((function(n){if(b(n,"ComboboxOption")){var r=sa(n.props),t=r.value,a=r.displayName;if(Mn(t)){var l=n.props,o=l.className,i=l.glyph,c=l.disabled,s=ue(l,Da),u=Cn.findIndex((function(e){return e.value===t})),d=tn===t,p=Nn(on)?on.includes(t):on===t,f=Ie(t);return e.createElement(Na,se({},s,{value:t,displayName:a,isFocused:d,isSelected:p,disabled:c,setSelected:function(){an(t),Ln(t),Sn(),t===on&&wn()},glyph:i,className:o,index:u,ref:f}))}}else if(b(n,"ComboboxGroup")){var g=e.Children.map(n.props.children,Hn);if(g&&(null==g?void 0:g.length)>0)return e.createElement(vt,{label:n.props.label,className:n.props.className},e.Children.map(g,Hn))}}),[Cn,Ie,tn,Nn,on,Sn,Mn,Ln]),Vn=a((function(){return e.Children.map(d,Hn)}),[d,Hn]),qn=a((function(){if(Nn(on))return on.filter(In).map((function(n,r){var t=pa(n,Cn),a=mn===n,l=Pe(n),o=r>=on.length-1;return e.createElement(Qr,{key:n,displayName:t,isFocused:a,onRemove:function(){o?(Sn(),Rn(null)):Rn("next",r),Ln(n)},onFocus:function(){hn(n)},ref:l})}))}),[Nn,on,In,Cn,mn,Pe,Ln,Sn,Rn]),Kn=a((function(){return Cn.some((function(e){return e.hasGlyph}))}),[Cn]),Yn=o((function(){if(!Nn(on)&&on===sn){var e=jn.find((function(e){return e.displayName===dn||e.value===dn}));if(e&&!be)cn(e.value);else{var n,r=null!==(n=pa(on,Cn))&&void 0!==n?n:"";pn(r)}}}),[Cn,dn,Nn,sn,on,be,jn]),Bn=o((function(){if(xn){if(Nn(on))rr(de);else if(!Nn(on)){var e,n=null!==(e=pa(on,Cn))&&void 0!==e?e:"";pn(n),wn()}}else pn("")}),[xn,Cn,Nn,on,de]);l((function(){if(me)if(E(me)){var e,n=null!==(e=me.filter((function(e){return In(e)})))&&void 0!==e?e:[];cn(n)}else In(me)&&cn(me);else cn(function(e){return e?[]:null}(ge))}),[]),l((function(){if(!L(be)&&be!==fn)if(N(be))cn(null);else if(Nn(be)){var e=be.filter(In);cn(e)}else cn(In(be)?be:null)}),[Nn,In,fn,be]),l((function(){C(on,sn)||Bn()}),[Bn,sn,on]),l((function(){!_e&&nn&&Yn()}),[_e,nn,Yn]);var Zn=pe(i(0),2),Un=Zn[0],Jn=Zn[1];l((function(){var e,n;Jn(null!==(e=null===(n=We.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)}),[We,_e,tn,on]);T(wn,[Ge,We],_e);var $n=Nn(on)&&!!on.length,Qn=w((function(e){vn(ca(e.target))}),50,{leading:!0}),_n=o((function(e){de===$e.expandY&&Qn(e)}),[Qn,de]);l((function(){Xe.current&&vn(ca(Xe.current))}),[]);var er,nr=oe({popoverZIndex:Le},Ee?{usePortal:Ee,portalClassName:Ce,portalContainer:Ne,scrollContainer:Se}:{usePortal:Ee});return e.createElement(W,{darkMode:Me},e.createElement($r.Provider,{value:{multiselect:ge,size:X,withIcons:Kn,disabled:M,isOpen:_e,state:q,searchState:B,chipTruncationLocation:ye,chipCharacterLimit:xe,inputValue:dn,overflow:de}},e.createElement("div",se({className:u(Nr(X),ke)},Oe),(f||g)&&e.createElement("div",{className:Kr},f&&e.createElement(R,{id:Te,htmlFor:ze,darkMode:Me,disabled:M,className:u(ce({},Yr,X===Ue.Large))},f),g&&e.createElement(G,{darkMode:Me,disabled:M,className:u(ce({},Yr,X===Ue.Large))},g)),e.createElement("div",{ref:We,role:"combobox","aria-expanded":_e,"aria-controls":Fe,"aria-owns":Fe,tabIndex:-1,onMouseDown:function(e){M&&e.preventDefault()},onClick:function(e){if(e.target!==Re.current){var n=0;if(Re.current)n=e.nativeEvent.offsetX>Re.current.offsetLeft+Re.current.clientWidth?dn.length:0;Sn(n)}En()},onFocus:function(e){rr(de),An(function(e){var n,r,t,a;if(!e)return;if(null!==(n=Re.current)&&void 0!==n&&n.contains(e))return He;if(null!==(r=Ae.current)&&void 0!==r&&r.contains(e))return Ve;var l=Nn(on)?on.findIndex((function(n){var r,t;return null===(r=Pe(n))||void 0===r||null===(t=r.current)||void 0===t?void 0:t.contains(e)})):-1;if(Nn(on)){if(0===l)return qe;if(l===on.length-1)return Ke;if(l>0)return Ye}if(null!==(t=Ge.current)&&void 0!==t&&t.contains(e))return Ze;if(null!==(a=We.current)&&void 0!==a&&a.contains(e))return Be}(e.target))},onKeyDown:function(e){var n,r,t=null===(n=Ge.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(r=We.current)||void 0===r?void 0:r.contains(document.activeElement))||t){if(e.ctrlKey||e.shiftKey||e.altKey)return;switch(e.keyCode){case h.Tab:switch(Wn){case"Input":xn||(wn(),Xn("first"),Rn(null));break;case"LastChip":Rn(null)}break;case h.Escape:wn(),Xn("first");break;case h.Enter:Wn!==He||N(tn)||function(e){if("string"==typeof e){var n=da(e,Cn);return!(null==n||!n.isDisabled)}return!!e.isDisabled}(tn)?Wn===Ve&&(Ln(null),Sn()):Ln(tn);break;case h.Backspace:var a;if(Nn(on))"Input"===Wn&&0===(null===(a=Re.current)||void 0===a?void 0:a.selectionStart)&&Rn("last");En();break;case h.ArrowDown:_e?(e.preventDefault(),Xn("next")):En();break;case h.ArrowUp:_e?(e.preventDefault(),Xn("prev")):En();break;case h.ArrowRight:Gn("right",e);break;case h.ArrowLeft:Gn("left",e);break;default:_e||En()}}},onTransitionEnd:function(){var e,n;Jn(null!==(e=null===(n=We.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)},className:u(Sr,Lr[je],Or(X,$n),(r={},ce(r,Dr[je],M),ce(r,Mr[je],q===Qe.error),ce(r,jr[je],(er=He,er===Wn)),ce(r,Br[je],yn),r))},e.createElement("div",{onScroll:_n,ref:Xe,className:zr({size:X,overflow:de})},qn,e.createElement("input",{"aria-label":null!=x?x:f,"aria-autocomplete":"list","aria-controls":Fe,"aria-labelledby":Te,ref:Re,id:ze,className:u(Tr,Ar(X),Fr[je],Xr(_e),(c={},ce(c,Rr(X,dn),Nn(on)),ce(c,Wr[je],M),c)),placeholder:kn,disabled:null!=M?M:void 0,onChange:function(e){var n=e.target.value;pn(n),null==ne||ne(n)},value:dn,autoComplete:"off"})),e.createElement("div",{className:u(Ir,Pr[X])},"error"===q&&e.createElement(p,{glyph:"Warning",fill:Zr[je],className:Hr}),te&&xn&&!M&&e.createElement(F,{"aria-label":"Clear selection","aria-disabled":M,disabled:M,ref:Ae,onClick:function(e){M||(e.stopPropagation(),Ln(null),null==ae||ae(e),null==ne||ne(""),Sn())},onFocus:function(){an(null)},className:u(Gr),darkMode:Me},e.createElement(p,{glyph:"XWithCircle"})),e.createElement(p,{glyph:"CaretDown",className:Hr,fill:u((s={},ce(s,Ur[je],!M),ce(s,Jr[je],M),s))}))),"error"===q&&K&&e.createElement("div",{className:u(Vr[je],qr(X))},K),e.createElement(Tt,se({id:Fe,labelId:Te,refEl:We,ref:Ge,menuWidth:Un,searchLoadingMessage:_,searchErrorMessage:$,searchEmptyMessage:U},nr),Vn))));function rr(e){Xe&&Xe.current&&(e===$e.scrollX&&(Xe.current.scrollLeft=Xe.current.scrollWidth),e===$e.expandY&&(Xe.current.scrollTop=Xe.current.scrollHeight))}}Ma.propTypes={multiselect:O.bool,value:O.oneOfType([O.string,O.arrayOf(O.string)]),initialValue:O.oneOfType([O.string,O.arrayOf(O.string)]),overflow:O.oneOf(Object.values($e)),darkMode:O.bool,label:O.string,"aria-label":O.string,children:O.node,onChange:O.func,chipCharacterLimit:O.number,chipTruncationLocation:O.oneOf(Object.values(Je)),onClear:O.func,onFilter:O.func,clearable:O.bool,searchLoadingMessage:O.string,searchErrorMessage:O.string,searchEmptyMessage:O.string,searchState:O.oneOf(Object.values(_e)),errorMessage:O.string,state:O.oneOf(Object.values(Qe)),size:O.oneOf(Object.values(Ue)),disabled:O.bool,description:O.string,placeholder:O.string,filteredOptions:O.arrayOf(O.string),popoverZIndex:O.number,usePortal:O.bool,scrollContainer:O.elementType,portalContainer:O.elementType,portalClassName:O.string};var ja=s(La||(La=de(["\n width: 256px;\n padding-block: 64px;\n display: flex;\n"]))),Ia={title:"Components/Combobox",component:Ma,decorators:[function(n){return e.createElement("div",{className:ja},e.createElement(n,null))}],parameters:{default:"SingleSelect",controls:{exclude:[].concat(fe(x),["as","filteredOptions","initialValue","setError","value","children"])}},argTypes:{darkMode:v.darkMode,multiselect:{control:"boolean"},disabled:{control:"boolean"},clearable:{control:"boolean"},label:{control:"text"},description:{control:"text"},placeholder:{control:"text"},size:{options:Object.values(Ue),control:"select"},state:{options:Object.values(Qe),control:"select"},errorMessage:{control:"text",if:{arg:"state",eq:Qe.error}},searchEmptyMessage:{control:"text"},searchState:{options:Object.values(_e),control:"select"},searchErrorMessage:{control:"text",if:{arg:"searchState",eq:_e.error}},searchLoadingMessage:{control:"text",if:{arg:"searchState",eq:_e.loading}},chipTruncationLocation:{options:Object.values(Je),control:"select",if:{arg:"multiselect"}},chipCharacterLimit:{control:"number",if:{arg:"multiselect"}},overflow:{options:Object.values($e),control:"select",if:{arg:"multiselect"}}},args:{multiselect:!1,darkMode:!1,disabled:!1,clearable:!0}},Pa=function(){var n=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];return[e.createElement(Sa,{key:"apple",value:"apple",displayName:"Apple","data-testid":"test-id",description:"Do I keep the doctor away?",onClick:function(e,n){return console.log(e,n)},className:"className"}),e.createElement(Sa,{key:"banana",value:"banana",displayName:"Banana"}),e.createElement(Sa,{key:"carrot",value:"carrot",displayName:"Carrot",disabled:!0}),e.createElement(Sa,{key:"pomegranate",value:"pomegranate",displayName:"Pomegranate",glyph:n?e.createElement(p,{glyph:"Warning"}):void 0,description:"Watch out, I stain everything I touch LOL",disabled:!0}),e.createElement(Sa,{key:"plantain",value:"plantain",displayName:"Plantain",glyph:n?e.createElement(p,{glyph:"Connect"}):void 0,description:"Don't confuse me with a banana",onClick:function(){return console.log("I was clicked")}}),e.createElement(Sa,{key:"paragraph",value:"paragraph",displayName:"Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper."}),e.createElement(Sa,{key:"hash",value:"hash",displayName:"5f4dcc3b5aa765d61d8327deb882cf995f4dcc3b5aa765d61d8327deb882cf99"}),e.createElement(Sa,{key:"dragonfruit",value:"dragonfruit",displayName:"Dragonfruit",description:"Rawr"}),e.createElement(Sa,{key:"eggplant",value:"eggplant",displayName:"Eggplant"}),e.createElement(Sa,{key:"fig",value:"fig",displayName:"Fig"}),e.createElement(Sa,{key:"grape",value:"grape",displayName:"Grape"}),e.createElement(Sa,{key:"honeydew",value:"honeydew",displayName:"Honeydew"}),e.createElement(Sa,{key:"iceberg-lettuce",value:"iceberg-lettuce",displayName:"Iceberg lettuce"}),e.createElement(xt,{key:"peppers",label:"Peppers"},e.createElement(Sa,{key:"cayenne",value:"cayenne",displayName:"Cayenne"}),e.createElement(Sa,{key:"ghost-pepper",value:"ghost-pepper",displayName:"Ghost pepper"}),e.createElement(Sa,{key:"habanero",value:"habanero",displayName:"Habanero"}),e.createElement(Sa,{key:"jalapeno",value:"jalapeno",displayName:"Jalapeño"}),e.createElement(Sa,{key:"red-pepper",value:"red-pepper",displayName:"Red pepper"}),e.createElement(Sa,{key:"scotch-bonnet",value:"scotch-bonnet",displayName:"Scotch bonnet",description:"Don't touch your eyes"}))]},za=function(n){return e.createElement("div",{className:ja},e.createElement(Ma,n))},Ta=function(n){return e.createElement(Ma,n)};Ta.args={label:"Choose a fruit",description:"Please pick one",placeholder:"Select fruit",multiselect:!1},Ta.argTypes={multiselect:{control:"none"}};var Fa=za.bind({});Fa.args={label:"Choose a fruit",description:"Please pick one",placeholder:"Select fruit",multiselect:!1,children:Pa(!1)},Fa.argTypes={multiselect:{control:"none"}};var Wa=za.bind({});Wa.args={label:"Choose a fruit",description:"Please pick one",placeholder:"Select fruit",value:"pomegranates",errorMessage:"No Pomegranates!",state:"error"};var Aa=function(n){return e.createElement("div",{className:ja},e.createElement(Ma,n))},Xa=Aa.bind({});Xa.args={label:"Choose a fruit",description:"Please pick some",placeholder:"Select fruit",multiselect:!0,children:Pa()},Xa.argTypes={multiselect:{control:"none"}};var Ra=Aa.bind({});Ra.args={label:"Choose a fruit",description:"Please pick some",placeholder:"Select fruit",multiselect:!0,children:Pa(!1)},Ra.argTypes={multiselect:{control:"none"}};var Ga=function(){var n=pe(i(null),2),r=n[0],t=n[1];return e.createElement(e.Fragment,null,e.createElement(Ma,{multiselect:!1,label:"Choose a fruit",description:"Please pick one",placeholder:"Select fruit",onChange:function(e){t(e)},value:r},e.createElement(Sa,{value:"apple"}),e.createElement(Sa,{value:"banana"}),e.createElement(Sa,{value:"carrot"})),e.createElement(c,{onClick:function(){return t("carrot")}},"Select Carrot"))},Ha=function(){var n=["apple","banana","carrot","dragonfruit","eggplant","fig","grape","honeydew","iceberg-lettuce","jalapeño"],r=pe(i(["carrot","grape"]),2),t=r[0],a=r[1];return e.createElement(Ma,{label:"Choose some fruit",placeholder:"Select fruit",initialValue:["apple","fig","raspberry"],multiselect:!0,overflow:"expand-y",onFilter:function(e){a(n.filter((function(n){return n.includes(e)})))},filteredOptions:t},n.map((function(n){return e.createElement(Sa,{key:n,value:n})})))},Va=function(n){return e.createElement("div",{className:ja},n.multiselect?e.createElement(Ma,se({key:"multi"},n,{multiselect:!0})):e.createElement(Ma,se({key:"single"},n,{multiselect:!1})))};Va.args={label:"Choose a fruit",description:"Please pick fruit(s)",placeholder:"Select fruit",children:Pa()};export{Ga as ControlledSingleSelect,Va as Demo,Ha as ExternalFilter,Xa as Multiselect,Ra as MultiselectWithoutGlyphs,Ta as SingleSelect,Fa as SingleSelectWithoutGlyphs,Wa as WithError,Ia as default};
|
|
1
|
+
import e,{createContext as n,useContext as r,useRef as t,useMemo as a,useEffect as l,useCallback as o,useState as i}from"react";import c from"@leafygreen-ui/button";import{css as s,cx as u,keyframes as d}from"@leafygreen-ui/emotion";import p,{isComponentGlyph as f}from"@leafygreen-ui/icon";import{Theme as g,createUniqueClassName as m,keyMap as h,isComponentType as b,consoleOnce as y,storybookArgTypes as v}from"@leafygreen-ui/lib";import x from"lodash/clone";import k from"lodash/debounce";import w from"lodash/isArray";import E from"lodash/isEqual";import C from"lodash/isNull";import N from"lodash/isString";import S from"lodash/isUndefined";import L from"prop-types";import{useIdAllocator as O,useForwardedRef as D,useAvailableSpace as M,useDynamicRefs as j,usePrevious as I,useAutoScroll as P,useBackdropClick as z}from"@leafygreen-ui/hooks";import T from"@leafygreen-ui/icon-button";import F,{useDarkMode as W}from"@leafygreen-ui/leafygreen-provider";import{Error as A,Label as X,Description as R}from"@leafygreen-ui/typography";import G from"@leafygreen-ui/inline-definition";import{transparentize as H}from"polished";import{palette as V}from"@leafygreen-ui/palette";import{typeScales as q,transitionDuration as Z,spacing as K,hoverRing as Y,focusRing as B,fontFamilies as U,fontWeights as J}from"@leafygreen-ui/tokens";import $ from"@leafygreen-ui/popover";import{leftGlyphClassName as Q,InputOption as _,InputOptionContent as ee}from"@leafygreen-ui/input-option";import ne from"lodash/kebabCase";import re from"lodash/escapeRegExp";import te from"@leafygreen-ui/checkbox";function ae(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 le(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?ae(Object(r),!0).forEach((function(n){ie(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ae(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function oe(e){return oe="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},oe(e)}function ie(e,n,r){return(n=function(e){var n=function(e,n){if("object"!=typeof e||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n||"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function ce(){return ce=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},ce.apply(this,arguments)}function se(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},l=Object.keys(e);for(t=0;t<l.length;t++)r=l[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(t=0;t<l.length;t++)r=l[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function ue(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function de(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,a,l,o,i=[],c=!0,s=!1;try{if(l=(r=r.call(e)).next,0===n){if(Object(r)!==r)return;c=!1}else for(;!(c=(t=l.call(r)).done)&&(i.push(t.value),i.length!==n);c=!0);}catch(e){s=!0,a=e}finally{try{if(!c&&null!=r.return&&(o=r.return(),Object(o)!==o))return}finally{if(s)throw a}}return i}}(e,n)||fe(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 pe(e){return function(e){if(Array.isArray(e))return ge(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||fe(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 fe(e,n){if(e){if("string"==typeof e)return ge(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?ge(e,n):void 0}}function ge(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}var me,he,be,ye,ve,xe,ke,we,Ee,Ce,Ne,Se,Le,Oe,De,Me,je,Ie,Pe,ze,Te,Fe,We,Ae,Xe,Re,Ge="Input",He="ClearButton",Ve="FirstChip",qe="LastChip",Ze="MiddleChip",Ke="Combobox",Ye="Menu",Be={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},Ue={start:"start",middle:"middle",end:"end",none:"none"},Je={expandY:"expand-y",scrollX:"scroll-x",expandX:"expand-x"},$e={error:"error",none:"none"},Qe={unset:"unset",error:"error",loading:"loading"};var _e,en,nn,rn,tn,an,ln,on,cn,sn,un,dn,pn,fn,gn,mn,hn,bn,yn,vn,xn,kn,wn,En,Cn,Nn,Sn,Ln,On,Dn,Mn,jn,In,Pn,zn,Tn,Fn,Wn,An,Xn,Rn,Gn,Hn,Vn,qn,Zn,Kn,Yn,Bn,Un,Jn,$n,Qn,_n,er,nr,rr,tr=(ie(me={},Be.XSmall,16),ie(me,Be.Small,q.body1.lineHeight),ie(me,Be.Default,q.body1.lineHeight),ie(me,Be.Large,q.body2.lineHeight),me),ar=(ie(he={},Be.XSmall,q.body1.fontSize),ie(he,Be.Small,q.body1.fontSize),ie(he,Be.Default,q.body1.fontSize),ie(he,Be.Large,q.body2.fontSize),he),lr=(ie(be={},Be.XSmall,1),ie(be,Be.Small,0),ie(be,Be.Default,2),ie(be,Be.Large,4),be),or=function(e){return tr[e]+2*lr[e]},ir=s(ye||(ye=ue(["\n display: inline-flex;\n align-items: center;\n overflow: hidden;\n white-space: nowrap;\n box-sizing: border-box;\n border-radius: 4px;\n"]))),cr=function(e){return s(ve||(ve=ue(["\n font-size: ","px;\n line-height: ","px;\n"])),ar[e],tr[e])},sr=(ie(we={},g.Light,s(xe||(xe=ue(["\n color: ",";\n background-color: ",";\n\n // TODO: - refine these styles with Design\n &:focus-within {\n background-color: ",";\n }\n "])),V.black,V.gray.light2,V.blue.light2)),ie(we,g.Dark,s(ke||(ke=ue(["\n color: ",";\n background-color: ",";\n\n &:focus-within {\n background-color: ",";\n }\n "])),V.gray.light2,V.gray.dark2,V.blue.dark2)),we),ur=s(Ee||(Ee=ue(["\n cursor: not-allowed;\n pointer-events: none;\n"]))),dr=(ie(Se={},g.Light,s(Ce||(Ce=ue(["\n color: ",";\n background-color: ",";\n "])),V.gray.base,V.gray.light3)),ie(Se,g.Dark,s(Ne||(Ne=ue(["\n color: ",";\n background-color: ",";\n box-shadow: inset 0 0 1px 1px ",";\n "])),V.gray.dark2,V.gray.dark4,V.gray.dark2)),Se),pr=(ie(je={},Be.XSmall,s(Le||(Le=ue(["\n padding-inline-start: 6px;\n padding-inline-end: 2px;\n padding-block: ","px;\n "])),lr[Be.XSmall])),ie(je,Be.Small,s(Oe||(Oe=ue(["\n padding-inline-start: 6px;\n padding-inline-end: 2px;\n padding-block: ","px;\n "])),lr[Be.Small])),ie(je,Be.Default,s(De||(De=ue(["\n padding-inline-start: 6px;\n padding-inline-end: 2px;\n padding-block: ","px;\n "])),lr[Be.Default])),ie(je,Be.Large,s(Me||(Me=ue(["\n padding-inline: 10px;\n padding-block: ","px;\n "])),lr[Be.Large])),je),fr=s(Ie||(Ie=ue(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n outline: none;\n border: none;\n background-color: transparent;\n cursor: pointer;\n transition: background-color ","ms ease-in-out;\n padding: 0 2px;\n"])),Z.faster),gr=function(e){return s(Pe||(Pe=ue(["\n height: ","px;\n"])),or(e))},mr=(ie(Fe={},g.Light,s(ze||(ze=ue(["\n color: ",";\n\n &:hover {\n color: ",";\n background-color: ",";\n }\n "])),V.gray.dark2,V.black,V.gray.light1)),ie(Fe,g.Dark,s(Te||(Te=ue(["\n color: ",";\n\n &:hover {\n color: ",";\n background-color: ",";\n }\n "])),V.gray.light1,V.gray.light3,V.gray.dark1)),Fe),hr=s(We||(We=ue(["\n cursor: not-allowed;\n &:hover {\n color: inherit;\n background-color: unset;\n }\n"]))),br=(ie(Re={},g.Light,s(Ae||(Ae=ue(["\n color: ",";\n "])),V.gray.light1)),ie(Re,g.Dark,s(Xe||(Xe=ue(["\n color: ",";\n "])),V.gray.dark2)),Re),yr=or,vr=(ie(_e={},Be.XSmall,22),ie(_e,Be.Small,28),ie(_e,Be.Default,36),ie(_e,Be.Large,48),_e),xr=function(e){return(vr[e]-yr(e)-2)/2},kr=(ie(en={},Be.XSmall,{y:xr(Be.XSmall),xLeftWithChip:1,xLeftWithoutChip:10,xRight:4}),ie(en,Be.Small,{y:xr(Be.Small),xLeftWithChip:4,xLeftWithoutChip:10,xRight:8}),ie(en,Be.Default,{y:xr(Be.Default),xLeftWithChip:6,xLeftWithoutChip:12,xRight:12}),ie(en,Be.Large,{y:xr(Be.Large),xLeftWithChip:K[2]-1,xLeftWithoutChip:K[2]-1,xRight:K[2]-1}),en),wr=K[3],Er=m("combobox-chip"),Cr=function(e){return s(nn||(nn=ue(["\n font-family: ",";\n width: 100%;\n min-width: ","px;\n "])),U.default,ar[e]+2*kr[e].xLeftWithChip+wr+2)},Nr=s(rn||(rn=ue(["\n display: flex;\n align-items: center;\n gap: ","px;\n cursor: text;\n transition: ","ms ease-in-out;\n transition-property: background-color, box-shadow, border-color;\n border: 1px solid;\n width: 100%;\n max-width: 100%;\n border-radius: 6px;\n position: relative;\n overflow: hidden;\n\n // Overflow shadow\n ::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 20px;\n bottom: -21px;\n left: 50%;\n translate: -50% 0%;\n border-radius: 20%;\n box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);\n transition: ","ms linear;\n transition-property: box-shadow;\n }\n"])),K[2],Z.default,Z.default),Sr=(ie(ln={},g.Light,s(tn||(tn=ue(["\n color: ",";\n background-color: ",";\n border-color: ",";\n\n &:hover {\n box-shadow: ",";\n }\n "])),V.gray.dark3,V.white,V.gray.base,Y[g.Light].gray)),ie(ln,g.Dark,s(an||(an=ue(["\n color: ",";\n background-color: ",";\n border-color: ",";\n\n &:hover {\n box-shadow: ",";\n }\n "])),V.gray.light2,V.gray.dark4,V.gray.base,Y[g.Dark].gray)),ln),Lr=function(e,n){return s(on||(on=ue(["\n padding-top: ","px;\n padding-bottom: ","px;\n padding-left: ",";\n padding-right: ","px;\n"])),kr[e].y,kr[e].y,"".concat(n?kr[e].xLeftWithChip:kr[e].xLeftWithoutChip,"px"),kr[e].xRight)},Or=(ie(un={},g.Light,s(cn||(cn=ue(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n "])),V.gray.dark1,V.gray.light2,V.gray.light1)),ie(un,g.Dark,s(sn||(sn=ue(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n "])),V.gray.dark1,V.gray.dark3,V.gray.dark2)),un),Dr=(ie(fn={},g.Light,s(dn||(dn=ue(["\n border-color: ",";\n "])),V.red.base)),ie(fn,g.Dark,s(pn||(pn=ue(["\n border-color: ",";\n "])),V.red.light1)),fn),Mr=(ie(hn={},g.Light,s(gn||(gn=ue(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),B[g.Light].input)),ie(hn,g.Dark,s(mn||(mn=ue(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),B[g.Dark].input)),hn),jr=s(bn||(bn=ue(["\n display: flex;\n align-items: center;\n"]))),Ir=(ie(wn={},Be.XSmall,s(yn||(yn=ue(["\n gap: ","px;\n "])),K[1])),ie(wn,Be.Small,s(vn||(vn=ue(["\n gap: ","px;\n "])),K[2])),ie(wn,Be.Default,s(xn||(xn=ue(["\n gap: ","px;\n "])),K[2])),ie(wn,Be.Large,s(kn||(kn=ue(["\n gap: ","px;\n "])),K[2])),wn),Pr=function(e){var n=e.overflow,r=e.size,t=s(En||(En=ue(["\n flex-grow: 1;\n width: 100%;\n "])));switch(n){case Je.scrollX:return s(Cn||(Cn=ue(["\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,yr(r),Er);case Je.expandY:return s(Nn||(Nn=ue(["\n ","\n display: flex;\n flex-wrap: wrap;\n gap: ","px;\n overflow-x: hidden;\n min-height: ","px;\n max-height: calc((","px) + (","px * 2));\n "])),t,4,yr(r),3*or(r),4)}},zr=s(Sn||(Sn=ue(["\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"])),U.default,K[1]),Tr=(ie(Dn={},g.Light,s(Ln||(Ln=ue(["\n &::placeholder {\n color: ",";\n }\n "])),V.gray.dark1)),ie(Dn,g.Dark,s(On||(On=ue(["\n &::placeholder {\n color: ",";\n }\n "])),V.gray.light1)),Dn),Fr=(ie(In={},g.Light,s(Mn||(Mn=ue(["\n &::placeholder {\n color: ",";\n }\n "])),V.gray.dark1)),ie(In,g.Dark,s(jn||(jn=ue(["\n &::placeholder {\n color: ",";\n }\n "])),V.gray.dark1)),In),Wr=function(e){return s(Pn||(Pn=ue(["\n height: ","px;\n font-size: ","px;\n line-height: ","px;\n min-width: ","px;\n"])),yr(e),ar[e],tr[e],ar[e])},Ar=function(e){return s(zn||(zn=ue(["\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")},Xr=function(e,n){var r,t=null!==(r=null==n?void 0:n.length)&&void 0!==r?r:0;return s(Tn||(Tn=ue(["\n width: ","px;\n max-width: 100%;\n "])),t*ar[e])},Rr=s(Fn||(Fn=ue(["\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"])),wr/2),Gr=s(Wn||(Wn=ue(["\n height: ","px;\n width: ","px;\n"])),wr,wr),Hr=(ie(Rn={},g.Light,s(An||(An=ue(["\n color: ",";\n "])),V.red.base)),ie(Rn,g.Dark,s(Xn||(Xn=ue(["\n color: ",";\n "])),V.red.light1)),Rn),Vr=function(e){return s(Gn||(Gn=ue(["\n font-size: ","px;\n line-height: ","px;\n padding-top: ","px;\n"])),ar[e],tr[e],kr[e].y)},qr=s(Hn||(Hn=ue(["\n margin-bottom: ","px;\n display: flex;\n flex-direction: column;\n"])),K[1]),Zr=s(Vn||(Vn=ue(["\n font-size: ","px;\n line-height: ","px;\n"])),q.large.fontSize,q.large.lineHeight),Kr=(ie(Kn={},g.Light,s(qn||(qn=ue(["\n ::after {\n box-shadow: 0px 0px 7px 5px ",";\n }\n "])),H(.85,V.black))),ie(Kn,g.Dark,s(Zn||(Zn=ue(["\n ::after {\n width: 95%;\n box-shadow: 0px -7px 12px 5px rgb(0 0 0 / 50%);\n }\n "])))),Kn),Yr=(ie(Yn={},g.Light,V.red.base),ie(Yn,g.Dark,V.red.light1),Yn),Br=(ie(Bn={},g.Light,V.gray.dark2),ie(Bn,g.Dark,V.gray.light1),Bn),Ur=(ie(Un={},g.Light,V.gray.base),ie(Un,g.Dark,V.gray.dark2),Un),Jr=n({multiselect:!1,size:Be.Default,withIcons:!1,disabled:!1,isOpen:!1,state:$e.none,searchState:Qe.unset,overflow:Je.expandY}),$r=e.forwardRef((function(n,o){var i=n.displayName,c=n.isFocused,s=n.onRemove,d=n.onFocus,f=W(),g=f.darkMode,m=f.theme,b=r(Jr),y=b.size,v=b.disabled,x=b.overflow,k=b.chipTruncationLocation,w=void 0===k?"end":k,E=b.chipCharacterLimit,C=void 0===E?12:E,N=b.popoverZIndex,S=x!==Je.scrollX&&!!C&&!!w&&"none"!==w&&i.length>C,L=t(null),O=a((function(){if(S){var e=C-3;switch(w){case"start":return"…"+i.substring(i.length-e).trim();case"middle":return i.substring(0,e/2).trim()+"…"+i.substring(i.length-e/2).trim();case"end":return i.substring(0,e).trim()+"…";default:return i}}return!1}),[C,w,i,S]);l((function(){var e;c&&!v&&(null==L||null===(e=L.current)||void 0===e||e.focus())}),[v,o,c]);return e.createElement("span",{role:"option","aria-selected":c,"data-testid":"lg-combobox-chip",ref:o,className:u(Er,ir,sr[m],cr(y),ie({},u(dr[m],ur),v)),onClick:function(e){var n;null!==(n=L.current)&&void 0!==n&&n.contains(e.target)||d()},onKeyDown:function(e){v||e.keyCode!==h.Delete&&e.keyCode!==h.Backspace&&e.keyCode!==h.Enter&&e.keyCode!==h.Space||s()},tabIndex:-1},e.createElement("span",{className:u(pr[y])},O?e.createElement(G,{darkMode:g,definition:i,align:"bottom",popoverZIndex:N},O):i),e.createElement("button",{"aria-label":"Deselect ".concat(i),"aria-disabled":v,disabled:v,ref:L,className:u(fr,mr[m],gr(y),ie({},u(br[m],hr),v)),onClick:function(){v||s()}},e.createElement(p,{glyph:"X"})))}));$r.displayName="Chip";var Qr,_r,et,nt,rt,tt,at,lt,ot,it,ct,st,ut,dt,pt,ft,gt,mt=(ie(Qn={},g.Light,s(Jn||(Jn=ue(["\n padding-top: ","px;\n "])),K[2])),ie(Qn,g.Dark,s($n||($n=ue(["\n padding-top: ","px;\n "])),K[2])),Qn),ht=s(_n||(_n=ue(["\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"])),J.bold),bt=(ie(rr={},g.Light,s(er||(er=ue(["\n color: ",";\n "])),V.gray.dark1)),ie(rr,g.Dark,s(nr||(nr=ue(["\n color: ",";\n "])),V.gray.light1)),rr);function yt(n){var r=n.label,t=n.className,a=n.children,l=W().theme,o=O({prefix:"combobox-group"});return e.Children.count(a)>0?e.createElement("div",{className:u(mt[l],t)},e.createElement("div",{className:u(ht,bt[l]),id:o},r),e.createElement("div",{role:"group","aria-labelledby":o},a)):e.createElement(e.Fragment,null)}function vt(e){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}vt.displayName="ComboboxGroup",vt.propTypes={className:L.string,children:L.node.isRequired,label:L.string.isRequired};var xt,kt=(ie(Qr={},Be.XSmall,{x:12,y:8}),ie(Qr,Be.Small,{x:12,y:8}),ie(Qr,Be.Default,{x:12,y:8}),ie(Qr,Be.Large,{x:12,y:8}),Qr),wt=function(e){return tr[e]+2*kt[e].y},Et=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:384;return s(_r||(_r=ue(["\n width: ","px;\n overflow: hidden;\n border-radius: 12px;\n border: 1px solid;\n"])),e)},Ct=(ie(rt={},g.Light,s(et||(et=ue(["\n box-shadow: 0px 4px 7px ",";\n border-color: ",";\n "])),H(.85,V.black),V.gray.light2)),ie(rt,g.Dark,s(nt||(nt=ue(["\n box-shadow: 0px 4px 7px ",";\n border-color: ",";\n "])),H(.85,V.black),V.gray.dark3)),rt),Nt=s(tt||(tt=ue(["\n position: relative;\n width: 100%;\n margin: 0;\n padding: ","px 0;\n font-family: ",";\n border-radius: inherit;\n overflow-y: auto;\n scroll-behavior: smooth;\n"])),K[2],U.default),St=(ie(ot={},g.Light,s(at||(at=ue(["\n color: ",";\n background-color: ",";\n "])),V.black,V.white)),ie(ot,g.Dark,s(lt||(lt=ue(["\n color: ",";\n background-color: ",";\n "])),V.gray.light1,V.gray.dark3)),ot),Lt=s(it||(it=ue(["\n position: relative;\n margin: 0;\n padding: 0;\n"]))),Ot=s(ct||(ct=ue(["\n font-family: inherit;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"]))),Dt=(ie(dt={},g.Light,s(st||(st=ue(["\n color: ",";\n "])),V.gray.dark3)),ie(dt,g.Dark,s(ut||(ut=ue(["\n color: ",";\n "])),V.gray.light3)),dt),Mt=function(e){return s(pt||(pt=ue(["\n font-size: ","px;\n line-height: ","px;\n padding: ","px ","px;\n"])),ar[e],tr[e],kt[e].y,kt[e].x)},jt=d(ft||(ft=ue(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]))),It=s(gt||(gt=ue(["\n animation: "," 1.5s linear infinite;\n"])),jt),Pt=["children","id","refEl","labelId","menuWidth","searchLoadingMessage","searchErrorMessage","searchEmptyMessage"],zt=e.forwardRef((function(n,t){var l=n.children,o=n.id,i=n.refEl,c=n.labelId,d=n.menuWidth,f=n.searchLoadingMessage,g=n.searchErrorMessage,m=n.searchEmptyMessage,h=se(n,Pt),b=W(),y=b.darkMode,v=b.theme,x=r(Jr),k=x.disabled,w=x.size,E=x.isOpen,C=x.searchState,N=D(t,null),L=M(i),O=S(L)?"unset":"".concat(Math.min(L,256),"px"),j=a((function(){var n=u(Ot,Dt[v],Mt(w)),r=u(Ot,Mt(w));switch(C){case"loading":return e.createElement("span",{className:n},e.createElement(p,{glyph:"Refresh",color:y?V.blue.light1:V.blue.base,className:It}),f);case"error":return e.createElement(A,{className:r},e.createElement(p,{glyph:"Warning",color:y?V.red.light1:V.red.base}),e.createElement("span",null,g));default:return l&&"object"===oe(l)&&"length"in l&&l.length>0?e.createElement("ul",{className:Lt},l):e.createElement("span",{className:n},m)}}),[v,w,C,y,f,g,l,m]);return e.createElement($,ce({active:E&&!k,spacing:4,align:"bottom",justify:"middle",refEl:i,adjustOnMutation:!0,className:u(Et(d),Ct[v])},h),e.createElement("div",{ref:N,id:o,role:"listbox","aria-labelledby":c,"aria-expanded":E,className:u(Nt,St[v],s(xt||(xt=ue(["\n max-height: ",";\n "])),O)),onMouseDownCapture:function(e){return e.preventDefault()}},j))}));zt.displayName="ComboboxMenu";var Tt,Ft,Wt,At,Xt,Rt,Gt,Ht,Vt,qt,Zt,Kt,Yt,Bt,Ut,Jt,$t,Qt,_t,ea,na,ra,ta,aa,la,oa,ia=function(e){var n=e.scrollHeight;return e.scrollTop<n-e.clientHeight},ca=function(e){var n,r=e.value,t=e.displayName;return{value:null!=r?r:ne(t),displayName:null!==(n=null!=t?t:r)&&void 0!==n?n:""}},sa=function n(r){return e.Children.toArray(r).reduce((function(e,r){if(b(r,"ComboboxOption")){var t=ca(r.props),a=t.value,l=t.displayName,o=r.props,i=o.glyph,c=o.disabled;return[].concat(pe(e),[{value:a,displayName:l,isDisabled:!!c,hasGlyph:!!i}])}if(b(r,"ComboboxGroup")){var s=r.props.children;if(s)return[].concat(pe(e),pe(n(s)))}}),[])},ua=function(e,n){if(e)return n.find((function(n){return n.value===e}))},da=function(e,n){var r,t;return e?null!==(r=null===(t=ua(e,n))||void 0===t?void 0:t.displayName)&&void 0!==r?r:e:""},pa=function(e){return s(Tt||(Tt=ue(["\n font-size: ","px;\n line-height: ","px;\n min-height: ","px;\n padding: ","px ","px;\n gap: ","px;\n\n &:before {\n max-height: ","px;\n }\n"])),ar[e],tr[e],wt(e),kt[e].y,kt[e].x,K[1],wt(e))},fa=(ie(Rt={},Be.XSmall,s(Ft||(Ft=ue(["\n min-width: ","px;\n "])),K[3])),ie(Rt,Be.Small,s(Wt||(Wt=ue(["\n min-width: ","px;\n "])),K[3])),ie(Rt,Be.Default,s(At||(At=ue(["\n min-width: ","px;\n "])),K[3])),ie(Rt,Be.Large,s(Xt||(Xt=ue(["\n min-width: ","px;\n "])),K[4])),Rt),ga=s(Gt||(Gt=ue(["\n pointer-events: none;\n gap: 0;\n\n label {\n gap: 0;\n align-items: center;\n }\n"])));s(Ht||(Ht=ue(["\n pointer-events: none;\n"])));var ma=function(e){return s(Vt||(Vt=ue(["\n font-weight: ",";\n"])),e?J.bold:J.regular)},ha=(ie(Kt={},g.Light,s(qt||(qt=ue(["\n color: ",";\n "])),V.gray.dark1)),ie(Kt,g.Dark,s(Zt||(Zt=ue(["\n color: ",";\n "])),V.gray.base)),Kt),ba=(ie(Ut={},g.Light,s(Yt||(Yt=ue(["\n color: ",";\n "])),V.blue.dark1)),ie(Ut,g.Dark,s(Bt||(Bt=ue(["\n color: ",";\n "])),V.blue.light3)),Ut),ya=(ie(Qt={},g.Light,s(Jt||(Jt=ue(["\n color: ",";\n "])),V.gray.light1)),ie(Qt,g.Dark,s($t||($t=ue(["\n color: ",";\n "])),V.gray.dark1)),Qt),va=(ie(na={},g.Light,s(_t||(_t=ue(["\n color: ",";\n "])),V.blue.base)),ie(na,g.Dark,s(ea||(ea=ue(["\n color: ",";\n "])),V.blue.light1)),na),xa=(ie(aa={},g.Light,s(ra||(ra=ue(["\n color: ",";\n "])),V.gray.light1)),ie(aa,g.Dark,s(ta||(ta=ue(["\n color: ",";\n "])),V.gray.dark1)),aa),ka=s(la||(la=ue(["\n ."," {\n align-self: baseline;\n }\n"])),Q),wa=s(oa||(oa=ue(["\n ."," {\n height: 28px;\n }\n"])),Q),Ea=["glyph","isSelected","displayName","isFocused","setSelected","className","description","value","onClick","disabled"],Ca=e.forwardRef((function(n,t){var l,i=n.glyph,c=n.isSelected,s=n.displayName,d=n.isFocused,g=n.setSelected,m=n.className,h=n.description,b=n.value,y=n.onClick,v=n.disabled,x=void 0!==v&&v,k=se(n,Ea),w=W(),E=w.darkMode,C=w.theme,N=r(Jr),S=N.multiselect,L=N.size,M=N.withIcons,j=N.inputValue,I=D(t,null),P=O({prefix:"combobox-option-text"}),z=o((function(e){e.stopPropagation(),x||(g(),null==y||y(e,b))}),[x,y,g,b]),T=a((function(){return function(n){var r,t=n.withIcons,a=n.isSelected,l=n.glyph,o=n.optionTextId,i=n.disabled,c=n.darkMode,s=n.size,d=n.multiselect,g=n.theme,m=n.isFocused;l&&!f(l)&&console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",l);var h=l&&f(l)?e.cloneElement(l,le(le({},l.props),{},{className:u(ha[g],(r={},ie(r,ba[g],m),ie(r,ya[g],i),r),l.props.className)})):e.createElement(e.Fragment,null),b=e.createElement(te,{"aria-labelledby":o,checked:a,tabIndex:-1,disabled:i,darkMode:c,className:ga}),y=e.createElement(p,{glyph:"Checkmark",className:u(fa[s],va[g],ie({},xa[g],i))});return{leftGlyph:d?t?h:b:t?h:a?y:null,rightGlyph:d?t&&b:t&&a&&y}}({withIcons:M,isSelected:c,glyph:i,theme:C,darkMode:E,size:L,disabled:x,multiselect:S,optionTextId:P,isFocused:d})}),[E,x,i,c,S,P,L,C,M,d]),F=T.leftGlyph,A=T.rightGlyph,X=S&&!M;return e.createElement(_,ce({},k,{as:"li",ref:I,highlighted:d,disabled:x,"aria-label":s,darkMode:E,className:u(pa(L),(l={},ie(l,ka,X),ie(l,wa,X&&L===Be.Large),l),m),onClick:z,onKeyDown:z}),e.createElement(ee,{leftGlyph:F,rightGlyph:A,description:h},e.createElement("span",{id:P,className:ma(c)},function(n,r,t){if(r&&t){var a=re(r),l=new RegExp(a,"gi"),o=n.matchAll(l);if(o){for(var i=n.split(""),c=0,s=Array.from(o);c<s.length;c++){var u,d=s[c],p=null!==(u=d.index)&&void 0!==u?u:-1,f=d[0],g=f.length,m=p+f+g,h=new Array(g).fill("");h[0]=e.createElement(t,{key:m},f),i.splice.apply(i,[p,g].concat(pe(h)))}return e.createElement(e.Fragment,null,i)}return e.createElement(e.Fragment,null,n)}return e.createElement(e.Fragment,null,n)}(s,j,"strong"))))}));function Na(e){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}Ca.displayName="ComboboxOption",Na.displayName="ComboboxOption",Na.propTypes={displayName:L.string,value:L.string,glyph:L.node,disabled:L.bool,className:L.string,description:L.string,onClick:L.func};var Sa,La=["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"],Oa=["className","glyph","disabled"];function Da(n){var r,c,s,d=n.children,f=n.label,g=n.description,m=n.placeholder,v=void 0===m?"Select":m,L=n["aria-label"],D=n.disabled,M=void 0!==D&&D,A=n.size,G=void 0===A?Be.Default:A,H=n.darkMode,V=n.state,q=void 0===V?"none":V,Z=n.errorMessage,K=n.searchState,Y=void 0===K?"unset":K,B=n.searchEmptyMessage,U=void 0===B?"No results found":B,J=n.searchErrorMessage,$=void 0===J?"Could not get results!":J,Q=n.searchLoadingMessage,_=void 0===Q?"Loading results...":Q,ee=n.filteredOptions,ne=n.onFilter,re=n.clearable,te=void 0===re||re,ae=n.onClear,ue=n.overflow,pe=void 0===ue?Je.expandY:ue,fe=n.multiselect,ge=void 0!==fe&&fe,me=n.initialValue,he=n.onChange,be=n.value,ye=n.chipTruncationLocation,ve=n.chipCharacterLimit,xe=void 0===ve?12:ve,ke=n.className,we=n.usePortal,Ee=void 0===we||we,Ce=n.portalClassName,Ne=n.portalContainer,Se=n.scrollContainer,Le=n.popoverZIndex,Oe=se(n,La),De=W(H),Me=De.darkMode,je=De.theme,Ie=j({prefix:"option"}),Pe=j({prefix:"chip"}),ze=O({prefix:"combobox-input"}),Te=O({prefix:"combobox-label"}),Fe=O({prefix:"combobox-menu"}),We=t(null),Ae=t(null),Xe=t(null),Re=t(null),Ue=t(null),Qe=de(i(!1),2),_e=Qe[0],en=Qe[1],nn=I(_e),rn=de(i(null),2),tn=rn[0],an=rn[1],ln=de(i(null),2),on=ln[0],cn=ln[1],sn=I(on),un=de(i(""),2),dn=un[0],pn=un[1],fn=I(dn),gn=de(i(null),2),mn=gn[0],hn=gn[1],bn=de(i(!1),2),yn=bn[0],vn=bn[1],xn=!C(on)&&(w(on)&&on.length>0||N(on)),kn=ge&&w(on)&&on.length>0?void 0:v,wn=function(){return en(!1)},En=function(){return en(!0)},Cn=a((function(){return sa(d)}),[d]),Nn=o((function(e){return!ge||"string"!=typeof e&&"number"!=typeof e?!ge&&w(e)&&y.error("Error in Combobox: multiselect is set to `false`, but received an Array value"):y.error("Error in Combobox: multiselect is set to `true`, but received a ".concat(oe(e),' value: "').concat(e,'"')),ge&&w(e)}),[ge]),Sn=o((function(e){!M&&Re&&Re.current&&(Re.current.focus(),S(e)||Re.current.setSelectionRange(e,e))}),[M]),Ln=o((function(e){if(Nn(on)){var n=x(on);C(e)?n.length=0:on.includes(e)?n.splice(n.indexOf(e),1):(n.push(e),pn("")),cn(n),null==he||he(n)}else{var r=e;cn(r),null==he||he(r)}}),[Nn,he,on]),On=o((function(e){return Nn(on)?on.includes(e):e===on}),[Nn,on]),Dn=o((function(e){var n,r,t,a,l=(r=Cn,(n=e)?null!==(t=null===(a=r.find((function(e){return e.displayName===n})))||void 0===a?void 0:a.value)&&void 0!==t?t:n:"");return On(l)}),[Cn,On]),Mn=o((function(e){var n="string"==typeof e?e:e.value;return ee&&ee.length>0?ee.includes(n):!!Dn(dn)||("string"==typeof e?da(n,Cn):e.displayName).toLowerCase().includes(dn.toLowerCase())}),[ee,Dn,dn,Cn]),jn=a((function(){return Cn.filter(Mn)}),[Cn,Mn]),In=o((function(e){return!!e&&!!Cn.find((function(n){return n.value===e}))}),[Cn]),Pn=o((function(e){return jn?jn.findIndex((function(n){return n.value===e})):-1}),[jn]),zn=o((function(e){if(jn&&jn.length>=e){var n=jn[e];return n?n.value:void 0}}),[jn]),Tn=o((function(){return Nn(on)?on.findIndex((function(e){var n,r;return null===(n=Pe(e))||void 0===n||null===(r=n.current)||void 0===r?void 0:r.contains(document.activeElement)})):-1}),[Pe,Nn,on]),Fn=de(i(),2),Wn=Fn[0],An=Fn[1],Xn=o((function(e){var n,r=null!==(n=null==jn?void 0:jn.length)&&void 0!==n?n:0,t=r-1>0?r-1:0,a=Pn(tn);switch(e&&_e&&(hn(null),Sn()),e){case"next":var l=zn(a+1<r?a+1:0);an(null!=l?l:null);break;case"prev":var o=zn(a-1>=0?a-1:t);an(null!=o?o:null);break;case"last":var i=zn(t);an(null!=i?i:null);break;default:var c=zn(0);an(null!=c?c:null)}}),[tn,Pn,zn,_e,Sn,null==jn?void 0:jn.length]),Rn=o((function(e,n){if(Nn(on))switch(e){case"next":var r=null!=n?n:Tn(),t=r+1<on.length?r+1:on.length-1,a=on[t];hn(a);break;case"prev":var l=null!=n?n:Tn(),o=l>0?l-1:l<0?on.length-1:0,i=on[o];hn(i);break;case"first":var c=on[0];hn(c);break;case"last":var s=on[on.length-1];hn(s);break;default:hn(null)}}),[Tn,Nn,on]),Gn=o((function(e,n){switch(e&&an(null),e){case"right":switch(Wn){case Ge:var r,t,a;if((null===(r=Re.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=Re.current)||void 0===t?void 0:t.value.length))null===(a=Ae.current)||void 0===a||a.focus();break;case Ve:case Ze:case qe:if(Wn===qe||1===(null==on?void 0:on.length)){Sn(0),Rn(null),n.preventDefault();break}Rn("next")}break;case"left":switch(Wn){case He:var l;n.preventDefault(),Sn(null==Re||null===(l=Re.current)||void 0===l?void 0:l.value.length);break;case Ge:case Ze:case qe:if(Nn(on)){var o;if(Wn===Ge&&0!==(null===(o=Re.current)||void 0===o?void 0:o.selectionStart))break;Rn("prev")}}break;default:Rn(null)}}),[Wn,Nn,on,Sn,Rn]);l((function(){dn!==fn&&Xn("first")}),[dn,_e,fn,Xn]),P(tn?Ie(tn):void 0,Ue);var Hn=o((function(n){if(b(n,"ComboboxOption")){var r=ca(n.props),t=r.value,a=r.displayName;if(Mn(t)){var l=n.props,o=l.className,i=l.glyph,c=l.disabled,s=se(l,Oa),u=Cn.findIndex((function(e){return e.value===t})),d=tn===t,p=Nn(on)?on.includes(t):on===t,f=Ie(t);return e.createElement(Ca,ce({},s,{value:t,displayName:a,isFocused:d,isSelected:p,disabled:c,setSelected:function(){an(t),Ln(t),Sn(),t===on&&wn()},glyph:i,className:o,index:u,ref:f}))}}else if(b(n,"ComboboxGroup")){var g=e.Children.map(n.props.children,Hn);if(g&&(null==g?void 0:g.length)>0)return e.createElement(yt,{label:n.props.label,className:n.props.className},e.Children.map(g,Hn))}}),[Cn,Ie,tn,Nn,on,Sn,Mn,Ln]),Vn=a((function(){return e.Children.map(d,Hn)}),[d,Hn]),qn=a((function(){if(Nn(on))return on.filter(In).map((function(n,r){var t=da(n,Cn),a=mn===n,l=Pe(n),o=r>=on.length-1;return e.createElement($r,{key:n,displayName:t,isFocused:a,onRemove:function(){o?(Sn(),Rn(null)):Rn("next",r),Ln(n)},onFocus:function(){hn(n)},ref:l})}))}),[Nn,on,In,Cn,mn,Pe,Ln,Sn,Rn]),Zn=a((function(){return Cn.some((function(e){return e.hasGlyph}))}),[Cn]),Kn=o((function(){if(!Nn(on)&&on===sn){var e=jn.find((function(e){return e.displayName===dn||e.value===dn}));if(e&&!be)cn(e.value);else{var n,r=null!==(n=da(on,Cn))&&void 0!==n?n:"";pn(r)}}}),[Cn,dn,Nn,sn,on,be,jn]),Yn=o((function(){if(xn){if(Nn(on))rr(pe);else if(!Nn(on)){var e,n=null!==(e=da(on,Cn))&&void 0!==e?e:"";pn(n),wn()}}else pn("")}),[xn,Cn,Nn,on,pe]);l((function(){if(me)if(w(me)){var e,n=null!==(e=me.filter((function(e){return In(e)})))&&void 0!==e?e:[];cn(n)}else In(me)&&cn(me);else cn(function(e){return e?[]:null}(ge))}),[]),l((function(){if(!S(be)&&be!==fn)if(C(be))cn(null);else if(Nn(be)){var e=be.filter(In);cn(e)}else cn(In(be)?be:null)}),[Nn,In,fn,be]),l((function(){E(on,sn)||Yn()}),[Yn,sn,on]),l((function(){!_e&&nn&&Kn()}),[_e,nn,Kn]);var Bn=de(i(0),2),Un=Bn[0],Jn=Bn[1];l((function(){var e,n;Jn(null!==(e=null===(n=We.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)}),[We,_e,tn,on]);z(wn,[Ue,We],_e);var $n=Nn(on)&&!!on.length,Qn=k((function(e){vn(ia(e.target))}),50,{leading:!0}),_n=o((function(e){pe===Je.expandY&&Qn(e)}),[Qn,pe]);l((function(){Xe.current&&vn(ia(Xe.current))}),[]);var er,nr=le({popoverZIndex:Le},Ee?{usePortal:Ee,portalClassName:Ce,portalContainer:Ne,scrollContainer:Se}:{usePortal:Ee});return e.createElement(F,{darkMode:Me},e.createElement(Jr.Provider,{value:{multiselect:ge,size:G,withIcons:Zn,disabled:M,isOpen:_e,state:q,searchState:Y,chipTruncationLocation:ye,chipCharacterLimit:xe,inputValue:dn,overflow:pe,popoverZIndex:Le}},e.createElement("div",ce({className:u(Cr(G),ke)},Oe),(f||g)&&e.createElement("div",{className:qr},f&&e.createElement(X,{id:Te,htmlFor:ze,darkMode:Me,disabled:M,className:u(ie({},Zr,G===Be.Large))},f),g&&e.createElement(R,{darkMode:Me,disabled:M,className:u(ie({},Zr,G===Be.Large))},g)),e.createElement("div",{ref:We,role:"combobox","aria-expanded":_e,"aria-controls":Fe,"aria-owns":Fe,tabIndex:-1,onMouseDown:function(e){M&&e.preventDefault()},onClick:function(e){if(e.target!==Re.current){var n=0;if(Re.current)n=e.nativeEvent.offsetX>Re.current.offsetLeft+Re.current.clientWidth?dn.length:0;Sn(n)}En()},onFocus:function(e){rr(pe),An(function(e){var n,r,t,a;if(!e)return;if(null!==(n=Re.current)&&void 0!==n&&n.contains(e))return Ge;if(null!==(r=Ae.current)&&void 0!==r&&r.contains(e))return He;var l=Nn(on)?on.findIndex((function(n){var r,t;return null===(r=Pe(n))||void 0===r||null===(t=r.current)||void 0===t?void 0:t.contains(e)})):-1;if(Nn(on)){if(0===l)return Ve;if(l===on.length-1)return qe;if(l>0)return Ze}if(null!==(t=Ue.current)&&void 0!==t&&t.contains(e))return Ye;if(null!==(a=We.current)&&void 0!==a&&a.contains(e))return Ke}(e.target))},onKeyDown:function(e){var n,r,t=null===(n=Ue.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(r=We.current)||void 0===r?void 0:r.contains(document.activeElement))||t){if(e.ctrlKey||e.shiftKey||e.altKey)return;switch(e.keyCode){case h.Tab:switch(Wn){case"Input":xn||(wn(),Xn("first"),Rn(null));break;case"LastChip":Rn(null)}break;case h.Escape:wn(),Xn("first");break;case h.Enter:Wn!==Ge||C(tn)||function(e){if("string"==typeof e){var n=ua(e,Cn);return!(null==n||!n.isDisabled)}return!!e.isDisabled}(tn)?Wn===He&&(Ln(null),Sn()):Ln(tn);break;case h.Backspace:var a;if(Nn(on))"Input"===Wn&&0===(null===(a=Re.current)||void 0===a?void 0:a.selectionStart)&&Rn("last");En();break;case h.ArrowDown:_e?(e.preventDefault(),Xn("next")):En();break;case h.ArrowUp:_e?(e.preventDefault(),Xn("prev")):En();break;case h.ArrowRight:Gn("right",e);break;case h.ArrowLeft:Gn("left",e);break;default:_e||En()}}},onTransitionEnd:function(){var e,n;Jn(null!==(e=null===(n=We.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)},className:u(Nr,Sr[je],Lr(G,$n),(r={},ie(r,Or[je],M),ie(r,Dr[je],q===$e.error),ie(r,Mr[je],(er=Ge,er===Wn)),ie(r,Kr[je],yn),r))},e.createElement("div",{onScroll:_n,ref:Xe,className:Pr({size:G,overflow:pe})},qn,e.createElement("input",{"aria-label":null!=L?L:f,"aria-autocomplete":"list","aria-controls":Fe,"aria-labelledby":Te,ref:Re,id:ze,className:u(zr,Wr(G),Tr[je],Ar(_e),(c={},ie(c,Xr(G,dn),Nn(on)),ie(c,Fr[je],M),c)),placeholder:kn,disabled:null!=M?M:void 0,onChange:function(e){var n=e.target.value;pn(n),null==ne||ne(n)},value:dn,autoComplete:"off"})),e.createElement("div",{className:u(jr,Ir[G])},"error"===q&&e.createElement(p,{glyph:"Warning",fill:Yr[je],className:Gr}),te&&xn&&!M&&e.createElement(T,{"aria-label":"Clear selection","aria-disabled":M,disabled:M,ref:Ae,onClick:function(e){M||(e.stopPropagation(),Ln(null),null==ae||ae(e),null==ne||ne(""),Sn())},onFocus:function(){an(null)},className:u(Rr),darkMode:Me},e.createElement(p,{glyph:"XWithCircle"})),e.createElement(p,{glyph:"CaretDown",className:Gr,fill:u((s={},ie(s,Br[je],!M),ie(s,Ur[je],M),s))}))),"error"===q&&Z&&e.createElement("div",{className:u(Hr[je],Vr(G))},Z),e.createElement(zt,ce({id:Fe,labelId:Te,refEl:We,ref:Ue,menuWidth:Un,searchLoadingMessage:_,searchErrorMessage:$,searchEmptyMessage:U},nr),Vn))));function rr(e){Xe&&Xe.current&&(e===Je.scrollX&&(Xe.current.scrollLeft=Xe.current.scrollWidth),e===Je.expandY&&(Xe.current.scrollTop=Xe.current.scrollHeight))}}Da.propTypes={multiselect:L.bool,value:L.oneOfType([L.string,L.arrayOf(L.string)]),initialValue:L.oneOfType([L.string,L.arrayOf(L.string)]),overflow:L.oneOf(Object.values(Je)),darkMode:L.bool,label:L.string,"aria-label":L.string,children:L.node,onChange:L.func,chipCharacterLimit:L.number,chipTruncationLocation:L.oneOf(Object.values(Ue)),onClear:L.func,onFilter:L.func,clearable:L.bool,searchLoadingMessage:L.string,searchErrorMessage:L.string,searchEmptyMessage:L.string,searchState:L.oneOf(Object.values(Qe)),errorMessage:L.string,state:L.oneOf(Object.values($e)),size:L.oneOf(Object.values(Be)),disabled:L.bool,description:L.string,placeholder:L.string,filteredOptions:L.arrayOf(L.string),popoverZIndex:L.number,usePortal:L.bool,scrollContainer:L.elementType,portalContainer:L.elementType,portalClassName:L.string};var Ma=s(Sa||(Sa=ue(["\n width: 256px;\n padding-block: 64px;\n display: flex;\n"]))),ja={title:"Components/Combobox",component:Da,decorators:[function(n){return e.createElement("div",{className:Ma},e.createElement(n,null))}],parameters:{default:"Demo",controls:{exclude:["as","filteredOptions","initialValue","setError","value","children"]}},argTypes:{darkMode:v.darkMode,multiselect:{control:"boolean"},disabled:{control:"boolean"},clearable:{control:"boolean"},label:{control:"text"},description:{control:"text"},placeholder:{control:"text"},size:{options:Object.values(Be),control:"select"},state:{options:Object.values($e),control:"select"},errorMessage:{control:"text",if:{arg:"state",eq:$e.error}},searchEmptyMessage:{control:"text"},searchState:{options:Object.values(Qe),control:"select"},searchErrorMessage:{control:"text",if:{arg:"searchState",eq:Qe.error}},searchLoadingMessage:{control:"text",if:{arg:"searchState",eq:Qe.loading}},chipTruncationLocation:{options:Object.values(Ue),control:"select",if:{arg:"multiselect"}},chipCharacterLimit:{control:"number",if:{arg:"multiselect"}},overflow:{options:Object.values(Je),control:"select",if:{arg:"multiselect"}}},args:{multiselect:!1,darkMode:!1,disabled:!1,clearable:!0}},Ia=function(){var n=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];return[e.createElement(Na,{key:"apple",value:"apple",displayName:"Apple","data-testid":"test-id",description:"Do I keep the doctor away?",onClick:function(e,n){return console.log(e,n)},className:"className"}),e.createElement(Na,{key:"banana",value:"banana",displayName:"Banana"}),e.createElement(Na,{key:"carrot",value:"carrot",displayName:"Carrot",disabled:!0}),e.createElement(Na,{key:"pomegranate",value:"pomegranate",displayName:"Pomegranate",glyph:n?e.createElement(p,{glyph:"Warning"}):void 0,description:"Watch out, I stain everything I touch LOL",disabled:!0}),e.createElement(Na,{key:"plantain",value:"plantain",displayName:"Plantain",glyph:n?e.createElement(p,{glyph:"Connect"}):void 0,description:"Don't confuse me with a banana",onClick:function(){return console.log("I was clicked")}}),e.createElement(Na,{key:"paragraph",value:"paragraph",displayName:"Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper."}),e.createElement(Na,{key:"hash",value:"hash",displayName:"5f4dcc3b5aa765d61d8327deb882cf995f4dcc3b5aa765d61d8327deb882cf99"}),e.createElement(Na,{key:"dragonfruit",value:"dragonfruit",displayName:"Dragonfruit",description:"Rawr"}),e.createElement(Na,{key:"eggplant",value:"eggplant",displayName:"Eggplant"}),e.createElement(Na,{key:"fig",value:"fig",displayName:"Fig"}),e.createElement(Na,{key:"grape",value:"grape",displayName:"Grape"}),e.createElement(Na,{key:"honeydew",value:"honeydew",displayName:"Honeydew"}),e.createElement(Na,{key:"iceberg-lettuce",value:"iceberg-lettuce",displayName:"Iceberg lettuce"}),e.createElement(vt,{key:"peppers",label:"Peppers"},e.createElement(Na,{key:"cayenne",value:"cayenne",displayName:"Cayenne"}),e.createElement(Na,{key:"ghost-pepper",value:"ghost-pepper",displayName:"Ghost pepper"}),e.createElement(Na,{key:"habanero",value:"habanero",displayName:"Habanero"}),e.createElement(Na,{key:"jalapeno",value:"jalapeno",displayName:"Jalapeño"}),e.createElement(Na,{key:"red-pepper",value:"red-pepper",displayName:"Red pepper"}),e.createElement(Na,{key:"scotch-bonnet",value:"scotch-bonnet",displayName:"Scotch bonnet",description:"Don't touch your eyes"}))]},Pa=function(n){return e.createElement(Da,n)},za=function(n){return e.createElement(Da,n)};za.args={label:"Choose a fruit",description:"Please pick one",placeholder:"Select fruit",multiselect:!1},za.argTypes={multiselect:{control:"none"}};var Ta=Pa.bind({});Ta.args={label:"Choose a fruit",description:"Please pick one",placeholder:"Select fruit",multiselect:!1,children:Ia(!1)},Ta.argTypes={multiselect:{control:"none"}};var Fa=Pa.bind({});Fa.args={label:"Choose a fruit",description:"Please pick one",placeholder:"Select fruit",value:"pomegranates",errorMessage:"No Pomegranates!",state:"error"};var Wa=function(n){return e.createElement(Da,n)},Aa=Wa.bind({});Aa.args={label:"Choose a fruit",description:"Please pick some",placeholder:"Select fruit",multiselect:!0,children:Ia()},Aa.argTypes={multiselect:{control:"none"}};var Xa=Wa.bind({});Xa.args={label:"Choose a fruit",description:"Please pick some",placeholder:"Select fruit",multiselect:!0,children:Ia(!1)},Xa.argTypes={multiselect:{control:"none"}};var Ra=function(){var n=de(i(null),2),r=n[0],t=n[1];return e.createElement("div",null,e.createElement(Da,{multiselect:!1,label:"Choose a fruit",description:"Please pick one",placeholder:"Select fruit",onChange:function(e){t(e)},value:r},e.createElement(Na,{value:"apple"}),e.createElement(Na,{value:"banana"}),e.createElement(Na,{value:"carrot"})),e.createElement(c,{onClick:function(){return t("carrot")}},"Select Carrot"))},Ga=function(){var n=["apple","banana","carrot","dragonfruit","eggplant","fig","grape","honeydew","iceberg-lettuce","jalapeño"],r=de(i(["carrot","grape"]),2),t=r[0],a=r[1];return e.createElement(Da,{label:"Choose some fruit",placeholder:"Select fruit",initialValue:["apple","fig","raspberry"],multiselect:!0,overflow:"expand-y",onFilter:function(e){a(n.filter((function(n){return n.includes(e)})))},filteredOptions:t},n.map((function(n){return e.createElement(Na,{key:n,value:n})})))},Ha=function(n){return e.createElement(e.Fragment,null,n.multiselect?e.createElement(Da,ce({key:"multi"},n,{multiselect:!0})):e.createElement(Da,ce({key:"single"},n,{multiselect:!1})))};Ha.args={label:"Choose a fruit",description:"Please pick fruit(s)",placeholder:"Select fruit",children:Ia()};export{Ra as ControlledSingleSelect,Ha as Demo,Ga as ExternalFilter,Aa as Multiselect,Xa as MultiselectWithoutGlyphs,za as SingleSelect,Ta as SingleSelectWithoutGlyphs,Fa as WithError,ja as default};
|