monday-ui-react-core
Version:
Official monday.com UI resources for application development in React.js
3 lines (2 loc) • 5.21 kB
JavaScript
import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as t,noop as i,isFunction as s}from"lodash-es";import n from"classnames";import r,{forwardRef as a,useRef as l,useState as c,useCallback as d,useMemo as m}from"react";import{getStyle as p}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as u,ComponentDefaultTestId as b}from"../../tests/testIds.js";import v from"../../hooks/useMergeRef.js";import f from"../Search/Search.js";import"../../constants/dialog.js";import{BASE_SIZES as h}from"../../constants/sizes.js";import"../../constants/positions.js";import C from"../Button/Button.js";import g from"../Text/Text.js";import x from"./components/ComboboxOption/ComboboxOption.js";import{defaultFilter as I}from"./ComboboxService.js";import{ComboboxItems as y}from"./components/ComboboxItems/ComboboxItems.js";import{StickyCategoryHeader as O}from"./components/StickyCategoryHeader/StickyCategoryHeader.js";import{useItemsData as j,useKeyboardNavigation as N}from"./ComboboxHelpers/ComboboxHelpers.js";import{getOptionId as R}from"./helpers.js";import{withStaticProps as S}from"../../types/withStaticProps.js";import{COMBOBOX_LISTBOX_ID as E}from"./components/ComboboxConstants.js";import k from"./Combobox.module.scss.js";var F=a((function(a,h){var x=a.className,S=void 0===x?"":x,H=a.optionClassName,A=void 0===H?"":H,L=a.searchWrapperClassName,T=a.searchIcon,M=a.id,w=void 0===M?"":M,z=a.placeholder,B=void 0===z?"":z,V=a.size,W=void 0===V?F.sizes.MEDIUM:V,P=a.defaultVisualFocusFirstIndex,D=a.optionLineHeight,X=void 0===D?32:D,_=a.optionsListHeight,U=a.autoFocus,Y=void 0!==U&&U,q=a.disabled,G=void 0!==q&&q,J=a.options,K=void 0===J?[]:J,Q=a.categories,Z=a.withCategoriesDivider,$=void 0!==Z&&Z,ee=a.noResultsMessage,oe=void 0===ee?"No results found":ee,te=a.onAddNew,ie=a.addNewLabel,se=void 0===ie?"Add new":ie,ne=a.onClick,re=void 0===ne?function(e){}:ne,ae=a.filter,le=void 0===ae?I:ae,ce=a.disableFilter,de=void 0!==ce&&ce,me=a.filterValue,pe=a.onFilterChanged,ue=a.loading,be=void 0!==ue&&ue,ve=a.onOptionHover,fe=void 0===ve?i:ve,he=a.onOptionLeave,Ce=void 0===he?i:he,ge=a.shouldScrollToSelectedItem,xe=void 0===ge||ge,Ie=a.noResultsRenderer,ye=a.stickyCategories,Oe=void 0!==ye&&ye,je=a.optionRenderer,Ne=void 0===je?null:je,Re=a.renderOnlyVisibleOptions,Se=void 0!==Re&&Re,Ee=a.clearFilterOnSelection,ke=void 0!==Ee&&Ee,Fe=a.maxOptionsWithoutScroll,He=a.defaultFilter,Ae=void 0===He?"":He,Le=a.searchInputAriaLabel,Te=void 0===Le?"Search for content":Le,Me=a["data-testid"],we=a.debounceRate,ze=a.searchInputRef,Be=a.renderAction,Ve=a.hideRenderActionOnInput,We=l(null),Pe=l(null),De=v(h,We),Xe=v(Pe,ze),_e=c(me||Ae),Ue=e(_e,2),Ye=Ue[0],qe=Ue[1];void 0!==me&&me!==Ye&&qe(me);var Ge=d((function(e){eo(-1),pe&&pe(e),qe(e)}),[qe,pe]),Je=d((function(e,o,t){fe(e,o,t)}),[fe]),Ke=m((function(){return de?K:le(Ye,K)}),[K,Ye,le,de]),Qe=c(-1),Ze=e(Qe,2),$e=Ze[0],eo=Ze[1],oo=d((function(e){return void 0!==e&&Ke[e]&&!Ke[e].disabled}),[Ke]),to=d((function(){te&&te(Ye),qe("")}),[te,Ye,qe]),io=Ke.length>0,so=Ye.length>0;var no=c(),ro=e(no,2),ao=ro[0],lo=ro[1],co=d((function(e){var o,t;(null===(o=null==e?void 0:e.category)||void 0===o?void 0:o.label)!==ao&&lo(null===(t=null==e?void 0:e.category)||void 0===t?void 0:t.label)}),[ao]),mo=j({categories:Q,options:Ke,filterValue:Ye,withCategoriesDivider:$,optionLineHeight:X}),po=mo.items,uo=mo.itemsMap,bo=mo.selectableItems,vo=d((function(e,o){re(bo[o]),oo(o)&&eo(o),ke&&Ge("")}),[re,bo,oo,ke,Ge]),fo=N({getOptionId:R,defaultVisualFocusFirstIndex:P,onClick:vo,isChildSelectable:oo,options:bo,inputRef:Xe}),ho=fo.visualFocusItemIndex,Co=fo.visualFocusItemId,go=fo.onOptionClick;return r.createElement(g,{type:g.types.TEXT2,ref:De,className:n(k.combobox,S,p(k,t("size-"+W)),o(o({},k.empty,!io),k.stickyCategory,Oe)),id:w,"data-testid":Me||u(b.COMBOBOX,w),ellipsis:!1},r.createElement("div",{className:k.comboboxList,style:{maxHeight:_}},r.createElement(f,{ref:Xe,value:Ye,className:n(k.comboboxSearchWrapper,L),inputAriaLabel:Te,currentAriaResultId:Co,id:"combobox-search",placeholder:B,size:W,disabled:G,onChange:Ge,autoFocus:Y,loading:be,searchIconName:T,ariaExpanded:so||io,ariaHasPopup:"listbox",searchResultsContainerId:w?"".concat(w,"-listbox"):E,debounceRate:we,renderAction:Be,hideRenderActionOnInput:Ve}),Oe&&r.createElement(O,{label:ao}),io&&r.createElement(y,{stickyCategories:Oe,categories:Q,options:po,itemsMap:uo,optionClassName:A,optionRenderer:Ne,activeItemIndex:$e,onActiveCategoryChanged:co,onOptionClick:go,onOptionEnter:Je,onOptionLeave:Ce,optionLineHeight:X,shouldScrollToSelectedItem:xe,renderOnlyVisibleOptions:Se,maxOptionsWithoutScroll:Fe,visualFocusItemIndex:ho,id:w?"".concat(w,"-listbox"):E})),so&&!io&&!be&&(Ie?Ie():r.createElement("div",{className:k.comboboxNoResults},r.createElement("div",{className:k.comboboxMessageWrapper},r.createElement("span",{className:k.comboboxMessage},oe)),te&&!G&&r.createElement(C,{className:k.addNewButton,size:W,kind:C.kinds.TERTIARY,onClick:to},r.createElement("span",{className:k.buttonLabel},s(se)?se(Ye):se)))))})),H=S(F,{sizes:h,iconTypes:x.iconTypes});export{H as default};
//# sourceMappingURL=Combobox.js.map