the-omelet-ui 1.4.0 → 1.4.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
|
-
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
|
|
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};
|