asma-ui-core 3.103.1 → 3.105.0

package/dist/components/navigation/menu/StyledMenuList.js

@@ -1,60 +1,74 @@
-import { cn as S } from "../../../helpers/cn.js";
-import { consumerOverrides as v } from "../../../helpers/classOverride.js";
-import L from "./StyledMenu.module.js";
-import { useEffect as I, useLayoutEffect as M, useRef as R } from "react";
-import { jsx as d } from "react/jsx-runtime";
-var p = '[role="menu"], [role="listbox"]', u = '[role="menuitem"]', b = (o) => Array.from(o.childNodes).flatMap((r) => r instanceof HTMLElement ? r.hidden ? [] : r.matches(p) ? [null] : r.matches(u) ? [r] : r.querySelector(u) ? b(r) : [null] : r.textContent?.trim() ? [null] : []), y = (o) => o ? Array.from(o.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')) : [], H = ({ children: o, id: r, role: h = "menu", className: a, autoFocus: f, disablePadding: E, onClick: A, onKeyDown: w }) => {
-  const i = R(null), c = v(a, "padding");
-  M(() => {
+import { cn as R } from "../../../helpers/cn.js";
+import { consumerOverrides as T } from "../../../helpers/classOverride.js";
+import p from "./StyledMenu.module.js";
+import { useEffect as M, useLayoutEffect as k, useRef as q } from "react";
+import { jsx as A } from "react/jsx-runtime";
+var d = '[role="menu"], [role="listbox"]', y = '[role="menuitem"]', E = (r) => Array.from(r.childNodes).flatMap((t) => t instanceof HTMLElement ? t.hidden ? [] : t.matches(d) ? [null] : t.matches(y) ? [t] : t.querySelector(y) ? E(t) : [null] : t.textContent?.trim() ? [null] : []), h = (r) => r ? Array.from(r.querySelectorAll('[role="menuitem"]')) : [], v = (r) => h(r).filter((t) => t.getAttribute("aria-disabled") !== "true"), x = (r, t) => {
+  const u = h(r).filter((o) => o.closest(d) === r), m = (t && u.includes(t) ? t : void 0) ?? u.find((o) => o.tabIndex === 0) ?? v(r).find((o) => o.closest(d) === r) ?? u[0];
+  u.forEach((o) => {
+    o.tabIndex = o === m ? 0 : -1;
+  });
+}, _ = ({ children: r, id: t, role: u = "menu", className: m, autoFocus: o, disablePadding: w, onClick: I, onKeyDown: L }) => {
+  const i = q(null), b = T(m, "padding");
+  k(() => {
     const e = i.current;
     if (!e) return;
-    const t = () => {
-      const n = b(e);
-      Array.from(e.querySelectorAll(u)).filter((l) => l.closest(p) === e).forEach((l) => l.removeAttribute("data-menu-separator")), n.forEach((l, g) => l?.toggleAttribute("data-menu-separator", !!n[g + 1]));
+    const n = () => {
+      const a = E(e);
+      if (Array.from(e.querySelectorAll(y)).filter((l) => l.closest(d) === e).forEach((l) => l.removeAttribute("data-menu-separator")), a.forEach((l, f) => l?.toggleAttribute("data-menu-separator", !!a[f + 1])), e.classList.contains(p.anchoredList)) {
+        const l = (a.every(Boolean) ? a[7] : null)?.getBoundingClientRect(), f = l && l.height > 0 ? l.top - e.getBoundingClientRect().top + e.scrollTop + l.height / 2 : null;
+        e.style.maxHeight = f === null ? "" : `${f}px`, e.toggleAttribute("data-menu-scroll", f !== null);
+      }
+      x(e);
     };
-    t();
-    const s = new MutationObserver(t);
+    n();
+    const c = requestAnimationFrame(n), s = new MutationObserver(n);
     return s.observe(e, {
       childList: !0,
       subtree: !0,
       attributes: !0,
       attributeFilter: ["hidden"]
-    }), () => s.disconnect();
-  }, []), I(() => {
-    f && y(i.current)[0]?.focus();
-  }, [f]);
-  const x = (e) => {
-    if (w?.(e), ![
+    }), () => {
+      cancelAnimationFrame(c), s.disconnect();
+    };
+  }, []), M(() => {
+    o && (v(i.current)[0] ?? h(i.current)[0])?.focus();
+  }, [o]);
+  const S = (e) => {
+    if (L?.(e), ![
       "ArrowDown",
       "ArrowUp",
       "Home",
       "End"
     ].includes(e.key)) return;
     e.preventDefault();
-    const t = y(i.current);
-    if (t.length === 0) return;
-    const s = t.findIndex((l) => l === document.activeElement);
-    let n = s;
-    e.key === "ArrowDown" ? n = (s + 1) % t.length : e.key === "ArrowUp" ? n = (s - 1 + t.length) % t.length : e.key === "Home" ? n = 0 : e.key === "End" && (n = t.length - 1), t[n]?.focus();
-  }, m = {
-    id: r,
-    className: S(L.list, "m-0 list-none outline-none", !c && "px-0", !c && (E ? "py-0" : "py-2"), a),
+    const n = h(i.current);
+    if (n.length === 0) return;
+    const c = n.findIndex((a) => a === document.activeElement);
+    let s = c;
+    e.key === "ArrowDown" ? s = (c + 1) % n.length : e.key === "ArrowUp" ? s = (c - 1 + n.length) % n.length : e.key === "Home" ? s = 0 : e.key === "End" && (s = n.length - 1), n[s]?.focus(), i.current?.hasAttribute("data-menu-scroll") && n[s]?.scrollIntoView({ block: "nearest" });
+  }, g = {
+    id: t,
+    className: R(p.list, "m-0 list-none outline-none", !b && "px-0", !b && (w ? "py-0" : "py-2"), m),
     style: { fontFamily: "Roboto, Helvetica, Arial, sans-serif" },
-    onClick: A,
-    onKeyDown: x
+    onClick: I,
+    onKeyDown: S,
+    onFocus: (e) => {
+      i.current && e.target instanceof HTMLElement && x(i.current, e.target);
+    }
   };
-  return h === "listbox" ? /* @__PURE__ */ d("ul", {
+  return u === "listbox" ? /* @__PURE__ */ A("ul", {
     ref: i,
-    ...m,
+    ...g,
     role: "listbox",
-    children: o
-  }) : /* @__PURE__ */ d("ul", {
+    children: r
+  }) : /* @__PURE__ */ A("ul", {
     ref: i,
-    ...m,
+    ...g,
     role: "menu",
-    children: o
+    children: r
   });
 };
 export {
-  H as StyledMenuList
+  _ as StyledMenuList
 };

package/dist/components/navigation/tabs/StyledTab.js

@@ -1,30 +1,39 @@
-import { cn as f } from "../../../helpers/cn.js";
-import { resolveSx as x } from "../../../helpers/sx.js";
-import { useTabsContext as u } from "./TabsContext.js";
-import { useCallback as h } from "react";
-import { jsx as d } from "react/jsx-runtime";
-var k = ({ value: a, label: i, disabled: e, className: s, sx: l, index: m }) => {
-  const t = u(), o = a !== void 0 ? a : m, r = t ? t.value === o : !1, c = /\btext-(?:xs|sm|base|lg|xl|\[)/.test(s ?? ""), p = /\bfont-(?:thin|extralight|light|normal|medium|semibold|bold|extrabold|black)\b/.test(s ?? ""), b = /\b(?:uppercase|lowercase|capitalize|normal-case)\b/.test(s ?? "");
-  return /* @__PURE__ */ d("button", {
-    ref: h((n) => {
-      t?.register(o, n);
-    }, [t, o]),
+import { cn as g } from "../../../helpers/cn.js";
+import { resolveSx as v } from "../../../helpers/sx.js";
+import { StyledTooltip as y } from "../../data-display/tooltip/StyledTooltip.js";
+import { useTabsContext as _ } from "./TabsContext.js";
+import { useCallback as w, useId as S } from "react";
+import { Fragment as T, jsx as i, jsxs as k } from "react/jsx-runtime";
+var A = ({ value: l, label: d, disabled: o, tooltip: s, className: n, sx: b, index: f }) => {
+  const e = _(), p = S(), c = s ? `${p}-reason` : void 0, t = l !== void 0 ? l : f, r = e ? e.value === t : !1, x = /\btext-(?:xs|sm|base|lg|xl|\[)/.test(n ?? ""), u = /\bfont-(?:thin|extralight|light|normal|medium|semibold|bold|extrabold|black)\b/.test(n ?? ""), h = /\b(?:uppercase|lowercase|capitalize|normal-case)\b/.test(n ?? ""), m = /* @__PURE__ */ i("button", {
+    ref: w((a) => {
+      e?.register(t, a);
+    }, [e, t]),
     type: "button",
     role: "tab",
     "aria-selected": r,
-    "aria-disabled": e ? !0 : void 0,
-    disabled: e,
+    "aria-disabled": o ? !0 : void 0,
+    "aria-describedby": c,
     tabIndex: r ? 0 : -1,
-    "data-tab-value": typeof o == "string" || typeof o == "number" ? String(o) : void 0,
-    onClick: (n) => !e && t?.onSelect(n, o),
-    className: f("inline-flex min-h-12 min-w-[90px] shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-t-lg border-0 bg-transparent px-4 py-3 tracking-normal outline-none transition-colors", !c && (t?.size === "small" ? "text-base" : "text-lg"), !p && (t?.size === "small" || r || e ? "font-semibold" : "font-medium hover:font-semibold focus-visible:font-semibold"), !b && "normal-case", t?.size === "small" && "min-h-10 px-3 py-2", "asma-pressable", e ? "text-delta-300" : r ? "text-gama-500" : "text-delta-600", !e && "cursor-pointer", "focus-visible:shadow-[inset_0_0_0_3px_var(--colors-focus-ring)]", !e && !r && "hover:shadow-[inset_0_-3px_0_0_var(--colors-delta-300)]", s),
+    "data-tab-value": typeof t == "string" || typeof t == "number" ? String(t) : void 0,
+    onClick: (a) => !o && e?.onSelect(a, t),
+    className: g("inline-flex min-h-12 min-w-[90px] shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-t-lg border-0 bg-transparent px-4 py-3 tracking-normal outline-none transition-colors", !x && (e?.size === "small" ? "text-base" : "text-lg"), !u && (e?.size === "small" || r || o ? "font-semibold" : "font-medium hover:font-semibold focus-visible:font-semibold"), !h && "normal-case", e?.size === "small" && "min-h-10 px-3 py-2", "asma-pressable", o ? "text-delta-300" : r ? "text-gama-500" : "text-delta-600", o ? "cursor-not-allowed" : "cursor-pointer", "focus-visible:shadow-[inset_0_0_0_3px_var(--colors-focus-ring)]", !o && !r && "hover:shadow-[inset_0_-3px_0_0_var(--colors-delta-300)]", n),
     style: {
       fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-      ...x(l)
+      ...v(b)
     },
-    children: i
+    children: d
   });
+  return s ? /* @__PURE__ */ i(y, {
+    title: s,
+    arrow: !0,
+    children: /* @__PURE__ */ k(T, { children: [m, /* @__PURE__ */ i("span", {
+      id: c,
+      hidden: !0,
+      children: s
+    })] })
+  }) : m;
 };
 export {
-  k as StyledTab
+  A as StyledTab
 };

package/dist/components/navigation/tabs/StyledTabs.js

@@ -1,4 +1,4 @@
-import { cn as n } from "../../../helpers/cn.js";
+import { cn as s } from "../../../helpers/cn.js";
 import { resolveSx as K } from "../../../helpers/sx.js";
 import { ChevronRightIcon as M } from "../../icons/chevron-right-icon/ChevronRightIcon.js";
 import { ChevronLeftIcon as V } from "../../icons/chevron-left-icon/ChevronLeftIcon.js";
@@ -6,39 +6,39 @@ import { consumerOverrides as q } from "../../../helpers/classOverride.js";
 import { TabsContext as z } from "./TabsContext.js";
 import { Children as F, cloneElement as G, isValidElement as J, useCallback as b, useLayoutEffect as Q, useMemo as U, useRef as E, useState as A } from "react";
 import { jsx as l, jsxs as B } from "react/jsx-runtime";
-var I = 120, le = ({ value: i, onChange: m, variant: g = "standard", scrollButtons: w = "auto", centered: j, size: h = "default", className: p, sx: N, children: x }) => {
-  const a = E(null), c = E(/* @__PURE__ */ new Map()), [u, O] = A({
+var I = 120, le = ({ value: n, onChange: m, variant: g = "standard", scrollButtons: w = "auto", centered: j, size: f = "default", className: p, sx: N, children: x }) => {
+  const i = E(null), a = E(/* @__PURE__ */ new Map()), [h, O] = A({
     left: 0,
     width: 0,
     disabled: !1
-  }), [d, W] = A({
+  }), [c, W] = A({
     left: !1,
     right: !1
   }), y = g === "scrollable", v = b((e, t) => {
-    t ? c.current.set(e, t) : c.current.delete(e);
-  }, []), S = b((e, t) => m?.(e, t), [m]), f = b(() => {
-    const e = c.current.get(i), t = a.current;
+    t ? a.current.set(e, t) : a.current.delete(e);
+  }, []), S = b((e, t) => m?.(e, t), [m]), d = b(() => {
+    const e = a.current.get(n), t = i.current;
     if (e && O({
       left: e.offsetLeft,
       width: e.offsetWidth,
       disabled: e.disabled || e.getAttribute("aria-disabled") === "true"
     }), t) {
-      const { scrollLeft: o, scrollWidth: r, clientWidth: s } = t;
+      const { scrollLeft: o, scrollWidth: r, clientWidth: u } = t;
       W({
         left: o > 1,
-        right: o + s < r - 1
+        right: o + u < r - 1
       });
     }
-  }, [i]);
+  }, [n]);
   Q(() => {
-    f();
-    const e = a.current;
+    d();
+    const e = i.current;
     if (!e) return;
-    const t = new ResizeObserver(f);
+    const t = new ResizeObserver(d);
     return t.observe(e), () => t.disconnect();
-  }, [f, x]);
+  }, [d, x]);
   const k = (e) => {
-    a.current?.scrollBy({
+    i.current?.scrollBy({
       left: e,
       behavior: "smooth"
     });
@@ -50,33 +50,33 @@ var I = 120, le = ({ value: i, onChange: m, variant: g = "standard", scrollButto
       "End"
     ].includes(e.key)) return;
     e.preventDefault();
-    const t = Array.from(c.current.values()).filter((s) => !s.disabled);
+    const t = Array.from(a.current.values());
     if (t.length === 0) return;
-    const o = t.findIndex((s) => s === document.activeElement);
+    const o = t.findIndex((u) => u === document.activeElement);
     let r = o;
     e.key === "ArrowRight" ? r = (o + 1) % t.length : e.key === "ArrowLeft" ? r = (o - 1 + t.length) % t.length : e.key === "Home" ? r = 0 : e.key === "End" && (r = t.length - 1), t[r]?.focus();
-  }, L = y && w !== !1, R = w === !0, D = L && (R || d.left), P = L && (R || d.right), T = q(p, "padding-x"), H = U(() => ({
-    value: i,
-    size: h,
+  }, L = y && w !== !1, R = w === !0, D = L && (R || c.left), P = L && (R || c.right), T = q(p, "padding-x"), H = U(() => ({
+    value: n,
+    size: f,
     onSelect: S,
     register: v
   }), [
-    i,
-    h,
+    n,
+    f,
     S,
     v
   ]), C = "flex h-10 w-10 shrink-0 items-center justify-center self-center rounded-[10%] border border-solid border-delta-500 text-delta-700 transition-colors hover:bg-gama-50 disabled:invisible";
   return /* @__PURE__ */ l(z.Provider, {
     value: H,
     children: /* @__PURE__ */ B("div", {
-      className: n("relative flex items-center rounded-t-lg bg-white", !T && "px-4", p),
+      className: s("relative flex items-center rounded-t-lg bg-white", !T && "px-4", p),
       style: K(N),
       children: [
         D && /* @__PURE__ */ l("button", {
           type: "button",
           "aria-label": "scroll tabs left",
-          className: n(C, "mr-2"),
-          disabled: !d.left,
+          className: s(C, "mr-2"),
+          disabled: !c.left,
           onClick: () => k(-I),
           children: /* @__PURE__ */ l(V, {
             width: 24,
@@ -84,26 +84,26 @@ var I = 120, le = ({ value: i, onChange: m, variant: g = "standard", scrollButto
           })
         }),
         /* @__PURE__ */ B("div", {
-          ref: a,
+          ref: i,
           role: "tablist",
           "aria-orientation": "horizontal",
           onKeyDown: _,
-          onScroll: f,
-          className: n("relative flex bg-[linear-gradient(to_top,var(--colors-delta-200)_1px,transparent_1px)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", y ? "flex-1 overflow-x-auto" : "w-full", g === "fullWidth" && "[&>*]:flex-1", j && "justify-center", h === "small" && "min-h-9"),
+          onScroll: d,
+          className: s("relative flex bg-[linear-gradient(to_top,var(--colors-delta-200)_1px,transparent_1px)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", y ? "flex-1 overflow-x-auto" : "w-full", g === "fullWidth" && "[&>*]:flex-1", j && "justify-center", f === "small" && "min-h-9"),
           children: [F.map(x, (e, t) => J(e) ? G(e, { index: t }) : e), /* @__PURE__ */ l("span", {
             "aria-hidden": !0,
-            className: n("absolute bottom-0 h-[3px] transition-all duration-300", u.disabled ? "bg-delta-300" : "bg-gama-500"),
+            className: s("absolute bottom-0 h-[3px] transition-all duration-300", h.disabled ? "bg-delta-300" : "bg-gama-500"),
             style: {
-              left: u.left,
-              width: u.width
+              left: h.left,
+              width: h.width
             }
           })]
         }),
         P && /* @__PURE__ */ l("button", {
           type: "button",
           "aria-label": "scroll tabs right",
-          className: n(C, "ml-2"),
-          disabled: !d.right,
+          className: s(C, "ml-2"),
+          disabled: !c.right,
           onClick: () => k(I),
           children: /* @__PURE__ */ l(M, {
             width: 24,

package/dist/helpers/focusable.js

@@ -1,5 +1,6 @@
-var a = (r) => r.tabIndex >= 0 && !r.matches(":disabled") && !r.closest("[inert]") && (r.checkVisibility?.() ?? !0), b = (r) => Array.from(r.querySelectorAll("*")).filter(a), i = (r) => a(r) ? r : Array.from(r.querySelectorAll("*")).find(a) ?? null;
+var a = (r) => r.tabIndex >= 0 && !r.matches(":disabled") && !r.closest("[inert]") && (r.checkVisibility?.() ?? !0), b = (r) => Array.from(r.querySelectorAll("*")).filter(a), l = (r) => a(r) ? r : Array.from(r.querySelectorAll("*")).find(a) ?? null, i = (r) => (r.tabIndex >= 0 || r.hasAttribute("tabindex")) && !r.matches(":disabled") && !r.closest("[inert]") && (r.checkVisibility?.() ?? !0), s = (r) => i(r) ? r : Array.from(r.querySelectorAll("*")).find(i) ?? null;
 export {
-  i as firstTabbable,
+  s as firstFocusable,
+  l as firstTabbable,
   b as tabbableWithin
 };

package/dist/helpers/warnUnnamedDialog.js

@@ -0,0 +1,6 @@
+function a(e) {
+  typeof process < "u" && process.env.NODE_ENV === "production" || console.warn(`[asma-ui-core/StyledDialog] "${e ?? "dialog"}" has no accessible name — pass dialogTitle, dialogLabel or ariaLabel, or render a heading in its content`);
+}
+export {
+  a as warnUnnamedDialog
+};

package/dist/src/components/feedback/dialog/StyledDialog.d.ts

@@ -55,9 +55,17 @@ export interface IStyledDialogProps {
     dialogLabel?: ReactNode;
     /** @figmaProp header Title (Page title 24 SemiBold, delta-800) */
     dialogTitle?: ReactNode;
-    /** Accessible name when the dialog has no visible title. */
-    ariaLabel?: string;
     dialogHeaderNode?: ReactNode;
+    /**
+     * @figmaProp none — accessibility
+     * The dialog's accessible name when it shows no visible title: neither `dialogTitle`, a
+     * `<StyledDialogTitle>` child nor `dialogLabel`. A visible title or label always wins: the dialog
+     * is `aria-labelledby` it. Without any of these, the dialog is named by the first heading
+     * (`h1`–`h6` or `role="heading"`) in its content; with no heading either it stays unnamed and a
+     * development-only warning names its `dataTest`. `dataTest` is never used as a name — it is a
+     * test hook, not text.
+     */
+    ariaLabel?: string;
 }
 /**
  * Modal dialog built on the native `<dialog>` element (replaces MUI `Dialog`) — backdrop, focus

package/dist/src/components/feedback/dialog/dialog-footer/StyledDialogFooter.d.ts

@@ -6,6 +6,7 @@ import { ToolbarLocale } from '../../../custom/module/header-layout/useTranslati
 export interface StyledDialogFooterButton {
     label: string;
     onClick?: () => void;
+    /** Rendered as `aria-disabled`, not native `disabled`: the button stays focusable, so keyboard users reach its `tooltip`. A click does nothing. */
     disabled?: boolean;
     /** `submit` lets the footer drive the surrounding `<form>` without a click handler. */
     type?: 'button' | 'submit' | 'reset';
@@ -17,7 +18,8 @@ export interface StyledDialogFooterButton {
     /** Trailing icon. `loading` supplies its own and wins. */
     endIcon?: ReactNode;
     /**
-     * Shows a spinner after the label and disables the button. Consumers previously swapped
+     * Shows a spinner after the label and makes the button busy (`aria-busy`, `aria-disabled`): it
+     * keeps focus and ignores further presses. Consumers previously swapped
      * the label *for* a spinner, which changes the button's width mid-submit — hence the
      * hard-coded `w-[98px]` workarounds in the footers this replaces. Keeping the label
      * makes the width stable on its own.
@@ -25,8 +27,8 @@ export interface StyledDialogFooterButton {
     loading?: boolean;
     /**
      * Wraps the button in a `StyledTooltip`. Falsy renders no tooltip, so the common
-     * `tooltip={disabled && 'Locked for editing'}` reads naturally. A disabled button does
-     * not emit pointer events, so the tooltip is anchored on a wrapper around it.
+     * `tooltip={disabled && 'Locked for editing'}` reads naturally. It opens on hover and on
+     * keyboard focus, since a disabled button stays focusable.
      */
     tooltip?: ReactNode;
     dataTest?: string;

package/dist/src/components/navigation/menu/StyledMenuList.d.ts

@@ -13,6 +13,7 @@ export interface StyledMenuListProps {
 }
 /**
  * Keyboard-navigable `role="menu"` list (replaces MUI `MenuList`). Arrow-key / Home / End roving
- * focus over enabled `[role="menuitem"]` children. TASK-303.
+ * focus over every `[role="menuitem"]` child, disabled ones included; opening focuses the first
+ * enabled item. TASK-303.
  */
 export declare const StyledMenuList: ({ children, id, role, className, autoFocus, disablePadding, onClick, onKeyDown, }: StyledMenuListProps) => JSX.Element;

package/dist/src/components/navigation/tabs/StyledTab.d.ts

@@ -12,8 +12,18 @@ export interface StyledTabProps {
     value?: TabValue;
     /** @figmaProp Label (tab content; may include a leading icon) */
     label?: ReactNode;
-    /** @figmaProp State = true→"Disabled" */
+    /**
+     * @figmaProp State = true→"Disabled". Rendered as `aria-disabled`, not native `disabled`: the tab
+     * stays in the arrow-key order so keyboard users can find it (disabled-states DIS-3); a click or
+     * Enter does not select it.
+     */
     disabled?: boolean;
+    /**
+     * @figmaProp none — a11y
+     * Tooltip on the tab, opened by hover and keyboard focus and read as the tab's description —
+     * typically why a `disabled` tab is unavailable (disabled-states DIS-1, DIS-2). Falsy renders none.
+     */
+    tooltip?: ReactNode;
     className?: string;
     sx?: unknown;
     /** @internal Injected by `StyledTabs` so a value-less tab selects by position (MUI parity). */

package/dist/src/helpers/focusable.d.ts

@@ -6,3 +6,4 @@ export declare const tabbableWithin: (root: ParentNode) => HTMLElement[];
  * disabled control, which the caller has to decide about.
  */
 export declare const firstTabbable: (root: HTMLElement) => HTMLElement | null;
+export declare const firstFocusable: (root: HTMLElement) => HTMLElement | null;

package/dist/src/helpers/warnUnnamedDialog.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Development-only: a `StyledDialog` with no `dialogTitle`, `dialogLabel`, `ariaLabel` or heading in its
+ * content has no accessible name (WCAG 4.1.2, axe `aria-dialog-name`). Silent in production.
+ */
+export declare function warnUnnamedDialog(dataTest: string | undefined): void;

package/dist/table/components/columns/action-column/components/RowActionMenu.js

@@ -1,31 +1,37 @@
-import { DotsVerticalIcon as S } from "../../../../../components/icons/dots-vertical-icon/DotsVerticalIcon.js";
-import { CircleWarningOutlineIcon as A } from "../../../../../components/icons/warning-circle-icon/CircleWarningOutlineIcon.js";
-import { StyledPopover as D } from "../../../../../components/utils/popover/StyledPopover.js";
-import { StyledMenuList as O } from "../../../../../components/navigation/menu/StyledMenuList.js";
-import { isCustomAction as j } from "../../../../types.js";
-import { StyledTooltip as g } from "../../../../shared-components/tooltip/index.js";
-import { useToggleMenuVisibility as k } from "../../../../hooks/useToggleMenuVisibility.hook.js";
-import { StyledButton as I } from "../../../../shared-components/button/StyledButton.js";
-import { StyledMenuItem as R } from "../../../../shared-components/StyledMenuItem.js";
-import w, { useEffect as V, useMemo as z, useState as E } from "react";
-import { jsx as t, jsxs as b } from "react/jsx-runtime";
-function X({ tableData: l, actions: v, rowActionsState: x }) {
-  const { anchorEl: C, open: a, handleClose: r, handleOpen: P } = k(), i = v(l.row), o = x?.(l.row) ?? { state: "enabled" }, d = l.table.options.meta?.locale, T = d === "no" ? "Ingen handlinger tilgjengelig" : "No actions available", y = d === "no" ? "Radhandlinger" : "Row actions", N = z(() => i.every((e) => "component" in e ? !1 : e.hide), [i]), u = i.length > 0 && !N, m = o.state === "enabled" && !u, M = o.state !== "hidden" && (u || m || o.state === "disabled"), [c, s] = E(!1);
-  if (V(() => {
-    if (!c) return;
-    const e = window.setTimeout(() => s(!1), 1600);
+import { DotsVerticalIcon as A } from "../../../../../components/icons/dots-vertical-icon/DotsVerticalIcon.js";
+import { CircleWarningOutlineIcon as O } from "../../../../../components/icons/warning-circle-icon/CircleWarningOutlineIcon.js";
+import { StyledPopover as j } from "../../../../../components/utils/popover/StyledPopover.js";
+import { StyledMenuList as k } from "../../../../../components/navigation/menu/StyledMenuList.js";
+import { isCustomAction as R } from "../../../../types.js";
+import { StyledTooltip as b } from "../../../../shared-components/tooltip/index.js";
+import { useToggleMenuVisibility as E } from "../../../../hooks/useToggleMenuVisibility.hook.js";
+import { StyledButton as B } from "../../../../shared-components/button/StyledButton.js";
+import { StyledMenuItem as I } from "../../../../shared-components/StyledMenuItem.js";
+import v, { useEffect as L, useMemo as V, useRef as z, useState as F } from "react";
+import { jsx as t, jsxs as x } from "react/jsx-runtime";
+function _({ tableData: r, actions: y, rowActionsState: T }) {
+  const { anchorEl: C, open: c, handleClose: i, handleOpen: M } = E(), a = y(r.row), o = T?.(r.row) ?? { state: "enabled" }, u = r.table.options.meta?.locale, P = u === "no" ? "Ingen handlinger tilgjengelig" : "No actions available", N = u === "no" ? "Radhandlinger" : "Row actions", D = V(() => a.every((e) => "component" in e ? !1 : e.hide), [a]), m = a.length > 0 && !D, f = o.state === "enabled" && !m, S = o.state !== "hidden" && (m || f || o.state === "disabled"), [p, l] = F(!1), h = z(!1), s = (e) => {
+    h.current = e, l(!0);
+  };
+  if (L(() => {
+    if (!p || !h.current) return;
+    const e = window.setTimeout(() => l(!1), 1600);
     return () => window.clearTimeout(e);
-  }, [c]), !M) return /* @__PURE__ */ t("div", { className: "flex w-[40px] items-center justify-center" });
-  const p = o.state === "disabled", f = /* @__PURE__ */ t(I, {
+  }, [p]), !S) return /* @__PURE__ */ t("div", { className: "flex w-[40px] items-center justify-center" });
+  const d = o.state === "disabled", g = /* @__PURE__ */ t(B, {
     dataTest: "row-actions-button",
-    "aria-label": y,
+    "aria-label": N,
     "aria-haspopup": "true",
-    "aria-expanded": a,
+    "aria-expanded": c,
     variant: "text",
     size: "small",
-    disabled: p,
+    "aria-disabled": d ? !0 : void 0,
     onClick: (e) => {
-      e.stopPropagation(), e.preventDefault(), !p && (e.currentTarget.focus({ preventScroll: !0 }), a ? r() : P(e));
+      if (e.stopPropagation(), e.preventDefault(), d) {
+        s(!1);
+        return;
+      }
+      e.currentTarget.focus({ preventScroll: !0 }), c ? i() : M(e);
     },
     onMouseDown: (e) => {
       e.stopPropagation(), e.preventDefault();
@@ -33,38 +39,45 @@ function X({ tableData: l, actions: v, rowActionsState: x }) {
     onMouseUp: (e) => {
       e.stopPropagation(), e.preventDefault();
     },
-    children: /* @__PURE__ */ t(S, {
-      className: p ? "text-delta-300" : "text-delta-700",
+    children: /* @__PURE__ */ t(A, {
+      className: d ? "text-delta-300" : "text-delta-700",
       width: 20,
       height: 20
     })
   });
   return /* @__PURE__ */ t("div", {
     className: "flex w-[40px] items-center justify-center",
-    children: /* @__PURE__ */ b("div", {
+    children: /* @__PURE__ */ x("div", {
       className: "flex items-center justify-center",
-      children: [o.state === "disabled" ? /* @__PURE__ */ t(g, {
+      children: [o.state === "disabled" ? /* @__PURE__ */ t(b, {
         title: o.tooltipTitle,
         arrow: !0,
         placement: o.tooltipPlacement ?? "top",
-        open: c,
-        onOpen: () => s(!0),
-        onClose: () => s(!1),
+        open: p,
+        onOpen: () => s(!1),
+        onClose: () => l(!1),
         children: /* @__PURE__ */ t("span", {
           className: "cursor-not-allowed",
+          onMouseEnter: () => s(!1),
+          onMouseLeave: () => l(!1),
+          onFocus: () => s(!1),
+          onBlur: () => l(!1),
+          onKeyDown: (e) => {
+            e.key === "Escape" && l(!1);
+          },
           onTouchStart: (e) => {
             e.stopPropagation(), e.preventDefault(), s(!0);
           },
           onClick: (e) => {
             e.stopPropagation(), e.preventDefault();
           },
-          children: f
+          children: g
         })
-      }) : f, o.state === "enabled" && /* @__PURE__ */ t(D, {
-        open: a,
+      }) : g, o.state === "enabled" && /* @__PURE__ */ t(j, {
+        open: c,
         anchorEl: C,
-        onClose: r,
-        onClick: r,
+        onClose: i,
+        onClick: i,
         anchorOrigin: {
           horizontal: "right",
           vertical: "bottom"
@@ -73,28 +86,28 @@ function X({ tableData: l, actions: v, rowActionsState: x }) {
           horizontal: "right",
           vertical: "top"
         },
-        children: m ? /* @__PURE__ */ b("div", {
+        children: f ? /* @__PURE__ */ x("div", {
           className: "flex items-center gap-2 p-3 text-base text-delta-700",
-          children: [/* @__PURE__ */ t(A, {
+          children: [/* @__PURE__ */ t(O, {
             width: 20,
             height: 20
-          }), /* @__PURE__ */ t("span", { children: T })]
-        }) : /* @__PURE__ */ t(O, {
+          }), /* @__PURE__ */ t("span", { children: P })]
+        }) : /* @__PURE__ */ t(k, {
           disablePadding: !0,
-          children: i.map((e, h) => {
-            if (j(e)) {
-              const n = e.component(l.row, r);
-              return w.isValidElement(n) ? /* @__PURE__ */ t(w.Fragment, { children: n }, h) : null;
+          children: a.map((e, w) => {
+            if (R(e)) {
+              const n = e.component(r.row, i);
+              return v.isValidElement(n) ? /* @__PURE__ */ t(v.Fragment, { children: n }, w) : null;
             }
-            return e.hide ? null : /* @__PURE__ */ t(g, {
+            return e.hide ? null : /* @__PURE__ */ t(b, {
               title: e?.tooltipTitle,
               arrow: !0,
               placement: e?.tooltipPlacement ?? "left",
-              children: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(R, {
+              children: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(I, {
                 className: e.className,
                 disabled: e.disabled,
                 onClick: () => {
-                  e.disabled || e.onClick?.(l.row);
+                  e.disabled || e.onClick?.(r.row);
                 },
                 onMouseDown: (n) => {
                   n.stopPropagation(), n.preventDefault();
@@ -104,7 +117,7 @@ function X({ tableData: l, actions: v, rowActionsState: x }) {
                 },
                 children: e.label
               }) })
-            }, h);
+            }, w);
           })
         })
       })]
@@ -112,5 +125,5 @@ function X({ tableData: l, actions: v, rowActionsState: x }) {
   });
 }
 export {
-  X as RowActionMenu
+  _ as RowActionMenu
 };