@leafygreen-ui/combobox 12.4.2 → 12.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @leafygreen-ui/combobox
2
2
 
3
+ ## 12.5.1
4
+
5
+ ### Patch Changes
6
+
7
+ - fdfc88e: [LG-5326](https://jira.mongodb.org/browse/LG-5326): Fixes a regression where filtering combobox options by typing did not update the highlighted option. Previously, pressing Enter after filtering would select the first option in the unfiltered list instead of the first matching option.
8
+
9
+ ## 12.5.0
10
+
11
+ ### Minor Changes
12
+
13
+ - a7d2799: Added a customContent prop to render a custom component in combobox option
14
+ - 2d36a0d: Exported out InternalComboboxOptionProps from ComboBoxOption
15
+
3
16
  ## 12.4.2
4
17
 
5
18
  ### Patch Changes
package/README.md CHANGED
@@ -87,14 +87,15 @@ import { Combobox, ComboboxOption } from '@leafygreen-ui/combobox';
87
87
 
88
88
  ## Props
89
89
 
90
- | Prop | Type | Description | Default |
91
- | ------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
92
- | `value` | `string` | The internal value of the option. Used as the identifier in Combobox `initialValue`, `value` and `filteredOptions`. When undefined, this is set to `_.kebabCase(displayName)` | |
93
- | `displayName` | `string` | The display value of the option. Used as the rendered string within the menu and chips. When undefined, this is set to `value` | |
94
- | `glyph` | `<Icon/>` | The icon to display to the left of the option in the menu. | |
95
- | `className` | `string` | The className passed to the root element of the component. | |
96
- | `description` | `string` | Optional descriptive text under the displayName. | |
97
- | `onClick` | `(event: React.SyntheticEvent<HTMLLIElement, Event>, value: string) => void` | Callback fired when an option is clicked. Returns the event and the option value. | |
90
+ | Prop | Type | Description | Default |
91
+ | --------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
92
+ | `value` | `string` | The internal value of the option. Used as the identifier in Combobox `initialValue`, `value` and `filteredOptions`. When undefined, this is set to `_.kebabCase(displayName)` | |
93
+ | `displayName` | `string` | The display value of the option. Used as the rendered string within the menu and chips. When undefined, this is set to `value` | |
94
+ | `customContent` | `ReactNode` | Optional custom content to render for the option. When provided, this ReactNode will be rendered in the option menu | |
95
+ | `glyph` | `<Icon/>` | The icon to display to the left of the option in the menu. | |
96
+ | `className` | `string` | The className passed to the root element of the component. | |
97
+ | `description` | `string` | Optional descriptive text under the displayName. | |
98
+ | `onClick` | `(event: React.SyntheticEvent<HTMLLIElement, Event>, value: string) => void` | Callback fired when an option is clicked. Returns the event and the option value. | |
98
99
 
99
100
  # ComboboxGroup
100
101
 
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import e,{createContext as n,useContext as r,useEffect as t,useMemo as i,useCallback as o,useRef as a,useState as l}from"react";import c from"lodash/clone";import s from"lodash/debounce";import u from"lodash/isArray";import d from"lodash/isEqual";import f from"lodash/isNull";import p from"lodash/isString";import h from"lodash/isUndefined";import{css as m,cx as g,keyframes as b}from"@leafygreen-ui/emotion";import{FormFieldState as v,DEFAULT_MESSAGES as y,FormFieldFeedback as x}from"@leafygreen-ui/form-field";import{useForwardedRef as w,useIdAllocator as k,useAvailableSpace as E,useDynamicRefs as C,usePrevious as S,useAutoScroll as L,useBackdropClick as N}from"@leafygreen-ui/hooks";import{Icon as D,isComponentGlyph as O}from"@leafygreen-ui/icon";import{IconButton as M}from"@leafygreen-ui/icon-button";import I,{useDarkMode as z,PopoverPropsProvider as j}from"@leafygreen-ui/leafygreen-provider";import{createUniqueClassName as W,keyMap as A,Theme as F,getNodeTextContent as T,isComponentType as X,consoleOnce as P}from"@leafygreen-ui/lib";import{Popover as R,RenderMode as G,getPopoverRenderModeProps as B,DismissMode as H}from"@leafygreen-ui/popover";export{RenderMode}from"@leafygreen-ui/popover";import{Error as V,Label as K,Description as Y}from"@leafygreen-ui/typography";import{transparentize as U}from"polished";import{palette as Z}from"@leafygreen-ui/palette";import{typeScales as q,spacing as $,fontWeights as J,boxShadows as Q,fontFamilies as _,color as ee,transitionDuration as ne,focusRing as re}from"@leafygreen-ui/tokens";import{chipTextClassName as te,TruncationLocation as ie,Chip as oe,BaseFontSize as ae,Variant as le}from"@leafygreen-ui/chip";export{TruncationLocation}from"@leafygreen-ui/chip";import ce from"lodash/kebabCase";import{descriptionClassName as se,titleClassName as ue,leftGlyphClassName as de,InputOption as fe,InputOptionContent as pe}from"@leafygreen-ui/input-option";import{Checkbox as he}from"@leafygreen-ui/checkbox";import me from"lodash/escapeRegExp";function ge(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=Array(n);r<n;r++)t[r]=e[r];return t}function be(e,n,r){return(n=function(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function ve(){return ve=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},ve.apply(null,arguments)}function ye(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 xe(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?ye(Object(r),!0).forEach(function(n){be(e,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ye(Object(r)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})}return e}function we(e,n){if(null==e)return{};var r,t,i=function(e,n){if(null==e)return{};var r={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(-1!==n.indexOf(t))continue;r[t]=e[t]}return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],-1===n.indexOf(r)&&{}.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}function ke(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,i,o,a,l=[],c=!0,s=!1;try{if(o=(r=r.call(e)).next,0===n);else for(;!(c=(t=o.call(r)).done)&&(l.push(t.value),l.length!==n);c=!0);}catch(e){s=!0,i=e}finally{try{if(!c&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(s)throw i}}return l}}(e,n)||Le(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Ee(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function Ce(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)||Le(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Se(e){return Se="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},Se(e)}function Le(e,n){if(e){if("string"==typeof e)return ge(e,n);var r={}.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}}var Ne="Input",De="ClearButton",Oe="FirstChip",Me="LastChip",Ie="MiddleChip",ze="Combobox",je="Menu",We={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},Ae={expandY:"expand-y",scrollX:"scroll-x",expandX:"expand-x"},Fe=v,Te={Unset:"unset",Error:"error",Loading:"loading"},Xe={Trigger:"trigger",Option:"option"};var Pe,Re,Ge,Be,He,Ve,Ke,Ye,Ue,Ze=n({multiselect:!1,size:We.Default,withIcons:!1,disabled:!1,isOpen:!1,state:Fe.None,searchState:Te.Unset,overflow:Ae.expandY}),qe=W("combobox-chip"),$e=be(be(be(be({},We.XSmall,16),We.Small,q.body1.lineHeight),We.Default,q.body1.lineHeight),We.Large,q.body2.lineHeight),Je=be(be(be(be({},We.XSmall,q.body1.fontSize),We.Small,q.body1.fontSize),We.Default,q.body1.fontSize),We.Large,q.body2.fontSize),Qe=be(be(be(be({},We.XSmall,1),We.Small,0),We.Default,2),We.Large,4),_e=be(be(be(be({},We.XSmall,m(Pe||(Pe=Ee(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),Je[We.XSmall],$e[We.XSmall],te,Qe[We.XSmall])),We.Small,m(Re||(Re=Ee(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),Je[We.Small],$e[We.Small],te,Qe[We.Small])),We.Default,m(Ge||(Ge=Ee(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),Je[We.Default],$e[We.Default],te,Qe[We.Default])),We.Large,m(Be||(Be=Ee(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-inline-end: 10px;\n padding-block: ","px;\n }\n "])),Je[We.Large],$e[We.Large],te,Qe[We.Large])),en=e.forwardRef(function(n,i){var o,a=n.displayName,l=n.isFocused,c=n.onRemove,s=n.onFocus,u=r(Ze),d=u.size,f=u.disabled,p=u.overflow,h=u.chipTruncationLocation,m=void 0===h?ie.End:h,b=u.chipCharacterLimit,v=void 0===b?12:b,y=p===Ae.scrollX?ie.None:m,x=w(i,null),k=null===(o=x.current)||void 0===o?void 0:o.querySelector("button");t(function(){l&&!f&&(null==k||k.focus())},[f,k,l]);return e.createElement(oe,{label:a,className:g(qe,_e[d]),role:"option","aria-selected":l,"data-testid":"lg-combobox-chip",onClick:function(e){null!=k&&k.contains(e.target)||s()},onKeyDown:function(e){f||e.key!==A.Delete&&e.key!==A.Backspace&&e.key!==A.Enter&&e.key!==A.Space||c()},onDismiss:function(){f||c()},baseFontSize:ae.Body1,chipCharacterLimit:v,chipTruncationLocation:y,variant:le.Gray,ref:x,disabled:f,tabIndex:-1})});en.displayName="ComboboxChip";var nn,rn,tn,on,an,ln,cn,sn,un,dn,fn,pn,hn,mn,gn,bn=be(be({},F.Light,m(He||(He=Ee(["\n padding-top: ","px;\n "])),$[2])),F.Dark,m(Ve||(Ve=Ee(["\n padding-top: ","px;\n "])),$[2])),vn=m(Ke||(Ke=Ee(["\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.semiBold),yn=be(be({},F.Light,m(Ye||(Ye=Ee(["\n color: ",";\n "])),Z.gray.dark1)),F.Dark,m(Ue||(Ue=Ee(["\n color: ",";\n "])),Z.gray.light1));function xn(n){var r=n.label,t=n.className,i=n.children,o=z().theme,a=k({prefix:"combobox-group"});return e.Children.count(i)>0?e.createElement("div",{className:g(bn[o],t)},e.createElement("div",{className:g(vn,yn[o]),id:a},r),e.createElement("div",{role:"group","aria-labelledby":a},i)):e.createElement(e.Fragment,null)}function wn(e){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}wn.displayName="ComboboxGroup";var kn=be(be(be(be({},We.XSmall,{x:12,y:8}),We.Small,{x:12,y:8}),We.Default,{x:12,y:8}),We.Large,{x:12,y:8}),En=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:384;return m(nn||(nn=Ee(["\n width: ","px;\n overflow: hidden;\n border-radius: 12px;\n border: 1px solid;\n"])),e)},Cn=be(be({},F.Light,m(rn||(rn=Ee(["\n box-shadow: ",";\n border-color: ",";\n "])),Q[F.Light][1],Z.gray.light2)),F.Dark,m(tn||(tn=Ee(["\n box-shadow: ",";\n border-color: ",";\n "])),Q[F.Dark][1],Z.gray.dark2)),Sn=m(on||(on=Ee(["\n width: max-content;\n"]))),Ln=m(an||(an=Ee(["\n position: relative;\n width: 100%;\n margin: 0;\n padding: ","px 0;\n font-family: ",";\n border-radius: inherit;\n overflow-y: auto;\n scroll-behavior: smooth;\n"])),$[2],_.default);be(be({},F.Light,m(ln||(ln=Ee(["\n color: ",";\n background-color: ",";\n "])),Z.black,Z.white)),F.Dark,m(cn||(cn=Ee(["\n color: ",";\n background-color: ",";\n "])),Z.gray.light1,Z.gray.dark3));var Nn,Dn=function(e){return m(sn||(sn=Ee(["\n background-color: ",";\n"])),ee[e].background.primary.default)},On=m(un||(un=Ee(["\n position: relative;\n margin: 0;\n padding: 0;\n"]))),Mn=m(dn||(dn=Ee(["\n font-family: inherit;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"]))),In=be(be({},F.Light,m(fn||(fn=Ee(["\n color: ",";\n "])),Z.gray.dark3)),F.Dark,m(pn||(pn=Ee(["\n color: ",";\n "])),Z.gray.light3)),zn=function(e){return m(hn||(hn=Ee(["\n font-size: ","px;\n line-height: ","px;\n padding: ","px ","px;\n"])),Je[e],$e[e],kn[e].y,kn[e].x)},jn=b(mn||(mn=Ee(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]))),Wn=m(gn||(gn=Ee(["\n animation: "," 1.5s linear infinite;\n"])),jn),An=e.forwardRef(function(n,t){var o=n.children,a=n.id,l=n.refEl,c=n.labelId,s=n.menuWidth,u=n.searchLoadingMessage,d=n.searchErrorMessage,f=n.searchEmptyMessage,p=n.dropdownWidthBasis,b=void 0===p?Xe.Trigger:p,v=z(),y=v.darkMode,x=v.theme,k=r(Ze),C=k.disabled,S=k.size,L=k.isOpen,N=k.searchState,O=w(t,null),M=E(l),I=h(M)?"unset":"".concat(Math.min(M,256),"px"),j=i(function(){var n=g(Mn,In[x],zn(S)),r=g(Mn,zn(S));switch(N){case"loading":return e.createElement("span",{className:n},e.createElement(D,{glyph:"Refresh",color:y?Z.blue.light1:Z.blue.base,className:Wn}),u);case"error":return e.createElement(V,{className:r},e.createElement(D,{glyph:"Warning",color:y?Z.red.light1:Z.red.base}),e.createElement("span",null,d));default:return o&&"object"===Se(o)&&"length"in o&&o.length>0?e.createElement("ul",{className:On},o):e.createElement("span",{className:n},f)}},[x,S,N,y,u,d,o,f]);return e.createElement(R,{active:L&&!C,spacing:4,align:"bottom",justify:"middle",refEl:l,adjustOnMutation:!0,className:g(En(s),Cn[x],be({},Sn,b===Xe.Option))},e.createElement("div",{ref:O,id:a,role:"listbox","aria-labelledby":c,"aria-expanded":L,className:g(Ln,Dn(x),m(Nn||(Nn=Ee(["\n max-height: ",";\n "])),I)),onMouseDownCapture:function(e){return e.preventDefault()}},j))});An.displayName="ComboboxMenu";var Fn,Tn,Xn,Pn,Rn,Gn,Bn,Hn,Vn,Kn,Yn,Un,Zn,qn,$n,Jn,Qn,_n,er,nr,rr,tr=function(e){var n=e.scrollHeight;return e.scrollTop<n-e.clientHeight},ir=function(e){var n=e.value,r=e.displayName,t=T(r);return{value:null!=n?n:ce(t),displayName:t||n||""}},or=function(n){return e.Children.toArray(n).reduce(function(e,n){if(X(n,"ComboboxOption")){var r=ir(n.props),t=r.value,i=r.displayName,o=n.props,a=o.glyph,l=o.disabled;return[].concat(Ce(e),[{value:t,displayName:i,isDisabled:!!l,hasGlyph:!!a}])}if(X(n,"ComboboxGroup")){var c=n.props.children;if(c)return[].concat(Ce(e),Ce(or(c)))}},[])},ar=function(e,n){if(e)return n.find(function(n){return n.value===e})},lr=function(e,n){var r,t;return e?null!==(r=null===(t=ar(e,n))||void 0===t?void 0:t.displayName)&&void 0!==r?r:e:""},cr=m(Fn||(Fn=Ee(["\n .",", ."," {\n font-size: ","px;\n line-height: 20px;\n }\n"])),se,ue,q.body2.fontSize),sr=be(be(be(be({},We.XSmall,m(Tn||(Tn=Ee(["\n min-width: ","px;\n "])),$[3])),We.Small,m(Xn||(Xn=Ee(["\n min-width: ","px;\n "])),$[3])),We.Default,m(Pn||(Pn=Ee(["\n min-width: ","px;\n "])),$[3])),We.Large,m(Rn||(Rn=Ee(["\n min-width: ","px;\n "])),$[4])),ur=m(Gn||(Gn=Ee(["\n pointer-events: none;\n gap: 0;\n\n label {\n gap: 0;\n align-items: center;\n }\n"])));m(Bn||(Bn=Ee(["\n pointer-events: none;\n"])));var dr=m(Hn||(Hn=Ee(["\n ."," {\n font-weight: ",";\n }\n"])),ue,J.regular),fr=m(Vn||(Vn=Ee(["\n ."," {\n font-weight: ",";\n }\n"])),ue,J.semiBold),pr=be(be({},F.Light,m(Kn||(Kn=Ee(["\n color: ",";\n "])),Z.gray.dark1)),F.Dark,m(Yn||(Yn=Ee(["\n color: ",";\n "])),Z.gray.base)),hr=be(be({},F.Light,m(Un||(Un=Ee(["\n color: ",";\n "])),Z.blue.dark1)),F.Dark,m(Zn||(Zn=Ee(["\n color: ",";\n "])),Z.blue.light3)),mr=be(be({},F.Light,m(qn||(qn=Ee(["\n color: ",";\n "])),Z.gray.light1)),F.Dark,m($n||($n=Ee(["\n color: ",";\n "])),Z.gray.dark1)),gr=be(be({},F.Light,m(Jn||(Jn=Ee(["\n color: ",";\n "])),Z.blue.base)),F.Dark,m(Qn||(Qn=Ee(["\n color: ",";\n "])),Z.blue.light1)),br=be(be({},F.Light,m(_n||(_n=Ee(["\n color: ",";\n "])),Z.gray.light1)),F.Dark,m(er||(er=Ee(["\n color: ",";\n "])),Z.gray.dark1)),vr=m(nr||(nr=Ee(["\n ."," {\n align-self: baseline;\n position: relative;\n // aligns the checkbox with the option name\n top: 1px;\n }\n"])),de),yr=m(rr||(rr=Ee(["\n ."," {\n // aligns the checkbox with the option name\n top: 3px;\n }\n"])),de),xr=function(e){var n=e.size,r=e.isMultiselectWithoutIcons,t=e.isSelected,i=e.className;return g(dr,be(be(be(be({},fr,t),cr,n===We.Large),vr,r),yr,r&&n===We.Large),i)},wr=["glyph","isSelected","displayName","isFocused","setSelected","className","description","value","onClick","disabled","aria-label"],kr=e.forwardRef(function(n,t){var a=n.glyph,l=n.isSelected,c=n.displayName,s=n.isFocused,u=n.setSelected,d=n.className,f=n.description,p=n.value,h=n.onClick,m=n.disabled,b=void 0!==m&&m,v=n["aria-label"],y=we(n,wr),x=z(),E=x.darkMode,C=x.theme,S=r(Ze),L=S.multiselect,N=S.size,M=S.withIcons,I=S.inputValue,j=w(t,null),W=k({prefix:"combobox-option-text"}),A=o(function(e){e.stopPropagation(),b||(u(),null==h||h(e,p))},[b,h,u,p]),F=i(function(){return function(n){var r=n.withIcons,t=n.isSelected,i=n.glyph,o=n.optionTextId,a=n.disabled,l=n.darkMode,c=n.size,s=n.multiselect,u=n.theme,d=n.isFocused;i&&!O(i)&&console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",i);var f=i&&O(i)?e.cloneElement(i,xe(xe({},i.props),{},{className:g(pr[u],be(be({},hr[u],d),mr[u],a),i.props.className)})):e.createElement(e.Fragment,null),p=e.createElement(he,{"aria-labelledby":o,checked:t,tabIndex:-1,disabled:a,darkMode:l,className:ur}),h=e.createElement(D,{glyph:"Checkmark",className:g(sr[c],gr[u],be({},br[u],a))});return{leftGlyph:s?r?f:p:r?f:t?h:null,rightGlyph:s?r&&p:r&&t&&h}}({withIcons:M,isSelected:l,glyph:a,theme:C,darkMode:E,size:N,disabled:b,multiselect:L,optionTextId:W,isFocused:s})},[E,b,a,l,L,W,N,C,M,s]),X=F.leftGlyph,P=F.rightGlyph,R=L&&!M;return e.createElement(fe,ve({},y,{as:"li",ref:j,highlighted:s,disabled:b,"aria-label":v||T(c)||p,darkMode:E,className:xr({size:N,isSelected:l,isMultiselectWithoutIcons:R,className:d}),onClick:A,onKeyDown:A}),e.createElement(pe,{leftGlyph:X,rightGlyph:P,description:f},"string"==typeof c?e.createElement("span",{id:W},function(n,r,t){if(r&&t){var i=me(r),o=new RegExp(i,"gi"),a=n.matchAll(o);if(a){for(var l=n.split(""),c=0,s=Array.from(a);c<s.length;c++){var u,d=s[c],f=null!==(u=d.index)&&void 0!==u?u:-1,p=d[0],h=p.length,m=f+p+h,g=new Array(h).fill("");g[0]=e.createElement(t,{key:m},p),l.splice.apply(l,[f,h].concat(Ce(g)))}return e.createElement(e.Fragment,null,l)}return e.createElement(e.Fragment,null,n)}return e.createElement(e.Fragment,null,n)}(c,I,"strong")):c))});function Er(e){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}kr.displayName="ComboboxOption",Er.displayName="ComboboxOption";var Cr,Sr,Lr,Nr,Dr,Or,Mr,Ir,zr,jr,Wr,Ar,Fr,Tr,Xr,Pr,Rr,Gr,Br,Hr,Vr,Kr,Yr,Ur,Zr,qr,$r,Jr,Qr,_r,et,nt,rt,tt=function(e){return!h(e)&&!f(e)&&(p(e)||u(e)&&e.length>0)},it=function(e){return $e[e]+2*Qe[e]},ot=$[100],at=be(be(be(be({},We.XSmall,22),We.Small,28),We.Default,36),We.Large,48),lt=function(e){return(at[e]-it(e)-2)/2},ct=be(be(be(be({},We.XSmall,{y:lt(We.XSmall),xLeftWithChip:$[25],xLeftWithoutChip:$[200],xRight:$[100]}),We.Small,{y:lt(We.Small),xLeftWithChip:$[100],xLeftWithoutChip:$[200],xRight:$[100]}),We.Default,{y:lt(We.Default),xLeftWithChip:$[150],xLeftWithoutChip:$[300],xRight:$[200]}),We.Large,{y:lt(We.Large),xLeftWithChip:$[300],xLeftWithoutChip:$[300],xRight:$[200]}),st=$[400],ut=function(e){return m(Cr||(Cr=Ee(["\n font-family: ",";\n width: 100%;\n min-width: ","px;\n "])),_.default,Je[e]+2*ct[e].xLeftWithChip+st+2)},dt=m(Sr||(Sr=Ee(["\n display: flex;\n align-items: center;\n gap: ","px;\n cursor: text;\n transition: ","ms ease-in-out;\n transition-property: background-color, box-shadow, border-color;\n border: 1px solid;\n width: 100%;\n max-width: 100%;\n border-radius: 6px;\n position: relative;\n overflow: hidden;\n\n // Overflow shadow\n ::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 20px;\n bottom: -21px;\n left: 50%;\n translate: -50% 0%;\n border-radius: 20%;\n box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);\n transition: ","ms linear;\n transition-property: box-shadow;\n }\n"])),$[200],ne.default,ne.default),ft=be(be({},F.Light,m(Lr||(Lr=Ee(["\n color: ",";\n background-color: ",";\n "])),ee.light.text.primary.default,ee.light.background.primary.default)),F.Dark,m(Nr||(Nr=Ee(["\n color: ",";\n background-color: ",";\n "])),ee.dark.text.primary.default,Z.gray.dark4)),pt=function(e,n){return m(Dr||(Dr=Ee(["\n padding-top: ","px;\n padding-bottom: ","px;\n padding-left: ",";\n padding-right: ","px;\n"])),ct[e].y,ct[e].y,"".concat(n?ct[e].xLeftWithChip:ct[e].xLeftWithoutChip,"px"),ct[e].xRight)},ht=function(e){return m(Or||(Or=Ee(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),ee[e].text.disabled.default,ee[e].background.disabled.default,ee[e].border.disabled.default)},mt=function(e){return be(be(be({},Fe.Error,m(Mr||(Mr=Ee(["\n border-color: ",";\n "])),ee[e].border.error.default)),Fe.None,m(Ir||(Ir=Ee(["\n border-color: ",";\n "])),ee[e].border.primary.default)),Fe.Valid,m(zr||(zr=Ee(["\n border-color: ",";\n "])),ee[e].border.success.default))},gt=be(be({},F.Light,m(jr||(jr=Ee(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),re[F.Light].input)),F.Dark,m(Wr||(Wr=Ee(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),re[F.Dark].input)),bt=m(Ar||(Ar=Ee(["\n display: flex;\n align-items: center;\n"]))),vt=be(be(be(be({},We.XSmall,m(Fr||(Fr=Ee(["\n gap: ","px;\n "])),$[100])),We.Small,m(Tr||(Tr=Ee(["\n gap: ","px;\n "])),$[200])),We.Default,m(Xr||(Xr=Ee(["\n gap: ","px;\n "])),$[200])),We.Large,m(Pr||(Pr=Ee(["\n gap: ","px;\n "])),$[200])),yt=function(e){var n=e.overflow,r=e.size,t=m(Rr||(Rr=Ee(["\n flex-grow: 1;\n width: 100%;\n "])));switch(n){case Ae.scrollX:return m(Gr||(Gr=Ee(["\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,it(r),qe);case Ae.expandY:return m(Br||(Br=Ee(["\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,ot,it(r),3*it(r),ot)}},xt=m(Hr||(Hr=Ee(["\n font-family: ",";\n width: 100%;\n border: none;\n cursor: inherit;\n background-color: inherit;\n color: inherit;\n box-sizing: content-box;\n padding: 0;\n margin: 0;\n text-overflow: ellipsis;\n vertical-align: top;\n\n // Only add padding if there are chips\n &:not(:first-child) {\n padding-left: ","px;\n }\n\n &:placeholder-shown {\n min-width: 100%;\n }\n &:focus {\n outline: none;\n }\n"])),_.default,$[100]),wt=be(be({},F.Light,m(Vr||(Vr=Ee(["\n &::placeholder {\n color: ",";\n }\n "])),Z.gray.base)),F.Dark,m(Kr||(Kr=Ee(["\n &::placeholder {\n color: ",";\n }\n "])),Z.gray.dark1)),kt=be(be({},F.Light,m(Yr||(Yr=Ee(["\n &::placeholder {\n color: ",";\n }\n "])),Z.gray.base)),F.Dark,m(Ur||(Ur=Ee(["\n &::placeholder {\n color: ",";\n }\n "])),Z.gray.dark1)),Et=function(e){return m(Zr||(Zr=Ee(["\n height: ","px;\n font-size: ","px;\n line-height: ","px;\n min-width: ","px;\n"])),it(e),Je[e],$e[e],Je[e])},Ct=function(e){return m(qr||(qr=Ee(["\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")},St=function(e,n){var r,t=null!==(r=null==n?void 0:n.length)&&void 0!==r?r:0;return m($r||($r=Ee(["\n width: ","px;\n max-width: 100%;\n "])),t*Je[e])},Lt=m(Jr||(Jr=Ee(["\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"])),st/2),Nt=m(Qr||(Qr=Ee(["\n height: ","px;\n width: ","px;\n"])),st,st),Dt=m(_r||(_r=Ee(["\n margin-bottom: ","px;\n display: flex;\n flex-direction: column;\n"])),$[100]),Ot=m(et||(et=Ee(["\n font-size: ","px;\n line-height: ","px;\n"])),q.large.fontSize,q.large.lineHeight),Mt=be(be({},F.Light,m(nt||(nt=Ee(["\n ::after {\n box-shadow: 0px 0px 7px 5px ",";\n }\n "])),U(.85,Z.black))),F.Dark,m(rt||(rt=Ee(["\n ::after {\n width: 95%;\n box-shadow: 0px -7px 12px 5px rgb(0 0 0 / 50%);\n }\n "])))),It=function(e){return ee[e].icon.primary.default},zt=function(e){return ee[e].icon.disabled.default},jt=["children","label","description","placeholder","aria-label","disabled","size","darkMode","state","errorMessage","successMessage","searchState","searchEmptyMessage","searchErrorMessage","searchLoadingMessage","filteredOptions","onFilter","clearable","onClear","overflow","multiselect","initialValue","inputValue","onInputChange","onChange","value","chipTruncationLocation","chipCharacterLimit","className","renderMode","portalClassName","portalContainer","portalRef","scrollContainer","popoverZIndex","dropdownWidthBasis"],Wt=["className","glyph","disabled"];function At(n){var r=n.children,m=n.label,b=n.description,v=n.placeholder,w=void 0===v?"Select":v,E=n["aria-label"],O=n.disabled,W=void 0!==O&&O,F=n.size,R=void 0===F?We.Default:F,V=n.darkMode,U=n.state,Z=void 0===U?"none":U,q=n.errorMessage,$=void 0===q?y.error:q,J=n.successMessage,Q=void 0===J?y.success:J,_=n.searchState,ee=void 0===_?"unset":_,ne=n.searchEmptyMessage,re=void 0===ne?"No results found":ne,te=n.searchErrorMessage,ie=void 0===te?"Could not get results!":te,oe=n.searchLoadingMessage,ae=void 0===oe?"Loading results...":oe,le=n.filteredOptions,ce=n.onFilter,se=n.clearable,ue=void 0===se||se,de=n.onClear,fe=n.overflow,pe=void 0===fe?Ae.expandY:fe,he=n.multiselect,me=void 0!==he&&he,ge=n.initialValue,ye=n.inputValue,Ee=n.onInputChange,Ce=n.onChange,Le=n.value,Fe=n.chipTruncationLocation,Te=n.chipCharacterLimit,Pe=void 0===Te?12:Te,Re=n.className,Ge=n.renderMode,Be=void 0===Ge?G.TopLayer:Ge,He=n.portalClassName,Ve=n.portalContainer,Ke=n.portalRef,Ye=n.scrollContainer,Ue=n.popoverZIndex,qe=n.dropdownWidthBasis,$e=void 0===qe?Xe.Trigger:qe,Je=we(n,jt),Qe=z(V),_e=Qe.darkMode,nn=Qe.theme,rn=C({prefix:"option"}),tn=C({prefix:"chip"}),on=k({prefix:"combobox-input"}),an=k({prefix:"combobox-label"}),ln=k({prefix:"combobox-menu"}),cn=a(null),sn=a(null),un=a(null),dn=a(null),fn=a(null),pn=ke(l(!1),2),hn=pn[0],mn=pn[1],gn=S(hn),bn=ke(l(null),2),vn=bn[0],yn=bn[1],wn=i(function(){return or(r)},[r]),kn=o(function(e){return!!e&&!!wn.find(function(n){return n.value===e})},[wn]),En=l(function(){if(ge){if(u(ge)){var e=ge.filter(function(e){return kn(e)});return e}if(kn(ge))return ge}return function(e){return e?[]:null}(me)}),Cn=ke(En,2),Sn=Cn[0],Ln=Cn[1],Nn=S(Sn),Dn=ke(l(null!=ye?ye:""),2),On=Dn[0],Mn=Dn[1];t(function(){h(ye)||Mn(ye)},[ye]);var In=function(e){Mn(e)},zn=S(On),jn=ke(l(null),2),Wn=jn[0],Fn=jn[1],Tn=ke(l(!1),2),Xn=Tn[0],Pn=Tn[1],Rn=me&&u(Sn)&&Sn.length>0?void 0:w,Gn=function(){return mn(!1)},Bn=function(){return mn(!0)},Hn=o(function(e){return!me||"string"!=typeof e&&"number"!=typeof e?!me&&u(e)&&P.error("Error in Combobox: multiselect is set to `false`, but received an Array value"):P.error("Error in Combobox: multiselect is set to `true`, but received a ".concat(Se(e),' value: "').concat(e,'"')),me&&u(e)},[me]),Vn=o(function(e){!W&&dn&&dn.current&&(dn.current.focus(),h(e)||dn.current.setSelectionRange(e,e))},[W]),Kn=o(function(e){if(Hn(Sn)){var n=c(Sn),r=Ce,t={diffType:"delete",value:null!=e?e:Sn};f(e)?n.length=0:Sn.includes(e)?n.splice(n.indexOf(e),1):(n.push(e),t.diffType="insert",In("")),Ln(n),null==r||r(n,t)}else{var i=e,o=Ce;Ln(i),null==o||o(i)}},[Hn,Ce,Sn]),Yn=o(function(e){var n,r,t,i;return function(e,n){return Array.isArray(n)?n.includes(e):e===n}((r=wn,(n=e)?null!==(t=null===(i=r.find(function(e){return e.displayName===n}))||void 0===i?void 0:i.value)&&void 0!==t?t:n:""),Sn)},[wn,Sn]),Un=o(function(e){var n="string"==typeof e?e:e.value;if(le&&le.length>0)return le.includes(n);if(Yn(On))return!0;var r="string"==typeof e?lr(n,wn):e.displayName;return T(r).toLowerCase().includes(On.toLowerCase())},[le,Yn,On,wn]),Zn=i(function(){return wn.filter(Un)},[wn,Un]),qn=o(function(e){return Zn?Zn.findIndex(function(n){return n.value===e}):-1},[Zn]),$n=o(function(e){if(Zn&&Zn.length>=e){var n=Zn[e];return n?n.value:void 0}},[Zn]),Jn=o(function(){return Hn(Sn)?Sn.findIndex(function(e){var n;return null===(n=tn(e))||void 0===n||null===(n=n.current)||void 0===n?void 0:n.contains(document.activeElement)}):-1},[tn,Hn,Sn]),Qn=ke(l(),2),_n=Qn[0],er=Qn[1],nr=o(function(e){var n,r=null!==(n=null==Zn?void 0:Zn.length)&&void 0!==n?n:0,t=r-1>0?r-1:0,i=qn(vn);switch(e&&hn&&(Fn(null),Vn()),e){case"next":var o=$n(i+1<r?i+1:0);yn(null!=o?o:null);break;case"prev":var a=$n(i-1>=0?i-1:t);yn(null!=a?a:null);break;case"last":var l=$n(t);yn(null!=l?l:null);break;default:var c=$n(0);yn(null!=c?c:null)}},[vn,qn,$n,hn,Vn,null==Zn?void 0:Zn.length]),rr=o(function(e,n){if(Hn(Sn))switch(e){case"next":var r=null!=n?n:Jn(),t=r+1<Sn.length?r+1:Sn.length-1,i=Sn[t];Fn(i);break;case"prev":var o=null!=n?n:Jn(),a=o>0?o-1:o<0?Sn.length-1:0,l=Sn[a];Fn(l);break;case"first":var c=Sn[0];Fn(c);break;case"last":var s=Sn[Sn.length-1];Fn(s);break;default:Fn(null)}},[Jn,Hn,Sn]),cr=o(function(e,n){switch(e&&yn(null),e){case"right":switch(_n){case Ne:var r,t,i;if((null===(r=dn.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=dn.current)||void 0===t?void 0:t.value.length))null===(i=sn.current)||void 0===i||i.focus();break;case Oe:case Ie:case Me:if(_n===Me||1===(null==Sn?void 0:Sn.length)){Vn(0),rr(null),n.preventDefault();break}rr("next")}break;case"left":switch(_n){case De:var o;n.preventDefault(),Vn(null==dn||null===(o=dn.current)||void 0===o?void 0:o.value.length);break;case Ne:case Ie:case Me:if(Hn(Sn)){var a;if(_n===Ne&&0!==(null===(a=dn.current)||void 0===a?void 0:a.selectionStart))break;rr("prev")}}break;default:rr(null)}},[_n,Hn,Sn,Vn,rr]);t(function(){hn||nr("first")},[hn,nr]),L(vn?rn(vn):void 0,fn);var sr=o(function(n){if(X(n,"ComboboxOption")){var r=ir(n.props),t=r.value,i=r.displayName;if(Un(t)){var o=n.props,a=o.className,l=o.glyph,c=o.disabled,s=we(o,Wt),u=wn.findIndex(function(e){return e.value===t}),d=vn===t,f=Hn(Sn)?Sn.includes(t):Sn===t,p=rn(t);return e.createElement(kr,ve({},s,{value:t,displayName:i,isFocused:d,isSelected:f,disabled:c,setSelected:function(){yn(t),Kn(t),Vn(),t===Sn&&Gn()},glyph:l,className:a,index:u,ref:p}))}}else if(X(n,"ComboboxGroup")){var h=e.Children.map(n.props.children,sr);if(h&&(null==h?void 0:h.length)>0)return e.createElement(xn,{label:n.props.label,className:n.props.className},e.Children.map(h,sr))}},[wn,rn,vn,Hn,Sn,Vn,Un,Kn]),ur=i(function(){return e.Children.map(r,sr)},[r,sr]),dr=i(function(){if(Hn(Sn))return Sn.filter(kn).map(function(n,r){var t=lr(n,wn),i=T(t),o=Wn===n,a=tn(n),l=r>=Sn.length-1;return e.createElement(en,{key:n,displayName:i,isFocused:o,onRemove:function(){l?(Vn(),rr(null)):rr("next",r),Kn(n)},onFocus:function(){Fn(n)},ref:a})})},[Hn,Sn,kn,wn,Wn,tn,Kn,Vn,rr]),fr=i(function(){return wn.some(function(e){return e.hasGlyph})},[wn]),pr=o(function(){var e=Zn.find(function(e){return e.displayName===On||e.value===On});if(!Le&&e)Kn(e.value);else if(!Hn(Sn)){var n,r=null!==(n=lr(Sn,wn))&&void 0!==n?n:Nn;In(T(r))}},[wn,On,Hn,Nn,Sn,Kn,Le,Zn]),hr=o(function(){if(tt(Sn)){if(Hn(Sn))Sr(pe);else if(!Hn(Sn)){var e,n=null!==(e=lr(Sn,wn))&&void 0!==e?e:"";In(T(n)),Gn()}}else In("")},[wn,Hn,Sn,pe]);t(function(){if(!h(Le)&&Le!==zn)if(f(Le))Ln(null);else if(Hn(Le)){var e=Le.filter(kn);Ln(e)}else Ln(kn(Le)?Le:null)},[Hn,kn,zn,Le]),t(function(){var e=!h(Nn)&&(u(Sn)&&!f(Nn)||p(Sn)||f(Sn))&&!d(Sn,Nn),n=h(Nn)&&tt(Sn);(e||n)&&hr()},[hr,Nn,Sn]),t(function(){!hn&&gn&&pr()},[hn,gn,pr]);var mr=ke(l(0),2),gr=mr[0],br=mr[1];t(function(){var e,n;br(null!==(e=null===(n=cn.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)},[cn,hn,vn,Sn]);N(Gn,[fn,cn],{enabled:hn});var vr=Hn(Sn)&&!!Sn.length,yr=s(function(e){Pn(tr(e.target))},50,{leading:!0}),xr=o(function(e){pe===Ae.expandY&&yr(e)},[yr,pe]);t(function(){un.current&&Pn(tr(un.current))},[]);var wr,Er=xe({popoverZIndex:Ue},B({dismissMode:H.Manual,portalClassName:He,portalContainer:Ve,portalRef:Ke,renderMode:Be,scrollContainer:Ye})),Cr={disabled:W,errorMessage:$,size:R,state:Z,successMessage:Q};return e.createElement(I,{darkMode:_e},e.createElement(Ze.Provider,{value:{multiselect:me,size:R,withIcons:fr,disabled:W,isOpen:hn,state:Z,searchState:ee,chipTruncationLocation:Fe,chipCharacterLimit:Pe,inputValue:On,overflow:pe,popoverZIndex:Ue}},e.createElement("div",ve({className:g(ut(R),Re)},Je),(m||b)&&e.createElement("div",{className:Dt},m&&e.createElement(K,{id:an,htmlFor:on,darkMode:_e,disabled:W,className:g(be({},Ot,R===We.Large))},m),b&&e.createElement(Y,{darkMode:_e,disabled:W,className:g(be({},Ot,R===We.Large))},b)),e.createElement("div",{ref:cn,role:"combobox","aria-expanded":hn,"aria-controls":ln,"aria-owns":ln,tabIndex:-1,onMouseDown:function(e){W&&e.preventDefault()},onClick:function(e){if(e.target!==dn.current){var n=0;if(dn.current)n=e.nativeEvent.offsetX>dn.current.offsetLeft+dn.current.clientWidth?On.length:0;Vn(n)}Bn()},onFocus:function(e){Sr(pe),er(function(e){var n,r,t,i;if(!e)return;if(null!==(n=dn.current)&&void 0!==n&&n.contains(e))return Ne;if(null!==(r=sn.current)&&void 0!==r&&r.contains(e))return De;var o=Hn(Sn)?Sn.findIndex(function(n){var r;return null===(r=tn(n))||void 0===r||null===(r=r.current)||void 0===r?void 0:r.contains(e)}):-1;if(Hn(Sn)){if(0===o)return Oe;if(o===Sn.length-1)return Me;if(o>0)return Ie}if(null!==(t=fn.current)&&void 0!==t&&t.contains(e))return je;if(null!==(i=cn.current)&&void 0!==i&&i.contains(e))return ze}(e.target))},onKeyDown:function(e){var n,r,t=null===(n=fn.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(r=cn.current)||void 0===r?void 0:r.contains(document.activeElement))||t){if(e.ctrlKey||e.shiftKey||e.altKey)return;switch(e.key){case A.Tab:switch(_n){case"Input":tt(Sn)||(Gn(),nr("first"),rr(null));break;case"LastChip":rr(null)}break;case A.Escape:Gn(),nr("first");break;case A.Enter:hn?!hn||_n!==Ne||f(vn)||function(e){if("string"==typeof e){var n=ar(e,wn);return!(null==n||!n.isDisabled)}return!!e.isDisabled}(vn)?_n===De&&(Kn(null),Vn()):Kn(vn):Bn();break;case A.Backspace:var i;if(Hn(Sn))"Input"===_n&&0===(null===(i=dn.current)||void 0===i?void 0:i.selectionStart)&&rr("last");Bn();break;case A.ArrowDown:hn?(e.preventDefault(),nr("next")):Bn();break;case A.ArrowUp:hn?(e.preventDefault(),nr("prev")):Bn();break;case A.ArrowRight:cr("right",e);break;case A.ArrowLeft:cr("left",e);break;default:hn||Bn()}}},onTransitionEnd:function(){var e,n;br(null!==(e=null===(n=cn.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)},className:g(dt,ft[nn],pt(R,vr),mt(nn)[Z],be(be(be({},gt[nn],(wr=Ne,wr===_n)),ht(nn),W),Mt[nn],Xn))},e.createElement("div",{onScroll:xr,ref:un,className:yt({size:R,overflow:pe})},dr,e.createElement("input",{"aria-label":null!=E?E:m,"aria-autocomplete":"list","aria-controls":ln,"aria-labelledby":an,ref:dn,id:on,className:g(xt,Et(R),wt[nn],Ct(hn),be(be({},St(R,On),Hn(Sn)),kt[nn],W)),placeholder:Rn,"aria-disabled":W,readOnly:W,onChange:function(e){In(e.target.value),null==ce||ce(e.target.value),null==Ee||Ee(e)},value:On,autoComplete:"off"})),e.createElement("div",{className:g(bt,vt[R])},ue&&tt(Sn)&&!W&&e.createElement(M,{"aria-label":"Clear selection",disabled:W,ref:sn,onClick:function(e){W||(e.stopPropagation(),Kn(null),null==de||de(e),null==ce||ce(""),Vn())},onFocus:function(){yn(null)},className:g(Lt),darkMode:_e},e.createElement(D,{glyph:"XWithCircle"})),e.createElement(D,{glyph:"CaretDown",className:Nt,fill:g(be(be({},It(nn),!W),zt(nn),W))}))),e.createElement(x,Cr),e.createElement(j,Er,e.createElement(An,{id:ln,labelId:an,refEl:cn,ref:fn,menuWidth:gr,searchLoadingMessage:ae,searchErrorMessage:ie,searchEmptyMessage:re,dropdownWidthBasis:$e},ur)))));function Sr(e){un&&un.current&&(e===Ae.scrollX&&(un.current.scrollLeft=un.current.scrollWidth),e===Ae.expandY&&(un.current.scrollTop=un.current.scrollHeight))}}export{At as Combobox,wn as ComboboxGroup,Er as ComboboxOption,We as ComboboxSize,Xe as DropdownWidthBasis,Ae as Overflow,Te as SearchState,Fe as State};
1
+ import e,{createContext as n,useContext as r,useEffect as t,useMemo as o,useCallback as i,useRef as a,useState as l}from"react";import c from"lodash/clone";import u from"lodash/debounce";import s from"lodash/isArray";import d from"lodash/isEqual";import f from"lodash/isNull";import p from"lodash/isString";import h from"lodash/isUndefined";import{css as m,cx as g,keyframes as b}from"@leafygreen-ui/emotion";import{FormFieldState as v,DEFAULT_MESSAGES as y,FormFieldFeedback as x}from"@leafygreen-ui/form-field";import{useForwardedRef as w,useIdAllocator as k,useAvailableSpace as E,useDynamicRefs as C,usePrevious as S,useAutoScroll as L,useBackdropClick as N}from"@leafygreen-ui/hooks";import{Icon as D,isComponentGlyph as O}from"@leafygreen-ui/icon";import{IconButton as M}from"@leafygreen-ui/icon-button";import I,{useDarkMode as z,PopoverPropsProvider as j}from"@leafygreen-ui/leafygreen-provider";import{createUniqueClassName as W,keyMap as A,Theme as F,getNodeTextContent as T,isComponentType as X,consoleOnce as P}from"@leafygreen-ui/lib";import{Popover as R,RenderMode as G,getPopoverRenderModeProps as B,DismissMode as H}from"@leafygreen-ui/popover";export{RenderMode}from"@leafygreen-ui/popover";import{Error as V,Label as K,Description as Y}from"@leafygreen-ui/typography";import{transparentize as U}from"polished";import{palette as Z}from"@leafygreen-ui/palette";import{typeScales as q,spacing as $,fontWeights as J,boxShadows as Q,fontFamilies as _,color as ee,transitionDuration as ne,focusRing as re}from"@leafygreen-ui/tokens";import{chipTextClassName as te,TruncationLocation as oe,Chip as ie,BaseFontSize as ae,Variant as le}from"@leafygreen-ui/chip";export{TruncationLocation}from"@leafygreen-ui/chip";import ce from"lodash/kebabCase";import{descriptionClassName as ue,titleClassName as se,leftGlyphClassName as de,InputOption as fe,InputOptionContent as pe}from"@leafygreen-ui/input-option";import{Checkbox as he}from"@leafygreen-ui/checkbox";import me from"lodash/escapeRegExp";function ge(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=Array(n);r<n;r++)t[r]=e[r];return t}function be(e,n,r){return(n=function(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function ve(){return ve=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},ve.apply(null,arguments)}function ye(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 xe(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?ye(Object(r),!0).forEach(function(n){be(e,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ye(Object(r)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})}return e}function we(e,n){if(null==e)return{};var r,t,o=function(e,n){if(null==e)return{};var r={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(-1!==n.indexOf(t))continue;r[t]=e[t]}return r}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)r=i[t],-1===n.indexOf(r)&&{}.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function ke(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,o,i,a,l=[],c=!0,u=!1;try{if(i=(r=r.call(e)).next,0===n);else for(;!(c=(t=i.call(r)).done)&&(l.push(t.value),l.length!==n);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(u)throw o}}return l}}(e,n)||Le(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Ee(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function Ce(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)||Le(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Se(e){return Se="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},Se(e)}function Le(e,n){if(e){if("string"==typeof e)return ge(e,n);var r={}.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}}var Ne="Input",De="ClearButton",Oe="FirstChip",Me="LastChip",Ie="MiddleChip",ze="Combobox",je="Menu",We={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},Ae={expandY:"expand-y",scrollX:"scroll-x",expandX:"expand-x"},Fe=v,Te={Unset:"unset",Error:"error",Loading:"loading"},Xe={Trigger:"trigger",Option:"option"};var Pe,Re,Ge,Be,He,Ve,Ke,Ye,Ue,Ze=n({multiselect:!1,size:We.Default,withIcons:!1,disabled:!1,isOpen:!1,state:Fe.None,searchState:Te.Unset,overflow:Ae.expandY}),qe=W("combobox-chip"),$e=be(be(be(be({},We.XSmall,16),We.Small,q.body1.lineHeight),We.Default,q.body1.lineHeight),We.Large,q.body2.lineHeight),Je=be(be(be(be({},We.XSmall,q.body1.fontSize),We.Small,q.body1.fontSize),We.Default,q.body1.fontSize),We.Large,q.body2.fontSize),Qe=be(be(be(be({},We.XSmall,1),We.Small,0),We.Default,2),We.Large,4),_e=be(be(be(be({},We.XSmall,m(Pe||(Pe=Ee(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),Je[We.XSmall],$e[We.XSmall],te,Qe[We.XSmall])),We.Small,m(Re||(Re=Ee(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),Je[We.Small],$e[We.Small],te,Qe[We.Small])),We.Default,m(Ge||(Ge=Ee(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-block: ","px;\n }\n "])),Je[We.Default],$e[We.Default],te,Qe[We.Default])),We.Large,m(Be||(Be=Ee(["\n font-size: ","px;\n line-height: ","px;\n\n ."," {\n padding-inline-end: 10px;\n padding-block: ","px;\n }\n "])),Je[We.Large],$e[We.Large],te,Qe[We.Large])),en=e.forwardRef(function(n,o){var i,a=n.displayName,l=n.isFocused,c=n.onRemove,u=n.onFocus,s=r(Ze),d=s.size,f=s.disabled,p=s.overflow,h=s.chipTruncationLocation,m=void 0===h?oe.End:h,b=s.chipCharacterLimit,v=void 0===b?12:b,y=p===Ae.scrollX?oe.None:m,x=w(o,null),k=null===(i=x.current)||void 0===i?void 0:i.querySelector("button");t(function(){l&&!f&&(null==k||k.focus())},[f,k,l]);return e.createElement(ie,{label:a,className:g(qe,_e[d]),role:"option","aria-selected":l,"data-testid":"lg-combobox-chip",onClick:function(e){null!=k&&k.contains(e.target)||u()},onKeyDown:function(e){f||e.key!==A.Delete&&e.key!==A.Backspace&&e.key!==A.Enter&&e.key!==A.Space||c()},onDismiss:function(){f||c()},baseFontSize:ae.Body1,chipCharacterLimit:v,chipTruncationLocation:y,variant:le.Gray,ref:x,disabled:f,tabIndex:-1})});en.displayName="ComboboxChip";var nn,rn,tn,on,an,ln,cn,un,sn,dn,fn,pn,hn,mn,gn,bn=be(be({},F.Light,m(He||(He=Ee(["\n padding-top: ","px;\n "])),$[2])),F.Dark,m(Ve||(Ve=Ee(["\n padding-top: ","px;\n "])),$[2])),vn=m(Ke||(Ke=Ee(["\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.semiBold),yn=be(be({},F.Light,m(Ye||(Ye=Ee(["\n color: ",";\n "])),Z.gray.dark1)),F.Dark,m(Ue||(Ue=Ee(["\n color: ",";\n "])),Z.gray.light1));function xn(n){var r=n.label,t=n.className,o=n.children,i=z().theme,a=k({prefix:"combobox-group"});return e.Children.count(o)>0?e.createElement("div",{className:g(bn[i],t)},e.createElement("div",{className:g(vn,yn[i]),id:a},r),e.createElement("div",{role:"group","aria-labelledby":a},o)):e.createElement(e.Fragment,null)}function wn(e){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}wn.displayName="ComboboxGroup";var kn=be(be(be(be({},We.XSmall,{x:12,y:8}),We.Small,{x:12,y:8}),We.Default,{x:12,y:8}),We.Large,{x:12,y:8}),En=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:384;return m(nn||(nn=Ee(["\n width: ","px;\n overflow: hidden;\n border-radius: 12px;\n border: 1px solid;\n"])),e)},Cn=be(be({},F.Light,m(rn||(rn=Ee(["\n box-shadow: ",";\n border-color: ",";\n "])),Q[F.Light][1],Z.gray.light2)),F.Dark,m(tn||(tn=Ee(["\n box-shadow: ",";\n border-color: ",";\n "])),Q[F.Dark][1],Z.gray.dark2)),Sn=m(on||(on=Ee(["\n width: max-content;\n"]))),Ln=m(an||(an=Ee(["\n position: relative;\n width: 100%;\n margin: 0;\n padding: ","px 0;\n font-family: ",";\n border-radius: inherit;\n overflow-y: auto;\n scroll-behavior: smooth;\n"])),$[2],_.default);be(be({},F.Light,m(ln||(ln=Ee(["\n color: ",";\n background-color: ",";\n "])),Z.black,Z.white)),F.Dark,m(cn||(cn=Ee(["\n color: ",";\n background-color: ",";\n "])),Z.gray.light1,Z.gray.dark3));var Nn,Dn=function(e){return m(un||(un=Ee(["\n background-color: ",";\n"])),ee[e].background.primary.default)},On=m(sn||(sn=Ee(["\n position: relative;\n margin: 0;\n padding: 0;\n"]))),Mn=m(dn||(dn=Ee(["\n font-family: inherit;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"]))),In=be(be({},F.Light,m(fn||(fn=Ee(["\n color: ",";\n "])),Z.gray.dark3)),F.Dark,m(pn||(pn=Ee(["\n color: ",";\n "])),Z.gray.light3)),zn=function(e){return m(hn||(hn=Ee(["\n font-size: ","px;\n line-height: ","px;\n padding: ","px ","px;\n"])),Je[e],$e[e],kn[e].y,kn[e].x)},jn=b(mn||(mn=Ee(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]))),Wn=m(gn||(gn=Ee(["\n animation: "," 1.5s linear infinite;\n"])),jn),An=e.forwardRef(function(n,t){var i=n.children,a=n.id,l=n.refEl,c=n.labelId,u=n.menuWidth,s=n.searchLoadingMessage,d=n.searchErrorMessage,f=n.searchEmptyMessage,p=n.dropdownWidthBasis,b=void 0===p?Xe.Trigger:p,v=z(),y=v.darkMode,x=v.theme,k=r(Ze),C=k.disabled,S=k.size,L=k.isOpen,N=k.searchState,O=w(t,null),M=E(l),I=h(M)?"unset":"".concat(Math.min(M,256),"px"),j=o(function(){var n=g(Mn,In[x],zn(S)),r=g(Mn,zn(S));switch(N){case"loading":return e.createElement("span",{className:n},e.createElement(D,{glyph:"Refresh",color:y?Z.blue.light1:Z.blue.base,className:Wn}),s);case"error":return e.createElement(V,{className:r},e.createElement(D,{glyph:"Warning",color:y?Z.red.light1:Z.red.base}),e.createElement("span",null,d));default:return i&&"object"===Se(i)&&"length"in i&&i.length>0?e.createElement("ul",{className:On},i):e.createElement("span",{className:n},f)}},[x,S,N,y,s,d,i,f]);return e.createElement(R,{active:L&&!C,spacing:4,align:"bottom",justify:"middle",refEl:l,adjustOnMutation:!0,className:g(En(u),Cn[x],be({},Sn,b===Xe.Option))},e.createElement("div",{ref:O,id:a,role:"listbox","aria-labelledby":c,"aria-expanded":L,className:g(Ln,Dn(x),m(Nn||(Nn=Ee(["\n max-height: ",";\n "])),I)),onMouseDownCapture:function(e){return e.preventDefault()}},j))});An.displayName="ComboboxMenu";var Fn,Tn,Xn,Pn,Rn,Gn,Bn,Hn,Vn,Kn,Yn,Un,Zn,qn,$n,Jn,Qn,_n,er,nr,rr,tr=function(e){var n=e.scrollHeight;return e.scrollTop<n-e.clientHeight},or=function(e){var n=e.value,r=e.displayName,t=T(r);return{value:null!=n?n:ce(t),displayName:t||n||""}},ir=function(n){return e.Children.toArray(n).reduce(function(e,n){if(X(n,"ComboboxOption")){var r=or(n.props),t=r.value,o=r.displayName,i=n.props,a=i.glyph,l=i.disabled;return[].concat(Ce(e),[{value:t,displayName:o,isDisabled:!!l,hasGlyph:!!a}])}if(X(n,"ComboboxGroup")){var c=n.props.children;if(c)return[].concat(Ce(e),Ce(ir(c)))}},[])},ar=function(e,n){if(e)return n.find(function(n){return n.value===e})},lr=function(e,n){var r,t;return e?null!==(r=null===(t=ar(e,n))||void 0===t?void 0:t.displayName)&&void 0!==r?r:e:""},cr=m(Fn||(Fn=Ee(["\n .",", ."," {\n font-size: ","px;\n line-height: 20px;\n }\n"])),ue,se,q.body2.fontSize),ur=be(be(be(be({},We.XSmall,m(Tn||(Tn=Ee(["\n min-width: ","px;\n "])),$[3])),We.Small,m(Xn||(Xn=Ee(["\n min-width: ","px;\n "])),$[3])),We.Default,m(Pn||(Pn=Ee(["\n min-width: ","px;\n "])),$[3])),We.Large,m(Rn||(Rn=Ee(["\n min-width: ","px;\n "])),$[4])),sr=m(Gn||(Gn=Ee(["\n pointer-events: none;\n gap: 0;\n\n label {\n gap: 0;\n align-items: center;\n }\n"])));m(Bn||(Bn=Ee(["\n pointer-events: none;\n"])));var dr=m(Hn||(Hn=Ee(["\n ."," {\n font-weight: ",";\n }\n"])),se,J.regular),fr=m(Vn||(Vn=Ee(["\n ."," {\n font-weight: ",";\n }\n"])),se,J.semiBold),pr=be(be({},F.Light,m(Kn||(Kn=Ee(["\n color: ",";\n "])),Z.gray.dark1)),F.Dark,m(Yn||(Yn=Ee(["\n color: ",";\n "])),Z.gray.base)),hr=be(be({},F.Light,m(Un||(Un=Ee(["\n color: ",";\n "])),Z.blue.dark1)),F.Dark,m(Zn||(Zn=Ee(["\n color: ",";\n "])),Z.blue.light3)),mr=be(be({},F.Light,m(qn||(qn=Ee(["\n color: ",";\n "])),Z.gray.light1)),F.Dark,m($n||($n=Ee(["\n color: ",";\n "])),Z.gray.dark1)),gr=be(be({},F.Light,m(Jn||(Jn=Ee(["\n color: ",";\n "])),Z.blue.base)),F.Dark,m(Qn||(Qn=Ee(["\n color: ",";\n "])),Z.blue.light1)),br=be(be({},F.Light,m(_n||(_n=Ee(["\n color: ",";\n "])),Z.gray.light1)),F.Dark,m(er||(er=Ee(["\n color: ",";\n "])),Z.gray.dark1)),vr=m(nr||(nr=Ee(["\n ."," {\n align-self: baseline;\n position: relative;\n // aligns the checkbox with the option name\n top: 1px;\n }\n"])),de),yr=m(rr||(rr=Ee(["\n ."," {\n // aligns the checkbox with the option name\n top: 3px;\n }\n"])),de),xr=function(e){var n=e.size,r=e.isMultiselectWithoutIcons,t=e.isSelected,o=e.className;return g(dr,be(be(be(be({},fr,t),cr,n===We.Large),vr,r),yr,r&&n===We.Large),o)},wr=["glyph","isSelected","displayName","customContent","isFocused","setSelected","className","description","value","onClick","disabled","aria-label"],kr=e.forwardRef(function(n,t){var a=n.glyph,l=n.isSelected,c=n.displayName,u=n.customContent,s=n.isFocused,d=n.setSelected,f=n.className,p=n.description,h=n.value,m=n.onClick,b=n.disabled,v=void 0!==b&&b,y=n["aria-label"],x=we(n,wr),E=z(),C=E.darkMode,S=E.theme,L=r(Ze),N=L.multiselect,M=L.size,I=L.withIcons,j=L.inputValue,W=w(t,null),A=k({prefix:"combobox-option-text"}),F=i(function(e){e.stopPropagation(),v||(d(),null==m||m(e,h))},[v,m,d,h]),X=o(function(){return function(n){var r=n.withIcons,t=n.isSelected,o=n.glyph,i=n.optionTextId,a=n.disabled,l=n.darkMode,c=n.size,u=n.multiselect,s=n.theme,d=n.isFocused;o&&!O(o)&&console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",o);var f=o&&O(o)?e.cloneElement(o,xe(xe({},o.props),{},{className:g(pr[s],be(be({},hr[s],d),mr[s],a),o.props.className)})):e.createElement(e.Fragment,null),p=e.createElement(he,{"aria-labelledby":i,checked:t,tabIndex:-1,disabled:a,darkMode:l,className:sr}),h=e.createElement(D,{glyph:"Checkmark",className:g(ur[c],gr[s],be({},br[s],a))});return{leftGlyph:u?r?f:p:r?f:t?h:null,rightGlyph:u?r&&p:r&&t&&h}}({withIcons:I,isSelected:l,glyph:a,theme:S,darkMode:C,size:M,disabled:v,multiselect:N,optionTextId:A,isFocused:s})},[C,v,a,l,N,A,M,S,I,s]),P=X.leftGlyph,R=X.rightGlyph,G=N&&!I,B=T(c);return e.createElement(fe,ve({},x,{as:"li",ref:W,highlighted:s,disabled:v,"aria-label":y||B||h,darkMode:C,className:xr({size:M,isSelected:l,isMultiselectWithoutIcons:G,className:f}),onClick:F,onKeyDown:F}),e.createElement(pe,{leftGlyph:P,rightGlyph:R,description:p},u||e.createElement("span",{id:A},function(n,r,t){if(r&&t){var o=me(r),i=new RegExp(o,"gi"),a=n.matchAll(i);if(a){for(var l=n.split(""),c=0,u=Array.from(a);c<u.length;c++){var s,d=u[c],f=null!==(s=d.index)&&void 0!==s?s:-1,p=d[0],h=p.length,m=f+p+h,g=new Array(h).fill("");g[0]=e.createElement(t,{key:m},p),l.splice.apply(l,[f,h].concat(Ce(g)))}return e.createElement(e.Fragment,null,l)}return e.createElement(e.Fragment,null,n)}return e.createElement(e.Fragment,null,n)}(B,j,"strong"))))});function Er(e){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}kr.displayName="ComboboxOption",Er.displayName="ComboboxOption";var Cr,Sr,Lr,Nr,Dr,Or,Mr,Ir,zr,jr,Wr,Ar,Fr,Tr,Xr,Pr,Rr,Gr,Br,Hr,Vr,Kr,Yr,Ur,Zr,qr,$r,Jr,Qr,_r,et,nt,rt,tt=function(e){return!h(e)&&!f(e)&&(p(e)||s(e)&&e.length>0)},ot=function(e){return $e[e]+2*Qe[e]},it=$[100],at=be(be(be(be({},We.XSmall,22),We.Small,28),We.Default,36),We.Large,48),lt=function(e){return(at[e]-ot(e)-2)/2},ct=be(be(be(be({},We.XSmall,{y:lt(We.XSmall),xLeftWithChip:$[25],xLeftWithoutChip:$[200],xRight:$[100]}),We.Small,{y:lt(We.Small),xLeftWithChip:$[100],xLeftWithoutChip:$[200],xRight:$[100]}),We.Default,{y:lt(We.Default),xLeftWithChip:$[150],xLeftWithoutChip:$[300],xRight:$[200]}),We.Large,{y:lt(We.Large),xLeftWithChip:$[300],xLeftWithoutChip:$[300],xRight:$[200]}),ut=$[400],st=function(e){return m(Cr||(Cr=Ee(["\n font-family: ",";\n width: 100%;\n min-width: ","px;\n "])),_.default,Je[e]+2*ct[e].xLeftWithChip+ut+2)},dt=m(Sr||(Sr=Ee(["\n display: flex;\n align-items: center;\n gap: ","px;\n cursor: text;\n transition: ","ms ease-in-out;\n transition-property: background-color, box-shadow, border-color;\n border: 1px solid;\n width: 100%;\n max-width: 100%;\n border-radius: 6px;\n position: relative;\n overflow: hidden;\n\n // Overflow shadow\n ::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 20px;\n bottom: -21px;\n left: 50%;\n translate: -50% 0%;\n border-radius: 20%;\n box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);\n transition: ","ms linear;\n transition-property: box-shadow;\n }\n"])),$[200],ne.default,ne.default),ft=be(be({},F.Light,m(Lr||(Lr=Ee(["\n color: ",";\n background-color: ",";\n "])),ee.light.text.primary.default,ee.light.background.primary.default)),F.Dark,m(Nr||(Nr=Ee(["\n color: ",";\n background-color: ",";\n "])),ee.dark.text.primary.default,Z.gray.dark4)),pt=function(e,n){return m(Dr||(Dr=Ee(["\n padding-top: ","px;\n padding-bottom: ","px;\n padding-left: ",";\n padding-right: ","px;\n"])),ct[e].y,ct[e].y,"".concat(n?ct[e].xLeftWithChip:ct[e].xLeftWithoutChip,"px"),ct[e].xRight)},ht=function(e){return m(Or||(Or=Ee(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),ee[e].text.disabled.default,ee[e].background.disabled.default,ee[e].border.disabled.default)},mt=function(e){return be(be(be({},Fe.Error,m(Mr||(Mr=Ee(["\n border-color: ",";\n "])),ee[e].border.error.default)),Fe.None,m(Ir||(Ir=Ee(["\n border-color: ",";\n "])),ee[e].border.primary.default)),Fe.Valid,m(zr||(zr=Ee(["\n border-color: ",";\n "])),ee[e].border.success.default))},gt=be(be({},F.Light,m(jr||(jr=Ee(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),re[F.Light].input)),F.Dark,m(Wr||(Wr=Ee(["\n &:focus-within {\n border-color: transparent;\n box-shadow: ",";\n }\n "])),re[F.Dark].input)),bt=m(Ar||(Ar=Ee(["\n display: flex;\n align-items: center;\n"]))),vt=be(be(be(be({},We.XSmall,m(Fr||(Fr=Ee(["\n gap: ","px;\n "])),$[100])),We.Small,m(Tr||(Tr=Ee(["\n gap: ","px;\n "])),$[200])),We.Default,m(Xr||(Xr=Ee(["\n gap: ","px;\n "])),$[200])),We.Large,m(Pr||(Pr=Ee(["\n gap: ","px;\n "])),$[200])),yt=function(e){var n=e.overflow,r=e.size,t=m(Rr||(Rr=Ee(["\n flex-grow: 1;\n width: 100%;\n "])));switch(n){case Ae.scrollX:return m(Gr||(Gr=Ee(["\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,ot(r),qe);case Ae.expandY:return m(Br||(Br=Ee(["\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,it,ot(r),3*ot(r),it)}},xt=m(Hr||(Hr=Ee(["\n font-family: ",";\n width: 100%;\n border: none;\n cursor: inherit;\n background-color: inherit;\n color: inherit;\n box-sizing: content-box;\n padding: 0;\n margin: 0;\n text-overflow: ellipsis;\n vertical-align: top;\n\n // Only add padding if there are chips\n &:not(:first-child) {\n padding-left: ","px;\n }\n\n &:placeholder-shown {\n min-width: 100%;\n }\n &:focus {\n outline: none;\n }\n"])),_.default,$[100]),wt=be(be({},F.Light,m(Vr||(Vr=Ee(["\n &::placeholder {\n color: ",";\n }\n "])),Z.gray.base)),F.Dark,m(Kr||(Kr=Ee(["\n &::placeholder {\n color: ",";\n }\n "])),Z.gray.dark1)),kt=be(be({},F.Light,m(Yr||(Yr=Ee(["\n &::placeholder {\n color: ",";\n }\n "])),Z.gray.base)),F.Dark,m(Ur||(Ur=Ee(["\n &::placeholder {\n color: ",";\n }\n "])),Z.gray.dark1)),Et=function(e){return m(Zr||(Zr=Ee(["\n height: ","px;\n font-size: ","px;\n line-height: ","px;\n min-width: ","px;\n"])),ot(e),Je[e],$e[e],Je[e])},Ct=function(e){return m(qr||(qr=Ee(["\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")},St=function(e,n){var r,t=null!==(r=null==n?void 0:n.length)&&void 0!==r?r:0;return m($r||($r=Ee(["\n width: ","px;\n max-width: 100%;\n "])),t*Je[e])},Lt=m(Jr||(Jr=Ee(["\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"])),ut/2),Nt=m(Qr||(Qr=Ee(["\n height: ","px;\n width: ","px;\n"])),ut,ut),Dt=m(_r||(_r=Ee(["\n margin-bottom: ","px;\n display: flex;\n flex-direction: column;\n"])),$[100]),Ot=m(et||(et=Ee(["\n font-size: ","px;\n line-height: ","px;\n"])),q.large.fontSize,q.large.lineHeight),Mt=be(be({},F.Light,m(nt||(nt=Ee(["\n ::after {\n box-shadow: 0px 0px 7px 5px ",";\n }\n "])),U(.85,Z.black))),F.Dark,m(rt||(rt=Ee(["\n ::after {\n width: 95%;\n box-shadow: 0px -7px 12px 5px rgb(0 0 0 / 50%);\n }\n "])))),It=function(e){return ee[e].icon.primary.default},zt=function(e){return ee[e].icon.disabled.default},jt=["children","label","description","placeholder","aria-label","disabled","size","darkMode","state","errorMessage","successMessage","searchState","searchEmptyMessage","searchErrorMessage","searchLoadingMessage","filteredOptions","onFilter","clearable","onClear","overflow","multiselect","initialValue","inputValue","onInputChange","onChange","value","chipTruncationLocation","chipCharacterLimit","className","renderMode","portalClassName","portalContainer","portalRef","scrollContainer","popoverZIndex","dropdownWidthBasis"],Wt=["className","glyph","disabled"];function At(n){var r=n.children,m=n.label,b=n.description,v=n.placeholder,w=void 0===v?"Select":v,E=n["aria-label"],O=n.disabled,W=void 0!==O&&O,F=n.size,R=void 0===F?We.Default:F,V=n.darkMode,U=n.state,Z=void 0===U?"none":U,q=n.errorMessage,$=void 0===q?y.error:q,J=n.successMessage,Q=void 0===J?y.success:J,_=n.searchState,ee=void 0===_?"unset":_,ne=n.searchEmptyMessage,re=void 0===ne?"No results found":ne,te=n.searchErrorMessage,oe=void 0===te?"Could not get results!":te,ie=n.searchLoadingMessage,ae=void 0===ie?"Loading results...":ie,le=n.filteredOptions,ce=n.onFilter,ue=n.clearable,se=void 0===ue||ue,de=n.onClear,fe=n.overflow,pe=void 0===fe?Ae.expandY:fe,he=n.multiselect,me=void 0!==he&&he,ge=n.initialValue,ye=n.inputValue,Ee=n.onInputChange,Ce=n.onChange,Le=n.value,Fe=n.chipTruncationLocation,Te=n.chipCharacterLimit,Pe=void 0===Te?12:Te,Re=n.className,Ge=n.renderMode,Be=void 0===Ge?G.TopLayer:Ge,He=n.portalClassName,Ve=n.portalContainer,Ke=n.portalRef,Ye=n.scrollContainer,Ue=n.popoverZIndex,qe=n.dropdownWidthBasis,$e=void 0===qe?Xe.Trigger:qe,Je=we(n,jt),Qe=z(V),_e=Qe.darkMode,nn=Qe.theme,rn=C({prefix:"option"}),tn=C({prefix:"chip"}),on=k({prefix:"combobox-input"}),an=k({prefix:"combobox-label"}),ln=k({prefix:"combobox-menu"}),cn=a(null),un=a(null),sn=a(null),dn=a(null),fn=a(null),pn=ke(l(!1),2),hn=pn[0],mn=pn[1],gn=S(hn),bn=ke(l(null),2),vn=bn[0],yn=bn[1],wn=o(function(){return ir(r)},[r]),kn=i(function(e){return!!e&&!!wn.find(function(n){return n.value===e})},[wn]),En=l(function(){if(ge){if(s(ge)){var e=ge.filter(function(e){return kn(e)});return e}if(kn(ge))return ge}return function(e){return e?[]:null}(me)}),Cn=ke(En,2),Sn=Cn[0],Ln=Cn[1],Nn=S(Sn),Dn=ke(l(null!=ye?ye:""),2),On=Dn[0],Mn=Dn[1];t(function(){h(ye)||Mn(ye)},[ye]);var In=function(e){Mn(e)},zn=S(On),jn=ke(l(null),2),Wn=jn[0],Fn=jn[1],Tn=ke(l(!1),2),Xn=Tn[0],Pn=Tn[1],Rn=me&&s(Sn)&&Sn.length>0?void 0:w,Gn=function(){return mn(!1)},Bn=function(){return mn(!0)},Hn=i(function(e){return!me||"string"!=typeof e&&"number"!=typeof e?!me&&s(e)&&P.error("Error in Combobox: multiselect is set to `false`, but received an Array value"):P.error("Error in Combobox: multiselect is set to `true`, but received a ".concat(Se(e),' value: "').concat(e,'"')),me&&s(e)},[me]),Vn=i(function(e){!W&&dn&&dn.current&&(dn.current.focus(),h(e)||dn.current.setSelectionRange(e,e))},[W]),Kn=i(function(e){if(Hn(Sn)){var n=c(Sn),r=Ce,t={diffType:"delete",value:null!=e?e:Sn};f(e)?n.length=0:Sn.includes(e)?n.splice(n.indexOf(e),1):(n.push(e),t.diffType="insert",In("")),Ln(n),null==r||r(n,t)}else{var o=e,i=Ce;Ln(o),null==i||i(o)}},[Hn,Ce,Sn]),Yn=i(function(e){var n,r,t,o;return function(e,n){return Array.isArray(n)?n.includes(e):e===n}((r=wn,(n=e)?null!==(t=null===(o=r.find(function(e){return e.displayName===n}))||void 0===o?void 0:o.value)&&void 0!==t?t:n:""),Sn)},[wn,Sn]),Un=i(function(e){var n="string"==typeof e?e:e.value;if(le&&le.length>0)return le.includes(n);if(Yn(On))return!0;var r="string"==typeof e?lr(n,wn):e.displayName;return T(r).toLowerCase().includes(On.toLowerCase())},[le,Yn,On,wn]),Zn=o(function(){return wn.filter(Un)},[wn,Un]),qn=i(function(e){return Zn?Zn.findIndex(function(n){return n.value===e}):-1},[Zn]),$n=i(function(e){if(Zn&&Zn.length>=e){var n=Zn[e];return n?n.value:void 0}},[Zn]),Jn=i(function(){return Hn(Sn)?Sn.findIndex(function(e){var n;return null===(n=tn(e))||void 0===n||null===(n=n.current)||void 0===n?void 0:n.contains(document.activeElement)}):-1},[tn,Hn,Sn]),Qn=ke(l(),2),_n=Qn[0],er=Qn[1],nr=i(function(e){var n,r=null!==(n=null==Zn?void 0:Zn.length)&&void 0!==n?n:0,t=r-1>0?r-1:0,o=qn(vn);switch(e&&hn&&(Fn(null),Vn()),e){case"next":var i=$n(o+1<r?o+1:0);yn(null!=i?i:null);break;case"prev":var a=$n(o-1>=0?o-1:t);yn(null!=a?a:null);break;case"last":var l=$n(t);yn(null!=l?l:null);break;default:var c=$n(0);yn(null!=c?c:null)}},[vn,qn,$n,hn,Vn,null==Zn?void 0:Zn.length]),rr=i(function(e,n){if(Hn(Sn))switch(e){case"next":var r=null!=n?n:Jn(),t=r+1<Sn.length?r+1:Sn.length-1,o=Sn[t];Fn(o);break;case"prev":var i=null!=n?n:Jn(),a=i>0?i-1:i<0?Sn.length-1:0,l=Sn[a];Fn(l);break;case"first":var c=Sn[0];Fn(c);break;case"last":var u=Sn[Sn.length-1];Fn(u);break;default:Fn(null)}},[Jn,Hn,Sn]),cr=i(function(e,n){switch(e&&yn(null),e){case"right":switch(_n){case Ne:var r,t,o;if((null===(r=dn.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=dn.current)||void 0===t?void 0:t.value.length))null===(o=un.current)||void 0===o||o.focus();break;case Oe:case Ie:case Me:if(_n===Me||1===(null==Sn?void 0:Sn.length)){Vn(0),rr(null),n.preventDefault();break}rr("next")}break;case"left":switch(_n){case De:var i;n.preventDefault(),Vn(null==dn||null===(i=dn.current)||void 0===i?void 0:i.value.length);break;case Ne:case Ie:case Me:if(Hn(Sn)){var a;if(_n===Ne&&0!==(null===(a=dn.current)||void 0===a?void 0:a.selectionStart))break;rr("prev")}}break;default:rr(null)}},[_n,Hn,Sn,Vn,rr]);t(function(){var e,n;yn(null!==(e=null===(n=Zn[0])||void 0===n?void 0:n.value)&&void 0!==e?e:null)},[hn,Zn]),L(vn?rn(vn):void 0,fn);var ur=i(function(n){if(X(n,"ComboboxOption")){var r=or(n.props),t=r.value,o=r.displayName;if(Un(t)){var i=n.props,a=i.className,l=i.glyph,c=i.disabled,u=we(i,Wt),s=wn.findIndex(function(e){return e.value===t}),d=vn===t,f=Hn(Sn)?Sn.includes(t):Sn===t,p=rn(t);return e.createElement(kr,ve({},u,{value:t,displayName:o,isFocused:d,isSelected:f,disabled:c,setSelected:function(){yn(t),Kn(t),Vn(),t===Sn&&Gn()},glyph:l,className:a,index:s,ref:p}))}}else if(X(n,"ComboboxGroup")){var h=e.Children.map(n.props.children,ur);if(h&&(null==h?void 0:h.length)>0)return e.createElement(xn,{label:n.props.label,className:n.props.className},e.Children.map(h,ur))}},[wn,rn,vn,Hn,Sn,Vn,Un,Kn]),sr=o(function(){return e.Children.map(r,ur)},[r,ur]),dr=o(function(){if(Hn(Sn))return Sn.filter(kn).map(function(n,r){var t=lr(n,wn),o=T(t),i=Wn===n,a=tn(n),l=r>=Sn.length-1;return e.createElement(en,{key:n,displayName:o,isFocused:i,onRemove:function(){l?(Vn(),rr(null)):rr("next",r),Kn(n)},onFocus:function(){Fn(n)},ref:a})})},[Hn,Sn,kn,wn,Wn,tn,Kn,Vn,rr]),fr=o(function(){return wn.some(function(e){return e.hasGlyph})},[wn]),pr=i(function(){var e=Zn.find(function(e){return e.displayName===On||e.value===On});if(!Le&&e)Kn(e.value);else if(!Hn(Sn)){var n,r=null!==(n=lr(Sn,wn))&&void 0!==n?n:Nn;In(T(r))}},[wn,On,Hn,Nn,Sn,Kn,Le,Zn]),hr=i(function(){if(tt(Sn)){if(Hn(Sn))Sr(pe);else if(!Hn(Sn)){var e,n=null!==(e=lr(Sn,wn))&&void 0!==e?e:"";In(T(n)),Gn()}}else In("")},[wn,Hn,Sn,pe]);t(function(){if(!h(Le)&&Le!==zn)if(f(Le))Ln(null);else if(Hn(Le)){var e=Le.filter(kn);Ln(e)}else Ln(kn(Le)?Le:null)},[Hn,kn,zn,Le]),t(function(){var e=!h(Nn)&&(s(Sn)&&!f(Nn)||p(Sn)||f(Sn))&&!d(Sn,Nn),n=h(Nn)&&tt(Sn);(e||n)&&hr()},[hr,Nn,Sn]),t(function(){!hn&&gn&&pr()},[hn,gn,pr]);var mr=ke(l(0),2),gr=mr[0],br=mr[1];t(function(){var e,n;br(null!==(e=null===(n=cn.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)},[cn,hn,vn,Sn]);N(Gn,[fn,cn],{enabled:hn});var vr=Hn(Sn)&&!!Sn.length,yr=u(function(e){Pn(tr(e.target))},50,{leading:!0}),xr=i(function(e){pe===Ae.expandY&&yr(e)},[yr,pe]);t(function(){sn.current&&Pn(tr(sn.current))},[]);var wr,Er=xe({popoverZIndex:Ue},B({dismissMode:H.Manual,portalClassName:He,portalContainer:Ve,portalRef:Ke,renderMode:Be,scrollContainer:Ye})),Cr={disabled:W,errorMessage:$,size:R,state:Z,successMessage:Q};return e.createElement(I,{darkMode:_e},e.createElement(Ze.Provider,{value:{multiselect:me,size:R,withIcons:fr,disabled:W,isOpen:hn,state:Z,searchState:ee,chipTruncationLocation:Fe,chipCharacterLimit:Pe,inputValue:On,overflow:pe,popoverZIndex:Ue}},e.createElement("div",ve({className:g(st(R),Re)},Je),(m||b)&&e.createElement("div",{className:Dt},m&&e.createElement(K,{id:an,htmlFor:on,darkMode:_e,disabled:W,className:g(be({},Ot,R===We.Large))},m),b&&e.createElement(Y,{darkMode:_e,disabled:W,className:g(be({},Ot,R===We.Large))},b)),e.createElement("div",{ref:cn,role:"combobox","aria-expanded":hn,"aria-controls":ln,"aria-owns":ln,tabIndex:-1,onMouseDown:function(e){W&&e.preventDefault()},onClick:function(e){if(e.target!==dn.current){var n=0;if(dn.current)n=e.nativeEvent.offsetX>dn.current.offsetLeft+dn.current.clientWidth?On.length:0;Vn(n)}Bn()},onFocus:function(e){Sr(pe),er(function(e){var n,r,t,o;if(!e)return;if(null!==(n=dn.current)&&void 0!==n&&n.contains(e))return Ne;if(null!==(r=un.current)&&void 0!==r&&r.contains(e))return De;var i=Hn(Sn)?Sn.findIndex(function(n){var r;return null===(r=tn(n))||void 0===r||null===(r=r.current)||void 0===r?void 0:r.contains(e)}):-1;if(Hn(Sn)){if(0===i)return Oe;if(i===Sn.length-1)return Me;if(i>0)return Ie}if(null!==(t=fn.current)&&void 0!==t&&t.contains(e))return je;if(null!==(o=cn.current)&&void 0!==o&&o.contains(e))return ze}(e.target))},onKeyDown:function(e){var n,r,t=null===(n=fn.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(r=cn.current)||void 0===r?void 0:r.contains(document.activeElement))||t){if(e.ctrlKey||e.shiftKey||e.altKey)return;switch(e.key){case A.Tab:switch(_n){case"Input":tt(Sn)||(Gn(),nr("first"),rr(null));break;case"LastChip":rr(null)}break;case A.Escape:Gn(),nr("first");break;case A.Enter:hn?!hn||_n!==Ne||f(vn)||function(e){if("string"==typeof e){var n=ar(e,wn);return!(null==n||!n.isDisabled)}return!!e.isDisabled}(vn)?_n===De&&(Kn(null),Vn()):Kn(vn):Bn();break;case A.Backspace:var o;if(Hn(Sn))"Input"===_n&&0===(null===(o=dn.current)||void 0===o?void 0:o.selectionStart)&&rr("last");Bn();break;case A.ArrowDown:hn?(e.preventDefault(),nr("next")):Bn();break;case A.ArrowUp:hn?(e.preventDefault(),nr("prev")):Bn();break;case A.ArrowRight:cr("right",e);break;case A.ArrowLeft:cr("left",e);break;default:hn||Bn()}}},onTransitionEnd:function(){var e,n;br(null!==(e=null===(n=cn.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)},className:g(dt,ft[nn],pt(R,vr),mt(nn)[Z],be(be(be({},gt[nn],(wr=Ne,wr===_n)),ht(nn),W),Mt[nn],Xn))},e.createElement("div",{onScroll:xr,ref:sn,className:yt({size:R,overflow:pe})},dr,e.createElement("input",{"aria-label":null!=E?E:m,"aria-autocomplete":"list","aria-controls":ln,"aria-labelledby":an,ref:dn,id:on,className:g(xt,Et(R),wt[nn],Ct(hn),be(be({},St(R,On),Hn(Sn)),kt[nn],W)),placeholder:Rn,"aria-disabled":W,readOnly:W,onChange:function(e){In(e.target.value),null==ce||ce(e.target.value),null==Ee||Ee(e)},value:On,autoComplete:"off"})),e.createElement("div",{className:g(bt,vt[R])},se&&tt(Sn)&&!W&&e.createElement(M,{"aria-label":"Clear selection",disabled:W,ref:un,onClick:function(e){W||(e.stopPropagation(),Kn(null),null==de||de(e),null==ce||ce(""),Vn())},onFocus:function(){yn(null)},className:g(Lt),darkMode:_e},e.createElement(D,{glyph:"XWithCircle"})),e.createElement(D,{glyph:"CaretDown",className:Nt,fill:g(be(be({},It(nn),!W),zt(nn),W))}))),e.createElement(x,Cr),e.createElement(j,Er,e.createElement(An,{id:ln,labelId:an,refEl:cn,ref:fn,menuWidth:gr,searchLoadingMessage:ae,searchErrorMessage:oe,searchEmptyMessage:re,dropdownWidthBasis:$e},sr)))));function Sr(e){sn&&sn.current&&(e===Ae.scrollX&&(sn.current.scrollLeft=sn.current.scrollWidth),e===Ae.expandY&&(sn.current.scrollTop=sn.current.scrollHeight))}}export{At as Combobox,wn as ComboboxGroup,Er as ComboboxOption,We as ComboboxSize,Xe as DropdownWidthBasis,Ae as Overflow,Te as SearchState,Fe as State};
2
2
  //# sourceMappingURL=index.js.map