@stanfordspezi/spezi-web-design-system/dist/Select-6uAWOsbr.mjs

Stanford Biodesign Digital Health Spezi Web Design System

import { jsx as r, jsxs as m, Fragment as I } from "react/jsx-runtime";
import { C as b, f as w, d as z, b as k, R as M, P as $, c as j, e as A, g as B } from "./Command-tGp1Ep9F.mjs";
import { createContext as F, useEffect as G, useContext as q, useState as C, useCallback as D } from "react";
import { c as g } from "./index-2NvaPZWc.mjs";
import { r as K } from "./react-D55FPuWj.mjs";
import { B as L } from "./Button-nH76KtOO.mjs";
import { e as U, b as W, g as H } from "./Popover-B_eTNIg4.mjs";
import J from "./check-BND_cTIg.mjs";
import Q from "./chevron-down-CefUL7ih.mjs";
import { i as N, a as X } from "./isUndefined-DTeEysaY.mjs";
import { R as Y } from "./index-CWjvisfz.mjs";
const T = F(null), f = () => {
  const e = q(T);
  if (e === null)
    throw new Error("useSelectContext must be used within a SelectContext");
  return e;
}, Z = (e) => {
  const o = {
    placeholder: "Search...",
    emptyMessage: "No results found."
  };
  return N(e) ? null : X(e) ? e ? o : null : {
    ...o,
    ...e
  };
}, _ = (e) => N(e) || e === !1 ? null : e === !0 ? {} : e, ee = ({
  value: e,
  defaultValue: o,
  onValueChange: t,
  create: n,
  search: a,
  disabled: s,
  formatValue: c,
  id: i
}) => {
  const [l, d] = C(!1), [u, P] = C(
    e ?? o
  ), [v, E] = C(/* @__PURE__ */ new Map()), O = (p) => {
    P(p), t?.(p), d(!1);
  }, R = D((p, S) => {
    E((x) => {
      const h = x.get(p);
      return h && h.label === h.label && h.itemText === S.itemText ? x : new Map(x).set(p, S);
    });
  }, []);
  return {
    open: l,
    setOpen: d,
    selectedValue: e ?? u,
    selectValue: O,
    items: v,
    onItemAdded: R,
    create: _(n),
    search: Z(a),
    disabled: s,
    formatValue: c,
    id: i
  };
}, pe = ({ children: e, ...o }) => {
  const t = ee(o);
  return /* @__PURE__ */ r(T.Provider, { value: t, children: /* @__PURE__ */ r(U, { open: t.open, onOpenChange: t.setOpen, children: e }) });
}, fe = ({
  role: e = "combobox",
  "aria-expanded": o,
  className: t,
  children: n,
  id: a,
  ...s
}) => {
  const { open: c, disabled: i, id: l } = f();
  return /* @__PURE__ */ r(H, { asChild: !0, children: /* @__PURE__ */ m(
    L,
    {
      ...s,
      "data-slot": "select-trigger",
      id: a ?? l,
      role: e,
      size: null,
      variant: null,
      "aria-expanded": o ?? c,
      disabled: i,
      className: g(
        "group border-input bg-surface-primary ring-offset-surface placeholder:text-muted-foreground focus-ring flex h-10 w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm",
        "[&>span]:line-clamp-1 [&>span]:text-left",
        "disabled:cursor-not-allowed disabled:opacity-50",
        t
      ),
      children: [
        n,
        /* @__PURE__ */ r(Q, { className: "size-4 shrink-0 opacity-50 transition group-hover:opacity-80" })
      ]
    }
  ) });
}, he = ({
  placeholder: e,
  className: o,
  ...t
}) => {
  const { selectedValue: n, items: a, formatValue: s } = f();
  return n ? /* @__PURE__ */ r(
    "span",
    {
      "data-slot": "select-value",
      className: g("w-full min-w-0 overflow-hidden", o),
      ...t,
      children: a.get(n)?.itemText ?? a.get(n)?.label ?? s?.(n) ?? n
    }
  ) : /* @__PURE__ */ r(
    "span",
    {
      "data-slot": "select-value",
      className: g(
        "text-muted-foreground w-full min-w-0 overflow-hidden font-normal",
        o
      ),
      ...t,
      children: e
    }
  );
}, V = "CREATE-NEW-OPTION:select-unique-key-123", ge = ({ children: e, ...o }) => {
  const { create: t, search: n, items: a } = f();
  return /* @__PURE__ */ m(I, { children: [
    /* @__PURE__ */ r("div", { className: "hidden", "aria-hidden": "true", children: /* @__PURE__ */ r(b, { "aria-hidden": "true", tabIndex: -1, children: /* @__PURE__ */ r(w, { "aria-hidden": "true", tabIndex: -1, children: e }) }) }),
    /* @__PURE__ */ r(W, { className: "min-w-[var(--radix-popover-trigger-width)] !p-0", children: /* @__PURE__ */ m(
      b,
      {
        ...o,
        filter: (s, c, i) => {
          if (s === V) return 1e-4;
          const l = a.get(s), d = K(l?.label), u = `${s}${l?.itemText}${d}`;
          return M(u, c, i);
        },
        children: [
          n ? /* @__PURE__ */ r(z, { placeholder: n.placeholder }) : /* @__PURE__ */ r("button", { autoFocus: !0, className: "sr-only" }),
          /* @__PURE__ */ m(w, { children: [
            n && /* @__PURE__ */ r(k, { children: n.emptyMessage }),
            e,
            t && /* @__PURE__ */ r(te, { ...t })
          ] })
        ]
      }
    ) })
  ] });
}, y = ({
  value: e,
  children: o,
  onSelect: t,
  addToItems: n = !0,
  itemText: a,
  ...s
}) => {
  const { selectValue: c, selectedValue: i, onItemAdded: l, formatValue: d } = f(), u = i === e;
  return G(() => {
    n && l(e, { label: o, itemText: a });
  }, [e, o, l, n, a]), /* @__PURE__ */ m(
    A,
    {
      ...s,
      value: e,
      onSelect: () => {
        c(e), t?.(e);
      },
      children: [
        /* @__PURE__ */ r(Y, { children: a }),
        /* @__PURE__ */ r(
          J,
          {
            className: g("size-4", u ? "opacity-100" : "opacity-0")
          }
        ),
        o ?? d?.(e) ?? e
      ]
    }
  );
}, xe = (e) => /* @__PURE__ */ r(j, { ...e }), Ce = (e) => /* @__PURE__ */ r(B, { ...e }), te = ({
  onCreateOption: e,
  render: o
}) => {
  const t = $((l) => l.search), { selectValue: n, items: a, selectedValue: s, formatValue: c } = f(), i = s && !a.has(s);
  return /* @__PURE__ */ m(I, { children: [
    i && /* @__PURE__ */ r(y, { addToItems: !1, value: s, children: c?.(s) ?? s }),
    t && /* @__PURE__ */ r(
      y,
      {
        value: V,
        addToItems: !1,
        onSelect: () => {
          n(t), e?.(t);
        },
        children: o?.(t) ?? `Create "${t}"`
      }
    )
  ] });
};
export {
  pe as S,
  ge as a,
  te as b,
  xe as c,
  y as d,
  Ce as e,
  fe as f,
  he as g,
  ee as h,
  f as u
};