@leafygreen-ui/combobox 8.1.4 → 9.0.0

package/stories.js

@@ -1 +1 @@
-import e,{createContext as n,useContext as r,useEffect as t,useMemo as a,useCallback as l,useRef as o,useState as i}from"react";import{storybookArgTypes as c,storybookExcludedControlParams as s}from"@lg-tools/storybook-utils";import u from"@leafygreen-ui/button";import{css as d,cx as p,keyframes as f}from"@leafygreen-ui/emotion";import m,{isComponentGlyph as h}from"@leafygreen-ui/icon";import g from"lodash/clone";import b from"lodash/debounce";import v from"lodash/isArray";import y from"lodash/isEqual";import x from"lodash/isNull";import k from"lodash/isString";import w from"lodash/isUndefined";import E from"prop-types";import{useForwardedRef as C,useIdAllocator as N,useAvailableSpace as S,useDynamicRefs as L,usePrevious as O,useAutoScroll as D,useBackdropClick as M}from"@leafygreen-ui/hooks";import j from"@leafygreen-ui/icon-button";import I,{useDarkMode as z}from"@leafygreen-ui/leafygreen-provider";import{createUniqueClassName as P,keyMap as F,Theme as A,isComponentType as T,consoleOnce as W}from"@leafygreen-ui/lib";import{Error as X,Label as R,Description as G}from"@leafygreen-ui/typography";import{chipTextClassName as V,TruncationLocation as H,Chip as q,BaseFontSize as Z,Variant as K}from"@leafygreen-ui/chip";import{typeScales as Y,spacing as B,fontWeights as U,fontFamilies as J,transitionDuration as $,focusRing as Q}from"@leafygreen-ui/tokens";import{palette as _}from"@leafygreen-ui/palette";import ee from"@leafygreen-ui/popover";import{transparentize as ne}from"polished";import{leftGlyphClassName as re,InputOption as te,InputOptionContent as ae}from"@leafygreen-ui/input-option";import le from"lodash/kebabCase";import oe from"lodash/escapeRegExp";import ie from"@leafygreen-ui/checkbox";function ce(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 se(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?ce(Object(r),!0).forEach((function(n){pe(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ce(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function ue(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||"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:n+""}function de(e){return de="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},de(e)}function pe(e,n,r){return(n=ue(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function fe(){return fe=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},fe.apply(this,arguments)}function me(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},l=Object.keys(e);for(t=0;t<l.length;t++)r=l[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(t=0;t<l.length;t++)r=l[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function he(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function ge(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,a,l,o,i=[],c=!0,s=!1;try{if(l=(r=r.call(e)).next,0===n){if(Object(r)!==r)return;c=!1}else for(;!(c=(t=l.call(r)).done)&&(i.push(t.value),i.length!==n);c=!0);}catch(e){s=!0,a=e}finally{try{if(!c&&null!=r.return&&(o=r.return(),Object(o)!==o))return}finally{if(s)throw a}}return i}}(e,n)||ve(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 be(e){return function(e){if(Array.isArray(e))return ye(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||ve(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 ve(e,n){if(e){if("string"==typeof e)return ye(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?ye(e,n):void 0}}function ye(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}var xe="Input",ke="ClearButton",we="FirstChip",Ee="LastChip",Ce="MiddleChip",Ne="Combobox",Se="Menu",Le={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},Oe={expandY:"expand-y",scrollX:"scroll-x",expandX:"expand-x"},De={none:"none",error:"error"},Me={unset:"unset",error:"error",loading:"loading"};var je,Ie,ze,Pe,Fe,Ae,Te,We,Xe,Re=n({multiselect:!1,size:Le.Default,withIcons:!1,disabled:!1,isOpen:!1,state:De.none,searchState:Me.unset,overflow:Oe.expandY}),Ge=P("combobox-chip"),Ve=pe(pe(pe(pe({},Le.XSmall,16),Le.Small,Y.body1.lineHeight),Le.Default,Y.body1.lineHeight),Le.Large,Y.body2.lineHeight),He=pe(pe(pe(pe({},Le.XSmall,Y.body1.fontSize),Le.Small,Y.body1.fontSize),Le.Default,Y.body1.fontSize),Le.Large,Y.body2.fontSize),qe=pe(pe(pe(pe({},Le.XSmall,1),Le.Small,0),Le.Default,2),Le.Large,4),Ze=pe(pe(pe(pe({},Le.XSmall,d(je||(je=he(["\n    font-size: ","px;\n    line-height: ","px;\n\n    ."," {\n      padding-block: ","px;\n    }\n  "])),He[Le.XSmall],Ve[Le.XSmall],V,qe[Le.XSmall])),Le.Small,d(Ie||(Ie=he(["\n    font-size: ","px;\n    line-height: ","px;\n\n    ."," {\n      padding-block: ","px;\n    }\n  "])),He[Le.Small],Ve[Le.Small],V,qe[Le.Small])),Le.Default,d(ze||(ze=he(["\n    font-size: ","px;\n    line-height: ","px;\n\n    ."," {\n      padding-block: ","px;\n    }\n  "])),He[Le.Default],Ve[Le.Default],V,qe[Le.Default])),Le.Large,d(Pe||(Pe=he(["\n    font-size: ","px;\n    line-height: ","px;\n\n    ."," {\n      padding-inline-end: 10px;\n      padding-block: ","px;\n    }\n  "])),He[Le.Large],Ve[Le.Large],V,qe[Le.Large])),Ke=e.forwardRef((function(n,a){var l,o=n.displayName,i=n.isFocused,c=n.onRemove,s=n.onFocus,u=r(Re),d=u.size,f=u.disabled,m=u.overflow,h=u.chipTruncationLocation,g=void 0===h?H.End:h,b=u.chipCharacterLimit,v=void 0===b?12:b,y=u.popoverZIndex,x=m===Oe.scrollX?H.None:g,k=C(a,null),w=null===(l=k.current)||void 0===l?void 0:l.querySelector("button");t((function(){i&&!f&&(null==w||w.focus())}),[f,w,i]);return e.createElement(q,{label:o,className:p(Ge,Ze[d]),role:"option","aria-selected":i,"data-testid":"lg-combobox-chip",onClick:function(e){null!=w&&w.contains(e.target)||s()},onKeyDown:function(e){f||e.key!==F.Delete&&e.key!==F.Backspace&&e.key!==F.Enter&&e.key!==F.Space||c()},onDismiss:function(){f||c()},baseFontSize:Z.Body1,chipCharacterLimit:v,chipTruncationLocation:x,popoverZIndex:y,variant:K.Gray,ref:k,disabled:f,tabIndex:-1})}));Ke.displayName="ComboboxChip";var Ye,Be,Ue,Je,$e,Qe,_e,en,nn,rn,tn,an,ln,on=pe(pe({},A.Light,d(Fe||(Fe=he(["\n    padding-top: ","px;\n  "])),B[2])),A.Dark,d(Ae||(Ae=he(["\n    padding-top: ","px;\n  "])),B[2])),cn=d(Te||(Te=he(["\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"])),U.bold),sn=pe(pe({},A.Light,d(We||(We=he(["\n    color: ",";\n  "])),_.gray.dark1)),A.Dark,d(Xe||(Xe=he(["\n    color: ",";\n  "])),_.gray.light1));function un(n){var r=n.label,t=n.className,a=n.children,l=z().theme,o=N({prefix:"combobox-group"});return e.Children.count(a)>0?e.createElement("div",{className:p(on[l],t)},e.createElement("div",{className:p(cn,sn[l]),id:o},r),e.createElement("div",{role:"group","aria-labelledby":o},a)):e.createElement(e.Fragment,null)}function dn(e){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}dn.displayName="ComboboxGroup",dn.propTypes={className:E.string,children:E.node.isRequired,label:E.string.isRequired};var pn,fn=pe(pe(pe(pe({},Le.XSmall,{x:12,y:8}),Le.Small,{x:12,y:8}),Le.Default,{x:12,y:8}),Le.Large,{x:12,y:8}),mn=function(e){return Ve[e]+2*fn[e].y},hn=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:384;return d(Ye||(Ye=he(["\n  width: ","px;\n  overflow: hidden;\n  border-radius: 12px;\n  border: 1px solid;\n"])),e)},gn=pe(pe({},A.Light,d(Be||(Be=he(["\n    box-shadow: 0px 4px 7px ",";\n    border-color: ",";\n  "])),ne(.85,_.black),_.gray.light2)),A.Dark,d(Ue||(Ue=he(["\n    box-shadow: 0px 4px 7px ",";\n    border-color: ",";\n  "])),ne(.85,_.black),_.gray.dark2)),bn=d(Je||(Je=he(["\n  position: relative;\n  width: 100%;\n  margin: 0;\n  padding: ","px 0;\n  font-family: ",";\n  border-radius: inherit;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n"])),B[2],J.default),vn=pe(pe({},A.Light,d($e||($e=he(["\n    color: ",";\n    background-color: ",";\n  "])),_.black,_.white)),A.Dark,d(Qe||(Qe=he(["\n    color: ",";\n    background-color: ",";\n  "])),_.gray.light1,_.gray.dark3)),yn=d(_e||(_e=he(["\n  position: relative;\n  margin: 0;\n  padding: 0;\n"]))),xn=d(en||(en=he(["\n  font-family: inherit;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n"]))),kn=pe(pe({},A.Light,d(nn||(nn=he(["\n    color: ",";\n  "])),_.gray.dark3)),A.Dark,d(rn||(rn=he(["\n    color: ",";\n  "])),_.gray.light3)),wn=function(e){return d(tn||(tn=he(["\n  font-size: ","px;\n  line-height: ","px;\n  padding: ","px ","px;\n"])),He[e],Ve[e],fn[e].y,fn[e].x)},En=f(an||(an=he(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"]))),Cn=d(ln||(ln=he(["\n  animation: "," 1.5s linear infinite;\n"])),En),Nn=["children","id","refEl","labelId","menuWidth","searchLoadingMessage","searchErrorMessage","searchEmptyMessage"],Sn=e.forwardRef((function(n,t){var l=n.children,o=n.id,i=n.refEl,c=n.labelId,s=n.menuWidth,u=n.searchLoadingMessage,f=n.searchErrorMessage,h=n.searchEmptyMessage,g=me(n,Nn),b=z(),v=b.darkMode,y=b.theme,x=r(Re),k=x.disabled,E=x.size,N=x.isOpen,L=x.searchState,O=C(t,null),D=S(i),M=w(D)?"unset":"".concat(Math.min(D,256),"px"),j=a((function(){var n=p(xn,kn[y],wn(E)),r=p(xn,wn(E));switch(L){case"loading":return e.createElement("span",{className:n},e.createElement(m,{glyph:"Refresh",color:v?_.blue.light1:_.blue.base,className:Cn}),u);case"error":return e.createElement(X,{className:r},e.createElement(m,{glyph:"Warning",color:v?_.red.light1:_.red.base}),e.createElement("span",null,f));default:return l&&"object"===de(l)&&"length"in l&&l.length>0?e.createElement("ul",{className:yn},l):e.createElement("span",{className:n},h)}}),[y,E,L,v,u,f,l,h]);return e.createElement(ee,fe({active:N&&!k,spacing:4,align:"bottom",justify:"middle",refEl:i,adjustOnMutation:!0,className:p(hn(s),gn[y])},g),e.createElement("div",{ref:O,id:o,role:"listbox","aria-labelledby":c,"aria-expanded":N,className:p(bn,vn[y],d(pn||(pn=he(["\n              max-height: ",";\n            "])),M)),onMouseDownCapture:function(e){return e.preventDefault()}},j))}));Sn.displayName="ComboboxMenu";var Ln,On,Dn,Mn,jn,In,zn,Pn,Fn,An,Tn,Wn,Xn,Rn,Gn,Vn,Hn,qn,Zn,Kn,Yn=function(e){var n=e.scrollHeight;return e.scrollTop<n-e.clientHeight},Bn=function(e){var n,r=e.value,t=e.displayName;return{value:null!=r?r:le(t),displayName:null!==(n=null!=t?t:r)&&void 0!==n?n:""}},Un=function n(r){return e.Children.toArray(r).reduce((function(e,r){if(T(r,"ComboboxOption")){var t=Bn(r.props),a=t.value,l=t.displayName,o=r.props,i=o.glyph,c=o.disabled;return[].concat(be(e),[{value:a,displayName:l,isDisabled:!!c,hasGlyph:!!i}])}if(T(r,"ComboboxGroup")){var s=r.props.children;if(s)return[].concat(be(e),be(n(s)))}}),[])},Jn=function(e,n){if(e)return n.find((function(n){return n.value===e}))},$n=function(e,n){var r,t;return e?null!==(r=null===(t=Jn(e,n))||void 0===t?void 0:t.displayName)&&void 0!==r?r:e:""},Qn=function(e){return d(Ln||(Ln=he(["\n  font-size: ","px;\n  line-height: ","px;\n  min-height: ","px;\n  padding: ","px ","px;\n  gap: ","px;\n\n  &:before {\n    max-height: ","px;\n  }\n"])),He[e],Ve[e],mn(e),fn[e].y,fn[e].x,B[1],mn(e))},_n=pe(pe(pe(pe({},Le.XSmall,d(On||(On=he(["\n    min-width: ","px;\n  "])),B[3])),Le.Small,d(Dn||(Dn=he(["\n    min-width: ","px;\n  "])),B[3])),Le.Default,d(Mn||(Mn=he(["\n    min-width: ","px;\n  "])),B[3])),Le.Large,d(jn||(jn=he(["\n    min-width: ","px;\n  "])),B[4])),er=d(In||(In=he(["\n  pointer-events: none;\n  gap: 0;\n\n  label {\n    gap: 0;\n    align-items: center;\n  }\n"])));d(zn||(zn=he(["\n  pointer-events: none;\n"])));var nr=function(e){return d(Pn||(Pn=he(["\n  font-weight: ",";\n"])),e?U.bold:U.regular)},rr=pe(pe({},A.Light,d(Fn||(Fn=he(["\n    color: ",";\n  "])),_.gray.dark1)),A.Dark,d(An||(An=he(["\n    color: ",";\n  "])),_.gray.base)),tr=pe(pe({},A.Light,d(Tn||(Tn=he(["\n    color: ",";\n  "])),_.blue.dark1)),A.Dark,d(Wn||(Wn=he(["\n    color: ",";\n  "])),_.blue.light3)),ar=pe(pe({},A.Light,d(Xn||(Xn=he(["\n    color: ",";\n  "])),_.gray.light1)),A.Dark,d(Rn||(Rn=he(["\n    color: ",";\n  "])),_.gray.dark1)),lr=pe(pe({},A.Light,d(Gn||(Gn=he(["\n    color: ",";\n  "])),_.blue.base)),A.Dark,d(Vn||(Vn=he(["\n    color: ",";\n  "])),_.blue.light1)),or=pe(pe({},A.Light,d(Hn||(Hn=he(["\n    color: ",";\n  "])),_.gray.light1)),A.Dark,d(qn||(qn=he(["\n    color: ",";\n  "])),_.gray.dark1)),ir=d(Zn||(Zn=he(["\n  ."," {\n    align-self: baseline;\n  }\n"])),re),cr=d(Kn||(Kn=he(["\n  ."," {\n    height: 28px;\n  }\n"])),re),sr=["glyph","isSelected","displayName","isFocused","setSelected","className","description","value","onClick","disabled"],ur=e.forwardRef((function(n,t){var o=n.glyph,i=n.isSelected,c=n.displayName,s=n.isFocused,u=n.setSelected,d=n.className,f=n.description,g=n.value,b=n.onClick,v=n.disabled,y=void 0!==v&&v,x=me(n,sr),k=z(),w=k.darkMode,E=k.theme,S=r(Re),L=S.multiselect,O=S.size,D=S.withIcons,M=S.inputValue,j=C(t,null),I=N({prefix:"combobox-option-text"}),P=l((function(e){e.stopPropagation(),y||(u(),null==b||b(e,g))}),[y,b,u,g]),F=a((function(){return function(n){var r=n.withIcons,t=n.isSelected,a=n.glyph,l=n.optionTextId,o=n.disabled,i=n.darkMode,c=n.size,s=n.multiselect,u=n.theme,d=n.isFocused;a&&!h(a)&&console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",a);var f=a&&h(a)?e.cloneElement(a,se(se({},a.props),{},{className:p(rr[u],pe(pe({},tr[u],d),ar[u],o),a.props.className)})):e.createElement(e.Fragment,null),g=e.createElement(ie,{"aria-labelledby":l,checked:t,tabIndex:-1,disabled:o,darkMode:i,className:er}),b=e.createElement(m,{glyph:"Checkmark",className:p(_n[c],lr[u],pe({},or[u],o))});return{leftGlyph:s?r?f:g:r?f:t?b:null,rightGlyph:s?r&&g:r&&t&&b}}({withIcons:D,isSelected:i,glyph:o,theme:E,darkMode:w,size:O,disabled:y,multiselect:L,optionTextId:I,isFocused:s})}),[w,y,o,i,L,I,O,E,D,s]),A=F.leftGlyph,T=F.rightGlyph,W=L&&!D;return e.createElement(te,fe({},x,{as:"li",ref:j,highlighted:s,disabled:y,"aria-label":c,darkMode:w,className:p(Qn(O),pe(pe({},ir,W),cr,W&&O===Le.Large),d),onClick:P,onKeyDown:P}),e.createElement(ae,{leftGlyph:A,rightGlyph:T,description:f},e.createElement("span",{id:I,className:nr(i)},function(n,r,t){if(r&&t){var a=oe(r),l=new RegExp(a,"gi"),o=n.matchAll(l);if(o){for(var i=n.split(""),c=0,s=Array.from(o);c<s.length;c++){var u,d=s[c],p=null!==(u=d.index)&&void 0!==u?u:-1,f=d[0],m=f.length,h=p+f+m,g=new Array(m).fill("");g[0]=e.createElement(t,{key:h},f),i.splice.apply(i,[p,m].concat(be(g)))}return e.createElement(e.Fragment,null,i)}return e.createElement(e.Fragment,null,n)}return e.createElement(e.Fragment,null,n)}(c,M,"strong"))))}));function dr(e){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}ur.displayName="ComboboxOption",dr.displayName="ComboboxOption",dr.propTypes={displayName:E.string,value:E.string,glyph:E.node,disabled:E.bool,className:E.string,description:E.string,onClick:E.func};var pr,fr,mr,hr,gr,br,vr,yr,xr,kr,wr,Er,Cr,Nr,Sr,Lr,Or,Dr,Mr,jr,Ir,zr,Pr,Fr,Ar,Tr,Wr,Xr,Rr,Gr,Vr,Hr,qr,Zr,Kr,Yr,Br=function(e){return!w(e)&&!x(e)&&(k(e)||v(e)&&e.length>0)},Ur=function(e){return Ve[e]+2*qe[e]},Jr=pe(pe(pe(pe({},Le.XSmall,22),Le.Small,28),Le.Default,36),Le.Large,48),$r=function(e){return(Jr[e]-Ur(e)-2)/2},Qr=pe(pe(pe(pe({},Le.XSmall,{y:$r(Le.XSmall),xLeftWithChip:1,xLeftWithoutChip:10,xRight:4}),Le.Small,{y:$r(Le.Small),xLeftWithChip:4,xLeftWithoutChip:10,xRight:8}),Le.Default,{y:$r(Le.Default),xLeftWithChip:6,xLeftWithoutChip:12,xRight:12}),Le.Large,{y:$r(Le.Large),xLeftWithChip:B[2]-1,xLeftWithoutChip:B[2]-1,xRight:B[2]-1}),_r=B[3],et=function(e){return d(pr||(pr=he(["\n    font-family: ",";\n    width: 100%;\n    min-width: ","px;\n  "])),J.default,He[e]+2*Qr[e].xLeftWithChip+_r+2)},nt=d(fr||(fr=he(["\n  display: flex;\n  align-items: center;\n  gap: ","px;\n  cursor: text;\n  transition: ","ms ease-in-out;\n  transition-property: background-color, box-shadow, border-color;\n  border: 1px solid;\n  width: 100%;\n  max-width: 100%;\n  border-radius: 6px;\n  position: relative;\n  overflow: hidden;\n\n  // Overflow shadow\n  ::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 20px;\n    bottom: -21px;\n    left: 50%;\n    translate: -50% 0%;\n    border-radius: 20%;\n    box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);\n    transition: ","ms linear;\n    transition-property: box-shadow;\n  }\n"])),B[2],$.default,$.default),rt=pe(pe({},A.Light,d(mr||(mr=he(["\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),_.gray.dark3,_.white,_.gray.base)),A.Dark,d(hr||(hr=he(["\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),_.gray.light2,_.gray.dark4,_.gray.base)),tt=function(e,n){return d(gr||(gr=he(["\n  padding-top: ","px;\n  padding-bottom: ","px;\n  padding-left: ",";\n  padding-right: ","px;\n"])),Qr[e].y,Qr[e].y,"".concat(n?Qr[e].xLeftWithChip:Qr[e].xLeftWithoutChip,"px"),Qr[e].xRight)},at=pe(pe({},A.Light,d(br||(br=he(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),_.gray.dark1,_.gray.light2,_.gray.light1)),A.Dark,d(vr||(vr=he(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: ",";\n    border-color: ",";\n  "])),_.gray.dark1,_.gray.dark3,_.gray.dark2)),lt=pe(pe({},A.Light,d(yr||(yr=he(["\n    border-color: ",";\n  "])),_.red.base)),A.Dark,d(xr||(xr=he(["\n    border-color: ",";\n  "])),_.red.light1)),ot=pe(pe({},A.Light,d(kr||(kr=he(["\n    &:focus-within {\n      border-color: transparent;\n      box-shadow: ",";\n    }\n  "])),Q[A.Light].input)),A.Dark,d(wr||(wr=he(["\n    &:focus-within {\n      border-color: transparent;\n      box-shadow: ",";\n    }\n  "])),Q[A.Dark].input)),it=d(Er||(Er=he(["\n  display: flex;\n  align-items: center;\n"]))),ct=pe(pe(pe(pe({},Le.XSmall,d(Cr||(Cr=he(["\n    gap: ","px;\n  "])),B[1])),Le.Small,d(Nr||(Nr=he(["\n    gap: ","px;\n  "])),B[2])),Le.Default,d(Sr||(Sr=he(["\n    gap: ","px;\n  "])),B[2])),Le.Large,d(Lr||(Lr=he(["\n    gap: ","px;\n  "])),B[2])),st=function(e){var n=e.overflow,r=e.size,t=d(Or||(Or=he(["\n    flex-grow: 1;\n    width: 100%;\n  "])));switch(n){case Oe.scrollX:return d(Dr||(Dr=he(["\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,Ur(r),Ge);case Oe.expandY:return d(Mr||(Mr=he(["\n        ","\n        display: flex;\n        flex-wrap: wrap;\n        gap: ","px;\n        overflow-x: hidden;\n        min-height: ","px;\n        max-height: calc((","px) + (","px * 2));\n      "])),t,4,Ur(r),3*Ur(r),4)}},ut=d(jr||(jr=he(["\n  font-family: ",";\n  width: 100%;\n  border: none;\n  cursor: inherit;\n  background-color: inherit;\n  color: inherit;\n  box-sizing: content-box;\n  padding: 0;\n  margin: 0;\n  text-overflow: ellipsis;\n  vertical-align: top;\n\n  // Only add padding if there are chips\n  &:not(:first-child) {\n    padding-left: ","px;\n  }\n\n  &:placeholder-shown {\n    min-width: 100%;\n  }\n  &:focus {\n    outline: none;\n  }\n"])),J.default,B[1]),dt=pe(pe({},A.Light,d(Ir||(Ir=he(["\n    &::placeholder {\n      color: ",";\n    }\n  "])),_.gray.dark1)),A.Dark,d(zr||(zr=he(["\n    &::placeholder {\n      color: ",";\n    }\n  "])),_.gray.light1)),pt=pe(pe({},A.Light,d(Pr||(Pr=he(["\n    &::placeholder {\n      color: ",";\n    }\n  "])),_.gray.dark1)),A.Dark,d(Fr||(Fr=he(["\n    &::placeholder {\n      color: ",";\n    }\n  "])),_.gray.dark1)),ft=function(e){return d(Ar||(Ar=he(["\n  height: ","px;\n  font-size: ","px;\n  line-height: ","px;\n  min-width: ","px;\n"])),Ur(e),He[e],Ve[e],He[e])},mt=function(e){return d(Tr||(Tr=he(["\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")},ht=function(e,n){var r,t=null!==(r=null==n?void 0:n.length)&&void 0!==r?r:0;return d(Wr||(Wr=he(["\n    width: ","px;\n    max-width: 100%;\n  "])),t*He[e])},gt=d(Xr||(Xr=he(["\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"])),_r/2),bt=d(Rr||(Rr=he(["\n  height: ","px;\n  width: ","px;\n"])),_r,_r),vt=pe(pe({},A.Light,d(Gr||(Gr=he(["\n    color: ",";\n  "])),_.red.base)),A.Dark,d(Vr||(Vr=he(["\n    color: ",";\n  "])),_.red.light1)),yt=function(e){return d(Hr||(Hr=he(["\n  font-size: ","px;\n  line-height: ","px;\n  padding-top: ","px;\n"])),He[e],Ve[e],Qr[e].y)},xt=d(qr||(qr=he(["\n  margin-bottom: ","px;\n  display: flex;\n  flex-direction: column;\n"])),B[1]),kt=d(Zr||(Zr=he(["\n  font-size: ","px;\n  line-height: ","px;\n"])),Y.large.fontSize,Y.large.lineHeight),wt=pe(pe({},A.Light,d(Kr||(Kr=he(["\n    ::after {\n      box-shadow: 0px 0px 7px 5px ",";\n    }\n  "])),ne(.85,_.black))),A.Dark,d(Yr||(Yr=he(["\n    ::after {\n      width: 95%;\n      box-shadow: 0px -7px 12px 5px rgb(0 0 0 / 50%);\n    }\n  "])))),Et=pe(pe({},A.Light,_.red.base),A.Dark,_.red.light1),Ct=pe(pe({},A.Light,_.gray.dark2),A.Dark,_.gray.light1),Nt=pe(pe({},A.Light,_.gray.base),A.Dark,_.gray.dark1),St=["children","label","description","placeholder","aria-label","disabled","size","darkMode","state","errorMessage","searchState","searchEmptyMessage","searchErrorMessage","searchLoadingMessage","filteredOptions","onFilter","clearable","onClear","overflow","multiselect","initialValue","inputValue","onInputChange","onChange","value","chipTruncationLocation","chipCharacterLimit","className","usePortal","portalClassName","portalContainer","scrollContainer","popoverZIndex"],Lt=["className","glyph","disabled"];function Ot(n){var r=n.children,c=n.label,s=n.description,u=n.placeholder,d=void 0===u?"Select":u,f=n["aria-label"],h=n.disabled,E=void 0!==h&&h,C=n.size,S=void 0===C?Le.Default:C,P=n.darkMode,A=n.state,X=void 0===A?"none":A,V=n.errorMessage,H=n.searchState,q=void 0===H?"unset":H,Z=n.searchEmptyMessage,K=void 0===Z?"No results found":Z,Y=n.searchErrorMessage,B=void 0===Y?"Could not get results!":Y,U=n.searchLoadingMessage,J=void 0===U?"Loading results...":U,$=n.filteredOptions,Q=n.onFilter,_=n.clearable,ee=void 0===_||_,ne=n.onClear,re=n.overflow,te=void 0===re?Oe.expandY:re,ae=n.multiselect,le=void 0!==ae&&ae,oe=n.initialValue,ie=n.inputValue,ce=n.onInputChange,ue=n.onChange,he=n.value,be=n.chipTruncationLocation,ve=n.chipCharacterLimit,ye=void 0===ve?12:ve,Me=n.className,je=n.usePortal,Ie=void 0===je||je,ze=n.portalClassName,Pe=n.portalContainer,Fe=n.scrollContainer,Ae=n.popoverZIndex,Te=me(n,St),We=z(P),Xe=We.darkMode,Ge=We.theme,Ve=L({prefix:"option"}),He=L({prefix:"chip"}),qe=N({prefix:"combobox-input"}),Ze=N({prefix:"combobox-label"}),Ye=N({prefix:"combobox-menu"}),Be=o(null),Ue=o(null),Je=o(null),$e=o(null),Qe=o(null),_e=ge(i(!1),2),en=_e[0],nn=_e[1],rn=O(en),tn=ge(i(null),2),an=tn[0],ln=tn[1],on=ge(i(null),2),cn=on[0],sn=on[1],dn=O(cn),pn=ge(i(null!=ie?ie:""),2),fn=pn[0],mn=pn[1];t((function(){w(ie)||mn(ie)}),[ie]);var hn=function(e){mn(e)},gn=O(fn),bn=ge(i(null),2),vn=bn[0],yn=bn[1],xn=ge(i(!1),2),kn=xn[0],wn=xn[1],En=le&&v(cn)&&cn.length>0?void 0:d,Cn=function(){return nn(!1)},Nn=function(){return nn(!0)},Ln=a((function(){return Un(r)}),[r]),On=l((function(e){return!le||"string"!=typeof e&&"number"!=typeof e?!le&&v(e)&&W.error("Error in Combobox: multiselect is set to `false`, but received an Array value"):W.error("Error in Combobox: multiselect is set to `true`, but received a ".concat(de(e),' value: "').concat(e,'"')),le&&v(e)}),[le]),Dn=l((function(e){!E&&$e&&$e.current&&($e.current.focus(),w(e)||$e.current.setSelectionRange(e,e))}),[E]),Mn=l((function(e){if(On(cn)){var n=g(cn),r=ue,t={diffType:"delete",value:null!=e?e:cn};x(e)?n.length=0:cn.includes(e)?n.splice(n.indexOf(e),1):(n.push(e),t.diffType="insert",hn("")),sn(n),null==r||r(n,t)}else{var a=e,l=ue;sn(a),null==l||l(a)}}),[On,ue,cn]),jn=l((function(e){var n,r,t,a;return function(e,n){return Array.isArray(n)?n.includes(e):e===n}((r=Ln,(n=e)?null!==(t=null===(a=r.find((function(e){return e.displayName===n})))||void 0===a?void 0:a.value)&&void 0!==t?t:n:""),cn)}),[Ln,cn]),In=l((function(e){var n="string"==typeof e?e:e.value;return $&&$.length>0?$.includes(n):!!jn(fn)||("string"==typeof e?$n(n,Ln):e.displayName).toLowerCase().includes(fn.toLowerCase())}),[$,jn,fn,Ln]),zn=a((function(){return Ln.filter(In)}),[Ln,In]),Pn=l((function(e){return!!e&&!!Ln.find((function(n){return n.value===e}))}),[Ln]),Fn=l((function(e){return zn?zn.findIndex((function(n){return n.value===e})):-1}),[zn]),An=l((function(e){if(zn&&zn.length>=e){var n=zn[e];return n?n.value:void 0}}),[zn]),Tn=l((function(){return On(cn)?cn.findIndex((function(e){var n;return null===(n=He(e))||void 0===n||null===(n=n.current)||void 0===n?void 0:n.contains(document.activeElement)})):-1}),[He,On,cn]),Wn=ge(i(),2),Xn=Wn[0],Rn=Wn[1],Gn=l((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,a=Fn(an);switch(e&&en&&(yn(null),Dn()),e){case"next":var l=An(a+1<r?a+1:0);ln(null!=l?l:null);break;case"prev":var o=An(a-1>=0?a-1:t);ln(null!=o?o:null);break;case"last":var i=An(t);ln(null!=i?i:null);break;default:var c=An(0);ln(null!=c?c:null)}}),[an,Fn,An,en,Dn,null==zn?void 0:zn.length]),Vn=l((function(e,n){if(On(cn))switch(e){case"next":var r=null!=n?n:Tn(),t=r+1<cn.length?r+1:cn.length-1,a=cn[t];yn(a);break;case"prev":var l=null!=n?n:Tn(),o=l>0?l-1:l<0?cn.length-1:0,i=cn[o];yn(i);break;case"first":var c=cn[0];yn(c);break;case"last":var s=cn[cn.length-1];yn(s);break;default:yn(null)}}),[Tn,On,cn]),Hn=l((function(e,n){switch(e&&ln(null),e){case"right":switch(Xn){case xe:var r,t,a;if((null===(r=$e.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=$e.current)||void 0===t?void 0:t.value.length))null===(a=Ue.current)||void 0===a||a.focus();break;case we:case Ce:case Ee:if(Xn===Ee||1===(null==cn?void 0:cn.length)){Dn(0),Vn(null),n.preventDefault();break}Vn("next")}break;case"left":switch(Xn){case ke:var l;n.preventDefault(),Dn(null==$e||null===(l=$e.current)||void 0===l?void 0:l.value.length);break;case xe:case Ce:case Ee:if(On(cn)){var o;if(Xn===xe&&0!==(null===(o=$e.current)||void 0===o?void 0:o.selectionStart))break;Vn("prev")}}break;default:Vn(null)}}),[Xn,On,cn,Dn,Vn]);t((function(){fn!==gn&&Gn("first")}),[fn,en,gn,Gn]),D(an?Ve(an):void 0,Qe);var qn=l((function(n){if(T(n,"ComboboxOption")){var r=Bn(n.props),t=r.value,a=r.displayName;if(In(t)){var l=n.props,o=l.className,i=l.glyph,c=l.disabled,s=me(l,Lt),u=Ln.findIndex((function(e){return e.value===t})),d=an===t,p=On(cn)?cn.includes(t):cn===t,f=Ve(t);return e.createElement(ur,fe({},s,{value:t,displayName:a,isFocused:d,isSelected:p,disabled:c,setSelected:function(){ln(t),Mn(t),Dn(),t===cn&&Cn()},glyph:i,className:o,index:u,ref:f}))}}else if(T(n,"ComboboxGroup")){var m=e.Children.map(n.props.children,qn);if(m&&(null==m?void 0:m.length)>0)return e.createElement(un,{label:n.props.label,className:n.props.className},e.Children.map(m,qn))}}),[Ln,Ve,an,On,cn,Dn,In,Mn]),Zn=a((function(){return e.Children.map(r,qn)}),[r,qn]),Kn=a((function(){if(On(cn))return cn.filter(Pn).map((function(n,r){var t=$n(n,Ln),a=vn===n,l=He(n),o=r>=cn.length-1;return e.createElement(Ke,{key:n,displayName:t,isFocused:a,onRemove:function(){o?(Dn(),Vn(null)):Vn("next",r),Mn(n)},onFocus:function(){yn(n)},ref:l})}))}),[On,cn,Pn,Ln,vn,He,Mn,Dn,Vn]),Qn=a((function(){return Ln.some((function(e){return e.hasGlyph}))}),[Ln]),_n=l((function(){var e=zn.find((function(e){return e.displayName===fn||e.value===fn}));if(!he&&e)Mn(e.value);else if(!On(cn)){var n,r=null!==(n=$n(cn,Ln))&&void 0!==n?n:dn;hn(r)}}),[Ln,fn,On,dn,cn,Mn,he,zn]),er=l((function(){if(Br(cn)){if(On(cn))sr(te);else if(!On(cn)){var e,n=null!==(e=$n(cn,Ln))&&void 0!==e?e:"";hn(n),Cn()}}else hn("")}),[Ln,On,cn,te]);t((function(){if(oe)if(v(oe)){var e,n=null!==(e=oe.filter((function(e){return Pn(e)})))&&void 0!==e?e:[];sn(n)}else Pn(oe)&&sn(oe);else sn(function(e){return e?[]:null}(le))}),[]),t((function(){if(!w(he)&&he!==gn)if(x(he))sn(null);else if(On(he)){var e=he.filter(Pn);sn(e)}else sn(Pn(he)?he:null)}),[On,Pn,gn,he]),t((function(){!w(dn)&&(v(cn)&&!x(dn)||k(cn)||x(cn))&&!y(cn,dn)&&er()}),[er,dn,cn]),t((function(){!en&&rn&&_n()}),[en,rn,_n]);var nr=ge(i(0),2),rr=nr[0],tr=nr[1];t((function(){var e,n;tr(null!==(e=null===(n=Be.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)}),[Be,en,an,cn]);M(Cn,[Qe,Be],en);var ar=On(cn)&&!!cn.length,lr=b((function(e){wn(Yn(e.target))}),50,{leading:!0}),or=l((function(e){te===Oe.expandY&&lr(e)}),[lr,te]);t((function(){Je.current&&wn(Yn(Je.current))}),[]);var ir,cr=se({popoverZIndex:Ae},Ie?{usePortal:Ie,portalClassName:ze,portalContainer:Pe,scrollContainer:Fe}:{usePortal:Ie});return e.createElement(I,{darkMode:Xe},e.createElement(Re.Provider,{value:{multiselect:le,size:S,withIcons:Qn,disabled:E,isOpen:en,state:X,searchState:q,chipTruncationLocation:be,chipCharacterLimit:ye,inputValue:fn,overflow:te,popoverZIndex:Ae}},e.createElement("div",fe({className:p(et(S),Me)},Te),(c||s)&&e.createElement("div",{className:xt},c&&e.createElement(R,{id:Ze,htmlFor:qe,darkMode:Xe,disabled:E,className:p(pe({},kt,S===Le.Large))},c),s&&e.createElement(G,{darkMode:Xe,disabled:E,className:p(pe({},kt,S===Le.Large))},s)),e.createElement("div",{ref:Be,role:"combobox","aria-expanded":en,"aria-controls":Ye,"aria-owns":Ye,tabIndex:-1,onMouseDown:function(e){E&&e.preventDefault()},onClick:function(e){if(e.target!==$e.current){var n=0;if($e.current)n=e.nativeEvent.offsetX>$e.current.offsetLeft+$e.current.clientWidth?fn.length:0;Dn(n)}Nn()},onFocus:function(e){sr(te),Rn(function(e){var n,r,t,a;if(!e)return;if(null!==(n=$e.current)&&void 0!==n&&n.contains(e))return xe;if(null!==(r=Ue.current)&&void 0!==r&&r.contains(e))return ke;var l=On(cn)?cn.findIndex((function(n){var r;return null===(r=He(n))||void 0===r||null===(r=r.current)||void 0===r?void 0:r.contains(e)})):-1;if(On(cn)){if(0===l)return we;if(l===cn.length-1)return Ee;if(l>0)return Ce}if(null!==(t=Qe.current)&&void 0!==t&&t.contains(e))return Se;if(null!==(a=Be.current)&&void 0!==a&&a.contains(e))return Ne}(e.target))},onKeyDown:function(e){var n,r,t=null===(n=Qe.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(r=Be.current)||void 0===r?void 0:r.contains(document.activeElement))||t){if(e.ctrlKey||e.shiftKey||e.altKey)return;switch(e.key){case F.Tab:switch(Xn){case"Input":Br(cn)||(Cn(),Gn("first"),Vn(null));break;case"LastChip":Vn(null)}break;case F.Escape:Cn(),Gn("first");break;case F.Enter:en?!en||Xn!==xe||x(an)||function(e){if("string"==typeof e){var n=Jn(e,Ln);return!(null==n||!n.isDisabled)}return!!e.isDisabled}(an)?Xn===ke&&(Mn(null),Dn()):Mn(an):Nn();break;case F.Backspace:var a;if(On(cn))"Input"===Xn&&0===(null===(a=$e.current)||void 0===a?void 0:a.selectionStart)&&Vn("last");Nn();break;case F.ArrowDown:en?(e.preventDefault(),Gn("next")):Nn();break;case F.ArrowUp:en?(e.preventDefault(),Gn("prev")):Nn();break;case F.ArrowRight:Hn("right",e);break;case F.ArrowLeft:Hn("left",e);break;default:en||Nn()}}},onTransitionEnd:function(){var e,n;tr(null!==(e=null===(n=Be.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)},className:p(nt,rt[Ge],tt(S,ar),pe(pe(pe(pe({},at[Ge],E),lt[Ge],X===De.error),ot[Ge],(ir=xe,ir===Xn)),wt[Ge],kn))},e.createElement("div",{onScroll:or,ref:Je,className:st({size:S,overflow:te})},Kn,e.createElement("input",{"aria-label":null!=f?f:c,"aria-autocomplete":"list","aria-controls":Ye,"aria-labelledby":Ze,ref:$e,id:qe,className:p(ut,ft(S),dt[Ge],mt(en),pe(pe({},ht(S,fn),On(cn)),pt[Ge],E)),placeholder:En,disabled:null!=E?E:void 0,onChange:function(e){hn(e.target.value),null==Q||Q(e.target.value),null==ce||ce(e)},value:fn,autoComplete:"off"})),e.createElement("div",{className:p(it,ct[S])},"error"===X&&e.createElement(m,{glyph:"Warning",fill:Et[Ge],className:bt}),ee&&Br(cn)&&!E&&e.createElement(j,{"aria-label":"Clear selection","aria-disabled":E,disabled:E,ref:Ue,onClick:function(e){E||(e.stopPropagation(),Mn(null),null==ne||ne(e),null==Q||Q(""),Dn())},onFocus:function(){ln(null)},className:p(gt),darkMode:Xe},e.createElement(m,{glyph:"XWithCircle"})),e.createElement(m,{glyph:"CaretDown",className:bt,fill:p(pe(pe({},Ct[Ge],!E),Nt[Ge],E))}))),"error"===X&&V&&e.createElement("div",{className:p(vt[Ge],yt(S))},V),e.createElement(Sn,fe({id:Ye,labelId:Ze,refEl:Be,ref:Qe,menuWidth:rr,searchLoadingMessage:J,searchErrorMessage:B,searchEmptyMessage:K},cr),Zn))));function sr(e){Je&&Je.current&&(e===Oe.scrollX&&(Je.current.scrollLeft=Je.current.scrollWidth),e===Oe.expandY&&(Je.current.scrollTop=Je.current.scrollHeight))}}Ot.propTypes={multiselect:E.bool,value:E.oneOfType([E.string,E.arrayOf(E.string)]),initialValue:E.oneOfType([E.string,E.arrayOf(E.string)]),overflow:E.oneOf(Object.values(Oe)),darkMode:E.bool,label:E.string,"aria-label":E.string,children:E.node,onChange:E.func,chipCharacterLimit:E.number,chipTruncationLocation:E.oneOf(Object.values(H)),onClear:E.func,onFilter:E.func,clearable:E.bool,searchLoadingMessage:E.string,searchErrorMessage:E.string,searchEmptyMessage:E.string,searchState:E.oneOf(Object.values(Me)),errorMessage:E.string,state:E.oneOf(Object.values(De)),size:E.oneOf(Object.values(Le)),disabled:E.bool,description:E.string,placeholder:E.string,filteredOptions:E.arrayOf(E.string),popoverZIndex:E.number,usePortal:E.bool,scrollContainer:E.elementType,portalContainer:E.elementType,portalClassName:E.string};var Dt,Mt=d(Dt||(Dt=he(["\n  width: 256px;\n  padding-block: 64px;\n  display: flex;\n"]))),jt=["apple","banana"],It={title:"Components/Combobox",component:Ot,decorators:[function(n){return e.createElement("div",{className:Mt},e.createElement(n,null))}],parameters:{default:"LiveExample",controls:{exclude:[].concat(be(s),["as","filteredOptions","initialValue","setError","value","children"])},generate:{storyNames:["SingleSelect","MultiSelect","DisabledInput"],combineArgs:{darkMode:[!1,!0],clearable:[!0,!1],description:[void 0,"Please pick fruit(s)"],label:[void 0,"Choose a fruit"],state:Object.values(De),size:Object.values(Le)},excludeCombinations:[["description",{label:void 0}],{clearable:!1,value:void 0},{multiselect:!0,value:"apple"},{multiselect:!1,value:jt}]}},args:{label:"Choose a fruit",description:"Please pick fruit(s)",placeholder:"Select fruit",multiselect:!1,darkMode:!1,disabled:!1,clearable:!0,errorMessage:"No Pomegranates!",children:function(){var n=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];return[e.createElement(dr,{key:"apple",value:"apple",displayName:"Apple","data-testid":"test-id",description:"Do I keep the doctor away?",onClick:function(e,n){return console.log(e,n)},className:"className"}),e.createElement(dr,{key:"banana",value:"banana",displayName:"Banana"}),e.createElement(dr,{key:"carrot",value:"carrot",displayName:"Carrot",disabled:!0}),e.createElement(dr,{key:"pomegranate",value:"pomegranate",displayName:"Pomegranate",glyph:n?e.createElement(m,{glyph:"Warning"}):void 0,description:"Watch out, I stain everything I touch LOL",disabled:!0}),e.createElement(dr,{key:"plantain",value:"plantain",displayName:"Plantain",glyph:n?e.createElement(m,{glyph:"Connect"}):void 0,description:"Don't confuse me with a banana",onClick:function(){return console.log("I was clicked")}}),e.createElement(dr,{key:"paragraph",value:"paragraph",displayName:"Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper."}),e.createElement(dr,{key:"hash",value:"hash",displayName:"5f4dcc3b5aa765d61d8327deb882cf995f4dcc3b5aa765d61d8327deb882cf99"}),e.createElement(dr,{key:"dragonfruit",value:"dragonfruit",displayName:"Dragonfruit",description:"Rawr"}),e.createElement(dr,{key:"eggplant",value:"eggplant",displayName:"Eggplant"}),e.createElement(dr,{key:"fig",value:"fig",displayName:"Fig"}),e.createElement(dr,{key:"grape",value:"grape",displayName:"Grape"}),e.createElement(dr,{key:"honeydew",value:"honeydew",displayName:"Honeydew"}),e.createElement(dr,{key:"iceberg-lettuce",value:"iceberg-lettuce",displayName:"Iceberg lettuce"}),e.createElement(dn,{key:"peppers",label:"Peppers"},e.createElement(dr,{key:"cayenne",value:"cayenne",displayName:"Cayenne"}),e.createElement(dr,{key:"ghost-pepper",value:"ghost-pepper",displayName:"Ghost pepper"}),e.createElement(dr,{key:"habanero",value:"habanero",displayName:"Habanero"}),e.createElement(dr,{key:"jalapeno",value:"jalapeno",displayName:"Jalapeño"}),e.createElement(dr,{key:"red-pepper",value:"red-pepper",displayName:"Red pepper"}),e.createElement(dr,{key:"scotch-bonnet",value:"scotch-bonnet",displayName:"Scotch bonnet",description:"Don't touch your eyes"}))]}()},argTypes:{darkMode:c.darkMode,multiselect:{control:"boolean"},disabled:{control:"boolean"},clearable:{control:"boolean"},label:{control:"text"},description:{control:"text"},placeholder:{control:"text"},inputValue:{control:"text"},size:{options:Object.values(Le),control:"select"},state:{options:Object.values(De),control:"select"},errorMessage:{control:"text"},searchEmptyMessage:{control:"text"},searchState:{options:Object.values(Me),control:"select"},searchErrorMessage:{control:"text",if:{arg:"searchState",eq:Me.error}},searchLoadingMessage:{control:"text",if:{arg:"searchState",eq:Me.loading}},chipTruncationLocation:{options:Object.values(H),control:"select",if:{arg:"multiselect"}},chipCharacterLimit:{control:"number",if:{arg:"multiselect"}},overflow:{options:Object.values(Oe),control:"select",if:{arg:"multiselect"}}}},zt=function(n){return e.createElement(e.Fragment,null,n.multiselect?e.createElement(Ot,fe({key:"multi"},n,{multiselect:!0})):e.createElement(Ot,fe({key:"single"},n,{multiselect:!1})))};zt.parameters={chromatic:{disableSnapshot:!0}};var Pt=function(){var n=ge(i(null),2),r=n[0],t=n[1];return e.createElement("div",null,e.createElement(Ot,{multiselect:!1,label:"Choose a fruit",description:"Please pick one",placeholder:"Select fruit",onChange:function(e){t(e)},value:r},e.createElement(dr,{value:"apple"}),e.createElement(dr,{value:"banana"}),e.createElement(dr,{value:"carrot"})),e.createElement(u,{onClick:function(){return t("carrot")}},"Select Carrot"))};Pt.parameters={chromatic:{disableSnapshot:!0}};var Ft=function(){var n=["apple","banana","carrot","dragonfruit","eggplant","fig","grape","honeydew","iceberg-lettuce","jalapeño"],r=ge(i(["carrot","grape"]),2),t=r[0],a=r[1];return e.createElement(Ot,{label:"Choose some fruit",placeholder:"Select fruit",initialValue:["apple","fig","raspberry"],multiselect:!0,overflow:"expand-y",onFilter:function(e){a(n.filter((function(n){return n.includes(e)})))},filteredOptions:t},n.map((function(n){return e.createElement(dr,{key:n,value:n})})))};Ft.parameters={chromatic:{disableSnapshot:!0}};var At=function(){return e.createElement(e.Fragment,null)};At.args={multiselect:!1},At.parameters={generate:{combineArgs:{value:[void 0,"apple"]}}};var Tt=function(){return e.createElement(e.Fragment,null)};Tt.args={multiselect:!0},Tt.parameters={generate:{combineArgs:{value:[void 0,jt]}}};var Wt=function(){return e.createElement(e.Fragment,null)};Wt.args={disabled:!0},Wt.parameters={generate:{combineArgs:{darkMode:[!0,!1]}}};export{Pt as ControlledSingleSelect,Wt as DisabledInput,Ft as ExternalFilter,zt as LiveExample,Tt as MultiSelect,At as SingleSelect,It as default};
+import e,{createContext as n,useContext as r,useEffect as t,useMemo as a,useCallback as l,useRef as o,useState as i}from"react";import{storybookArgTypes as c,storybookExcludedControlParams as s}from"@lg-tools/storybook-utils";import u from"@leafygreen-ui/button";import{css as d,cx as p,keyframes as f}from"@leafygreen-ui/emotion";import m,{isComponentGlyph as h}from"@leafygreen-ui/icon";import g from"lodash/clone";import b from"lodash/debounce";import v from"lodash/isArray";import y from"lodash/isEqual";import x from"lodash/isNull";import k from"lodash/isString";import w from"lodash/isUndefined";import E from"prop-types";import{FormFieldState as C,DEFAULT_MESSAGES as N,FormFieldFeedback as S}from"@leafygreen-ui/form-field";import{useForwardedRef as L,useIdAllocator as O,useAvailableSpace as D,useDynamicRefs as M,usePrevious as j,useAutoScroll as I,useBackdropClick as z}from"@leafygreen-ui/hooks";import P from"@leafygreen-ui/icon-button";import F,{useDarkMode as A}from"@leafygreen-ui/leafygreen-provider";import{createUniqueClassName as T,keyMap as W,Theme as X,isComponentType as R,consoleOnce as G}from"@leafygreen-ui/lib";import{Error as V,Label as H,Description as q}from"@leafygreen-ui/typography";import{chipTextClassName as Z,TruncationLocation as K,Chip as Y,BaseFontSize as B,Variant as U}from"@leafygreen-ui/chip";import{typeScales as J,spacing as $,fontWeights as Q,fontFamilies as _,transitionDuration as ee,color as ne,focusRing as re}from"@leafygreen-ui/tokens";import{palette as te}from"@leafygreen-ui/palette";import ae from"@leafygreen-ui/popover";import{transparentize as le}from"polished";import{leftGlyphClassName as oe,InputOption as ie,InputOptionContent as ce}from"@leafygreen-ui/input-option";import se from"lodash/kebabCase";import ue from"lodash/escapeRegExp";import de from"@leafygreen-ui/checkbox";function pe(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 fe(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?pe(Object(r),!0).forEach((function(n){ge(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):pe(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function me(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+""}function he(e){return he="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},he(e)}function ge(e,n,r){return(n=me(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function be(){return be=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},be.apply(this,arguments)}function ve(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},l=Object.keys(e);for(t=0;t<l.length;t++)r=l[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(t=0;t<l.length;t++)r=l[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function ye(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function xe(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,a,l,o,i=[],c=!0,s=!1;try{if(l=(r=r.call(e)).next,0===n);else for(;!(c=(t=l.call(r)).done)&&(i.push(t.value),i.length!==n);c=!0);}catch(e){s=!0,a=e}finally{try{if(!c&&null!=r.return&&(o=r.return(),Object(o)!==o))return}finally{if(s)throw a}}return i}}(e,n)||we(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 ke(e){return function(e){if(Array.isArray(e))return Ee(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||we(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 we(e,n){if(e){if("string"==typeof e)return Ee(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?Ee(e,n):void 0}}function Ee(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}var Ce="Input",Ne="ClearButton",Se="FirstChip",Le="LastChip",Oe="MiddleChip",De="Combobox",Me="Menu",je={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},Ie={expandY:"expand-y",scrollX:"scroll-x",expandX:"expand-x"},ze=C,Pe={Unset:"unset",Error:"error",Loading:"loading"};var Fe,Ae,Te,We,Xe,Re,Ge,Ve,He,qe=n({multiselect:!1,size:je.Default,withIcons:!1,disabled:!1,isOpen:!1,state:ze.None,searchState:Pe.Unset,overflow:Ie.expandY}),Ze=T("combobox-chip"),Ke=ge(ge(ge(ge({},je.XSmall,16),je.Small,J.body1.lineHeight),je.Default,J.body1.lineHeight),je.Large,J.body2.lineHeight),Ye=ge(ge(ge(ge({},je.XSmall,J.body1.fontSize),je.Small,J.body1.fontSize),je.Default,J.body1.fontSize),je.Large,J.body2.fontSize),Be=ge(ge(ge(ge({},je.XSmall,1),je.Small,0),je.Default,2),je.Large,4),Ue=ge(ge(ge(ge({},je.XSmall,d(Fe||(Fe=ye(["\n    font-size: ","px;\n    line-height: ","px;\n\n    ."," {\n      padding-block: ","px;\n    }\n  "])),Ye[je.XSmall],Ke[je.XSmall],Z,Be[je.XSmall])),je.Small,d(Ae||(Ae=ye(["\n    font-size: ","px;\n    line-height: ","px;\n\n    ."," {\n      padding-block: ","px;\n    }\n  "])),Ye[je.Small],Ke[je.Small],Z,Be[je.Small])),je.Default,d(Te||(Te=ye(["\n    font-size: ","px;\n    line-height: ","px;\n\n    ."," {\n      padding-block: ","px;\n    }\n  "])),Ye[je.Default],Ke[je.Default],Z,Be[je.Default])),je.Large,d(We||(We=ye(["\n    font-size: ","px;\n    line-height: ","px;\n\n    ."," {\n      padding-inline-end: 10px;\n      padding-block: ","px;\n    }\n  "])),Ye[je.Large],Ke[je.Large],Z,Be[je.Large])),Je=e.forwardRef((function(n,a){var l,o=n.displayName,i=n.isFocused,c=n.onRemove,s=n.onFocus,u=r(qe),d=u.size,f=u.disabled,m=u.overflow,h=u.chipTruncationLocation,g=void 0===h?K.End:h,b=u.chipCharacterLimit,v=void 0===b?12:b,y=u.popoverZIndex,x=m===Ie.scrollX?K.None:g,k=L(a,null),w=null===(l=k.current)||void 0===l?void 0:l.querySelector("button");t((function(){i&&!f&&(null==w||w.focus())}),[f,w,i]);return e.createElement(Y,{label:o,className:p(Ze,Ue[d]),role:"option","aria-selected":i,"data-testid":"lg-combobox-chip",onClick:function(e){null!=w&&w.contains(e.target)||s()},onKeyDown:function(e){f||e.key!==W.Delete&&e.key!==W.Backspace&&e.key!==W.Enter&&e.key!==W.Space||c()},onDismiss:function(){f||c()},baseFontSize:B.Body1,chipCharacterLimit:v,chipTruncationLocation:x,popoverZIndex:y,variant:U.Gray,ref:k,disabled:f,tabIndex:-1})}));Je.displayName="ComboboxChip";var $e,Qe,_e,en,nn,rn,tn,an,ln,on,cn,sn,un,dn=ge(ge({},X.Light,d(Xe||(Xe=ye(["\n    padding-top: ","px;\n  "])),$[2])),X.Dark,d(Re||(Re=ye(["\n    padding-top: ","px;\n  "])),$[2])),pn=d(Ge||(Ge=ye(["\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"])),Q.bold),fn=ge(ge({},X.Light,d(Ve||(Ve=ye(["\n    color: ",";\n  "])),te.gray.dark1)),X.Dark,d(He||(He=ye(["\n    color: ",";\n  "])),te.gray.light1));function mn(n){var r=n.label,t=n.className,a=n.children,l=A().theme,o=O({prefix:"combobox-group"});return e.Children.count(a)>0?e.createElement("div",{className:p(dn[l],t)},e.createElement("div",{className:p(pn,fn[l]),id:o},r),e.createElement("div",{role:"group","aria-labelledby":o},a)):e.createElement(e.Fragment,null)}function hn(e){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}hn.displayName="ComboboxGroup",hn.propTypes={className:E.string,children:E.node.isRequired,label:E.string.isRequired};var gn,bn=ge(ge(ge(ge({},je.XSmall,{x:12,y:8}),je.Small,{x:12,y:8}),je.Default,{x:12,y:8}),je.Large,{x:12,y:8}),vn=function(e){return Ke[e]+2*bn[e].y},yn=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:384;return d($e||($e=ye(["\n  width: ","px;\n  overflow: hidden;\n  border-radius: 12px;\n  border: 1px solid;\n"])),e)},xn=ge(ge({},X.Light,d(Qe||(Qe=ye(["\n    box-shadow: 0px 4px 7px ",";\n    border-color: ",";\n  "])),le(.85,te.black),te.gray.light2)),X.Dark,d(_e||(_e=ye(["\n    box-shadow: 0px 4px 7px ",";\n    border-color: ",";\n  "])),le(.85,te.black),te.gray.dark2)),kn=d(en||(en=ye(["\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),wn=ge(ge({},X.Light,d(nn||(nn=ye(["\n    color: ",";\n    background-color: ",";\n  "])),te.black,te.white)),X.Dark,d(rn||(rn=ye(["\n    color: ",";\n    background-color: ",";\n  "])),te.gray.light1,te.gray.dark3)),En=d(tn||(tn=ye(["\n  position: relative;\n  margin: 0;\n  padding: 0;\n"]))),Cn=d(an||(an=ye(["\n  font-family: inherit;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n"]))),Nn=ge(ge({},X.Light,d(ln||(ln=ye(["\n    color: ",";\n  "])),te.gray.dark3)),X.Dark,d(on||(on=ye(["\n    color: ",";\n  "])),te.gray.light3)),Sn=function(e){return d(cn||(cn=ye(["\n  font-size: ","px;\n  line-height: ","px;\n  padding: ","px ","px;\n"])),Ye[e],Ke[e],bn[e].y,bn[e].x)},Ln=f(sn||(sn=ye(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"]))),On=d(un||(un=ye(["\n  animation: "," 1.5s linear infinite;\n"])),Ln),Dn=["children","id","refEl","labelId","menuWidth","searchLoadingMessage","searchErrorMessage","searchEmptyMessage"],Mn=e.forwardRef((function(n,t){var l=n.children,o=n.id,i=n.refEl,c=n.labelId,s=n.menuWidth,u=n.searchLoadingMessage,f=n.searchErrorMessage,h=n.searchEmptyMessage,g=ve(n,Dn),b=A(),v=b.darkMode,y=b.theme,x=r(qe),k=x.disabled,E=x.size,C=x.isOpen,N=x.searchState,S=L(t,null),O=D(i),M=w(O)?"unset":"".concat(Math.min(O,256),"px"),j=a((function(){var n=p(Cn,Nn[y],Sn(E)),r=p(Cn,Sn(E));switch(N){case"loading":return e.createElement("span",{className:n},e.createElement(m,{glyph:"Refresh",color:v?te.blue.light1:te.blue.base,className:On}),u);case"error":return e.createElement(V,{className:r},e.createElement(m,{glyph:"Warning",color:v?te.red.light1:te.red.base}),e.createElement("span",null,f));default:return l&&"object"===he(l)&&"length"in l&&l.length>0?e.createElement("ul",{className:En},l):e.createElement("span",{className:n},h)}}),[y,E,N,v,u,f,l,h]);return e.createElement(ae,be({active:C&&!k,spacing:4,align:"bottom",justify:"middle",refEl:i,adjustOnMutation:!0,className:p(yn(s),xn[y])},g),e.createElement("div",{ref:S,id:o,role:"listbox","aria-labelledby":c,"aria-expanded":C,className:p(kn,wn[y],d(gn||(gn=ye(["\n              max-height: ",";\n            "])),M)),onMouseDownCapture:function(e){return e.preventDefault()}},j))}));Mn.displayName="ComboboxMenu";var jn,In,zn,Pn,Fn,An,Tn,Wn,Xn,Rn,Gn,Vn,Hn,qn,Zn,Kn,Yn,Bn,Un,Jn,$n=function(e){var n=e.scrollHeight;return e.scrollTop<n-e.clientHeight},Qn=function(e){var n,r=e.value,t=e.displayName;return{value:null!=r?r:se(t),displayName:null!==(n=null!=t?t:r)&&void 0!==n?n:""}},_n=function n(r){return e.Children.toArray(r).reduce((function(e,r){if(R(r,"ComboboxOption")){var t=Qn(r.props),a=t.value,l=t.displayName,o=r.props,i=o.glyph,c=o.disabled;return[].concat(ke(e),[{value:a,displayName:l,isDisabled:!!c,hasGlyph:!!i}])}if(R(r,"ComboboxGroup")){var s=r.props.children;if(s)return[].concat(ke(e),ke(n(s)))}}),[])},er=function(e,n){if(e)return n.find((function(n){return n.value===e}))},nr=function(e,n){var r,t;return e?null!==(r=null===(t=er(e,n))||void 0===t?void 0:t.displayName)&&void 0!==r?r:e:""},rr=function(e){return d(jn||(jn=ye(["\n  font-size: ","px;\n  line-height: ","px;\n  min-height: ","px;\n  padding: ","px ","px;\n  gap: ","px;\n\n  &:before {\n    max-height: ","px;\n  }\n"])),Ye[e],Ke[e],vn(e),bn[e].y,bn[e].x,$[1],vn(e))},tr=ge(ge(ge(ge({},je.XSmall,d(In||(In=ye(["\n    min-width: ","px;\n  "])),$[3])),je.Small,d(zn||(zn=ye(["\n    min-width: ","px;\n  "])),$[3])),je.Default,d(Pn||(Pn=ye(["\n    min-width: ","px;\n  "])),$[3])),je.Large,d(Fn||(Fn=ye(["\n    min-width: ","px;\n  "])),$[4])),ar=d(An||(An=ye(["\n  pointer-events: none;\n  gap: 0;\n\n  label {\n    gap: 0;\n    align-items: center;\n  }\n"])));d(Tn||(Tn=ye(["\n  pointer-events: none;\n"])));var lr=function(e){return d(Wn||(Wn=ye(["\n  font-weight: ",";\n"])),e?Q.bold:Q.regular)},or=ge(ge({},X.Light,d(Xn||(Xn=ye(["\n    color: ",";\n  "])),te.gray.dark1)),X.Dark,d(Rn||(Rn=ye(["\n    color: ",";\n  "])),te.gray.base)),ir=ge(ge({},X.Light,d(Gn||(Gn=ye(["\n    color: ",";\n  "])),te.blue.dark1)),X.Dark,d(Vn||(Vn=ye(["\n    color: ",";\n  "])),te.blue.light3)),cr=ge(ge({},X.Light,d(Hn||(Hn=ye(["\n    color: ",";\n  "])),te.gray.light1)),X.Dark,d(qn||(qn=ye(["\n    color: ",";\n  "])),te.gray.dark1)),sr=ge(ge({},X.Light,d(Zn||(Zn=ye(["\n    color: ",";\n  "])),te.blue.base)),X.Dark,d(Kn||(Kn=ye(["\n    color: ",";\n  "])),te.blue.light1)),ur=ge(ge({},X.Light,d(Yn||(Yn=ye(["\n    color: ",";\n  "])),te.gray.light1)),X.Dark,d(Bn||(Bn=ye(["\n    color: ",";\n  "])),te.gray.dark1)),dr=d(Un||(Un=ye(["\n  ."," {\n    align-self: baseline;\n  }\n"])),oe),pr=d(Jn||(Jn=ye(["\n  ."," {\n    height: 28px;\n  }\n"])),oe),fr=["glyph","isSelected","displayName","isFocused","setSelected","className","description","value","onClick","disabled"],mr=e.forwardRef((function(n,t){var o=n.glyph,i=n.isSelected,c=n.displayName,s=n.isFocused,u=n.setSelected,d=n.className,f=n.description,g=n.value,b=n.onClick,v=n.disabled,y=void 0!==v&&v,x=ve(n,fr),k=A(),w=k.darkMode,E=k.theme,C=r(qe),N=C.multiselect,S=C.size,D=C.withIcons,M=C.inputValue,j=L(t,null),I=O({prefix:"combobox-option-text"}),z=l((function(e){e.stopPropagation(),y||(u(),null==b||b(e,g))}),[y,b,u,g]),P=a((function(){return function(n){var r=n.withIcons,t=n.isSelected,a=n.glyph,l=n.optionTextId,o=n.disabled,i=n.darkMode,c=n.size,s=n.multiselect,u=n.theme,d=n.isFocused;a&&!h(a)&&console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",a);var f=a&&h(a)?e.cloneElement(a,fe(fe({},a.props),{},{className:p(or[u],ge(ge({},ir[u],d),cr[u],o),a.props.className)})):e.createElement(e.Fragment,null),g=e.createElement(de,{"aria-labelledby":l,checked:t,tabIndex:-1,disabled:o,darkMode:i,className:ar}),b=e.createElement(m,{glyph:"Checkmark",className:p(tr[c],sr[u],ge({},ur[u],o))});return{leftGlyph:s?r?f:g:r?f:t?b:null,rightGlyph:s?r&&g:r&&t&&b}}({withIcons:D,isSelected:i,glyph:o,theme:E,darkMode:w,size:S,disabled:y,multiselect:N,optionTextId:I,isFocused:s})}),[w,y,o,i,N,I,S,E,D,s]),F=P.leftGlyph,T=P.rightGlyph,W=N&&!D;return e.createElement(ie,be({},x,{as:"li",ref:j,highlighted:s,disabled:y,"aria-label":c,darkMode:w,className:p(rr(S),ge(ge({},dr,W),pr,W&&S===je.Large),d),onClick:z,onKeyDown:z}),e.createElement(ce,{leftGlyph:F,rightGlyph:T,description:f},e.createElement("span",{id:I,className:lr(i)},function(n,r,t){if(r&&t){var a=ue(r),l=new RegExp(a,"gi"),o=n.matchAll(l);if(o){for(var i=n.split(""),c=0,s=Array.from(o);c<s.length;c++){var u,d=s[c],p=null!==(u=d.index)&&void 0!==u?u:-1,f=d[0],m=f.length,h=p+f+m,g=new Array(m).fill("");g[0]=e.createElement(t,{key:h},f),i.splice.apply(i,[p,m].concat(ke(g)))}return e.createElement(e.Fragment,null,i)}return e.createElement(e.Fragment,null,n)}return e.createElement(e.Fragment,null,n)}(c,M,"strong"))))}));function hr(e){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}mr.displayName="ComboboxOption",hr.displayName="ComboboxOption",hr.propTypes={displayName:E.string,value:E.string,glyph:E.node,disabled:E.bool,className:E.string,description:E.string,onClick:E.func};var gr,br,vr,yr,xr,kr,wr,Er,Cr,Nr,Sr,Lr,Or,Dr,Mr,jr,Ir,zr,Pr,Fr,Ar,Tr,Wr,Xr,Rr,Gr,Vr,Hr,qr,Zr,Kr,Yr,Br,Ur=function(e){return!w(e)&&!x(e)&&(k(e)||v(e)&&e.length>0)},Jr=function(e){return Ke[e]+2*Be[e]},$r=$[100],Qr=ge(ge(ge(ge({},je.XSmall,22),je.Small,28),je.Default,36),je.Large,48),_r=function(e){return(Qr[e]-Jr(e)-2)/2},et=ge(ge(ge(ge({},je.XSmall,{y:_r(je.XSmall),xLeftWithChip:$[25],xLeftWithoutChip:$[200],xRight:$[100]}),je.Small,{y:_r(je.Small),xLeftWithChip:$[100],xLeftWithoutChip:$[200],xRight:$[100]}),je.Default,{y:_r(je.Default),xLeftWithChip:$[150],xLeftWithoutChip:$[300],xRight:$[200]}),je.Large,{y:_r(je.Large),xLeftWithChip:$[300],xLeftWithoutChip:$[300],xRight:$[200]}),nt=$[400],rt=function(e){return d(gr||(gr=ye(["\n    font-family: ",";\n    width: 100%;\n    min-width: ","px;\n  "])),_.default,Ye[e]+2*et[e].xLeftWithChip+nt+2)},tt=d(br||(br=ye(["\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],ee.default,ee.default),at=ge(ge({},X.Light,d(vr||(vr=ye(["\n    color: ",";\n    background-color: ",";\n  "])),ne.light.text.primary.default,ne.light.background.primary.default)),X.Dark,d(yr||(yr=ye(["\n    color: ",";\n    background-color: ",";\n  "])),ne.dark.text.primary.default,te.gray.dark4)),lt=function(e,n){return d(xr||(xr=ye(["\n  padding-top: ","px;\n  padding-bottom: ","px;\n  padding-left: ",";\n  padding-right: ","px;\n"])),et[e].y,et[e].y,"".concat(n?et[e].xLeftWithChip:et[e].xLeftWithoutChip,"px"),et[e].xRight)},ot=function(e){return d(kr||(kr=ye(["\n  cursor: not-allowed;\n  color: ",";\n  background-color: ",";\n  border-color: ",";\n"])),ne[e].text.disabled.default,ne[e].background.disabled.default,ne[e].border.disabled.default)},it=function(e){return ge(ge(ge({},ze.Error,d(wr||(wr=ye(["\n    border-color: ",";\n  "])),ne[e].border.error.default)),ze.None,d(Er||(Er=ye(["\n    border-color: ",";\n  "])),ne[e].border.primary.default)),ze.Valid,d(Cr||(Cr=ye(["\n    border-color: ",";\n  "])),ne[e].border.success.default))},ct=ge(ge({},X.Light,d(Nr||(Nr=ye(["\n    &:focus-within {\n      border-color: transparent;\n      box-shadow: ",";\n    }\n  "])),re[X.Light].input)),X.Dark,d(Sr||(Sr=ye(["\n    &:focus-within {\n      border-color: transparent;\n      box-shadow: ",";\n    }\n  "])),re[X.Dark].input)),st=d(Lr||(Lr=ye(["\n  display: flex;\n  align-items: center;\n"]))),ut=ge(ge(ge(ge({},je.XSmall,d(Or||(Or=ye(["\n    gap: ","px;\n  "])),$[100])),je.Small,d(Dr||(Dr=ye(["\n    gap: ","px;\n  "])),$[200])),je.Default,d(Mr||(Mr=ye(["\n    gap: ","px;\n  "])),$[200])),je.Large,d(jr||(jr=ye(["\n    gap: ","px;\n  "])),$[200])),dt=function(e){var n=e.overflow,r=e.size,t=d(Ir||(Ir=ye(["\n    flex-grow: 1;\n    width: 100%;\n  "])));switch(n){case Ie.scrollX:return d(zr||(zr=ye(["\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,Jr(r),Ze);case Ie.expandY:return d(Pr||(Pr=ye(["\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,$r,Jr(r),3*Jr(r),$r)}},pt=d(Fr||(Fr=ye(["\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]),ft=ge(ge({},X.Light,d(Ar||(Ar=ye(["\n    &::placeholder {\n      color: ",";\n    }\n  "])),te.gray.base)),X.Dark,d(Tr||(Tr=ye(["\n    &::placeholder {\n      color: ",";\n    }\n  "])),te.gray.dark1)),mt=ge(ge({},X.Light,d(Wr||(Wr=ye(["\n    &::placeholder {\n      color: ",";\n    }\n  "])),te.gray.base)),X.Dark,d(Xr||(Xr=ye(["\n    &::placeholder {\n      color: ",";\n    }\n  "])),te.gray.dark1)),ht=function(e){return d(Rr||(Rr=ye(["\n  height: ","px;\n  font-size: ","px;\n  line-height: ","px;\n  min-width: ","px;\n"])),Jr(e),Ye[e],Ke[e],Ye[e])},gt=function(e){return d(Gr||(Gr=ye(["\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")},bt=function(e,n){var r,t=null!==(r=null==n?void 0:n.length)&&void 0!==r?r:0;return d(Vr||(Vr=ye(["\n    width: ","px;\n    max-width: 100%;\n  "])),t*Ye[e])},vt=d(Hr||(Hr=ye(["\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"])),nt/2),yt=d(qr||(qr=ye(["\n  height: ","px;\n  width: ","px;\n"])),nt,nt),xt=d(Zr||(Zr=ye(["\n  margin-bottom: ","px;\n  display: flex;\n  flex-direction: column;\n"])),$[100]),kt=d(Kr||(Kr=ye(["\n  font-size: ","px;\n  line-height: ","px;\n"])),J.large.fontSize,J.large.lineHeight),wt=ge(ge({},X.Light,d(Yr||(Yr=ye(["\n    ::after {\n      box-shadow: 0px 0px 7px 5px ",";\n    }\n  "])),le(.85,te.black))),X.Dark,d(Br||(Br=ye(["\n    ::after {\n      width: 95%;\n      box-shadow: 0px -7px 12px 5px rgb(0 0 0 / 50%);\n    }\n  "])))),Et=function(e){return ne[e].icon.primary.default},Ct=function(e){return ne[e].icon.disabled.default},Nt=["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","usePortal","portalClassName","portalContainer","scrollContainer","popoverZIndex"],St=["className","glyph","disabled"];function Lt(n){var r=n.children,c=n.label,s=n.description,u=n.placeholder,d=void 0===u?"Select":u,f=n["aria-label"],h=n.disabled,E=void 0!==h&&h,C=n.size,L=void 0===C?je.Default:C,D=n.darkMode,T=n.state,X=void 0===T?"none":T,V=n.errorMessage,Z=void 0===V?N.error:V,K=n.successMessage,Y=void 0===K?N.success:K,B=n.searchState,U=void 0===B?"unset":B,J=n.searchEmptyMessage,$=void 0===J?"No results found":J,Q=n.searchErrorMessage,_=void 0===Q?"Could not get results!":Q,ee=n.searchLoadingMessage,ne=void 0===ee?"Loading results...":ee,re=n.filteredOptions,te=n.onFilter,ae=n.clearable,le=void 0===ae||ae,oe=n.onClear,ie=n.overflow,ce=void 0===ie?Ie.expandY:ie,se=n.multiselect,ue=void 0!==se&&se,de=n.initialValue,pe=n.inputValue,me=n.onInputChange,ye=n.onChange,ke=n.value,we=n.chipTruncationLocation,Ee=n.chipCharacterLimit,ze=void 0===Ee?12:Ee,Pe=n.className,Fe=n.usePortal,Ae=void 0===Fe||Fe,Te=n.portalClassName,We=n.portalContainer,Xe=n.scrollContainer,Re=n.popoverZIndex,Ge=ve(n,Nt),Ve=A(D),He=Ve.darkMode,Ze=Ve.theme,Ke=M({prefix:"option"}),Ye=M({prefix:"chip"}),Be=O({prefix:"combobox-input"}),Ue=O({prefix:"combobox-label"}),$e=O({prefix:"combobox-menu"}),Qe=o(null),_e=o(null),en=o(null),nn=o(null),rn=o(null),tn=xe(i(!1),2),an=tn[0],ln=tn[1],on=j(an),cn=xe(i(null),2),sn=cn[0],un=cn[1],dn=xe(i(null),2),pn=dn[0],fn=dn[1],hn=j(pn),gn=xe(i(null!=pe?pe:""),2),bn=gn[0],vn=gn[1];t((function(){w(pe)||vn(pe)}),[pe]);var yn=function(e){vn(e)},xn=j(bn),kn=xe(i(null),2),wn=kn[0],En=kn[1],Cn=xe(i(!1),2),Nn=Cn[0],Sn=Cn[1],Ln=ue&&v(pn)&&pn.length>0?void 0:d,On=function(){return ln(!1)},Dn=function(){return ln(!0)},jn=a((function(){return _n(r)}),[r]),In=l((function(e){return!ue||"string"!=typeof e&&"number"!=typeof e?!ue&&v(e)&&G.error("Error in Combobox: multiselect is set to `false`, but received an Array value"):G.error("Error in Combobox: multiselect is set to `true`, but received a ".concat(he(e),' value: "').concat(e,'"')),ue&&v(e)}),[ue]),zn=l((function(e){!E&&nn&&nn.current&&(nn.current.focus(),w(e)||nn.current.setSelectionRange(e,e))}),[E]),Pn=l((function(e){if(In(pn)){var n=g(pn),r=ye,t={diffType:"delete",value:null!=e?e:pn};x(e)?n.length=0:pn.includes(e)?n.splice(n.indexOf(e),1):(n.push(e),t.diffType="insert",yn("")),fn(n),null==r||r(n,t)}else{var a=e,l=ye;fn(a),null==l||l(a)}}),[In,ye,pn]),Fn=l((function(e){var n,r,t,a;return function(e,n){return Array.isArray(n)?n.includes(e):e===n}((r=jn,(n=e)?null!==(t=null===(a=r.find((function(e){return e.displayName===n})))||void 0===a?void 0:a.value)&&void 0!==t?t:n:""),pn)}),[jn,pn]),An=l((function(e){var n="string"==typeof e?e:e.value;return re&&re.length>0?re.includes(n):!!Fn(bn)||("string"==typeof e?nr(n,jn):e.displayName).toLowerCase().includes(bn.toLowerCase())}),[re,Fn,bn,jn]),Tn=a((function(){return jn.filter(An)}),[jn,An]),Wn=l((function(e){return!!e&&!!jn.find((function(n){return n.value===e}))}),[jn]),Xn=l((function(e){return Tn?Tn.findIndex((function(n){return n.value===e})):-1}),[Tn]),Rn=l((function(e){if(Tn&&Tn.length>=e){var n=Tn[e];return n?n.value:void 0}}),[Tn]),Gn=l((function(){return In(pn)?pn.findIndex((function(e){var n;return null===(n=Ye(e))||void 0===n||null===(n=n.current)||void 0===n?void 0:n.contains(document.activeElement)})):-1}),[Ye,In,pn]),Vn=xe(i(),2),Hn=Vn[0],qn=Vn[1],Zn=l((function(e){var n,r=null!==(n=null==Tn?void 0:Tn.length)&&void 0!==n?n:0,t=r-1>0?r-1:0,a=Xn(sn);switch(e&&an&&(En(null),zn()),e){case"next":var l=Rn(a+1<r?a+1:0);un(null!=l?l:null);break;case"prev":var o=Rn(a-1>=0?a-1:t);un(null!=o?o:null);break;case"last":var i=Rn(t);un(null!=i?i:null);break;default:var c=Rn(0);un(null!=c?c:null)}}),[sn,Xn,Rn,an,zn,null==Tn?void 0:Tn.length]),Kn=l((function(e,n){if(In(pn))switch(e){case"next":var r=null!=n?n:Gn(),t=r+1<pn.length?r+1:pn.length-1,a=pn[t];En(a);break;case"prev":var l=null!=n?n:Gn(),o=l>0?l-1:l<0?pn.length-1:0,i=pn[o];En(i);break;case"first":var c=pn[0];En(c);break;case"last":var s=pn[pn.length-1];En(s);break;default:En(null)}}),[Gn,In,pn]),Yn=l((function(e,n){switch(e&&un(null),e){case"right":switch(Hn){case Ce:var r,t,a;if((null===(r=nn.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=nn.current)||void 0===t?void 0:t.value.length))null===(a=_e.current)||void 0===a||a.focus();break;case Se:case Oe:case Le:if(Hn===Le||1===(null==pn?void 0:pn.length)){zn(0),Kn(null),n.preventDefault();break}Kn("next")}break;case"left":switch(Hn){case Ne:var l;n.preventDefault(),zn(null==nn||null===(l=nn.current)||void 0===l?void 0:l.value.length);break;case Ce:case Oe:case Le:if(In(pn)){var o;if(Hn===Ce&&0!==(null===(o=nn.current)||void 0===o?void 0:o.selectionStart))break;Kn("prev")}}break;default:Kn(null)}}),[Hn,In,pn,zn,Kn]);t((function(){bn!==xn&&Zn("first")}),[bn,an,xn,Zn]),I(sn?Ke(sn):void 0,rn);var Bn=l((function(n){if(R(n,"ComboboxOption")){var r=Qn(n.props),t=r.value,a=r.displayName;if(An(t)){var l=n.props,o=l.className,i=l.glyph,c=l.disabled,s=ve(l,St),u=jn.findIndex((function(e){return e.value===t})),d=sn===t,p=In(pn)?pn.includes(t):pn===t,f=Ke(t);return e.createElement(mr,be({},s,{value:t,displayName:a,isFocused:d,isSelected:p,disabled:c,setSelected:function(){un(t),Pn(t),zn(),t===pn&&On()},glyph:i,className:o,index:u,ref:f}))}}else if(R(n,"ComboboxGroup")){var m=e.Children.map(n.props.children,Bn);if(m&&(null==m?void 0:m.length)>0)return e.createElement(mn,{label:n.props.label,className:n.props.className},e.Children.map(m,Bn))}}),[jn,Ke,sn,In,pn,zn,An,Pn]),Un=a((function(){return e.Children.map(r,Bn)}),[r,Bn]),Jn=a((function(){if(In(pn))return pn.filter(Wn).map((function(n,r){var t=nr(n,jn),a=wn===n,l=Ye(n),o=r>=pn.length-1;return e.createElement(Je,{key:n,displayName:t,isFocused:a,onRemove:function(){o?(zn(),Kn(null)):Kn("next",r),Pn(n)},onFocus:function(){En(n)},ref:l})}))}),[In,pn,Wn,jn,wn,Ye,Pn,zn,Kn]),rr=a((function(){return jn.some((function(e){return e.hasGlyph}))}),[jn]),tr=l((function(){var e=Tn.find((function(e){return e.displayName===bn||e.value===bn}));if(!ke&&e)Pn(e.value);else if(!In(pn)){var n,r=null!==(n=nr(pn,jn))&&void 0!==n?n:hn;yn(r)}}),[jn,bn,In,hn,pn,Pn,ke,Tn]),ar=l((function(){if(Ur(pn)){if(In(pn))hr(ce);else if(!In(pn)){var e,n=null!==(e=nr(pn,jn))&&void 0!==e?e:"";yn(n),On()}}else yn("")}),[jn,In,pn,ce]);t((function(){if(de)if(v(de)){var e,n=null!==(e=de.filter((function(e){return Wn(e)})))&&void 0!==e?e:[];fn(n)}else Wn(de)&&fn(de);else fn(function(e){return e?[]:null}(ue))}),[]),t((function(){if(!w(ke)&&ke!==xn)if(x(ke))fn(null);else if(In(ke)){var e=ke.filter(Wn);fn(e)}else fn(Wn(ke)?ke:null)}),[In,Wn,xn,ke]),t((function(){!w(hn)&&(v(pn)&&!x(hn)||k(pn)||x(pn))&&!y(pn,hn)&&ar()}),[ar,hn,pn]),t((function(){!an&&on&&tr()}),[an,on,tr]);var lr=xe(i(0),2),or=lr[0],ir=lr[1];t((function(){var e,n;ir(null!==(e=null===(n=Qe.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)}),[Qe,an,sn,pn]);z(On,[rn,Qe],an);var cr=In(pn)&&!!pn.length,sr=b((function(e){Sn($n(e.target))}),50,{leading:!0}),ur=l((function(e){ce===Ie.expandY&&sr(e)}),[sr,ce]);t((function(){en.current&&Sn($n(en.current))}),[]);var dr,pr=fe({popoverZIndex:Re},Ae?{usePortal:Ae,portalClassName:Te,portalContainer:We,scrollContainer:Xe}:{usePortal:Ae}),fr={disabled:E,errorMessage:Z,size:L,state:X,successMessage:Y};return e.createElement(F,{darkMode:He},e.createElement(qe.Provider,{value:{multiselect:ue,size:L,withIcons:rr,disabled:E,isOpen:an,state:X,searchState:U,chipTruncationLocation:we,chipCharacterLimit:ze,inputValue:bn,overflow:ce,popoverZIndex:Re}},e.createElement("div",be({className:p(rt(L),Pe)},Ge),(c||s)&&e.createElement("div",{className:xt},c&&e.createElement(H,{id:Ue,htmlFor:Be,darkMode:He,disabled:E,className:p(ge({},kt,L===je.Large))},c),s&&e.createElement(q,{darkMode:He,disabled:E,className:p(ge({},kt,L===je.Large))},s)),e.createElement("div",{ref:Qe,role:"combobox","aria-expanded":an,"aria-controls":$e,"aria-owns":$e,tabIndex:-1,onMouseDown:function(e){E&&e.preventDefault()},onClick:function(e){if(e.target!==nn.current){var n=0;if(nn.current)n=e.nativeEvent.offsetX>nn.current.offsetLeft+nn.current.clientWidth?bn.length:0;zn(n)}Dn()},onFocus:function(e){hr(ce),qn(function(e){var n,r,t,a;if(!e)return;if(null!==(n=nn.current)&&void 0!==n&&n.contains(e))return Ce;if(null!==(r=_e.current)&&void 0!==r&&r.contains(e))return Ne;var l=In(pn)?pn.findIndex((function(n){var r;return null===(r=Ye(n))||void 0===r||null===(r=r.current)||void 0===r?void 0:r.contains(e)})):-1;if(In(pn)){if(0===l)return Se;if(l===pn.length-1)return Le;if(l>0)return Oe}if(null!==(t=rn.current)&&void 0!==t&&t.contains(e))return Me;if(null!==(a=Qe.current)&&void 0!==a&&a.contains(e))return De}(e.target))},onKeyDown:function(e){var n,r,t=null===(n=rn.current)||void 0===n?void 0:n.contains(document.activeElement);if((null===(r=Qe.current)||void 0===r?void 0:r.contains(document.activeElement))||t){if(e.ctrlKey||e.shiftKey||e.altKey)return;switch(e.key){case W.Tab:switch(Hn){case"Input":Ur(pn)||(On(),Zn("first"),Kn(null));break;case"LastChip":Kn(null)}break;case W.Escape:On(),Zn("first");break;case W.Enter:an?!an||Hn!==Ce||x(sn)||function(e){if("string"==typeof e){var n=er(e,jn);return!(null==n||!n.isDisabled)}return!!e.isDisabled}(sn)?Hn===Ne&&(Pn(null),zn()):Pn(sn):Dn();break;case W.Backspace:var a;if(In(pn))"Input"===Hn&&0===(null===(a=nn.current)||void 0===a?void 0:a.selectionStart)&&Kn("last");Dn();break;case W.ArrowDown:an?(e.preventDefault(),Zn("next")):Dn();break;case W.ArrowUp:an?(e.preventDefault(),Zn("prev")):Dn();break;case W.ArrowRight:Yn("right",e);break;case W.ArrowLeft:Yn("left",e);break;default:an||Dn()}}},onTransitionEnd:function(){var e,n;ir(null!==(e=null===(n=Qe.current)||void 0===n?void 0:n.clientWidth)&&void 0!==e?e:0)},className:p(tt,at[Ze],lt(L,cr),it(Ze)[X],ge(ge(ge({},ct[Ze],(dr=Ce,dr===Hn)),ot(Ze),E),wt[Ze],Nn))},e.createElement("div",{onScroll:ur,ref:en,className:dt({size:L,overflow:ce})},Jn,e.createElement("input",{"aria-label":null!=f?f:c,"aria-autocomplete":"list","aria-controls":$e,"aria-labelledby":Ue,ref:nn,id:Be,className:p(pt,ht(L),ft[Ze],gt(an),ge(ge({},bt(L,bn),In(pn)),mt[Ze],E)),placeholder:Ln,"aria-disabled":E,readOnly:E,onChange:function(e){yn(e.target.value),null==te||te(e.target.value),null==me||me(e)},value:bn,autoComplete:"off"})),e.createElement("div",{className:p(st,ut[L])},le&&Ur(pn)&&!E&&e.createElement(P,{"aria-label":"Clear selection",disabled:E,ref:_e,onClick:function(e){E||(e.stopPropagation(),Pn(null),null==oe||oe(e),null==te||te(""),zn())},onFocus:function(){un(null)},className:p(vt),darkMode:He},e.createElement(m,{glyph:"XWithCircle"})),e.createElement(m,{glyph:"CaretDown",className:yt,fill:p(ge(ge({},Et(Ze),!E),Ct(Ze),E))}))),e.createElement(S,fr),e.createElement(Mn,be({id:$e,labelId:Ue,refEl:Qe,ref:rn,menuWidth:or,searchLoadingMessage:ne,searchErrorMessage:_,searchEmptyMessage:$},pr),Un))));function hr(e){en&&en.current&&(e===Ie.scrollX&&(en.current.scrollLeft=en.current.scrollWidth),e===Ie.expandY&&(en.current.scrollTop=en.current.scrollHeight))}}Lt.propTypes={multiselect:E.bool,value:E.oneOfType([E.string,E.arrayOf(E.string)]),initialValue:E.oneOfType([E.string,E.arrayOf(E.string)]),overflow:E.oneOf(Object.values(Ie)),darkMode:E.bool,label:E.string,"aria-label":E.string,children:E.node,onChange:E.func,chipCharacterLimit:E.number,chipTruncationLocation:E.oneOf(Object.values(K)),onClear:E.func,onFilter:E.func,clearable:E.bool,searchLoadingMessage:E.string,searchErrorMessage:E.string,searchEmptyMessage:E.string,searchState:E.oneOf(Object.values(Pe)),errorMessage:E.string,state:E.oneOf(Object.values(ze)),size:E.oneOf(Object.values(je)),disabled:E.bool,description:E.string,placeholder:E.string,filteredOptions:E.arrayOf(E.string),popoverZIndex:E.number,usePortal:E.bool,scrollContainer:E.elementType,portalContainer:E.elementType,portalClassName:E.string};var Ot,Dt=d(Ot||(Ot=ye(["\n  width: 256px;\n  padding-block: 64px;\n  display: flex;\n"]))),Mt=["apple","banana"],jt={title:"Components/Combobox",component:Lt,decorators:[function(n){return e.createElement("div",{className:Dt},e.createElement(n,null))}],parameters:{default:"LiveExample",controls:{exclude:[].concat(ke(s),["as","filteredOptions","initialValue","setError","value","children"])},generate:{storyNames:["SingleSelect","MultiSelect","DisabledInput"],combineArgs:{darkMode:[!1,!0],clearable:[!0,!1],description:[void 0,"Please pick fruit(s)"],label:[void 0,"Choose a fruit"],state:Object.values(ze),size:Object.values(je)},excludeCombinations:[["description",{label:void 0}],{clearable:!1,value:void 0},{multiselect:!0,value:"apple"},{multiselect:!1,value:Mt}]}},args:{label:"Choose a fruit",description:"Please pick fruit(s)",placeholder:"Select fruit",multiselect:!1,darkMode:!1,disabled:!1,clearable:!0,errorMessage:"No Pomegranates!",children:function(){var n=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];return[e.createElement(hr,{key:"apple",value:"apple",displayName:"Apple","data-testid":"test-id",description:"Do I keep the doctor away?",onClick:function(e,n){return console.log(e,n)},className:"className"}),e.createElement(hr,{key:"banana",value:"banana",displayName:"Banana"}),e.createElement(hr,{key:"carrot",value:"carrot",displayName:"Carrot",disabled:!0}),e.createElement(hr,{key:"pomegranate",value:"pomegranate",displayName:"Pomegranate",glyph:n?e.createElement(m,{glyph:"Warning"}):void 0,description:"Watch out, I stain everything I touch LOL",disabled:!0}),e.createElement(hr,{key:"plantain",value:"plantain",displayName:"Plantain",glyph:n?e.createElement(m,{glyph:"Connect"}):void 0,description:"Don't confuse me with a banana",onClick:function(){return console.log("I was clicked")}}),e.createElement(hr,{key:"paragraph",value:"paragraph",displayName:"Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper."}),e.createElement(hr,{key:"hash",value:"hash",displayName:"5f4dcc3b5aa765d61d8327deb882cf995f4dcc3b5aa765d61d8327deb882cf99"}),e.createElement(hr,{key:"dragonfruit",value:"dragonfruit",displayName:"Dragonfruit",description:"Rawr"}),e.createElement(hr,{key:"eggplant",value:"eggplant",displayName:"Eggplant"}),e.createElement(hr,{key:"fig",value:"fig",displayName:"Fig"}),e.createElement(hr,{key:"grape",value:"grape",displayName:"Grape"}),e.createElement(hr,{key:"honeydew",value:"honeydew",displayName:"Honeydew"}),e.createElement(hr,{key:"iceberg-lettuce",value:"iceberg-lettuce",displayName:"Iceberg lettuce"}),e.createElement(hn,{key:"peppers",label:"Peppers"},e.createElement(hr,{key:"cayenne",value:"cayenne",displayName:"Cayenne"}),e.createElement(hr,{key:"ghost-pepper",value:"ghost-pepper",displayName:"Ghost pepper"}),e.createElement(hr,{key:"habanero",value:"habanero",displayName:"Habanero"}),e.createElement(hr,{key:"jalapeno",value:"jalapeno",displayName:"Jalapeño"}),e.createElement(hr,{key:"red-pepper",value:"red-pepper",displayName:"Red pepper"}),e.createElement(hr,{key:"scotch-bonnet",value:"scotch-bonnet",displayName:"Scotch bonnet",description:"Don't touch your eyes"}))]}()},argTypes:{darkMode:c.darkMode,multiselect:{control:"boolean"},disabled:{control:"boolean"},clearable:{control:"boolean"},label:{control:"text"},description:{control:"text"},placeholder:{control:"text"},inputValue:{control:"text"},size:{options:Object.values(je),control:"select"},state:{options:Object.values(ze),control:"select"},errorMessage:{control:"text"},searchEmptyMessage:{control:"text"},searchState:{options:Object.values(Pe),control:"select"},searchErrorMessage:{control:"text",if:{arg:"searchState",eq:Pe.Error}},searchLoadingMessage:{control:"text",if:{arg:"searchState",eq:Pe.Loading}},chipTruncationLocation:{options:Object.values(K),control:"select",if:{arg:"multiselect"}},chipCharacterLimit:{control:"number",if:{arg:"multiselect"}},overflow:{options:Object.values(Ie),control:"select",if:{arg:"multiselect"}}}},It=function(n){return e.createElement(e.Fragment,null,n.multiselect?e.createElement(Lt,be({key:"multi"},n,{multiselect:!0})):e.createElement(Lt,be({key:"single"},n,{multiselect:!1})))};It.parameters={chromatic:{disableSnapshot:!0}};var zt=function(){var n=xe(i(null),2),r=n[0],t=n[1];return e.createElement("div",null,e.createElement(Lt,{multiselect:!1,label:"Choose a fruit",description:"Please pick one",placeholder:"Select fruit",onChange:function(e){t(e)},value:r},e.createElement(hr,{value:"apple"}),e.createElement(hr,{value:"banana"}),e.createElement(hr,{value:"carrot"})),e.createElement(u,{onClick:function(){return t("carrot")}},"Select Carrot"))};zt.parameters={chromatic:{disableSnapshot:!0}};var Pt=function(){var n=["apple","banana","carrot","dragonfruit","eggplant","fig","grape","honeydew","iceberg-lettuce","jalapeño"],r=xe(i(["carrot","grape"]),2),t=r[0],a=r[1];return e.createElement(Lt,{label:"Choose some fruit",placeholder:"Select fruit",initialValue:["apple","fig","raspberry"],multiselect:!0,overflow:"expand-y",onFilter:function(e){a(n.filter((function(n){return n.includes(e)})))},filteredOptions:t},n.map((function(n){return e.createElement(hr,{key:n,value:n})})))};Pt.parameters={chromatic:{disableSnapshot:!0}};var Ft=function(){return e.createElement(e.Fragment,null)};Ft.args={multiselect:!1},Ft.parameters={generate:{combineArgs:{value:[void 0,"apple"]}}};var At=function(){return e.createElement(e.Fragment,null)};At.args={multiselect:!0},At.parameters={generate:{combineArgs:{value:[void 0,Mt]}}};var Tt=function(){return e.createElement(e.Fragment,null)};Tt.args={disabled:!0},Tt.parameters={generate:{combineArgs:{darkMode:[!0,!1]}}};export{zt as ControlledSingleSelect,Tt as DisabledInput,Pt as ExternalFilter,It as LiveExample,At as MultiSelect,Ft as SingleSelect,jt as default};

package/tsconfig.json

@@ -31,6 +31,9 @@
     {
       "path": "../emotion"
     },
+    {
+      "path": "../form-field"
+    },
     {
       "path": "../hooks"
     },

package/tsdoc.json

@@ -351,6 +351,9 @@
               },
               {
                 "value": "\"error\""
+              },
+              {
+                "value": "\"valid\""
               }
             ]
           },
@@ -358,11 +361,91 @@
         },
         "errorMessage": {
           "name": "errorMessage",
-          "defaultValue": null,
+          "defaultValue": {
+            "value": "DEFAULT_MESSAGES.error"
+          },
           "description": "The message shown below the input when state is `error`",
           "required": false,
           "type": {
-            "name": "string"
+            "name": "enum",
+            "raw": "ReactNode",
+            "value": [
+              {
+                "value": "string"
+              },
+              {
+                "value": "number"
+              },
+              {
+                "value": "false"
+              },
+              {
+                "value": "true"
+              },
+              {
+                "value": "ReactElement<any, string | JSXElementConstructor<any>>",
+                "description": "",
+                "fullComment": "",
+                "tags": {}
+              },
+              {
+                "value": "Iterable<ReactNode>",
+                "description": "",
+                "fullComment": "",
+                "tags": {}
+              },
+              {
+                "value": "ReactPortal",
+                "description": "",
+                "fullComment": "",
+                "tags": {}
+              }
+            ]
+          },
+          "tags": {}
+        },
+        "successMessage": {
+          "name": "successMessage",
+          "defaultValue": {
+            "value": "DEFAULT_MESSAGES.success"
+          },
+          "description": "The message shown below the input when state is `valid`",
+          "required": false,
+          "type": {
+            "name": "enum",
+            "raw": "ReactNode",
+            "value": [
+              {
+                "value": "string"
+              },
+              {
+                "value": "number"
+              },
+              {
+                "value": "false"
+              },
+              {
+                "value": "true"
+              },
+              {
+                "value": "ReactElement<any, string | JSXElementConstructor<any>>",
+                "description": "",
+                "fullComment": "",
+                "tags": {}
+              },
+              {
+                "value": "Iterable<ReactNode>",
+                "description": "",
+                "fullComment": "",
+                "tags": {}
+              },
+              {
+                "value": "ReactPortal",
+                "description": "",
+                "fullComment": "",
+                "tags": {}
+              }
+            ]
           },
           "tags": {}
         },