asma-ui-core 3.86.0 → 3.86.2

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

@@ -1,9 +1,10 @@
 import { CSSProperties, MouseEvent, ReactNode } from 'react';
-import { PopoverOrigin, StyledPopoverProps } from '../../utils/popover';
+import { PopoverCloseReason, PopoverOrigin } from '../../utils/popover';
+export type MenuCloseReason = PopoverCloseReason | 'tabKeyDown';
 export interface MenuProps {
     open: boolean;
     anchorEl?: Element | null;
-    onClose?: StyledPopoverProps['onClose'];
+    onClose?: (event: object, reason?: MenuCloseReason) => void;
     anchorOrigin?: PopoverOrigin;
     transformOrigin?: PopoverOrigin;
     id?: string;

package/dist/src/components/utils/accordion/base-ui/StyledAccordionDetails.d.ts

@@ -5,7 +5,8 @@ type StyledAccordionDetailsProps = React.HTMLAttributes<HTMLDivElement> & {
 /**
  * Native accordion panel (replaces `@base-ui/react`): a `role="region"` whose height animates
  * between 0 and its measured content height via the SCSS `--accordion-panel-height` var (was
- * base-ui-provided). Kept `hidden` when closed after the transition for a11y. TASK-201.
+ * base-ui-provided). Collapsed, it is `inert`: the content is still rendered (so it can be measured
+ * and animated) but is out of the tab order and the accessibility tree. TASK-201.
  */
 export declare const StyledAccordionDetails: ({ children, className, contentClassName, ...props }: StyledAccordionDetailsProps) => JSX.Element;
 export {};

package/dist/src/components/utils/popover/StyledPopover.d.ts

@@ -3,9 +3,16 @@ export interface PopoverOrigin {
     vertical: 'top' | 'center' | 'bottom' | number;
     horizontal: 'left' | 'center' | 'right' | number;
 }
-export type PopoverCloseReason = 'backdropClick' | 'escapeKeyDown';
+export type PopoverCloseReason = 'backdropClick' | 'escapeKeyDown' | 'tabKeyDown';
 export interface StyledPopoverProps {
     open: boolean;
+    /**
+     * Splice the panel into the tab sequence right after the anchor: Tab on the anchor steps into the
+     * panel's first control, and Shift+Tab out of that control retraces to the anchor. On by
+     * default because a popover's controls must be reachable by keyboard. Opt out only when its
+     * trigger owns keyboard navigation (select, country picker, date/time picker).
+     */
+    tabIntoContent?: boolean;
     anchorEl?: Element | null;
     onClose?: (event: object, reason?: PopoverCloseReason) => void;
     anchorOrigin?: PopoverOrigin;
@@ -44,4 +51,4 @@ export interface StyledPopoverProps {
  * mapping to MUI's `onClose(event, reason)`. `anchorOrigin`/`transformOrigin`/`slotProps.paper`
  * preserved (DEC-003). TASK-302.
  */
-export declare const StyledPopover: ({ open, anchorEl, onClose, anchorOrigin, transformOrigin, id, className, sx, slotProps, onClick, children, keepMounted, }: StyledPopoverProps) => JSX.Element | null;
+export declare const StyledPopover: ({ open, anchorEl, onClose, anchorOrigin, transformOrigin, id, className, sx, slotProps, onClick, children, keepMounted, tabIntoContent, }: StyledPopoverProps) => JSX.Element | null;

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

@@ -0,0 +1,8 @@
+/** Every element inside `root` a Tab press can reach, in DOM order. */
+export declare const tabbableWithin: (root: ParentNode) => HTMLElement[];
+/**
+ * The element a keyboard user actually lands on for `root`: `root` itself when it is tabbable, else
+ * its first tabbable descendant. `null` when the subtree holds nothing reachable — a decorative or
+ * disabled control, which the caller has to decide about.
+ */
+export declare const firstTabbable: (root: HTMLElement) => HTMLElement | null;

package/dist/src/hooks/useFocusTrap.hook.d.ts

@@ -3,7 +3,8 @@ import { RefObject } from 'react';
  * Manual Tab-cycling focus trap for a modal-like panel that (unlike `StyledDialog`) can't use the
  * native `<dialog>` `showModal()` trap — e.g. a panel that's only modal in ONE of its states
  * (`MinimizableDialog`'s fullscreen mode), where the rest of the time it's a non-modal floating
- * widget that must NOT trap focus. Moves initial focus into the container, cycles Tab/Shift+Tab
+ * widget that must NOT trap focus. Moves external focus into the container but retains focus on an
+ * in-panel control that activated the trap (such as an Enter Fullscreen button), cycles Tab/Shift+Tab
  * among its focusable descendants while `active`, restores focus to the trigger on deactivation,
  * and calls `onEscape` on the Escape key (mirroring `StyledDialog`'s ESC-to-close).
  */

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

@@ -1,31 +1,31 @@
 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 O } from "../../../../../components/utils/popover/StyledPopover.js";
-import { StyledMenuList as j } from "../../../../../components/navigation/menu/StyledMenuList.js";
-import { isCustomAction as k } from "../../../../types.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 F } from "../../../../hooks/useToggleMenuVisibility.hook.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 D } from "react";
+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: o, actions: v, rowActionsState: C }) {
-  const { anchorEl: x, open: a, handleClose: i, handleOpen: P } = F(), l = v(o.row), n = C?.(o.row) ?? { state: "enabled" }, p = o.table.options.meta?.locale, y = p === "no" ? "Ingen handlinger tilgjengelig" : "No actions available", N = p === "no" ? "Radhandlinger" : "Row actions", T = z(() => l.every((e) => "component" in e ? !1 : e.hide), [l]), u = l.length > 0 && !T, m = n.state === "enabled" && !u, M = n.state !== "hidden" && (u || m || n.state === "disabled"), [c, s] = D(!1);
+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);
     return () => window.clearTimeout(e);
   }, [c]), !M) return /* @__PURE__ */ t("div", { className: "flex w-[40px] items-center justify-center" });
-  const d = n.state === "disabled", f = /* @__PURE__ */ t(I, {
+  const p = o.state === "disabled", f = /* @__PURE__ */ t(I, {
     dataTest: "row-actions-button",
-    "aria-label": N,
+    "aria-label": y,
     "aria-haspopup": "true",
     "aria-expanded": a,
     variant: "text",
     size: "small",
-    disabled: d,
+    disabled: p,
     onClick: (e) => {
-      e.stopPropagation(), e.preventDefault(), !d && (a ? (i(), o.row.onChangeFocused(!1)) : (P(e), o.row.onChangeFocused(!0)));
+      e.stopPropagation(), e.preventDefault(), !p && (e.currentTarget.focus({ preventScroll: !0 }), a ? r() : P(e));
     },
     onMouseDown: (e) => {
       e.stopPropagation(), e.preventDefault();
@@ -34,7 +34,7 @@ function X({ tableData: o, actions: v, rowActionsState: C }) {
       e.stopPropagation(), e.preventDefault();
     },
     children: /* @__PURE__ */ t(S, {
-      className: d ? "text-delta-300" : "text-delta-700",
+      className: p ? "text-delta-300" : "text-delta-700",
       width: 20,
       height: 20
     })
@@ -43,10 +43,10 @@ function X({ tableData: o, actions: v, rowActionsState: C }) {
     className: "flex w-[40px] items-center justify-center",
     children: /* @__PURE__ */ b("div", {
       className: "flex items-center justify-center",
-      children: [n.state === "disabled" ? /* @__PURE__ */ t(g, {
-        title: n.tooltipTitle,
+      children: [o.state === "disabled" ? /* @__PURE__ */ t(g, {
+        title: o.tooltipTitle,
         arrow: !0,
-        placement: n.tooltipPlacement ?? "top",
+        placement: o.tooltipPlacement ?? "top",
         open: c,
         onOpen: () => s(!0),
         onClose: () => s(!1),
@@ -60,15 +60,11 @@ function X({ tableData: o, actions: v, rowActionsState: C }) {
           },
           children: f
         })
-      }) : f, n.state === "enabled" && /* @__PURE__ */ t(O, {
+      }) : f, o.state === "enabled" && /* @__PURE__ */ t(D, {
         open: a,
-        anchorEl: x,
-        onClose: () => {
-          i(), o.row.onChangeFocused(!1);
-        },
-        onClick: () => {
-          i(), o.row.onChangeFocused(!1);
-        },
+        anchorEl: C,
+        onClose: r,
+        onClick: r,
         anchorOrigin: {
           horizontal: "right",
           vertical: "bottom"
@@ -82,13 +78,13 @@ function X({ tableData: o, actions: v, rowActionsState: C }) {
           children: [/* @__PURE__ */ t(A, {
             width: 20,
             height: 20
-          }), /* @__PURE__ */ t("span", { children: y })]
-        }) : /* @__PURE__ */ t(j, {
+          }), /* @__PURE__ */ t("span", { children: T })]
+        }) : /* @__PURE__ */ t(O, {
           disablePadding: !0,
-          children: l.map((e, h) => {
-            if (k(e)) {
-              const r = e.component(o.row, i);
-              return w.isValidElement(r) ? /* @__PURE__ */ t(w.Fragment, { children: r }, h) : null;
+          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;
             }
             return e.hide ? null : /* @__PURE__ */ t(g, {
               title: e?.tooltipTitle,
@@ -98,13 +94,13 @@ function X({ tableData: o, actions: v, rowActionsState: C }) {
                 className: e.className,
                 disabled: e.disabled,
                 onClick: () => {
-                  e.disabled || e.onClick?.(o.row);
+                  e.disabled || e.onClick?.(l.row);
                 },
-                onMouseDown: (r) => {
-                  r.stopPropagation(), r.preventDefault();
+                onMouseDown: (n) => {
+                  n.stopPropagation(), n.preventDefault();
                 },
-                onMouseUp: (r) => {
-                  r.stopPropagation(), r.preventDefault();
+                onMouseUp: (n) => {
+                  n.stopPropagation(), n.preventDefault();
                 },
                 children: e.label
               }) })

package/dist/table/components/table-footer/TablePagination.js

@@ -11,7 +11,7 @@ import { StyledButton as u } from "../../shared-components/button/StyledButton.j
 import { useCallback as I, useId as F, useMemo as S, useRef as K } from "react";
 import { Fragment as M, jsx as e, jsxs as f } from "react/jsx-runtime";
 function U({ table: o, locale: y }) {
-  const v = K(null), n = y === "no", a = F(), P = S(() => ({
+  const v = K(null), r = y === "no", a = F(), b = S(() => ({
     anchorOrigin: {
       vertical: -5,
       horizontal: "center"
@@ -21,21 +21,21 @@ function U({ table: o, locale: y }) {
       horizontal: "center"
     }
   }), []), l = I(() => {
-    const t = m["asma-ui-table-styled-table"], r = v.current?.closest(`.${t}`)?.querySelector(`.${m["table-scroll"]}, .${m["table-wrapper"]}`);
-    r && r.scrollTo({
+    const t = m["asma-ui-table-styled-table"], n = v.current?.closest(`.${t}`)?.querySelector(`.${m["table-scroll"]}, .${m["table-wrapper"]}`);
+    n && n.scrollTo({
       top: 0,
       behavior: "smooth"
     });
-  }, []), s = o.getPageCount() || 1, i = o.getState().pagination.pageIndex + 1, c = S(() => Array.from({ length: s }, (t, r) => r + 1), [s]), b = I((t) => {
+  }, []), s = o.getPageCount() || 1, i = o.getState().pagination.pageIndex + 1, c = S(() => Array.from({ length: s }, (t, n) => n + 1), [s]), P = I((t) => {
     o.setPageIndex(t - 1), l();
   }, [o, l]), { anchorEl: g, open: d, handleClose: x, handleOpen: T, triggerRef: w, activeIndex: h, handleKeyDown: $ } = R({
     optionCount: c.length,
     selectedIndex: i - 1,
-    onSelect: (t) => b(c[t])
+    onSelect: (t) => P(c[t])
   });
   return /* @__PURE__ */ f(M, { children: [
     /* @__PURE__ */ e(p, {
-      title: n ? "Nåværende side" : "Current Page",
+      title: r ? "Nåværende side" : "Current Page",
       children: /* @__PURE__ */ e("div", {
         ref: v,
         children: /* @__PURE__ */ f(u, {
@@ -56,11 +56,11 @@ function U({ table: o, locale: y }) {
             width: 24
           }),
           children: [
-            n ? "Side" : "Page",
+            r ? "Side" : "Page",
             " ",
             i,
             " ",
-            n ? "av" : "of",
+            r ? "av" : "of",
             " ",
             s
           ]
@@ -70,6 +70,7 @@ function U({ table: o, locale: y }) {
     /* @__PURE__ */ e(k, {
       open: d,
       anchorEl: g,
+      tabIntoContent: !1,
       slotProps: { paper: {
         className: "border border-solid border-delta-200",
         sx: {
@@ -79,22 +80,22 @@ function U({ table: o, locale: y }) {
         }
       } },
       onClose: x,
-      anchorOrigin: P.anchorOrigin,
-      transformOrigin: P.transformOrigin,
+      anchorOrigin: b.anchorOrigin,
+      transformOrigin: b.transformOrigin,
       children: /* @__PURE__ */ e(z, {
         id: a,
         role: "listbox",
-        children: c.map((t, r) => /* @__PURE__ */ e(D, {
-          id: `${a}-option-${r}`,
-          active: r === h,
+        children: c.map((t, n) => /* @__PURE__ */ e(D, {
+          id: `${a}-option-${n}`,
+          active: n === h,
           onClick: (C) => {
-            C.stopPropagation(), C.preventDefault(), b(t), x();
+            C.stopPropagation(), C.preventDefault(), P(t), x();
           },
           selected: t === i,
           children: /* @__PURE__ */ f("span", {
             className: "text-base font-normal text-delta-700",
             children: [
-              n ? "Side" : "Page",
+              r ? "Side" : "Page",
               " ",
               t
             ]
@@ -103,7 +104,7 @@ function U({ table: o, locale: y }) {
       })
     }),
     /* @__PURE__ */ e(p, {
-      title: i === 1 ? "" : n ? "Forrige side" : "Previous Page",
+      title: i === 1 ? "" : r ? "Forrige side" : "Previous Page",
       children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(u, {
         dataTest: "prev-page-button",
         variant: "outlined",
@@ -119,7 +120,7 @@ function U({ table: o, locale: y }) {
       }) })
     }),
     /* @__PURE__ */ e(p, {
-      title: i === s ? "" : n ? "Neste side" : "Next Page",
+      title: i === s ? "" : r ? "Neste side" : "Next Page",
       children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(u, {
         dataTest: "next-page-button",
         variant: "outlined",

package/dist/table/components/table-footer/TableRowCountSelect.js

@@ -1,8 +1,8 @@
 import { StyledPopover as O } from "../../../components/utils/popover/StyledPopover.js";
 import { StyledMenuList as C } from "../../../components/navigation/menu/StyledMenuList.js";
 import { StyledSelectItem as y } from "../../../components/inputs/select/StyledSelectItem.js";
-import { ChevronDownIcon as $ } from "../../shared-components/ChevronDownIcon.js";
-import { useKeyboardSelectMenu as I } from "../../hooks/useToggleMenuVisibility.hook.js";
+import { ChevronDownIcon as I } from "../../shared-components/ChevronDownIcon.js";
+import { useKeyboardSelectMenu as $ } from "../../hooks/useToggleMenuVisibility.hook.js";
 import { StyledButton as k } from "../../shared-components/button/StyledButton.js";
 import { useCallback as D, useId as N, useMemo as g } from "react";
 import { Fragment as P, jsx as s, jsxs as m } from "react/jsx-runtime";
@@ -28,7 +28,7 @@ function A({ table: l, locale: w }) {
     return Array.from(o).sort((a, i) => a - i);
   }, [e]), f = D((o) => {
     l.setPageSize(o);
-  }, [l]), b = r.indexOf(e), { anchorEl: d, open: n, handleClose: u, handleOpen: v, triggerRef: S, activeIndex: p, handleKeyDown: x } = I({
+  }, [l]), b = r.indexOf(e), { anchorEl: d, open: n, handleClose: u, handleOpen: v, triggerRef: S, activeIndex: p, handleKeyDown: x } = $({
     optionCount: r.length,
     selectedIndex: b,
     onSelect: (o) => f(r[o]),
@@ -47,7 +47,7 @@ function A({ table: l, locale: w }) {
     "aria-expanded": n,
     "aria-activedescendant": p === null ? void 0 : `${t}-option-${p}`,
     "aria-label": `${e} ${c ? "rader" : "rows"}`,
-    endIcon: /* @__PURE__ */ s($, {
+    endIcon: /* @__PURE__ */ s(I, {
       className: `${n ? "flip-180" : "rotate-0"} transition-transform duration-300`,
       height: 24,
       width: 24
@@ -60,6 +60,7 @@ function A({ table: l, locale: w }) {
   }), /* @__PURE__ */ s(O, {
     open: n,
     anchorEl: d,
+    tabIntoContent: !1,
     slotProps: { paper: {
       className: "border border-solid border-delta-200",
       sx: {

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.86.0",
+    "version": "3.86.2",
     "type": "module",
     "sideEffects": [
         "**/*.css",