react-box-tools/dist/select.cjs

Box tools react components, utils and hooks

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),W=require("./dropdown-CkR4kz4M.cjs"),o=require("react"),X=require("./useDebounce-CBvTkINX.cjs"),d=require("./selectIcon-DjgdMZRD.cjs"),H=require("./clsx-CeOg4f1g.cjs"),Y=L=>{const{clearable:P,searchable:j,defaultValue:y,defaultValues:S,disabled:a,placeholder:U="Select",dropdown:n,options:i,multi:_=!1,label:O,error:I,icons:m,onSelect:q,onMultiSelect:k,validateSelect:D,validateMultiSelect:R,serverOptions:b}=L,F=o.useId(),g=o.useRef(null),N={text:"",value:""},[M,E]=o.useState(I),[t,r]=o.useState({open:!1,items:i,defaultValue:"",defaultValues:[],selected:N,selectedItems:[],loading:!1}),f=t.selected,u=t.selectedItems,T=u.length>0,C=o.useRef(null),h=e=>{D&&D(e).then(s=>E(s.error))},v=e=>{R&&R(e).then(s=>E(s.error))},w=e=>{var p;if(a)return;let s=u;if(_){u.find(x=>x.value===e.value)?s=u.filter(x=>x.value!==e.value):s=[...u,e],t.selectedItems=s;var c=s.map(x=>x.value);t.defaultValues=c,k&&k(e.value,c),v(c)}else t.selected=e,t.open=!1,q&&q(e.value),h(e.value),V(e.text),(p=C.current)==null||p.setOpen(!1);r({...t})},z=()=>{a||(t.items=i,t.selected=N,t.selectedItems=[],r({...t}),h(""),v([]),V(""))},A=e=>{if(a)return;let s=i;if(e){const c=new RegExp(e,"i");s=i.filter(p=>c.test(p.text))}t.items=s,r({...t,items:s})},B=async e=>{if(!a){if(e&&b){const s=await b(e);t.items=s}t.loading=!1,r({...t})}},G=X.useDebounce(B,500),J=e=>{if(a)return;const s=e.target.value;j&&(b?(!t.loading&&r({...t,loading:!0}),G(s)):A(s))},K=e=>{a||(h(f.value),v(t.defaultValues))},V=e=>{g.current&&(g.current.value=e)},Q=e=>{if(!a){var s=u.filter(c=>c.value!==e.value);r({...t,selectedItems:s}),v(s.map(c=>c.value))}};return o.useEffect(()=>{r({...t,items:i})},[i]),o.useEffect(()=>{var e=y??"",s=i.find(c=>c.value===e);s?t.selected=s:t.selected=N,r({...t}),V(t.selected.text)},[y]),o.useEffect(()=>{let e;S&&(e=i.filter(s=>S.includes(s.value)),t.selectedItems=e),r({...t})},[S]),o.useEffect(()=>{var e;!a&&((e=C.current)==null||e.posicionate())},[f,u]),o.useEffect(()=>{E(I)},[I]),l.jsx(W.DropDown,{...n,ref:C,offset:(n==null?void 0:n.offset)??3,onClose:()=>{n!=null&&n.onClose&&n.onClose(),r({...t,open:!1})},onOpen:()=>{n!=null&&n.onOpen&&(n==null||n.onOpen()),h(f.value),v(t.defaultValues),r({...t,open:!0})},target:l.jsxs("div",{className:H.clsx(`control ${a&&"disabled"}`),children:[O&&l.jsx("label",{htmlFor:F,children:O}),l.jsxs("div",{className:"content",children:[T&&l.jsx("div",{className:"multi-items",children:u.map((e,s)=>l.jsxs("div",{className:"item",children:[l.jsx("span",{children:e.text}),l.jsx("button",{type:"button",className:"x",disabled:a,onClick:()=>Q(e),children:"×"})]},s))}),l.jsxs("div",{className:"input",children:[l.jsx("div",{className:"icon",children:m!=null&&m.main?m.main:l.jsx(d.SelectIcon,{})}),l.jsx("input",{autoComplete:"off",type:"text",id:F,ref:g,disabled:a,readOnly:!j,placeholder:U,onChange:J,onFocus:K}),(T||P&&f.value)&&l.jsx("button",{className:"clear",type:"button",onClick:z,disabled:a,children:l.jsx(d.TimesIcon,{})}),j&&!t.loading&&l.jsx("div",{className:"icon search",children:l.jsx(d.SearchIcon,{})}),t.loading&&l.jsx("div",{className:"icon loading",children:l.jsx(d.LoadingIcon,{})}),t.open?l.jsx(d.ChevronUpIcon,{}):l.jsx(d.ChevronDownIcon,{})]})]}),M&&l.jsx("span",{className:"error",children:M})]}),children:l.jsx("ul",{className:"options",children:t.items.map((e,s)=>l.jsx("li",{className:H.clsx(`item ${(u.find(c=>c.value===e.value)||f.value===e.value)&&"selected"}`),onClick:()=>w(e),children:e.text},s))})})};exports.Select=Y;