@clicktap/ui 0.39.1 → 0.40.0

package/components/Select/ComboBoxSelect.js

@@ -1 +1 @@
-"use client";import{jsxs as z,jsx as r}from"react/jsx-runtime";import{forwardRef as ye,useRef as a,useState as Ie,useMemo as G,useEffect as x}from"react";import{useFilter as ve,useObjectRef as Ce,useComboBox as Re,useButton as Ke,HiddenSelect as Be}from"react-aria";import{useComboBoxState as Fe}from"react-stately";import{cn as o}from"../../utils/cn.js";import"framer-motion";import{Pulse as Ne}from"../Loader/Pulse.js";import{SelectTags as Se,ChevronIcon as Pe,SelectOverlay as we,SelectListBox as Ve}from"./parts.js";import"react-aria-components";function h(l){return l?typeof l.rendered=="string"?l.rendered:l.textValue??"":""}function Me(l){let d=l.getFirstKey();for(;d!=null;){if(l.getItem(d)?.type==="item")return d;d=l.getKeyAfter(d)}return null}function Oe(l,d){const{label:y,description:w,errorMessage:V,children:L,placeholder:M,isLoading:O,slots:D,popoverOffset:W,className:_,classNames:n,autoComplete:I,menuTrigger:J,selectTextOnFocus:Q=!0,autoFocusFirstOption:U=!0,searchable:De,selectionMode:X="single",selectedKey:Y,defaultSelectedKey:Z,selectedKeys:v,defaultSelectedKeys:C,onSelectionChange:T,name:$,...f}=l,s=X==="multiple",R=!!f.isDisabled,g=a(!1),p=a(null),u=f.inputValue!==void 0,[K,m]=Ie(""),ee=u?f.inputValue:K,te=G(()=>s&&v?[...v]:void 0,[s,v]),oe=G(()=>s&&C?[...C]:void 0,[s,C]),A={...f,label:y,children:L,placeholder:M,isDisabled:R,menuTrigger:J??"focus",autoComplete:I,inputValue:ee,...s?{selectionMode:"multiple",value:te,defaultValue:oe,onChange:T}:{selectedKey:Y,defaultSelectedKey:Z,onSelectionChange:e=>{if(!u){const i=e!=null?p.current?.collection.getItem(e):null;m(h(i))}T?.(e)}},onInputChange:e=>{u||m(e),f.onInputChange?.(e),!s&&e===""&&p.current?.selectedKey!=null&&p.current.setSelectedKey(null)}},{contains:ne}=ve({sensitivity:"base"}),t=Fe({...A,defaultFilter:ne,allowsEmptyCollection:!0});x(()=>{p.current=t});const H=a(0),B=t.selectionManager.selectedKeys.size;x(()=>{s&&(B>H.current&&!u&&m(""),H.current=B)},[s,B,u]);const F=h(t.selectedItem);x(()=>{u||s||g.current||K===F||m(F)},[F,u,K,s]);const se=a(null),k=Ce(d),E=a(null),j=a(null),N=a(null),S=a(null),P=a(null),{inputProps:re,listBoxProps:le,labelProps:ie,buttonProps:ae,descriptionProps:ue,errorMessageProps:ce}=Re({...A,inputRef:k,listBoxRef:E,popoverRef:j,buttonRef:N},t),{buttonProps:de}=Ke(ae,N),b=t.displayValidation.isInvalid,{onKeyDown:fe,onFocus:pe,onBlur:me,...ge}=re,be=e=>{e.key==="Home"||e.key==="End"||fe?.(e)};x(()=>{const e=t.selectionManager;if(!U||!t.isOpen||t.inputValue.length===0){P.current=null;return}const i=e.focusedKey;if(i!=null&&i!==P.current)return;const c=Me(t.collection);P.current=c??null,c!=null&&c!==i&&e.setFocusedKey(c)});const xe=e=>{pe?.(e);const i=g.current;if(g.current=!0,i||!Q)return;const c=e.target,q=c.value;q&&requestAnimationFrame(()=>{c.value===q&&c.select()})},he=e=>{me?.(e);const i=e.currentTarget;requestAnimationFrame(()=>{document.activeElement!==i&&(g.current=!1,u||m(s?"":h(p.current?.selectedItem)))})};return z("div",{ref:se,className:o("flex flex-col","w-full",_),children:[r("label",{...ie,className:o("flex","text-xs text-slate-500",n?.label),children:y}),r(Be,{state:t,triggerRef:S,label:y,name:$,isDisabled:R,autoComplete:I}),s&&r(Se,{items:(t.selectedItems??[]).map(e=>({id:e.key,label:h(e)})),onRemove:e=>t.selectionManager.toggleSelection(e),classNames:{tagGroup:o(n?.tagGroup),tag:o(n?.tag),tagRemoveButton:o(n?.tagRemoveButton)}}),z("div",{ref:S,className:o("flex","relative","w-full",n?.comboBoxContainer),children:[r("input",{...ge,onKeyDown:be,onFocus:xe,onBlur:he,ref:k,placeholder:M,autoComplete:I,className:o("border border-solid border-slate-300","text-sm text-slate-900","py-0 px-2","h-10 w-full","m-0","rounded-md","bg-white","transition-all ease-in-out duration-200","hover:border-slate-400","focus:border-slate-400 focus:outline focus:outline-2 focus:outline-slate-200","disabled:bg-slate-100 disabled:border-slate-300",O?"disabled:text-slate-900":"disabled:text-slate-500",b&&"border-red-500 bg-red-100 text-red-600 placeholder:text-slate-400",b&&"hover:border-red-600 focus:border-red-600 focus:outline-red-200",n?.input)}),O?r("div",{className:o("absolute top-2 right-2","block",n?.loader),children:D?.loadingIcon||r(Ne,{})}):r("button",{...de,ref:N,className:o("absolute top-2 right-0","block","border-none bg-none",n?.arrowButton),children:r(Pe,{isOpen:t.isOpen,isDisabled:R,isInvalid:b,buttonIcon:D?.buttonIcon})}),t.isOpen&&t.collection.size>0&&r(we,{state:t,triggerRef:S,popoverRef:j,offset:W,className:o(n?.listContainer),children:r(Ve,{state:t,listBoxProps:le,listBoxRef:E,optionVirtualFocus:!0,optionClassName:o(n?.option),sectionHeadingClassName:o(n?.sectionHeading),className:o("max-h-80","overflow-y-auto","outline-none",n?.list)})})]}),w&&r("span",{...ue,className:o("flex","text-xs","text-slate-500",n?.description),children:w}),b&&typeof V=="string"&&r("span",{...ce,className:o("flex","text-xs","text-red-500",n?.errorMessage),children:V})]})}const We=ye(Oe);export{We as ComboBoxSelect,We as default};
+"use client";import{jsxs as G,jsx as a}from"react/jsx-runtime";import{forwardRef as Ie,useRef as m,useState as Re,useMemo as k,Children as Ke,isValidElement as Ve,useEffect as I}from"react";import{useFilter as we,useObjectRef as Be,useComboBox as Se,useButton as Fe,HiddenSelect as Ne}from"react-aria";import{Section as Pe,useComboBoxState as Me}from"react-stately";import{cn as n}from"../../utils/cn.js";import"framer-motion";import{Pulse as Oe}from"../Loader/Pulse.js";import{SelectTags as Te,ChevronIcon as ke,SelectOverlay as Ae,SelectListBox as De}from"./parts.js";import"react-aria-components";function R(o){return o?typeof o.rendered=="string"?o.rendered:o.textValue??"":""}function Le(o,i){const f=i.trim().toLowerCase();let p=null,c=o.getFirstKey();for(;c!=null;){const g=o.getItem(c);if(g?.type==="item"&&(p==null&&(p=c),f.length>0&&(g.textValue??"").toLowerCase().split(/\s+/).includes(f)))return c;c=o.getKeyAfter(c)}return p}function _(o,i){const f=o.toLowerCase(),p=f.split(/\s+/);return p.includes(i)?0:f.startsWith(i)?1:p.some(c=>c.startsWith(i))?2:3}function J(o){const i=o.props;return typeof i.textValue=="string"?i.textValue:typeof i.children=="string"?i.children:""}function Ee(o,i){const{label:f,description:p,errorMessage:c,children:g,placeholder:A,isLoading:D,slots:L,popoverOffset:Q,className:U,classNames:r,autoComplete:K,menuTrigger:X,selectTextOnFocus:Y=!0,autoFocusFirstOption:Z=!0,searchable:He,selectionMode:$="single",selectedKey:ee,defaultSelectedKey:te,selectedKeys:V,defaultSelectedKeys:w,onSelectionChange:E,name:ne,...b}=o,u=$==="multiple",B=!!b.isDisabled,y=m(!1),h=m(null),d=b.inputValue!==void 0,[S,x]=Re(""),F=d?b.inputValue:S,oe=k(()=>{const e=(F??"").trim().toLowerCase();if(d||typeof g=="function"||e==="")return g;const l=Ke.toArray(g).filter(s=>Ve(s));return l.length===0||l.some(s=>s.type===Pe)?g:[...l].sort((s,v)=>_(J(s),e)-_(J(v),e))},[g,d,F]),re=k(()=>u&&V?[...V]:void 0,[u,V]),se=k(()=>u&&w?[...w]:void 0,[u,w]),H={...b,label:f,children:oe,placeholder:A,isDisabled:B,menuTrigger:X??"focus",autoComplete:K,inputValue:F,...u?{selectionMode:"multiple",value:re,defaultValue:se,onChange:E}:{selectedKey:ee,defaultSelectedKey:te,onSelectionChange:e=>{if(!d){const l=e!=null?h.current?.collection.getItem(e):null;x(R(l))}E?.(e)}},onInputChange:e=>{d||x(e),b.onInputChange?.(e),!u&&e===""&&h.current?.selectedKey!=null&&h.current.setSelectedKey(null)}},{contains:le}=we({sensitivity:"base"}),t=Me({...H,defaultFilter:le,allowsEmptyCollection:!0});I(()=>{h.current=t});const j=m(0),N=t.selectionManager.selectedKeys.size;I(()=>{u&&(N>j.current&&!d&&x(""),j.current=N)},[u,N,d]);const P=R(t.selectedItem);I(()=>{d||u||y.current||S===P||x(P)},[P,d,S,u]);const ie=m(null),W=Be(i),q=m(null),z=m(null),M=m(null),O=m(null),T=m(null),{inputProps:ue,listBoxProps:ae,labelProps:ce,buttonProps:de,descriptionProps:fe,errorMessageProps:pe}=Se({...H,inputRef:W,listBoxRef:q,popoverRef:z,buttonRef:M},t),{buttonProps:me}=Fe(de,M),C=t.displayValidation.isInvalid,{onKeyDown:ge,onFocus:be,onBlur:he,...xe}=ue,ye=e=>{e.key==="Home"||e.key==="End"||ge?.(e)};I(()=>{const e=t.selectionManager;if(!Z||!t.isOpen||t.inputValue.length===0){T.current=null;return}const l=e.focusedKey;if(l!=null&&l!==T.current)return;const s=Le(t.collection,t.inputValue);T.current=s??null,s!=null&&s!==l&&e.setFocusedKey(s)});const Ce=e=>{be?.(e);const l=y.current;if(y.current=!0,l||!Y)return;const s=e.target,v=s.value;v&&requestAnimationFrame(()=>{s.value===v&&s.select()})},ve=e=>{he?.(e);const l=e.currentTarget;requestAnimationFrame(()=>{document.activeElement!==l&&(y.current=!1,d||x(u?"":R(h.current?.selectedItem)))})};return G("div",{ref:ie,className:n("flex flex-col","w-full",U),children:[a("label",{...ce,className:n("flex","text-xs text-slate-500",r?.label),children:f}),a(Ne,{state:t,triggerRef:O,label:f,name:ne,isDisabled:B,autoComplete:K}),u&&a(Te,{items:(t.selectedItems??[]).map(e=>({id:e.key,label:R(e)})),onRemove:e=>t.selectionManager.toggleSelection(e),classNames:{tagGroup:n(r?.tagGroup),tag:n(r?.tag),tagRemoveButton:n(r?.tagRemoveButton)}}),G("div",{ref:O,className:n("flex","relative","w-full",r?.comboBoxContainer),children:[a("input",{...xe,onKeyDown:ye,onFocus:Ce,onBlur:ve,ref:W,placeholder:A,autoComplete:K,className:n("border border-solid border-slate-300","text-sm text-slate-900","py-0 px-2","h-10 w-full","m-0","rounded-md","bg-white","transition-all ease-in-out duration-200","hover:border-slate-400","focus:border-slate-400 focus:outline focus:outline-2 focus:outline-slate-200","disabled:bg-slate-100 disabled:border-slate-300",D?"disabled:text-slate-900":"disabled:text-slate-500",C&&"border-red-500 bg-red-100 text-red-600 placeholder:text-slate-400",C&&"hover:border-red-600 focus:border-red-600 focus:outline-red-200",r?.input)}),D?a("div",{className:n("absolute top-2 right-2","block",r?.loader),children:L?.loadingIcon||a(Oe,{})}):a("button",{...me,ref:M,className:n("absolute top-2 right-0","block","border-none bg-none",r?.arrowButton),children:a(ke,{isOpen:t.isOpen,isDisabled:B,isInvalid:C,buttonIcon:L?.buttonIcon})}),t.isOpen&&t.collection.size>0&&a(Ae,{state:t,triggerRef:O,popoverRef:z,offset:Q,className:n(r?.listContainer),children:a(De,{state:t,listBoxProps:ae,listBoxRef:q,optionVirtualFocus:!0,optionClassName:n(r?.option),sectionHeadingClassName:n(r?.sectionHeading),className:n("max-h-80","overflow-y-auto","outline-none",r?.list)})})]}),p&&a("span",{...fe,className:n("flex","text-xs","text-slate-500",r?.description),children:p}),C&&typeof c=="string"&&a("span",{...pe,className:n("flex","text-xs","text-red-500",r?.errorMessage),children:c})]})}const Ye=Ie(Ee);export{Ye as ComboBoxSelect,Ye as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.39.1",
+  "version": "0.40.0",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",