@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.80

package/dist/components/Select/components/List/List.js

@@ -0,0 +1,130 @@
+import { o as K } from "../../../../chunk-D1xtDmiO.js";
+import { t as n } from "../../../../utils-DHuiYnx1.js";
+import { t as Q } from "../../../../Loading-DKqxR-oV.js";
+import { t as W } from "../../../../debounce-CzFlgg9h.js";
+import { useSelectContext as Y } from "../../contexts/select.hook.js";
+import { n as $, t as R } from "../../../../AdditionalOptions-Cx9wU01w.js";
+import { listGroupLabelVariants as ee, listVariants as te } from "./List.variants.js";
+import "../../constants/pagination.js";
+import "../../constants/list.js";
+import { useNavigationUlList as re } from "../../hooks/useNavigationList.js";
+import { ListItem as g } from "../ListItem/ListItem.js";
+import { Fragment as oe, forwardRef as se, useEffect as ne, useImperativeHandle as ae, useMemo as T, useRef as H, useState as ie } from "react";
+import { jsx as o, jsxs as I } from "react/jsx-runtime";
+var le = /* @__PURE__ */ K(W(), 1), Ce = se(({ additionalOptions: N, className: P, groupedOptions: l, inputRef: c, isLoading: j, itemClassName: u, name: M, searchable: f = !1, listItemSecondRowClassName: p, wrapperInputRef: O, isInfiniteScrollEnabled: h, noOptionsText: C, onFetchMoreOptions: L, visibleItems: E }, S) => {
+  const m = H(null), v = H(null), [b, F] = ie(!1), { canContinueFetching: d, canFilter: y, isOpen: q, isTyping: k, options: G, page: w, searchTerm: s, setCanContinueFetching: A, setOptions: U, setPage: V } = Y(), z = E !== void 0 ? { maxHeight: E * 40 } : void 0;
+  ae(S, () => m.current, [m]);
+  const a = l.length > 0 && $(l[0]), x = f && y ? G.filter((e) => {
+    const t = s.toLowerCase();
+    return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
+  }) : G, _ = T(() => {
+    if (!a) return [];
+    const e = l;
+    if (!f || !y || !s) return e;
+    const t = s.toLowerCase();
+    return e.map((r) => ({
+      ...r,
+      options: r.options.filter((i) => i.label.toLowerCase().includes(t))
+    })).filter((r) => r.options.length > 0);
+  }, [
+    a,
+    l,
+    f,
+    y,
+    s
+  ]);
+  re({
+    ulRef: m,
+    wrapperInputRef: O,
+    searchable: f,
+    filteredOptions: a ? _.flatMap((e) => e.options) : x
+  });
+  const D = x.filter((e, t, r) => t === r.findIndex((i) => i.value === e.value)), X = a ? _.length === 0 : x.length === 0, Z = T(() => (0, le.default)(async (e) => {
+    const [t] = e;
+    if (t.isIntersecting && !b && L && d) try {
+      F(!0);
+      const r = w + 1, { data: i, hasMore: B } = await L({
+        page: r,
+        pageSize: 10,
+        termOfSearch: s
+      });
+      V(r), A(B), U((J) => [...J, ...i]);
+    } catch {
+      console.error("Error fetching more options");
+    } finally {
+      F(!1);
+    }
+  }, 100), [
+    b,
+    L,
+    s,
+    w
+  ]);
+  return ne(() => {
+    if (h && d && v.current && !k) {
+      const e = new IntersectionObserver(Z, { threshold: 0.1 });
+      return e.observe(v.current), () => e.disconnect();
+    }
+  }, [
+    h,
+    d,
+    b,
+    k,
+    w
+  ]), /* @__PURE__ */ I("ul", {
+    ref: m,
+    title: M,
+    role: "listbox",
+    className: n(te({ className: P })),
+    style: z,
+    "data-state": q ? "open" : "closed",
+    children: [
+      j ? /* @__PURE__ */ o(g, {
+        className: n("select-none", u),
+        isClickable: !1,
+        inputRef: c,
+        value: "Loading...",
+        label: "Loading...",
+        listItemSecondRowClassName: p
+      }) : X ? /* @__PURE__ */ o(g, {
+        isEmpty: !0,
+        className: n("select-none", u),
+        isClickable: !1,
+        inputRef: c,
+        value: C ?? "",
+        label: C ?? "No options",
+        listItemSecondRowClassName: p
+      }) : a ? _.map((e) => /* @__PURE__ */ I(oe, { children: [/* @__PURE__ */ o("li", {
+        role: "presentation",
+        "aria-hidden": "true",
+        "data-action": "true",
+        className: n(ee()),
+        children: e.groupLabel
+      }), e.options.map((t) => /* @__PURE__ */ o(g, {
+        className: n("select-none", u),
+        isClickable: !0,
+        inputRef: c,
+        listItemSecondRowClassName: p,
+        ...t
+      }, t.value))] }, e.groupLabel)) : D.map((e) => /* @__PURE__ */ o(g, {
+        className: n("select-none", u),
+        isClickable: !0,
+        inputRef: c,
+        listItemSecondRowClassName: p,
+        ...e
+      }, e.value)),
+      h && d && /* @__PURE__ */ o("li", {
+        ref: v,
+        role: "option",
+        "data-action": "true",
+        className: "flex items-center justify-center py-3",
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ o(Q, { className: "w-4 h-4 text-aurora-500 select-none" })
+      }),
+      /* @__PURE__ */ o(R, { additionalOptions: N })
+    ]
+  });
+});
+export {
+  Ce as List
+};

package/dist/components/Select/components/List/List.types.d.ts

@@ -0,0 +1,16 @@
+import { ComponentRef, RefObject } from 'react';
+import { Props as SelectProps } from '../../Select.types';
+export type ListProps = Pick<SelectProps, 'name' | 'options' | 'theme' | 'additionalOptions'> & {
+    className?: string;
+    groupedOptions: SelectProps['options'];
+    inputRef?: RefObject<ComponentRef<'input'> | null>;
+    isLoading: boolean;
+    itemClassName?: string;
+    searchable?: boolean;
+    listItemSecondRowClassName?: string;
+    wrapperInputRef: RefObject<ComponentRef<'div'> | null>;
+    isInfiniteScrollEnabled: SelectProps['isInfiniteScrollEnabled'];
+    onFetchMoreOptions?: SelectProps['onFetchMoreOptions'];
+    noOptionsText?: SelectProps['noOptionsText'];
+    visibleItems?: number;
+};

package/dist/components/Select/components/List/List.variants.d.ts

@@ -0,0 +1,2 @@
+export declare const listGroupLabelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const listVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Select/components/List/List.variants.js

@@ -0,0 +1,46 @@
+import { t as e } from "../../../../dist-DtEbXv47.js";
+var r = e([
+  "flex",
+  "items-center",
+  "h-8",
+  "px-6",
+  "py-1.5",
+  "text-[11px]",
+  "font-medium",
+  "uppercase",
+  "tracking-[0.25px]",
+  "text-metal-50",
+  "pointer-events-none",
+  "select-none",
+  "cursor-default"
+]), a = e([
+  "scrollbar",
+  "absolute",
+  "bg-white",
+  "border",
+  "flex-col",
+  "mt-1",
+  "overflow-hidden",
+  "rounded",
+  "shadow-2xs",
+  "top-full",
+  "w-full",
+  "z-10",
+  "max-h-44",
+  "overflow-y-auto",
+  "border-gray-200",
+  "text-zinc-700",
+  "animate-in",
+  "fade-in-50",
+  "zoom-in-95",
+  "duration-200",
+  "dark:bg-metal-800",
+  "dark:border-metal-700",
+  "dark:text-metal-50",
+  "[&>li:first-child]:mt-2",
+  "[&>li:last-child]:mb-2"
+]);
+export {
+  r as listGroupLabelVariants,
+  a as listVariants
+};

package/dist/components/Select/components/ListItem/ListItem.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ListItemProps } from './ListItem.types';
+export declare const ListItem: FC<ListItemProps>;

package/dist/components/Select/components/ListItem/ListItem.js

@@ -0,0 +1,64 @@
+import { t as s } from "../../../../utils-DHuiYnx1.js";
+import { Typography as y } from "../../../Typography/Typography.js";
+import { useSelectContext as I } from "../../contexts/select.hook.js";
+import { listItemVariants as L } from "./ListItem.variants.js";
+import { useCallback as d, useRef as V } from "react";
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+function j(c, r) {
+  const i = r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), o = new RegExp(`(${i})`, "gi");
+  return c.split(o).map((a, t) => a.toLowerCase() === r.toLowerCase() ? /* @__PURE__ */ n("mark", {
+    className: "bg-transparent font-semibold text-metal-800 dark:text-metal-50",
+    children: a
+  }, t) : /* @__PURE__ */ n("span", { children: a }, t));
+}
+var K = ({ isEmpty: c, isClickable: r, className: i, inputRef: o, listItemSecondRowClassName: a, ...t }) => {
+  const { searchTerm: m, highlightSearchEnabled: h, setValue: x, toggleOpen: g } = I(), b = V(null), f = d((e) => {
+    x(e.value, o), g(!1);
+  }, [x, g]), N = d((e, l) => {
+    e.key === "Enter" && (e.stopPropagation(), f(l));
+  }, [f]), w = d(({ label: e, rightComponent: l, subLabel: p, rightComponentClassName: C }) => {
+    if (c) return /* @__PURE__ */ n(y, {
+      variant: "body2",
+      className: "text-zinc-800 dark:text-metal-50 italic",
+      children: e
+    });
+    if (typeof e != "string") return e;
+    const k = h && m.length > 0 ? j(e, m) : [e];
+    return /* @__PURE__ */ u(y, {
+      variant: "body2",
+      className: "text-zinc-700 dark:text-metal-50 font-medium",
+      children: [l ? /* @__PURE__ */ u("span", {
+        className: s("flex gap-2 items-center", C),
+        children: [
+          k,
+          " ",
+          l
+        ]
+      }) : k, p ? /* @__PURE__ */ n("span", {
+        className: s("block font-normal text-sm text-metal-800 dark:text-metal-50", a),
+        children: p
+      }) : null]
+    });
+  }, [h, m]);
+  return /* @__PURE__ */ u("li", {
+    ref: b,
+    role: "option",
+    "data-action": "false",
+    className: s(L({ className: i })),
+    tabIndex: 0,
+    onClick: (e) => {
+      r && (f(t), e.stopPropagation());
+    },
+    onKeyDown: (e) => N(e, t),
+    children: [t.leftIcon ? /* @__PURE__ */ n("span", {
+      className: s("w-4 h-4 flex justify-center", {
+        "items-center": !t.subLabel,
+        "items-baseline -tranmetal-y-2": !!t.subLabel
+      }, t.leftIconClassName),
+      children: t.leftIcon
+    }) : null, w(t)]
+  });
+};
+export {
+  K as ListItem
+};

package/dist/components/Select/components/ListItem/ListItem.types.d.ts

@@ -0,0 +1,9 @@
+import { ComponentRef, RefObject } from 'react';
+import { Option } from '../../Select.types';
+export type ListItemProps = Option & {
+    isEmpty?: boolean;
+    className?: string;
+    listItemSecondRowClassName?: string;
+    isClickable: boolean;
+    inputRef?: RefObject<ComponentRef<'input'> | null>;
+};

package/dist/components/Select/components/ListItem/ListItem.variants.d.ts

@@ -0,0 +1 @@
+export declare const listItemVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/{Dropdown → Select}/components/ListItem/ListItem.variants.js

@@ -1,8 +1,8 @@
-import { c as r } from "../../../../index-D29mdTf5.js";
-const t = r([
+import { t as r } from "../../../../dist-DtEbXv47.js";
+var a = r([
   "cursor-pointer",
-  "py-2",
-  "px-2",
+  "py-1.5",
+  "px-6",
   "h-full",
   "focus-visible:outline-none",
   "m-0",
@@ -12,11 +12,12 @@ const t = r([
   "gap-3",
   "transition-bg",
   "duration-250",
+  "min-h-10",
   "hover:bg-gray-50",
   "focus:bg-gray-50",
-  "dark:hover:bg-slate-700",
-  "dark:focus:bg-slate-700"
+  "dark:hover:bg-metal-700",
+  "dark:focus:bg-metal-700"
 ]);
 export {
-  t as listItemVariants
+  a as listItemVariants
 };

package/dist/components/Select/components/Wrapper.d.ts

@@ -0,0 +1,5 @@
+import { ComponentRef, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { SelectProps } from '../Select.types';
+export declare const Wrapper: ForwardRefExoticComponent<Omit<SelectProps, 'options'> & {
+    groupedOptions: SelectProps['options'];
+} & RefAttributes<ComponentRef<'input'>>>;

package/dist/components/Select/components/Wrapper.js

@@ -0,0 +1,4 @@
+import { t as p } from "../../../Wrapper-DEJ-hyar.js";
+export {
+  p as Wrapper
+};

package/dist/components/Select/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './AdditionalOptions/AdditionalOptions';
+export * from './EmptyList';
+export * from './List/List';
+export * from './Wrapper';

package/dist/components/Select/components/index.js

@@ -0,0 +1,10 @@
+import { t as o } from "../../../Wrapper-DEJ-hyar.js";
+import { t as i } from "../../../AdditionalOptions-Cx9wU01w.js";
+import { EmptyList as p } from "./EmptyList.js";
+import { List as a } from "./List/List.js";
+export {
+  i as AdditionalOptions,
+  p as EmptyList,
+  a as List,
+  o as Wrapper
+};

package/dist/components/Select/constants/index.d.ts

@@ -0,0 +1,2 @@
+export * from './pagination';
+export * from './list';

package/dist/components/Select/constants/index.js

@@ -0,0 +1,6 @@
+import { DEFAULT_LIST_SIZE as r } from "./pagination.js";
+import { ITEM_HEIGHT_PX as E } from "./list.js";
+export {
+  r as DEFAULT_LIST_SIZE,
+  E as ITEM_HEIGHT_PX
+};

package/dist/components/Select/constants/list.d.ts

@@ -0,0 +1 @@
+export declare const ITEM_HEIGHT_PX = 40;

package/dist/components/Select/constants/list.js

@@ -0,0 +1,4 @@
+var r = 40;
+export {
+  r as ITEM_HEIGHT_PX
+};

package/dist/components/Select/constants/pagination.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_LIST_SIZE = 10;

package/dist/components/Select/constants/pagination.js

@@ -0,0 +1,4 @@
+var r = 10;
+export {
+  r as DEFAULT_LIST_SIZE
+};

package/dist/components/Select/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './select.hook';
+export * from './select.provider';

package/dist/components/Select/contexts/index.js

@@ -0,0 +1,6 @@
+import { useSelectContext as o } from "./select.hook.js";
+import { SelectProvider as t } from "./select.provider.js";
+export {
+  t as SelectProvider,
+  o as useSelectContext
+};

package/dist/components/Select/contexts/select.context.d.ts

@@ -0,0 +1,21 @@
+import { ComponentRef, Dispatch, RefObject, SetStateAction } from 'react';
+import { Option } from '../Select.types';
+export type SelectContextType = {
+    highlightSearchEnabled: boolean;
+    isOpen: boolean;
+    searchTerm: string;
+    value?: string;
+    canFilter: boolean;
+    canContinueFetching: boolean;
+    page: number;
+    options: Option[];
+    isTyping?: boolean;
+    setOptions: Dispatch<SetStateAction<Option[]>>;
+    setPage: Dispatch<SetStateAction<number>>;
+    setCanContinueFetching: Dispatch<SetStateAction<boolean>>;
+    setCanFilter: Dispatch<SetStateAction<boolean>>;
+    setSearchTerm: Dispatch<SetStateAction<string>>;
+    setValue: (value: string, inputRef?: RefObject<ComponentRef<'input'> | null>) => void;
+    toggleOpen: (value?: boolean) => void;
+};
+export declare const SelectContext: import('react').Context<SelectContextType>;

package/dist/components/Select/contexts/select.context.js

@@ -0,0 +1,36 @@
+import { createContext as e } from "react";
+var t = e({
+  highlightSearchEnabled: !1,
+  isOpen: !1,
+  searchTerm: "",
+  value: void 0,
+  canFilter: !0,
+  canContinueFetching: !0,
+  page: 1,
+  options: [],
+  isTyping: !1,
+  setOptions() {
+    throw new Error("setOptions function must be overridden");
+  },
+  setPage() {
+    throw new Error("setPage function must be overridden");
+  },
+  setCanContinueFetching() {
+    throw new Error("setCanContinueFetching function must be overridden");
+  },
+  setCanFilter() {
+    throw new Error("setCanFilter function must be overridden");
+  },
+  setSearchTerm() {
+    throw new Error("setSearchTerm function must be overridden");
+  },
+  setValue() {
+    throw new Error("setValue function must be overridden");
+  },
+  toggleOpen() {
+    throw new Error("toggleOpen function must be overridden");
+  }
+});
+export {
+  t as SelectContext
+};

package/dist/components/Select/contexts/select.hook.d.ts

@@ -0,0 +1,2 @@
+import { SelectContextType } from './select.context';
+export declare const useSelectContext: () => SelectContextType;

package/dist/components/Select/contexts/select.hook.js

@@ -0,0 +1,10 @@
+import { SelectContext as t } from "./select.context.js";
+import { useContext as o } from "react";
+var c = () => {
+  const e = o(t);
+  if (!e) throw new Error("useSelectContext must be used within a SelectProvider");
+  return e;
+};
+export {
+  c as useSelectContext
+};

package/dist/components/Select/contexts/select.provider.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from 'react';
+import { SelectProps, Option } from '../Select.types';
+export declare const SelectProvider: FC<PropsWithChildren & {
+    highlightSearch?: boolean;
+    name?: string;
+    value?: string;
+    options: Option[];
+    onChange?: SelectProps['onChange'];
+    onBlur?: SelectProps['onBlur'];
+}>;

package/dist/components/Select/contexts/select.provider.js

@@ -0,0 +1,48 @@
+import { useToggle as L } from "../../../hooks/useToggle.js";
+import { SelectContext as N } from "./select.context.js";
+import { useCallback as f, useEffect as T, useRef as p, useState as e } from "react";
+import { jsx as O } from "react/jsx-runtime";
+var c = 1, R = 300, V = ({ children: v, value: C, name: i, highlightSearch: E = !1, options: n, onChange: a, onBlur: u }) => {
+  const [S, l] = e(n), d = p(E), [F, g] = L(!1), [P, I] = e(""), [b, x] = e(!0), [A, o] = e(!0), [_, s] = e(c), [y, h] = e(!1), t = p(void 0), D = f((r, m) => {
+    m?.current && (m.current.value = r), t.current && clearTimeout(t.current), h(!0), o(!0), s(c), a?.({ target: {
+      value: r,
+      name: i ?? ""
+    } }), u?.(), t.current = setTimeout(() => {
+      h(!1);
+    }, R);
+  }, [
+    a,
+    i,
+    u
+  ]), G = f((r) => {
+    g(r), o(!0), s(c);
+  }, [g]);
+  return T(() => {
+    l(n);
+  }, [n.length]), T(() => () => {
+    t.current && clearTimeout(t.current);
+  }, []), /* @__PURE__ */ O(N.Provider, {
+    value: {
+      highlightSearchEnabled: d.current,
+      isOpen: F,
+      searchTerm: P,
+      value: C,
+      canFilter: b,
+      canContinueFetching: A,
+      page: _,
+      options: S,
+      isTyping: y,
+      setOptions: l,
+      setPage: s,
+      setCanContinueFetching: o,
+      setCanFilter: x,
+      setSearchTerm: I,
+      setValue: D,
+      toggleOpen: G
+    },
+    children: v
+  });
+};
+export {
+  V as SelectProvider
+};

package/dist/components/Select/hooks/useNavigationList.d.ts

@@ -0,0 +1,11 @@
+import { ComponentRef, RefObject } from 'react';
+import { Option } from '../Select.types';
+type UseNavigationListProps = {
+    inputRef?: RefObject<ComponentRef<'input'> | null>;
+    searchable?: boolean;
+    ulRef: RefObject<ComponentRef<'ul'> | null>;
+    wrapperInputRef: RefObject<ComponentRef<'div'> | null>;
+    filteredOptions: Option[];
+};
+export declare const useNavigationUlList: ({ searchable, ulRef, wrapperInputRef, filteredOptions, }: UseNavigationListProps) => void;
+export {};

package/dist/components/Select/hooks/useNavigationList.js

@@ -0,0 +1,41 @@
+import { useSelectContext as k } from "../contexts/select.hook.js";
+import { useEffect as a, useRef as b } from "react";
+var A = ({ searchable: o, ulRef: n, wrapperInputRef: e, filteredOptions: f }) => {
+  const r = b(0), { isOpen: s } = k();
+  a(() => {
+    const g = n.current?.querySelectorAll("li") ?? [], t = Array.from(g).filter((c) => c.getAttribute("data-action") !== "true"), u = new AbortController(), i = () => {
+      r.current < t.length - 1 ? (r.current = r.current + 1, t[r.current].focus()) : (r.current = 0, t[0].focus());
+    }, l = () => {
+      r.current > 0 ? (r.current = r.current - 1, t[r.current].focus()) : (r.current = 0, e?.current && o ? e.current.querySelector("input")?.focus() : e.current?.focus());
+    };
+    return n.current?.addEventListener("keydown", (c) => {
+      switch (c.preventDefault(), c.key) {
+        case "ArrowDown":
+          i();
+          break;
+        case "Tab":
+          c.shiftKey ? l() : i();
+          break;
+        case "ArrowUp":
+          r.current === 0 ? e.current?.focus() : l();
+          break;
+        case "Enter":
+          t[r.current]?.click();
+          break;
+      }
+    }, { signal: u.signal }), () => {
+      u.abort();
+    };
+  }, [
+    n,
+    r,
+    e,
+    o,
+    f.length
+  ]), a(() => {
+    s || (r.current = 0);
+  }, [s]);
+};
+export {
+  A as useNavigationUlList
+};

package/dist/components/Select/hooks/useSelect.d.ts

@@ -0,0 +1,15 @@
+import { ComponentRef, RefObject } from 'react';
+import { SelectProps, Option } from '../Select.types';
+type UseSelectParams = {
+    ulRef: RefObject<ComponentRef<'ul'> | null>;
+    inputRef?: RefObject<ComponentRef<'input'> | null>;
+    disabled: boolean;
+    internalValue?: Option;
+    onBlur?: SelectProps['onBlur'];
+};
+export declare const useSelect: ({ ulRef, inputRef, disabled, internalValue, onBlur, }: UseSelectParams) => {
+    wrapperRef: RefObject<HTMLDivElement | null>;
+    wrapperInputRef: RefObject<HTMLDivElement | null>;
+    handleOpen: () => void;
+};
+export {};

package/dist/components/Select/hooks/useSelect.js

@@ -0,0 +1,67 @@
+import { useSelectContext as b } from "../contexts/select.hook.js";
+import { useCallback as w, useEffect as c, useRef as m } from "react";
+var h = ({ ulRef: f, inputRef: r, disabled: E, internalValue: u, onBlur: g }) => {
+  const t = m(null), a = m(null), { value: i, setSearchTerm: v, setCanFilter: d, toggleOpen: n } = b();
+  return c(() => {
+    const e = new AbortController(), s = (l) => {
+      l.key === "Escape" && n(!1);
+    }, o = (l) => {
+      t.current?.contains(l.target) || n(!1);
+    };
+    return document.addEventListener("keydown", s, { signal: e.signal }), document.addEventListener("mousedown", o, { signal: e.signal }), document.addEventListener("visibilitychange", () => {
+      document.hidden && n(!1);
+    }, { signal: e.signal }), a.current?.addEventListener("focusin", (l) => {
+      !E && l.target?.matches(":focus-visible") && n(!0);
+    }, { signal: e.signal }), () => {
+      e.abort();
+    };
+  }, [n, t]), c(() => {
+    const e = new AbortController();
+    return a.current?.addEventListener("keydown", (s) => {
+      if (s.key === "ArrowDown") {
+        const o = f.current?.querySelector("li");
+        o && o.focus();
+      }
+    }, { signal: e.signal }), () => {
+      e.abort();
+    };
+  }, [a, f]), c(() => {
+    const e = new AbortController();
+    return r?.current?.addEventListener("focusin", () => {
+      v(u?.value ?? ""), d(!1);
+    }, { signal: e.signal }), r?.current?.addEventListener("focusout", () => {
+      d(!0);
+    }, { signal: e.signal }), a.current?.addEventListener("focus", () => {
+      d(!1);
+    }, { signal: e.signal }), t.current?.addEventListener("focusout", (s) => {
+      t.current?.contains(s.relatedTarget) || n(!1);
+    }, { signal: e.signal }), () => {
+      e.abort();
+    };
+  }, [i]), c(() => {
+    r?.current && (r.current.value = i && u?.value || "");
+  }, [u, i]), c(() => {
+    const e = new AbortController();
+    return t.current?.addEventListener("focusout", (s) => {
+      const o = s.relatedTarget;
+      (!o || !t.current?.contains(o)) && (r?.current?.value || g?.());
+    }), () => {
+      e.abort();
+    };
+  }, [
+    n,
+    t,
+    v,
+    g,
+    i
+  ]), {
+    wrapperRef: t,
+    wrapperInputRef: a,
+    handleOpen: w(() => {
+      n(!0), requestAnimationFrame(() => r?.current?.focus());
+    }, [r, n])
+  };
+};
+export {
+  h as useSelect
+};