@bioturing/components 0.19.0 → 0.20.0

package/dist/components/cmdk/index.js

@@ -0,0 +1,611 @@
+"use client";
+import { jsxs as ee, jsx as S } from "react/jsx-runtime";
+import s, { useId as D } from "react";
+import { Dialog as N } from "@base-ui-components/react";
+import { commandScore as be } from "./command-score.js";
+import G from "merge-refs";
+import { WithRenderProp as A } from "../utils/WithRenderProp.js";
+const F = '[cmdk-group=""]', Y = '[cmdk-group-items=""]', pe = '[cmdk-group-heading=""]', ae = '[cmdk-item=""]', le = `${ae}:not([aria-disabled="true"])`, Z = "cmdk-item-select", M = "data-value", Se = (r, n, t) => be(r, n, t), ue = s.createContext(void 0), K = () => s.useContext(ue), de = s.createContext(void 0), te = () => s.useContext(de), fe = s.createContext(void 0), me = s.forwardRef(
+  (r, n) => {
+    const t = P(() => ({
+      /** Value of the search query. */
+      search: "",
+      /** Currently selected item value. */
+      value: r.value ?? r.defaultValue ?? "",
+      /** Currently selected item id. */
+      selectedItemId: void 0,
+      filtered: {
+        /** The count of all visible items. */
+        count: 0,
+        /** Map from visible item id to its search score. */
+        items: /* @__PURE__ */ new Map(),
+        /** Set of groups with at least one visible item. */
+        groups: /* @__PURE__ */ new Set()
+      }
+    })), a = P(() => /* @__PURE__ */ new Set()), i = P(() => /* @__PURE__ */ new Map()), u = P(
+      () => /* @__PURE__ */ new Map()
+    ), d = P(() => /* @__PURE__ */ new Set()), h = he(r), {
+      label: v,
+      children: m,
+      value: g,
+      onValueChange: k,
+      filter: y,
+      shouldFilter: C,
+      loop: T,
+      disablePointerSelection: ge = !1,
+      vimBindings: j = !0,
+      ...O
+    } = r, q = D(), U = D(), V = D(), b = s.useRef(null), I = Le();
+    _(() => {
+      if (g !== void 0) {
+        const e = g.trim();
+        t.current.value = e, E.emit();
+      }
+    }, [g]), _(() => {
+      I(6, ne);
+    }, []);
+    const E = s.useMemo(() => ({
+      subscribe: (e) => (d.current.add(e), () => d.current.delete(e)),
+      snapshot: () => t.current,
+      setState: (e, l, c) => {
+        var o, f, p, w;
+        if (!Object.is(t.current[e], l)) {
+          if (t.current[e] = l, e === "search")
+            J(), H(), I(1, W);
+          else if (e === "value") {
+            if (document.activeElement.hasAttribute("cmdk-input") || document.activeElement.hasAttribute("cmdk-root")) {
+              const R = document.getElementById(V);
+              R ? R.focus() : (o = document.getElementById(q)) == null || o.focus();
+            }
+            if (I(7, () => {
+              var R;
+              t.current.selectedItemId = (R = L()) == null ? void 0 : R.id, E.emit();
+            }), c || I(5, ne), ((f = h.current) == null ? void 0 : f.value) !== void 0) {
+              const R = l ?? "";
+              (w = (p = h.current).onValueChange) == null || w.call(p, R);
+              return;
+            }
+          }
+          E.emit();
+        }
+      },
+      emit: () => {
+        d.current.forEach((e) => e());
+      }
+    }), []), z = s.useMemo(
+      () => ({
+        // Keep id → {value, keywords} mapping up-to-date
+        value: (e, l, c) => {
+          var o;
+          l !== ((o = u.current.get(e)) == null ? void 0 : o.value) && (u.current.set(e, { value: l, keywords: c }), t.current.filtered.items.set(e, re(l, c)), I(2, () => {
+            H(), E.emit();
+          }));
+        },
+        // Track item lifecycle (mount, unmount)
+        item: (e, l) => (a.current.add(e), l && (i.current.has(l) ? i.current.get(l).add(e) : i.current.set(l, /* @__PURE__ */ new Set([e]))), I(3, () => {
+          J(), H(), t.current.value || W(), E.emit();
+        }), () => {
+          u.current.delete(e), a.current.delete(e), t.current.filtered.items.delete(e);
+          const c = L();
+          I(4, () => {
+            J(), (c == null ? void 0 : c.getAttribute("id")) === e && W(), E.emit();
+          });
+        }),
+        // Track group lifecycle (mount, unmount)
+        group: (e) => (i.current.has(e) || i.current.set(e, /* @__PURE__ */ new Set()), () => {
+          u.current.delete(e), i.current.delete(e);
+        }),
+        filter: () => h.current.shouldFilter,
+        label: v || r["aria-label"],
+        getDisablePointerSelection: () => h.current.disablePointerSelection,
+        listId: q,
+        inputId: V,
+        labelId: U,
+        listInnerRef: b
+      }),
+      []
+    );
+    function re(e, l) {
+      var o;
+      const c = ((o = h.current) == null ? void 0 : o.filter) ?? Se;
+      return e ? c(e, t.current.search, l) : 0;
+    }
+    function H() {
+      if (!t.current.search || // Explicitly false, because true | undefined is the default
+      h.current.shouldFilter === !1)
+        return;
+      const e = t.current.filtered.items, l = [];
+      t.current.filtered.groups.forEach((o) => {
+        const f = i.current.get(o);
+        let p = 0;
+        f.forEach((w) => {
+          const R = e.get(w);
+          p = Math.max(R, p);
+        }), l.push([o, p]);
+      });
+      const c = b.current;
+      B().sort((o, f) => {
+        const p = o.getAttribute("id"), w = f.getAttribute("id");
+        return (e.get(w) ?? 0) - (e.get(p) ?? 0);
+      }).forEach((o) => {
+        const f = o.closest(Y);
+        f ? f.appendChild(
+          o.parentElement === f ? o : o.closest(`${Y} > *`)
+        ) : c.appendChild(
+          o.parentElement === c ? o : o.closest(`${Y} > *`)
+        );
+      }), l.sort((o, f) => f[1] - o[1]).forEach((o) => {
+        var p;
+        const f = (p = b.current) == null ? void 0 : p.querySelector(
+          `${F}[${M}="${encodeURIComponent(o[0])}"]`
+        );
+        f == null || f.parentElement.appendChild(f);
+      });
+    }
+    function W() {
+      const e = B().find(
+        (c) => c.getAttribute("aria-disabled") !== "true"
+      ), l = e == null ? void 0 : e.getAttribute(M);
+      E.setState("value", l || void 0);
+    }
+    function J() {
+      var l, c;
+      if (!t.current.search || // Explicitly false, because true | undefined is the default
+      h.current.shouldFilter === !1) {
+        t.current.filtered.count = a.current.size;
+        return;
+      }
+      t.current.filtered.groups = /* @__PURE__ */ new Set();
+      let e = 0;
+      for (const o of a.current) {
+        const f = ((l = u.current.get(o)) == null ? void 0 : l.value) ?? "", p = ((c = u.current.get(o)) == null ? void 0 : c.keywords) ?? [], w = re(f, p);
+        t.current.filtered.items.set(o, w), w > 0 && e++;
+      }
+      for (const [o, f] of i.current)
+        for (const p of f)
+          if (t.current.filtered.items.get(p) > 0) {
+            t.current.filtered.groups.add(o);
+            break;
+          }
+      t.current.filtered.count = e;
+    }
+    function ne() {
+      var l, c, o;
+      const e = L();
+      e && (((l = e.parentElement) == null ? void 0 : l.firstChild) === e && ((o = (c = e.closest(F)) == null ? void 0 : c.querySelector(pe)) == null || o.scrollIntoView({ block: "nearest" })), e.scrollIntoView({ block: "nearest" }));
+    }
+    function L() {
+      var e;
+      return (e = b.current) == null ? void 0 : e.querySelector(
+        `${ae}[aria-selected="true"]`
+      );
+    }
+    function B() {
+      var e;
+      return Array.from(
+        ((e = b.current) == null ? void 0 : e.querySelectorAll(le)) || []
+      );
+    }
+    function Q(e) {
+      const c = B()[e];
+      c && E.setState("value", c.getAttribute(M));
+    }
+    function X(e) {
+      var p;
+      const l = L(), c = B(), o = c.findIndex((w) => w === l);
+      let f = c[o + e];
+      (p = h.current) != null && p.loop && (f = o + e < 0 ? c[c.length - 1] : o + e === c.length ? c[0] : c[o + e]), f && E.setState("value", f.getAttribute(M));
+    }
+    function oe(e) {
+      const l = L();
+      let c = l == null ? void 0 : l.closest(F), o;
+      for (; c && !o; )
+        c = e > 0 ? Ae(c, F) : _e(c, F), o = c == null ? void 0 : c.querySelector(le);
+      o ? E.setState("value", o.getAttribute(M)) : X(e);
+    }
+    const ce = () => Q(B().length - 1), se = (e) => {
+      e.preventDefault(), e.metaKey ? ce() : e.altKey ? oe(1) : X(1);
+    }, ie = (e) => {
+      e.preventDefault(), e.metaKey ? Q(0) : e.altKey ? oe(-1) : X(-1);
+    };
+    return /* @__PURE__ */ ee(
+      A,
+      {
+        ref: n,
+        tabIndex: -1,
+        ...O,
+        "cmdk-root": "",
+        onKeyDown: (e) => {
+          var c;
+          (c = O.onKeyDown) == null || c.call(O, e);
+          const l = e.nativeEvent.isComposing || e.keyCode === 229;
+          if (!(e.defaultPrevented || l))
+            switch (e.key) {
+              case "n":
+              case "j": {
+                j && e.ctrlKey && se(e);
+                break;
+              }
+              case "ArrowDown": {
+                se(e);
+                break;
+              }
+              case "p":
+              case "k": {
+                j && e.ctrlKey && ie(e);
+                break;
+              }
+              case "ArrowUp": {
+                ie(e);
+                break;
+              }
+              case "Home": {
+                e.preventDefault(), Q(0);
+                break;
+              }
+              case "End": {
+                e.preventDefault(), ce();
+                break;
+              }
+              case "Enter": {
+                e.preventDefault();
+                const o = L();
+                if (o) {
+                  const f = new Event(Z);
+                  o.dispatchEvent(f);
+                }
+              }
+            }
+        },
+        children: [
+          /* @__PURE__ */ S(
+            "label",
+            {
+              "cmdk-label": "",
+              htmlFor: z.inputId,
+              id: z.labelId,
+              style: Pe,
+              children: v
+            }
+          ),
+          $(r, (e) => /* @__PURE__ */ S(de.Provider, { value: E, children: /* @__PURE__ */ S(ue.Provider, { value: z, children: e }) }))
+        ]
+      }
+    );
+  }
+), Ee = s.forwardRef(
+  (r, n) => {
+    var V;
+    const t = D(), a = s.useRef(null), i = s.useContext(fe), u = K(), d = he(r), h = ((V = d.current) == null ? void 0 : V.forceMount) ?? (i == null ? void 0 : i.forceMount);
+    _(() => {
+      if (!h)
+        return u.item(t, i == null ? void 0 : i.id);
+    }, [h]);
+    const v = ve(
+      t,
+      a,
+      [r.value, r.children, a],
+      r.keywords
+    ), m = te(), g = x(
+      (b) => b.value && b.value === v.current
+    ), k = x(
+      (b) => h || u.filter() === !1 ? !0 : b.search ? b.filtered.items.get(t) > 0 : !0
+    );
+    s.useEffect(() => {
+      const b = a.current;
+      if (!(!b || r.disabled))
+        return b.addEventListener(Z, y), () => b.removeEventListener(Z, y);
+    }, [k, r.onSelect, r.disabled]);
+    function y() {
+      var b, I;
+      C(), (I = (b = d.current).onSelect) == null || I.call(b, v.current);
+    }
+    function C() {
+      m.setState("value", v.current, !0);
+    }
+    if (!k) return null;
+    const {
+      disabled: T,
+      value: ge,
+      onSelect: j,
+      forceMount: O,
+      keywords: q,
+      ...U
+    } = r;
+    return /* @__PURE__ */ S(
+      A,
+      {
+        ref: G(a, n),
+        ...U,
+        id: t,
+        "cmdk-item": "",
+        role: "option",
+        "aria-disabled": !!T,
+        "aria-selected": !!g,
+        "data-disabled": !!T,
+        "data-selected": !!g,
+        onPointerMove: T || u.getDisablePointerSelection() ? void 0 : C,
+        onClick: T ? void 0 : y,
+        children: r.children
+      }
+    );
+  }
+), we = s.forwardRef(
+  (r, n) => {
+    const { heading: t, children: a, forceMount: i, ...u } = r, d = D(), h = s.useRef(null), v = s.useRef(null), m = D(), g = K(), k = x(
+      (C) => i || g.filter() === !1 ? !0 : C.search ? C.filtered.groups.has(d) : !0
+    );
+    _(() => g.group(d), []), ve(d, h, [r.value, r.heading, v]);
+    const y = s.useMemo(
+      () => ({ id: d, forceMount: i }),
+      [i]
+    );
+    return /* @__PURE__ */ ee(
+      A,
+      {
+        ref: G(h, n),
+        ...u,
+        "cmdk-group": "",
+        role: "presentation",
+        hidden: k ? void 0 : !0,
+        children: [
+          t && /* @__PURE__ */ S(
+            "div",
+            {
+              ref: v,
+              "cmdk-group-heading": "",
+              "aria-hidden": !0,
+              id: m,
+              children: t
+            }
+          ),
+          $(r, (C) => /* @__PURE__ */ S(
+            "div",
+            {
+              "cmdk-group-items": "",
+              role: "group",
+              "aria-labelledby": t ? m : void 0,
+              children: /* @__PURE__ */ S(fe.Provider, { value: y, children: C })
+            }
+          ))
+        ]
+      }
+    );
+  }
+), Ce = s.forwardRef(
+  (r, n) => {
+    const { alwaysRender: t, ...a } = r, i = s.useRef(null), u = x((d) => !d.search);
+    return !t && !u ? null : /* @__PURE__ */ S(
+      A,
+      {
+        ref: G(i, n),
+        ...a,
+        "cmdk-separator": "",
+        role: "separator"
+      }
+    );
+  }
+), Ie = s.forwardRef(
+  (r, n) => {
+    const { onValueChange: t, ...a } = r, i = r.value != null, u = te(), d = x((m) => m.search), h = x((m) => m.selectedItemId), v = K();
+    return s.useEffect(() => {
+      r.value != null && u.setState("search", r.value);
+    }, [r.value]), /* @__PURE__ */ S(
+      A,
+      {
+        as: "input",
+        ref: n,
+        ...a,
+        "cmdk-input": "",
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: !1,
+        "aria-autocomplete": "list",
+        role: "combobox",
+        "aria-expanded": !0,
+        "aria-controls": v.listId,
+        "aria-labelledby": v.labelId,
+        "aria-activedescendant": h,
+        id: v.inputId,
+        type: "text",
+        value: i ? r.value : d,
+        onChange: (m) => {
+          i || u.setState("search", m.target.value), t == null || t(m.target.value);
+        }
+      }
+    );
+  }
+), ye = s.forwardRef(
+  (r, n) => {
+    const { children: t, label: a = "Suggestions", ...i } = r, u = s.useRef(null), d = s.useRef(null), h = x((m) => m.selectedItemId), v = K();
+    return s.useEffect(() => {
+      if (d.current && u.current) {
+        const m = d.current, g = u.current;
+        let k;
+        const y = new ResizeObserver(() => {
+          k = requestAnimationFrame(() => {
+            const C = m.offsetHeight;
+            g.style.setProperty(
+              "--cmdk-list-height",
+              C.toFixed(1) + "px"
+            );
+          });
+        });
+        return y.observe(m), () => {
+          cancelAnimationFrame(k), y.unobserve(m);
+        };
+      }
+    }, []), /* @__PURE__ */ S(
+      A,
+      {
+        ref: G(u, n),
+        ...i,
+        "cmdk-list": "",
+        role: "listbox",
+        tabIndex: -1,
+        "aria-activedescendant": h,
+        "aria-label": a,
+        id: v.listId,
+        children: $(r, (m) => /* @__PURE__ */ S(
+          "div",
+          {
+            ref: G(d, v.listInnerRef),
+            "cmdk-list-sizer": "",
+            children: m
+          }
+        ))
+      }
+    );
+  }
+), Re = s.forwardRef(
+  (r, n) => {
+    const {
+      open: t,
+      onOpenChange: a,
+      overlayClassName: i,
+      contentClassName: u,
+      container: d,
+      ...h
+    } = r;
+    return /* @__PURE__ */ S(N.Root, { open: t, onOpenChange: a, children: /* @__PURE__ */ ee(N.Portal, { container: d, children: [
+      /* @__PURE__ */ S(N.Backdrop, { "cmdk-overlay": "", className: i }),
+      /* @__PURE__ */ S(
+        N.Popup,
+        {
+          "aria-label": r.label,
+          "cmdk-dialog": "",
+          className: u,
+          children: /* @__PURE__ */ S(me, { ref: n, ...h })
+        }
+      )
+    ] }) });
+  }
+), ke = s.forwardRef(
+  (r, n) => x((a) => a.filtered.count === 0) ? /* @__PURE__ */ S(
+    A,
+    {
+      ref: n,
+      ...r,
+      "cmdk-empty": "",
+      role: "presentation"
+    }
+  ) : null
+), xe = s.forwardRef(
+  (r, n) => {
+    const { progress: t, children: a, label: i = "Loading...", ...u } = r;
+    return /* @__PURE__ */ S(
+      A,
+      {
+        ref: n,
+        ...u,
+        "cmdk-loading": "",
+        role: "progressbar",
+        "aria-valuenow": t,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": i,
+        children: $(r, (d) => /* @__PURE__ */ S("div", { "aria-hidden": !0, children: d }))
+      }
+    );
+  }
+), Ge = Object.assign(me, {
+  List: ye,
+  Item: Ee,
+  Input: Ie,
+  Group: we,
+  Separator: Ce,
+  Dialog: Re,
+  Empty: ke,
+  Loading: xe
+});
+function Ae(r, n) {
+  let t = r.nextElementSibling;
+  for (; t; ) {
+    if (t.matches(n)) return t;
+    t = t.nextElementSibling;
+  }
+}
+function _e(r, n) {
+  let t = r.previousElementSibling;
+  for (; t; ) {
+    if (t.matches(n)) return t;
+    t = t.previousElementSibling;
+  }
+}
+function he(r) {
+  const n = s.useRef(r);
+  return _(() => {
+    n.current = r;
+  }), n;
+}
+const _ = typeof window > "u" ? s.useEffect : s.useLayoutEffect;
+function P(r) {
+  const n = s.useRef(void 0);
+  return n.current === void 0 && (n.current = r()), n;
+}
+function x(r) {
+  const n = te(), t = () => r(n.snapshot());
+  return s.useSyncExternalStore(n.subscribe, t, t);
+}
+function ve(r, n, t, a = []) {
+  const i = s.useRef(void 0), u = K();
+  return _(() => {
+    var v;
+    const d = (() => {
+      var m;
+      for (const g of t) {
+        if (typeof g == "string")
+          return g.trim();
+        if (typeof g == "object" && "current" in g)
+          return g.current ? (m = g.current.textContent) == null ? void 0 : m.trim() : i.current;
+      }
+    })(), h = a.map((m) => m.trim());
+    u.value(r, d, h), (v = n.current) == null || v.setAttribute(M, d), i.current = d;
+  }), i;
+}
+const Le = () => {
+  const [r, n] = s.useState(), t = P(() => /* @__PURE__ */ new Map());
+  return _(() => {
+    t.current.forEach((a) => a()), t.current = /* @__PURE__ */ new Map();
+  }, [r]), (a, i) => {
+    t.current.set(a, i), n({});
+  };
+};
+function Me(r) {
+  const n = r.type;
+  return typeof n == "function" ? n(r.props) : "render" in n ? n.render(r.props) : r;
+}
+function $({ asChild: r, children: n }, t) {
+  return r && s.isValidElement(n) ? s.cloneElement(
+    Me(n),
+    { ref: n.ref },
+    // @ts-expect-error expect error here
+    t(n.props.children)
+  ) : t(n);
+}
+const Pe = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: "0",
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  borderWidth: "0"
+};
+export {
+  Ge as Command,
+  Re as CommandDialog,
+  ke as CommandEmpty,
+  we as CommandGroup,
+  Ie as CommandInput,
+  Ee as CommandItem,
+  ye as CommandList,
+  xe as CommandLoading,
+  me as CommandRoot,
+  Ce as CommandSeparator,
+  Se as defaultFilter,
+  x as useCommandState
+};
+//# sourceMappingURL=index.js.map