import { j as s } from "../../../../../_virtual/jsx-runtime.js";
import { forwardRef as u, useState as f, useEffect as x, useImperativeHandle as h } from "react";
import { tx as l } from "../../../../style-system/dist/twind.js";
const y = u((t, d) => {
  const [o, n] = f(0), a = (e) => {
    const r = t.items[e];
    r && t.command({ id: r });
  }, i = () => {
    const e = (o + t.items.length - 1) % t.items.length;
    n(e), document.querySelector(`[data-ds-id="${e}"]`)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
  }, m = () => {
    const e = (o + 1) % t.items.length;
    n(e), document.querySelector(`[data-ds-id="${e}"]`)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
  }, c = () => {
    a(o);
  };
  return x(() => n(0), [t.items]), h(d, () => ({
    onKeyDown: ({ event: e }) => e.key === "ArrowUp" ? (i(), !0) : e.key === "ArrowDown" ? (m(), !0) : e.key === "Enter" ? (c(), !0) : !1
  })), /* @__PURE__ */ s.jsx(
    "div",
    {
      className: l(
        "bg-white l border border-gray-200 rounded-lg shadow-lg min-w-[280px] flex flex-col gap-0.5 max-h-[200px] overflow-auto p-2 z-auto"
      ),
      children: t.items.length ? t.items.map((e, r) => /* @__PURE__ */ s.jsx(
        "button",
        {
          "data-ds-id": r,
          type: "button",
          className: l(
            r === o ? "bg-upstart-100" : "hover:bg-upstart-50",
            "flex font-light text-sm text-left w-full items-center px-2 py-1 rounded"
          ),
          onClick: () => a(r),
          children: e
        },
        r
      )) : /* @__PURE__ */ s.jsx("div", { className: "item text-sm", children: "No match" })
    }
  );
});
export {
  y as default
};
//# sourceMappingURL=DatasourceFieldList.js.map
