UNPKG

@infinityfx/fluid

Version:

React UI library, using zero-runtime CSS-in-JS.

4 lines (3 loc) 1.2 kB
"use client"; import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as r,useState as o,useEffect as n}from"react";import u from"./field.js";import l from"../display/combobox/index.js";import{changeInputValue as i}from"../../core/utils.js";function a({completions:a,emptyMessage:c="No suggestions",value:s,defaultValue:p,onChange:m,contentSize:d,virtualItemHeight:g,...f}){const h=r(null),v=r(null),b=r(0),[x,j]=void 0!==s?[s]:o(p||"");return n((()=>{b.current&&v.current?.[a.length?"open":"close"]()}),[a]),e(l.Root,{ref:v,stretch:!0,onClose:()=>{b.current<2&&(b.current=0)},children:[t(l.Trigger,{disabled:!0,children:t(u,{...f,inputRef:h,"aria-haspopup":"listbox","aria-autocomplete":"list",value:x,onChange:e=>{m?.(e),j?.(e.target.value)},onBlur:e=>{f.onBlur?.(e),b.current=1},onFocus:e=>{f.onFocus?.(e),b.current=2,a.length&&v.current?.open()}})}),t(l.Content,{size:d,round:f.round,autoFocus:!1,emptyMessage:c,virtualItemHeight:g,children:a.map((e=>{const{label:r,value:o}="string"==typeof e?{label:e,value:e}:e;return t(l.Option,{value:o,onSelect:e=>{h.current&&(i(h.current,e),h.current.focus())},children:r},o)}))})]})}export{a as default}; //# sourceMappingURL=autocomplete.js.map