@clicktap/ui 0.40.0 → 0.40.1

package/components/Select/ComboBoxSelect.js

@@ -1 +1 @@
-"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};
+"use client";import{jsxs as G,jsx as a}from"react/jsx-runtime";import{forwardRef as Re,useRef as g,useState as Ke,useMemo as T,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 Ae}from"../Loader/Pulse.js";import{SelectTags as Oe,ChevronIcon as Te,SelectOverlay as ke,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,l){const f=l.trim().toLowerCase();let p=null,c=o.getFirstKey();for(;c!=null;){const m=o.getItem(c);if(m?.type==="item"&&(p==null&&(p=c),f.length>0&&(m.textValue??"").toLowerCase().split(/\s+/).includes(f)))return c;c=o.getKeyAfter(c)}return p}function _(o,l){const f=o.toLowerCase(),p=f.split(/\s+/);return p.includes(l)?0:f.startsWith(l)?1:p.some(c=>c.startsWith(l))?2:3}function J(o){const l=o.props;return typeof l.textValue=="string"?l.textValue:typeof l.children=="string"?l.children:""}function Ee(o,l){const{label:f,description:p,errorMessage:c,children:m,placeholder:k,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,...x}=o,i=$==="multiple",B=!!x.isDisabled,C=g(!1),h=g(null),d=x.inputValue!==void 0,[S,y]=Ke(""),F=d?x.inputValue:S,oe=T(()=>{const e=(F??"").trim().toLowerCase();if(d||typeof m=="function"||e===""||!Array.isArray(m))return m;const u=m,s=u.filter(b=>Ve(b));return s.length!==u.length||s.length===0||s.some(b=>b.type===Pe)?m:[...s].sort((b,Ie)=>_(J(b),e)-_(J(Ie),e))},[m,d,F]),re=T(()=>i&&V?[...V]:void 0,[i,V]),se=T(()=>i&&w?[...w]:void 0,[i,w]),H={...x,label:f,children:oe,placeholder:k,isDisabled:B,menuTrigger:X??"focus",autoComplete:K,inputValue:F,...i?{selectionMode:"multiple",value:re,defaultValue:se,onChange:E}:{selectedKey:ee,defaultSelectedKey:te,onSelectionChange:e=>{if(!d){const u=e!=null?h.current?.collection.getItem(e):null;y(R(u))}E?.(e)}},onInputChange:e=>{d||y(e),x.onInputChange?.(e),!i&&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=g(0),N=t.selectionManager.selectedKeys.size;I(()=>{i&&(N>j.current&&!d&&y(""),j.current=N)},[i,N,d]);const P=R(t.selectedItem);I(()=>{d||i||C.current||S===P||y(P)},[P,d,S,i]);const ie=g(null),W=Be(l),q=g(null),z=g(null),M=g(null),A=g(null),O=g(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),v=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){O.current=null;return}const u=e.focusedKey;if(u!=null&&u!==O.current)return;const s=Le(t.collection,t.inputValue);O.current=s??null,s!=null&&s!==u&&e.setFocusedKey(s)});const Ce=e=>{be?.(e);const u=C.current;if(C.current=!0,u||!Y)return;const s=e.target,b=s.value;b&&requestAnimationFrame(()=>{s.value===b&&s.select()})},ve=e=>{he?.(e);const u=e.currentTarget;requestAnimationFrame(()=>{document.activeElement!==u&&(C.current=!1,h.current?.close(),d||y(i?"":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:A,label:f,name:ne,isDisabled:B,autoComplete:K}),i&&a(Oe,{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:A,className:n("flex","relative","w-full",r?.comboBoxContainer),children:[a("input",{...xe,onKeyDown:ye,onFocus:Ce,onBlur:ve,ref:W,placeholder:k,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",v&&"border-red-500 bg-red-100 text-red-600 placeholder:text-slate-400",v&&"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(Ae,{})}):a("button",{...me,ref:M,className:n("absolute top-2 right-0","block","border-none bg-none",r?.arrowButton),children:a(Te,{isOpen:t.isOpen,isDisabled:B,isInvalid:v,buttonIcon:L?.buttonIcon})}),t.isOpen&&t.collection.size>0&&a(ke,{state:t,triggerRef:A,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}),v&&typeof c=="string"&&a("span",{...pe,className:n("flex","text-xs","text-red-500",r?.errorMessage),children:c})]})}const Ye=Re(Ee);export{Ye as ComboBoxSelect,Ye as default};

package/package.json

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