monday-ui-react-core/dist/esm/src/components/Dropdown/Dropdown.js

Official monday.com UI resources for application development in React.js

import{slicedToArray as e,defineProperty as n,toConsumableArray as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{getTestId as t,ComponentDefaultTestId as i}from"../../tests/testIds.js";import r from"classnames";import"../../constants/dialog.js";import{SIZES as a}from"../../constants/sizes.js";import"../../constants/positions.js";import s,{forwardRef as l,useRef as c,useMemo as u,useState as d,useEffect as p,useCallback as m}from"react";import O,{createFilter as f,components as v}from"react-select";import b from"react-select/async";import g from"react-select/base";import{noop as j}from"lodash-es";import C from"./components/menu/menu.js";import M from"./components/DropdownIndicator/DropdownIndicator.js";import y from"./components/option/option.js";import h from"./components/singleValue/singleValue.js";import S from"./components/ClearIndicator/ClearIndicator.js";import w from"./components/MultiValueContainer/MultiValueContainer.js";import{isClient as I}from"../../utils/ssr-utils.js";import{DROPDOWN_CHIP_COLORS as D,DROPDOWN_MENU_PLACEMENT as R,DROPDOWN_MENU_POSITION as V,ADD_AUTO_HEIGHT_COMPONENTS as P,defaultCustomStyles as A,DROPDOWN_ID as L,DROPDOWN_MENU_ID as W,DROPDOWN_MENU_ARIA_LABEL as z,DROPDOWN_INPUT_ARIA_LABEL as E}from"./DropdownConstants.js";import T,{customTheme as x}from"./Dropdown.styles.js";import N from"./components/Control/Control.js";import F from"./components/menu/menu.module.scss.js";import B from"./Dropdown.module.scss.js";import{withStaticProps as k}from"../../types/withStaticProps.js";var H=l((function(a,l){var f=a.className,D=a.optionWrapperClassName,R=a.singleValueWrapperClassName,V=a.dropdownMenuWrapperClassName,k=a.placeholder,G=void 0===k?"":k,K=a.disabled,U=void 0!==K&&K,_=a.readOnly,q=void 0!==_&&_,J=a.withReadOnlyStyle,Q=a.onMenuOpen,X=void 0===Q?j:Q,Y=a.onMenuClose,Z=void 0===Y?j:Y,$=a.onFocus,ee=void 0===$?j:$,ne=a.onBlur,oe=void 0===ne?j:ne,te=a.onScroll,ie=void 0===te?j:te,re=a.onMenuScrollToBottom,ae=void 0===re?j:re,se=a.onChange,le=void 0===se?j:se,ce=a.searchable,ue=void 0===ce||ce,de=a.captureMenuScroll,pe=void 0!==de&&de,me=a.options,Oe=void 0===me?[]:me,fe=a.defaultValue,ve=a.value,be=a.noOptionsMessage,ge=a.openMenuOnFocus,je=a.openMenuOnClick,Ce=a.clearable,Me=void 0===Ce||Ce,ye=a.OptionRenderer,he=a.optionRenderer,Se=a.ValueRenderer,we=a.valueRenderer,Ie=a.menuRenderer,De=a.menuPlacement,Re=void 0===De?H.menuPlacements.BOTTOM:De,Ve=a.rtl,Pe=a.size,Ae=void 0===Pe?H.sizes.MEDIUM:Pe,Le=a.asyncOptions,We=a.cacheOptions,ze=a.defaultOptions,Ee=a.isVirtualized,Te=a.menuPortalTarget,xe=a.extraStyles,Ne=void 0===xe?A:xe,Fe=a.maxMenuHeight,Be=a.menuIsOpen,ke=a.tabIndex,He=void 0===ke?"0":ke,Ge=a.id,Ke=void 0===Ge?L:Ge,Ue=a.menuId,_e=void 0===Ue?W:Ue,qe=a.menuAriaLabel,Je=void 0===qe?z:qe,Qe=a.inputAriaLabel,Xe=void 0===Qe?E:Qe,Ye=a.autoFocus,Ze=void 0!==Ye&&Ye,$e=a.multi,en=void 0!==$e&&$e,nn=a.multiline,on=void 0!==nn&&nn,tn=a.onOptionRemove,rn=a.onOptionSelect,an=a.onClear,sn=a.onInputChange,ln=void 0===sn?j:sn,cn=a.closeMenuOnSelect,un=void 0===cn?!en:cn,dn=a.closeMenuOnScroll,pn=void 0!==dn&&dn,mn=a.withMandatoryDefaultOptions,On=void 0!==mn&&mn,fn=a.isOptionSelected,vn=a.insideOverflowContainer,bn=void 0!==vn&&vn,gn=a.insideOverflowWithTransformContainer,jn=void 0!==gn&&gn,Cn=a.tooltipContent,Mn=void 0===Cn?"":Cn,yn=a.onKeyDown,hn=void 0===yn?j:yn,Sn=a.isLoading,wn=void 0!==Sn&&Sn,In=a.loadingMessage,Dn=a.ariaLabel,Rn=a.tabSelectsValue,Vn=void 0===Rn||Rn,Pn=a.popupsContainerSelector,An=a.filterOption,Ln=a.menuPosition,Wn=void 0===Ln?H.menuPositions.ABSOLUTE:Ln,zn=a["data-testid"],En=a.withGroupDivider,Tn=void 0!==En&&En,xn=a.inputValue,Nn=a.blurInputOnSelect,Fn=c(),Bn=Te||Pn&&document.querySelector(Pn),kn=u((function(){return fe?Array.isArray(fe)?fe.map((function(e){return Object.assign(Object.assign({},e),{isMandatory:!0})})):Object.assign(Object.assign({},fe),{isMandatory:!0}):fe}),[fe]);g.prototype.renderLiveRegion=function(){return null};var Hn=d(null),Gn=e(Hn,2),Kn=Gn[0],Un=Gn[1];p((function(){I()&&import("react-windowed-select").then((function(e){Un((function(){return e.WindowedMenuList}))}))}),[]);var _n=d(kn||[]),qn=e(_n,2),Jn=qn[0],Qn=qn[1],Xn=d(""),Yn=e(Xn,2),Zn=Yn[0],$n=Yn[1],eo=he||ye,no=we||Se,oo=!!ve,to=null!=ve?ve:Jn,io=u((function(){return Array.isArray(to)?to.reduce((function(e,o){return Object.assign(Object.assign({},e),n({},o.value,o))}),{}):{}}),[to]),ro=u((function(){return Dn||"".concat(q?"Readonly ":""," ").concat(Mn," ").concat(Array.isArray(to)?"Selected: ".concat(to.map((function(e){return e.label})).join(", ")):"Select")}),[Dn,q,to,Mn]),ao=en?to:ve,so=u((function(){var o=T({size:Ae,rtl:Ve,insideOverflowContainer:bn,controlRef:Fn,insideOverflowWithTransformContainer:jn,withGroupDivider:Tn}),t=Ne(o),i=Object.entries(t).reduce((function(t,i){var r=e(i,2),a=r[0],s=r[1];return Object.assign(Object.assign({},t),n({},a,(function(e,n){var t=o[a],i=t?t(e,n):e;return s(i,n)})))}),{});if(en){on&&P.forEach((function(e){var n=i[e];i[e]=function(e,o){return Object.assign(Object.assign({},n(e,o)),{height:"auto"})}}));var r=i.valueContainer;i.valueContainer=function(e,n){return Object.assign(Object.assign({},r(e,n)),{paddingLeft:6})}}return i}),[Ae,Ve,bn,jn,Ne,en,on]),lo=m((function(e){return s.createElement(C,Object.assign({},e,{id:_e,ariaLabel:Je,Renderer:Ie,dropdownMenuWrapperClassName:V,onScroll:ie}))}),[V,Ie,_e,Je,ie]),co=m((function(e){return s.createElement(M,Object.assign({},e,{size:Ae}))}),[Ae]),uo=m((function(e){return s.createElement(y,Object.assign({setFocusedOptionId:$n},e,{Renderer:eo,optionWrapperClassName:D}))}),[eo,D,$n]),po=m((function(e){var n=e.selectProps,o=n.focusedOptionId,t=n.menuIsOpen;return s.createElement(v.Input,Object.assign({},e,{"aria-activedescendant":o&&t?o:"",role:"combobox","aria-expanded":!q&&t,"aria-label":Xe,"aria-controls":_e}))}),[_e,q]),mo=m((function(e){return s.createElement(h,Object.assign({},e,{readOnly:q,Renderer:no,selectedOption:to[0],singleValueWrapperClassName:R}))}),[no,q,to,R]),Oo=m((function(e){return s.createElement(S,Object.assign({},e,{size:Ae}))}),[Ae]),fo=u((function(){return function(e,n){tn&&tn(io[e]);var o=Array.isArray(to)?to.filter((function(n){return n.value!==e})):to;le&&le(o,n),Qn(o)}}),[le,tn,to,io]),vo=u((function(){return{selectedOptions:to,onSelectedDelete:fo,isMultiline:on,insideOverflowContainer:bn,insideOverflowWithTransformContainer:jn,controlRef:Fn,tooltipContent:Mn,popupsContainerSelector:Pn,size:Ae}}),[to,fo,on,bn,jn,Mn,Pn,Ae]),bo=Le?b:O,go=Object.assign({},Le&&Object.assign({loadOptions:Le,cacheOptions:We},ze&&{defaultOptions:ze})),jo=Object.assign(Object.assign({},!Le&&{options:Oe}),en&&{isMulti:!0}),Co=m((function(e){var n,o=e.target;return!(null===(n=null==o?void 0:o.parentElement)||void 0===n?void 0:n.classList.contains(F.dropdownMenuWrapper))&&(pn||bn||jn)}),[bn,jn,pn]);return s.createElement(bo,Object.assign({className:r(B.dropdown,f),selectProps:vo,components:Object.assign(Object.assign({DropdownIndicator:co,Menu:lo,ClearIndicator:Oo,Input:po,Option:uo,Control:N,SingleValue:mo},en&&{MultiValue:j,ValueContainer:w}),Ee&&Kn&&{MenuList:Kn}),closeMenuOnScroll:Co,size:Ae,noOptionsMessage:be,placeholder:G,isDisabled:U,isClearable:!q&&Me,isSearchable:!q&&ue,readOnly:q,withReadOnlyStyle:J,"aria-readonly":q,"aria-label":ro,"aria-details":Mn,"aria-haspopup":"listbox",defaultValue:fe,value:ao,onMenuOpen:X,onMenuClose:Z,onFocus:ee,onBlur:oe,onMenuScrollToBottom:ae,captureMenuScroll:pe,onChange:function(e,n){switch(le&&le(e,n),n.action){case"select-option":var t=en?n.option:e;rn&&rn(t),oo||Qn([].concat(o(to),[t]));break;case"clear":an&&an(),oo||Qn(On?kn:[])}},onKeyDown:hn,onInputChange:ln,openMenuOnFocus:ge,openMenuOnClick:je,focusedOptionId:Zn,isRtl:Ve,styles:so,theme:x,maxMenuHeight:Fe,menuPortalTarget:Bn,menuPlacement:Re,menuPosition:Wn,menuIsOpen:!q&&Be,tabIndex:He,id:Ke,"data-testid":zn||t(i.DROPDOWN,Ke),autoFocus:Ze,closeMenuOnSelect:un,ref:l,withMandatoryDefaultOptions:On,isOptionSelected:fn,isLoading:wn,loadingMessage:In,tabSelectsValue:Vn,filterOption:An,inputValue:xn,blurInputOnSelect:Nn},go,jo))})),G=k(H,{size:a,sizes:a,chipColors:D,menuPlacements:R,menuPositions:V,createFilter:f});export{G as default};
//# sourceMappingURL=Dropdown.js.map