@leafygreen-ui/combobox 12.4.0 → 12.4.2
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 +22 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/types/Combobox/Combobox.d.ts.map +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/index.js.map +1 -1
- package/package.json +12 -12
- package/src/Combobox/Combobox.spec.tsx +0 -1
- package/src/Combobox/Combobox.tsx +40 -41
- package/stories.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @leafygreen-ui/combobox
|
|
2
2
|
|
|
3
|
+
## 12.4.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- cc59a2d: Fix selection initialization
|
|
8
|
+
|
|
9
|
+
## 12.4.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 1c0c03a: Updates the focus ring token to use the base blue color in light mode. [LG-5847](https://jira.mongodb.org/browse/LG-5847)
|
|
14
|
+
- Updated dependencies [1c0c03a]
|
|
15
|
+
- @leafygreen-ui/checkbox@18.1.5
|
|
16
|
+
- @leafygreen-ui/chip@4.2.1
|
|
17
|
+
- @leafygreen-ui/form-field@4.0.9
|
|
18
|
+
- @leafygreen-ui/hooks@9.3.1
|
|
19
|
+
- @leafygreen-ui/icon-button@17.1.5
|
|
20
|
+
- @leafygreen-ui/input-option@4.1.5
|
|
21
|
+
- @leafygreen-ui/popover@14.3.2
|
|
22
|
+
- @leafygreen-ui/tokens@4.2.2
|
|
23
|
+
- @leafygreen-ui/typography@22.2.4
|
|
24
|
+
|
|
3
25
|
## 12.4.0
|
|
4
26
|
|
|
5
27
|
### Minor Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e,{createContext as n,useContext as r,useEffect as t,useMemo as o,useCallback as i,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 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 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,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,s=!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){s=!0,o=e}finally{try{if(!c&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(s)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,s=n.onFocus,u=r(Ze),d=u.size,f=u.disabled,p=u.overflow,h=u.chipTruncationLocation,m=void 0===h?oe.End:h,b=u.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)||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,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(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 i=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=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}),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 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,u,d,i,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},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"])),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,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","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=i(function(e){e.stopPropagation(),b||(u(),null==h||h(e,p))},[b,h,u,p]),F=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,s=n.multiselect,u=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[u],be(be({},hr[u],d),mr[u],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: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 o=me(r),i=new RegExp(o,"gi"),a=n.matchAll(i);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)},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]}),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,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"])),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,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,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=ke(l(null),2),kn=wn[0],En=wn[1],Cn=S(kn),Sn=ke(l(null!=ye?ye:""),2),Ln=Sn[0],Nn=Sn[1];t(function(){h(ye)||Nn(ye)},[ye]);var Dn=function(e){Nn(e)},On=S(Ln),Mn=ke(l(null),2),In=Mn[0],zn=Mn[1],jn=ke(l(!1),2),Wn=jn[0],Fn=jn[1],Tn=me&&u(kn)&&kn.length>0?void 0:w,Xn=function(){return mn(!1)},Pn=function(){return mn(!0)},Rn=o(function(){return ir(r)},[r]),Gn=i(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]),Bn=i(function(e){!W&&dn&&dn.current&&(dn.current.focus(),h(e)||dn.current.setSelectionRange(e,e))},[W]),Hn=i(function(e){if(Gn(kn)){var n=c(kn),r=Ce,t={diffType:"delete",value:null!=e?e:kn};f(e)?n.length=0:kn.includes(e)?n.splice(n.indexOf(e),1):(n.push(e),t.diffType="insert",Dn("")),En(n),null==r||r(n,t)}else{var o=e,i=Ce;En(o),null==i||i(o)}},[Gn,Ce,kn]),Vn=i(function(e){var n,r,t,o;return function(e,n){return Array.isArray(n)?n.includes(e):e===n}((r=Rn,(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:""),kn)},[Rn,kn]),Kn=i(function(e){var n="string"==typeof e?e:e.value;if(le&&le.length>0)return le.includes(n);if(Vn(Ln))return!0;var r="string"==typeof e?lr(n,Rn):e.displayName;return T(r).toLowerCase().includes(Ln.toLowerCase())},[le,Vn,Ln,Rn]),Yn=o(function(){return Rn.filter(Kn)},[Rn,Kn]),Un=i(function(e){return!!e&&!!Rn.find(function(n){return n.value===e})},[Rn]),Zn=i(function(e){return Yn?Yn.findIndex(function(n){return n.value===e}):-1},[Yn]),qn=i(function(e){if(Yn&&Yn.length>=e){var n=Yn[e];return n?n.value:void 0}},[Yn]),$n=i(function(){return Gn(kn)?kn.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,Gn,kn]),Jn=ke(l(),2),Qn=Jn[0],_n=Jn[1],er=i(function(e){var n,r=null!==(n=null==Yn?void 0:Yn.length)&&void 0!==n?n:0,t=r-1>0?r-1:0,o=Zn(vn);switch(e&&hn&&(zn(null),Bn()),e){case"next":var i=qn(o+1<r?o+1:0);yn(null!=i?i:null);break;case"prev":var a=qn(o-1>=0?o-1:t);yn(null!=a?a:null);break;case"last":var l=qn(t);yn(null!=l?l:null);break;default:var c=qn(0);yn(null!=c?c:null)}},[vn,Zn,qn,hn,Bn,null==Yn?void 0:Yn.length]),nr=i(function(e,n){if(Gn(kn))switch(e){case"next":var r=null!=n?n:$n(),t=r+1<kn.length?r+1:kn.length-1,o=kn[t];zn(o);break;case"prev":var i=null!=n?n:$n(),a=i>0?i-1:i<0?kn.length-1:0,l=kn[a];zn(l);break;case"first":var c=kn[0];zn(c);break;case"last":var s=kn[kn.length-1];zn(s);break;default:zn(null)}},[$n,Gn,kn]),rr=i(function(e,n){switch(e&&yn(null),e){case"right":switch(Qn){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=sn.current)||void 0===o||o.focus();break;case Oe:case Ie:case Me:if(Qn===Me||1===(null==kn?void 0:kn.length)){Bn(0),nr(null),n.preventDefault();break}nr("next")}break;case"left":switch(Qn){case De:var i;n.preventDefault(),Bn(null==dn||null===(i=dn.current)||void 0===i?void 0:i.value.length);break;case Ne:case Ie:case Me:if(Gn(kn)){var a;if(Qn===Ne&&0!==(null===(a=dn.current)||void 0===a?void 0:a.selectionStart))break;nr("prev")}}break;default:nr(null)}},[Qn,Gn,kn,Bn,nr]);t(function(){hn||er("first")},[hn,er]),L(vn?rn(vn):void 0,fn);var cr=i(function(n){if(X(n,"ComboboxOption")){var r=or(n.props),t=r.value,o=r.displayName;if(Kn(t)){var i=n.props,a=i.className,l=i.glyph,c=i.disabled,s=we(i,Wt),u=Rn.findIndex(function(e){return e.value===t}),d=vn===t,f=Gn(kn)?kn.includes(t):kn===t,p=rn(t);return e.createElement(kr,ve({},s,{value:t,displayName:o,isFocused:d,isSelected:f,disabled:c,setSelected:function(){yn(t),Hn(t),Bn(),t===kn&&Xn()},glyph:l,className:a,index:u,ref:p}))}}else if(X(n,"ComboboxGroup")){var h=e.Children.map(n.props.children,cr);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,cr))}},[Rn,rn,vn,Gn,kn,Bn,Kn,Hn]),sr=o(function(){return e.Children.map(r,cr)},[r,cr]),ur=o(function(){if(Gn(kn))return kn.filter(Un).map(function(n,r){var t=lr(n,Rn),o=T(t),i=In===n,a=tn(n),l=r>=kn.length-1;return e.createElement(en,{key:n,displayName:o,isFocused:i,onRemove:function(){l?(Bn(),nr(null)):nr("next",r),Hn(n)},onFocus:function(){zn(n)},ref:a})})},[Gn,kn,Un,Rn,In,tn,Hn,Bn,nr]),dr=o(function(){return Rn.some(function(e){return e.hasGlyph})},[Rn]),fr=i(function(){var e=Yn.find(function(e){return e.displayName===Ln||e.value===Ln});if(!Le&&e)Hn(e.value);else if(!Gn(kn)){var n,r=null!==(n=lr(kn,Rn))&&void 0!==n?n:Cn;Dn(T(r))}},[Rn,Ln,Gn,Cn,kn,Hn,Le,Yn]),pr=i(function(){if(tt(kn)){if(Gn(kn))Cr(pe);else if(!Gn(kn)){var e,n=null!==(e=lr(kn,Rn))&&void 0!==e?e:"";Dn(T(n)),Xn()}}else Dn("")},[Rn,Gn,kn,pe]);t(function(){if(ge)if(u(ge)){var e,n=null!==(e=ge.filter(function(e){return Un(e)}))&&void 0!==e?e:[];En(n)}else Un(ge)&&En(ge);else En(function(e){return e?[]:null}(me))},[]),t(function(){if(!h(Le)&&Le!==On)if(f(Le))En(null);else if(Gn(Le)){var e=Le.filter(Un);En(e)}else En(Un(Le)?Le:null)},[Gn,Un,On,Le]),t(function(){!h(Cn)&&(u(kn)&&!f(Cn)||p(kn)||f(kn))&&!d(kn,Cn)&&pr()},[pr,Cn,kn]),t(function(){!hn&&gn&&fr()},[hn,gn,fr]);var hr=ke(l(0),2),mr=hr[0],gr=hr[1];t(function(){var e,n;gr(null!==(e=null===(n=cn.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)},[cn,hn,vn,kn]);N(Xn,[fn,cn],{enabled:hn});var br=Gn(kn)&&!!kn.length,vr=s(function(e){Fn(tr(e.target))},50,{leading:!0}),yr=i(function(e){pe===Ae.expandY&&vr(e)},[vr,pe]);t(function(){un.current&&Fn(tr(un.current))},[]);var xr,wr=xe({popoverZIndex:Ue},B({dismissMode:H.Manual,portalClassName:He,portalContainer:Ve,portalRef:Ke,renderMode:Be,scrollContainer:Ye})),Er={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:dr,disabled:W,isOpen:hn,state:Z,searchState:ee,chipTruncationLocation:Fe,chipCharacterLimit:Pe,inputValue:Ln,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?Ln.length:0;Bn(n)}Pn()},onFocus:function(e){Cr(pe),_n(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=sn.current)&&void 0!==r&&r.contains(e))return De;var i=Gn(kn)?kn.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(Gn(kn)){if(0===i)return Oe;if(i===kn.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(Qn){case"Input":tt(kn)||(Xn(),er("first"),nr(null));break;case"LastChip":nr(null)}break;case A.Escape:Xn(),er("first");break;case A.Enter:hn?!hn||Qn!==Ne||f(vn)||function(e){if("string"==typeof e){var n=ar(e,Rn);return!(null==n||!n.isDisabled)}return!!e.isDisabled}(vn)?Qn===De&&(Hn(null),Bn()):Hn(vn):Pn();break;case A.Backspace:var o;if(Gn(kn))"Input"===Qn&&0===(null===(o=dn.current)||void 0===o?void 0:o.selectionStart)&&nr("last");Pn();break;case A.ArrowDown:hn?(e.preventDefault(),er("next")):Pn();break;case A.ArrowUp:hn?(e.preventDefault(),er("prev")):Pn();break;case A.ArrowRight:rr("right",e);break;case A.ArrowLeft:rr("left",e);break;default:hn||Pn()}}},onTransitionEnd:function(){var e,n;gr(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,br),mt(nn)[Z],be(be(be({},gt[nn],(xr=Ne,xr===Qn)),ht(nn),W),Mt[nn],Wn))},e.createElement("div",{onScroll:yr,ref:un,className:yt({size:R,overflow:pe})},ur,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,Ln),Gn(kn)),kt[nn],W)),placeholder:Tn,"aria-disabled":W,readOnly:W,onChange:function(e){Dn(e.target.value),null==ce||ce(e.target.value),null==Ee||Ee(e)},value:Ln,autoComplete:"off"})),e.createElement("div",{className:g(bt,vt[R])},ue&&tt(kn)&&!W&&e.createElement(M,{"aria-label":"Clear selection",disabled:W,ref:sn,onClick:function(e){W||(e.stopPropagation(),Hn(null),null==de||de(e),null==ce||ce(""),Bn())},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,Er),e.createElement(j,wr,e.createElement(An,{id:ln,labelId:an,refEl:cn,ref:fn,menuWidth:mr,searchLoadingMessage:ae,searchErrorMessage:oe,searchEmptyMessage:re,dropdownWidthBasis:$e},sr)))));function Cr(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 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};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|