@clicktap/ui 0.40.1 → 0.40.3

package/components/Select/ComboBoxSelect.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.40.1",
+  "version": "0.40.3",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",
@@ -71,6 +71,6 @@
   },
   "tailwind": "./tailwind.config.js",
   "scripts": {
-    "preinstall": "if [ \"$INIT_CWD\" = \"$PWD\" ]; then echo 'ERROR: Run pnpm install from the monorepo root, not from this directory.' && exit 1; fi"
+    "preinstall": "case \"$INIT_CWD/\" in \"$PWD\"/*) echo 'ERROR: Run pnpm install from the monorepo root, not inside this lib or a subdirectory. A nested install creates a rogue node_modules and drifts dependency versions (CTAP-717).' && exit 1 ;; esac"
   }
 }