search

bmartel / chakra-multiselect

A ChakraUI infused Multiselect component
https://bmartel.github.io/chakra-multiselect
MIT License
51 stars 10 forks source link

Importing `MultiSelectTheme` triggers `SyntaxError: Named export 'Tag' not found.` #7

Closed tkrunning closed 1 year ago

tkrunning commented 2 years ago

Hi there! I'm trying to get chakra-multiselect working in my new Next app. But as soon as I import { MultiSelectTheme } from "chakra-multiselect"; (it doesn't matter whether it's in _app.js or theme.js) my application crashes with the following error:

Server Error

SyntaxError: Named export 'Tag' not found. The requested module '@chakra-ui/react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@chakra-ui/react';
const {mode: e}from"@chakra-ui/theme-tools";import{usePopper: t,useStyles: n,chakra: r,useMultiStyleConfig: l,omitThemingProps: i,StylesProvider: o,HStack: c,Box: s,Tag: a,TagLabel: u,TagCloseButton: d,IconButton: p,forwardRef: h,Input: m}from"@chakra-ui/react";import{createContext: f,mergeRefs: g}from"@chakra-ui/react-utils";import{useRef: v,useMemo: b,useCallback: y,useEffect: x,useState: _,memo: S}from"react";import{jsx: w,jsxs: k}from"react/jsx-runtime";function C(t){return{bg:e("#fff","gray.700")(t),boxShadow:e("sm","dark-lg")(t),color:"inherit",w:"full",py:"2",zIndex:1,borderRadius:"md",borderWidth:"1px",maxH:"64",overflowY:"auto",overscrollBehaviorY:"contain"}}const O={d:"flex",flex:1,flexWrap:"wrap",alignItems:"center"},I={fontSize:"md",marginEnd:3,mb:2,fontWeight:"medium",transition:"all 0.2s",opacity:1,_disabled:{opacity:.4}};function L(t){return{cursor:"pointer",transition:"background 50ms ease-out",_focus:{bg:e("gray.50","whiteAlpha.100")(t),boxShadow:"outline"},_active:{bg:e("gray.50","whiteAlpha.100")(t)},_expanded:{bg:e("gray.50","whiteAlpha.100")(t)},_selected:{bg:e("gray.100","whiteAlpha.300")(t)},_disabled:{opacity:.4,cursor:"not-allowed"}}}function P(e){return{borderRadius:"full",variant:"solid",colorscheme:e.colorscheme}}function R(t){return{variant:"ghost",_hover:{bg:e("gray.200","whiteAlpha.300")(t)},_focus:{bg:e("gray.200","whiteAlpha.300")(t),boxShadow:"outline"},_active:{bg:e("gray.100","whiteAlpha.100")(t)},colorscheme:t.colorscheme}}const V={h:"auto",minW:72},A={d:"flex",alignItems:"center"},M={fontWeight:"semibold"},E={d:"inline",h:"full",border:0,borderColor:"inherit",my:1,opacity:.8};var W={defaultProps:{size:"md"},parts:["item","selectedItem","list","textList","selectedList","actionGroup","control","input","button","groupTitle","divider","label"],sizes:{sm:{control:{minH:8,px:1,spacing:1},input:{m:"px"},actionGroup:{spacing:"0"},item:{py:1,px:2},textList:{py:0,px:1},selectedItem:{m:"px"},selectedList:{py:"px"},groupTitle:{mx:2,my:1,fontSize:"sm"}},md:{control:{minH:10,px:1,spacing:1},input:{m:"2px"},actionGroup:{spacing:"0"},item:{py:2,px:3},textList:{p:1},selectedItem:{m:"2px"},selectedList:{py:"2px"},groupTitle:{mx:4,my:2,fontSize:"sm"}},lg:{control:{minH:12,px:2,spacing:2},input:{m:1},actionGroup:{spacing:"0"},item:{py:2,px:3},textList:{py:1,px:2},selectedItem:{m:1},selectedList:{py:1},groupTitle:{mx:4,my:2,fontSize:"sm"}}},baseStyle:e=>({list:C(e),selectedList:O,item:L(e),selectedItem:P(e),button:R(e),actionGroup:A,control:V,input:{bgColor:"transparent",appearance:"none",flex:1,outline:0},groupTitle:M,divider:E,label:I})};function T(){return T=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},T.apply(this,arguments)}function B(e,t){if(null==e)return{};var n,r,l={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(l[n]=e[n]);return l}function H(e){return"object"==typeof e&&null!=e&&1===e.nodeType}function z(e,t){return(!t||"hidden"!==e)&&"visible"!==e&&"clip"!==e}function D(e,t){if(e.clientHeight<e.scrollHeight||e.clientWidth<e.scrollWidth){var n=getComputedStyle(e,null);return z(n.overflowY,t)||z(n.overflowX,t)||function(e){var t=function(e){if(!e.ownerDocument||!e.ownerDocument.defaultView)return null;try{return e.ownerDocument.defaultView.frameElement}catch(e){return null}}(e);return!!t&&(t.clientHeight<e.scrollHeight||t.clientWidth<e.scrollWidth)}(e)}return!1}function N(e,t,n,r,l,i,o,c){return i<e&&o>t||i>e&&o<t?0:i<=e&&c<=n||o>=t&&c>=n?i-e-r:o>t&&c<n||i<e&&c>n?o-t+l:0}const j=["onKeyDown"],G=["refKey","ref","onChange","onFocus","onClick","onBlur"],K=["index","key","onClick","onMouseEnter","option"],Y=["selected"];var $,F;!function(e){e.SingleCreate="singleCreate",e.SingleRemove="singleRemove",e.SingleSelect="singleSelect",e.SingleClear="singleClear",e.MultiCreate="multiCreate",e.MultiRemove="multiRemove",e.MultiSelect="multiSelect",e.MultiClear="multiClear"}($||($={})),function(e){e.SetOpen="setOpen",e.SetSearch="setSearch",e.HighlightIndex="highlightIndex"}(F||(F={}));const U=[],X=[],q={searchValue:"",resolvedSearchValue:"",isOpen:!1,highlightedIndex:0},J=(e,t)=>t,Q=(e,t,n,r)=>{r.current&&function(e,t){if(!e||!t)return;const n=function(e,t){var n=window,r=t.scrollMode,l=t.block,i=t.inline,o=t.boundary,c=t.skipOverflowHiddenElements,s="function"==typeof o?o:function(e){return e!==o};if(!H(e))throw new TypeError("Invalid target");for(var a=document.scrollingElement||document.documentElement,u=[],d=e;H(d)&&s(d);){if((d=d.parentElement)===a){u.push(d);break}null!=d&&d===document.body&&D(d)&&!D(document.documentElement)||null!=d&&D(d,c)&&u.push(d)}for(var p=n.visualViewport?n.visualViewport.width:innerWidth,h=n.visualViewport?n.visualViewport.height:innerHeight,m=window.scrollX||pageXOffset,f=window.scrollY||pageYOffset,g=e.getBoundingClientRect(),v=g.height,b=g.width,y=g.top,x=g.right,_=g.bottom,S=g.left,w="start"===l||"nearest"===l?y:"end"===l?_:y+v/2,k="center"===i?S+b/2:"end"===i?x:S,C=[],O=0;O<u.length;O++){var I=u[O],L=I.getBoundingClientRect(),P=L.height,R=L.width,V=L.top,A=L.right,M=L.bottom,E=L.left;if("if-needed"===r&&y>=0&&S>=0&&_<=h&&x<=p&&y>=V&&_<=M&&S>=E&&x<=A)return C;var W=getComputedStyle(I),T=parseInt(W.borderLeftWidth,10),B=parseInt(W.borderTopWidth,10),z=parseInt(W.borderRightWidth,10),j=parseInt(W.borderBottomWidth,10),G=0,K=0,Y="offsetWidth"in I?I.offsetWidth-I.clientWidth-T-z:0,$="offsetHeight"in I?I.offsetHeight-I.clientHeight-B-j:0;if(a===I)G="start"===l?w:"end"===l?w-h:"nearest"===l?N(f,f+h,h,B,j,f+w,f+w+v,v):w-h/2,K="start"===i?k:"center"===i?k-p/2:"end"===i?k-p:N(m,m+p,p,T,z,m+k,m+k+b,b),G=Math.max(0,G+f),K=Math.max(0,K+m);else{G="start"===l?w-V-B:"end"===l?w-M+j+$:"nearest"===l?N(V,M,P,B,j+$,w,w+v,v):w-(V+P/2)+$/2,K="start"===i?k-E-T:"center"===i?k-(E+R/2)+Y/2:"end"===i?k-A+z+Y:N(E,A,R,T,z+Y,k,k+b,b);var F=I.scrollLeft,U=I.scrollTop;w+=U-(G=Math.max(0,Math.min(U+G,I.scrollHeight-P+$))),k+=F-(K=Math.max(0,Math.min(F+K,I.scrollWidth-R+Y)))}C.push({el:I,top:G,left:K})}return C}(e,{boundary:t,block:"nearest",scrollMode:"if-needed"});n.forEach(({el:e,top:t,left:n})=>{e.scrollTop=t,e.scrollLeft=n})}(t.current,n.current)},Z=e=>`${e.charAt(0).toUpperCase()}${e.substring(1)}`,ee=(e,t="")=>`${t}${null==e?void 0:e.value}`,te=e=>"string"==typeof e?{value:e,label:Z(e)}:e,ne=e=>e.length>1e4?1e3:e.length>1e3?200:0,re=(e,t,n)=>e.filter(e=>n(e).value.toString().toLowerCase().includes(t.toString().toLowerCase())).sort(e=>n(e).value.toString().toLowerCase().indexOf(t.toString().toLowerCase()));function le(e,t,n){return n?T({},e,"function"==typeof t?{[n]:t(e[n])}:{[n]:t}):"function"==typeof t?t(e):t}var ie;!function(e){e.List="list",e.Input="input",e.Both="both"}(ie||(ie={}));const[oe,ce]=f({strict:!1,name:"SelectContext"}),[se,ae]=f({strict:!1,name:"SelectInputContext"}),[ue,de]=f({strict:!1,name:"SelectedContext"}),[pe,he]=f({strict:!1,name:"SelectedListContext"}),[me,fe]=f({strict:!1,name:"SelectActionContext"});function ge({create:e=!1,single:n=!1,selectionVisibleIn:r=ie.Input,getDebounce:l=ne,getOption:i=te,stateReducer:o=J,filterFn:c=re,scrollToIndex:s=Q,shiftAmount:a=5,duplicates:u,options:d,value:p,onChange:h,placement:m="bottom-start"}){const[{searchValue:f,resolvedSearchValue:g,isOpen:S,highlightedIndex:w},k]=function(e,t){const n=v();n.current=t;const[r,l]=_(e);return[r,y((e,t)=>{if(!t)throw new Error("An action type is required to update the state");return l(r=>n.current(r,e(r),t))},[l])]}(q,o),C=!n,O=v(),I=v([]),L=v(""),P=v(),R=v(),V=v({}),A=v(),M=v(),E=v(),W=v(w),H=v(),z=v(!1),D=t({placement:m});W.current=w,M.current=c,E.current=s,A.current=h,C&&void 0===p&&(p=U),d||(d=X);const N=d;d=b(()=>{var e,t;return r!==ie.Input?null==(e=d)?void 0:e.map(e=>{var t;return T({},i(e),{selected:null==(t=Array.isArray(p)?p:[p||""])?void 0:t.some(t=>i(t).value===i(e).value)})}):C&&!u?null==(t=d)?void 0:t.filter(e=>{var t;return!(null!=(t=p)&&t.some(t=>i(t).value===i(e).value))}):d},[d,p,u,C,i,r]);const Y=b(()=>C?p.map(e=>N.find(t=>i(t).value===i(e).value)||i(e)):N.find(e=>i(e).value===i(p).value)||i(p),[C,p,N,i]);d=b(()=>g?null==M.current?void 0:M.current(d,g,i):d,[d,g,i]),d=b(()=>e&&f?[T({created:!0},i(f)),...d]:d,[e,f,d,i]),L.current=p,I.current=d;const Z=y(e=>{k(t=>le(t,e,"isOpen"),F.SetOpen)},[]),ee=y(()=>{Z(!1)},[]),oe=y(()=>{Z(!0)},[]),ce=function(e,t=0){const n=v(null),r=v();return r.current=e,x(()=>()=>{clearTimeout(n.current)},[t]),y(async(...e)=>(n.current&&clearTimeout(n.current),new Promise((l,i)=>{n.current=setTimeout(()=>{n.current=null;try{l(r.current(...e))}catch(e){i(e)}},t)})),[t])}(e=>{k(t=>le(t,e,"resolvedSearchValue"),F.SetSearch)},l(d)),se=y(e=>{k(t=>le(t,e,"searchValue"),F.SetSearch),ce(e)},[]),ae=y(e=>{const t=I.current;k(n=>T({},n,{highlightedIndex:Math.min(Math.max(0,"function"==typeof e?e(n.highlightedIndex):e),t.length-1)}),F.HighlightIndex)},[]),ue=y(t=>{const n=I.current[t];if(n){const e=i(n);if(C){const t=L.current;!u&&t.some(t=>i(t).value===e.value)||null==A.current||A.current([...t,e.value],{action:e.created?$.MultiCreate:$.MultiSelect,value:e})}else null==A.current||A.current(e.value,{action:e.created?$.SingleCreate:$.SingleSelect,value:e})}(e||C)&&se(""),C||ee()},[C,e,u,i]),de=y(()=>{null==A.current||A.current(C?[]:"",{action:C?$.MultiClear:$.SingleClear,value:""})},[C]),pe=y(e=>{const t="number"==typeof e,n=Array.isArray(L.current),r=n?L.current:[L.current],l=r.filter((n,r)=>t?r!==e:e!==n);n?A.current(l,{action:$.MultiRemove,value:i(t?r[e]:e)}):A.current(l[0]||"",{action:$.SingleRemove,value:i(t?r[e]:e)})},[i]),he=y(e=>{se(e.target.value),oe()},[]),me=y(()=>{e&&!C||se(""),oe()},[e,C]),fe=(e,t)=>({shift:n,meta:r},l)=>{l.preventDefault();const i=t||r?1e12:e||n?a-1:1;oe(),z.current=!0,ae(e=>e-i)},ge=(e,t)=>({shift:n,meta:r},l)=>{l.preventDefault();const i=t||r?1e12:e||n?a-1:1;oe(),z.current=!0,ae(e=>e+i)},ve=y((e,t)=>{if(S){const e=I.current;(f||e[W.current])&&t.preventDefault(),e[W.current]&&ue(W.current)}},[S,f]),be=y(()=>{const e=L.current,t=C?e[e.length-1]:e;(C&&!f||!C&&t)&&(pe(t),se(""))},[f,C]),ye=(xe={ArrowUp:fe(),ArrowDown:ge(),PageUp:fe(!0),PageDown:ge(!0),Home:fe(!1,!0),End:ge(!1,!0),Escape:ee,Tab:ee,Enter:ve,Backspace:be},(e={})=>{let{onKeyDown:t}=e;return T({},B(e,j),{onKeyDown:e=>{const{keyCode:n,key:r,shiftKey:l,metaKey:i}=e,o=xe[r]||xe[n];o&&o({keyCode:n,key:r,shift:l,meta:i},e),t&&t(e)}})});var xe;const _e=y((e={})=>{let{refKey:t="ref",ref:n,onChange:r,onFocus:l,onClick:i,onBlur:o}=e,c=B(e,G);return ye(T({[t]:e=>{P.current=e,n&&(n.current=e)},value:(S?f||Y.label:Y?null==Y?void 0:Y.label:"")||"",onChange:e=>{he(e),r&&r(e)},onFocus:e=>{me(),l&&l(e)},onClick:e=>{me(),i&&i(e)},onBlur:e=>{o&&(e.persist(),V.current.cb=o,V.current.event=e)}},c))},[S,f,Y,me,he]),Se=y((e={})=>{let{index:t,key:n=t,onClick:r,onMouseEnter:l,option:i}=e,o=B(e,K);if("number"!=typeof t||t<0)throw new Error("useSelect: The getOptionProps prop getter requires an index property, eg. 'getOptionProps({index: 1})'");return T({key:n,option:i},o,{onClick:e=>{void 0!==i.selected&&i.selected?pe(i.value):ue(t),r&&r(e)},onMouseEnter:e=>{z.current=!1,ae(t),l&&l(e)}})},[]);return function(e,t,n,r){const l=v(),i=v(),o=v();o.current=t;const c=n||l,s=r||i,a=y(e=>{if("click"===e.type&&"touchstart"===e.type)return;const t=s.current,n=c.current;null!=t&&t.contains(e.target)||null!=n&&n.contains(e.target)||o.current(e)},[]);x(()=>(e&&(document.addEventListener("touchstart",a,!0),document.addEventListener("click",a,!0)),()=>{document.removeEventListener("touchstart",a,!0),document.removeEventListener("click",a,!0)}),[e,a])}(S,ee,O,R),x(()=>{f&&ae(0)},[f,ae]),x(()=>{var e,t;ae(0),!S&&null!=(e=V.current)&&e.event&&(null==(t=V.current)||t.cb(V.current.event),V.current.event=null)},[S]),x(()=>{null==E.current||E.current(w,H,O,z)},[w]),x(()=>{S&&P.current&&setTimeout(()=>{var e;null==(e=P.current)||e.focus()})},[S]),{multi:C,clearable:C&&!!(Array.isArray(p)?p.length>0:p),clearAll:de,optionsRef:O,controlRef:R,popper:D,value:p,searchValue:f,isOpen:S,highlightedIndexRef:W,highlightedValueRef:H,enableScrollRef:z,selectedOption:Y,visibleOptions:d,selectionVisibleIn:r,selectIndex:ue,removeValue:pe,setOpen:Z,setSearch:se,highlightIndex:ae,getInputProps:_e,getOptionProps:Se,getOption:i}}function ve(e={}){const{clearAll:t,clearable:r}=fe(),l=n(),i=y(e=>{e.preventDefault(),e.stopPropagation(),t()},[]);return T({},e,{clearOnClick:i,clearable:r,__css:l.actionGroup})}function be(e={}){const{getInputProps:t}=ae(),r=n();return T({},e,t(),{__css:r.input})}function ye(e={}){return T({},e,{__css:n().label})}function xe(e={}){var t;const{isOpen:r,setOpen:l}=fe(),i=y(e=>{e.preventDefault(),e.stopPropagation(),l(e=>!e)},[l]),o=n();return T({},e,{__css:T({},o.button,null==(t=r&&o.button)?void 0:t._active),isOpen:r,onClick:i})}function _e(e={}){return T({},e,{__css:T({},n().button)})}function Se(e={}){const{removeValue:t}=de(),r=n(),l=y(()=>t(e.value),[e.value]);return b(()=>({key:e.key||e.value,onClick:l,__css:r.selectedItem}),[e.value,e.key,l,r.selectedItem])}function we(e={}){let{selected:t}=e,r=B(e,Y);const{getOptionProps:l,highlightedIndexRef:i,highlightedValueRef:o}=ce(),c=n(),s=i.current===r.index;return b(()=>{var e,n;const i={value:r.value,label:r.label||Z(r.value),selected:t};return T({},l({option:i,key:r.key||ee(i),index:r.index}),{highlightedRef:s?o:void 0,__css:T({},c.item,null==(e=t&&c.item)?void 0:e._selected,null==(n=s&&c.item)?void 0:n._active)})},[s,t,r.key,r.label,r.value,r.index,c.item])}function ke(){const{isOpen:e,getOption:t,optionsRef:r,popper:l,visibleOptions:i}=ce(),o=n();return b(()=>({ref:g(r,l.popperRef),isOpen:e,visibleOptions:i,getOption:t,__css:o.list}),[e,i,o.list])}function Ce(e={}){const{value:t,multi:r,selectionVisibleIn:l}=he(),i=n();return T({},e,{multi:r,selectedItems:t,selectionVisibleIn:l,__css:i.selectedList,textList:{__css:i.textList}})}function Oe(e={}){const{isOpen:t,popper:r,controlRef:l}=ce(),i=n();return T({},e,b(()=>({ref:g(e.ref,l,r.referenceRef)}),[e.ref,l,r.referenceRef]),{isOpen:t,__css:i.control})}function Ie(e={}){const t=e.getOption||te,[n,r]=_(e.value),[l,i]=_(()=>e.options.map(t));return{value:n,options:l,onChange:y((e,n)=>{switch(null==n?void 0:n.action){case $.SingleCreate:r(e),i(n=>{const r=t(e);return n.some(e=>t(e).value===r.value)?n:[T({},r,{created:!0}),...n]});break;case $.SingleClear:case $.SingleRemove:case $.SingleSelect:r(e);break;case $.MultiCreate:const n=e[e.length-1];r(e),i(e=>{const r=t(n);return e.some(e=>t(e).value===r.value)?e:[T({},r,{created:!0}),...e]});break;default:r(e)}},[r,i,t])}}const Le=["value","label","index","selected","created"],Pe=["highlightedRef","option"],Re=["__css","visibleOptions","isOpen","getOption","ref"],Ve=["key"],Ae=["isActive","width","height","__css"],Me=["width","height"],Ee=["value"],We=["onClick","__css"],Te=["__css","size","ariaLabel","icon","isOpen"],Be=["__css","size","ariaLabel","icon"],He=["children"],ze=["__css","textList","selectedItems","multi","selectionVisibleIn"],De=["__css","clearable","clearOnClick","clearButtonProps","toggleButtonProps"],Ne=["children"],je=["label","labelProps","controlProps","listProps","selectedListProps","actionGroupProps"],Ge=r("svg"),Ke=S(e=>{const{children:t}=e,n=l("MultiSelect",e),c=ge(i(e)),s=b(()=>c,[c]),a=b(()=>({getInputProps:c.getInputProps}),[c.getInputProps]),u=b(()=>({removeValue:c.removeValue}),[c.removeValue]),d=b(()=>({value:c.value,multi:c.multi,selectionVisibleIn:c.selectionVisibleIn}),[c.value,c.multi,c.selectionVisibleIn]),p=b(()=>({isOpen:c.isOpen,setOpen:c.setOpen,clearable:c.clearable,clearAll:c.clearAll}),[c.isOpen,c.setOpen,c.clearable,c.clearAll]);return w(o,{value:n,children:w(oe,{value:s,children:w(se,{value:a,children:w(pe,{value:d,children:w(ue,{value:u,children:w(me,{value:p,children:w(r.div,{pos:"relative",children:t})})})})})})})});Ke.displayName="Select";const Ye=S(e=>{const t=ye();return w(r.label,T({},e,t))});Ye.displayName="SelectLabel";const $e=S(({label:e,created:t})=>k(c,{justifyContent:"space-between",w:"full",role:"list",children:[w(s,{children:e}),!!t&&w(a,{flexShrink:0,children:w(u,{fontSize:"xs",fontWeight:"bold",role:"listitem",children:"New"})})]}));$e.displayName="SelectOptionLabel";const Fe=S(e=>{let{value:t,label:n,index:l,selected:i,created:o}=e,c=B(e,Le);const s=we({value:t,label:n,index:l,selected:i}),{highlightedRef:a,option:u}=s,d=B(s,Pe);return w(r.li,T({ref:a&&a,role:"option"},i&&{"aria-selected":i},c,d,{children:w($e,{label:(null==u?void 0:u.label)||t,created:!!o})}))});Fe.displayName="SelectOptionItem";const Ue=S(({label:e="No results found"})=>{const t=n();return w(r.li,{__css:t.item,children:w($e,{label:e})})});Ue.displayName="EmptySelectResults";const Xe=S(e=>{const t=ke(),{__css:n,visibleOptions:l,isOpen:i,getOption:o,ref:c}=t,s=B(t,Re),a=i,u=y((e,t)=>{const n=o(e);return{key:n.id||ee(n,"option-"),value:n.value,label:n.label||Z(n.value),selected:n.selected,created:n.created,index:t}},[]);return w(r.ul,T({ref:c,__css:b(()=>T({listStyle:"none",position:"absolute"},!a&&{display:"none"},n),[a,n]),"aria-orientation":"vertical",role:"listbox"},s,e,{children:a&&l.length>0?l.map((e,t)=>{const n=u(e,t),{key:r}=n,l=B(n,Ve);return w(Fe,T({},l),r)}):w(Ue,{})}))});Xe.displayName="SelectList";const qe=e=>{let{isActive:t,width:n=4,height:r=4,__css:l}=e,i=B(e,Ae);return w(Ge,T({viewBox:"0 0 24 24",stroke:"currentColor",fill:"none",width:n,height:r,__css:T({},l,t&&(null==l?void 0:l._active))},i,{children:w("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M19 9l-7 7-7-7"})}))},Je=e=>{let{width:t=4,height:n=4}=e,r=B(e,Me);return w(Ge,T({viewBox:"0 0 24 24",stroke:"currentColor",fill:"none",width:t,height:n},r,{children:w("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"})}))},Qe=S(e=>{const t=be(e);return w(r.input,T({},t))});Qe.displayName="SelectInput";const Ze=S(e=>{let{value:t}=e;const n=Se(T({value:t},B(e,Ee))),{onClick:r,__css:l}=n,i=B(n,We);return k(a,T({},l,i,{children:[w(u,{children:t}),w(d,{onClick:r})]}))});Ze.displayName="SelectedItem";const et=S(e=>{const t=xe(e),{__css:n,size:r="sm",ariaLabel:l="toggle menu",icon:i=qe,isOpen:o}=t,c=B(t,Te);return w(p,T({tabIndex:0,size:r,"aria-label":l,"aria-haspopup":!0,"aria-expanded":o,icon:w(i,{isActive:o,__css:{transitionDuration:"200ms",transitionProperty:"transform",_active:{transform:"rotate(180deg)"}}})},n,c))});et.displayName="SelectToggleButton";const tt=S(e=>{const t=_e(e),{__css:n,size:r="sm",ariaLabel:l="clear all selected",icon:i=Je}=t,o=B(t,Be);return w(p,T({tabIndex:0,size:r,"aria-label":l,icon:w(i,{})},n,o))});tt.displayName="SelectClearButton";const nt=S(e=>{let{children:t}=e;const n=Ce(B(e,He)),{__css:r,textList:l,selectedItems:i,multi:o,selectionVisibleIn:c}=n,a=B(n,ze);return k(s,T({},r,a,{children:[o&&c!==ie.List&&(null==i?void 0:i.map(e=>w(Ze,{value:e},`selected-item-${e}`))),o&&c===ie.List&&!(null==i||!i.length)&&w(s,T({},null==l?void 0:l.__css,{children:null==i?void 0:i.join(", ")})),t]}))});nt.displayName="SelectedList";const rt=S(e=>{const t=ve(e),{__css:n,clearable:r,clearOnClick:l,clearButtonProps:i,toggleButtonProps:o}=t,s=B(t,De);return k(c,T({},n,s,{children:[r&&w(tt,T({onClick:l},i)),w(et,T({},o))]}))});rt.displayName="SelectActionGroup";const lt=h((e,t)=>{let{children:n}=e,r=B(e,Ne);const{ref:l,__css:i}=Oe({ref:t});return w(m,T({ref:l,as:c},i,r,{children:n}))}),it=e=>{let{label:t,labelProps:n,controlProps:r,listProps:l,selectedListProps:i,actionGroupProps:o}=e,c=B(e,je);return k(Ke,T({},c,{children:[t&&w(Ye,T({},n,{children:t})),k(lt,T({},r,{children:[w(nt,T({},i,{children:w(Qe,{})})),w(rt,T({},o))]})),w(Xe,T({},l))]}))};export{Ge: ChakraSvg,$: ChangeActions,Ue: EmptySelectResults,it: MultiSelect,W: MultiSelectTheme,Ke: Select,rt: SelectActionGroup,me: SelectActionProvider,F: SelectActions,tt: SelectClearButton,lt: SelectControl,Qe: SelectInput,se: SelectInputProvider,Ye: SelectLabel,Xe: SelectList,Fe: SelectOptionItem,$e: SelectOptionLabel,oe: SelectProvider,et: SelectToggleButton,Ze: SelectedItem,nt: SelectedList,pe: SelectedListProvider,ue: SelectedProvider,ie: SelectionVisibilityMode,ee: idFromOption,Z: labelFromValue,_e: useClearButton,Ie: useMultiSelect,ge: useSelect,fe: useSelectActionContext,ve: useSelectActionGroup,xe: useSelectButton,ce: useSelectContext,Oe: useSelectControl,be: useSelectInput,ae: useSelectInputContext,we: useSelectItem,ye: useSelectLabel,ke: useSelectList,de: useSelectedContext,Se: useSelectedItem,Ce: useSelectedList,he: useSelectedListContext} = pkg;

Stack trace

<unknown>

file:///Users/tkrunning/Code/nomadgate-app/node_modules/chakra-multiselect/dist/index.modern.mjs (1)
ModuleJob._instantiate

node:internal/modules/esm/module_job (124:21)
async ModuleJob.run

node:internal/modules/esm/module_job (181:5)
async ESMLoader.import

node:internal/modules/esm/loader (281:24)
async importModuleDynamicallyWrapper

node:internal/vm/module (437:15)

The only step I've done prior to the import is installing with npm install --save chakra-multiselect.

It's quite possible that this is user error (I'm not very experienced with React), however I'm not sure what I'm doing wrong given that I've only taken two first steps from the documentation which are essentially just copy-paste.

Any idea what's going on?

@chakra-ui/react version is 2.3.4, in case that matters. chakra-multiselect is version 0.3.7.

godzzo commented 2 years ago

Same here...

santalife commented 2 years ago

same issue here... any fixes? would really want to use this library as its alot cleaner than most multiselect

KamranMK commented 2 years ago

same here, would be really nice to get this issue fixed, since its impossible to use

fanismahmalat commented 1 year ago

same here!

bmartel commented 1 year ago

Hey everyone 👋 . Sorry for the delayed response. I created a sample nextjs app through codesandbox which appears to work just fine. I put the steps in the readme that were taken to create this example app. https://codesandbox.io/p/sandbox/quizzical-lumiere-ih4jxu?file=%2FREADME.md&selection=%5B%7B%22endColumn%22%3A15%2C%22endLineNumber%22%3A38%2C%22startColumn%22%3A15%2C%22startLineNumber%22%3A38%7D%5D

Let me know if this fixes things for you, or if you have any other questions.

VinGitonga commented 1 year ago

It doesn't fix it. Same track trace

bmartel commented 1 year ago

Hey all. Would someone be able to supply a test app that reproduces this, I have tried various versions of nextjs from newest all the way back to version 12, with and without typescript and also varying versions of chakraui/react from 2.3.4 to latest and I cannot seem to reproduce this.

bmartel commented 1 year ago

Closing until someone can give a minimal reproduction to this that I can debug.