@stackone/malachite 2.20.1 → 2.22.0

package/dist/components/Dropdown.js

@@ -0,0 +1,847 @@
+import { jsx as e, jsxs as g, Fragment as it } from "react/jsx-runtime";
+import Gt, { useState as X, useRef as f, useEffect as Et, useCallback as St, useLayoutEffect as Dt, useInsertionEffect as qt, useId as Bt } from "react";
+import { createPortal as Xt } from "react-dom";
+import Yt, { useFormFieldIds as Qt } from "./BaseFormComponent.js";
+import Pt from "./CustomIcons/CaretDownIcon.js";
+import jt from "./CustomIcons/CloseIcon.js";
+import { FieldMessage as Ut } from "./FieldMessage.js";
+import Jt from "./LoadingInput.js";
+import te from "./Spinner.js";
+import vt from "./Tooltip.js";
+import { CONTROL_TEXT_SIZE_CLASS as Y, CONTROL_TEXT_SIZE as ee } from "./controlTextSize.js";
+import { computePanelGeometry as re, isContentSizedPanel as Wt, PANEL_VIEWPORT_PADDING_PX as ne, isTriggerOffscreen as ie, rectSignature as ae } from "./dropdownPanelPosition.js";
+import { getTriggerVisual as oe, DROPDOWN_TRIGGER_ATTR as Ot } from "./dropdownTriggerStyle.js";
+import { pushEscapeLayer as le } from "./escapeLayers.js";
+import { ensureDropdownPanelStyles as se } from "./optionRowStyles.js";
+import { overlayIdentity as ce } from "./portalOverlay.js";
+import { useTopLayer as de } from "./topLayer.js";
+const zt = {
+  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)", ue = "[data-dropdown-option]", Ct = (t) => Array.from((t == null ? void 0 : t.querySelectorAll(ue)) ?? []), pe = (t, n) => {
+  const r = n.toLowerCase(), m = t.label.toLowerCase().includes(r), c = t.subtitle ? t.subtitle.toLowerCase().includes(r) : !1, u = t.rightSideText ? t.rightSideText.toLowerCase().includes(r) : !1;
+  return m || c || u;
+}, bt = {
+  small: "h-[var(--malachite-control-height-small,28px)]",
+  medium: "h-[var(--malachite-control-height-medium,32px)]",
+  large: "h-[var(--malachite-control-height-large,42px)]"
+}, he = {
+  small: `${bt.small} px-2.5 py-1.5 ${Y.small}`,
+  medium: `${bt.medium} px-3 py-1.5 ${Y.medium}`,
+  large: `${bt.large} px-4 py-2.5 ${Y.large}`
+}, fe = {
+  small: `min-h-[var(--malachite-control-height-small,28px)] px-2.5 py-1.5 ${Y.small}`,
+  medium: `min-h-[var(--malachite-control-height-medium,32px)] px-3 py-1.5 ${Y.medium}`,
+  large: `min-h-[var(--malachite-control-height-large,42px)] px-4 py-2.5 ${Y.large}`
+}, ge = {
+  small: "right-[26px] size-4",
+  medium: "right-[30px] size-4",
+  large: "right-[38px] size-4"
+}, me = {
+  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"
+}, xe = {
+  small: "rounded-[var(--malachite-radius-10,10px)]",
+  medium: "rounded-xl",
+  large: "rounded-[var(--malachite-radius-xxl,14px)]"
+}, Ft = () => !1, ve = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 4
+}, be = (t, n, r) => t === "value" ? n : t === "subtitle" ? r : /* @__PURE__ */ g("span", { style: ve, children: [
+  /* @__PURE__ */ e("span", { children: n }),
+  /* @__PURE__ */ e("span", { children: r })
+] }), ye = ({
+  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(it, { children: r }), we = ({ row: t, children: n }) => t ? /* @__PURE__ */ e("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: n }) : /* @__PURE__ */ e(it, { children: n }), Ht = Gt.forwardRef(
+  ({
+    isOpen: t,
+    onClick: n,
+    selectedItem: r,
+    disabled: m = !1,
+    error: c = !1,
+    tone: u,
+    placeholder: N,
+    search: x = !1,
+    showSubtitleInTrigger: w = !1,
+    searchQuery: P = "",
+    onSearchChange: R,
+    onFocusOpen: L,
+    onArrowDown: _,
+    size: h = "large",
+    hasClear: S = !1,
+    onClear: o,
+    clearLabel: v,
+    controlId: s,
+    labelId: b,
+    describedBy: l,
+    required: Q = !1,
+    ariaLabel: I,
+    ariaLabelledBy: at,
+    hasCallerId: T = !1
+  }, k) => {
+    const z = w && !x && !!(r != null && r.subtitle), ot = z ? fe[h] : he[h], lt = xe[h], F = `${s}-value`, U = `${s}-subtitle`, st = !b && !I && !T && z, ct = at ?? (b && !I ? `${b} ${F}` : void 0) ?? (st ? F : void 0), K = (a) => {
+      a.key === "ArrowDown" && (a.preventDefault(), _ == null || _());
+    }, y = f(null), C = f(null), dt = oe({ disabled: m, error: c, tone: u, open: t }), V = !t && !!r, $ = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), d = z ? r == null ? void 0 : r.subtitle : void 0, q = () => {
+      const a = y.current;
+      return !!a && a.scrollWidth > a.clientWidth;
+    }, yt = () => {
+      const a = C.current;
+      return !!a && a.scrollWidth > a.clientWidth;
+    }, [ut, pt] = X("subtitle"), J = () => {
+      const a = q(), tt = yt();
+      return !a && !tt ? !1 : (pt(a && tt ? "both" : a ? "value" : "subtitle"), !0);
+    };
+    if (x && !m)
+      return /* @__PURE__ */ g(
+        "div",
+        {
+          ref: k,
+          className: `
+                relative w-full ${ot} ${lt}
+                border border-solid
+                transition-all duration-200
+                flex items-center
+            `,
+          style: dt,
+          [Ot]: "",
+          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(vt, { text: $, shouldShow: q, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ g("div", { className: "relative flex-1 flex items-center", children: [
+              V && /* @__PURE__ */ e(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "absolute inset-0 flex items-center pointer-events-none",
+                  children: /* @__PURE__ */ e(
+                    "span",
+                    {
+                      ref: y,
+                      className: `min-w-0 block truncate text-[length:inherit]
+                                        text-[var(--malachite-text-primary)]`,
+                      children: $
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  id: s,
+                  type: "text",
+                  "aria-label": I,
+                  "aria-labelledby": at,
+                  "aria-invalid": c || void 0,
+                  "aria-required": Q || void 0,
+                  "aria-describedby": l,
+                  value: t ? P : (r == null ? void 0 : r.label) ?? "",
+                  onChange: (a) => {
+                    a.stopPropagation(), R == null || R(a.target.value), t || n();
+                  },
+                  onFocus: () => {
+                    L == null || L();
+                  },
+                  onKeyDown: K,
+                  placeholder: N ?? "Select Field",
+                  className: `flex-1 bg-transparent outline-none
+                            text-[length:inherit] font-normal
+                            placeholder:text-[var(--malachite-text-dimmed)] ${V ? "text-transparent" : "text-[var(--malachite-text-primary)]"}`
+                }
+              )
+            ] }) }),
+            S && /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                "aria-label": v,
+                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(jt, { 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(
+                  Pt,
+                  {
+                    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 A = /* @__PURE__ */ g(
+      "button",
+      {
+        ref: k,
+        id: s,
+        type: "button",
+        "aria-label": I,
+        "aria-labelledby": ct,
+        "aria-invalid": c || void 0,
+        "aria-required": Q || void 0,
+        "aria-describedby": [l, d ? U : void 0].filter(Boolean).join(" ") || void 0,
+        onClick: (a) => {
+          a.stopPropagation(), n();
+        },
+        onKeyDown: K,
+        disabled: m,
+        style: dt,
+        [Ot]: "",
+        className: `
+                relative w-full ${ot} ${lt}
+                border border-solid
+                transition-all duration-200
+                flex ${z ? "items-start" : "items-center"} gap-3
+                cursor-pointer
+                disabled:cursor-not-allowed
+            `,
+        children: [
+          /* @__PURE__ */ e(
+            "span",
+            {
+              id: d ? void 0 : F,
+              className: `text-left flex-1 min-w-0 flex ${d ? "flex-col gap-1" : "items-center gap-2"}`,
+              children: r ? /* @__PURE__ */ g(it, { children: [
+                /* @__PURE__ */ g(ye, { wrap: !!d, id: F, children: [
+                  r.icon && /* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: r.icon }),
+                  /* @__PURE__ */ e(
+                    vt,
+                    {
+                      text: $,
+                      shouldShow: d ? Ft : q,
+                      triggerAs: d ? "span" : "div",
+                      isShrinkable: !0,
+                      children: /* @__PURE__ */ e(
+                        "span",
+                        {
+                          ref: y,
+                          className: `min-w-0 block truncate text-[length:inherit] ${m ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-primary)]"}`,
+                          children: $
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                d && /* @__PURE__ */ e(
+                  "span",
+                  {
+                    id: U,
+                    ref: C,
+                    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: d
+                  }
+                )
+              ] }) : /* @__PURE__ */ e(
+                "span",
+                {
+                  className: `flex-1 min-w-0 truncate text-[length:inherit] ${m ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-dimmed)]"}`,
+                  children: N ?? "Select Field"
+                }
+              )
+            }
+          ),
+          S && /* @__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(
+            Pt,
+            {
+              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 w && !x ? /* @__PURE__ */ e(
+      vt,
+      {
+        text: be(ut, $, d),
+        shouldShow: d ? J : Ft,
+        fill: !0,
+        describesTrigger: !1,
+        children: A
+      }
+    ) : A;
+  }
+);
+Ht.displayName = "DropdownTrigger";
+const Se = ({
+  item: t,
+  selected: n,
+  subtitleLayout: r,
+  onItemSelected: m
+}) => {
+  const c = n ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", u = r === "stacked" && !!t.subtitle, N = `mal-${Bt().replace(/[^a-zA-Z0-9_-]/g, "")}`, x = `${N}-label`, w = `${N}-subtitle`, P = f(null), R = () => {
+    const S = P.current;
+    return !!S && S.scrollWidth > S.clientWidth + 1;
+  }, L = 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))", _ = 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 ? x : void 0,
+        "aria-describedby": t.subtitle ? w : void 0,
+        tabIndex: -1,
+        onClick: (S) => {
+          S.stopPropagation(), m(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__ */ g(
+          "span",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              gap: 12,
+              ...u ? { minWidth: 0 } : {}
+            },
+            children: [
+              /* @__PURE__ */ e("span", { style: { flex: 1, display: "block", ...u ? { minWidth: 0 } : {} }, children: /* @__PURE__ */ g(
+                "span",
+                {
+                  style: u ? { display: "flex", flexDirection: "column", gap: 2 } : { display: "flex", alignItems: "center", gap: 8 },
+                  children: [
+                    /* @__PURE__ */ g(we, { row: u && !!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 ? x : void 0,
+                          style: {
+                            fontWeight: 400,
+                            color: c,
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            minWidth: 0
+                          },
+                          children: t.label
+                        }
+                      )
+                    ] }),
+                    t.subtitle && (u ? /* @__PURE__ */ e(
+                      "span",
+                      {
+                        id: w,
+                        ref: P,
+                        style: {
+                          fontSize: Tt,
+                          fontWeight: 400,
+                          lineHeight: 1.4,
+                          color: n ? c : "var(--malachite-text-dimmed, rgb(161, 161, 161))",
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis"
+                        },
+                        children: t.subtitle
+                      }
+                    ) : /* @__PURE__ */ g(it, { 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: w,
+                          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: _
+                  },
+                  children: t.rightSideText && /* @__PURE__ */ e(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "var(--malachite-text-right-side-text-font-size, 12px)",
+                        fontWeight: 400,
+                        color: L,
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        minWidth: 0
+                      },
+                      children: t.rightSideText
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  );
+  return u ? /* @__PURE__ */ e(
+    vt,
+    {
+      text: t.subtitle,
+      shouldShow: R,
+      isShrinkable: !0,
+      describesTrigger: !1,
+      children: h
+    }
+  ) : h;
+}, Mt = Gt.forwardRef((t, n) => {
+  const {
+    items: r,
+    onItemSelected: m,
+    selectedItem: c,
+    menuLoading: u,
+    emptyMessage: N,
+    autoFocus: x,
+    positioned: w,
+    onDismiss: P,
+    subtitleLayout: R,
+    size: L,
+    style: _
+  } = t, h = f(null);
+  qt(() => {
+    se();
+  }, []), de(h, !0), Et(() => {
+    var s;
+    if (!x || !w)
+      return;
+    const o = Ct(h.current);
+    (s = o.find((b) => b.dataset.selected === "true") ?? o[0] ?? h.current) == null || s.focus();
+  }, [x, w]);
+  const S = (o) => {
+    var l;
+    if (o.key === "Tab") {
+      P();
+      return;
+    }
+    const v = Ct(h.current);
+    if (v.length === 0)
+      return;
+    const s = v.indexOf(document.activeElement), b = {
+      ArrowDown: s + 1,
+      ArrowUp: s - 1,
+      Home: 0,
+      End: v.length - 1
+    }[o.key];
+    b !== void 0 && (o.preventDefault(), (l = v[Math.min(Math.max(b, 0), v.length - 1)]) == null || l.focus());
+  };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: (o) => {
+        h.current = o, typeof n == "function" ? n(o) : n && (n.current = o);
+      },
+      ...ce("dropdown"),
+      tabIndex: -1,
+      onKeyDown: S,
+      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: ee[L],
+        ..._
+      },
+      children: u ? /* @__PURE__ */ g("div", { style: zt, children: [
+        /* @__PURE__ */ e(te, { size: "xxxsmall" }),
+        /* @__PURE__ */ e("span", { children: "Loading…" })
+      ] }) : r.length === 0 ? /* @__PURE__ */ e("div", { style: zt, children: N }) : /* @__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, v) => {
+            const s = r[v - 1], b = !!o.group && (!s || s.group !== o.group);
+            return /* @__PURE__ */ g("div", { style: { flexShrink: 0 }, children: [
+              b && /* @__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(
+                Se,
+                {
+                  item: o,
+                  onItemSelected: m,
+                  subtitleLayout: R,
+                  selected: o.id === (c == null ? void 0 : c.id) || !1
+                }
+              )
+            ] }, o.id);
+          })
+        }
+      )
+    }
+  );
+});
+Mt.displayName = "DropdownPanel";
+const je = ({
+  items: t,
+  onItemSelected: n,
+  defaultValue: r,
+  value: m,
+  disabled: c = !1,
+  error: u,
+  tone: N,
+  label: x,
+  hint: w,
+  tooltip: P,
+  name: R,
+  required: L = !1,
+  requiredIndicator: _,
+  loading: h,
+  menuLoading: S,
+  formControl: o,
+  description: v,
+  helperText: s,
+  placeholder: b,
+  search: l = !1,
+  showSubtitleInTrigger: Q = !1,
+  subtitleLayout: I = "inline",
+  clearable: at = !1,
+  size: T = "large",
+  fullWidth: k = !1,
+  id: z,
+  "aria-label": ot,
+  "aria-labelledby": lt
+}) => {
+  const { controlId: F, labelId: U, descriptionId: st, hintId: ct, helperTextId: K } = Qt({
+    id: z,
+    label: x,
+    description: v,
+    hint: w,
+    helperText: !0
+  }), [y, C] = X(!1), [dt, V] = X(r), $ = m ?? dt, d = t.find((i) => i.id === $), q = at && $ !== void 0 && $ !== "" && !c, yt = Q && !l && !!(d != null && d.subtitle), ut = `Clear ${x ?? b ?? "selection"}`, pt = f(r);
+  Et(() => {
+    pt.current !== r && (pt.current = r, V(r));
+  }, [r]);
+  const [J, A] = X(""), [a, tt] = X(!1), Lt = f(null), ht = f(null), G = f(null), [E, Nt] = X(null), ft = f(!0), B = St(() => {
+    var p;
+    const i = ht.current;
+    i && ((p = i instanceof HTMLButtonElement ? i : i.querySelector("input")) == null || p.focus());
+  }, []), Rt = St(
+    (i) => {
+      var p;
+      i.stopPropagation(), V(void 0), (p = j.current) == null || p.call(j, wt.current), n == null || n(void 0), l && (ft.current = !1), B();
+    },
+    [n, l, B]
+  ), _t = f(T), kt = f(k), W = St(() => {
+    var p, D;
+    const i = ht.current;
+    i && Nt(
+      re({
+        triggerRect: i.getBoundingClientRect(),
+        panelWidth: ((p = G.current) == null ? void 0 : p.offsetWidth) ?? 0,
+        panelHeight: ((D = G.current) == null ? void 0 : D.offsetHeight) ?? 0,
+        size: _t.current,
+        fullWidth: kt.current,
+        viewportWidth: window.innerWidth,
+        viewportHeight: window.innerHeight
+      })
+    );
+  }, []);
+  Dt(() => {
+    _t.current = T, kt.current = k, y && W();
+  }, [T, k, y, W]), Et(() => {
+    if (!y) {
+      Nt(null), tt(!1);
+      return;
+    }
+    W();
+    const i = (M) => {
+      var nt;
+      const O = M.composedPath(), Z = Lt.current, rt = G.current, xt = !!Z && O.includes(Z), $t = !!rt && O.includes(rt);
+      !xt && !$t && (C(!1), l && A(""), (nt = H.current) == null || nt.call(H));
+    }, p = le(() => {
+      C(!1), l && A(""), B();
+    }), D = () => W();
+    let et = 0, gt = "";
+    const mt = () => {
+      const M = ht.current;
+      if (M) {
+        const O = M.getBoundingClientRect();
+        if (ie(O, window.innerWidth, window.innerHeight)) {
+          C(!1), l && A("");
+          return;
+        }
+        const Z = ae(O);
+        Z !== gt && (gt = Z, W());
+      }
+      et = requestAnimationFrame(mt);
+    };
+    return et = requestAnimationFrame(mt), document.addEventListener("mousedown", i), window.addEventListener("scroll", D, !0), window.addEventListener("resize", D), () => {
+      cancelAnimationFrame(et), document.removeEventListener("mousedown", i), p(), window.removeEventListener("scroll", D, !0), window.removeEventListener("resize", D);
+    };
+  }, [y, l, W, B]), Dt(() => {
+    y && G.current && W();
+  }, [y, W]);
+  const j = f(void 0), H = f(void 0), wt = f(""), Zt = (i) => {
+    var p;
+    V(i == null ? void 0 : i.id), (p = j.current) == null || p.call(j, (i == null ? void 0 : i.id) ?? wt.current), C(!1), l && (A(""), ft.current = !1), n == null || n(i == null ? void 0 : i.id), B();
+  }, It = () => {
+    C(!1), l && A(""), B();
+  }, Kt = () => {
+    const i = Ct(G.current)[0];
+    if (i) {
+      i.focus();
+      return;
+    }
+    tt(!0), C(!0);
+  }, Vt = l && J ? t.filter((i) => pe(i, J)) : t;
+  return /* @__PURE__ */ e(
+    Yt,
+    {
+      fullWidth: k,
+      label: x,
+      hint: w,
+      tooltip: P,
+      name: R,
+      required: L,
+      requiredIndicator: _,
+      loading: h,
+      formControl: o,
+      description: v,
+      controlId: F,
+      labelId: U,
+      descriptionId: st,
+      hintId: ct,
+      loadingComponent: /* @__PURE__ */ e(
+        Jt,
+        {
+          heightClass: bt[T],
+          helperText: !!s,
+          helperTextMarginTop: !0
+        }
+      ),
+      children: ({ error: i, message: p, onFieldChange: D, onFieldBlur: et, emptyValue: gt }) => {
+        j.current = D, H.current = et, wt.current = gt;
+        const mt = u ?? i, M = u === !1 ? void 0 : p, O = `${K}-error`, Z = [
+          st,
+          ct,
+          s ? K : void 0,
+          M ? O : void 0
+        ].filter(Boolean).join(" ") || void 0;
+        return /* @__PURE__ */ g(it, { children: [
+          /* @__PURE__ */ g(
+            "div",
+            {
+              ref: Lt,
+              className: "relative w-full",
+              onBlur: (rt) => {
+                var nt, At;
+                const xt = rt.relatedTarget;
+                rt.currentTarget.contains(xt) || ((nt = G.current) == null ? void 0 : nt.contains(xt)) === !0 || (At = H.current) == null || At.call(H);
+              },
+              children: [
+                q && !l && /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: Rt,
+                    "aria-label": ut,
+                    className: `absolute ${yt ? me[T] : "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 ${ge[T]}`,
+                    children: /* @__PURE__ */ e(jt, { size: 13 })
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  Ht,
+                  {
+                    hasClear: q,
+                    onClear: Rt,
+                    clearLabel: ut,
+                    ref: ht,
+                    isOpen: y,
+                    onClick: () => !c && C(!y),
+                    selectedItem: d,
+                    disabled: c,
+                    error: mt,
+                    tone: N,
+                    placeholder: b,
+                    search: l,
+                    showSubtitleInTrigger: Q,
+                    searchQuery: J,
+                    onSearchChange: A,
+                    onFocusOpen: () => {
+                      if (!ft.current) {
+                        ft.current = !0;
+                        return;
+                      }
+                      C(!0);
+                    },
+                    onArrowDown: () => {
+                      c || Kt();
+                    },
+                    size: T,
+                    controlId: F,
+                    hasCallerId: !!z,
+                    labelId: U,
+                    describedBy: Z,
+                    required: L,
+                    ariaLabel: ot,
+                    ariaLabelledBy: lt
+                  }
+                ),
+                y && Xt(
+                  /* @__PURE__ */ e(
+                    Mt,
+                    {
+                      ref: G,
+                      style: {
+                        position: "fixed",
+                        top: (E == null ? void 0 : E.top) ?? 0,
+                        left: (E == null ? void 0 : E.left) ?? 0,
+                        width: Wt(T, k) ? "auto" : E == null ? void 0 : E.width,
+                        maxWidth: Wt(T, k) ? `calc(100vw - ${ne * 2}px)` : void 0,
+                        visibility: E ? "visible" : "hidden",
+                        opacity: E ? 1 : 0
+                      },
+                      items: Vt,
+                      onItemSelected: Zt,
+                      selectedItem: d,
+                      menuLoading: S,
+                      emptyMessage: t.length === 0 ? "No options available" : "No results found",
+                      subtitleLayout: I,
+                      size: T,
+                      autoFocus: !l || a,
+                      positioned: E !== null,
+                      onDismiss: It
+                    }
+                  ),
+                  document.body
+                )
+              ]
+            }
+          ),
+          s && /* @__PURE__ */ e(
+            "div",
+            {
+              id: K,
+              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: s
+            }
+          ),
+          /* @__PURE__ */ e(Ut, { id: O, message: M, spaced: !0 })
+        ] });
+      }
+    }
+  );
+};
+export {
+  je as Dropdown
+};
+//# sourceMappingURL=Dropdown.js.map