@stackone/malachite 2.66.0 → 2.67.0

package/COMPONENTS.md

@@ -25,7 +25,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`Divider`** — Separator; supports a dashed line style. Horizontal by default and spanning its container; `orientation="vertical"` draws a rule between inline controls (e.g. groups in a toolbar) and holds its width in a tight flex row. `length` sizes it along its own axis on a fixed scale, and it never shrinks below 1px. _Key props:_ `orientation="horizontal" | "vertical"`, `length` (`small` | `medium` | `large`), `lineStyle="solid" | "dashed"`, `DividerVariant`, `SpacingSize`, `PaddingSize`.
 - **`OverflowRow`** — Horizontal row that collapses items that do not fit into an overflow affordance.
 - **`ActionBar`** — A row of actions that collapses into a single `ActionMenu` once its container drops below `collapseBelow`. Measures the nearest genuinely-wider ancestor rather than itself, since the row shrinks to its own content. `dividerBefore` renders a vertical rule in the row and a divider in the collapsed menu, so both forms group the actions the same way. _Key props:_ `buttons` (`label`, `onClick`, `icon`, `variant`, `size`, `radius`, `tooltip`, `disabled`, `dividerBefore`), `collapseBelow`, `menuLabel`, `className`.
-- **`Popover`** — An anchored, non-modal panel for arbitrary content — a workspace switcher, an org flyout. The panel renders in its own shadow root, so malachite components inside it are styled, and joins the top layer like the other overlays. It prefers its `placement` and flips to the opposite side when there is no room, clamping along the other axis. Click-opened panels take focus and hand it back to the trigger on close; `openOn="hover"` also opens on focus and stays open while the pointer or focus is in the panel. A nested Popover counts as inside its parent for outside-press and hover dismissal, and Escape closes the topmost only. A click panel also closes when focus moves somewhere outside it and its trigger, and on close it hands focus back to the trigger only if focus would otherwise fall to the page. _Key props:_ `trigger`, `children`, `open`, `defaultOpen`, `onOpenChange`, `placement` (`bottom-start` | `bottom-end` | `top-start` | `top-center` | `right-start` | `right-end` | `left-start`), `openOn` (`click` | `hover`), `width` (`content` | `trigger`), `padding` (`none` | `small` | `medium`), `anchorRef` (position against another element, e.g. the section a trigger row sits in), `offset` (`small` 8px | `medium` 12px | `large` 14px), `elevation` (`default` | `raised`), `initialFocusRef` (what takes focus on open, in place of the first focusable), `openOnArrowKey` (a click panel also opens, focus inside, on the arrow key its placement points at — ArrowDown for a `bottom-*` placement; a text field trigger keeps its arrow keys), `role` (`dialog` | `menu` | `listbox`; `menu` brings no roving focus of its own), `aria-label` or `aria-labelledby` (one is required), `className`. The panel is capped to the viewport width, and only overlays opened from inside it (menus, dropdowns, modals) count as inside for outside-press dismissal. A side placement stays level with its anchor and scrolls within the room below, sliding up only when under 160px is left. Parts for the panel body: `Popover.Header` (`title`, `action`), `Popover.Action` (`icon`, `aria-label`, `onClick`, `href` (a link that opens in a new tab on Cmd/Ctrl-click or a middle click; a plain click runs `onClick` when one is given), `disabled`, `tooltip`), `Popover.List` (a scrolling list), `Popover.Section` (a bordered section) and `Popover.Empty` (an empty-state line).
+- **`Popover`** — An anchored, non-modal panel for arbitrary content — a workspace switcher, an org flyout. The panel renders in its own shadow root, so malachite components inside it are styled, and joins the top layer like the other overlays. It prefers its `placement` and flips to the opposite side when there is no room, clamping along the other axis. Click-opened panels take focus and hand it back to the trigger on close; `openOn="hover"` also opens on focus and stays open while the pointer or focus is in the panel. A nested Popover counts as inside its parent for outside-press and hover dismissal, and Escape closes the topmost only. A click panel also closes when focus moves somewhere outside it and its trigger, and on close it hands focus back to the trigger only if focus would otherwise fall to the page. _Key props:_ `trigger`, `children`, `open`, `defaultOpen`, `onOpenChange`, `placement` (`bottom-start` | `bottom-end` | `top-start` | `top-center` | `right-start` | `right-end` | `left-start`), `openOn` (`click` | `hover`), `width` (`content` | `trigger`), `padding` (`none` | `small` | `medium`), `anchorRef` (position against another element, e.g. the section a trigger row sits in), `offset` (`small` 8px | `medium` 12px | `large` 14px), `elevation` (`default` | `raised`), `initialFocus` (a ref, or a function read when the panel is shown, for what takes focus in place of the first focusable; it is read again as the panel's content changes, so focus follows content that mounts late or a focused element that is removed, but never leaves an element the user moved to; `initialFocusRef` is its deprecated form, read on open only), `openOnArrowKey` (a click panel also opens, focus inside, on the arrow key its placement points at — ArrowDown for a `bottom-*` placement; a text field trigger keeps its arrow keys), `role` (`dialog` | `menu` | `listbox`; `menu` brings no roving focus of its own), `aria-label` or `aria-labelledby` (one is required), `className`. The panel is capped to the viewport width, and only overlays opened from inside it (menus, dropdowns, modals) count as inside for outside-press dismissal. A side placement stays level with its anchor and scrolls within the room below, sliding up only when under 160px is left. Parts for the panel body: `Popover.Header` (`title`, `action`), `Popover.Action` (`icon`, `aria-label`, `onClick`, `href` (a link that opens in a new tab on Cmd/Ctrl-click or a middle click; a plain click runs `onClick` when one is given), `disabled`, `tooltip`), `Popover.List` (a scrolling list; `scrollToSelected` scrolls the list, never the page, to its selected row, one marked `aria-current`, `aria-selected` or a checked radio, each time the popover is shown, once that row mounts), `Popover.Section` (a bordered section) and `Popover.Empty` (an empty-state line).
 - **`Modal`** — Centred dialog over a scrim, with header slots (icon/title/subtitle/extra), a scrolling body and a pinned footer. Locks background scroll and dismisses on ESC, the close button, or a scrim click unless `closeOnOverlayClick` is off; `busy` suppresses the two pointer routes while a request is in flight and sets `aria-busy`, so a stray click cannot tear the dialog down mid-write — but never ESC, which is the only guaranteed keyboard exit from a focus trap and so always reaches `onClose`. ESC, the Tab focus trap and `aria-modal` all apply to the topmost overlay only, so these may be stacked — a dialog opened from a panel keeps Tab to itself and the panel stops claiming to be modal. The Tab trap follows focus into a malachite popup portaled out of the dialog’s own tree — a `MultiSelect` listbox or a `Popover` opened from the body — and traps Tab within that popup while it holds focus, so Tab walks and wraps that popup’s own stops rather than being yanked back to the dialog’s first control or escaping the dialog altogether. A `Dropdown` list or an `ActionMenu` is dismissed by Tab rather than trapping it: it closes and focus returns to its trigger, so Tab carries on from there. A consumer’s own portaled popup is not known to the trap and Tab will pull focus out of it. Set `role="alertdialog"` for a consequential choice, which asks assistive tech to announce the body and not just the name, and point `aria-describedby` at whichever element carries it. Width comes from the `size` union (`small` 420px | `medium` 612px | `large` 760px) rather than a raw pixel prop. `titleAdornment` sits immediately after the title behind a hairline divider, for naming the thing being acted on — distinct from `headerExtra`, which pins to the far right. `tray` paints a tinted plate around the card and hangs a `caption` beneath it; the plate is the dialog element itself, so that caption stays inside the `aria-modal` subtree rather than being stranded outside it by the visual nesting, and it is added to `aria-describedby` automatically because it says what the dialog is asking. It takes a tone (`neutral` | `warning` | `error` | `success`) rather than a colour, so no consumer can paint it off-palette — and the tone sets the plate and its caption colour together, so the two cannot disagree. The caption is a `{ label?, message }` pair rather than a node, because its row height, type scale and colour belong to the plate. `size` names the card, and the plate’s 4px ring is added on top. Like `SidePanel` it sits in a z-index band from 1000 — one step per stacked overlay, so what paints on top is what holds the keyboard — and stays out of the browser top layer, so a host app’s own dialogs can still cover it. `callouts` stacks full-bleed `Alert` bands at the top of the body, as on `SidePanel`; they ignore `bodyPadding` and lead `aria-describedby`, ahead of the consumer’s own description and the tray caption. For a confirmation use `ConfirmationDialog`, which is a preset over this. _Key props:_ `open`, `onClose`, `title`, `subtitle`, `icon`, `headerExtra`, `titleAdornment`, `tray`, `callouts`, `renderLink`, `headerDivider`, `footer`, `size`, `showCloseButton`, `closeOnOverlayClick`, `bodyPadding`, `busy`, `role` (`dialog` | `alertdialog`), `aria-label`, `aria-labelledby`, `aria-describedby`.
 - **`SidePanel`** — Right-hand slide-in overlay panel (drawer) with header slots (back/icon/title/subtitle/extra), scrollable body and optional footer. Locks background scroll and dismisses on ESC, an overlay click or close. ESC and the Tab focus trap apply to the topmost overlay only, so a `Modal` may be stacked over it. The Tab trap follows focus into a malachite popup portaled out of the panel’s own tree — a `MultiSelect` listbox or a `Popover` opened from the body — and traps Tab within that popup while it holds focus, so Tab walks and wraps that popup’s own stops rather than being yanked back to the panel’s first control or escaping the panel altogether. A `Dropdown` list or an `ActionMenu` is dismissed by Tab rather than trapping it: it closes and focus returns to its trigger, so Tab carries on from there. A consumer’s own portaled popup is not known to the trap and Tab will pull focus out of it. `callouts` stacks full-bleed `Alert` bands at the top of the body, above `children` and unaffected by `bodyPadding` — the same band `ConfirmationDialog` gives its `callout` — and `renderLink` routes their root-relative markdown links through the app’s router. The callouts are announced as the panel’s description, ahead of `description`.
 - **`useHasOpenOverlay`** — Hook reporting whether any modal-type overlay - `SidePanel` or `Modal` - is open anywhere in the app. For host chrome that has to get out of an overlay’s way, a floating support widget being the case it was added for: overlays render through a portal, so a host has no DOM signal of its own to read, and reading the library’s internal markers would couple it to something it does not own. Dropdowns and tooltips are deliberately not counted - they do not trap focus, and chrome does not need to move for them. _Key props:_ No arguments. Returns a boolean.

package/dist/components/Popover.js

@@ -1,257 +1,280 @@
-import { jsxs as he, Fragment as be, jsx as C } from "react/jsx-runtime";
-import Pe, { useContext as Ee, useState as W, useSyncExternalStore as xe, useRef as h, useCallback as ge, useEffect as j, useMemo as we } from "react";
-import { createPortal as Te } from "react-dom";
-import { ShadowRootWrapper as ye } from "../ShadowRootWrapper.js";
-import { PopoverEmpty as Le, PopoverSection as Me, PopoverList as Se, PopoverAction as De, PopoverHeader as _e } from "./PopoverParts.js";
-import { getDeepActiveElement as G } from "./activeElement.js";
-import { elementRef as Ae, composeRefs as Ce, chainHandler as p } from "./composeRefs.js";
-import { pushEscapeLayer as Ie } from "./escapeLayers.js";
-import { MENU_VIEWPORT_PADDING_PX as Ne } from "./floatingMenuGeometry.js";
-import { firstTabStopIn as Oe } from "./overlayBehaviour.js";
-import { usePopupLayer as ke } from "./overlayLayers.js";
-import { PopoverTreeContext as V } from "./popoverTree.js";
-import { useHoverClose as Ke } from "./useHoverClose.js";
-import { useLatestRef as I } from "./useLatestRef.js";
-import { usePopoverPosition as Re } from "./usePopoverPosition.js";
-import { usePopoverTree as Be } from "./usePopoverTree.js";
-const He = "font-sans box-border overflow-auto outline-none rounded-[var(--malachite-radius-xl,12px)] border border-solid border-[var(--malachite-card-border,rgb(232,232,232))] bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-primary,rgb(10,10,10))]", $e = {
+import { jsxs as ye, Fragment as Me, jsx as O } from "react/jsx-runtime";
+import Ce, { useContext as Se, useState as Q, useSyncExternalStore as De, useRef as d, useCallback as Z, useEffect as $, useMemo as _e } from "react";
+import { createPortal as Ae } from "react-dom";
+import { ShadowRootWrapper as Ie } from "../ShadowRootWrapper.js";
+import { PopoverEmpty as Ne, PopoverSection as Oe, PopoverList as ke, PopoverAction as Ke, PopoverHeader as Re } from "./PopoverParts.js";
+import { getDeepActiveElement as U } from "./activeElement.js";
+import { elementRef as He, composeRefs as Be, chainHandler as p } from "./composeRefs.js";
+import { pushEscapeLayer as $e } from "./escapeLayers.js";
+import { MENU_VIEWPORT_PADDING_PX as Ue } from "./floatingMenuGeometry.js";
+import { firstTabStopIn as re } from "./overlayBehaviour.js";
+import { usePopupLayer as We } from "./overlayLayers.js";
+import { PopoverTreeContext as ee, PopoverShownContext as je } from "./popoverTree.js";
+import { useHoverClose as Fe } from "./useHoverClose.js";
+import { useLatestRef as k } from "./useLatestRef.js";
+import { usePopoverPosition as Ge } from "./usePopoverPosition.js";
+import { usePopoverTree as Ve } from "./usePopoverTree.js";
+const Xe = "font-sans box-border overflow-auto outline-none rounded-[var(--malachite-radius-xl,12px)] border border-solid border-[var(--malachite-card-border,rgb(232,232,232))] bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-primary,rgb(10,10,10))]", Ye = {
   default: "[box-shadow:0px_4px_10px_0px_var(--malachite-card-shadow,rgba(0,0,0,0.1))]",
   raised: "[box-shadow:0px_8px_24px_0px_var(--malachite-card-shadow,rgba(0,0,0,0.1))]"
-}, Ue = {
+}, qe = {
   none: "p-0",
   small: "p-1",
   medium: "p-2"
-}, We = (r, c) => {
-  for (const b of c)
-    if (b && r.includes(b))
+}, ze = (r, a) => {
+  for (const g of a)
+    if (g && r.includes(g))
       return !0;
   return !1;
-}, je = {
+}, Je = {
   bottom: "ArrowDown",
   top: "ArrowUp",
   right: "ArrowRight",
   left: "ArrowLeft"
-}, Ge = (r) => r instanceof HTMLElement && (r.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(r.tagName)), Y = (r) => {
+}, Qe = (r) => r instanceof HTMLElement && (r.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(r.tagName)), te = (r) => {
   if (!(r instanceof Node))
     return [];
-  const c = r.getRootNode();
-  return [r, ...c instanceof ShadowRoot ? Y(c.host) : []];
-}, Ve = () => () => {
-}, Xe = () => !0, Ye = () => !1, X = (r, c) => c ?? Oe(r) ?? r, qe = ({
+  const a = r.getRootNode();
+  return [r, ...a instanceof ShadowRoot ? te(a.host) : []];
+}, Ze = () => () => {
+}, er = () => !0, rr = () => !1, W = (r, a) => a ?? re(r) ?? r, K = (r) => typeof r == "function" ? r() : r == null ? void 0 : r.current, tr = (r, a) => !r || r === document.body || !r.isConnected || r === a, or = ({
   trigger: r,
-  children: c,
-  open: b,
-  defaultOpen: q = !1,
-  onOpenChange: z,
-  placement: N = "bottom-start",
-  openOn: f = "click",
-  width: J = "content",
-  padding: Q = "small",
-  anchorRef: Z,
-  offset: F = "small",
-  elevation: ee = "default",
-  initialFocusRef: d,
-  openOnArrowKey: re = !1,
-  role: O = "dialog",
-  "aria-label": oe,
-  "aria-labelledby": te,
-  className: ne = ""
+  children: a,
+  open: g,
+  defaultOpen: oe = !1,
+  onOpenChange: ne,
+  placement: j = "bottom-start",
+  openOn: m = "click",
+  width: se = "content",
+  padding: ce = "small",
+  anchorRef: ue,
+  offset: ae = "small",
+  elevation: le = "default",
+  initialFocus: F,
+  initialFocusRef: v,
+  openOnArrowKey: ie = !1,
+  role: G = "dialog",
+  "aria-label": fe,
+  "aria-labelledby": de,
+  className: pe = ""
 }) => {
-  const se = Ee(V), [ce, ue] = W(q), t = b ?? ce, ae = xe(Ve, Xe, Ye), P = h(null), E = h(null), le = ke("popover", t, E), [u, ie] = W(null), k = h(0), D = h(!1), w = h(!1), T = h(!1), y = I(t), K = I(b), L = I(z), n = ge(
+  const me = Se(ee), [ve, he] = Q(oe), c = g ?? ve, be = De(Ze, er, rr), w = d(null), b = d(null), Pe = We("popover", c, b), [t, Ee] = Q(null), V = d(0), R = d(!1), S = d(!1), D = d(!1), x = d(null), T = d(null), _ = k(c), X = k(g), A = k(ne), P = k(F), L = F !== void 0, l = Z(
     (e) => {
-      var v;
-      e !== y.current && (K.current === void 0 && ue(e), (v = L.current) == null || v.call(L, e));
+      var u;
+      e !== _.current && (X.current === void 0 && he(e), (u = A.current) == null || u.call(A, e));
     },
-    [y, K, L]
-  ), { pointerInside: x, focusInside: g, triggerFocused: R, cancelClose: m, scheduleClose: M } = Ke({
-    isOpenRef: y,
-    heldByChildren: k,
-    setOpen: n
-  }), { tree: pe, ownedSources: _ } = Be({
-    parent: se,
-    isOpen: t,
-    openOn: f,
-    isOpenRef: y,
-    heldByChildren: k,
-    cancelClose: m,
-    scheduleClose: M
-  }), o = Re({
-    isOpen: t,
-    panel: u,
-    hostRef: E,
-    triggerRef: P,
-    anchorRef: Z,
-    placement: N,
-    width: J,
-    offset: F
+    [_, X, A]
+  ), { pointerInside: y, focusInside: M, triggerFocused: Y, cancelClose: h, scheduleClose: I } = Fe({
+    isOpenRef: _,
+    heldByChildren: V,
+    setOpen: l
+  }), { tree: ge, ownedSources: H } = Ve({
+    parent: me,
+    isOpen: c,
+    openOn: m,
+    isOpenRef: _,
+    heldByChildren: V,
+    cancelClose: h,
+    scheduleClose: I
+  }), o = Ge({
+    isOpen: c,
+    panel: t,
+    hostRef: b,
+    triggerRef: w,
+    anchorRef: ue,
+    placement: j,
+    width: se,
+    offset: ae
   });
-  j(() => {
-    if (!t)
+  $(() => {
+    if (!c)
       return;
-    const e = (l) => {
-      const i = l.composedPath();
-      We(i, [
-        P.current,
-        E.current,
-        ...[..._.current].map((ve) => ve())
-      ]) || n(!1);
+    const e = (n) => {
+      const s = n.composedPath();
+      ze(s, [
+        w.current,
+        b.current,
+        ...[...H.current].map((Le) => Le())
+      ]) || l(!1);
     };
     document.addEventListener("mousedown", e, !0);
-    const v = Ie(() => n(!1));
+    const u = $e(() => l(!1));
     return () => {
-      var i;
-      document.removeEventListener("mousedown", e, !0), v(), x.current = !1;
-      const l = G();
-      g.current && (!l || l === document.body) && (w.current = !0, (i = P.current) == null || i.focus({ preventScroll: !0 }), w.current = !1), g.current = !1;
+      var s;
+      document.removeEventListener("mousedown", e, !0), u(), y.current = !1;
+      const n = U();
+      M.current && (!n || n === document.body) && (S.current = !0, (s = w.current) == null || s.focus({ preventScroll: !0 }), S.current = !1), M.current = !1, x.current = null, T.current = null;
     };
-  }, [t, n, _, x, g]);
-  const B = t && u !== null && o !== null;
-  j(() => {
-    const e = f === "click" || D.current;
-    !B || !u || !e || (D.current = !1, X(u, d == null ? void 0 : d.current).focus({ preventScroll: !0 }));
-  }, [B, u, f, d]);
-  const A = () => {
-    if (m(), t && u) {
-      X(u, d == null ? void 0 : d.current).focus({ preventScroll: !0 });
+  }, [c, l, H, y, M]);
+  const C = c && t !== null && o !== null, E = Z((e) => {
+    x.current = e, e.focus({ preventScroll: !0 });
+  }, []);
+  $(() => {
+    const e = m === "click" || R.current;
+    if (!C || !t || !e)
+      return;
+    R.current = !1;
+    const u = L ? K(P.current) : v == null ? void 0 : v.current;
+    E(W(t, u));
+  }, [C, t, m, L, v, P, E]), $(() => {
+    if (!C || !t || !L)
+      return;
+    const e = () => {
+      const n = U();
+      if (tr(n, b.current)) {
+        T.current && !T.current.isConnected && E(W(t, K(P.current)));
+        return;
+      }
+      if (n !== x.current)
+        return;
+      const s = K(P.current) ?? (n === t ? re(t) : null);
+      s && s !== n && s.isConnected && E(s);
+    }, u = new MutationObserver(e);
+    return u.observe(t, { childList: !0, subtree: !0 }), () => u.disconnect();
+  }, [C, t, L, P, E]);
+  const B = () => {
+    if (h(), c && t) {
+      const e = L ? K(P.current) : v == null ? void 0 : v.current;
+      E(W(t, e));
       return;
     }
-    D.current = !0, n(!0);
-  }, S = (e) => {
-    const v = [
-      P.current,
-      E.current,
-      u,
-      ...[..._.current].map((l) => l())
+    R.current = !0, l(!0);
+  }, N = (e) => {
+    const u = [
+      w.current,
+      b.current,
+      t,
+      ...[...H.current].map((n) => n())
     ];
-    return Y(e).some(
-      (l) => v.some((i) => i == null ? void 0 : i.contains(l))
+    return te(e).some(
+      (n) => u.some((s) => s == null ? void 0 : s.contains(n))
     );
-  }, H = (e) => {
+  }, q = (e) => {
     e && queueMicrotask(() => {
-      !S(e) && !S(G()) && n(!1);
+      !N(e) && !N(U()) && l(!1);
     });
-  }, s = f === "hover" ? {
+  }, i = m === "hover" ? {
     onMouseEnter: () => {
-      x.current = !0, m(), n(!0);
+      y.current = !0, h(), l(!0);
     },
     onMouseLeave: () => {
-      x.current = !1, M();
+      y.current = !1, I();
     },
     onPanelMouseOver: () => {
-      x.current = !0, m();
+      y.current = !0, h();
     }
-  } : null, a = r.props, $ = Ae(r), fe = we(
-    () => Ce($, P),
-    [$]
-  ), U = je[N.split("-")[0]], de = Pe.cloneElement(r, {
-    ref: fe,
-    "aria-haspopup": O,
-    "aria-expanded": t,
+  } : null, f = r.props, z = He(r), we = _e(
+    () => Be(z, w),
+    [z]
+  ), J = Je[j.split("-")[0]], xe = Ce.cloneElement(r, {
+    ref: we,
+    "aria-haspopup": G,
+    "aria-expanded": c,
     onClick: p(
-      a.onClick,
+      f.onClick,
       (e) => {
-        if (f !== "hover") {
-          n(!t);
+        if (m !== "hover") {
+          l(!c);
           return;
         }
         if (e.detail === 0) {
-          A();
+          B();
           return;
         }
-        m(), n(!0);
+        h(), l(!0);
       }
     ),
-    ...s ? {
+    ...i ? {
       onMouseEnter: p(
-        a.onMouseEnter,
-        s.onMouseEnter
+        f.onMouseEnter,
+        i.onMouseEnter
       ),
       onMouseLeave: p(
-        a.onMouseLeave,
-        s.onMouseLeave
+        f.onMouseLeave,
+        i.onMouseLeave
       ),
       onMouseDown: p(
-        a.onMouseDown,
+        f.onMouseDown,
         () => {
-          T.current = !0, setTimeout(() => {
-            T.current = !1;
+          D.current = !0, setTimeout(() => {
+            D.current = !1;
           });
         }
       ),
-      onFocus: p(a.onFocus, () => {
-        const e = T.current;
-        T.current = !1, R.current = !e && !w.current, !w.current && (m(), n(!0));
+      onFocus: p(f.onFocus, () => {
+        const e = D.current;
+        D.current = !1, Y.current = !e && !S.current, !S.current && (h(), l(!0));
       }),
       onKeyDown: p(
-        a.onKeyDown,
+        f.onKeyDown,
         (e) => {
-          e.key === U && (e.preventDefault(), A());
+          e.key === J && (e.preventDefault(), B());
         }
       )
-    } : re ? {
+    } : ie ? {
       onKeyDown: p(
-        a.onKeyDown,
+        f.onKeyDown,
         (e) => {
-          e.key !== U || Ge(e.target) || (e.preventDefault(), A());
+          e.key !== J || Qe(e.target) || (e.preventDefault(), B());
         }
       )
     } : {},
     onBlur: p(
-      a.onBlur,
+      f.onBlur,
       (e) => {
-        if (R.current = !1, !(!t || S(e.relatedTarget))) {
-          if (f === "hover") {
-            M();
+        if (Y.current = !1, !(!c || N(e.relatedTarget))) {
+          if (m === "hover") {
+            I();
             return;
           }
-          H(e.relatedTarget);
+          q(e.relatedTarget);
         }
       }
     )
-  }), me = {
+  }), Te = {
     maxHeight: o == null ? void 0 : o.maxHeight,
-    maxWidth: `calc(100vw - ${Ne * 2}px)`,
+    maxWidth: `calc(100vw - ${Ue * 2}px)`,
     visibility: o ? "visible" : "hidden"
   };
-  return /* @__PURE__ */ he(be, { children: [
-    de,
-    t && ae && Te(
-      /* @__PURE__ */ C(V.Provider, { value: pe, children: /* @__PURE__ */ C(
-        ye,
+  return /* @__PURE__ */ ye(Me, { children: [
+    xe,
+    c && be && Ae(
+      /* @__PURE__ */ O(ee.Provider, { value: ge, children: /* @__PURE__ */ O(
+        Ie,
         {
-          hostRef: E,
-          hostProps: le,
+          hostRef: b,
+          hostProps: Pe,
           hostStyle: {
             position: "fixed",
             top: (o == null ? void 0 : o.top) ?? 0,
             left: (o == null ? void 0 : o.left) ?? 0
           },
-          children: /* @__PURE__ */ C(
+          children: /* @__PURE__ */ O(
             "div",
             {
-              ref: ie,
-              role: O,
-              "aria-label": oe,
-              "aria-labelledby": te,
+              ref: Ee,
+              role: G,
+              "aria-label": fe,
+              "aria-labelledby": de,
               "data-side": o == null ? void 0 : o.side,
               tabIndex: -1,
-              className: `${He} ${$e[ee]} ${Ue[Q]} ${ne}`.trim(),
-              style: me,
-              onMouseOver: s == null ? void 0 : s.onPanelMouseOver,
-              onMouseLeave: s == null ? void 0 : s.onMouseLeave,
-              onFocus: () => {
-                g.current = !0, m();
+              className: `${Xe} ${Ye[le]} ${qe[ce]} ${pe}`.trim(),
+              style: Te,
+              onMouseOver: i == null ? void 0 : i.onPanelMouseOver,
+              onMouseLeave: i == null ? void 0 : i.onMouseLeave,
+              onFocus: (e) => {
+                M.current = !0, e.target !== x.current && (x.current = null), e.target instanceof HTMLElement && (t != null && t.contains(e.target)) && (T.current = e.target), h();
               },
               onBlur: (e) => {
-                if (!S(e.relatedTarget)) {
-                  if (g.current = !1, f === "hover") {
-                    M();
+                if (!N(e.relatedTarget)) {
+                  if (e.relatedTarget && (T.current = null), M.current = !1, m === "hover") {
+                    I();
                     return;
                   }
-                  H(e.relatedTarget);
+                  q(e.relatedTarget);
                 }
               },
-              children: c
+              children: /* @__PURE__ */ O(je.Provider, { value: C, children: a })
             }
           )
         }
@@ -259,15 +282,15 @@ const He = "font-sans box-border overflow-auto outline-none rounded-[var(--malac
       document.body
     )
   ] });
-}, fr = Object.assign(qe, {
-  Header: _e,
-  Action: De,
-  List: Se,
-  Section: Me,
-  Empty: Le
+}, wr = Object.assign(or, {
+  Header: Re,
+  Action: Ke,
+  List: ke,
+  Section: Oe,
+  Empty: Ne
 });
 export {
-  fr as Popover,
-  fr as default
+  wr as Popover,
+  wr as default
 };
 //# sourceMappingURL=Popover.js.map

package/dist/components/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../src/components/Popover.tsx"],"sourcesContent":["import React, {\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    useSyncExternalStore,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport {\n    PopoverAction,\n    PopoverEmpty,\n    PopoverHeader,\n    PopoverList,\n    PopoverSection,\n} from './PopoverParts';\nimport { getDeepActiveElement } from './activeElement';\nimport { chainHandler, composeRefs, elementRef } from './composeRefs';\nimport { pushEscapeLayer } from './escapeLayers';\nimport {\n    type FloatingOffset,\n    type FloatingPlacement,\n    MENU_VIEWPORT_PADDING_PX,\n} from './floatingMenuGeometry';\nimport { firstTabStopIn } from './overlayBehaviour';\nimport { usePopupLayer } from './overlayLayers';\nimport { PopoverTreeContext } from './popoverTree';\nimport { useHoverClose } from './useHoverClose';\nimport { useLatestRef } from './useLatestRef';\nimport { usePopoverPosition } from './usePopoverPosition';\nimport { usePopoverTree } from './usePopoverTree';\n\nexport type PopoverPlacement = FloatingPlacement;\n\ninterface PopoverBaseProps {\n    trigger: React.ReactElement;\n    children?: React.ReactNode;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    placement?: PopoverPlacement;\n    openOn?: 'click' | 'hover';\n    width?: 'content' | 'trigger';\n    padding?: 'none' | 'small' | 'medium';\n    anchorRef?: React.RefObject<HTMLElement | null>;\n    offset?: FloatingOffset;\n    elevation?: 'default' | 'raised';\n    initialFocusRef?: React.RefObject<HTMLElement | null>;\n    /** A click panel also opens, focus inside, on the arrow key its placement points at. */\n    openOnArrowKey?: boolean;\n    role?: 'dialog' | 'menu' | 'listbox';\n    className?: string;\n}\n\ntype PopoverName =\n    | { 'aria-label': string; 'aria-labelledby'?: string }\n    | { 'aria-label'?: string; 'aria-labelledby': string };\n\nexport type PopoverProps = PopoverBaseProps & PopoverName;\n\nconst PANEL =\n    'font-sans box-border overflow-auto outline-none rounded-[var(--malachite-radius-xl,12px)] border border-solid border-[var(--malachite-card-border,rgb(232,232,232))] bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-primary,rgb(10,10,10))]';\n\nconst ELEVATION: Record<NonNullable<PopoverBaseProps['elevation']>, string> = {\n    default: '[box-shadow:0px_4px_10px_0px_var(--malachite-card-shadow,rgba(0,0,0,0.1))]',\n    raised: '[box-shadow:0px_8px_24px_0px_var(--malachite-card-shadow,rgba(0,0,0,0.1))]',\n};\n\nconst PADDING: Record<NonNullable<PopoverBaseProps['padding']>, string> = {\n    none: 'p-0',\n    small: 'p-1',\n    medium: 'p-2',\n};\n\nconst pathHits = (path: EventTarget[], nodes: Iterable<Element | null | undefined>): boolean => {\n    for (const node of nodes) {\n        if (node && path.includes(node)) {\n            return true;\n        }\n    }\n    return false;\n};\n\nconst KEYBOARD_OPEN_KEY: Record<string, string> = {\n    bottom: 'ArrowDown',\n    top: 'ArrowUp',\n    right: 'ArrowRight',\n    left: 'ArrowLeft',\n};\n\nconst isTextEntry = (target: EventTarget): boolean =>\n    target instanceof HTMLElement &&\n    (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName));\n\nconst composedPathOf = (node: EventTarget | null): Node[] => {\n    if (!(node instanceof Node)) {\n        return [];\n    }\n    const root = node.getRootNode();\n    return [node, ...(root instanceof ShadowRoot ? composedPathOf(root.host) : [])];\n};\n\nconst subscribeToNothing = () => () => undefined;\nconst onClient = () => true;\nconst onServer = () => false;\n\nconst focusTarget = (panel: HTMLElement, initial: HTMLElement | null | undefined): HTMLElement =>\n    initial ?? firstTabStopIn(panel) ?? panel;\n\n/** An anchored, non-modal panel; nested Popovers count as inside their parent. */\nconst PopoverRoot: React.FC<PopoverProps> = ({\n    trigger,\n    children,\n    open: controlledOpen,\n    defaultOpen = false,\n    onOpenChange,\n    placement = 'bottom-start',\n    openOn = 'click',\n    width = 'content',\n    padding = 'small',\n    anchorRef,\n    offset = 'small',\n    elevation = 'default',\n    initialFocusRef,\n    openOnArrowKey = false,\n    role = 'dialog',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n}) => {\n    const parent = useContext(PopoverTreeContext);\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n    const isOpen = controlledOpen ?? uncontrolledOpen;\n    const isClient = useSyncExternalStore(subscribeToNothing, onClient, onServer);\n\n    const triggerRef = useRef<HTMLElement | null>(null);\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    const popupIdentity = usePopupLayer('popover', isOpen, hostRef);\n    const [panel, setPanel] = useState<HTMLDivElement | null>(null);\n    const heldByChildren = useRef(0);\n    const focusOnOpen = useRef(false);\n    const returningFocus = useRef(false);\n    const pointerPressedTrigger = useRef(false);\n\n    const isOpenRef = useLatestRef(isOpen);\n    const controlledRef = useLatestRef(controlledOpen);\n    const onOpenChangeRef = useLatestRef(onOpenChange);\n\n    const setOpen = useCallback(\n        (next: boolean) => {\n            if (next === isOpenRef.current) {\n                return;\n            }\n            if (controlledRef.current === undefined) {\n                setUncontrolledOpen(next);\n            }\n            onOpenChangeRef.current?.(next);\n        },\n        [isOpenRef, controlledRef, onOpenChangeRef],\n    );\n\n    const { pointerInside, focusInside, triggerFocused, cancelClose, scheduleClose } =\n        useHoverClose({\n            isOpenRef,\n            heldByChildren,\n            setOpen,\n        });\n\n    const { tree, ownedSources } = usePopoverTree({\n        parent,\n        isOpen,\n        openOn,\n        isOpenRef,\n        heldByChildren,\n        cancelClose,\n        scheduleClose,\n    });\n\n    const geometry = usePopoverPosition({\n        isOpen,\n        panel,\n        hostRef,\n        triggerRef,\n        anchorRef,\n        placement,\n        width,\n        offset,\n    });\n\n    useEffect(() => {\n        if (!isOpen) {\n            return;\n        }\n        const closeOnOutsidePress = (event: MouseEvent) => {\n            const path = event.composedPath();\n            const inside = pathHits(path, [\n                triggerRef.current,\n                hostRef.current,\n                ...[...ownedSources.current].map((source) => source()),\n            ]);\n            if (!inside) {\n                setOpen(false);\n            }\n        };\n        document.addEventListener('mousedown', closeOnOutsidePress, true);\n        const popEscapeLayer = pushEscapeLayer(() => setOpen(false));\n        return () => {\n            document.removeEventListener('mousedown', closeOnOutsidePress, true);\n            popEscapeLayer();\n            pointerInside.current = false;\n            const active = getDeepActiveElement();\n            if (focusInside.current && (!active || active === document.body)) {\n                returningFocus.current = true;\n                triggerRef.current?.focus({ preventScroll: true });\n                returningFocus.current = false;\n            }\n            focusInside.current = false;\n        };\n    }, [isOpen, setOpen, ownedSources, pointerInside, focusInside]);\n\n    const shown = isOpen && panel !== null && geometry !== null;\n\n    useEffect(() => {\n        const shouldFocus = openOn === 'click' || focusOnOpen.current;\n        if (!shown || !panel || !shouldFocus) {\n            return;\n        }\n        focusOnOpen.current = false;\n        focusTarget(panel, initialFocusRef?.current).focus({ preventScroll: true });\n    }, [shown, panel, openOn, initialFocusRef]);\n\n    const openWithFocus = () => {\n        cancelClose();\n        if (isOpen && panel) {\n            focusTarget(panel, initialFocusRef?.current).focus({ preventScroll: true });\n            return;\n        }\n        focusOnOpen.current = true;\n        setOpen(true);\n    };\n\n    const isInside = (node: EventTarget | null): boolean => {\n        const containers = [\n            triggerRef.current,\n            hostRef.current,\n            panel,\n            ...[...ownedSources.current].map((source) => source()),\n        ];\n        return composedPathOf(node).some((step) =>\n            containers.some((container) => container?.contains(step)),\n        );\n    };\n\n    const closeIfFocusLeft = (next: EventTarget | null) => {\n        if (!next) {\n            return;\n        }\n        queueMicrotask(() => {\n            if (!isInside(next) && !isInside(getDeepActiveElement())) {\n                setOpen(false);\n            }\n        });\n    };\n\n    const hoverHandlers =\n        openOn === 'hover'\n            ? {\n                  onMouseEnter: () => {\n                      pointerInside.current = true;\n                      cancelClose();\n                      setOpen(true);\n                  },\n                  onMouseLeave: () => {\n                      pointerInside.current = false;\n                      scheduleClose();\n                  },\n                  onPanelMouseOver: () => {\n                      pointerInside.current = true;\n                      cancelClose();\n                  },\n              }\n            : null;\n\n    const triggerProps = trigger.props as Record<string, unknown>;\n    type Handler<E extends React.SyntheticEvent> = ((event: E) => void) | undefined;\n\n    const ownTriggerRef = elementRef<HTMLElement>(trigger);\n    const composedTriggerRef = useMemo(\n        () => composeRefs(ownTriggerRef, triggerRef),\n        [ownTriggerRef],\n    );\n    const openKey = KEYBOARD_OPEN_KEY[placement.split('-')[0]];\n\n    const clonedTrigger = React.cloneElement(trigger, {\n        ref: composedTriggerRef,\n        'aria-haspopup': role,\n        'aria-expanded': isOpen,\n        onClick: chainHandler(\n            triggerProps.onClick as Handler<React.MouseEvent>,\n            (event: React.MouseEvent) => {\n                if (openOn !== 'hover') {\n                    setOpen(!isOpen);\n                    return;\n                }\n                const fromKeyboard = event.detail === 0;\n                if (fromKeyboard) {\n                    openWithFocus();\n                    return;\n                }\n                cancelClose();\n                setOpen(true);\n            },\n        ),\n        ...(hoverHandlers\n            ? {\n                  onMouseEnter: chainHandler(\n                      triggerProps.onMouseEnter as Handler<React.MouseEvent>,\n                      hoverHandlers.onMouseEnter,\n                  ),\n                  onMouseLeave: chainHandler(\n                      triggerProps.onMouseLeave as Handler<React.MouseEvent>,\n                      hoverHandlers.onMouseLeave,\n                  ),\n                  onMouseDown: chainHandler(\n                      triggerProps.onMouseDown as Handler<React.MouseEvent>,\n                      () => {\n                          pointerPressedTrigger.current = true;\n                          setTimeout(() => {\n                              pointerPressedTrigger.current = false;\n                          });\n                      },\n                  ),\n                  onFocus: chainHandler(triggerProps.onFocus as Handler<React.FocusEvent>, () => {\n                      const fromPointer = pointerPressedTrigger.current;\n                      pointerPressedTrigger.current = false;\n                      triggerFocused.current = !fromPointer && !returningFocus.current;\n                      if (returningFocus.current) {\n                          return;\n                      }\n                      cancelClose();\n                      setOpen(true);\n                  }),\n                  onKeyDown: chainHandler(\n                      triggerProps.onKeyDown as Handler<React.KeyboardEvent>,\n                      (event: React.KeyboardEvent) => {\n                          if (event.key !== openKey) {\n                              return;\n                          }\n                          event.preventDefault();\n                          openWithFocus();\n                      },\n                  ),\n              }\n            : openOnArrowKey\n              ? {\n                    onKeyDown: chainHandler(\n                        triggerProps.onKeyDown as Handler<React.KeyboardEvent>,\n                        (event: React.KeyboardEvent) => {\n                            if (event.key !== openKey || isTextEntry(event.target)) {\n                                return;\n                            }\n                            event.preventDefault();\n                            openWithFocus();\n                        },\n                    ),\n                }\n              : {}),\n        onBlur: chainHandler(\n            triggerProps.onBlur as Handler<React.FocusEvent>,\n            (event: React.FocusEvent) => {\n                triggerFocused.current = false;\n                if (!isOpen || isInside(event.relatedTarget)) {\n                    return;\n                }\n                if (openOn === 'hover') {\n                    scheduleClose();\n                    return;\n                }\n                closeIfFocusLeft(event.relatedTarget);\n            },\n        ),\n    } as Record<string, unknown>);\n\n    const panelStyle: React.CSSProperties = {\n        maxHeight: geometry?.maxHeight,\n        maxWidth: `calc(100vw - ${MENU_VIEWPORT_PADDING_PX * 2}px)`,\n        visibility: geometry ? 'visible' : 'hidden',\n    };\n\n    return (\n        <>\n            {clonedTrigger}\n            {isOpen &&\n                isClient &&\n                createPortal(\n                    <PopoverTreeContext.Provider value={tree}>\n                        <ShadowRootWrapper\n                            hostRef={hostRef}\n                            hostProps={popupIdentity}\n                            hostStyle={{\n                                position: 'fixed',\n                                top: geometry?.top ?? 0,\n                                left: geometry?.left ?? 0,\n                            }}\n                        >\n                            <div\n                                ref={setPanel}\n                                role={role}\n                                aria-label={ariaLabel}\n                                aria-labelledby={ariaLabelledBy}\n                                data-side={geometry?.side}\n                                tabIndex={-1}\n                                className={`${PANEL} ${ELEVATION[elevation]} ${PADDING[padding]} ${className}`.trim()}\n                                style={panelStyle}\n                                // React's mouseenter stops at the shadow host, so the panel listens for mouseover.\n                                onMouseOver={hoverHandlers?.onPanelMouseOver}\n                                onMouseLeave={hoverHandlers?.onMouseLeave}\n                                onFocus={() => {\n                                    focusInside.current = true;\n                                    cancelClose();\n                                }}\n                                onBlur={(event) => {\n                                    if (isInside(event.relatedTarget)) {\n                                        return;\n                                    }\n                                    focusInside.current = false;\n                                    if (openOn === 'hover') {\n                                        scheduleClose();\n                                        return;\n                                    }\n                                    closeIfFocusLeft(event.relatedTarget);\n                                }}\n                            >\n                                {children}\n                            </div>\n                        </ShadowRootWrapper>\n                    </PopoverTreeContext.Provider>,\n                    document.body,\n                )}\n        </>\n    );\n};\n\nexport const Popover = Object.assign(PopoverRoot, {\n    Header: PopoverHeader,\n    Action: PopoverAction,\n    List: PopoverList,\n    Section: PopoverSection,\n    Empty: PopoverEmpty,\n});\n\nexport default Popover;\n"],"names":["PANEL","ELEVATION","PADDING","pathHits","path","nodes","node","KEYBOARD_OPEN_KEY","isTextEntry","target","composedPathOf","root","subscribeToNothing","onClient","onServer","focusTarget","panel","initial","firstTabStopIn","PopoverRoot","trigger","children","controlledOpen","defaultOpen","onOpenChange","placement","openOn","width","padding","anchorRef","offset","elevation","initialFocusRef","openOnArrowKey","role","ariaLabel","ariaLabelledBy","className","parent","useContext","PopoverTreeContext","uncontrolledOpen","setUncontrolledOpen","useState","isOpen","isClient","useSyncExternalStore","triggerRef","useRef","hostRef","popupIdentity","usePopupLayer","setPanel","heldByChildren","focusOnOpen","returningFocus","pointerPressedTrigger","isOpenRef","useLatestRef","controlledRef","onOpenChangeRef","setOpen","useCallback","next","_a","pointerInside","focusInside","triggerFocused","cancelClose","scheduleClose","useHoverClose","tree","ownedSources","usePopoverTree","geometry","usePopoverPosition","useEffect","closeOnOutsidePress","event","source","popEscapeLayer","pushEscapeLayer","active","getDeepActiveElement","shown","shouldFocus","openWithFocus","isInside","containers","step","container","closeIfFocusLeft","hoverHandlers","triggerProps","ownTriggerRef","elementRef","composedTriggerRef","useMemo","composeRefs","openKey","clonedTrigger","React","chainHandler","fromPointer","panelStyle","MENU_VIEWPORT_PADDING_PX","jsxs","Fragment","createPortal","jsx","ShadowRootWrapper","Popover","PopoverHeader","PopoverAction","PopoverList","PopoverSection","PopoverEmpty"],"mappings":"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"}
+{"version":3,"file":"Popover.js","sources":["../../src/components/Popover.tsx"],"sourcesContent":["import React, {\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    useSyncExternalStore,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport {\n    PopoverAction,\n    PopoverEmpty,\n    PopoverHeader,\n    PopoverList,\n    PopoverSection,\n} from './PopoverParts';\nimport { getDeepActiveElement } from './activeElement';\nimport { chainHandler, composeRefs, elementRef } from './composeRefs';\nimport { pushEscapeLayer } from './escapeLayers';\nimport {\n    type FloatingOffset,\n    type FloatingPlacement,\n    MENU_VIEWPORT_PADDING_PX,\n} from './floatingMenuGeometry';\nimport { firstTabStopIn } from './overlayBehaviour';\nimport { usePopupLayer } from './overlayLayers';\nimport { PopoverShownContext, PopoverTreeContext } from './popoverTree';\nimport { useHoverClose } from './useHoverClose';\nimport { useLatestRef } from './useLatestRef';\nimport { usePopoverPosition } from './usePopoverPosition';\nimport { usePopoverTree } from './usePopoverTree';\n\nexport type PopoverPlacement = FloatingPlacement;\n\nexport type PopoverInitialFocus =\n    | React.RefObject<HTMLElement | null>\n    | (() => HTMLElement | null | undefined);\n\ninterface PopoverBaseProps {\n    trigger: React.ReactElement;\n    children?: React.ReactNode;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    placement?: PopoverPlacement;\n    openOn?: 'click' | 'hover';\n    width?: 'content' | 'trigger';\n    padding?: 'none' | 'small' | 'medium';\n    anchorRef?: React.RefObject<HTMLElement | null>;\n    offset?: FloatingOffset;\n    elevation?: 'default' | 'raised';\n    /** A click panel also opens, focus inside, on the arrow key its placement points at. */\n    openOnArrowKey?: boolean;\n    role?: 'dialog' | 'menu' | 'listbox';\n    className?: string;\n}\n\ntype PopoverName =\n    | { 'aria-label': string; 'aria-labelledby'?: string }\n    | { 'aria-label'?: string; 'aria-labelledby': string };\n\ntype PopoverFocusSource =\n    | {\n          /**\n           * What takes focus when the panel is shown, in place of its first tab stop. Re-read as the\n           * content changes, so focus follows late content but never leaves where the user moved it.\n           */\n          initialFocus?: PopoverInitialFocus;\n          initialFocusRef?: never;\n      }\n    | {\n          initialFocus?: never;\n          /** @deprecated Use `initialFocus`, which takes the same ref and also follows late content. */\n          initialFocusRef?: React.RefObject<HTMLElement | null>;\n      };\n\nexport type PopoverProps = PopoverBaseProps & PopoverName & PopoverFocusSource;\n\nconst PANEL =\n    'font-sans box-border overflow-auto outline-none rounded-[var(--malachite-radius-xl,12px)] border border-solid border-[var(--malachite-card-border,rgb(232,232,232))] bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-primary,rgb(10,10,10))]';\n\nconst ELEVATION: Record<NonNullable<PopoverBaseProps['elevation']>, string> = {\n    default: '[box-shadow:0px_4px_10px_0px_var(--malachite-card-shadow,rgba(0,0,0,0.1))]',\n    raised: '[box-shadow:0px_8px_24px_0px_var(--malachite-card-shadow,rgba(0,0,0,0.1))]',\n};\n\nconst PADDING: Record<NonNullable<PopoverBaseProps['padding']>, string> = {\n    none: 'p-0',\n    small: 'p-1',\n    medium: 'p-2',\n};\n\nconst pathHits = (path: EventTarget[], nodes: Iterable<Element | null | undefined>): boolean => {\n    for (const node of nodes) {\n        if (node && path.includes(node)) {\n            return true;\n        }\n    }\n    return false;\n};\n\nconst KEYBOARD_OPEN_KEY: Record<string, string> = {\n    bottom: 'ArrowDown',\n    top: 'ArrowUp',\n    right: 'ArrowRight',\n    left: 'ArrowLeft',\n};\n\nconst isTextEntry = (target: EventTarget): boolean =>\n    target instanceof HTMLElement &&\n    (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName));\n\nconst composedPathOf = (node: EventTarget | null): Node[] => {\n    if (!(node instanceof Node)) {\n        return [];\n    }\n    const root = node.getRootNode();\n    return [node, ...(root instanceof ShadowRoot ? composedPathOf(root.host) : [])];\n};\n\nconst subscribeToNothing = () => () => undefined;\nconst onClient = () => true;\nconst onServer = () => false;\n\nconst focusTarget = (panel: HTMLElement, initial: HTMLElement | null | undefined): HTMLElement =>\n    initial ?? firstTabStopIn(panel) ?? panel;\n\nconst resolveFocus = (source: PopoverInitialFocus | undefined): HTMLElement | null | undefined =>\n    typeof source === 'function' ? source() : source?.current;\n\n// Some engines keep a removed element as `activeElement`, and a shadow host with nothing\n// focused inside it holds focus for no one.\nconst focusIsLost = (active: HTMLElement | null, host: HTMLElement | null): boolean =>\n    !active || active === document.body || !active.isConnected || active === host;\n\n/** An anchored, non-modal panel; nested Popovers count as inside their parent. */\nconst PopoverRoot: React.FC<PopoverProps> = ({\n    trigger,\n    children,\n    open: controlledOpen,\n    defaultOpen = false,\n    onOpenChange,\n    placement = 'bottom-start',\n    openOn = 'click',\n    width = 'content',\n    padding = 'small',\n    anchorRef,\n    offset = 'small',\n    elevation = 'default',\n    initialFocus,\n    initialFocusRef,\n    openOnArrowKey = false,\n    role = 'dialog',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n}) => {\n    const parent = useContext(PopoverTreeContext);\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n    const isOpen = controlledOpen ?? uncontrolledOpen;\n    const isClient = useSyncExternalStore(subscribeToNothing, onClient, onServer);\n\n    const triggerRef = useRef<HTMLElement | null>(null);\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    const popupIdentity = usePopupLayer('popover', isOpen, hostRef);\n    const [panel, setPanel] = useState<HTMLDivElement | null>(null);\n    const heldByChildren = useRef(0);\n    const focusOnOpen = useRef(false);\n    const returningFocus = useRef(false);\n    const pointerPressedTrigger = useRef(false);\n    const placedFocus = useRef<HTMLElement | null>(null);\n    const heldFocus = useRef<HTMLElement | null>(null);\n\n    const isOpenRef = useLatestRef(isOpen);\n    const controlledRef = useLatestRef(controlledOpen);\n    const onOpenChangeRef = useLatestRef(onOpenChange);\n    const initialFocusSource = useLatestRef(initialFocus);\n    const followsContent = initialFocus !== undefined;\n\n    const setOpen = useCallback(\n        (next: boolean) => {\n            if (next === isOpenRef.current) {\n                return;\n            }\n            if (controlledRef.current === undefined) {\n                setUncontrolledOpen(next);\n            }\n            onOpenChangeRef.current?.(next);\n        },\n        [isOpenRef, controlledRef, onOpenChangeRef],\n    );\n\n    const { pointerInside, focusInside, triggerFocused, cancelClose, scheduleClose } =\n        useHoverClose({\n            isOpenRef,\n            heldByChildren,\n            setOpen,\n        });\n\n    const { tree, ownedSources } = usePopoverTree({\n        parent,\n        isOpen,\n        openOn,\n        isOpenRef,\n        heldByChildren,\n        cancelClose,\n        scheduleClose,\n    });\n\n    const geometry = usePopoverPosition({\n        isOpen,\n        panel,\n        hostRef,\n        triggerRef,\n        anchorRef,\n        placement,\n        width,\n        offset,\n    });\n\n    useEffect(() => {\n        if (!isOpen) {\n            return;\n        }\n        const closeOnOutsidePress = (event: MouseEvent) => {\n            const path = event.composedPath();\n            const inside = pathHits(path, [\n                triggerRef.current,\n                hostRef.current,\n                ...[...ownedSources.current].map((source) => source()),\n            ]);\n            if (!inside) {\n                setOpen(false);\n            }\n        };\n        document.addEventListener('mousedown', closeOnOutsidePress, true);\n        const popEscapeLayer = pushEscapeLayer(() => setOpen(false));\n        return () => {\n            document.removeEventListener('mousedown', closeOnOutsidePress, true);\n            popEscapeLayer();\n            pointerInside.current = false;\n            const active = getDeepActiveElement();\n            if (focusInside.current && (!active || active === document.body)) {\n                returningFocus.current = true;\n                triggerRef.current?.focus({ preventScroll: true });\n                returningFocus.current = false;\n            }\n            focusInside.current = false;\n            placedFocus.current = null;\n            heldFocus.current = null;\n        };\n    }, [isOpen, setOpen, ownedSources, pointerInside, focusInside]);\n\n    const shown = isOpen && panel !== null && geometry !== null;\n\n    const placeFocus = useCallback((target: HTMLElement) => {\n        placedFocus.current = target;\n        target.focus({ preventScroll: true });\n    }, []);\n\n    useEffect(() => {\n        const shouldFocus = openOn === 'click' || focusOnOpen.current;\n        if (!shown || !panel || !shouldFocus) {\n            return;\n        }\n        focusOnOpen.current = false;\n        const initial = followsContent\n            ? resolveFocus(initialFocusSource.current)\n            : initialFocusRef?.current;\n        placeFocus(focusTarget(panel, initial));\n    }, [shown, panel, openOn, followsContent, initialFocusRef, initialFocusSource, placeFocus]);\n\n    useEffect(() => {\n        if (!shown || !panel || !followsContent) {\n            return;\n        }\n        const followContent = () => {\n            const active = getDeepActiveElement();\n            if (focusIsLost(active, hostRef.current)) {\n                if (heldFocus.current && !heldFocus.current.isConnected) {\n                    placeFocus(focusTarget(panel, resolveFocus(initialFocusSource.current)));\n                }\n                return;\n            }\n            if (active !== placedFocus.current) {\n                return;\n            }\n            const next =\n                resolveFocus(initialFocusSource.current) ??\n                (active === panel ? firstTabStopIn(panel) : null);\n            if (next && next !== active && next.isConnected) {\n                placeFocus(next);\n            }\n        };\n        const observer = new MutationObserver(followContent);\n        observer.observe(panel, { childList: true, subtree: true });\n        return () => observer.disconnect();\n    }, [shown, panel, followsContent, initialFocusSource, placeFocus]);\n\n    const openWithFocus = () => {\n        cancelClose();\n        if (isOpen && panel) {\n            const initial = followsContent\n                ? resolveFocus(initialFocusSource.current)\n                : initialFocusRef?.current;\n            placeFocus(focusTarget(panel, initial));\n            return;\n        }\n        focusOnOpen.current = true;\n        setOpen(true);\n    };\n\n    const isInside = (node: EventTarget | null): boolean => {\n        const containers = [\n            triggerRef.current,\n            hostRef.current,\n            panel,\n            ...[...ownedSources.current].map((source) => source()),\n        ];\n        return composedPathOf(node).some((step) =>\n            containers.some((container) => container?.contains(step)),\n        );\n    };\n\n    const closeIfFocusLeft = (next: EventTarget | null) => {\n        if (!next) {\n            return;\n        }\n        queueMicrotask(() => {\n            if (!isInside(next) && !isInside(getDeepActiveElement())) {\n                setOpen(false);\n            }\n        });\n    };\n\n    const hoverHandlers =\n        openOn === 'hover'\n            ? {\n                  onMouseEnter: () => {\n                      pointerInside.current = true;\n                      cancelClose();\n                      setOpen(true);\n                  },\n                  onMouseLeave: () => {\n                      pointerInside.current = false;\n                      scheduleClose();\n                  },\n                  onPanelMouseOver: () => {\n                      pointerInside.current = true;\n                      cancelClose();\n                  },\n              }\n            : null;\n\n    const triggerProps = trigger.props as Record<string, unknown>;\n    type Handler<E extends React.SyntheticEvent> = ((event: E) => void) | undefined;\n\n    const ownTriggerRef = elementRef<HTMLElement>(trigger);\n    const composedTriggerRef = useMemo(\n        () => composeRefs(ownTriggerRef, triggerRef),\n        [ownTriggerRef],\n    );\n    const openKey = KEYBOARD_OPEN_KEY[placement.split('-')[0]];\n\n    const clonedTrigger = React.cloneElement(trigger, {\n        ref: composedTriggerRef,\n        'aria-haspopup': role,\n        'aria-expanded': isOpen,\n        onClick: chainHandler(\n            triggerProps.onClick as Handler<React.MouseEvent>,\n            (event: React.MouseEvent) => {\n                if (openOn !== 'hover') {\n                    setOpen(!isOpen);\n                    return;\n                }\n                const fromKeyboard = event.detail === 0;\n                if (fromKeyboard) {\n                    openWithFocus();\n                    return;\n                }\n                cancelClose();\n                setOpen(true);\n            },\n        ),\n        ...(hoverHandlers\n            ? {\n                  onMouseEnter: chainHandler(\n                      triggerProps.onMouseEnter as Handler<React.MouseEvent>,\n                      hoverHandlers.onMouseEnter,\n                  ),\n                  onMouseLeave: chainHandler(\n                      triggerProps.onMouseLeave as Handler<React.MouseEvent>,\n                      hoverHandlers.onMouseLeave,\n                  ),\n                  onMouseDown: chainHandler(\n                      triggerProps.onMouseDown as Handler<React.MouseEvent>,\n                      () => {\n                          pointerPressedTrigger.current = true;\n                          setTimeout(() => {\n                              pointerPressedTrigger.current = false;\n                          });\n                      },\n                  ),\n                  onFocus: chainHandler(triggerProps.onFocus as Handler<React.FocusEvent>, () => {\n                      const fromPointer = pointerPressedTrigger.current;\n                      pointerPressedTrigger.current = false;\n                      triggerFocused.current = !fromPointer && !returningFocus.current;\n                      if (returningFocus.current) {\n                          return;\n                      }\n                      cancelClose();\n                      setOpen(true);\n                  }),\n                  onKeyDown: chainHandler(\n                      triggerProps.onKeyDown as Handler<React.KeyboardEvent>,\n                      (event: React.KeyboardEvent) => {\n                          if (event.key !== openKey) {\n                              return;\n                          }\n                          event.preventDefault();\n                          openWithFocus();\n                      },\n                  ),\n              }\n            : openOnArrowKey\n              ? {\n                    onKeyDown: chainHandler(\n                        triggerProps.onKeyDown as Handler<React.KeyboardEvent>,\n                        (event: React.KeyboardEvent) => {\n                            if (event.key !== openKey || isTextEntry(event.target)) {\n                                return;\n                            }\n                            event.preventDefault();\n                            openWithFocus();\n                        },\n                    ),\n                }\n              : {}),\n        onBlur: chainHandler(\n            triggerProps.onBlur as Handler<React.FocusEvent>,\n            (event: React.FocusEvent) => {\n                triggerFocused.current = false;\n                if (!isOpen || isInside(event.relatedTarget)) {\n                    return;\n                }\n                if (openOn === 'hover') {\n                    scheduleClose();\n                    return;\n                }\n                closeIfFocusLeft(event.relatedTarget);\n            },\n        ),\n    } as Record<string, unknown>);\n\n    const panelStyle: React.CSSProperties = {\n        maxHeight: geometry?.maxHeight,\n        maxWidth: `calc(100vw - ${MENU_VIEWPORT_PADDING_PX * 2}px)`,\n        visibility: geometry ? 'visible' : 'hidden',\n    };\n\n    return (\n        <>\n            {clonedTrigger}\n            {isOpen &&\n                isClient &&\n                createPortal(\n                    <PopoverTreeContext.Provider value={tree}>\n                        <ShadowRootWrapper\n                            hostRef={hostRef}\n                            hostProps={popupIdentity}\n                            hostStyle={{\n                                position: 'fixed',\n                                top: geometry?.top ?? 0,\n                                left: geometry?.left ?? 0,\n                            }}\n                        >\n                            <div\n                                ref={setPanel}\n                                role={role}\n                                aria-label={ariaLabel}\n                                aria-labelledby={ariaLabelledBy}\n                                data-side={geometry?.side}\n                                tabIndex={-1}\n                                className={`${PANEL} ${ELEVATION[elevation]} ${PADDING[padding]} ${className}`.trim()}\n                                style={panelStyle}\n                                // React's mouseenter stops at the shadow host, so the panel listens for mouseover.\n                                onMouseOver={hoverHandlers?.onPanelMouseOver}\n                                onMouseLeave={hoverHandlers?.onMouseLeave}\n                                onFocus={(event) => {\n                                    focusInside.current = true;\n                                    if (event.target !== placedFocus.current) {\n                                        placedFocus.current = null;\n                                    }\n                                    if (\n                                        event.target instanceof HTMLElement &&\n                                        panel?.contains(event.target)\n                                    ) {\n                                        heldFocus.current = event.target;\n                                    }\n                                    cancelClose();\n                                }}\n                                onBlur={(event) => {\n                                    if (isInside(event.relatedTarget)) {\n                                        return;\n                                    }\n                                    if (event.relatedTarget) {\n                                        heldFocus.current = null;\n                                    }\n                                    focusInside.current = false;\n                                    if (openOn === 'hover') {\n                                        scheduleClose();\n                                        return;\n                                    }\n                                    closeIfFocusLeft(event.relatedTarget);\n                                }}\n                            >\n                                <PopoverShownContext.Provider value={shown}>\n                                    {children}\n                                </PopoverShownContext.Provider>\n                            </div>\n                        </ShadowRootWrapper>\n                    </PopoverTreeContext.Provider>,\n                    document.body,\n                )}\n        </>\n    );\n};\n\nexport const Popover = Object.assign(PopoverRoot, {\n    Header: PopoverHeader,\n    Action: PopoverAction,\n    List: PopoverList,\n    Section: PopoverSection,\n    Empty: PopoverEmpty,\n});\n\nexport default Popover;\n"],"names":["PANEL","ELEVATION","PADDING","pathHits","path","nodes","node","KEYBOARD_OPEN_KEY","isTextEntry","target","composedPathOf","root","subscribeToNothing","onClient","onServer","focusTarget","panel","initial","firstTabStopIn","resolveFocus","source","focusIsLost","active","host","PopoverRoot","trigger","children","controlledOpen","defaultOpen","onOpenChange","placement","openOn","width","padding","anchorRef","offset","elevation","initialFocus","initialFocusRef","openOnArrowKey","role","ariaLabel","ariaLabelledBy","className","parent","useContext","PopoverTreeContext","uncontrolledOpen","setUncontrolledOpen","useState","isOpen","isClient","useSyncExternalStore","triggerRef","useRef","hostRef","popupIdentity","usePopupLayer","setPanel","heldByChildren","focusOnOpen","returningFocus","pointerPressedTrigger","placedFocus","heldFocus","isOpenRef","useLatestRef","controlledRef","onOpenChangeRef","initialFocusSource","followsContent","setOpen","useCallback","next","_a","pointerInside","focusInside","triggerFocused","cancelClose","scheduleClose","useHoverClose","tree","ownedSources","usePopoverTree","geometry","usePopoverPosition","useEffect","closeOnOutsidePress","event","popEscapeLayer","pushEscapeLayer","getDeepActiveElement","shown","placeFocus","shouldFocus","followContent","observer","openWithFocus","isInside","containers","step","container","closeIfFocusLeft","hoverHandlers","triggerProps","ownTriggerRef","elementRef","composedTriggerRef","useMemo","composeRefs","openKey","clonedTrigger","React","chainHandler","fromPointer","panelStyle","MENU_VIEWPORT_PADDING_PX","jsxs","Fragment","createPortal","jsx","ShadowRootWrapper","PopoverShownContext","Popover","PopoverHeader","PopoverAction","PopoverList","PopoverSection","PopoverEmpty"],"mappings":";;;;;;;;;;;;;;;;AAgFA,MAAMA,KACF,kRAEEC,KAAwE;AAAA,EAC1E,SAAS;AAAA,EACT,QAAQ;AACZ,GAEMC,KAAoE;AAAA,EACtE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACZ,GAEMC,KAAW,CAACC,GAAqBC,MAAyD;AAC5F,aAAWC,KAAQD;AACf,QAAIC,KAAQF,EAAK,SAASE,CAAI;AAC1B,aAAO;AAGf,SAAO;AACX,GAEMC,KAA4C;AAAA,EAC9C,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM;AACV,GAEMC,KAAc,CAACC,MACjBA,aAAkB,gBACjBA,EAAO,qBAAqB,CAAC,SAAS,YAAY,QAAQ,EAAE,SAASA,EAAO,OAAO,IAElFC,KAAiB,CAACJ,MAAqC;AACzD,MAAI,EAAEA,aAAgB;AAClB,WAAO,CAAA;AAEX,QAAMK,IAAOL,EAAK,YAAA;AAClB,SAAO,CAACA,GAAM,GAAIK,aAAgB,aAAaD,GAAeC,EAAK,IAAI,IAAI,EAAG;AAClF,GAEMC,KAAqB,MAAM,MAAA;AAAA,GAC3BC,KAAW,MAAM,IACjBC,KAAW,MAAM,IAEjBC,IAAc,CAACC,GAAoBC,MACrCA,KAAWC,GAAeF,CAAK,KAAKA,GAElCG,IAAe,CAACC,MAClB,OAAOA,KAAW,aAAaA,EAAA,IAAWA,KAAA,gBAAAA,EAAQ,SAIhDC,KAAc,CAACC,GAA4BC,MAC7C,CAACD,KAAUA,MAAW,SAAS,QAAQ,CAACA,EAAO,eAAeA,MAAWC,GAGvEC,KAAsC,CAAC;AAAA,EACzC,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,aAAAC,KAAc;AAAA,EACd,cAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS;AAAA,EACT,OAAAC,KAAQ;AAAA,EACR,SAAAC,KAAU;AAAA,EACV,WAAAC;AAAA,EACA,QAAAC,KAAS;AAAA,EACT,WAAAC,KAAY;AAAA,EACZ,cAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC,KAAiB;AAAA,EACjB,MAAAC,IAAO;AAAA,EACP,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,WAAAC,KAAY;AAChB,MAAM;AACF,QAAMC,KAASC,GAAWC,EAAkB,GACtC,CAACC,IAAkBC,EAAmB,IAAIC,EAASrB,EAAW,GAC9DsB,IAASvB,KAAkBoB,IAC3BI,KAAWC,GAAqBxC,IAAoBC,IAAUC,EAAQ,GAEtEuC,IAAaC,EAA2B,IAAI,GAC5CC,IAAUD,EAA8B,IAAI,GAC5CE,KAAgBC,GAAc,WAAWP,GAAQK,CAAO,GACxD,CAACvC,GAAO0C,EAAQ,IAAIT,EAAgC,IAAI,GACxDU,IAAiBL,EAAO,CAAC,GACzBM,IAAcN,EAAO,EAAK,GAC1BO,IAAiBP,EAAO,EAAK,GAC7BQ,IAAwBR,EAAO,EAAK,GACpCS,IAAcT,EAA2B,IAAI,GAC7CU,IAAYV,EAA2B,IAAI,GAE3CW,IAAYC,EAAahB,CAAM,GAC/BiB,IAAgBD,EAAavC,CAAc,GAC3CyC,IAAkBF,EAAarC,EAAY,GAC3CwC,IAAqBH,EAAa7B,CAAY,GAC9CiC,IAAiBjC,MAAiB,QAElCkC,IAAUC;AAAA,IACZ,CAACC,MAAkB;;AACf,MAAIA,MAASR,EAAU,YAGnBE,EAAc,YAAY,UAC1BnB,GAAoByB,CAAI,IAE5BC,IAAAN,EAAgB,YAAhB,QAAAM,EAAA,KAAAN,GAA0BK;AAAA,IAC9B;AAAA,IACA,CAACR,GAAWE,GAAeC,CAAe;AAAA,EAAA,GAGxC,EAAE,eAAAO,GAAe,aAAAC,GAAa,gBAAAC,GAAgB,aAAAC,GAAa,eAAAC,EAAA,IAC7DC,GAAc;AAAA,IACV,WAAAf;AAAA,IACA,gBAAAN;AAAA,IACA,SAAAY;AAAA,EAAA,CACH,GAEC,EAAE,MAAAU,IAAM,cAAAC,EAAA,IAAiBC,GAAe;AAAA,IAC1C,QAAAvC;AAAA,IACA,QAAAM;AAAA,IACA,QAAAnB;AAAA,IACA,WAAAkC;AAAA,IACA,gBAAAN;AAAA,IACA,aAAAmB;AAAA,IACA,eAAAC;AAAA,EAAA,CACH,GAEKK,IAAWC,GAAmB;AAAA,IAChC,QAAAnC;AAAA,IACA,OAAAlC;AAAA,IACA,SAAAuC;AAAA,IACA,YAAAF;AAAA,IACA,WAAAnB;AAAA,IACA,WAAAJ;AAAA,IACA,OAAAE;AAAA,IACA,QAAAG;AAAA,EAAA,CACH;AAED,EAAAmD,EAAU,MAAM;AACZ,QAAI,CAACpC;AACD;AAEJ,UAAMqC,IAAsB,CAACC,MAAsB;AAC/C,YAAMpF,IAAOoF,EAAM,aAAA;AAMnB,MALerF,GAASC,GAAM;AAAA,QAC1BiD,EAAW;AAAA,QACXE,EAAQ;AAAA,QACR,GAAG,CAAC,GAAG2B,EAAa,OAAO,EAAE,IAAI,CAAC9D,OAAWA,GAAA,CAAQ;AAAA,MAAA,CACxD,KAEGmD,EAAQ,EAAK;AAAA,IAErB;AACA,aAAS,iBAAiB,aAAagB,GAAqB,EAAI;AAChE,UAAME,IAAiBC,GAAgB,MAAMnB,EAAQ,EAAK,CAAC;AAC3D,WAAO,MAAM;;AACT,eAAS,oBAAoB,aAAagB,GAAqB,EAAI,GACnEE,EAAA,GACAd,EAAc,UAAU;AACxB,YAAMrD,IAASqE,EAAA;AACf,MAAIf,EAAY,YAAY,CAACtD,KAAUA,MAAW,SAAS,UACvDuC,EAAe,UAAU,KACzBa,IAAArB,EAAW,YAAX,QAAAqB,EAAoB,MAAM,EAAE,eAAe,OAC3Cb,EAAe,UAAU,KAE7Be,EAAY,UAAU,IACtBb,EAAY,UAAU,MACtBC,EAAU,UAAU;AAAA,IACxB;AAAA,EACJ,GAAG,CAACd,GAAQqB,GAASW,GAAcP,GAAeC,CAAW,CAAC;AAE9D,QAAMgB,IAAQ1C,KAAUlC,MAAU,QAAQoE,MAAa,MAEjDS,IAAarB,EAAY,CAAC/D,MAAwB;AACpD,IAAAsD,EAAY,UAAUtD,GACtBA,EAAO,MAAM,EAAE,eAAe,GAAA,CAAM;AAAA,EACxC,GAAG,CAAA,CAAE;AAEL,EAAA6E,EAAU,MAAM;AACZ,UAAMQ,IAAc/D,MAAW,WAAW6B,EAAY;AACtD,QAAI,CAACgC,KAAS,CAAC5E,KAAS,CAAC8E;AACrB;AAEJ,IAAAlC,EAAY,UAAU;AACtB,UAAM3C,IAAUqD,IACVnD,EAAakD,EAAmB,OAAO,IACvC/B,KAAA,gBAAAA,EAAiB;AACvB,IAAAuD,EAAW9E,EAAYC,GAAOC,CAAO,CAAC;AAAA,EAC1C,GAAG,CAAC2E,GAAO5E,GAAOe,GAAQuC,GAAgBhC,GAAiB+B,GAAoBwB,CAAU,CAAC,GAE1FP,EAAU,MAAM;AACZ,QAAI,CAACM,KAAS,CAAC5E,KAAS,CAACsD;AACrB;AAEJ,UAAMyB,IAAgB,MAAM;AACxB,YAAMzE,IAASqE,EAAA;AACf,UAAItE,GAAYC,GAAQiC,EAAQ,OAAO,GAAG;AACtC,QAAIS,EAAU,WAAW,CAACA,EAAU,QAAQ,eACxC6B,EAAW9E,EAAYC,GAAOG,EAAakD,EAAmB,OAAO,CAAC,CAAC;AAE3E;AAAA,MACJ;AACA,UAAI/C,MAAWyC,EAAY;AACvB;AAEJ,YAAMU,IACFtD,EAAakD,EAAmB,OAAO,MACtC/C,MAAWN,IAAQE,GAAeF,CAAK,IAAI;AAChD,MAAIyD,KAAQA,MAASnD,KAAUmD,EAAK,eAChCoB,EAAWpB,CAAI;AAAA,IAEvB,GACMuB,IAAW,IAAI,iBAAiBD,CAAa;AACnD,WAAAC,EAAS,QAAQhF,GAAO,EAAE,WAAW,IAAM,SAAS,IAAM,GACnD,MAAMgF,EAAS,WAAA;AAAA,EAC1B,GAAG,CAACJ,GAAO5E,GAAOsD,GAAgBD,GAAoBwB,CAAU,CAAC;AAEjE,QAAMI,IAAgB,MAAM;AAExB,QADAnB,EAAA,GACI5B,KAAUlC,GAAO;AACjB,YAAMC,IAAUqD,IACVnD,EAAakD,EAAmB,OAAO,IACvC/B,KAAA,gBAAAA,EAAiB;AACvB,MAAAuD,EAAW9E,EAAYC,GAAOC,CAAO,CAAC;AACtC;AAAA,IACJ;AACA,IAAA2C,EAAY,UAAU,IACtBW,EAAQ,EAAI;AAAA,EAChB,GAEM2B,IAAW,CAAC5F,MAAsC;AACpD,UAAM6F,IAAa;AAAA,MACf9C,EAAW;AAAA,MACXE,EAAQ;AAAA,MACRvC;AAAA,MACA,GAAG,CAAC,GAAGkE,EAAa,OAAO,EAAE,IAAI,CAAC9D,MAAWA,EAAA,CAAQ;AAAA,IAAA;AAEzD,WAAOV,GAAeJ,CAAI,EAAE;AAAA,MAAK,CAAC8F,MAC9BD,EAAW,KAAK,CAACE,MAAcA,KAAA,gBAAAA,EAAW,SAASD,EAAK;AAAA,IAAA;AAAA,EAEhE,GAEME,IAAmB,CAAC7B,MAA6B;AACnD,IAAKA,KAGL,eAAe,MAAM;AACjB,MAAI,CAACyB,EAASzB,CAAI,KAAK,CAACyB,EAASP,EAAA,CAAsB,KACnDpB,EAAQ,EAAK;AAAA,IAErB,CAAC;AAAA,EACL,GAEMgC,IACFxE,MAAW,UACL;AAAA,IACI,cAAc,MAAM;AAChB,MAAA4C,EAAc,UAAU,IACxBG,EAAA,GACAP,EAAQ,EAAI;AAAA,IAChB;AAAA,IACA,cAAc,MAAM;AAChB,MAAAI,EAAc,UAAU,IACxBI,EAAA;AAAA,IACJ;AAAA,IACA,kBAAkB,MAAM;AACpB,MAAAJ,EAAc,UAAU,IACxBG,EAAA;AAAA,IACJ;AAAA,EAAA,IAEJ,MAEJ0B,IAAe/E,EAAQ,OAGvBgF,IAAgBC,GAAwBjF,CAAO,GAC/CkF,KAAqBC;AAAA,IACvB,MAAMC,GAAYJ,GAAepD,CAAU;AAAA,IAC3C,CAACoD,CAAa;AAAA,EAAA,GAEZK,IAAUvG,GAAkBuB,EAAU,MAAM,GAAG,EAAE,CAAC,CAAC,GAEnDiF,KAAgBC,GAAM,aAAavF,GAAS;AAAA,IAC9C,KAAKkF;AAAA,IACL,iBAAiBnE;AAAA,IACjB,iBAAiBU;AAAA,IACjB,SAAS+D;AAAA,MACLT,EAAa;AAAA,MACb,CAAChB,MAA4B;AACzB,YAAIzD,MAAW,SAAS;AACpB,UAAAwC,EAAQ,CAACrB,CAAM;AACf;AAAA,QACJ;AAEA,YADqBsC,EAAM,WAAW,GACpB;AACd,UAAAS,EAAA;AACA;AAAA,QACJ;AACA,QAAAnB,EAAA,GACAP,EAAQ,EAAI;AAAA,MAChB;AAAA,IAAA;AAAA,IAEJ,GAAIgC,IACE;AAAA,MACI,cAAcU;AAAA,QACVT,EAAa;AAAA,QACbD,EAAc;AAAA,MAAA;AAAA,MAElB,cAAcU;AAAA,QACVT,EAAa;AAAA,QACbD,EAAc;AAAA,MAAA;AAAA,MAElB,aAAaU;AAAA,QACTT,EAAa;AAAA,QACb,MAAM;AACF,UAAA1C,EAAsB,UAAU,IAChC,WAAW,MAAM;AACb,YAAAA,EAAsB,UAAU;AAAA,UACpC,CAAC;AAAA,QACL;AAAA,MAAA;AAAA,MAEJ,SAASmD,EAAaT,EAAa,SAAsC,MAAM;AAC3E,cAAMU,IAAcpD,EAAsB;AAG1C,QAFAA,EAAsB,UAAU,IAChCe,EAAe,UAAU,CAACqC,KAAe,CAACrD,EAAe,SACrD,CAAAA,EAAe,YAGnBiB,EAAA,GACAP,EAAQ,EAAI;AAAA,MAChB,CAAC;AAAA,MACD,WAAW0C;AAAA,QACPT,EAAa;AAAA,QACb,CAAChB,MAA+B;AAC5B,UAAIA,EAAM,QAAQsB,MAGlBtB,EAAM,eAAA,GACNS,EAAA;AAAA,QACJ;AAAA,MAAA;AAAA,IACJ,IAEJ1D,KACE;AAAA,MACI,WAAW0E;AAAA,QACPT,EAAa;AAAA,QACb,CAAChB,MAA+B;AAC5B,UAAIA,EAAM,QAAQsB,KAAWtG,GAAYgF,EAAM,MAAM,MAGrDA,EAAM,eAAA,GACNS,EAAA;AAAA,QACJ;AAAA,MAAA;AAAA,IACJ,IAEJ,CAAA;AAAA,IACR,QAAQgB;AAAA,MACJT,EAAa;AAAA,MACb,CAAChB,MAA4B;AAEzB,YADAX,EAAe,UAAU,IACrB,GAAC3B,KAAUgD,EAASV,EAAM,aAAa,IAG3C;AAAA,cAAIzD,MAAW,SAAS;AACpB,YAAAgD,EAAA;AACA;AAAA,UACJ;AACA,UAAAuB,EAAiBd,EAAM,aAAa;AAAA;AAAA,MACxC;AAAA,IAAA;AAAA,EACJ,CACwB,GAEtB2B,KAAkC;AAAA,IACpC,WAAW/B,KAAA,gBAAAA,EAAU;AAAA,IACrB,UAAU,gBAAgBgC,KAA2B,CAAC;AAAA,IACtD,YAAYhC,IAAW,YAAY;AAAA,EAAA;AAGvC,SACI,gBAAAiC,GAAAC,IAAA,EACK,UAAA;AAAA,IAAAP;AAAA,IACA7D,KACGC,MACAoE;AAAA,MACI,gBAAAC,EAAC1E,GAAmB,UAAnB,EAA4B,OAAOmC,IAChC,UAAA,gBAAAuC;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,SAAAlE;AAAA,UACA,WAAWC;AAAA,UACX,WAAW;AAAA,YACP,UAAU;AAAA,YACV,MAAK4B,KAAA,gBAAAA,EAAU,QAAO;AAAA,YACtB,OAAMA,KAAA,gBAAAA,EAAU,SAAQ;AAAA,UAAA;AAAA,UAG5B,UAAA,gBAAAoC;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,KAAK9D;AAAA,cACL,MAAAlB;AAAA,cACA,cAAYC;AAAA,cACZ,mBAAiBC;AAAA,cACjB,aAAW0C,KAAA,gBAAAA,EAAU;AAAA,cACrB,UAAU;AAAA,cACV,WAAW,GAAGpF,EAAK,IAAIC,GAAUmC,EAAS,CAAC,IAAIlC,GAAQ+B,EAAO,CAAC,IAAIU,EAAS,GAAG,KAAA;AAAA,cAC/E,OAAOwE;AAAA,cAEP,aAAaZ,KAAA,gBAAAA,EAAe;AAAA,cAC5B,cAAcA,KAAA,gBAAAA,EAAe;AAAA,cAC7B,SAAS,CAACf,MAAU;AAChB,gBAAAZ,EAAY,UAAU,IAClBY,EAAM,WAAWzB,EAAY,YAC7BA,EAAY,UAAU,OAGtByB,EAAM,kBAAkB,gBACxBxE,KAAA,QAAAA,EAAO,SAASwE,EAAM,aAEtBxB,EAAU,UAAUwB,EAAM,SAE9BV,EAAA;AAAA,cACJ;AAAA,cACA,QAAQ,CAACU,MAAU;AACf,oBAAI,CAAAU,EAASV,EAAM,aAAa,GAOhC;AAAA,sBAJIA,EAAM,kBACNxB,EAAU,UAAU,OAExBY,EAAY,UAAU,IAClB7C,MAAW,SAAS;AACpB,oBAAAgD,EAAA;AACA;AAAA,kBACJ;AACA,kBAAAuB,EAAiBd,EAAM,aAAa;AAAA;AAAA,cACxC;AAAA,cAEA,4BAACkC,GAAoB,UAApB,EAA6B,OAAO9B,GAChC,UAAAlE,EAAA,CACL;AAAA,YAAA;AAAA,UAAA;AAAA,QACJ;AAAA,MAAA,GAER;AAAA,MACA,SAAS;AAAA,IAAA;AAAA,EACb,GACR;AAER,GAEaiG,KAAU,OAAO,OAAOnG,IAAa;AAAA,EAC9C,QAAQoG;AAAA,EACR,QAAQC;AAAA,EACR,MAAMC;AAAA,EACN,SAASC;AAAA,EACT,OAAOC;AACX,CAAC;"}

package/dist/components/PopoverParts.js

@@ -1,60 +1,90 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import v from "./Tooltip.js";
-import { BORDER as m, NO_SCROLLBAR as f } from "./chromeStyles.js";
-import { FOCUS_RING_INSET as b } from "./focusRing.js";
-import { isPlainClick as h } from "./linkClick.js";
-import { safeHref as u } from "./safeHref.js";
-const w = ({ title: e, action: t }) => /* @__PURE__ */ d(
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { forwardRef as f, useContext as v, useRef as x, useLayoutEffect as b } from "react";
+import h from "./Tooltip.js";
+import { BORDER as m, NO_SCROLLBAR as g } from "./chromeStyles.js";
+import { FOCUS_RING_INSET as T } from "./focusRing.js";
+import { isPlainClick as R } from "./linkClick.js";
+import { PopoverShownContext as w } from "./popoverTree.js";
+import { safeHref as y } from "./safeHref.js";
+const j = ({ title: e, action: t }) => /* @__PURE__ */ u(
   "div",
   {
     className: `flex items-center justify-between border-0 border-b border-solid ${m} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`,
     children: [
-      /* @__PURE__ */ r("span", { children: e }),
+      /* @__PURE__ */ n("span", { children: e }),
       t
     ]
   }
-), O = ({ children: e }) => /* @__PURE__ */ r("div", { className: `flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${f}`, children: e }), g = x(
-  ({ children: e }, t) => /* @__PURE__ */ r("div", { ref: t, className: `border-0 border-t border-solid ${m} p-2`, children: e })
+), N = '[aria-current]:not([aria-current="false"]):not([aria-current=""]), [aria-selected="true"], [role="radio"][aria-checked="true"]', E = ["aria-current", "aria-selected", "aria-checked"], d = (e) => {
+  const t = e.querySelector(N);
+  if (!t)
+    return !1;
+  const o = e.getBoundingClientRect().top + e.clientTop, { top: i, bottom: r } = t.getBoundingClientRect(), a = i - o + e.scrollTop, c = r - o + e.scrollTop;
+  return a < e.scrollTop ? e.scrollTop = a : c > e.scrollTop + e.clientHeight && (e.scrollTop = c - e.clientHeight), !0;
+}, k = ({ children: e, scrollToSelected: t = !1 }) => {
+  const o = v(w), i = x(null);
+  return b(() => {
+    const r = i.current;
+    if (!t || !o || !r || d(r))
+      return;
+    const a = new MutationObserver(() => {
+      d(r) && a.disconnect();
+    });
+    return a.observe(r, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: E
+    }), () => a.disconnect();
+  }, [t, o]), /* @__PURE__ */ n(
+    "div",
+    {
+      ref: i,
+      className: `flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${g}`,
+      children: e
+    }
+  );
+}, S = f(
+  ({ children: e }, t) => /* @__PURE__ */ n("div", { ref: t, className: `border-0 border-t border-solid ${m} p-2`, children: e })
 );
-g.displayName = "Popover.Section";
-const _ = ({ children: e }) => /* @__PURE__ */ r("div", { className: "px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none", children: e }), z = ({
+S.displayName = "Popover.Section";
+const H = ({ children: e }) => /* @__PURE__ */ n("div", { className: "px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none", children: e }), z = ({
   icon: e,
   "aria-label": t,
-  onClick: a,
-  href: p,
-  disabled: o = !1,
-  tooltip: i
+  onClick: o,
+  href: i,
+  disabled: r = !1,
+  tooltip: a
 }) => {
-  const l = o ? void 0 : u(p), n = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${o ? "cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50" : "cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]"} ${b}`, s = l !== void 0 ? /* @__PURE__ */ r(
+  const c = r ? void 0 : y(i), s = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${r ? "cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50" : "cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]"} ${T}`, l = c !== void 0 ? /* @__PURE__ */ n(
     "a",
     {
-      href: l,
+      href: c,
       "aria-label": t,
-      onClick: (c) => {
-        h(c) && a && (c.preventDefault(), a());
+      onClick: (p) => {
+        R(p) && o && (p.preventDefault(), o());
       },
-      className: `no-underline ${n}`,
+      className: `no-underline ${s}`,
       children: e
     }
-  ) : /* @__PURE__ */ r(
+  ) : /* @__PURE__ */ n(
     "button",
     {
       type: "button",
       "aria-label": t,
-      "aria-disabled": o || void 0,
-      onClick: o ? void 0 : a,
-      className: n,
+      "aria-disabled": r || void 0,
+      onClick: r ? void 0 : o,
+      className: s,
       children: e
     }
   );
-  return i ? /* @__PURE__ */ r(v, { text: i, children: s }) : s;
+  return a ? /* @__PURE__ */ n(h, { text: a, children: l }) : l;
 };
 export {
   z as PopoverAction,
-  _ as PopoverEmpty,
-  w as PopoverHeader,
-  O as PopoverList,
-  g as PopoverSection
+  H as PopoverEmpty,
+  j as PopoverHeader,
+  k as PopoverList,
+  S as PopoverSection
 };
 //# sourceMappingURL=PopoverParts.js.map

package/dist/components/PopoverParts.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverParts.js","sources":["../../src/components/PopoverParts.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport Tooltip from './Tooltip';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { isPlainClick } from './linkClick';\nimport { safeHref } from './safeHref';\n\nexport interface PopoverHeaderProps {\n    title: string;\n    action?: React.ReactNode;\n}\n\nexport const PopoverHeader: React.FC<PopoverHeaderProps> = ({ title, action }) => (\n    <div\n        className={`flex items-center justify-between border-0 border-b border-solid ${BORDER} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`}\n    >\n        <span>{title}</span>\n        {action}\n    </div>\n);\n\nexport const PopoverList: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className={`flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${NO_SCROLLBAR}`}>\n        {children}\n    </div>\n);\n\nexport const PopoverSection = forwardRef<HTMLDivElement, { children: React.ReactNode }>(\n    ({ children }, ref) => (\n        <div ref={ref} className={`border-0 border-t border-solid ${BORDER} p-2`}>\n            {children}\n        </div>\n    ),\n);\nPopoverSection.displayName = 'Popover.Section';\n\nexport const PopoverEmpty: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none\">\n        {children}\n    </div>\n);\n\nexport interface PopoverActionProps {\n    icon: React.ReactNode;\n    'aria-label': string;\n    onClick?: () => void;\n    /** Renders a link; a plain click runs `onClick` instead of following it, when one is given. */\n    href?: string;\n    disabled?: boolean;\n    tooltip?: string;\n}\n\nexport const PopoverAction: React.FC<PopoverActionProps> = ({\n    icon,\n    'aria-label': ariaLabel,\n    onClick,\n    href: rawHref,\n    disabled = false,\n    tooltip,\n}) => {\n    const href = disabled ? undefined : safeHref(rawHref);\n    const className = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${disabled ? 'cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50' : `cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]`} ${FOCUS_RING_INSET}`;\n    const button =\n        href !== undefined ? (\n            <a\n                href={href}\n                aria-label={ariaLabel}\n                onClick={(event) => {\n                    if (isPlainClick(event) && onClick) {\n                        event.preventDefault();\n                        onClick();\n                    }\n                }}\n                className={`no-underline ${className}`}\n            >\n                {icon}\n            </a>\n        ) : (\n            <button\n                type=\"button\"\n                aria-label={ariaLabel}\n                aria-disabled={disabled || undefined}\n                onClick={disabled ? undefined : onClick}\n                className={className}\n            >\n                {icon}\n            </button>\n        );\n    return tooltip ? <Tooltip text={tooltip}>{button}</Tooltip> : button;\n};\n"],"names":["PopoverHeader","title","action","jsxs","BORDER","jsx","PopoverList","children","NO_SCROLLBAR","PopoverSection","forwardRef","ref","PopoverEmpty","PopoverAction","icon","ariaLabel","onClick","rawHref","disabled","tooltip","href","safeHref","className","FOCUS_RING_INSET","button","event","isPlainClick","Tooltip"],"mappings":";;;;;;;AAYO,MAAMA,IAA8C,CAAC,EAAE,OAAAC,GAAO,QAAAC,QACjE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,oEAAoEC,CAAM;AAAA,IAErF,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAM,UAAAJ,EAAA,CAAM;AAAA,MACZC;AAAA,IAAA;AAAA,EAAA;AACL,GAGSI,IAAuD,CAAC,EAAE,UAAAC,EAAA,MACnE,gBAAAF,EAAC,OAAA,EAAI,WAAW,wDAAwDG,CAAY,IAC/E,UAAAD,EAAA,CACL,GAGSE,IAAiBC;AAAA,EAC1B,CAAC,EAAE,UAAAH,EAAA,GAAYI,MACX,gBAAAN,EAAC,OAAA,EAAI,KAAAM,GAAU,WAAW,kCAAkCP,CAAM,QAC7D,UAAAG,EAAA,CACL;AAER;AACAE,EAAe,cAAc;AAEtB,MAAMG,IAAwD,CAAC,EAAE,UAAAL,QACpE,gBAAAF,EAAC,OAAA,EAAI,WAAU,kIACV,UAAAE,EAAA,CACL,GAaSM,IAA8C,CAAC;AAAA,EACxD,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,SAAAC;AAAA,EACA,MAAMC;AAAA,EACN,UAAAC,IAAW;AAAA,EACX,SAAAC;AACJ,MAAM;AACF,QAAMC,IAAOF,IAAW,SAAYG,EAASJ,CAAO,GAC9CK,IAAY,0KAA0KJ,IAAW,4FAA4F,2MAA2M,IAAIK,CAAgB,IAC5fC,IACFJ,MAAS,SACL,gBAAAf;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAAe;AAAA,MACA,cAAYL;AAAA,MACZ,SAAS,CAACU,MAAU;AAChB,QAAIC,EAAaD,CAAK,KAAKT,MACvBS,EAAM,eAAA,GACNT,EAAA;AAAA,MAER;AAAA,MACA,WAAW,gBAAgBM,CAAS;AAAA,MAEnC,UAAAR;AAAA,IAAA;AAAA,EAAA,IAGL,gBAAAT;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAYU;AAAA,MACZ,iBAAeG,KAAY;AAAA,MAC3B,SAASA,IAAW,SAAYF;AAAA,MAChC,WAAAM;AAAA,MAEC,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGb,SAAOK,IAAU,gBAAAd,EAACsB,GAAA,EAAQ,MAAMR,GAAU,aAAO,IAAaK;AAClE;"}
+{"version":3,"file":"PopoverParts.js","sources":["../../src/components/PopoverParts.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useLayoutEffect, useRef } from 'react';\nimport Tooltip from './Tooltip';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { isPlainClick } from './linkClick';\nimport { PopoverShownContext } from './popoverTree';\nimport { safeHref } from './safeHref';\n\nexport interface PopoverHeaderProps {\n    title: string;\n    action?: React.ReactNode;\n}\n\nexport const PopoverHeader: React.FC<PopoverHeaderProps> = ({ title, action }) => (\n    <div\n        className={`flex items-center justify-between border-0 border-b border-solid ${BORDER} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`}\n    >\n        <span>{title}</span>\n        {action}\n    </div>\n);\n\nconst SELECTED_ROW =\n    '[aria-current]:not([aria-current=\"false\"]):not([aria-current=\"\"]), [aria-selected=\"true\"], [role=\"radio\"][aria-checked=\"true\"]';\nconst SELECTION_ATTRIBUTES = ['aria-current', 'aria-selected', 'aria-checked'];\n\n// Not `scrollIntoView`: that also scrolls every scrollable ancestor, the page included.\nconst scrollSelectedRowIntoView = (list: HTMLElement): boolean => {\n    const row = list.querySelector<HTMLElement>(SELECTED_ROW);\n    if (!row) {\n        return false;\n    }\n    const listTop = list.getBoundingClientRect().top + list.clientTop;\n    const { top, bottom } = row.getBoundingClientRect();\n    const rowTop = top - listTop + list.scrollTop;\n    const rowBottom = bottom - listTop + list.scrollTop;\n    if (rowTop < list.scrollTop) {\n        list.scrollTop = rowTop;\n    } else if (rowBottom > list.scrollTop + list.clientHeight) {\n        list.scrollTop = rowBottom - list.clientHeight;\n    }\n    return true;\n};\n\nexport interface PopoverListProps {\n    children: React.ReactNode;\n    /**\n     * Scrolls the list to its selected row (`aria-current`, `aria-selected` or a checked radio)\n     * each time the popover is shown, once that row mounts. Only the list scrolls.\n     */\n    scrollToSelected?: boolean;\n}\n\nexport const PopoverList: React.FC<PopoverListProps> = ({ children, scrollToSelected = false }) => {\n    const shown = useContext(PopoverShownContext);\n    const listRef = useRef<HTMLDivElement>(null);\n\n    // Before paint, so a shown panel never draws a frame at the top and then jumps.\n    useLayoutEffect(() => {\n        const list = listRef.current;\n        if (!scrollToSelected || !shown || !list || scrollSelectedRowIntoView(list)) {\n            return;\n        }\n        const observer = new MutationObserver(() => {\n            if (scrollSelectedRowIntoView(list)) {\n                observer.disconnect();\n            }\n        });\n        observer.observe(list, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: SELECTION_ATTRIBUTES,\n        });\n        return () => observer.disconnect();\n    }, [scrollToSelected, shown]);\n\n    return (\n        <div\n            ref={listRef}\n            className={`flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${NO_SCROLLBAR}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport const PopoverSection = forwardRef<HTMLDivElement, { children: React.ReactNode }>(\n    ({ children }, ref) => (\n        <div ref={ref} className={`border-0 border-t border-solid ${BORDER} p-2`}>\n            {children}\n        </div>\n    ),\n);\nPopoverSection.displayName = 'Popover.Section';\n\nexport const PopoverEmpty: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none\">\n        {children}\n    </div>\n);\n\nexport interface PopoverActionProps {\n    icon: React.ReactNode;\n    'aria-label': string;\n    onClick?: () => void;\n    /** Renders a link; a plain click runs `onClick` instead of following it, when one is given. */\n    href?: string;\n    disabled?: boolean;\n    tooltip?: string;\n}\n\nexport const PopoverAction: React.FC<PopoverActionProps> = ({\n    icon,\n    'aria-label': ariaLabel,\n    onClick,\n    href: rawHref,\n    disabled = false,\n    tooltip,\n}) => {\n    const href = disabled ? undefined : safeHref(rawHref);\n    const className = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${disabled ? 'cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50' : `cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]`} ${FOCUS_RING_INSET}`;\n    const button =\n        href !== undefined ? (\n            <a\n                href={href}\n                aria-label={ariaLabel}\n                onClick={(event) => {\n                    if (isPlainClick(event) && onClick) {\n                        event.preventDefault();\n                        onClick();\n                    }\n                }}\n                className={`no-underline ${className}`}\n            >\n                {icon}\n            </a>\n        ) : (\n            <button\n                type=\"button\"\n                aria-label={ariaLabel}\n                aria-disabled={disabled || undefined}\n                onClick={disabled ? undefined : onClick}\n                className={className}\n            >\n                {icon}\n            </button>\n        );\n    return tooltip ? <Tooltip text={tooltip}>{button}</Tooltip> : button;\n};\n"],"names":["PopoverHeader","title","action","jsxs","BORDER","jsx","SELECTED_ROW","SELECTION_ATTRIBUTES","scrollSelectedRowIntoView","list","row","listTop","top","bottom","rowTop","rowBottom","PopoverList","children","scrollToSelected","shown","useContext","PopoverShownContext","listRef","useRef","useLayoutEffect","observer","NO_SCROLLBAR","PopoverSection","forwardRef","ref","PopoverEmpty","PopoverAction","icon","ariaLabel","onClick","rawHref","disabled","tooltip","href","safeHref","className","FOCUS_RING_INSET","button","event","isPlainClick","Tooltip"],"mappings":"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"}

package/dist/components/popoverTree.js

@@ -1,14 +1,15 @@
-import { useContext as r, useLayoutEffect as n, createContext as s } from "react";
-const f = 150, u = s(null), p = (t, o) => {
+import { useContext as r, useLayoutEffect as s, createContext as n } from "react";
+const f = 150, u = n(null), p = n(!1), x = (t, o) => {
   const e = r(u);
-  n(() => {
+  s(() => {
     if (!(!o || !e))
       return e.register(t);
   }, [o, e, t]);
 };
 export {
   f as HOVER_CLOSE_DELAY_MS,
+  p as PopoverShownContext,
   u as PopoverTreeContext,
-  p as useOwnedByPopover
+  x as useOwnedByPopover
 };
 //# sourceMappingURL=popoverTree.js.map

package/dist/components/popoverTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"popoverTree.js","sources":["../../src/components/popoverTree.ts"],"sourcesContent":["import { createContext, useContext, useLayoutEffect } from 'react';\n\nexport type OverlaySource = () => HTMLElement | null;\n\nexport interface PopoverTree {\n    register: (source: OverlaySource) => () => void;\n    hold: () => () => void;\n}\n\nexport const HOVER_CLOSE_DELAY_MS = 150;\n\nexport const PopoverTreeContext = createContext<PopoverTree | null>(null);\n\nexport const useOwnedByPopover = (source: OverlaySource, active: boolean): void => {\n    const tree = useContext(PopoverTreeContext);\n    useLayoutEffect(() => {\n        if (!active || !tree) {\n            return;\n        }\n        return tree.register(source);\n    }, [active, tree, source]);\n};\n"],"names":["HOVER_CLOSE_DELAY_MS","PopoverTreeContext","createContext","useOwnedByPopover","source","active","tree","useContext","useLayoutEffect"],"mappings":";AASO,MAAMA,IAAuB,KAEvBC,IAAqBC,EAAkC,IAAI,GAE3DC,IAAoB,CAACC,GAAuBC,MAA0B;AAC/E,QAAMC,IAAOC,EAAWN,CAAkB;AAC1C,EAAAO,EAAgB,MAAM;AAClB,QAAI,GAACH,KAAU,CAACC;AAGhB,aAAOA,EAAK,SAASF,CAAM;AAAA,EAC/B,GAAG,CAACC,GAAQC,GAAMF,CAAM,CAAC;AAC7B;"}
+{"version":3,"file":"popoverTree.js","sources":["../../src/components/popoverTree.ts"],"sourcesContent":["import { createContext, useContext, useLayoutEffect } from 'react';\n\nexport type OverlaySource = () => HTMLElement | null;\n\nexport interface PopoverTree {\n    register: (source: OverlaySource) => () => void;\n    hold: () => () => void;\n}\n\nexport const HOVER_CLOSE_DELAY_MS = 150;\n\nexport const PopoverTreeContext = createContext<PopoverTree | null>(null);\n\nexport const PopoverShownContext = createContext(false);\n\nexport const useOwnedByPopover = (source: OverlaySource, active: boolean): void => {\n    const tree = useContext(PopoverTreeContext);\n    useLayoutEffect(() => {\n        if (!active || !tree) {\n            return;\n        }\n        return tree.register(source);\n    }, [active, tree, source]);\n};\n"],"names":["HOVER_CLOSE_DELAY_MS","PopoverTreeContext","createContext","PopoverShownContext","useOwnedByPopover","source","active","tree","useContext","useLayoutEffect"],"mappings":";AASO,MAAMA,IAAuB,KAEvBC,IAAqBC,EAAkC,IAAI,GAE3DC,IAAsBD,EAAc,EAAK,GAEzCE,IAAoB,CAACC,GAAuBC,MAA0B;AAC/E,QAAMC,IAAOC,EAAWP,CAAkB;AAC1C,EAAAQ,EAAgB,MAAM;AAClB,QAAI,GAACH,KAAU,CAACC;AAGhB,aAAOA,EAAK,SAASF,CAAM;AAAA,EAC/B,GAAG,CAACC,GAAQC,GAAMF,CAAM,CAAC;AAC7B;"}

package/dist/index.d.ts

@@ -3943,9 +3943,7 @@ export declare const PlusIcon: React.FC<IconProps_85>;
 export declare const Popover: default_2.FC<PopoverProps> & {
     Header: default_2.FC< PopoverHeaderProps>;
     Action: default_2.FC< PopoverActionProps>;
-    List: default_2.FC<{
-        children: default_2.ReactNode;
-    }>;
+    List: default_2.FC< PopoverListProps>;
     Section: default_2.ForwardRefExoticComponent<{
         children: default_2.ReactNode;
     } & default_2.RefAttributes<HTMLDivElement>>;
@@ -3977,18 +3975,41 @@ declare interface PopoverBaseProps {
     anchorRef?: default_2.RefObject<HTMLElement | null>;
     offset?: FloatingOffset;
     elevation?: 'default' | 'raised';
-    initialFocusRef?: default_2.RefObject<HTMLElement | null>;
     /** A click panel also opens, focus inside, on the arrow key its placement points at. */
     openOnArrowKey?: boolean;
     role?: 'dialog' | 'menu' | 'listbox';
     className?: string;
 }
 
+declare type PopoverFocusSource = {
+    /**
+     * What takes focus when the panel is shown, in place of its first tab stop. Re-read as the
+     * content changes, so focus follows late content but never leaves where the user moved it.
+     */
+    initialFocus?: PopoverInitialFocus;
+    initialFocusRef?: never;
+} | {
+    initialFocus?: never;
+    /** @deprecated Use `initialFocus`, which takes the same ref and also follows late content. */
+    initialFocusRef?: default_2.RefObject<HTMLElement | null>;
+};
+
 export declare interface PopoverHeaderProps {
     title: string;
     action?: default_2.ReactNode;
 }
 
+export declare type PopoverInitialFocus = default_2.RefObject<HTMLElement | null> | (() => HTMLElement | null | undefined);
+
+export declare interface PopoverListProps {
+    children: default_2.ReactNode;
+    /**
+     * Scrolls the list to its selected row (`aria-current`, `aria-selected` or a checked radio)
+     * each time the popover is shown, once that row mounts. Only the list scrolls.
+     */
+    scrollToSelected?: boolean;
+}
+
 declare type PopoverName = {
     'aria-label': string;
     'aria-labelledby'?: string;
@@ -3999,7 +4020,7 @@ declare type PopoverName = {
 
 export declare type PopoverPlacement = FloatingPlacement;
 
-export declare type PopoverProps = PopoverBaseProps & PopoverName;
+export declare type PopoverProps = PopoverBaseProps & PopoverName & PopoverFocusSource;
 
 export declare const PreviewIcon: React.FC<IconProps_86>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackone/malachite",
-  "version": "2.66.0",
+  "version": "2.67.0",
   "description": "StackOne's themeable React component library — Shadow DOM isolated, scoped Tailwind, theme-token driven.",
   "license": "MIT",
   "author": "StackOne",