@clicktap/ui 0.36.1 → 0.37.0

package/components/Select/ButtonSelect.js

@@ -1 +1 @@
-"use client";import{jsxs as K,jsx as g}from"react/jsx-runtime";import{useState as V,useMemo as w,useRef as $,useEffect as H}from"react";import{useSelect as T,useButton as U,HiddenSelect as G}from"react-aria";import{e as O,c as J,a as Q,$ as W}from"../../assets/useEffectEvent-gqjrDmw8.js";import{b as X,$ as Y,d as Z}from"../../assets/useOverlayTriggerState-CooW9h9l.js";import{$ as ee}from"../../assets/useControlledState-Cmn8tE-_.js";import{cn as f}from"../../utils/cn.js";import{ChevronIcon as te,SelectPopover as le,SelectListBox as ne}from"./parts.js";function se(e){let{selectionMode:t="single",shouldCloseOnSelect:a=t==="single"}=e,i=X(e),[x,v]=V(null),u=w(()=>e.defaultValue!==void 0?e.defaultValue:t==="single"?e.defaultSelectedKey??null:[],[e.defaultValue,e.defaultSelectedKey,t]),y=w(()=>e.value!==void 0?e.value:t==="single"?e.selectedKey:void 0,[e.value,e.selectedKey,t]),[s,o]=ee(y,u,e.onChange),l=t==="single"&&Array.isArray(s)?s[0]:s,c=n=>{if(t==="single"){let d=Array.isArray(n)?n[0]??null:n;o(d),d!==l&&e.onSelectionChange?.(d)}else{let d=[];Array.isArray(n)?d=n:n!=null&&(d=[n]),o(d)}},r=Y({...e,selectionMode:t,disallowEmptySelection:t==="single",allowDuplicateSelectionEvents:!0,selectedKeys:w(()=>re(l),[l]),onSelectionChange:n=>{if(n!=="all"){if(t==="single"){let d=n.values().next().value??null;c(d)}else c([...n]);a&&i.close(),E.commitValidation()}}}),m=r.selectionManager.firstSelectedKey,h=w(()=>[...r.selectionManager.selectedKeys].map(n=>r.collection.getItem(n)).filter(n=>n!=null),[r.selectionManager.selectedKeys,r.collection]),E=Z({...e,value:Array.isArray(l)&&l.length===0?null:l}),[I,D]=V(!1),[p]=V(l);return{...E,...r,...i,value:l,defaultValue:u??p,setValue:c,selectedKey:m,setSelectedKey:c,selectedItem:h[0]??null,selectedItems:h,defaultSelectedKey:e.defaultSelectedKey??(e.selectionMode==="single"?p:null),focusStrategy:x,open(n=null){(r.collection.size!==0||e.allowsEmptyCollection)&&(v(n),i.open())},toggle(n=null){(r.collection.size!==0||e.allowsEmptyCollection)&&(v(n),i.toggle())},isFocused:I,setFocused:D}}function re(e){if(e!==void 0)return e===null?[]:Array.isArray(e)?e:[e]}function oe(e){let{ref:t,onInteractOutside:a,isDisabled:i,onInteractOutsideStart:x}=e,v=$({isPointerDown:!1,ignoreEmulatedMouseEvents:!1}),u=O(s=>{a&&P(s,t)&&(x&&x(s),v.current.isPointerDown=!0)}),y=O(s=>{a&&a(s)});H(()=>{let s=v.current;if(i)return;const o=t.current,l=J(o);if(typeof PointerEvent<"u"){let c=r=>{s.isPointerDown&&P(r,t)&&y(r),s.isPointerDown=!1};return l.addEventListener("pointerdown",u,!0),l.addEventListener("click",c,!0),()=>{l.removeEventListener("pointerdown",u,!0),l.removeEventListener("click",c,!0)}}else if(process.env.NODE_ENV==="test"){let c=m=>{s.ignoreEmulatedMouseEvents?s.ignoreEmulatedMouseEvents=!1:s.isPointerDown&&P(m,t)&&y(m),s.isPointerDown=!1},r=m=>{s.ignoreEmulatedMouseEvents=!0,s.isPointerDown&&P(m,t)&&y(m),s.isPointerDown=!1};return l.addEventListener("mousedown",u,!0),l.addEventListener("mouseup",c,!0),l.addEventListener("touchstart",u,!0),l.addEventListener("touchend",r,!0),()=>{l.removeEventListener("mousedown",u,!0),l.removeEventListener("mouseup",c,!0),l.removeEventListener("touchstart",u,!0),l.removeEventListener("touchend",r,!0)}}},[t,i])}function P(e,t){if(e.button>0)return!1;let a=Q(e);if(a){const i=a.ownerDocument;if(!i||!W(i.documentElement,a)||a.closest("[data-react-aria-top-layer]"))return!1}return t.current?!e.composedPath().includes(t.current):!1}function ge(e){const{label:t,description:a,errorMessage:i,children:x,placeholder:v,slots:u,popoverOffset:y,className:s,classNames:o,isLoading:l,name:c,selectedKey:r,defaultSelectedKey:m,onSelectionChange:h,isRequired:E,items:I,autoFocus:D,isInvalid:p,"aria-label":n,"aria-labelledby":d}=e,L=!!(e.isDisabled||l),N={label:t,children:x,items:I,name:c,selectedKey:r,defaultSelectedKey:m,onSelectionChange:h,isDisabled:L,isRequired:E,autoFocus:D,isInvalid:p,"aria-label":n,"aria-labelledby":d},b=se(N),C=$(null),S=$(null),A=$(null),B=$(null),{labelProps:R,triggerProps:F,valueProps:k,menuProps:j,descriptionProps:_,errorMessageProps:z,isInvalid:M}=T(N,b,S),{buttonProps:q}=U(F,S);return oe({ref:C,onInteractOutside:()=>b.close()}),K("div",{ref:C,className:f("flex flex-col","w-full",s),children:[g("label",{...R,className:f("flex","text-xs text-slate-500",o?.label),children:t}),g(G,{state:b,triggerRef:S,label:t,name:c,isDisabled:L}),K("div",{className:f("flex","relative","w-full",o?.comboBoxContainer),children:[K("button",{...q,ref:S,className:f("flex items-center justify-between gap-2","border border-solid border-slate-300","text-sm text-slate-900 text-left","py-0 px-3","h-10 w-full","m-0","rounded-md","bg-white","cursor-pointer","transition-all ease-in-out duration-200","hover:border-slate-400","focus:outline focus:outline-2 focus:outline-slate-200 focus:border-slate-400","disabled:bg-slate-100 disabled:border-slate-300 disabled:cursor-default",M&&"border-red-500 bg-red-100 text-red-600 hover:border-red-600 focus:border-red-600 focus:outline-red-200",o?.input),children:[g("span",{...k,className:f("truncate",!b.selectedItem&&"text-slate-400",o?.value),children:b.selectedItem?b.selectedItem.rendered:v??"Select..."}),g("span",{className:f("shrink-0 [&_svg]:w-4 [&_svg]:h-4",o?.arrowButton),children:g(te,{isOpen:b.isOpen,isDisabled:L,isInvalid:M,buttonIcon:u?.buttonIcon})})]}),b.isOpen&&g(le,{popoverRef:B,offset:y,className:f(o?.listContainer),children:g(ne,{state:b,listBoxProps:j,listBoxRef:A,className:f("max-h-80","overflow-y-auto","outline-none",o?.list)})})]}),a&&g("span",{..._,className:f("flex","text-xs","text-slate-500",o?.description),children:a}),M&&typeof i=="string"&&g("span",{...z,className:f("flex","text-xs","text-red-500",o?.errorMessage),children:i})]})}export{ge as ButtonSelect,ge as default};
+"use client";import{jsxs as K,jsx as g}from"react/jsx-runtime";import{useState as N,useMemo as w,useRef as $,useEffect as H}from"react";import{useSelect as T,useButton as U,HiddenSelect as G}from"react-aria";import{e as O,c as J,a as Q,$ as W}from"../../assets/useEffectEvent-gqjrDmw8.js";import{b as X,$ as Y,d as Z}from"../../assets/useOverlayTriggerState-CooW9h9l.js";import{$ as ee}from"../../assets/useControlledState-Cmn8tE-_.js";import{cn as f}from"../../utils/cn.js";import{ChevronIcon as te,SelectPopover as le,SelectListBox as ne}from"./parts.js";function se(e){let{selectionMode:t="single",shouldCloseOnSelect:a=t==="single"}=e,i=X(e),[x,v]=N(null),u=w(()=>e.defaultValue!==void 0?e.defaultValue:t==="single"?e.defaultSelectedKey??null:[],[e.defaultValue,e.defaultSelectedKey,t]),y=w(()=>e.value!==void 0?e.value:t==="single"?e.selectedKey:void 0,[e.value,e.selectedKey,t]),[s,o]=ee(y,u,e.onChange),l=t==="single"&&Array.isArray(s)?s[0]:s,c=n=>{if(t==="single"){let d=Array.isArray(n)?n[0]??null:n;o(d),d!==l&&e.onSelectionChange?.(d)}else{let d=[];Array.isArray(n)?d=n:n!=null&&(d=[n]),o(d)}},r=Y({...e,selectionMode:t,disallowEmptySelection:t==="single",allowDuplicateSelectionEvents:!0,selectedKeys:w(()=>re(l),[l]),onSelectionChange:n=>{if(n!=="all"){if(t==="single"){let d=n.values().next().value??null;c(d)}else c([...n]);a&&i.close(),E.commitValidation()}}}),m=r.selectionManager.firstSelectedKey,h=w(()=>[...r.selectionManager.selectedKeys].map(n=>r.collection.getItem(n)).filter(n=>n!=null),[r.selectionManager.selectedKeys,r.collection]),E=Z({...e,value:Array.isArray(l)&&l.length===0?null:l}),[I,D]=N(!1),[p]=N(l);return{...E,...r,...i,value:l,defaultValue:u??p,setValue:c,selectedKey:m,setSelectedKey:c,selectedItem:h[0]??null,selectedItems:h,defaultSelectedKey:e.defaultSelectedKey??(e.selectionMode==="single"?p:null),focusStrategy:x,open(n=null){(r.collection.size!==0||e.allowsEmptyCollection)&&(v(n),i.open())},toggle(n=null){(r.collection.size!==0||e.allowsEmptyCollection)&&(v(n),i.toggle())},isFocused:I,setFocused:D}}function re(e){if(e!==void 0)return e===null?[]:Array.isArray(e)?e:[e]}function oe(e){let{ref:t,onInteractOutside:a,isDisabled:i,onInteractOutsideStart:x}=e,v=$({isPointerDown:!1,ignoreEmulatedMouseEvents:!1}),u=O(s=>{a&&P(s,t)&&(x&&x(s),v.current.isPointerDown=!0)}),y=O(s=>{a&&a(s)});H(()=>{let s=v.current;if(i)return;const o=t.current,l=J(o);if(typeof PointerEvent<"u"){let c=r=>{s.isPointerDown&&P(r,t)&&y(r),s.isPointerDown=!1};return l.addEventListener("pointerdown",u,!0),l.addEventListener("click",c,!0),()=>{l.removeEventListener("pointerdown",u,!0),l.removeEventListener("click",c,!0)}}else if(process.env.NODE_ENV==="test"){let c=m=>{s.ignoreEmulatedMouseEvents?s.ignoreEmulatedMouseEvents=!1:s.isPointerDown&&P(m,t)&&y(m),s.isPointerDown=!1},r=m=>{s.ignoreEmulatedMouseEvents=!0,s.isPointerDown&&P(m,t)&&y(m),s.isPointerDown=!1};return l.addEventListener("mousedown",u,!0),l.addEventListener("mouseup",c,!0),l.addEventListener("touchstart",u,!0),l.addEventListener("touchend",r,!0),()=>{l.removeEventListener("mousedown",u,!0),l.removeEventListener("mouseup",c,!0),l.removeEventListener("touchstart",u,!0),l.removeEventListener("touchend",r,!0)}}},[t,i])}function P(e,t){if(e.button>0)return!1;let a=Q(e);if(a){const i=a.ownerDocument;if(!i||!W(i.documentElement,a)||a.closest("[data-react-aria-top-layer]"))return!1}return t.current?!e.composedPath().includes(t.current):!1}function ge(e){const{label:t,description:a,errorMessage:i,children:x,placeholder:v,slots:u,popoverOffset:y,className:s,classNames:o,isLoading:l,name:c,selectedKey:r,defaultSelectedKey:m,onSelectionChange:h,isRequired:E,items:I,autoFocus:D,isInvalid:p,"aria-label":n,"aria-labelledby":d}=e,L=!!(e.isDisabled||l),V={label:t,children:x,items:I,name:c,selectedKey:r,defaultSelectedKey:m,onSelectionChange:h,isDisabled:L,isRequired:E,autoFocus:D,isInvalid:p,"aria-label":n,"aria-labelledby":d},b=se(V),C=$(null),S=$(null),A=$(null),B=$(null),{labelProps:R,triggerProps:F,valueProps:k,menuProps:j,descriptionProps:_,errorMessageProps:z,isInvalid:M}=T(V,b,S),{buttonProps:q}=U(F,S);return oe({ref:C,onInteractOutside:()=>b.close()}),K("div",{ref:C,className:f("flex flex-col","w-full",s),children:[g("label",{...R,className:f("flex","text-xs text-slate-500",o?.label),children:t}),g(G,{state:b,triggerRef:S,label:t,name:c,isDisabled:L}),K("div",{className:f("flex","relative","w-full",o?.comboBoxContainer),children:[K("button",{...q,ref:S,className:f("flex items-center justify-between gap-2","border border-solid border-slate-300","text-sm text-slate-900 text-left","py-0 px-3","h-10 w-full","m-0","rounded-md","bg-white","cursor-pointer","transition-all ease-in-out duration-200","hover:border-slate-400","focus:outline focus:outline-2 focus:outline-slate-200 focus:border-slate-400","disabled:bg-slate-100 disabled:border-slate-300 disabled:cursor-default",M&&"border-red-500 bg-red-100 text-red-600 hover:border-red-600 focus:border-red-600 focus:outline-red-200",o?.input),children:[g("span",{...k,className:f("truncate",!b.selectedItem&&"text-slate-400",o?.value),children:b.selectedItem?b.selectedItem.rendered:v??"Select..."}),g("span",{className:f("shrink-0 [&_svg]:w-4 [&_svg]:h-4",o?.arrowButton),children:g(te,{isOpen:b.isOpen,isDisabled:L,isInvalid:M,buttonIcon:u?.buttonIcon})})]}),b.isOpen&&g(le,{popoverRef:B,offset:y,className:f(o?.listContainer),children:g(ne,{state:b,listBoxProps:j,listBoxRef:A,optionClassName:f(o?.option),className:f("max-h-80","overflow-y-auto","outline-none",o?.list)})})]}),a&&g("span",{..._,className:f("flex","text-xs","text-slate-500",o?.description),children:a}),M&&typeof i=="string"&&g("span",{...z,className:f("flex","text-xs","text-red-500",o?.errorMessage),children:i})]})}export{ge as ButtonSelect,ge as default};

package/components/Select/ComboBoxSelect.js

@@ -1 +1 @@
-"use client";import{jsxs as de,jsx as I}from"react/jsx-runtime";import{useState as v,useMemo as N,useRef as p,useCallback as ce,useEffect as le,forwardRef as ye}from"react";import{useFilter as pe,useObjectRef as xe,useComboBox as he,useButton as Ve,HiddenSelect as Ie}from"react-aria";import{$ as Ce,b as $e,d as Ke,c as Oe,a as Se}from"../../assets/useOverlayTriggerState-CooW9h9l.js";import{$ as me}from"../../assets/useControlledState-Cmn8tE-_.js";import{cn as O}from"../../utils/cn.js";import"framer-motion";import{Pulse as ve}from"../Loader/Pulse.js";import{ChevronIcon as Fe,SelectOverlay as we,SelectListBox as Ae}from"./parts.js";const Re=[];function Ne(e){let{defaultFilter:y,menuTrigger:d="input",allowsEmptyCollection:C=!1,allowsCustomValue:$,shouldCloseOnBlur:m=!0,selectionMode:n="single"}=e,[K,B]=v(!1),[k,ne]=v(!1),[x,T]=v(null),Q=N(()=>e.defaultValue!==void 0?e.defaultValue:n==="single"?e.defaultSelectedKey??null:[],[e.defaultValue,e.defaultSelectedKey,n]),M=N(()=>e.value!==void 0?e.value:n==="single"?e.selectedKey:void 0,[e.value,e.selectedKey,n]),[j,ue]=me(M,Q,e.onChange),o=n==="single"&&Array.isArray(j)?j[0]:j,g=t=>{if(n==="single"){let i=Array.isArray(t)?t[0]??null:t;ue(i),i!==o&&e.onSelectionChange?.(i)}else{let i=[];Array.isArray(t)?i=t:t!=null&&(i=[t]),ue(i)}},{collection:c,selectionManager:f,disabledKeys:F}=Ce({...e,items:e.items??e.defaultItems,selectionMode:n,disallowEmptySelection:n==="single",allowDuplicateSelectionEvents:!0,selectedKeys:N(()=>Te(o),[o]),onSelectionChange:t=>{if(t!=="all")if(n==="single"){let i=t.values().next().value??null;i===o?(e.onSelectionChange?.(i),W(),S()):g(i)}else g([...t])}}),l=n==="single"?f.firstSelectedKey:null,P=N(()=>[...f.selectedKeys].map(t=>c.getItem(t)).filter(t=>t!=null),[f.selectedKeys,c]),[u,H]=me(e.inputValue,ge(e.defaultInputValue,l,c)||"",e.onInputChange),[q]=v(o),[se]=v(u),a=c,b=N(()=>e.items!=null||!y?c:Be(c,u,y),[c,u,y,e.items]),[X,Z]=v(b),E=p("focus"),r=$e({...e,onOpenChange:t=>{e.onOpenChange&&e.onOpenChange(t,t?E.current:void 0),f.setFocused(t),t||f.setFocusedKey(null)},isOpen:void 0,defaultOpen:void 0}),w=(t=null,i)=>{let J=i==="manual"||i==="focus"&&d==="focus";(C||b.size>0||J&&a.size>0||e.items)&&(J&&!r.isOpen&&e.items===void 0&&B(!0),E.current=i,T(t),r.open())},_=(t=null,i)=>{let J=i==="manual"||i==="focus"&&d==="focus";!(C||b.size>0||J&&a.size>0||e.items)&&!r.isOpen||(J&&!r.isOpen&&e.items===void 0&&B(!0),r.isOpen||(E.current=i),oe(t))},D=ce(()=>{Z(K?a:b)},[K,a,b]),oe=ce((t=null)=>{r.isOpen&&D(),T(t),r.toggle()},[r,D]),S=ce(()=>{r.isOpen&&(D(),r.close())},[r,D]),[U,z]=v(u),W=()=>{let t=l!=null?c.getItem(l)?.textValue??"":"";z(t),H(t)},A=p(o),R=p(l!=null?c.getItem(l)?.textValue??"":"");le(()=>{k&&(b.size>0||C)&&!r.isOpen&&u!==U&&d!=="manual"&&w(null,"input"),!K&&!C&&r.isOpen&&b.size===0&&S(),o!=null&&o!==A.current&&n==="single"&&S(),u!==U&&(f.setFocusedKey(null),B(!1),n==="single"&&u===""&&(e.inputValue===void 0||M===void 0)&&g(null)),o!==A.current&&(e.inputValue===void 0||M===void 0)?W():U!==u&&z(u);let t=l!=null?c.getItem(l)?.textValue??"":"";!k&&l!=null&&e.inputValue===void 0&&l===A.current&&R.current!==t&&(z(t),H(t)),A.current=o,R.current=t});let ee=Ke({...e,value:N(()=>Array.isArray(o)&&o.length===0?null:{inputValue:u,value:o,selectedKey:l},[u,l,o])}),ae=()=>{$&&l==null?te():L()},te=()=>{let t=n==="multiple"?Re:null;A.current=t,g(t),S()},L=(t=!1)=>{if(M!==void 0&&e.inputValue!==void 0){let i=l!=null?c.getItem(l)?.textValue??"":"";(t||n==="multiple"||u!==i)&&(e.onSelectionChange?.(l),e.onChange?.(o)),z(i),S()}else W(),S()};const Y=()=>{if($){const t=l!=null?c.getItem(l)?.textValue??"":"";u===t?L():te()}else L()};let re=()=>{r.isOpen&&f.focusedKey!=null?f.isSelected(f.focusedKey)&&n==="single"?L(!0):f.select(f.focusedKey):Y()},G=p([u,o]),s=t=>{t?(G.current=[u,o],d==="focus"&&!e.isReadOnly&&w(null,"focus")):(m&&Y(),(u!==G.current[0]||o!==G.current[1])&&ee.commitValidation()),ne(t)},h=N(()=>r.isOpen?K?a:b:X,[r.isOpen,a,b,K,X]),V=e.defaultSelectedKey??(n==="single"?q:null);return{...ee,...r,focusStrategy:x,toggle:_,open:w,close:Y,selectionManager:f,value:o,defaultValue:Q??q,setValue:g,selectedKey:l,selectedItems:P,defaultSelectedKey:V,setSelectedKey:g,disabledKeys:F,isFocused:k,setFocused:s,selectedItem:P[0]??null,collection:h,inputValue:u,defaultInputValue:ge(e.defaultInputValue,V,c)??se,setInputValue:H,commit:re,revert:ae}}function Be(e,y,d){return new Oe(be(e,e,y,d))}function be(e,y,d,C){let $=[];for(let m of y)if(m.type==="section"&&m.hasChildNodes){let n=be(e,Se(m,e),d,C);[...n].some(K=>K.type==="item")&&$.push({...m,childNodes:n})}else m.type==="item"&&C(m.textValue,d)?$.push({...m}):m.type!=="item"&&$.push({...m});return $}function ge(e,y,d){return e==null&&y!=null?d.getItem(y)?.textValue??"":e}function Te(e){if(e!==void 0)return e===null?[]:Array.isArray(e)?e:[e]}function fe(e){return e?typeof e.rendered=="string"?e.rendered:e.textValue??"":""}function Me(e,y){const{label:d,description:C,errorMessage:$,children:m,placeholder:n,isLoading:K,slots:B,popoverOffset:k,className:ne,classNames:x,autoComplete:T,menuTrigger:Q,selectTextOnFocus:M=!0,autoFocusFirstOption:j=!0,searchable:ue,name:o,...g}=e,c=!!g.isDisabled,f=p(!1),F=p(null),l=g.inputValue!==void 0,[P,u]=v(""),H=l?g.inputValue:P,q={...g,label:d,children:m,placeholder:n,isDisabled:c,menuTrigger:Q??"focus",autoComplete:T,inputValue:H,onInputChange:s=>{l||u(s),g.onInputChange?.(s),s===""&&F.current?.selectedKey!=null&&F.current.setSelectedKey(null)},onSelectionChange:s=>{if(!l){const h=s!=null?F.current?.collection.getItem(s):null;u(fe(h))}g.onSelectionChange?.(s)}},{contains:se}=pe({sensitivity:"base"}),a=Ne({...q,defaultFilter:se,allowsEmptyCollection:!0});le(()=>{F.current=a});const b=fe(a.selectedItem);le(()=>{l||f.current||P===b||u(b)},[b,l,P]);const X=p(null),Z=xe(y),E=p(null),ie=p(null),r=p(null),w=p(null),_=p(null),{inputProps:D,listBoxProps:oe,labelProps:S,buttonProps:U,descriptionProps:z,errorMessageProps:W}=he({...q,inputRef:Z,listBoxRef:E,popoverRef:ie,buttonRef:r},a),{buttonProps:A}=Ve(U,r),R=a.displayValidation.isInvalid,{onKeyDown:ee,onFocus:ae,onBlur:te,...L}=D,Y=s=>{s.key==="Home"||s.key==="End"||ee?.(s)};le(()=>{const s=a.selectionManager;if(!j||!a.isOpen||a.inputValue.length===0){_.current=null;return}const h=s.focusedKey;if(h!=null&&h!==_.current)return;const V=a.collection.getFirstKey();_.current=V??null,V!=null&&V!==h&&s.setFocusedKey(V)});const re=s=>{ae?.(s);const h=f.current;if(f.current=!0,h||!M)return;const V=s.target,t=V.value;t&&requestAnimationFrame(()=>{V.value===t&&V.select()})},G=s=>{te?.(s);const h=s.currentTarget;requestAnimationFrame(()=>{document.activeElement!==h&&(f.current=!1,l||u(fe(F.current?.selectedItem)))})};return de("div",{ref:X,className:O("flex flex-col","w-full",ne),children:[I("label",{...S,className:O("flex","text-xs text-slate-500",x?.label),children:d}),I(Ie,{state:a,triggerRef:w,label:d,name:o,isDisabled:c,autoComplete:T}),de("div",{ref:w,className:O("flex","relative","w-full",x?.comboBoxContainer),children:[I("input",{...L,onKeyDown:Y,onFocus:re,onBlur:G,ref:Z,placeholder:n,autoComplete:T,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",K?"disabled:text-slate-900":"disabled:text-slate-500",R&&"border-red-500 bg-red-100 text-red-600 placeholder:text-slate-400",R&&"hover:border-red-600 focus:border-red-600 focus:outline-red-200",x?.input)}),K?I("div",{className:O("absolute top-2 right-2","block",x?.loader),children:B?.loadingIcon||I(ve,{})}):I("button",{...A,ref:r,className:O("absolute top-2 right-0","block","border-none bg-none",x?.arrowButton),children:I(Fe,{isOpen:a.isOpen,isDisabled:c,isInvalid:R,buttonIcon:B?.buttonIcon})}),a.isOpen&&a.collection.size>0&&I(we,{state:a,triggerRef:w,popoverRef:ie,offset:k,className:O(x?.listContainer),children:I(Ae,{state:a,listBoxProps:oe,listBoxRef:E,optionVirtualFocus:!0,className:O("max-h-80","overflow-y-auto","outline-none",x?.list)})})]}),C&&I("span",{...z,className:O("flex","text-xs","text-slate-500",x?.description),children:C}),R&&typeof $=="string"&&I("span",{...W,className:O("flex","text-xs","text-red-500",x?.errorMessage),children:$})]})}const _e=ye(Me);export{_e as ComboBoxSelect,_e as default};
+"use client";import{jsxs as de,jsx as I}from"react/jsx-runtime";import{useState as v,useMemo as R,useRef as x,useCallback as ce,useEffect as le,forwardRef as ye}from"react";import{useFilter as pe,useObjectRef as xe,useComboBox as he,useButton as Ve,HiddenSelect as Ie}from"react-aria";import{$ as Ce,b as $e,d as Ke,c as Oe,a as Se}from"../../assets/useOverlayTriggerState-CooW9h9l.js";import{$ as me}from"../../assets/useControlledState-Cmn8tE-_.js";import{cn as C}from"../../utils/cn.js";import"framer-motion";import{Pulse as ve}from"../Loader/Pulse.js";import{ChevronIcon as Fe,SelectOverlay as we,SelectListBox as Ae}from"./parts.js";const Ne=[];function Re(e){let{defaultFilter:y,menuTrigger:d="input",allowsEmptyCollection:$=!1,allowsCustomValue:K,shouldCloseOnBlur:m=!0,selectionMode:n="single"}=e,[O,B]=v(!1),[k,ne]=v(!1),[p,T]=v(null),Q=R(()=>e.defaultValue!==void 0?e.defaultValue:n==="single"?e.defaultSelectedKey??null:[],[e.defaultValue,e.defaultSelectedKey,n]),M=R(()=>e.value!==void 0?e.value:n==="single"?e.selectedKey:void 0,[e.value,e.selectedKey,n]),[j,ue]=me(M,Q,e.onChange),o=n==="single"&&Array.isArray(j)?j[0]:j,g=t=>{if(n==="single"){let i=Array.isArray(t)?t[0]??null:t;ue(i),i!==o&&e.onSelectionChange?.(i)}else{let i=[];Array.isArray(t)?i=t:t!=null&&(i=[t]),ue(i)}},{collection:c,selectionManager:f,disabledKeys:F}=Ce({...e,items:e.items??e.defaultItems,selectionMode:n,disallowEmptySelection:n==="single",allowDuplicateSelectionEvents:!0,selectedKeys:R(()=>Te(o),[o]),onSelectionChange:t=>{if(t!=="all")if(n==="single"){let i=t.values().next().value??null;i===o?(e.onSelectionChange?.(i),W(),S()):g(i)}else g([...t])}}),l=n==="single"?f.firstSelectedKey:null,P=R(()=>[...f.selectedKeys].map(t=>c.getItem(t)).filter(t=>t!=null),[f.selectedKeys,c]),[u,H]=me(e.inputValue,ge(e.defaultInputValue,l,c)||"",e.onInputChange),[q]=v(o),[se]=v(u),a=c,b=R(()=>e.items!=null||!y?c:Be(c,u,y),[c,u,y,e.items]),[X,Z]=v(b),E=x("focus"),r=$e({...e,onOpenChange:t=>{e.onOpenChange&&e.onOpenChange(t,t?E.current:void 0),f.setFocused(t),t||f.setFocusedKey(null)},isOpen:void 0,defaultOpen:void 0}),w=(t=null,i)=>{let J=i==="manual"||i==="focus"&&d==="focus";($||b.size>0||J&&a.size>0||e.items)&&(J&&!r.isOpen&&e.items===void 0&&B(!0),E.current=i,T(t),r.open())},_=(t=null,i)=>{let J=i==="manual"||i==="focus"&&d==="focus";!($||b.size>0||J&&a.size>0||e.items)&&!r.isOpen||(J&&!r.isOpen&&e.items===void 0&&B(!0),r.isOpen||(E.current=i),oe(t))},D=ce(()=>{Z(O?a:b)},[O,a,b]),oe=ce((t=null)=>{r.isOpen&&D(),T(t),r.toggle()},[r,D]),S=ce(()=>{r.isOpen&&(D(),r.close())},[r,D]),[U,z]=v(u),W=()=>{let t=l!=null?c.getItem(l)?.textValue??"":"";z(t),H(t)},A=x(o),N=x(l!=null?c.getItem(l)?.textValue??"":"");le(()=>{k&&(b.size>0||$)&&!r.isOpen&&u!==U&&d!=="manual"&&w(null,"input"),!O&&!$&&r.isOpen&&b.size===0&&S(),o!=null&&o!==A.current&&n==="single"&&S(),u!==U&&(f.setFocusedKey(null),B(!1),n==="single"&&u===""&&(e.inputValue===void 0||M===void 0)&&g(null)),o!==A.current&&(e.inputValue===void 0||M===void 0)?W():U!==u&&z(u);let t=l!=null?c.getItem(l)?.textValue??"":"";!k&&l!=null&&e.inputValue===void 0&&l===A.current&&N.current!==t&&(z(t),H(t)),A.current=o,N.current=t});let ee=Ke({...e,value:R(()=>Array.isArray(o)&&o.length===0?null:{inputValue:u,value:o,selectedKey:l},[u,l,o])}),ae=()=>{K&&l==null?te():L()},te=()=>{let t=n==="multiple"?Ne:null;A.current=t,g(t),S()},L=(t=!1)=>{if(M!==void 0&&e.inputValue!==void 0){let i=l!=null?c.getItem(l)?.textValue??"":"";(t||n==="multiple"||u!==i)&&(e.onSelectionChange?.(l),e.onChange?.(o)),z(i),S()}else W(),S()};const Y=()=>{if(K){const t=l!=null?c.getItem(l)?.textValue??"":"";u===t?L():te()}else L()};let re=()=>{r.isOpen&&f.focusedKey!=null?f.isSelected(f.focusedKey)&&n==="single"?L(!0):f.select(f.focusedKey):Y()},G=x([u,o]),s=t=>{t?(G.current=[u,o],d==="focus"&&!e.isReadOnly&&w(null,"focus")):(m&&Y(),(u!==G.current[0]||o!==G.current[1])&&ee.commitValidation()),ne(t)},h=R(()=>r.isOpen?O?a:b:X,[r.isOpen,a,b,O,X]),V=e.defaultSelectedKey??(n==="single"?q:null);return{...ee,...r,focusStrategy:p,toggle:_,open:w,close:Y,selectionManager:f,value:o,defaultValue:Q??q,setValue:g,selectedKey:l,selectedItems:P,defaultSelectedKey:V,setSelectedKey:g,disabledKeys:F,isFocused:k,setFocused:s,selectedItem:P[0]??null,collection:h,inputValue:u,defaultInputValue:ge(e.defaultInputValue,V,c)??se,setInputValue:H,commit:re,revert:ae}}function Be(e,y,d){return new Oe(be(e,e,y,d))}function be(e,y,d,$){let K=[];for(let m of y)if(m.type==="section"&&m.hasChildNodes){let n=be(e,Se(m,e),d,$);[...n].some(O=>O.type==="item")&&K.push({...m,childNodes:n})}else m.type==="item"&&$(m.textValue,d)?K.push({...m}):m.type!=="item"&&K.push({...m});return K}function ge(e,y,d){return e==null&&y!=null?d.getItem(y)?.textValue??"":e}function Te(e){if(e!==void 0)return e===null?[]:Array.isArray(e)?e:[e]}function fe(e){return e?typeof e.rendered=="string"?e.rendered:e.textValue??"":""}function Me(e,y){const{label:d,description:$,errorMessage:K,children:m,placeholder:n,isLoading:O,slots:B,popoverOffset:k,className:ne,classNames:p,autoComplete:T,menuTrigger:Q,selectTextOnFocus:M=!0,autoFocusFirstOption:j=!0,searchable:ue,name:o,...g}=e,c=!!g.isDisabled,f=x(!1),F=x(null),l=g.inputValue!==void 0,[P,u]=v(""),H=l?g.inputValue:P,q={...g,label:d,children:m,placeholder:n,isDisabled:c,menuTrigger:Q??"focus",autoComplete:T,inputValue:H,onInputChange:s=>{l||u(s),g.onInputChange?.(s),s===""&&F.current?.selectedKey!=null&&F.current.setSelectedKey(null)},onSelectionChange:s=>{if(!l){const h=s!=null?F.current?.collection.getItem(s):null;u(fe(h))}g.onSelectionChange?.(s)}},{contains:se}=pe({sensitivity:"base"}),a=Re({...q,defaultFilter:se,allowsEmptyCollection:!0});le(()=>{F.current=a});const b=fe(a.selectedItem);le(()=>{l||f.current||P===b||u(b)},[b,l,P]);const X=x(null),Z=xe(y),E=x(null),ie=x(null),r=x(null),w=x(null),_=x(null),{inputProps:D,listBoxProps:oe,labelProps:S,buttonProps:U,descriptionProps:z,errorMessageProps:W}=he({...q,inputRef:Z,listBoxRef:E,popoverRef:ie,buttonRef:r},a),{buttonProps:A}=Ve(U,r),N=a.displayValidation.isInvalid,{onKeyDown:ee,onFocus:ae,onBlur:te,...L}=D,Y=s=>{s.key==="Home"||s.key==="End"||ee?.(s)};le(()=>{const s=a.selectionManager;if(!j||!a.isOpen||a.inputValue.length===0){_.current=null;return}const h=s.focusedKey;if(h!=null&&h!==_.current)return;const V=a.collection.getFirstKey();_.current=V??null,V!=null&&V!==h&&s.setFocusedKey(V)});const re=s=>{ae?.(s);const h=f.current;if(f.current=!0,h||!M)return;const V=s.target,t=V.value;t&&requestAnimationFrame(()=>{V.value===t&&V.select()})},G=s=>{te?.(s);const h=s.currentTarget;requestAnimationFrame(()=>{document.activeElement!==h&&(f.current=!1,l||u(fe(F.current?.selectedItem)))})};return de("div",{ref:X,className:C("flex flex-col","w-full",ne),children:[I("label",{...S,className:C("flex","text-xs text-slate-500",p?.label),children:d}),I(Ie,{state:a,triggerRef:w,label:d,name:o,isDisabled:c,autoComplete:T}),de("div",{ref:w,className:C("flex","relative","w-full",p?.comboBoxContainer),children:[I("input",{...L,onKeyDown:Y,onFocus:re,onBlur:G,ref:Z,placeholder:n,autoComplete:T,className:C("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",N&&"border-red-500 bg-red-100 text-red-600 placeholder:text-slate-400",N&&"hover:border-red-600 focus:border-red-600 focus:outline-red-200",p?.input)}),O?I("div",{className:C("absolute top-2 right-2","block",p?.loader),children:B?.loadingIcon||I(ve,{})}):I("button",{...A,ref:r,className:C("absolute top-2 right-0","block","border-none bg-none",p?.arrowButton),children:I(Fe,{isOpen:a.isOpen,isDisabled:c,isInvalid:N,buttonIcon:B?.buttonIcon})}),a.isOpen&&a.collection.size>0&&I(we,{state:a,triggerRef:w,popoverRef:ie,offset:k,className:C(p?.listContainer),children:I(Ae,{state:a,listBoxProps:oe,listBoxRef:E,optionVirtualFocus:!0,optionClassName:C(p?.option),className:C("max-h-80","overflow-y-auto","outline-none",p?.list)})})]}),$&&I("span",{...z,className:C("flex","text-xs","text-slate-500",p?.description),children:$}),N&&typeof K=="string"&&I("span",{...W,className:C("flex","text-xs","text-red-500",p?.errorMessage),children:K})]})}const _e=ye(Me);export{_e as ComboBoxSelect,_e as default};

package/components/Select/Select.types.d.ts

@@ -35,6 +35,6 @@ export interface SelectProps<T extends object> extends Omit<AriaComboBoxProps<T>
      * - `'auto'`: searchable once there are more than ~8 options.
      */
     searchable?: boolean | 'auto';
-    classNames?: SlotsToClasses<'label' | 'name' | 'comboBoxContainer' | 'input' | 'value' | 'loader' | 'arrowButton' | 'description' | 'errorMessage' | 'listContainer' | 'list'>;
+    classNames?: SlotsToClasses<'label' | 'name' | 'comboBoxContainer' | 'input' | 'value' | 'loader' | 'arrowButton' | 'description' | 'errorMessage' | 'listContainer' | 'list' | 'option'>;
     autoComplete?: HTMLInputAutoCompleteAttribute;
 }

package/components/Select/parts.d.ts

@@ -2,16 +2,18 @@ import { ReactNode, RefObject } from 'react';
 import { AriaListBoxOptions } from 'react-aria';
 import { ListState, Node, OverlayTriggerState } from 'react-stately';
 import { SelectSlots } from './Select.types';
-export declare function SelectOption<T extends object>({ item, state, shouldUseVirtualFocus, }: {
+export declare function SelectOption<T extends object>({ item, state, shouldUseVirtualFocus, className, }: {
     item: Node<T>;
     state: ListState<T>;
     shouldUseVirtualFocus?: boolean;
+    className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function SelectListBox<T extends object>({ state, listBoxProps, listBoxRef, className, optionVirtualFocus, }: {
+export declare function SelectListBox<T extends object>({ state, listBoxProps, listBoxRef, className, optionClassName, optionVirtualFocus, }: {
     state: ListState<T>;
     listBoxProps: AriaListBoxOptions<T>;
     listBoxRef: RefObject<HTMLUListElement>;
     className?: string;
+    optionClassName?: string;
     optionVirtualFocus?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function SelectPopover({ children, popoverRef, offset, className, }: {

package/components/Select/parts.js

@@ -1 +1 @@
-"use client";import{jsx as s,jsxs as p}from"react/jsx-runtime";import{useState as x,useLayoutEffect as f,useRef as m}from"react";import{usePopover as h,Overlay as _,DismissButton as u,useListBox as b,useOption as w}from"react-aria";import{cn as a}from"../../utils/cn.js";function y({item:e,state:o,shouldUseVirtualFocus:r}){const t=m(null),{optionProps:l,isFocused:i,isSelected:n,isDisabled:d}=w({key:e.key,shouldUseVirtualFocus:r},o,t);return s("li",{...l,ref:t,className:a("flex flex-auto items-center","rounded-md","p-2.5 mx-1.5","text-sm","cursor-default outline-none","text-slate-900","transition-all ease-in-out duration-150",i&&"bg-slate-100",n&&"font-semibold",d&&"text-slate-500"),children:e.rendered})}function N({state:e,listBoxProps:o,listBoxRef:r,className:t,optionVirtualFocus:l}){const{listBoxProps:i}=b(o,e,r);return s("ul",{...i,ref:r,className:t,children:[...e.collection].map(n=>s(y,{item:n,state:e,shouldUseVirtualFocus:l},n.key))})}function P({children:e,popoverRef:o,offset:r,className:t}){return s("div",{ref:o,style:{marginTop:r??4},className:a("absolute top-full left-0 z-50 w-full","px-0 py-1.5","rounded-md bg-white","border border-solid border-slate-300","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]",t),children:e})}function S({state:e,triggerRef:o,popoverRef:r,offset:t,className:l,children:i}){const{popoverProps:n}=h({triggerRef:o,popoverRef:r,isNonModal:!0,placement:"bottom start",offset:t??4},e),[d,c]=x();return f(()=>{o.current&&c(o.current.offsetWidth)},[o]),s(_,{children:p("div",{...n,ref:r,style:{...n.style,width:d},className:a("z-50","px-0 py-1.5","rounded-md bg-white","border border-solid border-slate-300","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]",l),children:[s(u,{onDismiss:()=>e.close()}),i,s(u,{onDismiss:()=>e.close()})]})})}function B({isOpen:e,isDisabled:o,isInvalid:r,buttonIcon:t}){return t?typeof t=="function"?t({isOpen:e,isDisabled:o,isInvalid:r}):t:s("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:a("transition-all ease-in-out duration-200",e?"rotate-180":"rotate-0"),children:s("path",{d:"M6 9L12 15L18 9",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:a(["stroke-slate-900",o&&"stroke-slate-400",r&&"stroke-red-500"])})})}export{B as ChevronIcon,N as SelectListBox,y as SelectOption,S as SelectOverlay,P as SelectPopover};
+"use client";import{jsx as r,jsxs as p}from"react/jsx-runtime";import{useState as f,useLayoutEffect as x,useRef as m}from"react";import{usePopover as h,Overlay as _,DismissButton as c,useListBox as b,useOption as v}from"react-aria";import{cn as d}from"../../utils/cn.js";function w({item:e,state:t,shouldUseVirtualFocus:o,className:s}){const l=m(null),{optionProps:a,isFocused:i,isSelected:n,isDisabled:u}=v({key:e.key,shouldUseVirtualFocus:o},t,l);return r("li",{...a,ref:l,"data-focused":i||void 0,"data-selected":n||void 0,"data-disabled":u||void 0,className:d("flex flex-auto items-center","rounded-md","p-2.5 mx-1.5","text-sm","cursor-default outline-none","text-slate-900","transition-all ease-in-out duration-150","data-[focused]:bg-slate-100","data-[selected]:font-semibold","data-[disabled]:text-slate-500",s),children:e.rendered})}function g({state:e,listBoxProps:t,listBoxRef:o,className:s,optionClassName:l,optionVirtualFocus:a}){const{listBoxProps:i}=b(t,e,o);return r("ul",{...i,ref:o,className:s,children:[...e.collection].map(n=>r(w,{item:n,state:e,shouldUseVirtualFocus:a,className:l},n.key))})}function P({children:e,popoverRef:t,offset:o,className:s}){return r("div",{ref:t,style:{marginTop:o??4},className:d("absolute top-full left-0 z-50 w-full","px-0 py-1.5","rounded-md bg-white","border border-solid border-slate-300","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]",s),children:e})}function S({state:e,triggerRef:t,popoverRef:o,offset:s,className:l,children:a}){const{popoverProps:i}=h({triggerRef:t,popoverRef:o,isNonModal:!0,placement:"bottom start",offset:s??4},e),[n,u]=f();return x(()=>{t.current&&u(t.current.offsetWidth)},[t]),r(_,{children:p("div",{...i,ref:o,style:{...i.style,width:n},className:d("z-50","px-0 py-1.5","rounded-md bg-white","border border-solid border-slate-300","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]",l),children:[r(c,{onDismiss:()=>e.close()}),a,r(c,{onDismiss:()=>e.close()})]})})}function B({isOpen:e,isDisabled:t,isInvalid:o,buttonIcon:s}){return s?typeof s=="function"?s({isOpen:e,isDisabled:t,isInvalid:o}):s:r("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:d("transition-all ease-in-out duration-200",e?"rotate-180":"rotate-0"),children:r("path",{d:"M6 9L12 15L18 9",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:d(["stroke-slate-900",t&&"stroke-slate-400",o&&"stroke-red-500"])})})}export{B as ChevronIcon,g as SelectListBox,w as SelectOption,S as SelectOverlay,P as SelectPopover};

package/package.json

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