UNPKG

@blinkstrike/chakra-ui-autocomplete

Version:

An accessible autocomplete utility library built for chakra UI

3 lines (2 loc) 5.96 kB
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),l=require("downshift"),r=require("match-sorter"),o=e(require("react-highlight-words/index")),a=e(require("react-use/lib/useDeepCompareEffect")),i=require("@chakra-ui/react"),s=require("@chakra-ui/icons");function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e}).apply(this,arguments)}function c(e,t){return r.matchSorter(e,t,{keys:["value","label"]})}function p(e){return n.createElement(i.Text,null,n.createElement(i.Box,{as:"span"},"Create")," ",n.createElement(i.Box,{as:"span",bg:"yellow.300",fontWeight:"bold"},'"',e,'"'))}exports.CUIAutoComplete=function(e){var r=e.items,g=e.optionFilterFunc,d=void 0===g?c:g,m=e.itemRenderer,b=e.highlightItemBg,h=void 0===b?"gray.100":b,f=e.placeholder,y=e.label,I=e.listStyleProps,C=e.labelStyleProps,x=e.inputStyleProps,v=e.toggleButtonStyleProps,E=e.tagStyleProps,S=e.selectedIconProps,k=e.onClearAll,P=e.clearAll,w=void 0!==P&&P,O=e.keyboardShortcuts,T=void 0===O||O,B=e.onCreateItem,j=e.icon,A=e.hideToggleButton,F=void 0!==A&&A,R=e.disableCreateItem,q=void 0!==R&&R,D=e.createItemRenderer,L=void 0===D?p:D,M=e.renderCustomInput,V=function(e,t){if(null==e)return{};var n,l,r={},o=Object.keys(e);for(l=0;l<o.length;l++)t.indexOf(n=o[l])>=0||(r[n]=e[n]);return r}(e,["items","optionFilterFunc","itemRenderer","highlightItemBg","placeholder","label","listStyleProps","labelStyleProps","inputStyleProps","toggleButtonStyleProps","tagStyleProps","selectedIconProps","listItemStyleProps","onClearAll","clearAll","keyboardShortcuts","onCreateItem","icon","hideToggleButton","disableCreateItem","createItemRenderer","renderCustomInput"]),K=t.useState(!1),W=K[0],_=K[1],H=t.useState(""),U=H[0],z=H[1],G=t.useState(r),J=G[0],N=G[1],Q=t.useState(""),X=Q[0],Y=Q[1],Z=t.useRef(null),$="dark"===i.useColorMode().colorMode?"whiteAlpha.400":"gray.300",ee=l.useMultipleSelection(V),te=ee.getSelectedItemProps,ne=ee.getDropdownProps,le=ee.addSelectedItem,re=ee.removeSelectedItem,oe=ee.selectedItems,ae=oe.map((function(e){return e.value})),ie=l.useCombobox({inputValue:U,selectedItem:void 0,items:J,onInputValueChange:function(e){var t=e.selectedItem,n=d(r,e.inputValue||"");W&&n.length>0&&_(!1),t||N(n)},stateReducer:function(e,t){var n=t.changes;switch(t.type){case l.useCombobox.stateChangeTypes.InputBlur:return u({},n,{isOpen:!1});case l.useCombobox.stateChangeTypes.InputKeyDownEnter:case l.useCombobox.stateChangeTypes.ItemClick:return u({},n,{highlightedIndex:e.highlightedIndex,inputValue:U,isOpen:!0});case l.useCombobox.stateChangeTypes.FunctionSelectItem:return u({},n,{inputValue:U});default:return n}},onStateChange:function(e){var t=e.inputValue,n=e.selectedItem;switch(e.type){case l.useCombobox.stateChangeTypes.InputChange:z(t||"");break;case l.useCombobox.stateChangeTypes.InputKeyDownEnter:case l.useCombobox.stateChangeTypes.ItemClick:n&&(ae.includes(n.value)?Y("Item already selected."):Y(""),ae.includes(n.value)?re(n):B&&W?(B(n),_(!1),N(r),z("")):le(n),he(null))}}}),se=ie.isOpen,ue=ie.getToggleButtonProps,ce=ie.getLabelProps,pe=ie.getMenuProps,ge=ie.getInputProps,de=ie.highlightedIndex,me=ie.getItemProps,be=ie.openMenu,he=ie.selectItem,fe=ie.setHighlightedIndex;return t.useEffect((function(){0!==J.length||q||(_(!0),N([{label:""+U,value:U}]),fe(0))}),[J,_,fe,U,q]),a((function(){N(r)}),[r]),n.createElement(i.Stack,null,n.createElement(i.FormLabel,Object.assign({},ce(u({},C))),y),oe&&n.createElement(i.Stack,{spacing:2,isInline:!0,flexWrap:"wrap"},oe.map((function(e,t){return n.createElement(i.Tag,Object.assign({mb:1},E,{key:"selected-item-"+t},te({selectedItem:e,index:t})),n.createElement(i.TagLabel,null,e.label),n.createElement(i.TagCloseButton,{onClick:function(t){t.stopPropagation(),re(e)},"aria-label":"Remove menu selection badge"}))}))),n.createElement(i.Stack,Object.assign({},ge({onFocus:function(){return be()}})),M?M(u({},x,ge(ne({placeholder:f,onClick:se?function(){}:be,onFocus:se?function(){}:be,ref:Z}))),u({},v,ue(),{"aria-label":"toggle menu"})):n.createElement(n.Fragment,null,n.createElement(i.Input,Object.assign({},x,ge(ne({placeholder:f,onClick:se?function(){}:be,onFocus:se?function(){}:be,onKeyDown:function(e){if(!1!==T)if("Escape"===e.key)se&&(z(""),_(!1));else if("Enter"===e.key)if(null!==de){var t=J[de];t&&(ae.includes(t.value)?re(t):B&&W?(B(t),_(!1),N(r),z("")):le(t))}else W&&B&&(B({label:U,value:U}),z(""));else"ArrowDown"===e.key?fe((function(e){return null===e||e===J.length-1?0:e+1})):"ArrowUp"===e.key?fe((function(e){return null===e||0===e?J.length-1:e-1})):"Tab"===e.key&&se&&null===de&&(z(""),_(!1))},ref:Z})))),!F&&n.createElement(i.Button,Object.assign({},v,ue(),{"aria-label":"toggle menu"}),n.createElement(s.ArrowDownIcon,null)))),w&&oe.length>0&&n.createElement(i.Button,{onClick:function(){z(""),N(r),fe(0),he(null),k&&k()},variant:"link",color:"blue.500"},"Clear All"),X&&n.createElement(i.Text,{color:"red.500"},X),n.createElement(i.Box,{pb:4,mb:4},n.createElement(i.List,Object.assign({bg:"white",borderRadius:"4px",border:se&&"1px solid rgba(0,0,0,0.1)",borderColor:$,boxShadow:"6px 5px 8px rgba(0,50,30,0.02)"},I,pe()),se&&J.map((function(e,t){return n.createElement(i.ListItem,Object.assign({px:2,py:1,borderBottom:"1px solid rgba(0,0,0,0.01)",_hover:{bg:"grey.900"},bg:de===t?h:"inherit",key:""+e.value+t},me({item:e,index:t})),W?L(e.label):n.createElement(i.Box,{display:"inline-flex",alignItems:"center"},ae.includes(e.value)&&n.createElement(i.ListIcon,Object.assign({as:j||s.CheckCircleIcon,color:"green.500",role:"img",display:"inline","aria-label":"Selected"},S)),m?m(e):n.createElement(o,{autoEscape:!0,searchWords:[U||""],textToHighlight:(l=e,l.label)})));var l})))))}; //# sourceMappingURL=chakra-ui-autocomplete.cjs.production.min.js.map