@stackone/malachite 2.21.0 → 2.23.0

package/dist/components/Dropdown.js

@@ -0,0 +1,849 @@
+import { jsx as e, jsxs as m, Fragment as rt } from "react/jsx-runtime";
+import jt, { useState as B, useRef as g, useEffect as Et, useCallback as St, useLayoutEffect as Pt, useInsertionEffect as Bt, useId as Xt } from "react";
+import { createPortal as Yt } from "react-dom";
+import Qt, { useFormFieldIds as Ut } from "./BaseFormComponent.js";
+import Wt from "./CustomIcons/CaretDownIcon.js";
+import Ht from "./CustomIcons/CloseIcon.js";
+import { FieldMessage as Jt } from "./FieldMessage.js";
+import te from "./LoadingInput.js";
+import ee from "./Spinner.js";
+import xt from "./Tooltip.js";
+import { CONTROL_TEXT_SIZE_CLASS as X, CONTROL_TEXT_SIZE as re } from "./controlTextSize.js";
+import { computePanelGeometry as ne, isContentSizedPanel as Ot, PANEL_VIEWPORT_PADDING_PX as ie, isTriggerOffscreen as ae, rectSignature as oe } from "./dropdownPanelPosition.js";
+import { getTriggerVisual as le, DROPDOWN_TRIGGER_ATTR as zt } from "./dropdownTriggerStyle.js";
+import { pushEscapeLayer as se } from "./escapeLayers.js";
+import { ensureDropdownPanelStyles as ce } from "./optionRowStyles.js";
+import { overlayIdentity as de } from "./portalOverlay.js";
+import { useTopLayer as ue } from "./topLayer.js";
+const Ft = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 8,
+  padding: "24px 16px",
+  color: "var(--malachite-text-dimmed, rgb(161, 161, 161))"
+}, Tt = "var(--malachite-font-size-xsmall, 11px)", pe = "[data-dropdown-option]", Ct = (t) => Array.from((t == null ? void 0 : t.querySelectorAll(pe)) ?? []), he = (t, n) => {
+  const r = n.toLowerCase(), x = t.label.toLowerCase().includes(r), l = t.subtitle ? t.subtitle.toLowerCase().includes(r) : !1, d = t.rightSideText ? t.rightSideText.toLowerCase().includes(r) : !1;
+  return x || l || d;
+}, vt = {
+  small: "h-[var(--malachite-control-height-small,28px)]",
+  medium: "h-[var(--malachite-control-height-medium,32px)]",
+  large: "h-[var(--malachite-control-height-large,42px)]"
+}, fe = {
+  small: `${vt.small} px-2.5 py-1.5 ${X.small}`,
+  medium: `${vt.medium} px-3 py-1.5 ${X.medium}`,
+  large: `${vt.large} px-4 py-2.5 ${X.large}`
+}, ge = {
+  small: `min-h-[var(--malachite-control-height-small,28px)] px-2.5 py-1.5 ${X.small}`,
+  medium: `min-h-[var(--malachite-control-height-medium,32px)] px-3 py-1.5 ${X.medium}`,
+  large: `min-h-[var(--malachite-control-height-large,42px)] px-4 py-2.5 ${X.large}`
+}, me = {
+  small: "right-[26px] size-4",
+  medium: "right-[30px] size-4",
+  large: "right-[38px] size-4"
+}, xe = {
+  small: "top-[calc(var(--malachite-control-height-small,28px)/2)] -translate-y-1/2",
+  medium: "top-[calc(var(--malachite-control-height-medium,32px)/2)] -translate-y-1/2",
+  large: "top-[calc(var(--malachite-control-height-large,42px)/2)] -translate-y-1/2"
+}, ve = {
+  small: "rounded-[var(--malachite-radius-10,10px)]",
+  medium: "rounded-xl",
+  large: "rounded-[var(--malachite-radius-xxl,14px)]"
+}, Gt = () => !1, be = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 4
+}, ye = (t, n, r) => t === "value" ? n : t === "subtitle" ? r : /* @__PURE__ */ m("span", { style: be, children: [
+  /* @__PURE__ */ e("span", { children: n }),
+  /* @__PURE__ */ e("span", { children: r })
+] }), we = ({
+  wrap: t,
+  id: n,
+  children: r
+}) => t ? /* @__PURE__ */ e("span", { id: n, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ e(rt, { children: r }), Se = ({ row: t, children: n }) => t ? /* @__PURE__ */ e("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: n }) : /* @__PURE__ */ e(rt, { children: n }), Mt = jt.forwardRef(
+  ({
+    isOpen: t,
+    onClick: n,
+    selectedItem: r,
+    disabled: x = !1,
+    error: l = !1,
+    tone: d,
+    placeholder: R,
+    search: v = !1,
+    showSubtitleInTrigger: y = !1,
+    searchQuery: P = "",
+    onSearchChange: _,
+    onFocusOpen: k,
+    onArrowDown: N,
+    size: h = "large",
+    hasClear: w = !1,
+    onClear: o,
+    clearLabel: S,
+    controlId: s,
+    labelId: u,
+    describedBy: W,
+    required: c = !1,
+    ariaLabel: F,
+    ariaLabelledBy: nt,
+    hasCallerId: bt = !1
+  }, b) => {
+    const C = y && !v && !!(r != null && r.subtitle), Y = C ? ge[h] : fe[h], it = ve[h], K = `${s}-value`, Q = `${s}-subtitle`, at = !u && !F && !bt && C, ot = nt ?? (u && !F ? `${u} ${K}` : void 0) ?? (at ? K : void 0), U = (a) => {
+      a.key === "ArrowDown" && (a.preventDefault(), N == null || N());
+    }, G = g(null), T = g(null), L = le({ disabled: x, error: l, tone: d, open: t }), lt = !t && !!r, $ = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), f = C ? r == null ? void 0 : r.subtitle : void 0, A = () => {
+      const a = G.current;
+      return !!a && a.scrollWidth > a.clientWidth;
+    }, st = () => {
+      const a = T.current;
+      return !!a && a.scrollWidth > a.clientWidth;
+    }, [yt, ct] = B("subtitle"), dt = () => {
+      const a = A(), ut = st();
+      return !a && !ut ? !1 : (ct(a && ut ? "both" : a ? "value" : "subtitle"), !0);
+    };
+    if (v && !x)
+      return /* @__PURE__ */ m(
+        "div",
+        {
+          ref: b,
+          className: `
+                relative w-full ${Y} ${it}
+                border border-solid
+                transition-all duration-200
+                flex items-center
+            `,
+          style: L,
+          [zt]: "",
+          onClick: (a) => a.stopPropagation(),
+          children: [
+            (r == null ? void 0 : r.icon) && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center justify-center pr-2", children: r.icon }),
+            /* @__PURE__ */ e(xt, { text: $, shouldShow: A, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ m("div", { className: "relative flex-1 flex items-center", children: [
+              lt && /* @__PURE__ */ e(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "absolute inset-0 flex items-center pointer-events-none",
+                  children: /* @__PURE__ */ e(
+                    "span",
+                    {
+                      ref: G,
+                      className: `min-w-0 block truncate text-[length:inherit]
+                                        text-[var(--malachite-text-primary)]`,
+                      children: $
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  id: s,
+                  type: "text",
+                  "aria-label": F,
+                  "aria-labelledby": nt,
+                  "aria-invalid": l || void 0,
+                  "aria-required": c || void 0,
+                  "aria-describedby": W,
+                  value: t ? P : (r == null ? void 0 : r.label) ?? "",
+                  onChange: (a) => {
+                    a.stopPropagation(), _ == null || _(a.target.value), t || n();
+                  },
+                  onFocus: () => {
+                    k == null || k();
+                  },
+                  onKeyDown: U,
+                  placeholder: R ?? "Select Field",
+                  className: `flex-1 bg-transparent outline-none
+                            text-[length:inherit] font-normal
+                            placeholder:text-[var(--malachite-text-dimmed)] ${lt ? "text-transparent" : "text-[var(--malachite-text-primary)]"}`
+                }
+              )
+            ] }) }),
+            w && /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                "aria-label": S,
+                onClick: o,
+                className: `flex shrink-0 items-center justify-center pl-2 cursor-pointer
+                                bg-transparent border-none p-0 text-[var(--malachite-text-placeholder)]
+                                hover:text-[var(--malachite-text-primary)] transition-colors
+                                rounded-full focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2`,
+                children: /* @__PURE__ */ e(Ht, { size: 13 })
+              }
+            ),
+            /* @__PURE__ */ e("div", { className: "flex items-center justify-center pl-2", children: /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                "aria-label": t ? "Close options" : "Open options",
+                onClick: (a) => {
+                  a.stopPropagation(), n();
+                },
+                className: "flex items-center justify-center cursor-pointer bg-transparent border-none p-0",
+                children: /* @__PURE__ */ e(
+                  Wt,
+                  {
+                    size: 13,
+                    style: {
+                      color: t ? "var(--malachite-text-primary, rgb(10, 10, 10))" : "var(--malachite-text-placeholder, rgb(187, 187, 187))",
+                      transition: "transform 0.2s ease, color 0.2s ease",
+                      transform: t ? "rotate(180deg)" : "rotate(0deg)"
+                    }
+                  }
+                )
+              }
+            ) })
+          ]
+        }
+      );
+    const V = /* @__PURE__ */ m(
+      "button",
+      {
+        ref: b,
+        id: s,
+        type: "button",
+        "aria-label": F,
+        "aria-labelledby": ot,
+        "aria-invalid": l || void 0,
+        "aria-required": c || void 0,
+        "aria-describedby": [W, f ? Q : void 0].filter(Boolean).join(" ") || void 0,
+        onClick: (a) => {
+          a.stopPropagation(), n();
+        },
+        onKeyDown: U,
+        disabled: x,
+        style: L,
+        [zt]: "",
+        className: `
+                relative w-full ${Y} ${it}
+                border border-solid
+                transition-all duration-200
+                flex ${C ? "items-start" : "items-center"} gap-3
+                cursor-pointer
+                disabled:cursor-not-allowed
+            `,
+        children: [
+          /* @__PURE__ */ e(
+            "span",
+            {
+              id: f ? void 0 : K,
+              className: `text-left flex-1 min-w-0 flex ${f ? "flex-col gap-1" : "items-center gap-2"}`,
+              children: r ? /* @__PURE__ */ m(rt, { children: [
+                /* @__PURE__ */ m(we, { wrap: !!f, id: K, children: [
+                  r.icon && /* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: r.icon }),
+                  /* @__PURE__ */ e(
+                    xt,
+                    {
+                      text: $,
+                      shouldShow: f ? Gt : A,
+                      triggerAs: f ? "span" : "div",
+                      isShrinkable: !0,
+                      children: /* @__PURE__ */ e(
+                        "span",
+                        {
+                          ref: G,
+                          className: `min-w-0 block truncate text-[length:inherit] ${x ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-primary)]"}`,
+                          children: $
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                f && /* @__PURE__ */ e(
+                  "span",
+                  {
+                    id: Q,
+                    ref: T,
+                    className: "min-w-0 block truncate text-[length:var(--malachite-font-size-xsmall,11px)] text-[var(--malachite-text-secondary,rgb(123,123,123))] leading-normal",
+                    children: f
+                  }
+                )
+              ] }) : /* @__PURE__ */ e(
+                "span",
+                {
+                  className: `flex-1 min-w-0 truncate text-[length:inherit] ${x ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-dimmed)]"}`,
+                  children: R ?? "Select Field"
+                }
+              )
+            }
+          ),
+          w && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "shrink-0 w-4" }),
+          /* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(
+            Wt,
+            {
+              size: 13,
+              style: {
+                color: t ? "var(--malachite-text-primary, rgb(10, 10, 10))" : "var(--malachite-text-placeholder, rgb(187, 187, 187))",
+                transition: "transform 0.2s ease, color 0.2s ease",
+                transform: t ? "rotate(180deg)" : "rotate(0deg)"
+              }
+            }
+          ) })
+        ]
+      }
+    );
+    return y && !v ? /* @__PURE__ */ e(
+      xt,
+      {
+        text: ye(yt, $, f),
+        shouldShow: f ? dt : Gt,
+        fill: !0,
+        describesTrigger: !1,
+        children: V
+      }
+    ) : V;
+  }
+);
+Mt.displayName = "DropdownTrigger";
+const Te = ({
+  item: t,
+  selected: n,
+  subtitleLayout: r,
+  onItemSelected: x
+}) => {
+  const l = n ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", d = r === "stacked" && !!t.subtitle, R = `mal-${Xt().replace(/[^a-zA-Z0-9_-]/g, "")}`, v = `${R}-label`, y = `${R}-subtitle`, P = g(null), _ = () => {
+    const w = P.current;
+    return !!w && w.scrollWidth > w.clientWidth + 1;
+  }, k = t.rightSideTextVariant === "primary" ? "var(--malachite-text-right-side-text-primary, rgb(10, 10, 10))" : "var(--malachite-text-right-side-text-muted, rgb(123, 123, 123))", N = t.rightSideTextAlignment === "left" ? "flex-start" : "flex-end", h = (
+    // `role="option"` would be invalid — nothing here declares a `listbox`, and an
+    // orphaned option is dropped from the a11y tree. `aria-current`, not
+    // `aria-pressed`: these are one-of-many choices, not toggles. tabIndex={-1}
+    // because the portaled panel is outside the trigger's tab order; DropdownPanel
+    // focuses an option on open and arrow keys move between them.
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        "data-dropdown-option": "",
+        "data-selected": n,
+        "aria-current": n || void 0,
+        "aria-labelledby": t.subtitle ? v : void 0,
+        "aria-describedby": t.subtitle ? y : void 0,
+        tabIndex: -1,
+        onClick: (w) => {
+          w.stopPropagation(), x(t);
+        },
+        className: "malachite-dropdown-option",
+        style: {
+          minHeight: 38,
+          borderRadius: 8,
+          display: "flex",
+          alignItems: "center",
+          padding: 10,
+          gap: 12,
+          cursor: "pointer",
+          transition: "background-color 120ms ease",
+          // Reset the UA button chrome. Background is deliberately absent — see PANEL_RULES.
+          width: "100%",
+          border: "none",
+          textAlign: "left",
+          font: "inherit",
+          color: "inherit"
+        },
+        children: /* @__PURE__ */ m(
+          "span",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              gap: 12,
+              ...d ? { minWidth: 0 } : {}
+            },
+            children: [
+              /* @__PURE__ */ e("span", { style: { flex: 1, display: "block", ...d ? { minWidth: 0 } : {} }, children: /* @__PURE__ */ m(
+                "span",
+                {
+                  style: d ? { display: "flex", flexDirection: "column", gap: 2 } : { display: "flex", alignItems: "center", gap: 8 },
+                  children: [
+                    /* @__PURE__ */ m(Se, { row: d && !!t.icon, children: [
+                      t.icon && /* @__PURE__ */ e(
+                        "span",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            flexShrink: 0
+                          },
+                          children: t.icon
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "span",
+                        {
+                          id: t.subtitle ? v : void 0,
+                          style: {
+                            fontWeight: 400,
+                            color: l,
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            minWidth: 0
+                          },
+                          children: t.label
+                        }
+                      )
+                    ] }),
+                    t.subtitle && (d ? /* @__PURE__ */ e(
+                      "span",
+                      {
+                        id: y,
+                        ref: P,
+                        style: {
+                          fontSize: Tt,
+                          fontWeight: 400,
+                          lineHeight: 1.4,
+                          color: n ? l : "var(--malachite-text-dimmed, rgb(161, 161, 161))",
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis"
+                        },
+                        children: t.subtitle
+                      }
+                    ) : /* @__PURE__ */ m(rt, { children: [
+                      /* @__PURE__ */ e(
+                        "span",
+                        {
+                          style: {
+                            fontSize: Tt,
+                            fontWeight: 400,
+                            color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
+                            flexShrink: 0
+                          },
+                          children: "|"
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "span",
+                        {
+                          id: y,
+                          style: {
+                            fontSize: Tt,
+                            fontWeight: 400,
+                            color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            minWidth: 0
+                          },
+                          children: t.subtitle
+                        }
+                      )
+                    ] }))
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  style: {
+                    // Reserved only when there is something to put there: an empty slot
+                    // still holding its width truncates the label and subtitle early.
+                    minWidth: t.rightSideText ? "var(--malachite-text-right-side-text-min-width, 80px)" : 0,
+                    flexShrink: 1,
+                    display: "flex",
+                    justifyContent: N
+                  },
+                  children: t.rightSideText && /* @__PURE__ */ e(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "var(--malachite-text-right-side-text-font-size, 12px)",
+                        fontWeight: 400,
+                        color: k,
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        minWidth: 0
+                      },
+                      children: t.rightSideText
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  );
+  return d ? /* @__PURE__ */ e(
+    xt,
+    {
+      text: t.subtitle,
+      shouldShow: _,
+      isShrinkable: !0,
+      describesTrigger: !1,
+      children: h
+    }
+  ) : h;
+}, Zt = jt.forwardRef((t, n) => {
+  const {
+    items: r,
+    onItemSelected: x,
+    selectedItem: l,
+    menuLoading: d,
+    emptyMessage: R,
+    autoFocus: v,
+    positioned: y,
+    onDismiss: P,
+    subtitleLayout: _,
+    size: k,
+    style: N
+  } = t, h = g(null);
+  Bt(() => {
+    ce();
+  }, []), ue(h, !0), Et(() => {
+    var s;
+    if (!v || !y)
+      return;
+    const o = Ct(h.current);
+    (s = o.find((u) => u.dataset.selected === "true") ?? o[0] ?? h.current) == null || s.focus();
+  }, [v, y]);
+  const w = (o) => {
+    var W;
+    if (o.key === "Tab") {
+      P();
+      return;
+    }
+    const S = Ct(h.current);
+    if (S.length === 0)
+      return;
+    const s = S.indexOf(document.activeElement), u = {
+      ArrowDown: s + 1,
+      ArrowUp: s - 1,
+      Home: 0,
+      End: S.length - 1
+    }[o.key];
+    u !== void 0 && (o.preventDefault(), (W = S[Math.min(Math.max(u, 0), S.length - 1)]) == null || W.focus());
+  };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: (o) => {
+        h.current = o, typeof n == "function" ? n(o) : n && (n.current = o);
+      },
+      ...de("dropdown"),
+      tabIndex: -1,
+      onKeyDown: w,
+      style: {
+        background: "var(--malachite-card-background, rgb(255, 255, 255))",
+        border: "1px solid var(--malachite-card-border, rgb(232, 232, 232))",
+        borderRadius: 12,
+        boxShadow: "0px 2px 5px 0px rgba(0, 0, 0, 0.1)",
+        maxHeight: 400,
+        overflow: "hidden",
+        fontSize: re[k],
+        ...N
+      },
+      children: d ? /* @__PURE__ */ m("div", { style: Ft, children: [
+        /* @__PURE__ */ e(ee, { size: "xxxsmall" }),
+        /* @__PURE__ */ e("span", { children: "Loading…" })
+      ] }) : r.length === 0 ? /* @__PURE__ */ e("div", { style: Ft, children: R }) : /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 4,
+            padding: 4,
+            maxHeight: 400,
+            overflowY: "auto",
+            scrollbarWidth: "thin",
+            scrollbarColor: "var(--malachite-text-placeholder, rgb(187, 187, 187)) transparent"
+          },
+          children: r.map((o, S) => {
+            const s = r[S - 1], u = !!o.group && (!s || s.group !== o.group);
+            return /* @__PURE__ */ m("div", { style: { flexShrink: 0 }, children: [
+              u && /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    padding: "6px 10px 4px",
+                    fontSize: 12,
+                    fontWeight: 500,
+                    color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
+                    textTransform: "none",
+                    userSelect: "none"
+                  },
+                  children: o.group
+                }
+              ),
+              /* @__PURE__ */ e(
+                Te,
+                {
+                  item: o,
+                  onItemSelected: x,
+                  subtitleLayout: _,
+                  selected: o.id === (l == null ? void 0 : l.id) || !1
+                }
+              )
+            ] }, o.id);
+          })
+        }
+      )
+    }
+  );
+});
+Zt.displayName = "DropdownPanel";
+const He = ({
+  items: t,
+  onItemSelected: n,
+  defaultValue: r,
+  value: x,
+  disabled: l = !1,
+  error: d,
+  tone: R,
+  label: v,
+  hint: y,
+  rightSideContent: P,
+  tooltip: _,
+  name: k,
+  required: N = !1,
+  requiredIndicator: h,
+  loading: w,
+  menuLoading: o,
+  formControl: S,
+  description: s,
+  helperText: u,
+  placeholder: W,
+  search: c = !1,
+  showSubtitleInTrigger: F = !1,
+  subtitleLayout: nt = "inline",
+  clearable: bt = !1,
+  size: b = "large",
+  fullWidth: C = !1,
+  id: Y,
+  "aria-label": it,
+  "aria-labelledby": K
+}) => {
+  const { controlId: Q, labelId: at, descriptionId: ot, hintId: U, helperTextId: G } = Ut({
+    id: Y,
+    label: v,
+    description: s,
+    hint: y,
+    helperText: !0
+  }), [T, L] = B(!1), [lt, $] = B(r), f = x ?? lt, A = t.find((i) => i.id === f), st = bt && f !== void 0 && f !== "" && !l, yt = F && !c && !!(A != null && A.subtitle), ct = `Clear ${v ?? W ?? "selection"}`, dt = g(r);
+  Et(() => {
+    dt.current !== r && (dt.current = r, $(r));
+  }, [r]);
+  const [V, a] = B(""), [ut, Lt] = B(!1), Nt = g(null), pt = g(null), j = g(null), [E, Rt] = B(null), ht = g(!0), q = St(() => {
+    var p;
+    const i = pt.current;
+    i && ((p = i instanceof HTMLButtonElement ? i : i.querySelector("input")) == null || p.focus());
+  }, []), _t = St(
+    (i) => {
+      var p;
+      i.stopPropagation(), $(void 0), (p = H.current) == null || p.call(H, wt.current), n == null || n(void 0), c && (ht.current = !1), q();
+    },
+    [n, c, q]
+  ), kt = g(b), $t = g(C), O = St(() => {
+    var p, D;
+    const i = pt.current;
+    i && Rt(
+      ne({
+        triggerRect: i.getBoundingClientRect(),
+        panelWidth: ((p = j.current) == null ? void 0 : p.offsetWidth) ?? 0,
+        panelHeight: ((D = j.current) == null ? void 0 : D.offsetHeight) ?? 0,
+        size: kt.current,
+        fullWidth: $t.current,
+        viewportWidth: window.innerWidth,
+        viewportHeight: window.innerHeight
+      })
+    );
+  }, []);
+  Pt(() => {
+    kt.current = b, $t.current = C, T && O();
+  }, [b, C, T, O]), Et(() => {
+    if (!T) {
+      Rt(null), Lt(!1);
+      return;
+    }
+    O();
+    const i = (Z) => {
+      var et;
+      const z = Z.composedPath(), I = Nt.current, tt = j.current, mt = !!I && z.includes(I), At = !!tt && z.includes(tt);
+      !mt && !At && (L(!1), c && a(""), (et = M.current) == null || et.call(M));
+    }, p = se(() => {
+      L(!1), c && a(""), q();
+    }), D = () => O();
+    let J = 0, ft = "";
+    const gt = () => {
+      const Z = pt.current;
+      if (Z) {
+        const z = Z.getBoundingClientRect();
+        if (ae(z, window.innerWidth, window.innerHeight)) {
+          L(!1), c && a("");
+          return;
+        }
+        const I = oe(z);
+        I !== ft && (ft = I, O());
+      }
+      J = requestAnimationFrame(gt);
+    };
+    return J = requestAnimationFrame(gt), document.addEventListener("mousedown", i), window.addEventListener("scroll", D, !0), window.addEventListener("resize", D), () => {
+      cancelAnimationFrame(J), document.removeEventListener("mousedown", i), p(), window.removeEventListener("scroll", D, !0), window.removeEventListener("resize", D);
+    };
+  }, [T, c, O, q]), Pt(() => {
+    T && j.current && O();
+  }, [T, O]);
+  const H = g(void 0), M = g(void 0), wt = g(""), It = (i) => {
+    var p;
+    $(i == null ? void 0 : i.id), (p = H.current) == null || p.call(H, (i == null ? void 0 : i.id) ?? wt.current), L(!1), c && (a(""), ht.current = !1), n == null || n(i == null ? void 0 : i.id), q();
+  }, Kt = () => {
+    L(!1), c && a(""), q();
+  }, Vt = () => {
+    const i = Ct(j.current)[0];
+    if (i) {
+      i.focus();
+      return;
+    }
+    Lt(!0), L(!0);
+  }, qt = c && V ? t.filter((i) => he(i, V)) : t;
+  return /* @__PURE__ */ e(
+    Qt,
+    {
+      fullWidth: C,
+      label: v,
+      hint: y,
+      rightSideContent: P,
+      tooltip: _,
+      name: k,
+      required: N,
+      requiredIndicator: h,
+      loading: w,
+      formControl: S,
+      description: s,
+      controlId: Q,
+      labelId: at,
+      descriptionId: ot,
+      hintId: U,
+      loadingComponent: /* @__PURE__ */ e(
+        te,
+        {
+          heightClass: vt[b],
+          helperText: !!u,
+          helperTextMarginTop: !0
+        }
+      ),
+      children: ({ error: i, message: p, onFieldChange: D, onFieldBlur: J, emptyValue: ft }) => {
+        H.current = D, M.current = J, wt.current = ft;
+        const gt = d ?? i, Z = d === !1 ? void 0 : p, z = `${G}-error`, I = [
+          ot,
+          U,
+          u ? G : void 0,
+          Z ? z : void 0
+        ].filter(Boolean).join(" ") || void 0;
+        return /* @__PURE__ */ m(rt, { children: [
+          /* @__PURE__ */ m(
+            "div",
+            {
+              ref: Nt,
+              className: "relative w-full",
+              onBlur: (tt) => {
+                var et, Dt;
+                const mt = tt.relatedTarget;
+                tt.currentTarget.contains(mt) || ((et = j.current) == null ? void 0 : et.contains(mt)) === !0 || (Dt = M.current) == null || Dt.call(M);
+              },
+              children: [
+                st && !c && /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: _t,
+                    "aria-label": ct,
+                    className: `absolute ${yt ? xe[b] : "top-1/2 -translate-y-1/2"} z-10 flex items-center
+                            justify-center rounded-full text-[var(--malachite-text-placeholder)]
+                            hover:text-[var(--malachite-text-primary)] transition-colors
+                            focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2 ${me[b]}`,
+                    children: /* @__PURE__ */ e(Ht, { size: 13 })
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  Mt,
+                  {
+                    hasClear: st,
+                    onClear: _t,
+                    clearLabel: ct,
+                    ref: pt,
+                    isOpen: T,
+                    onClick: () => !l && L(!T),
+                    selectedItem: A,
+                    disabled: l,
+                    error: gt,
+                    tone: R,
+                    placeholder: W,
+                    search: c,
+                    showSubtitleInTrigger: F,
+                    searchQuery: V,
+                    onSearchChange: a,
+                    onFocusOpen: () => {
+                      if (!ht.current) {
+                        ht.current = !0;
+                        return;
+                      }
+                      L(!0);
+                    },
+                    onArrowDown: () => {
+                      l || Vt();
+                    },
+                    size: b,
+                    controlId: Q,
+                    hasCallerId: !!Y,
+                    labelId: at,
+                    describedBy: I,
+                    required: N,
+                    ariaLabel: it,
+                    ariaLabelledBy: K
+                  }
+                ),
+                T && Yt(
+                  /* @__PURE__ */ e(
+                    Zt,
+                    {
+                      ref: j,
+                      style: {
+                        position: "fixed",
+                        top: (E == null ? void 0 : E.top) ?? 0,
+                        left: (E == null ? void 0 : E.left) ?? 0,
+                        width: Ot(b, C) ? "auto" : E == null ? void 0 : E.width,
+                        maxWidth: Ot(b, C) ? `calc(100vw - ${ie * 2}px)` : void 0,
+                        visibility: E ? "visible" : "hidden",
+                        opacity: E ? 1 : 0
+                      },
+                      items: qt,
+                      onItemSelected: It,
+                      selectedItem: A,
+                      menuLoading: o,
+                      emptyMessage: t.length === 0 ? "No options available" : "No results found",
+                      subtitleLayout: nt,
+                      size: b,
+                      autoFocus: !c || ut,
+                      positioned: E !== null,
+                      onDismiss: Kt
+                    }
+                  ),
+                  document.body
+                )
+              ]
+            }
+          ),
+          u && /* @__PURE__ */ e(
+            "div",
+            {
+              id: G,
+              className: "mt-1 text-[length:var(--malachite-font-size-small,13px)] text-left pl-2 text-[var(--malachite-text-dimmed,rgb(161,161,161))]",
+              children: u
+            }
+          ),
+          /* @__PURE__ */ e(Jt, { id: z, message: Z, spaced: !0 })
+        ] });
+      }
+    }
+  );
+};
+export {
+  He as Dropdown
+};
+//# sourceMappingURL=Dropdown.js.map