the-omelet-ui 1.4.1 → 1.4.4

package/dist/entries/SearchInput.d.ts

@@ -141,6 +141,10 @@ interface SearchInputProps {
      * แสดง hint text ด้านล่าง (เช่น keyboard shortcuts)
      */
     hintText?: string;
+    /**
+     * Auto-select option แรกเมื่อมีผลลัพธ์ (default: false)
+     */
+    autoSelectFirst?: boolean;
 }
 declare const SearchInput: React__default.ForwardRefExoticComponent<SearchInputProps & React__default.RefAttributes<SearchInputRef>>;
 

package/dist/entries/SearchInput.js

@@ -1 +1 @@
-import {a}from'../chunk-6GLPXMGB.js';import {forwardRef,useState,useRef,useImperativeHandle,useCallback,useEffect}from'react';import*as l from'@radix-ui/react-popover';import {jsxs,jsx}from'react/jsx-runtime';var K=forwardRef(({placeholder:W="\u0E04\u0E49\u0E19\u0E2B\u0E32...",defaultValue:Q="",value:d,onChange:k,onSelect:U,onSubmit:m,options:S=[],onSearch:C,debounceMs:L=300,isLoading:G=false,disabled:P=false,className:J,inputClassName:X,popoverClassName:Y,optionClassName:E,clearButtonClassName:Z,leftIconClassName:_,showClearButton:M=true,showSearchIcon:D=true,leftIcon:N,emptyMessage:q="\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E1C\u0E25\u0E01\u0E32\u0E23\u0E04\u0E49\u0E19\u0E2B\u0E32",loadingMessage:ee="\u0E01\u0E33\u0E25\u0E31\u0E07\u0E04\u0E49\u0E19\u0E2B\u0E32...",maxResults:b=10,renderOption:y,minSearchLength:g=0,hintText:T},te)=>{let[re,I]=useState(Q),[$,s]=useState(false),[a$1,f]=useState([]),[ne,A]=useState(false),[w,O]=useState(0),i=useRef(null),p=useRef(void 0);useImperativeHandle(te,()=>({focus:()=>{i.current?.focus();},blur:()=>{i.current?.blur();},clear:()=>{j();},getInputElement:()=>i.current}));let u=d!==void 0?d:re,R=G||ne,H=useCallback(e=>{if(!e||e.length<g)return [];let t=e.toLowerCase();return S.filter(n=>n.label.toLowerCase().includes(t)||n.value.toLowerCase().includes(t)||n.category?.toLowerCase().includes(t)).slice(0,b)},[S,b,g]),ae=useCallback(async e=>{if(!e||e.length<g){f([]),s(false);return}if(!C){let t=H(e);f(t),s(t.length>0);return}p.current&&window.clearTimeout(p.current),p.current=window.setTimeout(async()=>{A(true);try{let t=await C(e);f(t.slice(0,b)),s(t.length>0);}catch{f([]);}finally{A(false);}},L);},[C,H,L,b,g]),se=e=>{let t=e.target.value;d===void 0&&I(t),k?.(t),ae(t),O(0);},v=e=>{let t=e.label;d===void 0&&I(t),k?.(t),U?.(e),s(false),i.current?.blur();},j=()=>{d===void 0&&I(""),k?.(""),f([]),s(false),i.current?.focus();},oe=e=>{if(!$||a$1.length===0){e.key==="Enter"&&(e.preventDefault(),m&&m(u));return}switch(e.key){case "ArrowDown":e.preventDefault(),O(t=>t<a$1.length-1?t+1:t);break;case "ArrowUp":e.preventDefault(),O(t=>t>0?t-1:t);break;case "Enter":e.preventDefault(),a$1[w]?v(a$1[w]):m&&m(u);break;case "Escape":e.preventDefault(),s(false),i.current?.blur();break}},x=a$1.reduce((e,t)=>{let n=t.category||"default";return e[n]||(e[n]=[]),e[n].push(t),e},{}),le=Object.keys(x).length>1||Object.keys(x).length===1&&!x.default;return useEffect(()=>()=>{p.current&&window.clearTimeout(p.current);},[]),jsxs("div",{className:"w-full",children:[jsxs(l.Root,{open:$,onOpenChange:s,children:[jsx(l.Anchor,{asChild:true,children:jsxs("div",{className:a("relative",J),children:[(D||N)&&jsx("div",{className:a("absolute top-1/2 -translate-y-1/2 pointer-events-none",_),style:{left:"1rem"},children:N||jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",className:"text-gray-400",children:jsx("path",{d:"M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16zM18.5 18.5l-4-4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),jsx("input",{ref:i,type:"text",value:u,onChange:se,onKeyDown:oe,onFocus:()=>{u&&a$1.length>0&&s(true);},placeholder:W,disabled:P,style:{paddingLeft:D||N?"3.5rem":"1.5rem",paddingRight:M&&u?"3.5rem":"1.5rem"},className:a("w-full h-14 rounded-full border border-gray-300","text-base","focus:outline-none focus:border-gray-900 focus:ring-2 focus:ring-gray-100","disabled:bg-gray-50 disabled:cursor-not-allowed","transition-all",X)}),M&&u&&!P&&jsx("button",{type:"button",onClick:j,className:a("absolute top-1/2 -translate-y-1/2","w-8 h-8 rounded-full","flex items-center justify-center","bg-gray-200 hover:bg-gray-300","transition-colors",Z),style:{right:"1rem"},"aria-label":"Clear search",children:jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:jsx("path",{d:"M12 4L4 12M4 4l8 8",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})})]})}),jsx(l.Portal,{children:jsxs(l.Content,{side:"bottom",align:"start",sideOffset:8,className:a("w-[var(--radix-popover-trigger-width)]","bg-white rounded-2xl shadow-lg border border-gray-200","max-h-[400px] overflow-y-auto","z-50","animate-in fade-in-0 zoom-in-95",Y),onOpenAutoFocus:e=>e.preventDefault(),children:[R&&jsx("div",{className:"p-4 text-center text-gray-500 text-sm",children:jsxs("div",{className:"flex items-center justify-center gap-2",children:[jsx("div",{className:"w-4 h-4 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin"}),jsx("span",{children:ee})]})}),!R&&a$1.length===0&&u.length>=g&&jsx("div",{className:"p-4 text-center text-gray-500 text-sm",children:q}),!R&&a$1.length>0&&jsx("div",{className:"py-2",children:le?Object.entries(x).map(([e,t])=>jsxs("div",{children:[e!=="default"&&jsx("div",{className:"px-4 py-2 text-xs font-semibold text-gray-400 uppercase",children:e}),t.map((n,V)=>{let z=a$1.indexOf(n);return y?jsx("div",{onClick:()=>v(n),children:y(n,z)},`${n.value}-${V}`):jsx("button",{type:"button",onClick:()=>v(n),className:a("w-full px-4 py-3 text-left text-sm","hover:bg-gray-50 transition-colors",z===w&&"bg-gray-100",E),children:n.label},`${n.value}-${V}`)})]},e)):a$1.map((e,t)=>y?jsx("div",{onClick:()=>v(e),children:y(e,t)},`${e.value}-${t}`):jsx("button",{type:"button",onClick:()=>v(e),className:a("w-full px-4 py-3 text-left text-sm","hover:bg-gray-50 transition-colors",t===w&&"bg-gray-100",E),children:e.label},`${e.value}-${t}`))})]})})]}),T&&jsx("div",{className:"mt-3 text-center text-sm text-gray-400",children:T})]})});K.displayName="SearchInput";var de=K;export{de as default};
+import {a}from'../chunk-6GLPXMGB.js';import {memo,forwardRef,useState,useRef,useImperativeHandle,useCallback,useMemo,useEffect}from'react';import*as h from'@radix-ui/react-popover';import {jsx,jsxs}from'react/jsx-runtime';var Y=memo(()=>jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",className:"text-gray-400",children:jsx("path",{d:"M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16zM18.5 18.5l-4-4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}));Y.displayName="SearchIcon";var Z=memo(()=>jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:jsx("path",{d:"M12 4L4 12M4 4l8 8",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})}));Z.displayName="ClearIcon";var _=forwardRef(({placeholder:u="\u0E04\u0E49\u0E19\u0E2B\u0E32...",defaultValue:O="",value:r,onChange:a$1,onSelect:m,onSubmit:s,options:p=[],onSearch:i,debounceMs:g=300,isLoading:x=false,disabled:P=false,className:L,inputClassName:ee,popoverClassName:te,optionClassName:ne,clearButtonClassName:re,leftIconClassName:ae,showClearButton:H=true,showSearchIcon:T=true,leftIcon:E,emptyMessage:oe="\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E1C\u0E25\u0E01\u0E32\u0E23\u0E04\u0E49\u0E19\u0E2B\u0E32",loadingMessage:se="\u0E01\u0E33\u0E25\u0E31\u0E07\u0E04\u0E49\u0E19\u0E2B\u0E32...",maxResults:M=10,renderOption:ie,minSearchLength:w=0,hintText:Q,autoSelectFirst:N=false},le)=>{let[ce,A]=useState(O),[j,c]=useState(false),[o,C]=useState([]),[de,U]=useState(false),[I,$]=useState(N?0:-1),f=useRef(null),k=useRef(void 0),l=r!==void 0?r:ce,z=x||de;useImperativeHandle(le,()=>({focus:()=>{f.current?.focus();},blur:()=>{f.current?.blur();},clear:()=>{J();},getInputElement:()=>f.current}),[]);let F=useCallback(e=>{if(!e||e.length<w)return [];let t=e.toLowerCase();return p.filter(v=>v.label.toLowerCase().includes(t)||v.value.toLowerCase().includes(t)||v.category?.toLowerCase().includes(t)).slice(0,M)},[p,M,w]),G=useCallback(async e=>{if(!e||e.length<w){C([]),c(false);return}if(!i){let t=F(e);C(t),c(t.length>0);return}k.current&&window.clearTimeout(k.current),k.current=window.setTimeout(async()=>{U(true);try{let t=await i(e);C(t.slice(0,M)),c(t.length>0);}catch{C([]);}finally{U(false);}},g);},[i,F,g,M,w]),ue=useCallback(e=>{let t=e.target.value;r===void 0&&A(t),a$1?.(t),G(t),$(N?0:-1);},[r,a$1,G,N]),K=useCallback(e=>{let t=e.label;r===void 0&&A(t),a$1?.(t),m?.(e),c(false),f.current?.blur();},[r,a$1,m]),J=useCallback(()=>{r===void 0&&A(""),a$1?.(""),C([]),c(false),f.current?.focus();},[r,a$1]),B=useCallback(e=>{s?.(e),c(false),f.current?.blur();},[s]),pe=useCallback(e=>{if(!j||o.length===0){e.key==="Enter"&&(e.preventDefault(),s&&B(l));return}switch(e.key){case "ArrowDown":e.preventDefault(),$(t=>t===-1?0:t<o.length-1?t+1:t);break;case "ArrowUp":e.preventDefault(),$(t=>t<=0?N?0:-1:t-1);break;case "Enter":e.preventDefault(),I>=0&&o[I]?K(o[I]):s&&B(l);break;case "Escape":e.preventDefault(),c(false),f.current?.blur();break}},[j,o,I,N,s,l,K,B]),S=useMemo(()=>o.reduce((e,t)=>{let v=t.category||"default";return e[v]||(e[v]=[]),e[v].push(t),e},{}),[o]),ge=useMemo(()=>Object.keys(S).length>1||Object.keys(S).length===1&&!S.default,[S]);useEffect(()=>()=>{k.current&&window.clearTimeout(k.current);},[]);let fe=useMemo(()=>({paddingLeft:T||E?"3.5rem":"1.5rem",paddingRight:H&&l?"3.5rem":"1.5rem"}),[T,E,H,l]);return jsxs("div",{className:"w-full",children:[jsxs(h.Root,{open:j,onOpenChange:c,children:[jsx(h.Anchor,{asChild:true,children:jsxs("div",{className:a("relative",L),children:[(T||E)&&jsx("div",{className:a("absolute top-1/2 -translate-y-1/2 pointer-events-none",ae),style:{left:"1rem"},children:E||jsx(Y,{})}),jsx("input",{ref:f,type:"text",value:l,onChange:ue,onKeyDown:pe,onFocus:useCallback(()=>{l&&o.length>0&&c(true);},[l,o.length]),placeholder:u,disabled:P,style:fe,className:a("w-full h-14 rounded-full border border-gray-300","text-base","focus:outline-none focus:border-gray-900 focus:ring-2 focus:ring-gray-100","disabled:bg-gray-50 disabled:cursor-not-allowed","transition-all",ee)}),H&&l&&!P&&jsx("button",{type:"button",onClick:J,className:a("absolute top-1/2 -translate-y-1/2","w-8 h-8 rounded-full","flex items-center justify-center","bg-gray-200 hover:bg-gray-300","transition-colors",re),style:{right:"1rem"},"aria-label":"Clear search",children:jsx(Z,{})})]})}),jsx(h.Portal,{children:jsxs(h.Content,{side:"bottom",align:"start",sideOffset:8,className:a("w-[var(--radix-popover-trigger-width)]","bg-white rounded-2xl shadow-lg border border-gray-200","max-h-[400px] overflow-y-auto","z-50","animate-in fade-in-0 zoom-in-95",te),onOpenAutoFocus:e=>e.preventDefault(),children:[z&&jsx("div",{className:"p-4 text-center text-gray-500 text-sm",children:jsxs("div",{className:"flex items-center justify-center gap-2",children:[jsx("div",{className:"w-4 h-4 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin"}),jsx("span",{children:se})]})}),!z&&o.length===0&&l.length>=w&&jsx("div",{className:"p-4 text-center text-gray-500 text-sm",children:oe}),!z&&o.length>0&&jsx(q,{hasCategories:ge,groupedOptions:S,filteredOptions:o,highlightedIndex:I,renderOption:ie,optionClassName:ne,onSelect:K})]})})]}),Q&&jsx("div",{className:"mt-3 text-center text-sm text-gray-400",children:Q})]})});_.displayName="SearchInput";var q=memo(({hasCategories:u,groupedOptions:O,filteredOptions:r,highlightedIndex:a,renderOption:m,optionClassName:s,onSelect:p})=>jsx("div",{className:"py-2",children:u?Object.entries(O).map(([i,g])=>jsxs("div",{children:[i!=="default"&&jsx("div",{className:"px-4 py-2 text-xs font-semibold text-gray-400 uppercase",children:i}),g.map((x,P)=>{let L=r.indexOf(x);return jsx(W,{option:x,index:L,isHighlighted:L===a,renderOption:m,optionClassName:s,onSelect:p},`${x.value}-${P}`)})]},i)):r.map((i,g)=>jsx(W,{option:i,index:g,isHighlighted:g===a,renderOption:m,optionClassName:s,onSelect:p},`${i.value}-${g}`))}));q.displayName="OptionsList";var W=memo(({option:u,index:O,isHighlighted:r,renderOption:a$1,optionClassName:m,onSelect:s})=>{let p=useCallback(()=>{s(u);},[u,s]);return a$1?jsx("div",{onClick:p,children:a$1(u,O)}):jsx("button",{type:"button",onClick:p,className:a("w-full px-4 py-3 text-left text-sm","hover:bg-gray-50 transition-colors",r&&"bg-gray-100",m),children:u.label})});W.displayName="OptionItem";var be=_;export{be as default};

package/package.json

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