@leafygreen-ui/combobox 1.0.2 → 1.0.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 +13 -0
- package/dist/Combobox.d.ts.map +1 -1
- package/dist/Combobox.types.d.ts.map +1 -1
- package/dist/ComboboxOption.d.ts.map +1 -1
- package/dist/ComboboxTestUtils.d.ts +2 -2
- 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/package.json +7 -7
- package/src/Combobox.spec.tsx +14 -25
- package/src/Combobox.story.tsx +1 -1
- package/src/Combobox.tsx +16 -19
- package/src/Combobox.types.ts +3 -2
- package/src/ComboboxOption.tsx +2 -3
- package/tsconfig.tsbuildinfo +1 -3977
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @leafygreen-ui/combobox
|
|
2
2
|
|
|
3
|
+
## 1.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [e13d2487]
|
|
8
|
+
- Updated dependencies [500d6c60]
|
|
9
|
+
- @leafygreen-ui/checkbox@8.0.0
|
|
10
|
+
- @leafygreen-ui/icon-button@11.0.0
|
|
11
|
+
- @leafygreen-ui/popover@8.0.0
|
|
12
|
+
- @leafygreen-ui/interaction-ring@3.0.0
|
|
13
|
+
- @leafygreen-ui/icon@11.9.0
|
|
14
|
+
- @leafygreen-ui/typography@11.0.0
|
|
15
|
+
|
|
3
16
|
## 1.0.2
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
package/dist/Combobox.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../src/Combobox.tsx"],"names":[],"mappings":";AAuBA,OAAO,EACL,aAAa,EAId,MAAM,kBAAkB,CAAC;AAuB1B;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,OAAO,EAAE,EAClD,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAsB,EACtB,YAAY,EAAE,SAAS,EACvB,QAAgB,EAChB,IAAgB,EAChB,QAAgB,EAChB,KAAc,EACd,YAAY,EACZ,WAAqB,EACrB,kBAAuC,EACvC,kBAA6C,EAC7C,oBAA2C,EAC3C,eAAe,EACf,QAAQ,EACR,SAAgB,EAChB,OAAO,EACP,QAAqB,EACrB,WAAwB,EACxB,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,sBAAsB,EACtB,kBAAuB,EACvB,SAAS,EACT,SAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,aAAa,EACb,GAAG,IAAI,EACR,EAAE,aAAa,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../src/Combobox.tsx"],"names":[],"mappings":";AAuBA,OAAO,EACL,aAAa,EAId,MAAM,kBAAkB,CAAC;AAuB1B;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,OAAO,EAAE,EAClD,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAsB,EACtB,YAAY,EAAE,SAAS,EACvB,QAAgB,EAChB,IAAgB,EAChB,QAAgB,EAChB,KAAc,EACd,YAAY,EACZ,WAAqB,EACrB,kBAAuC,EACvC,kBAA6C,EAC7C,oBAA2C,EAC3C,eAAe,EACf,QAAQ,EACR,SAAgB,EAChB,OAAO,EACP,QAAqB,EACrB,WAAwB,EACxB,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,sBAAsB,EACtB,kBAAuB,EACvB,SAAS,EACT,SAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,aAAa,EACb,GAAG,IAAI,EACR,EAAE,aAAa,CAAC,CAAC,CAAC,eAylClB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../src/Combobox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C;;GAEG;AAEH,eAAO,MAAM,YAAY;;CAEf,CAAC;AACX,oBAAY,YAAY,GAAG,OAAO,YAAY,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE1E,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAC;AACX,oBAAY,mBAAmB,
|
|
1
|
+
{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../src/Combobox.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxOption.d.ts","sourceRoot":"","sources":["../src/ComboboxOption.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAMhE,OAAO,EACL,mBAAmB,EACnB,2BAA2B,EAC5B,MAAM,kBAAkB,CAAC;AAgE1B;;GAEG;AAEH,QAAA,MAAM,sBAAsB,
|
|
1
|
+
{"version":3,"file":"ComboboxOption.d.ts","sourceRoot":"","sources":["../src/ComboboxOption.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAMhE,OAAO,EACL,mBAAmB,EACnB,2BAA2B,EAC5B,MAAM,kBAAkB,CAAC;AAgE1B;;GAEG;AAEH,QAAA,MAAM,sBAAsB,mGAsH3B,CAAC;AAGF,OAAO,EAAE,sBAAsB,EAAE,CAAC;AAClC,iBAAwB,cAAc,CAAC,CAAC,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAE1E;kBAFuB,cAAc;;;eAAd,cAAc"}
|
|
@@ -56,8 +56,8 @@ export declare function renderCombobox<T extends Select>(select?: T, props?: ren
|
|
|
56
56
|
clearButtonEl: HTMLElement | null;
|
|
57
57
|
container: HTMLElement;
|
|
58
58
|
baseElement: HTMLElement;
|
|
59
|
-
debug: (baseElement?:
|
|
60
|
-
rerender: (ui: React.ReactElement<any, string |
|
|
59
|
+
debug: (baseElement?: HTMLElement | DocumentFragment | (HTMLElement | DocumentFragment)[] | undefined, maxLength?: number | undefined, options?: import("pretty-format/build/types").OptionsReceived | undefined) => void;
|
|
60
|
+
rerender: (ui: React.ReactElement<any, string | React.JSXElementConstructor<any>>) => void;
|
|
61
61
|
unmount: () => boolean;
|
|
62
62
|
asFragment: () => DocumentFragment;
|
|
63
63
|
getByLabelText: (text: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined, waitForElementOptions?: unknown) => HTMLElement;
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import n,{createContext as o,useContext as e,useCallback as r,useMemo as t,useRef as i,useEffect as a,useState as l}from"react";import{kebabCase as c,isArray as u,isNull as s,isString as d,isUndefined as b,clone as p,isEqual as g}from"lodash";import{Label as m,Description as f}from"@leafygreen-ui/typography";import h from"@leafygreen-ui/popover";import{useIdAllocator as v,useForwardedRef as x,useDynamicRefs as y,usePrevious as w,useViewportSize as k,useEventListener as C}from"@leafygreen-ui/hooks";import N from"@leafygreen-ui/interaction-ring";import O,{isComponentGlyph as j}from"@leafygreen-ui/icon";import M from"@leafygreen-ui/icon-button";import{css as E,cx as I,keyframes as S}from"@leafygreen-ui/emotion";import{uiColors as z}from"@leafygreen-ui/palette";import{isComponentType as P,keyMap as D,createDataProp as L,consoleOnce as F}from"@leafygreen-ui/lib";import A from"@leafygreen-ui/checkbox";import{jsx as T}from"@emotion/react";import R from"@leafygreen-ui/inline-definition";import{fontFamilies as W}from"@leafygreen-ui/tokens";function B(n,o){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);o&&(r=r.filter((function(o){return Object.getOwnPropertyDescriptor(n,o).enumerable}))),e.push.apply(e,r)}return e}function G(n){for(var o=1;o<arguments.length;o++){var e=null!=arguments[o]?arguments[o]:{};o%2?B(Object(e),!0).forEach((function(o){V(n,o,e[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):B(Object(e)).forEach((function(o){Object.defineProperty(n,o,Object.getOwnPropertyDescriptor(e,o))}))}return n}function K(n){return(K="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n})(n)}function V(n,o,e){return o in n?Object.defineProperty(n,o,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[o]=e,n}function H(){return(H=Object.assign||function(n){for(var o=1;o<arguments.length;o++){var e=arguments[o];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r])}return n}).apply(this,arguments)}function U(n,o){if(null==n)return{};var e,r,t=function(n,o){if(null==n)return{};var e,r,t={},i=Object.keys(n);for(r=0;r<i.length;r++)e=i[r],o.indexOf(e)>=0||(t[e]=n[e]);return t}(n,o);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(r=0;r<i.length;r++)e=i[r],o.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(n,e)&&(t[e]=n[e])}return t}function X(n,o){return o||(o=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(o)}}))}function Z(n,o){return function(n){if(Array.isArray(n))return n}(n)||function(n,o){var e=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null==e)return;var r,t,i=[],a=!0,l=!1;try{for(e=e.call(n);!(a=(r=e.next()).done)&&(i.push(r.value),!o||i.length!==o);a=!0);}catch(n){l=!0,t=n}finally{try{a||null==e.return||e.return()}finally{if(l)throw t}}return i}(n,o)||$(n,o)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Y(n){return function(n){if(Array.isArray(n))return q(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||$(n)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function $(n,o){if(n){if("string"==typeof n)return q(n,o);var e=Object.prototype.toString.call(n).slice(8,-1);return"Object"===e&&n.constructor&&(e=n.constructor.name),"Map"===e||"Set"===e?Array.from(n):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?q(n,o):void 0}}function q(n,o){(null==o||o>n.length)&&(o=n.length);for(var e=0,r=new Array(o);e<o;e++)r[e]=n[e];return r}var J,Q,_,nn,on,en,rn,tn,an,ln,cn=o({multiselect:!1,darkMode:!1,size:"default",withIcons:!1,disabled:!1}),un=G(G({},D),{},{Backspace:8,Delete:46}),sn=function(o,e,r){if(e&&r){var t=new RegExp(e,"gi"),i=o.search(t),a=i+e.length,l=o.split(""),c=l.slice(0,i).join(""),u=l.slice(a).join(""),s=l.slice(i,a).join(""),d=n.createElement(r,null,s);return T(n.Fragment,null,c,d,u)}return T(n.Fragment,null,o)},dn=function(n){var o,e=n.value,r=n.displayName;return{value:null!=e?e:c(r),displayName:null!==(o=null!=r?r:e)&&void 0!==o?o:""}},bn=function o(e){return n.Children.toArray(e).reduce((function(n,e){if(P(e,"ComboboxOption")){var r=dn(e.props),t=r.value,i=r.displayName,a=e.props.glyph;return[].concat(Y(n),[{value:t,displayName:i,hasGlyph:!!a}])}if(P(e,"ComboboxGroup")){var l=e.props.children;if(l)return[].concat(Y(n),Y(o(l)))}}),[])},pn=E(Q||(Q=X(["\n display: inline-flex;\n gap: 8px;\n justify-content: start;\n align-items: inherit;\n"]))),gn=E(_||(_=X(["\n pointer-events: none;\n"]))),mn=function(n){return E(nn||(nn=X(["\n font-weight: ",";\n"])),n?"bold":"normal")},fn=n.forwardRef((function(o,i){var a=o.displayName,l=o.glyph,c=o.isSelected,u=o.isFocused,s=o.setSelected,d=o.className,b=e(cn),p=b.multiselect,g=b.darkMode,m=b.withIcons,f=b.inputValue,h=v({prefix:"combobox-option-text"}),y=x(i,null),w=r((function(n){n.stopPropagation(),n.target!==y.current&&"INPUT"!==n.target.tagName||s()}),[y,s]),k=t((function(){if(l){if(j(l)||P(l,"Icon"))return l;console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",l)}}),[l]),C=t((function(){if(p){var o=T(A,{label:"","aria-labelledby":h,checked:c,tabIndex:-1,animate:!1});return T(n.Fragment,null,T("span",{className:I(pn,gn)},m?k:o,T("span",{id:h,className:mn(c)},sn(a,f,"strong"))),m&&o)}return T(n.Fragment,null,T("span",{className:I(pn,gn)},k,T("span",{className:mn(c)},sn(a,f,"strong"))),c&&T(O,{glyph:"Checkmark",color:g?z.blue.light1:z.blue.base}))}),[p,k,c,a,f,g,h,m]);return T("li",{ref:y,role:"option","aria-selected":u,"aria-label":a,tabIndex:-1,className:I(E(J||(J=X(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n list-style: none;\n color: inherit;\n cursor: pointer;\n overflow: hidden;\n font-size: var(--lg-combobox-item-font-size);\n line-height: var(--lg-combobox-item-line-height);\n padding: var(--lg-combobox-item-padding-y) var(--lg-combobox-item-padding-x);\n\n &:before {\n content: '';\n position: absolute;\n left: 0;\n width: 3px;\n height: var(--lg-combobox-item-wedge-height);\n background-color: transparent;\n border-radius: 0 2px 2px 0;\n transform: scaleY(0.3);\n transition: 150ms ease-in-out;\n transition-property: transform, background-color;\n }\n\n &:hover {\n outline: none;\n background-color: var(--lg-combobox-item-hover-color);\n }\n\n &[aria-selected='true'] {\n outline: none;\n background-color: var(--lg-combobox-item-active-color);\n\n &:before {\n background-color: var(--lg-combobox-item-wedge-color);\n transform: scaleY(1);\n }\n }\n"]))),d),onClick:w,onKeyPress:w},C)}));function hn(n){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}fn.displayName="ComboboxOption",hn.displayName="ComboboxOption";var vn,xn,yn,wn,kn,Cn,Nn,On,jn,Mn,En,In,Sn,zn,Pn,Dn,Ln,Fn,An,Tn,Rn,Wn,Bn,Gn=function(n){var o,e,r=n.darkMode,t=n.size;switch(o=r?E(on||(on=X([""]))):E(en||(en=X(["\n --lg-combobox-chip-text-color: ",";\n --lg-combobox-chip-icon-color: ",";\n --lg-combobox-chip-background-color: ",";\n --lg-combobox-chip-hover-color: ",";\n --lg-combobox-chip-focus-color: ",";\n "])),z.gray.dark3,z.gray.dark2,z.gray.light2,z.gray.light1,z.blue.light2),t){case"default":e=E(rn||(rn=X(["\n --lg-combobox-chip-height: 24px;\n --lg-combobox-chip-border-radius: 4px;\n --lg-combobox-chip-font-size: 14px;\n --lg-combobox-chip-line-height: 20px;\n --lg-combobox-chip-padding-x: 6px;\n "])))}return I(o,e,E(tn||(tn=X(["\n display: inline-flex;\n align-items: center;\n overflow: hidden;\n white-space: nowrap;\n height: var(--lg-combobox-chip-height);\n font-size: var(--lg-combobox-chip-font-size);\n line-height: var(--lg-combobox-chip-line-height);\n border-radius: var(--lg-combobox-chip-border-radius);\n color: var(--lg-combobox-chip-text-color);\n background-color: var(--lg-combobox-chip-background-color);\n\n // TODO - refine these styles\n /* &:focus, */\n &:focus-within {\n background-color: var(--lg-combobox-chip-focus-color);\n }\n "]))))},Kn=E(an||(an=X(["\n padding-inline: var(--lg-combobox-chip-padding-x);\n"]))),Vn=E(ln||(ln=X(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n outline: none;\n border: none;\n background-color: transparent;\n color: var(--lg-combobox-chip-icon-color);\n cursor: pointer;\n transition: background-color 100ms ease-in-out;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 1px;\n background-color: var(--lg-combobox-chip-hover-color);\n }\n\n &:hover {\n background-color: var(--lg-combobox-chip-hover-color);\n }\n"]))),Hn=n.forwardRef((function(n,o){var r=n.displayName,l=n.isFocused,c=n.onRemove,u=n.onFocus,s=e(cn),d=s.darkMode,b=s.size,p=s.disabled,g=s.chipTruncationLocation,m=void 0===g?"end":g,f=s.chipCharacterLimit,h=void 0===f?12:f,v=!!h&&!!m&&"none"!==m&&r.length>h,x=i(null),y=t((function(){if(v){var n=h-3;switch(m){case"start":return"…"+r.substring(r.length-n).trim();case"middle":return r.substring(0,n/2).trim()+"…"+r.substring(r.length-n/2).trim();case"end":return r.substring(0,n).trim()+"…";default:return r}}return!1}),[h,m,r,v]);a((function(){var n;l&&!p&&(null==x||null===(n=x.current)||void 0===n||n.focus())}),[p,o,l]);var w=L("combobox-chip");return T("span",H({role:"option","aria-selected":l,"data-test-id":"lg-combobox-chip"},w.prop,{ref:o,className:Gn({darkMode:d,size:b}),onClick:function(n){var o;null!==(o=x.current)&&void 0!==o&&o.contains(n.target)||u()},tabIndex:-1}),T("span",{className:Kn},y?T(R,{definition:r,align:"bottom"},y):r),T("button",{"aria-label":"Deselect ".concat(r),"aria-disabled":p,disabled:p,ref:x,className:Vn,onClick:function(){p||c()},onKeyDown:function(n){p||n.keyCode!==un.Delete&&n.keyCode!==un.Backspace&&n.keyCode!==un.Enter&&n.keyCode!==un.Space||c()}},T(O,{glyph:"X"})))}));Hn.displayName="Chip";var Un,Xn,Zn=function(n){var o=n.darkMode,e=n.size,r=n.overflow;return I(function(n){return n?E(vn||(vn=X([""]))):E(xn||(xn=X(["\n --lg-combobox-color-error: ",";\n --lg-combobox-text-color: ",";\n --lg-combobox-text-color-disabled: ",";\n\n --lg-combobox-background-color: ",";\n --lg-combobox-background-color-focus: ",";\n --lg-combobox-background-color-disabled: ",";\n\n --lg-combobox-border-color: ",";\n --lg-combobox-border-color-disabled: ",";\n --lg-combobox-border-color-error: ",";\n\n --lg-combobox-shadow: 0px 1px 2px rgba(6, 22, 33, 0.3);\n --lg-combobox-shadow-focus: 0px 4px 4px rgba(6, 22, 33, 0.3);\n "])),z.red.base,z.gray.dark3,z.gray.dark1,z.gray.light3,z.white,z.gray.light2,z.gray.base,z.gray.light1,z.red.base)}(o),function(n){switch(n){case"default":return E(yn||(yn=X(["\n --lg-combobox-padding-y: 5px;\n --lg-combobox-padding-x: 7px;\n --lg-combobox-height: 24px;\n --lg-combobox-font-size: 14px;\n --lg-combobox-line-height: 20px;\n --lg-combobox-border-radius: 3px;\n --lg-combobox-icon-height: 16px;\n "])))}}(e),E(wn||(wn=X(["\n --lg-combobox-width: ",";\n --lg-combobox-padding: var(--lg-combobox-padding-y)\n var(--lg-combobox-padding-x) var(--lg-combobox-padding-y)\n ",";\n width: var(--lg-combobox-width);\n "])),"expand-x"===r?"unset":"100%","scroll-x"===r?"0":"var(--lg-combobox-padding-x)"))},Yn=E(kn||(kn=X(["\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n padding: var(--lg-combobox-padding);\n color: var(--lg-combobox-text-color);\n background-color: var(--lg-combobox-background-color);\n box-shadow: var(--lg-combobox-shadow);\n border: 1px solid var(--lg-combobox-border-color);\n border-radius: var(--lg-combobox-border-radius);\n width: var(--lg-combobox-width);\n cursor: text;\n transition: 150ms ease-in-out;\n transition-property: background-color, box-shadow;\n min-width: 256px;\n\n &:focus-within {\n background-color: var(--lg-combobox-background-color-focus);\n box-shadow: var(--lg-combobox-shadow-focus);\n }\n\n &[data-disabled='true'] {\n color: var(--lg-combobox-text-color-disabled);\n background-color: var(--lg-combobox-background-color-disabled);\n border-color: var(--lg-combobox-border-color-disabled);\n box-shadow: unset;\n cursor: not-allowed;\n }\n\n &[data-state='error'] {\n border-color: var(--lg-combobox-border-color-error);\n }\n"]))),$n=E(Cn||(Cn=X(["\n width: var(--lg-combobox-width);\n"]))),qn=function(n){var o=n.state;return n.darkMode?{hovered:"error"===o?z.red.dark2:void 0}:{hovered:"error"===o?z.red.light3:void 0}},Jn=function(n){var o,e=n.overflow,r=n.isOpen,t=n.selection,i=n.value,a=u(t)&&t.length>0,l=null!==(o=null==i?void 0:i.length)&&void 0!==o?o:0,c=E(Nn||(Nn=X(["\n flex-grow: 1;\n width: var(--lg-combobox-width);\n\n --lg-combobox-input-width: ",";\n "])),a?"".concat(l,"ch"):"100%");switch(e){case"scroll-x":return E(On||(On=X(["\n ","\n display: block;\n height: var(--lg-combobox-height);\n white-space: nowrap;\n overflow-x: scroll;\n scroll-behavior: smooth;\n scrollbar-width: none;\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by `scroll-behavior` \n */\n --lg-combobox-input-transition: width ease-in-out\n ",";\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n & > * {\n margin-inline: 2px;\n\n &:first-child:not(input) {\n margin-inline-start: 0;\n }\n\n &:last-child:not(input) {\n margin-inline-end: 0;\n }\n }\n "],["\n ","\n display: block;\n height: var(--lg-combobox-height);\n white-space: nowrap;\n overflow-x: scroll;\n scroll-behavior: smooth;\n scrollbar-width: none;\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by \\`scroll-behavior\\` \n */\n --lg-combobox-input-transition: width ease-in-out\n ",";\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n & > * {\n margin-inline: 2px;\n\n &:first-child:not(input) {\n margin-inline-start: 0;\n }\n\n &:last-child:not(input) {\n margin-inline-end: 0;\n }\n }\n "])),c,r?"0":"100ms");case"expand-x":return E(jn||(jn=X(["\n ","\n display: flex;\n gap: 4px;\n flex-wrap: nowrap;\n white-space: nowrap;\n height: var(--lg-combobox-height);\n --lg-combobox-input-transition: none;\n "])),c);case"expand-y":return E(Mn||(Mn=X(["\n ","\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n overflow-x: visible;\n min-height: var(--lg-combobox-height);\n "])),c)}},Qn=E(En||(En=X(["\n border: none;\n cursor: inherit;\n background-color: inherit;\n box-sizing: content-box;\n padding: 0;\n margin: 0;\n text-overflow: ellipsis;\n line-height: var(--lg-combobox-line-height);\n height: var(--lg-combobox-height);\n width: var(--lg-combobox-input-width, 0);\n transition: var(--lg-combobox-input-transition);\n\n &:focus {\n outline: none;\n }\n"]))),_n=E(In||(In=X(["\n // Add a negative margin so the button takes up the same space as the regular icons\n margin-block: calc(var(--lg-combobox-icon-height) / 2 - 100%);\n"]))),no=E(Sn||(Sn=X(["\n font-size: var(--lg-combobox-font-size);\n line-height: var(--lg-combobox-line-height);\n color: var(--lg-combobox-color-error);\n padding-top: var(--lg-combobox-padding-y);\n"]))),oo=E(zn||(zn=X(["\n margin-inline-end: calc(var(--lg-combobox-padding-x) / 2);\n"]))),eo=S(Pn||(Pn=X(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]))),ro=E(Dn||(Dn=X(["\n animation: "," 1.5s linear infinite;\n"])),eo),to=function(n){var o,e,r=n.darkMode,t=n.size,i=n.width,a=void 0===i?384:i;switch(o=r?E(Ln||(Ln=X([""]))):E(Fn||(Fn=X(["\n --lg-combobox-menu-color: ",";\n --lg-combobox-menu-message-color: ",";\n --lg-combobox-menu-background-color: ",";\n --lg-combobox-menu-shadow: 0px 3px 7px rgba(0, 0, 0, 0.25);\n --lg-combobox-item-hover-color: ",";\n --lg-combobox-item-active-color: ",";\n --lg-combobox-item-wedge-color: ",";\n "])),z.gray.dark3,z.gray.dark1,z.white,z.gray.light2,z.blue.light3,z.blue.base),t){case"default":e=E(An||(An=X(["\n --lg-combobox-menu-border-radius: 4px;\n --lg-combobox-item-height: 36px;\n --lg-combobox-item-padding-y: 8px;\n --lg-combobox-item-padding-x: 12px;\n --lg-combobox-item-font-size: 14px;\n --lg-combobox-item-line-height: 21px;\n --lg-combobox-item-wedge-height: 22px;\n "])))}return I(o,e,E(Tn||(Tn=X(["\n width: ","px;\n border-radius: var(--lg-combobox-menu-border-radius);\n\n & > * {\n border-radius: inherit;\n }\n "])),a))},io=function(n){var o=n.maxHeight;return E(Rn||(Rn=X(["\n position: relative;\n width: 100%;\n margin: 0;\n padding: 0;\n font-family: ",";\n color: var(--lg-combobox-menu-color);\n background-color: var(--lg-combobox-menu-background-color);\n box-shadow: var(--lg-combobox-menu-shadow);\n border-radius: inherit;\n overflow: auto;\n min-height: var(--lg-combobox-item-height);\n max-height: ","px;\n scroll-behavior: smooth;\n"])),W.default,o)},ao=E(Wn||(Wn=X(["\n position: relative;\n margin: 0;\n padding: 0;\n"]))),lo=E(Bn||(Bn=X(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-size: var(--lg-combobox-item-font-size);\n color: var(--lg-combobox-menu-message-color);\n padding: var(--lg-combobox-item-padding-y) var(--lg-combobox-item-padding-x);\n\n & > svg {\n width: 1em;\n height: 1em;\n }\n"]))),co=function(n){return E(Un||(Un=X(["\n --lg-combobox-group-label-color: ",";\n --lg-combobox-group-border-color: ",";\n padding-top: 8px;\n border-bottom: 1px solid var(--lg-combobox-group-border-color);\n"])),n?z.gray.light1:z.gray.dark1,n?z.gray.dark1:z.gray.light1)},uo=E(Xn||(Xn=X(["\n cursor: default;\n width: 100%;\n padding: 0 12px 2px;\n outline: none;\n overflow-wrap: anywhere;\n font-size: 12px;\n line-height: 16px;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--lg-combobox-group-label-color);\n"])));function so(o){var r=o.label,t=o.className,i=o.children,a=e(cn).darkMode,l=v({prefix:"combobox-group"});return n.Children.count(i)>0?T("div",{className:I(co(a),t)},T("div",{className:uo,id:l},r),T("div",{role:"group","aria-labelledby":l},i)):T(n.Fragment,null)}function bo(n){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}bo.displayName="ComboboxGroup";var po=["children","label","description","placeholder","aria-label","disabled","size","darkMode","state","errorMessage","searchState","searchEmptyMessage","searchErrorMessage","searchLoadingMessage","filteredOptions","onFilter","clearable","onClear","overflow","multiselect","initialValue","onChange","value","chipTruncationLocation","chipCharacterLimit","className","usePortal","portalClassName","portalContainer","scrollContainer","popoverZIndex"];function go(o){var e=o.children,c=o.label,x=o.description,j=o.placeholder,E=void 0===j?"Select":j,S=o["aria-label"],D=o.disabled,L=void 0!==D&&D,A=o.size,R=void 0===A?"default":A,W=o.darkMode,B=void 0!==W&&W,V=o.state,X=void 0===V?"none":V,Y=o.errorMessage,$=o.searchState,q=void 0===$?"unset":$,J=o.searchEmptyMessage,Q=void 0===J?"No results found":J,_=o.searchErrorMessage,nn=void 0===_?"Could not get results!":_,on=o.searchLoadingMessage,en=void 0===on?"Loading results...":on,rn=o.filteredOptions,tn=o.onFilter,an=o.clearable,ln=void 0===an||an,sn=o.onClear,pn=o.overflow,gn=void 0===pn?"expand-y":pn,mn=o.multiselect,hn=void 0!==mn&&mn,vn=o.initialValue,xn=o.onChange,yn=o.value,wn=o.chipTruncationLocation,kn=o.chipCharacterLimit,Cn=void 0===kn?12:kn,Nn=o.className,On=o.usePortal,jn=void 0===On||On,Mn=o.portalClassName,En=o.portalContainer,In=o.scrollContainer,Sn=o.popoverZIndex,zn=U(o,po),Pn=y({prefix:"option"}),Dn=y({prefix:"chip"}),Ln=v({prefix:"combobox-input"}),Fn=v({prefix:"combobox-label"}),An=v({prefix:"combobox-menu"}),Tn=i(null),Rn=i(null),Wn=i(null),Bn=i(null),Gn=i(null),Kn=Z(l(!1),2),Vn=Kn[0],Un=Kn[1],Xn=w(Vn),eo=Z(l(null),2),co=eo[0],uo=eo[1],bo=Z(l(null),2),go=bo[0],mo=bo[1],fo=w(go),ho=Z(l(""),2),vo=ho[0],xo=ho[1],yo=w(vo),wo=Z(l(null),2),ko=wo[0],Co=wo[1],No=!s(go)&&(u(go)&&go.length>0||d(go)),Oo=r((function(n){return!hn||"string"!=typeof n&&"number"!=typeof n?!hn&&u(n)&&F.error("Error in Combobox: multiselect is set to `false`, but recieved an Array value"):F.error("Error in Combobox: multiselect is set to `true`, but recieved a ".concat(K(n),' value: "').concat(n,'"')),hn&&u(n)}),[hn]),jo=r((function(n){!L&&Bn&&Bn.current&&(Bn.current.focus(),b(n)||Bn.current.setSelectionRange(n,n))}),[L]),Mo=r((function(n){if(Oo(go)){var o=p(go);s(n)?o.length=0:go.includes(n)?o.splice(o.indexOf(n),1):(o.push(n),xo("")),mo(o),null==xn||xn(o)}else{var e=n;mo(e),null==xn||xn(e)}}),[Oo,xn,go]),Eo=function(){Wn&&Wn.current&&(Wn.current.scrollLeft=Wn.current.scrollWidth)},Io=hn&&u(go)&&go.length>0?void 0:E,So=t((function(){return bn(e)}),[e]),zo=r((function(n){var o,e;return n?null!==(o=null===(e=So.find((function(o){return o.value===n})))||void 0===e?void 0:e.displayName)&&void 0!==o?o:n:""}),[So]),Po=r((function(n){var o="string"==typeof n?n:n.value;return rn&&rn.length>0?rn.includes(o):("string"==typeof n?zo(o):n.displayName).toLowerCase().includes(vo.toLowerCase())}),[rn,zo,vo]),Do=t((function(){return So.filter(Po)}),[So,Po]),Lo=r((function(n){return!!n&&!!So.find((function(o){return o.value===n}))}),[So]),Fo=r((function(n){return Do?Do.findIndex((function(o){return o.value===n})):-1}),[Do]),Ao=r((function(n){if(Do&&Do.length>=n){var o=Do[n];return o?o.value:void 0}}),[Do]),To=r((function(){return Oo(go)?go.findIndex((function(n){var o,e;return null===(o=Dn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})):-1}),[Dn,Oo,go]),Ro=r((function(){var n,o,e,r=null===(n=Bn.current)||void 0===n?void 0:n.contains(document.activeElement),t=null===(o=Rn.current)||void 0===o?void 0:o.contains(document.activeElement),i=Oo(go)&&go.some((function(n){var o,e;return null===(o=Dn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})),a=function(){return Oo(go)?go.findIndex((function(n){var o,e;return null===(o=Dn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})):-1};return Oo(go)&&i?0===a()?"FirstChip":a()===go.length-1?"LastChip":"MiddleChip":r?"Input":t?"ClearButton":null!==(e=Tn.current)&&void 0!==e&&e.contains(document.activeElement)?"Combobox":void 0}),[Dn,Oo,go]),Wo=r((function(n){var o,e=null!==(o=null==Do?void 0:Do.length)&&void 0!==o?o:0,r=e-1>0?e-1:0,t=Fo(co);switch(n&&Vn&&(Co(null),jo()),n){case"next":var i=Ao(t+1<e?t+1:0);uo(null!=i?i:null);break;case"prev":var a=Ao(t-1>=0?t-1:r);uo(null!=a?a:null);break;case"last":var l=Ao(r);uo(null!=l?l:null);break;case"first":default:var c=Ao(0);uo(null!=c?c:null)}}),[co,Fo,Ao,Vn,jo,null==Do?void 0:Do.length]),Bo=r((function(n,o){if(Oo(go))switch(n){case"next":var e=null!=o?o:To(),r=e+1<go.length?e+1:go.length-1,t=go[r];Co(t);break;case"prev":var i=null!=o?o:To(),a=i>0?i-1:i<0?go.length-1:0,l=go[a];Co(l);break;case"first":var c=go[0];Co(c);break;case"last":var u=go[go.length-1];Co(u);break;default:Co(null)}}),[To,Oo,go]),Go=r((function(n,o){n&&uo(null);var e=Ro();switch(n){case"right":switch(e){case"Input":var r,t,i;if((null===(r=Bn.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=Bn.current)||void 0===t?void 0:t.value.length))null===(i=Rn.current)||void 0===i||i.focus();break;case"LastChip":o.preventDefault(),jo(0),Bo(null);break;case"FirstChip":case"MiddleChip":Bo("next")}break;case"left":switch(e){case"ClearButton":var a;o.preventDefault(),jo(null==Bn||null===(a=Bn.current)||void 0===a?void 0:a.value.length);break;case"Input":case"MiddleChip":case"LastChip":if(Oo(go)){var l;if("Input"===e&&0!==(null===(l=Bn.current)||void 0===l?void 0:l.selectionStart))break;Bo("prev")}}break;default:Bo(null)}}),[Ro,Oo,go,jo,Bo]);a((function(){vo!==yo&&Wo("first")}),[vo,Vn,yo,Wo]),a((function(){if(co){var n=Pn(co);if(n&&n.current&&Gn.current){var o=n.current.offsetTop,e=Gn.current,r=e.scrollTop;(o>e.offsetHeight||o<r)&&(Gn.current.scrollTop=o)}}}),[co,Pn]);var Ko=r((function(o){return n.Children.map(o,(function(n){if(P(n,"ComboboxOption")){var o=dn(n.props),e=o.value,r=o.displayName;if(Po(e)){var t=n.props,i=t.className,a=t.glyph,l=So.findIndex((function(n){return n.value===e})),c=co===e,u=Oo(go)?go.includes(e):go===e,s=Pn(e);return T(fn,{value:e,displayName:r,isFocused:c,isSelected:u,setSelected:function(){uo(e),Mo(e),jo(),e===go&&$o()},glyph:a,className:i,index:l,ref:s})}}else if(P(n,"ComboboxGroup")){var d=Ko(n.props.children);if(d&&(null==d?void 0:d.length)>0)return T(so,{label:n.props.label,className:n.props.className},Ko(d))}}))}),[So,co,Pn,Oo,Po,go,jo,Mo]),Vo=t((function(){return Ko(e)}),[e,Ko]),Ho=t((function(){if(Oo(go))return go.filter(Lo).map((function(n,o){var e=zo(n),r=ko===n,t=Dn(n);return T(Hn,{key:n,displayName:e,isFocused:r,onRemove:function(){Bo("next",o),Mo(n)},onFocus:function(){Co(n)},ref:t})}))}),[Oo,go,Lo,zo,ko,Dn,Bo,Mo]),Uo=t((function(){return T(n.Fragment,null,ln&&No&&T(M,{"aria-label":"Clear selection","aria-disabled":L,disabled:L,ref:Rn,onClick:function(n){L||(Mo(null),null==sn||sn(n),null==tn||tn(""),Vn||qo())},onFocus:re,className:_n},T(O,{glyph:"XWithCircle"})),T(O,"error"===X?{glyph:"Warning",color:z.red.base,className:oo}:{glyph:"CaretDown",className:oo}))}),[ln,No,L,X,Mo,sn,tn,Vn]),Xo=t((function(){return So.some((function(n){return n.hasGlyph}))}),[So]),Zo=r((function(){if(!Oo(go)&&go===fo){var n=Do.find((function(n){return n.displayName===vo||n.value===vo}));if(n&&!yn)mo(n.value);else{var o,e=null!==(o=zo(go))&&void 0!==o?o:"";xo(e)}}}),[zo,vo,Oo,fo,go,yn,Do]),Yo=r((function(){if(No){if(Oo(go))Eo();else if(!Oo(go)){var n,o=null!==(n=zo(go))&&void 0!==n?n:"";xo(o),$o()}}else xo("")}),[No,zo,Oo,go]);a((function(){if(vn)if(u(vn)){var n,o=null!==(n=vn.filter((function(n){return Lo(n)})))&&void 0!==n?n:[];mo(o)}else Lo(vn)&&mo(vn);else mo(function(n){return n?[]:null}(hn))}),[]),a((function(){if(!b(yn)&&yn!==yo)if(s(yn))mo(null);else if(Oo(yn)){var n=yn.filter(Lo);mo(n)}else mo(Lo(yn)?yn:null)}),[Oo,Lo,yo,yn]),a((function(){g(go,fo)||Yo()}),[Yo,fo,go]),a((function(){Vn||Xn===Vn||Zo()}),[Vn,Xn,Zo]);var $o=function(){return Un(!1)},qo=function(){return Un(!0)},Jo=Z(l(0),2),Qo=Jo[0],_o=Jo[1];a((function(){var n,o;_o(null!==(n=null===(o=Tn.current)||void 0===o?void 0:o.clientWidth)&&void 0!==n?n:0)}),[Tn,Vn,co,go]);var ne=t((function(){switch(q){case"loading":return T("span",{className:lo},T(O,{glyph:"Refresh",color:z.blue.base,className:ro}),en);case"error":return T("span",{className:lo},T(O,{glyph:"Warning",color:z.red.base}),nn);case"unset":default:return Vo&&Vo.length>0?T("ul",{className:ao},Vo):T("span",{className:lo},Q)}}),[Vo,Q,nn,en,q]),oe=k(),ee=t((function(){if(oe&&Tn.current&&Gn.current){var n=Tn.current.getBoundingClientRect(),o=n.top,e=n.bottom,r=Math.max(oe.height-e,o);return Math.min(274,r-8)}return 274}),[oe,Tn,Gn]);a((function(){}),[co]);var re=function(){uo(null)};C("mousedown",(function(n){var o,e,r=n.target;(null===(o=Gn.current)||void 0===o?void 0:o.contains(r))||(null===(e=Tn.current)||void 0===e?void 0:e.contains(r))||!1||Un(!1)}));var te=G({popoverZIndex:Sn},jn?{usePortal:jn,portalClassName:Mn,portalContainer:En,scrollContainer:In}:{usePortal:jn});return T(cn.Provider,{value:{multiselect:hn,darkMode:B,size:R,withIcons:Xo,disabled:L,chipTruncationLocation:wn,chipCharacterLimit:Cn,inputValue:vo}},T("div",H({className:I(Zn({darkMode:B,size:R,overflow:gn}),Nn)},zn),T("div",null,c&&T(m,{id:Fn,htmlFor:Ln},c),x&&T(f,null,x)),T(N,{className:$n,disabled:L,color:qn({state:X,darkMode:B})},T("div",{ref:Tn,role:"combobox","aria-expanded":Vn,"aria-controls":An,"aria-owns":An,tabIndex:-1,className:Yn,onMouseDown:function(n){L&&n.preventDefault()},onClick:function(n){if(n.target!==Bn.current){var o=0;if(Bn.current)o=n.nativeEvent.offsetX>Bn.current.offsetLeft+Bn.current.clientWidth?vo.length:0;jo(o)}},onFocus:function(){Eo(),qo()},onKeyDown:function(n){var o,e,r=null===(o=Gn.current)||void 0===o?void 0:o.contains(document.activeElement);if((null===(e=Tn.current)||void 0===e?void 0:e.contains(document.activeElement))||r){if(n.ctrlKey||n.shiftKey||n.altKey)return;var t=Ro();switch(n.keyCode){case un.Tab:switch(t){case"Input":No||($o(),Wo("first"),Bo(null));break;case"LastChip":Bo(null)}break;case un.Escape:$o(),Wo("first");break;case un.Enter:document.activeElement===Bn.current&&Vn&&!s(co)?Mo(co):document.activeElement===Rn.current&&(Mo(null),jo());break;case un.Backspace:var i;Oo(go)&&0===(null===(i=Bn.current)||void 0===i?void 0:i.selectionStart)?Bo("last"):qo();break;case un.ArrowDown:Vn&&n.preventDefault(),qo(),Wo("next");break;case un.ArrowUp:Vn&&n.preventDefault(),Wo("prev");break;case un.ArrowRight:Go("right",n);break;case un.ArrowLeft:Go("left",n);break;default:Vn||qo()}}},onTransitionEnd:function(){var n,o;_o(null!==(n=null===(o=Tn.current)||void 0===o?void 0:o.clientWidth)&&void 0!==n?n:0)},"data-disabled":L,"data-state":X},T("div",{ref:Wn,className:Jn({overflow:gn,isOpen:Vn,selection:go,value:vo})},Ho,T("input",{"aria-label":null!=S?S:c,"aria-autocomplete":"list","aria-controls":An,"aria-labelledby":Fn,ref:Bn,id:Ln,className:Qn,placeholder:Io,disabled:null!=L?L:void 0,onChange:function(n){var o=n.target.value;xo(o),null==tn||tn(o)},value:vo,autoComplete:"off"})),Uo)),"error"===X&&Y&&T("div",{className:no},Y),T(h,H({active:Vn&&!L,spacing:4,align:"bottom",justify:"middle",refEl:Tn,adjustOnMutation:!0,className:to({darkMode:B,size:R,width:Qo})},te),T("div",{id:An,role:"listbox","aria-labelledby":Fn,"aria-expanded":Vn,ref:Gn,className:io({maxHeight:ee}),onMouseDownCapture:function(n){return n.preventDefault()}},ne))))}export{go as Combobox,bo as ComboboxGroup,hn as ComboboxOption};
|
|
1
|
+
import n,{createContext as o,useContext as e,useCallback as r,useMemo as t,useRef as i,useEffect as a,useState as l}from"react";import{kebabCase as c,isArray as u,isNull as s,isString as d,isUndefined as b,clone as p,isEqual as g}from"lodash";import{Label as m,Description as f}from"@leafygreen-ui/typography";import h from"@leafygreen-ui/popover";import{useIdAllocator as v,useForwardedRef as x,useDynamicRefs as y,usePrevious as w,useViewportSize as k,useEventListener as C}from"@leafygreen-ui/hooks";import N from"@leafygreen-ui/interaction-ring";import O,{isComponentGlyph as j}from"@leafygreen-ui/icon";import M from"@leafygreen-ui/icon-button";import{css as E,cx as I,keyframes as S}from"@leafygreen-ui/emotion";import{uiColors as z}from"@leafygreen-ui/palette";import{keyMap as P,isComponentType as D,createDataProp as L,consoleOnce as F}from"@leafygreen-ui/lib";import A from"@leafygreen-ui/checkbox";import{jsx as T}from"@emotion/react";import R from"@leafygreen-ui/inline-definition";import{fontFamilies as W}from"@leafygreen-ui/tokens";function B(n,o){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);o&&(r=r.filter((function(o){return Object.getOwnPropertyDescriptor(n,o).enumerable}))),e.push.apply(e,r)}return e}function G(n){for(var o=1;o<arguments.length;o++){var e=null!=arguments[o]?arguments[o]:{};o%2?B(Object(e),!0).forEach((function(o){V(n,o,e[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):B(Object(e)).forEach((function(o){Object.defineProperty(n,o,Object.getOwnPropertyDescriptor(e,o))}))}return n}function K(n){return K="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},K(n)}function V(n,o,e){return o in n?Object.defineProperty(n,o,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[o]=e,n}function H(){return H=Object.assign||function(n){for(var o=1;o<arguments.length;o++){var e=arguments[o];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r])}return n},H.apply(this,arguments)}function U(n,o){if(null==n)return{};var e,r,t=function(n,o){if(null==n)return{};var e,r,t={},i=Object.keys(n);for(r=0;r<i.length;r++)e=i[r],o.indexOf(e)>=0||(t[e]=n[e]);return t}(n,o);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(r=0;r<i.length;r++)e=i[r],o.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(n,e)&&(t[e]=n[e])}return t}function X(n,o){return o||(o=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(o)}}))}function Z(n,o){return function(n){if(Array.isArray(n))return n}(n)||function(n,o){var e=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null==e)return;var r,t,i=[],a=!0,l=!1;try{for(e=e.call(n);!(a=(r=e.next()).done)&&(i.push(r.value),!o||i.length!==o);a=!0);}catch(n){l=!0,t=n}finally{try{a||null==e.return||e.return()}finally{if(l)throw t}}return i}(n,o)||$(n,o)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Y(n){return function(n){if(Array.isArray(n))return q(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||$(n)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function $(n,o){if(n){if("string"==typeof n)return q(n,o);var e=Object.prototype.toString.call(n).slice(8,-1);return"Object"===e&&n.constructor&&(e=n.constructor.name),"Map"===e||"Set"===e?Array.from(n):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?q(n,o):void 0}}function q(n,o){(null==o||o>n.length)&&(o=n.length);for(var e=0,r=new Array(o);e<o;e++)r[e]=n[e];return r}var J,Q,_,nn,on,en,rn,tn,an,ln,cn=o({multiselect:!1,darkMode:!1,size:"default",withIcons:!1,disabled:!1}),un=G(G({},P),{},{Backspace:8,Delete:46}),sn=function(o,e,r){if(e&&r){var t=new RegExp(e,"gi"),i=o.search(t),a=i+e.length,l=o.split(""),c=l.slice(0,i).join(""),u=l.slice(a).join(""),s=l.slice(i,a).join(""),d=n.createElement(r,null,s);return T(n.Fragment,null,c,d,u)}return T(n.Fragment,null,o)},dn=function(n){var o,e=n.value,r=n.displayName;return{value:null!=e?e:c(r),displayName:null!==(o=null!=r?r:e)&&void 0!==o?o:""}},bn=function o(e){return n.Children.toArray(e).reduce((function(n,e){if(D(e,"ComboboxOption")){var r=dn(e.props),t=r.value,i=r.displayName,a=e.props.glyph;return[].concat(Y(n),[{value:t,displayName:i,hasGlyph:!!a}])}if(D(e,"ComboboxGroup")){var l=e.props.children;if(l)return[].concat(Y(n),Y(o(l)))}}),[])},pn=E(Q||(Q=X(["\n display: inline-flex;\n gap: 8px;\n justify-content: start;\n align-items: inherit;\n"]))),gn=E(_||(_=X(["\n pointer-events: none;\n"]))),mn=function(n){return E(nn||(nn=X(["\n font-weight: ",";\n"])),n?"bold":"normal")},fn=n.forwardRef((function(o,i){var a=o.displayName,l=o.glyph,c=o.isSelected,u=o.isFocused,s=o.setSelected,d=o.className,b=e(cn),p=b.multiselect,g=b.darkMode,m=b.withIcons,f=b.inputValue,h=v({prefix:"combobox-option-text"}),y=x(i,null),w=r((function(n){n.stopPropagation(),n.target!==y.current&&"INPUT"!==n.target.tagName||s()}),[y,s]),k=t((function(){if(l){if(j(l)||D(l,"Icon"))return l;console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",l)}}),[l]),C=t((function(){if(p){var o=T(A,{label:"","aria-labelledby":h,checked:c,tabIndex:-1,animate:!1});return T(n.Fragment,null,T("span",{className:I(pn,gn)},m?k:o,T("span",{id:h,className:mn(c)},sn(a,f,"strong"))),m&&o)}return T(n.Fragment,null,T("span",{className:I(pn,gn)},k,T("span",{className:mn(c)},sn(a,f,"strong"))),c&&T(O,{glyph:"Checkmark",color:g?z.blue.light1:z.blue.base}))}),[p,k,c,a,f,g,h,m]);return T("li",{ref:y,role:"option","aria-selected":u,"aria-label":a,tabIndex:-1,className:I(E(J||(J=X(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n list-style: none;\n color: inherit;\n cursor: pointer;\n overflow: hidden;\n font-size: var(--lg-combobox-item-font-size);\n line-height: var(--lg-combobox-item-line-height);\n padding: var(--lg-combobox-item-padding-y) var(--lg-combobox-item-padding-x);\n\n &:before {\n content: '';\n position: absolute;\n left: 0;\n width: 3px;\n height: var(--lg-combobox-item-wedge-height);\n background-color: transparent;\n border-radius: 0 2px 2px 0;\n transform: scaleY(0.3);\n transition: 150ms ease-in-out;\n transition-property: transform, background-color;\n }\n\n &:hover {\n outline: none;\n background-color: var(--lg-combobox-item-hover-color);\n }\n\n &[aria-selected='true'] {\n outline: none;\n background-color: var(--lg-combobox-item-active-color);\n\n &:before {\n background-color: var(--lg-combobox-item-wedge-color);\n transform: scaleY(1);\n }\n }\n"]))),d),onClick:w,onKeyPress:w},C)}));function hn(n){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}fn.displayName="ComboboxOption",hn.displayName="ComboboxOption";var vn,xn,yn,wn,kn,Cn,Nn,On,jn,Mn,En,In,Sn,zn,Pn,Dn,Ln,Fn,An,Tn,Rn,Wn,Bn,Gn=function(n){var o,e,r=n.darkMode,t=n.size;if(o=r?E(on||(on=X([""]))):E(en||(en=X(["\n --lg-combobox-chip-text-color: ",";\n --lg-combobox-chip-icon-color: ",";\n --lg-combobox-chip-background-color: ",";\n --lg-combobox-chip-hover-color: ",";\n --lg-combobox-chip-focus-color: ",";\n "])),z.gray.dark3,z.gray.dark2,z.gray.light2,z.gray.light1,z.blue.light2),"default"===t)e=E(rn||(rn=X(["\n --lg-combobox-chip-height: 24px;\n --lg-combobox-chip-border-radius: 4px;\n --lg-combobox-chip-font-size: 14px;\n --lg-combobox-chip-line-height: 20px;\n --lg-combobox-chip-padding-x: 6px;\n "])));return I(o,e,E(tn||(tn=X(["\n display: inline-flex;\n align-items: center;\n overflow: hidden;\n white-space: nowrap;\n height: var(--lg-combobox-chip-height);\n font-size: var(--lg-combobox-chip-font-size);\n line-height: var(--lg-combobox-chip-line-height);\n border-radius: var(--lg-combobox-chip-border-radius);\n color: var(--lg-combobox-chip-text-color);\n background-color: var(--lg-combobox-chip-background-color);\n\n // TODO - refine these styles\n /* &:focus, */\n &:focus-within {\n background-color: var(--lg-combobox-chip-focus-color);\n }\n "]))))},Kn=E(an||(an=X(["\n padding-inline: var(--lg-combobox-chip-padding-x);\n"]))),Vn=E(ln||(ln=X(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n outline: none;\n border: none;\n background-color: transparent;\n color: var(--lg-combobox-chip-icon-color);\n cursor: pointer;\n transition: background-color 100ms ease-in-out;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 1px;\n background-color: var(--lg-combobox-chip-hover-color);\n }\n\n &:hover {\n background-color: var(--lg-combobox-chip-hover-color);\n }\n"]))),Hn=n.forwardRef((function(n,o){var r=n.displayName,l=n.isFocused,c=n.onRemove,u=n.onFocus,s=e(cn),d=s.darkMode,b=s.size,p=s.disabled,g=s.chipTruncationLocation,m=void 0===g?"end":g,f=s.chipCharacterLimit,h=void 0===f?12:f,v=!!h&&!!m&&"none"!==m&&r.length>h,x=i(null),y=t((function(){if(v){var n=h-3;switch(m){case"start":return"…"+r.substring(r.length-n).trim();case"middle":return r.substring(0,n/2).trim()+"…"+r.substring(r.length-n/2).trim();case"end":return r.substring(0,n).trim()+"…";default:return r}}return!1}),[h,m,r,v]);a((function(){var n;l&&!p&&(null==x||null===(n=x.current)||void 0===n||n.focus())}),[p,o,l]);var w=L("combobox-chip");return T("span",H({role:"option","aria-selected":l,"data-test-id":"lg-combobox-chip"},w.prop,{ref:o,className:Gn({darkMode:d,size:b}),onClick:function(n){var o;null!==(o=x.current)&&void 0!==o&&o.contains(n.target)||u()},tabIndex:-1}),T("span",{className:Kn},y?T(R,{definition:r,align:"bottom"},y):r),T("button",{"aria-label":"Deselect ".concat(r),"aria-disabled":p,disabled:p,ref:x,className:Vn,onClick:function(){p||c()},onKeyDown:function(n){p||n.keyCode!==un.Delete&&n.keyCode!==un.Backspace&&n.keyCode!==un.Enter&&n.keyCode!==un.Space||c()}},T(O,{glyph:"X"})))}));Hn.displayName="Chip";var Un,Xn,Zn=function(n){var o=n.darkMode,e=n.size,r=n.overflow;return I(function(n){return n?E(vn||(vn=X([""]))):E(xn||(xn=X(["\n --lg-combobox-color-error: ",";\n --lg-combobox-text-color: ",";\n --lg-combobox-text-color-disabled: ",";\n\n --lg-combobox-background-color: ",";\n --lg-combobox-background-color-focus: ",";\n --lg-combobox-background-color-disabled: ",";\n\n --lg-combobox-border-color: ",";\n --lg-combobox-border-color-disabled: ",";\n --lg-combobox-border-color-error: ",";\n\n --lg-combobox-shadow: 0px 1px 2px rgba(6, 22, 33, 0.3);\n --lg-combobox-shadow-focus: 0px 4px 4px rgba(6, 22, 33, 0.3);\n "])),z.red.base,z.gray.dark3,z.gray.dark1,z.gray.light3,z.white,z.gray.light2,z.gray.base,z.gray.light1,z.red.base)}(o),function(n){if("default"===n)return E(yn||(yn=X(["\n --lg-combobox-padding-y: 5px;\n --lg-combobox-padding-x: 7px;\n --lg-combobox-height: 24px;\n --lg-combobox-font-size: 14px;\n --lg-combobox-line-height: 20px;\n --lg-combobox-border-radius: 3px;\n --lg-combobox-icon-height: 16px;\n "])))}(e),E(wn||(wn=X(["\n --lg-combobox-width: ",";\n --lg-combobox-padding: var(--lg-combobox-padding-y)\n var(--lg-combobox-padding-x) var(--lg-combobox-padding-y)\n ",";\n width: var(--lg-combobox-width);\n "])),"expand-x"===r?"unset":"100%","scroll-x"===r?"0":"var(--lg-combobox-padding-x)"))},Yn=E(kn||(kn=X(["\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n padding: var(--lg-combobox-padding);\n color: var(--lg-combobox-text-color);\n background-color: var(--lg-combobox-background-color);\n box-shadow: var(--lg-combobox-shadow);\n border: 1px solid var(--lg-combobox-border-color);\n border-radius: var(--lg-combobox-border-radius);\n width: var(--lg-combobox-width);\n cursor: text;\n transition: 150ms ease-in-out;\n transition-property: background-color, box-shadow;\n min-width: 256px;\n\n &:focus-within {\n background-color: var(--lg-combobox-background-color-focus);\n box-shadow: var(--lg-combobox-shadow-focus);\n }\n\n &[data-disabled='true'] {\n color: var(--lg-combobox-text-color-disabled);\n background-color: var(--lg-combobox-background-color-disabled);\n border-color: var(--lg-combobox-border-color-disabled);\n box-shadow: unset;\n cursor: not-allowed;\n }\n\n &[data-state='error'] {\n border-color: var(--lg-combobox-border-color-error);\n }\n"]))),$n=E(Cn||(Cn=X(["\n width: var(--lg-combobox-width);\n"]))),qn=function(n){var o=n.state;return n.darkMode?{hovered:"error"===o?z.red.dark2:void 0}:{hovered:"error"===o?z.red.light3:void 0}},Jn=function(n){var o,e=n.overflow,r=n.isOpen,t=n.selection,i=n.value,a=u(t)&&t.length>0,l=null!==(o=null==i?void 0:i.length)&&void 0!==o?o:0,c=E(Nn||(Nn=X(["\n flex-grow: 1;\n width: var(--lg-combobox-width);\n\n --lg-combobox-input-width: ",";\n "])),a?"".concat(l,"ch"):"100%");switch(e){case"scroll-x":return E(On||(On=X(["\n ","\n display: block;\n height: var(--lg-combobox-height);\n white-space: nowrap;\n overflow-x: scroll;\n scroll-behavior: smooth;\n scrollbar-width: none;\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by `scroll-behavior` \n */\n --lg-combobox-input-transition: width ease-in-out\n ",";\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n & > * {\n margin-inline: 2px;\n\n &:first-child:not(input) {\n margin-inline-start: 0;\n }\n\n &:last-child:not(input) {\n margin-inline-end: 0;\n }\n }\n "],["\n ","\n display: block;\n height: var(--lg-combobox-height);\n white-space: nowrap;\n overflow-x: scroll;\n scroll-behavior: smooth;\n scrollbar-width: none;\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by \\`scroll-behavior\\` \n */\n --lg-combobox-input-transition: width ease-in-out\n ",";\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n & > * {\n margin-inline: 2px;\n\n &:first-child:not(input) {\n margin-inline-start: 0;\n }\n\n &:last-child:not(input) {\n margin-inline-end: 0;\n }\n }\n "])),c,r?"0":"100ms");case"expand-x":return E(jn||(jn=X(["\n ","\n display: flex;\n gap: 4px;\n flex-wrap: nowrap;\n white-space: nowrap;\n height: var(--lg-combobox-height);\n --lg-combobox-input-transition: none;\n "])),c);case"expand-y":return E(Mn||(Mn=X(["\n ","\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n overflow-x: visible;\n min-height: var(--lg-combobox-height);\n "])),c)}},Qn=E(En||(En=X(["\n border: none;\n cursor: inherit;\n background-color: inherit;\n box-sizing: content-box;\n padding: 0;\n margin: 0;\n text-overflow: ellipsis;\n line-height: var(--lg-combobox-line-height);\n height: var(--lg-combobox-height);\n width: var(--lg-combobox-input-width, 0);\n transition: var(--lg-combobox-input-transition);\n\n &:focus {\n outline: none;\n }\n"]))),_n=E(In||(In=X(["\n // Add a negative margin so the button takes up the same space as the regular icons\n margin-block: calc(var(--lg-combobox-icon-height) / 2 - 100%);\n"]))),no=E(Sn||(Sn=X(["\n font-size: var(--lg-combobox-font-size);\n line-height: var(--lg-combobox-line-height);\n color: var(--lg-combobox-color-error);\n padding-top: var(--lg-combobox-padding-y);\n"]))),oo=E(zn||(zn=X(["\n margin-inline-end: calc(var(--lg-combobox-padding-x) / 2);\n"]))),eo=S(Pn||(Pn=X(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]))),ro=E(Dn||(Dn=X(["\n animation: "," 1.5s linear infinite;\n"])),eo),to=function(n){var o,e,r=n.darkMode,t=n.size,i=n.width,a=void 0===i?384:i;if(o=r?E(Ln||(Ln=X([""]))):E(Fn||(Fn=X(["\n --lg-combobox-menu-color: ",";\n --lg-combobox-menu-message-color: ",";\n --lg-combobox-menu-background-color: ",";\n --lg-combobox-menu-shadow: 0px 3px 7px rgba(0, 0, 0, 0.25);\n --lg-combobox-item-hover-color: ",";\n --lg-combobox-item-active-color: ",";\n --lg-combobox-item-wedge-color: ",";\n "])),z.gray.dark3,z.gray.dark1,z.white,z.gray.light2,z.blue.light3,z.blue.base),"default"===t)e=E(An||(An=X(["\n --lg-combobox-menu-border-radius: 4px;\n --lg-combobox-item-height: 36px;\n --lg-combobox-item-padding-y: 8px;\n --lg-combobox-item-padding-x: 12px;\n --lg-combobox-item-font-size: 14px;\n --lg-combobox-item-line-height: 21px;\n --lg-combobox-item-wedge-height: 22px;\n "])));return I(o,e,E(Tn||(Tn=X(["\n width: ","px;\n border-radius: var(--lg-combobox-menu-border-radius);\n\n & > * {\n border-radius: inherit;\n }\n "])),a))},io=function(n){var o=n.maxHeight;return E(Rn||(Rn=X(["\n position: relative;\n width: 100%;\n margin: 0;\n padding: 0;\n font-family: ",";\n color: var(--lg-combobox-menu-color);\n background-color: var(--lg-combobox-menu-background-color);\n box-shadow: var(--lg-combobox-menu-shadow);\n border-radius: inherit;\n overflow: auto;\n min-height: var(--lg-combobox-item-height);\n max-height: ","px;\n scroll-behavior: smooth;\n"])),W.default,o)},ao=E(Wn||(Wn=X(["\n position: relative;\n margin: 0;\n padding: 0;\n"]))),lo=E(Bn||(Bn=X(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-size: var(--lg-combobox-item-font-size);\n color: var(--lg-combobox-menu-message-color);\n padding: var(--lg-combobox-item-padding-y) var(--lg-combobox-item-padding-x);\n\n & > svg {\n width: 1em;\n height: 1em;\n }\n"]))),co=function(n){return E(Un||(Un=X(["\n --lg-combobox-group-label-color: ",";\n --lg-combobox-group-border-color: ",";\n padding-top: 8px;\n border-bottom: 1px solid var(--lg-combobox-group-border-color);\n"])),n?z.gray.light1:z.gray.dark1,n?z.gray.dark1:z.gray.light1)},uo=E(Xn||(Xn=X(["\n cursor: default;\n width: 100%;\n padding: 0 12px 2px;\n outline: none;\n overflow-wrap: anywhere;\n font-size: 12px;\n line-height: 16px;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--lg-combobox-group-label-color);\n"])));function so(o){var r=o.label,t=o.className,i=o.children,a=e(cn).darkMode,l=v({prefix:"combobox-group"});return n.Children.count(i)>0?T("div",{className:I(co(a),t)},T("div",{className:uo,id:l},r),T("div",{role:"group","aria-labelledby":l},i)):T(n.Fragment,null)}function bo(n){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}bo.displayName="ComboboxGroup";var po=["children","label","description","placeholder","aria-label","disabled","size","darkMode","state","errorMessage","searchState","searchEmptyMessage","searchErrorMessage","searchLoadingMessage","filteredOptions","onFilter","clearable","onClear","overflow","multiselect","initialValue","onChange","value","chipTruncationLocation","chipCharacterLimit","className","usePortal","portalClassName","portalContainer","scrollContainer","popoverZIndex"];function go(o){var e=o.children,c=o.label,x=o.description,j=o.placeholder,E=void 0===j?"Select":j,S=o["aria-label"],P=o.disabled,L=void 0!==P&&P,A=o.size,R=void 0===A?"default":A,W=o.darkMode,B=void 0!==W&&W,V=o.state,X=void 0===V?"none":V,Y=o.errorMessage,$=o.searchState,q=void 0===$?"unset":$,J=o.searchEmptyMessage,Q=void 0===J?"No results found":J,_=o.searchErrorMessage,nn=void 0===_?"Could not get results!":_,on=o.searchLoadingMessage,en=void 0===on?"Loading results...":on,rn=o.filteredOptions,tn=o.onFilter,an=o.clearable,ln=void 0===an||an,sn=o.onClear,pn=o.overflow,gn=void 0===pn?"expand-y":pn,mn=o.multiselect,hn=void 0!==mn&&mn,vn=o.initialValue,xn=o.onChange,yn=o.value,wn=o.chipTruncationLocation,kn=o.chipCharacterLimit,Cn=void 0===kn?12:kn,Nn=o.className,On=o.usePortal,jn=void 0===On||On,Mn=o.portalClassName,En=o.portalContainer,In=o.scrollContainer,Sn=o.popoverZIndex,zn=U(o,po),Pn=y({prefix:"option"}),Dn=y({prefix:"chip"}),Ln=v({prefix:"combobox-input"}),Fn=v({prefix:"combobox-label"}),An=v({prefix:"combobox-menu"}),Tn=i(null),Rn=i(null),Wn=i(null),Bn=i(null),Gn=i(null),Kn=Z(l(!1),2),Vn=Kn[0],Un=Kn[1],Xn=w(Vn),eo=Z(l(null),2),co=eo[0],uo=eo[1],bo=Z(l(null),2),go=bo[0],mo=bo[1],fo=w(go),ho=Z(l(""),2),vo=ho[0],xo=ho[1],yo=w(vo),wo=Z(l(null),2),ko=wo[0],Co=wo[1],No=!s(go)&&(u(go)&&go.length>0||d(go)),Oo=r((function(n){return!hn||"string"!=typeof n&&"number"!=typeof n?!hn&&u(n)&&F.error("Error in Combobox: multiselect is set to `false`, but recieved an Array value"):F.error("Error in Combobox: multiselect is set to `true`, but recieved a ".concat(K(n),' value: "').concat(n,'"')),hn&&u(n)}),[hn]),jo=r((function(n){!L&&Bn&&Bn.current&&(Bn.current.focus(),b(n)||Bn.current.setSelectionRange(n,n))}),[L]),Mo=r((function(n){if(Oo(go)){var o=p(go);s(n)?o.length=0:go.includes(n)?o.splice(o.indexOf(n),1):(o.push(n),xo("")),mo(o),null==xn||xn(o)}else{var e=n;mo(e),null==xn||xn(e)}}),[Oo,xn,go]),Eo=function(){Wn&&Wn.current&&(Wn.current.scrollLeft=Wn.current.scrollWidth)},Io=hn&&u(go)&&go.length>0?void 0:E,So=t((function(){return bn(e)}),[e]),zo=r((function(n){var o,e;return n?null!==(o=null===(e=So.find((function(o){return o.value===n})))||void 0===e?void 0:e.displayName)&&void 0!==o?o:n:""}),[So]),Po=r((function(n){var o="string"==typeof n?n:n.value;return rn&&rn.length>0?rn.includes(o):("string"==typeof n?zo(o):n.displayName).toLowerCase().includes(vo.toLowerCase())}),[rn,zo,vo]),Do=t((function(){return So.filter(Po)}),[So,Po]),Lo=r((function(n){return!!n&&!!So.find((function(o){return o.value===n}))}),[So]),Fo=r((function(n){return Do?Do.findIndex((function(o){return o.value===n})):-1}),[Do]),Ao=r((function(n){if(Do&&Do.length>=n){var o=Do[n];return o?o.value:void 0}}),[Do]),To=r((function(){return Oo(go)?go.findIndex((function(n){var o,e;return null===(o=Dn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})):-1}),[Dn,Oo,go]),Ro=r((function(){var n,o,e,r=null===(n=Bn.current)||void 0===n?void 0:n.contains(document.activeElement),t=null===(o=Rn.current)||void 0===o?void 0:o.contains(document.activeElement),i=Oo(go)&&go.some((function(n){var o,e;return null===(o=Dn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})),a=function(){return Oo(go)?go.findIndex((function(n){var o,e;return null===(o=Dn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})):-1};return Oo(go)&&i?0===a()?"FirstChip":a()===go.length-1?"LastChip":"MiddleChip":r?"Input":t?"ClearButton":null!==(e=Tn.current)&&void 0!==e&&e.contains(document.activeElement)?"Combobox":void 0}),[Dn,Oo,go]),Wo=r((function(n){var o,e=null!==(o=null==Do?void 0:Do.length)&&void 0!==o?o:0,r=e-1>0?e-1:0,t=Fo(co);switch(n&&Vn&&(Co(null),jo()),n){case"next":var i=Ao(t+1<e?t+1:0);uo(null!=i?i:null);break;case"prev":var a=Ao(t-1>=0?t-1:r);uo(null!=a?a:null);break;case"last":var l=Ao(r);uo(null!=l?l:null);break;default:var c=Ao(0);uo(null!=c?c:null)}}),[co,Fo,Ao,Vn,jo,null==Do?void 0:Do.length]),Bo=r((function(n,o){if(Oo(go))switch(n){case"next":var e=null!=o?o:To(),r=e+1<go.length?e+1:go.length-1,t=go[r];Co(t);break;case"prev":var i=null!=o?o:To(),a=i>0?i-1:i<0?go.length-1:0,l=go[a];Co(l);break;case"first":var c=go[0];Co(c);break;case"last":var u=go[go.length-1];Co(u);break;default:Co(null)}}),[To,Oo,go]),Go=r((function(n,o){n&&uo(null);var e=Ro();switch(n){case"right":switch(e){case"Input":var r,t,i;if((null===(r=Bn.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=Bn.current)||void 0===t?void 0:t.value.length))null===(i=Rn.current)||void 0===i||i.focus();break;case"LastChip":o.preventDefault(),jo(0),Bo(null);break;case"FirstChip":case"MiddleChip":Bo("next")}break;case"left":switch(e){case"ClearButton":var a;o.preventDefault(),jo(null==Bn||null===(a=Bn.current)||void 0===a?void 0:a.value.length);break;case"Input":case"MiddleChip":case"LastChip":if(Oo(go)){var l;if("Input"===e&&0!==(null===(l=Bn.current)||void 0===l?void 0:l.selectionStart))break;Bo("prev")}}break;default:Bo(null)}}),[Ro,Oo,go,jo,Bo]);a((function(){vo!==yo&&Wo("first")}),[vo,Vn,yo,Wo]),a((function(){if(co){var n=Pn(co);if(n&&n.current&&Gn.current){var o=n.current.offsetTop,e=Gn.current,r=e.scrollTop;(o>e.offsetHeight||o<r)&&(Gn.current.scrollTop=o)}}}),[co,Pn]);var Ko=r((function(o){return n.Children.map(o,(function(n){if(D(n,"ComboboxOption")){var o=dn(n.props),e=o.value,r=o.displayName;if(Po(e)){var t=n.props,i=t.className,a=t.glyph,l=So.findIndex((function(n){return n.value===e})),c=co===e,u=Oo(go)?go.includes(e):go===e,s=Pn(e);return T(fn,{value:e,displayName:r,isFocused:c,isSelected:u,setSelected:function(){uo(e),Mo(e),jo(),e===go&&$o()},glyph:a,className:i,index:l,ref:s})}}else if(D(n,"ComboboxGroup")){var d=Ko(n.props.children);if(d&&(null==d?void 0:d.length)>0)return T(so,{label:n.props.label,className:n.props.className},Ko(d))}}))}),[So,co,Pn,Oo,Po,go,jo,Mo]),Vo=t((function(){return Ko(e)}),[e,Ko]),Ho=t((function(){if(Oo(go))return go.filter(Lo).map((function(n,o){var e=zo(n),r=ko===n,t=Dn(n);return T(Hn,{key:n,displayName:e,isFocused:r,onRemove:function(){Bo("next",o),Mo(n)},onFocus:function(){Co(n)},ref:t})}))}),[Oo,go,Lo,zo,ko,Dn,Bo,Mo]),Uo=t((function(){return T(n.Fragment,null,ln&&No&&T(M,{"aria-label":"Clear selection","aria-disabled":L,disabled:L,ref:Rn,onClick:function(n){L||(Mo(null),null==sn||sn(n),null==tn||tn(""),Vn||qo())},onFocus:re,className:_n},T(O,{glyph:"XWithCircle"})),T(O,"error"===X?{glyph:"Warning",color:z.red.base,className:oo}:{glyph:"CaretDown",className:oo}))}),[ln,No,L,X,Mo,sn,tn,Vn]),Xo=t((function(){return So.some((function(n){return n.hasGlyph}))}),[So]),Zo=r((function(){if(!Oo(go)&&go===fo){var n=Do.find((function(n){return n.displayName===vo||n.value===vo}));if(n&&!yn)mo(n.value);else{var o,e=null!==(o=zo(go))&&void 0!==o?o:"";xo(e)}}}),[zo,vo,Oo,fo,go,yn,Do]),Yo=r((function(){if(No){if(Oo(go))Eo();else if(!Oo(go)){var n,o=null!==(n=zo(go))&&void 0!==n?n:"";xo(o),$o()}}else xo("")}),[No,zo,Oo,go]);a((function(){if(vn)if(u(vn)){var n,o=null!==(n=vn.filter((function(n){return Lo(n)})))&&void 0!==n?n:[];mo(o)}else Lo(vn)&&mo(vn);else mo(function(n){return n?[]:null}(hn))}),[]),a((function(){if(!b(yn)&&yn!==yo)if(s(yn))mo(null);else if(Oo(yn)){var n=yn.filter(Lo);mo(n)}else mo(Lo(yn)?yn:null)}),[Oo,Lo,yo,yn]),a((function(){g(go,fo)||Yo()}),[Yo,fo,go]),a((function(){Vn||Xn===Vn||Zo()}),[Vn,Xn,Zo]);var $o=function(){return Un(!1)},qo=function(){return Un(!0)},Jo=Z(l(0),2),Qo=Jo[0],_o=Jo[1];a((function(){var n,o;_o(null!==(n=null===(o=Tn.current)||void 0===o?void 0:o.clientWidth)&&void 0!==n?n:0)}),[Tn,Vn,co,go]);var ne=t((function(){switch(q){case"loading":return T("span",{className:lo},T(O,{glyph:"Refresh",color:z.blue.base,className:ro}),en);case"error":return T("span",{className:lo},T(O,{glyph:"Warning",color:z.red.base}),nn);default:return Vo&&Vo.length>0?T("ul",{className:ao},Vo):T("span",{className:lo},Q)}}),[Vo,Q,nn,en,q]),oe=k(),ee=t((function(){if(oe&&Tn.current&&Gn.current){var n=Tn.current.getBoundingClientRect(),o=n.top,e=n.bottom,r=Math.max(oe.height-e,o);return Math.min(274,r-8)}return 274}),[oe,Tn,Gn]);a((function(){}),[co]);var re=function(){uo(null)};C("mousedown",(function(n){var o,e,r=n.target;(null===(o=Gn.current)||void 0===o?void 0:o.contains(r))||(null===(e=Tn.current)||void 0===e?void 0:e.contains(r))||!1||Un(!1)}));var te=G({popoverZIndex:Sn},jn?{usePortal:jn,portalClassName:Mn,portalContainer:En,scrollContainer:In}:{usePortal:jn});return T(cn.Provider,{value:{multiselect:hn,darkMode:B,size:R,withIcons:Xo,disabled:L,chipTruncationLocation:wn,chipCharacterLimit:Cn,inputValue:vo}},T("div",H({className:I(Zn({darkMode:B,size:R,overflow:gn}),Nn)},zn),T("div",null,c&&T(m,{id:Fn,htmlFor:Ln},c),x&&T(f,null,x)),T(N,{className:$n,disabled:L,color:qn({state:X,darkMode:B})},T("div",{ref:Tn,role:"combobox","aria-expanded":Vn,"aria-controls":An,"aria-owns":An,tabIndex:-1,className:Yn,onMouseDown:function(n){L&&n.preventDefault()},onClick:function(n){if(n.target!==Bn.current){var o=0;if(Bn.current)o=n.nativeEvent.offsetX>Bn.current.offsetLeft+Bn.current.clientWidth?vo.length:0;jo(o)}},onFocus:function(){Eo(),qo()},onKeyDown:function(n){var o,e,r=null===(o=Gn.current)||void 0===o?void 0:o.contains(document.activeElement);if((null===(e=Tn.current)||void 0===e?void 0:e.contains(document.activeElement))||r){if(n.ctrlKey||n.shiftKey||n.altKey)return;var t=Ro();switch(n.keyCode){case un.Tab:switch(t){case"Input":No||($o(),Wo("first"),Bo(null));break;case"LastChip":Bo(null)}break;case un.Escape:$o(),Wo("first");break;case un.Enter:document.activeElement===Bn.current&&Vn&&!s(co)?Mo(co):document.activeElement===Rn.current&&(Mo(null),jo());break;case un.Backspace:var i;Oo(go)&&0===(null===(i=Bn.current)||void 0===i?void 0:i.selectionStart)?Bo("last"):qo();break;case un.ArrowDown:Vn&&n.preventDefault(),qo(),Wo("next");break;case un.ArrowUp:Vn&&n.preventDefault(),Wo("prev");break;case un.ArrowRight:Go("right",n);break;case un.ArrowLeft:Go("left",n);break;default:Vn||qo()}}},onTransitionEnd:function(){var n,o;_o(null!==(n=null===(o=Tn.current)||void 0===o?void 0:o.clientWidth)&&void 0!==n?n:0)},"data-disabled":L,"data-state":X},T("div",{ref:Wn,className:Jn({overflow:gn,isOpen:Vn,selection:go,value:vo})},Ho,T("input",{"aria-label":null!=S?S:c,"aria-autocomplete":"list","aria-controls":An,"aria-labelledby":Fn,ref:Bn,id:Ln,className:Qn,placeholder:Io,disabled:null!=L?L:void 0,onChange:function(n){var o=n.target.value;xo(o),null==tn||tn(o)},value:vo,autoComplete:"off"})),Uo)),"error"===X&&Y&&T("div",{className:no},Y),T(h,H({active:Vn&&!L,spacing:4,align:"bottom",justify:"middle",refEl:Tn,adjustOnMutation:!0,className:to({darkMode:B,size:R,width:Qo})},te),T("div",{id:An,role:"listbox","aria-labelledby":Fn,"aria-expanded":Vn,ref:Gn,className:io({maxHeight:ee}),onMouseDownCapture:function(n){return n.preventDefault()}},ne))))}export{go as Combobox,bo as ComboboxGroup,hn as ComboboxOption};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|