@clicktap/ui 0.36.0 → 0.36.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as de,jsx as
|
|
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};
|