the-omelet-ui 1.3.9 → 1.4.1

package/dist/entries/SearchInput.d.ts

@@ -18,6 +18,24 @@ interface SearchOption {
      */
     metadata?: Record<string, any>;
 }
+interface SearchInputRef {
+    /**
+     * Focus input
+     */
+    focus: () => void;
+    /**
+     * Blur input
+     */
+    blur: () => void;
+    /**
+     * Clear input value
+     */
+    clear: () => void;
+    /**
+     * Get input element
+     */
+    getInputElement: () => HTMLInputElement | null;
+}
 interface SearchInputProps {
     /**
      * Placeholder text
@@ -39,6 +57,10 @@ interface SearchInputProps {
      * Callback เมื่อเลือก option
      */
     onSelect?: (option: SearchOption) => void;
+    /**
+     * Callback เมื่อกด Enter (submit search)
+     */
+    onSubmit?: (value: string) => void;
     /**
      * Options สำหรับ local search
      */
@@ -120,6 +142,6 @@ interface SearchInputProps {
      */
     hintText?: string;
 }
-declare const SearchInput: React__default.FC<SearchInputProps>;
+declare const SearchInput: React__default.ForwardRefExoticComponent<SearchInputProps & React__default.RefAttributes<SearchInputRef>>;
 
-export { type SearchInputProps, type SearchOption, SearchInput as default };
+export { type SearchInputProps, type SearchInputRef, type SearchOption, SearchInput as default };

package/dist/entries/SearchInput.js

@@ -1 +1 @@
-import {a}from'../chunk-6GLPXMGB.js';import {useState,useRef,useCallback,useEffect}from'react';import*as l from'@radix-ui/react-popover';import {jsxs,jsx}from'react/jsx-runtime';var oe=({placeholder:z="\u0E04\u0E49\u0E19\u0E2B\u0E32...",defaultValue:K="",value:u,onChange:k,onSelect:B,options:S=[],onSearch:C,debounceMs:I=300,isLoading:W=false,disabled:M=false,className:Q,inputClassName:U,popoverClassName:G,optionClassName:D,clearButtonClassName:J,leftIconClassName:X,showClearButton:N=true,showSearchIcon:O=true,leftIcon:h,emptyMessage:Y="\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E1C\u0E25\u0E01\u0E32\u0E23\u0E04\u0E49\u0E19\u0E2B\u0E32",loadingMessage:Z="\u0E01\u0E33\u0E25\u0E31\u0E07\u0E04\u0E49\u0E19\u0E2B\u0E32...",maxResults:b=10,renderOption:m,minSearchLength:d=0,hintText:E})=>{let[_,P]=useState(K),[$,s]=useState(false),[a$1,g]=useState([]),[q,T]=useState(false),[y,R]=useState(0),x=useRef(null),f=useRef(void 0),i=u!==void 0?u:_,L=W||q,A=useCallback(e=>{if(!e||e.length<d)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,d]),ee=useCallback(async e=>{if(!e||e.length<d){g([]),s(false);return}if(!C){let t=A(e);g(t),s(t.length>0);return}f.current&&clearTimeout(f.current),f.current=setTimeout(async()=>{T(true);try{let t=await C(e);g(t.slice(0,b)),s(t.length>0);}catch{g([]);}finally{T(false);}},I);},[C,A,I,b,d]),te=e=>{let t=e.target.value;u===void 0&&P(t),k?.(t),ee(t),R(0);},p=e=>{let t=e.label;u===void 0&&P(t),k?.(t),B?.(e),s(false),x.current?.blur();},re=()=>{u===void 0&&P(""),k?.(""),g([]),s(false),x.current?.focus();},ne=e=>{if(!(!$||a$1.length===0))switch(e.key){case "ArrowDown":e.preventDefault(),R(t=>t<a$1.length-1?t+1:t);break;case "ArrowUp":e.preventDefault(),R(t=>t>0?t-1:t);break;case "Enter":e.preventDefault(),a$1[y]&&p(a$1[y]);break;case "Escape":e.preventDefault(),s(false),x.current?.blur();break}},w=a$1.reduce((e,t)=>{let n=t.category||"default";return e[n]||(e[n]=[]),e[n].push(t),e},{}),ae=Object.keys(w).length>1||Object.keys(w).length===1&&!w.default;return useEffect(()=>()=>{f.current&&clearTimeout(f.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 ",Q),children:[(O||h)&&jsx("div",{className:a("absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none",X),style:{left:16},children:h||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:x,type:"text",value:i,onChange:te,onKeyDown:ne,onFocus:()=>{i&&a$1.length>0&&s(true);},placeholder:z,disabled:M,className:a("w-full h-14 rounded-full border border-gray-300","text-base",O||h?"pl-12":"pl-6",N&&i?"pr-14":"pr-8","focus:outline-none focus:border-gray-900 focus:ring-2 focus:ring-gray-100","disabled:bg-gray-50 disabled:cursor-not-allowed","transition-all",U),style:{paddingLeft:O||h?48:24,paddingRight:N&&i?56:24}}),N&&i&&!M&&jsx("button",{type:"button",onClick:re,className:a("absolute right-4 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",J),style:{right:16},"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",G),onOpenAutoFocus:e=>e.preventDefault(),children:[L&&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:Z})]})}),!L&&a$1.length===0&&i.length>=d&&jsx("div",{className:"p-4 text-center text-gray-500 text-sm",children:Y}),!L&&a$1.length>0&&jsx("div",{className:"py-2",children:ae?Object.entries(w).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,j)=>{let V=a$1.indexOf(n);return m?jsx("div",{onClick:()=>p(n),children:m(n,V)},`${n.value}-${j}`):jsx("button",{type:"button",onClick:()=>p(n),className:a("w-full px-4 py-3 text-left text-sm","hover:bg-gray-50 transition-colors",V===y&&"bg-gray-100",D),children:n.label},`${n.value}-${j}`)})]},e)):a$1.map((e,t)=>m?jsx("div",{onClick:()=>p(e),children:m(e,t)},`${e.value}-${t}`):jsx("button",{type:"button",onClick:()=>p(e),className:a("w-full px-4 py-3 text-left text-sm","hover:bg-gray-50 transition-colors",t===y&&"bg-gray-100",D),children:e.label},`${e.value}-${t}`))})]})})]}),E&&jsx("div",{className:"mt-3 text-center text-sm text-gray-400",children:E})]})},le=oe;export{le as default};
+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};

package/package.json

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