the-omelet-ui 1.8.21 → 1.8.22

package/dist/entries/searchSelectWithApi.d.ts

@@ -51,7 +51,9 @@ type SearchSelectProps = {
     onSearchMode?: "onClickButton" | "onChange";
     debounceMs?: number;
     onOpenChange?: (open: boolean) => void;
+    popoverZIndex?: number;
 };
-declare function SearchSelectWithAPI({ autoFocus, trigger, triggerPlaceholder, items: propItems, loadOptions, selectionMode, value, defaultValue, onChange, searchable, placeholder, searchButtonLabel, onQueryChange, onSearch, loading: externalLoading, emptyLabel, errorLabel, contentClassName, maxHeight, renderItem, buttonColor, searchButtonColor, searchButtonClassName, checkedColor, checkedClassName, renderTriggerValue, label, required, enablePagination, pageSize, errorMessage, size, onSearchMode, debounceMs, onOpenChange, }: SearchSelectProps): react_jsx_runtime.JSX.Element;
+declare function SearchSelectWithAPI({ autoFocus, trigger, triggerPlaceholder, items: propItems, loadOptions, selectionMode, value, defaultValue, onChange, searchable, placeholder, searchButtonLabel, onQueryChange, onSearch, loading: externalLoading, emptyLabel, errorLabel, contentClassName, maxHeight, renderItem, buttonColor, searchButtonColor, searchButtonClassName, checkedColor, checkedClassName, renderTriggerValue, label, required, enablePagination, pageSize, errorMessage, size, onSearchMode, debounceMs, onOpenChange, // 👈 เพิ่มใหม่
+popoverZIndex }: SearchSelectProps): react_jsx_runtime.JSX.Element;
 
 export { type SearchSelectProps, SearchSelectWithAPI as default, handleMultipleChange, handleSingleChange };

package/dist/entries/searchSelectWithApi.js

@@ -1 +1 @@
-import {b,a as a$4}from'../chunk-RIPJ77V4.js';import {a as a$3}from'../chunk-OBCB5Q2O.js';import {a as a$6}from'../chunk-LHW4VKJO.js';import'../chunk-QRYSV225.js';import {a as a$2}from'../chunk-VOTSEDLU.js';import {a as a$5}from'../chunk-IX36POX2.js';import {a}from'../chunk-THE2HQGT.js';import {a as a$1}from'../chunk-6GLPXMGB.js';import*as t from'react';import*as i from'@radix-ui/react-popover';import {jsx,jsxs}from'react/jsx-runtime';var Ke=s=>n=>{s(typeof n=="string"?n:n[0]||"");},Xe=s=>n=>{s(Array.isArray(n)?n:[n]);};function ne(s){return typeof s=="string"?{id:s,label:s}:s}var Qe={neutral:"border-neutral-900 bg-neutral-900 text-white",primary:"border-black bg-black text-white",red:"border-red-600 bg-red-600 text-white",green:"border-green-600 bg-green-600 text-white",blue:"border-blue-600 bg-blue-600 text-white",yellow:"border-yellow-500 bg-yellow-500 text-black",violet:"border-violet-600 bg-violet-600 text-white"};function Ee(s,n){let[C,B]=t.useState(s);return t.useEffect(()=>{let a=setTimeout(()=>B(s),n);return ()=>clearTimeout(a)},[s,n]),C}function Ve({autoFocus:s=false,trigger:n,triggerPlaceholder:C="Choose",items:B,loadOptions:a$7,selectionMode:T="multiple",value:j,defaultValue:le,onChange:ce,searchable:U=true,placeholder:ie="Placeholder Text",searchButtonLabel:ue="Search",onQueryChange:de,onSearch:L,loading:me=false,emptyLabel:ge="No results",errorLabel:be="Failed to load options",contentClassName:pe,maxHeight:fe=288,renderItem:W,buttonColor:he="primary",searchButtonColor:Re,searchButtonClassName:xe,checkedColor:ve="primary",checkedClassName:ye,renderTriggerValue:_,label:$,required:ke,enablePagination:R=false,pageSize:G=20,errorMessage:A,size:Ce="md",onSearchMode:x="onClickButton",debounceMs:Ne=300,onOpenChange:J}){let[N,K]=t.useState(false),[m,X]=t.useState(""),[z,v]=t.useState(""),[we,w]=t.useState([]),[M,Y]=t.useState(false),[D,q]=t.useState(null),[Se,S]=t.useState(1),[Ie,I]=t.useState(true),u=Ee(m,Ne),y=t.useRef(null),c=T==="multiple",[Pe,Be]=t.useState(le??(c?[]:"")),l=j??Pe,Z=a$7?we:B||[],p=t.useMemo(()=>Z.map(ne),[Z]),f=t.useCallback(async(e,o=1,g=false)=>{if(a$7){Y(true),q(null);try{let H=(await a$7(e)).map(ne);w(g?qe=>[...qe,...H]:H),R&&I(H.length===G);}catch(b){q(b instanceof Error?b.message:"Unknown error"),w([]);}finally{Y(false);}}},[a$7,R,G]),Te=t.useCallback(e=>{K(e),J?.(e),e&&(X(""),v(""),S(1),I(true),q(null),w([]),y.current=null,a$7&&(f("",1,false),y.current=""));},[a$7,f,J]);t.useEffect(()=>{!N||x!=="onChange"||u!==y.current&&(y.current=u,a$7?(S(1),I(true),f(u,1,false),v(u)):(v(u),L?.(u)));},[u,N,x,a$7,f,L]);let P=t.useMemo(()=>{if(a$7)return p;let o=(x==="onChange"?u:z).trim().toLowerCase();return o?p.filter(g=>String(g.label).toLowerCase().includes(o)):p},[p,z,u,a$7,x]),O=e=>{ce?.(e),j===void 0&&Be(e);},Le=e=>{if(c){let o=new Set(l);o.has(e)?o.delete(e):o.add(e),O(Array.from(o));}else O(e),K(false);},Ae=e=>c?l.includes(e):l===e,ze=()=>{a$7?(S(1),I(true),f(m,1,false),v(m),y.current=m):(v(m),L?.(m));},Me=()=>{if(!M&&Ie&&R){let e=Se+1;S(e),f(z,e,true);}},Q=t.useMemo(()=>c?l:l?[l]:[],[l,c]),k=t.useMemo(()=>p.filter(e=>Q.includes(e.id)),[p,Q]),De=t.useMemo(()=>k.length===0?C:c?`\u0E40\u0E25\u0E37\u0E2D\u0E01 ${k.length} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23`:k[0].label,[k,c,C]),E=M||me,V=x==="onClickButton";return jsx("fieldset",{children:jsxs(i.Root,{open:N,onOpenChange:Te,children:[$&&jsx(a,{label:$,required:ke}),jsx("div",{className:"mb-2"}),jsx(i.Trigger,{asChild:true,children:n??jsxs("button",{type:"button",className:a$1("flex w-full min-w-[260px] items-center justify-between","rounded-md border border-[#C9D7E3] bg-white px-2 py-3 text-left","outline-none focus-visible:ring-2 ring-black/20",A&&"border-red-500",b[Ce]),children:[jsx("span",{className:a$1("flex-1 line-clamp-1",{"text-[#A5A9AD]":c?l?.length===0:!l,"text-black":c?l?.length>0:!!l}),children:_?_(Q,k):De}),jsx(a$2,{fontSize:16,className:a$1("ml-3 text-black/60 transition-transform",N?"rotate-180":"rotate-0")})]})}),A&&jsx("small",{className:"text-red-500 text-xs",children:A}),jsx(i.Portal,{children:jsxs(i.Content,{sideOffset:8,onOpenAutoFocus:e=>{if(!s){e.preventDefault();return}},className:a$1("w-[300px] rounded-md border border-black/10 bg-white p-2 shadow-xl","z-[1001]",pe),children:[U&&jsxs("form",{className:a$1("gap-3",V?"grid grid-cols-[1fr_auto]":"block"),onSubmit:e=>{e.preventDefault(),V&&ze();},children:[jsx(a$3,{start:jsx(a$4,{}),value:m,onChange:e=>{X(e.currentTarget.value),de?.(e.currentTarget.value);},size:"sm",placeholder:ie}),V&&jsx(a$5,{color:Re??he,type:"submit",disabled:E,size:"sm",className:xe,children:ue})]}),jsxs("div",{role:"listbox","aria-multiselectable":c||void 0,className:a$1("overflow-y-auto rounded-md",{"mt-3":U}),style:{maxHeight:fe},onScroll:e=>{if(!R)return;let{scrollTop:o,scrollHeight:g,clientHeight:b}=e.currentTarget;g-o<=b+50&&Me();},children:[E&&P.length===0&&jsx("div",{className:"p-6 text-center text-black/60",children:"\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u2026"}),D&&jsx("div",{className:"p-6 text-center text-red-600",children:be}),!E&&!D&&P.length===0&&jsx("div",{className:"p-6 text-center text-black/50",children:ge}),!D&&P.map(e=>{let o=Ae(e.id),g=Qe[ve],b=jsxs(a$5,{type:"button",role:"option","aria-selected":o,onClick:()=>Le(e.id),disabled:e.disabled,size:"sm",className:a$1("group flex w-full items-center justify-between gap-3 rounded-md px-2 py-2 text-left bg-white h-auto","hover:bg-black/[0.04] disabled:opacity-50",{"bg-black/[0.04]":o&&T==="single"}),children:[jsx("span",{className:"text-md text-black",children:e.label}),T==="multiple"&&jsx("span",{className:a$1("grid h-5 w-5 place-items-center rounded-full border-2",o?g:"border-black/20",o&&ye),children:o?jsx(a$6,{fontSize:10}):null})]},e.id);return W?jsx("div",{children:W(e,false,o)},e.id):b}),R&&M&&P.length>0&&jsx("div",{className:"p-2 text-center text-sm text-black/40",children:"\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21..."})]}),jsx(i.Arrow,{className:"fill-white stroke-black/10"})]})})]})})}var He=Ve;export{He as default,Xe as handleMultipleChange,Ke as handleSingleChange};
+import {b,a as a$4}from'../chunk-RIPJ77V4.js';import {a as a$3}from'../chunk-OBCB5Q2O.js';import {a as a$6}from'../chunk-LHW4VKJO.js';import'../chunk-QRYSV225.js';import {a as a$2}from'../chunk-VOTSEDLU.js';import {a as a$5}from'../chunk-IX36POX2.js';import {a}from'../chunk-THE2HQGT.js';import {a as a$1}from'../chunk-6GLPXMGB.js';import*as t from'react';import*as i from'@radix-ui/react-popover';import {jsx,jsxs}from'react/jsx-runtime';var Ke=s=>a=>{s(typeof a=="string"?a:a[0]||"");},Xe=s=>a=>{s(Array.isArray(a)?a:[a]);};function ae(s){return typeof s=="string"?{id:s,label:s}:s}var Ee={neutral:"border-neutral-900 bg-neutral-900 text-white",primary:"border-black bg-black text-white",red:"border-red-600 bg-red-600 text-white",green:"border-green-600 bg-green-600 text-white",blue:"border-blue-600 bg-blue-600 text-white",yellow:"border-yellow-500 bg-yellow-500 text-black",violet:"border-violet-600 bg-violet-600 text-white"};function Ve(s,a){let[C,B]=t.useState(s);return t.useEffect(()=>{let n=setTimeout(()=>B(s),a);return ()=>clearTimeout(n)},[s,a]),C}function He({autoFocus:s=false,trigger:a$7,triggerPlaceholder:C="Choose",items:B,loadOptions:n,selectionMode:T="multiple",value:j,defaultValue:le,onChange:ce,searchable:U=true,placeholder:ie="Placeholder Text",searchButtonLabel:ue="Search",onQueryChange:de,onSearch:L,loading:me=false,emptyLabel:ge="No results",errorLabel:pe="Failed to load options",contentClassName:be,maxHeight:fe=288,renderItem:W,buttonColor:he="primary",searchButtonColor:xe,searchButtonClassName:Re,checkedColor:ye="primary",checkedClassName:ve,renderTriggerValue:Z,label:_,required:ke,enablePagination:x=false,pageSize:$=20,errorMessage:A,size:Ce="md",onSearchMode:R="onClickButton",debounceMs:Ne=300,onOpenChange:G,popoverZIndex:we=1001}){let[N,J]=t.useState(false),[m,K]=t.useState(""),[z,y]=t.useState(""),[Ie,w]=t.useState([]),[M,X]=t.useState(false),[D,q]=t.useState(null),[Se,I]=t.useState(1),[Pe,S]=t.useState(true),u=Ve(m,Ne),v=t.useRef(null),c=T==="multiple",[Be,Te]=t.useState(le??(c?[]:"")),l=j??Be,Y=n?Ie:B||[],b$1=t.useMemo(()=>Y.map(ae),[Y]),f=t.useCallback(async(e,o=1,g=false)=>{if(n){X(true),q(null);try{let H=(await n(e)).map(ae);w(g?Qe=>[...Qe,...H]:H),x&&S(H.length===$);}catch(p){q(p instanceof Error?p.message:"Unknown error"),w([]);}finally{X(false);}}},[n,x,$]),Le=t.useCallback(e=>{J(e),G?.(e),e&&(K(""),y(""),I(1),S(true),q(null),w([]),v.current=null,n&&(f("",1,false),v.current=""));},[n,f,G]);t.useEffect(()=>{!N||R!=="onChange"||u!==v.current&&(v.current=u,n?(I(1),S(true),f(u,1,false),y(u)):(y(u),L?.(u)));},[u,N,R,n,f,L]);let P=t.useMemo(()=>{if(n)return b$1;let o=(R==="onChange"?u:z).trim().toLowerCase();return o?b$1.filter(g=>String(g.label).toLowerCase().includes(o)):b$1},[b$1,z,u,n,R]),O=e=>{ce?.(e),j===void 0&&Te(e);},Ae=e=>{if(c){let o=new Set(l);o.has(e)?o.delete(e):o.add(e),O(Array.from(o));}else O(e),J(false);},ze=e=>c?l.includes(e):l===e,Me=()=>{n?(I(1),S(true),f(m,1,false),y(m),v.current=m):(y(m),L?.(m));},De=()=>{if(!M&&Pe&&x){let e=Se+1;I(e),f(z,e,true);}},Q=t.useMemo(()=>c?l:l?[l]:[],[l,c]),k=t.useMemo(()=>b$1.filter(e=>Q.includes(e.id)),[b$1,Q]),qe=t.useMemo(()=>k.length===0?C:c?`\u0E40\u0E25\u0E37\u0E2D\u0E01 ${k.length} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23`:k[0].label,[k,c,C]),E=M||me,V=R==="onClickButton";return jsx("fieldset",{children:jsxs(i.Root,{open:N,onOpenChange:Le,children:[_&&jsx(a,{label:_,required:ke}),jsx("div",{className:"mb-2"}),jsx(i.Trigger,{asChild:true,children:a$7??jsxs("button",{type:"button",className:a$1("flex w-full min-w-[260px] items-center justify-between","rounded-md border border-[#C9D7E3] bg-white px-2 py-3 text-left","outline-none focus-visible:ring-2 ring-black/20",A&&"border-red-500",b[Ce]),children:[jsx("span",{className:a$1("flex-1 line-clamp-1",{"text-[#A5A9AD]":c?l?.length===0:!l,"text-black":c?l?.length>0:!!l}),children:Z?Z(Q,k):qe}),jsx(a$2,{fontSize:16,className:a$1("ml-3 text-black/60 transition-transform",N?"rotate-180":"rotate-0")})]})}),A&&jsx("small",{className:"text-red-500 text-xs",children:A}),jsx(i.Portal,{children:jsxs(i.Content,{sideOffset:8,onOpenAutoFocus:e=>{if(!s){e.preventDefault();return}},style:{zIndex:we},className:a$1("w-[300px] rounded-md border border-black/10 bg-white p-2 shadow-xl","z-[1001]",be),children:[U&&jsxs("form",{className:a$1("gap-3",V?"grid grid-cols-[1fr_auto]":"block"),onSubmit:e=>{e.preventDefault(),V&&Me();},children:[jsx(a$3,{start:jsx(a$4,{}),value:m,onChange:e=>{K(e.currentTarget.value),de?.(e.currentTarget.value);},size:"sm",placeholder:ie}),V&&jsx(a$5,{color:xe??he,type:"submit",disabled:E,size:"sm",className:Re,children:ue})]}),jsxs("div",{role:"listbox","aria-multiselectable":c||void 0,className:a$1("overflow-y-auto rounded-md",{"mt-3":U}),style:{maxHeight:fe},onScroll:e=>{if(!x)return;let{scrollTop:o,scrollHeight:g,clientHeight:p}=e.currentTarget;g-o<=p+50&&De();},children:[E&&P.length===0&&jsx("div",{className:"p-6 text-center text-black/60",children:"\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u2026"}),D&&jsx("div",{className:"p-6 text-center text-red-600",children:pe}),!E&&!D&&P.length===0&&jsx("div",{className:"p-6 text-center text-black/50",children:ge}),!D&&P.map(e=>{let o=ze(e.id),g=Ee[ye],p=jsxs(a$5,{type:"button",role:"option","aria-selected":o,onClick:()=>Ae(e.id),disabled:e.disabled,size:"sm",className:a$1("group flex w-full items-center justify-between gap-3 rounded-md px-2 py-2 text-left bg-white h-auto","hover:bg-black/[0.04] disabled:opacity-50",{"bg-black/[0.04]":o&&T==="single"}),children:[jsx("span",{className:"text-md text-black",children:e.label}),T==="multiple"&&jsx("span",{className:a$1("grid h-5 w-5 place-items-center rounded-full border-2",o?g:"border-black/20",o&&ve),children:o?jsx(a$6,{fontSize:10}):null})]},e.id);return W?jsx("div",{children:W(e,false,o)},e.id):p}),x&&M&&P.length>0&&jsx("div",{className:"p-2 text-center text-sm text-black/40",children:"\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21..."})]}),jsx(i.Arrow,{className:"fill-white stroke-black/10"})]})})]})})}var Fe=He;export{Fe as default,Xe as handleMultipleChange,Ke as handleSingleChange};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "the-omelet-ui",
-  "version": "1.8.21",
+  "version": "1.8.22",
   "private": false,
   "license": "MIT",
   "type": "module",