asma-ui-core 3.86.1 → 3.87.0

package/dist/datetime/components/date-picker/StyledDatePicker.js

@@ -1,54 +1,60 @@
-import { setPickerPosition as f } from "./helpers.js";
+import { setPickerPosition as P } from "./helpers.js";
 import { StyledDayPicker as k } from "./components/StyledDayPicker.js";
-import { StyledCalendarPicker as u } from "./components/StyledCalendarPicker.js";
-import { DatePickerInputIndex as x } from "./components/DatePickerInputIndex.js";
-import { useIsMobileView as v } from "../../hooks/useWindowWidthSize.hook.js";
-import { StyledDrawer as C } from "../../../components/navigation/drawer/StyledDrawer.js";
-import { useBackNavigationClose as b } from "../../hooks/useBackNavigationClose.hook.js";
-import { useState as a } from "react";
-import { Fragment as h, jsx as o, jsxs as y } from "react/jsx-runtime";
-var E = (p) => {
-  const s = v(), [e, n] = a(null), [c, m] = a(!1), [d, i] = a(!1), P = (l) => {
-    n(l.currentTarget), f(l, m);
-  }, r = () => {
-    i(!0), n(null);
+import { StyledCalendarPicker as v } from "./components/StyledCalendarPicker.js";
+import { DatePickerInputIndex as y } from "./components/DatePickerInputIndex.js";
+import { useIsMobileView as x } from "../../hooks/useWindowWidthSize.hook.js";
+import { StyledDrawer as b } from "../../../components/navigation/drawer/StyledDrawer.js";
+import { useBackNavigationClose as h } from "../../hooks/useBackNavigationClose.hook.js";
+import { useEffect as C, useState as a } from "react";
+import { Fragment as E, jsx as t, jsxs as w } from "react/jsx-runtime";
+var L = (m) => {
+  const s = x(), [e, i] = a(null), [p, d] = a(!1), [f, c] = a(!1), u = (r) => {
+    i(r.currentTarget), P(r, d);
+  }, o = () => {
+    c(!0), i(null);
   };
-  b({
+  C(() => {
+    if (!e) return;
+    const r = (l) => {
+      document.activeElement === e && (l.key === "Escape" || l.key === "Tab") && o();
+    };
+    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+  }, [e]), h({
     open: !!e,
-    onClose: r
+    onClose: o
   });
-  const t = {
-    ...p,
-    validateOnCalendarClose: d,
-    onValidatedOnce: () => i(!1)
+  const n = {
+    ...m,
+    validateOnCalendarClose: f,
+    onValidatedOnce: () => c(!1)
   };
-  return /* @__PURE__ */ y(h, { children: [
-    /* @__PURE__ */ o(x, {
-      datePickerProps: t,
-      onClick: P
+  return /* @__PURE__ */ w(E, { children: [
+    /* @__PURE__ */ t(y, {
+      datePickerProps: n,
+      onClick: u
     }),
-    !s && /* @__PURE__ */ o(u, {
-      datePickerProps: { ...t },
+    !s && /* @__PURE__ */ t(v, {
+      datePickerProps: { ...n },
       popoverProps: {
         open: !!e,
         anchorEl: e,
-        onClose: r
+        onClose: o
       },
-      positionAbove: c
+      positionAbove: p
     }),
-    s && /* @__PURE__ */ o(C, {
+    s && /* @__PURE__ */ t(b, {
       anchor: "bottom",
       open: !!e,
-      onClose: r,
+      onClose: o,
       anchorEl: e,
-      children: /* @__PURE__ */ o("div", {
+      children: /* @__PURE__ */ t("div", {
         className: "mx-auto max-w-[360px] px-2 pb-[max(1.5rem,env(safe-area-inset-bottom))]",
-        children: /* @__PURE__ */ o(k, {
-          datePickerProps: { ...t },
+        children: /* @__PURE__ */ t(k, {
+          datePickerProps: { ...n },
           popoverProps: {
             open: !!e,
             anchorEl: e,
-            onClose: r
+            onClose: o
           }
         })
       })
@@ -56,5 +62,5 @@ var E = (p) => {
   ] });
 };
 export {
-  E as StyledDatePicker
+  L as StyledDatePicker
 };

package/dist/datetime/components/date-picker/components/StyledCalendarPicker.js

@@ -1,12 +1,13 @@
-import { StyledPopover as n } from "../../../../components/utils/popover/StyledPopover.js";
+import { StyledPopover as i } from "../../../../components/utils/popover/StyledPopover.js";
 import { StyledDayPicker as c } from "./StyledDayPicker.js";
 import { jsx as r } from "react/jsx-runtime";
 var h = ({ datePickerProps: e, popoverProps: t, positionAbove: o }) => {
-  const { open: l, anchorEl: i, onClose: a } = t;
-  return /* @__PURE__ */ r(n, {
+  const { open: l, anchorEl: n, onClose: a } = t;
+  return /* @__PURE__ */ r(i, {
     open: l,
-    anchorEl: i,
+    anchorEl: n,
     onClose: a,
+    tabIntoContent: !1,
     anchorOrigin: {
       vertical: o ? "top" : 50,
       horizontal: "left"

package/dist/datetime/components/time-picker/StyledTimePicker.js

@@ -1,90 +1,103 @@
-import { useIsMobileView as N } from "../../hooks/useWindowWidthSize.hook.js";
-import { StyledDrawer as E } from "../../../components/navigation/drawer/StyledDrawer.js";
+import { useIsMobileView as O } from "../../hooks/useWindowWidthSize.hook.js";
+import { StyledDrawer as D } from "../../../components/navigation/drawer/StyledDrawer.js";
 import { useBackNavigationClose as I } from "../../hooks/useBackNavigationClose.hook.js";
 import { usePopupState as j } from "../../../hooks/usePopupState.js";
-import { ClickAwayListener as D } from "../../../components/mui-compat/ClickAwayListener.js";
-import { TimePickerPanel as L } from "./components/TimePickerPanel.js";
-import { TimePickerPopper as O } from "./TimePickerPopper.js";
+import { ClickAwayListener as A } from "../../../components/mui-compat/ClickAwayListener.js";
+import { TimePickerPanel as B } from "./components/TimePickerPanel.js";
+import { TimePickerPopper as M } from "./TimePickerPopper.js";
 import { getTimeFromValue as S } from "./helpers/getTimeFromValue.js";
-import { TimePickerInput as B } from "./TimePickerInput.js";
-import { useState as h } from "react";
-import { jsx as o, jsxs as T } from "react/jsx-runtime";
-import { format as v, isBefore as M, isValid as A } from "date-fns";
-var Z = (i) => {
-  const { value: a, onSelect: r, notBeforeTime: m } = i, e = j({
+import { TimePickerInput as F } from "./TimePickerInput.js";
+import { useEffect as K, useState as v } from "react";
+import { jsx as o, jsxs as C } from "react/jsx-runtime";
+import { format as y, isBefore as q, isValid as z } from "date-fns";
+var te = (n) => {
+  const { value: a, onSelect: r, notBeforeTime: u } = n, t = j({
     variant: "popper",
     popupId: "time-picker-popper"
-  }), V = N();
+  }), c = O();
   I({
-    open: V && e.isOpen,
-    onClose: e.close
+    open: c && t.isOpen,
+    onClose: t.close
   });
-  const x = a ? v(a, "HH:mm") : "", [C, s] = h(x), [P, l] = h(!1), [b, n] = h(!0), c = P ? C : x, u = (t) => !t || !m || !A(m) || !M(t, m), k = c.length === 5 ? S(c, a) : null, g = k ? u(k) : !0, H = (t) => {
-    const p = t.target.value;
-    if (l(!0), s(p), p.length !== 5) {
-      n(!1);
+  const { isOpen: k, anchorEl: V, close: w } = t;
+  K(() => {
+    if (!k || c) return;
+    const e = (i) => {
+      V?.contains(document.activeElement) && (i.key === "Escape" || i.key === "Tab") && w();
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [
+    k,
+    V,
+    w,
+    c
+  ]);
+  const E = a ? y(a, "HH:mm") : "", [b, m] = v(E), [g, l] = v(!1), [H, s] = v(!0), p = g ? b : E, f = (e) => !e || !u || !z(u) || !q(e, u), x = p.length === 5 ? S(p, a) : null, L = x ? f(x) : !0, N = (e) => {
+    const i = e.target.value;
+    if (l(!0), m(i), i.length !== 5) {
+      s(!1);
       return;
     }
-    const d = S(p, a);
-    if (!d) {
-      r(void 0), n(!1);
+    const h = S(i, a);
+    if (!h) {
+      r(void 0), s(!1);
       return;
     }
-    n(!0), u(d) ? (r(d), l(!1), e.close()) : r(void 0);
-  }, w = (t) => {
-    if (n(!0), u(t)) {
-      r(t), s(t ? v(t, "HH:mm") : ""), l(!1);
+    s(!0), f(h) ? (r(h), l(!1), t.close()) : r(void 0);
+  }, T = (e) => {
+    if (s(!0), f(e)) {
+      r(e), m(e ? y(e, "HH:mm") : ""), l(!1);
       return;
     }
-    r(void 0), s(t ? v(t, "HH:mm") : ""), l(!0);
-  }, y = () => {
-    r(void 0), s(""), l(!1), n(!0);
-  }, f = /* @__PURE__ */ o(B, {
-    ...i,
-    popupState: e,
-    localValue: c,
-    isValidTime: b,
-    isValidEndTime: g,
-    handleChange: H
+    r(void 0), m(e ? y(e, "HH:mm") : ""), l(!0);
+  }, P = () => {
+    r(void 0), m(""), l(!1), s(!0);
+  }, d = /* @__PURE__ */ o(F, {
+    ...n,
+    popupState: t,
+    localValue: p,
+    isValidTime: H,
+    isValidEndTime: L,
+    handleChange: N
   });
-  return i.disabled || i.readOnly ? f : V ? /* @__PURE__ */ T("div", {
+  return n.disabled || n.readOnly ? d : c ? /* @__PURE__ */ C("div", {
     className: "relative h-auto w-auto",
     children: [/* @__PURE__ */ o("div", {
       className: "m-0 flex h-fit items-center justify-center p-0",
-      children: f
-    }), /* @__PURE__ */ o(E, {
+      children: d
+    }), /* @__PURE__ */ o(D, {
       anchor: "bottom",
-      open: e.isOpen,
-      onClose: e.close,
-      anchorEl: e.anchorEl,
+      open: t.isOpen,
+      onClose: t.close,
+      anchorEl: t.anchorEl,
       children: /* @__PURE__ */ o("div", {
         className: "mx-auto w-full max-w-[360px] px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-2",
-        children: /* @__PURE__ */ o(L, {
-          dataTest: i.dataTest,
+        children: /* @__PURE__ */ o(B, {
+          dataTest: n.dataTest,
           value: a,
-          onSelect: w,
-          handleClear: y,
-          onConfirm: e.close
+          onSelect: T,
+          handleClear: P,
+          onConfirm: t.close
         })
       })
     })]
-  }) : /* @__PURE__ */ o(D, {
+  }) : /* @__PURE__ */ o(A, {
     mouseEvent: "onMouseDown",
-    onClickAway: e.close,
-    children: /* @__PURE__ */ T("div", {
+    onClickAway: t.close,
+    children: /* @__PURE__ */ C("div", {
       className: "relative h-auto w-auto",
       children: [/* @__PURE__ */ o("div", {
         className: "m-0 flex h-fit items-center justify-center p-0",
-        children: f
-      }), e.isOpen && /* @__PURE__ */ o(O, {
-        ...i,
-        popupState: e,
-        handleClear: y,
-        onSelect: w
+        children: d
+      }), t.isOpen && /* @__PURE__ */ o(M, {
+        ...n,
+        popupState: t,
+        handleClear: P,
+        onSelect: T
       })]
     })
   });
 };
 export {
-  Z as StyledTimePicker
+  te as StyledTimePicker
 };

package/dist/helpers/focusable.js

@@ -0,0 +1,5 @@
+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;
+export {
+  i as firstTabbable,
+  b as tabbableWithin
+};

package/dist/hooks/useFocusTrap.hook.js

@@ -1,34 +1,39 @@
-import { useEffect as d } from "react";
-var m = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])', b = (c, u, a) => {
+import { tabbableWithin as p } from "../helpers/focusable.js";
+import { useEffect as d, useRef as y } from "react";
+var E = (c, i, s) => {
+  const f = y(s);
   d(() => {
+    f.current = s;
+  }, [s]), d(() => {
     if (!c) return;
-    const t = u.current;
+    const t = i.current;
     if (!t) return;
-    const r = document.activeElement, l = requestAnimationFrame(() => {
-      t.focus({ preventScroll: !0 });
-    }), i = (e) => {
+    const n = document.activeElement, a = t.getAttribute("tabindex");
+    t.setAttribute("tabindex", "-1");
+    const b = requestAnimationFrame(() => {
+      (!n || !t.contains(n)) && t.focus({ preventScroll: !0 });
+    }), l = (e) => {
       if (e.key === "Escape") {
-        a?.();
+        f.current?.();
         return;
       }
       if (e.key !== "Tab") return;
-      const n = Array.from(t.querySelectorAll(m));
-      if (n.length === 0) {
+      const r = p(t);
+      if (r.length === 0) {
         e.preventDefault();
         return;
       }
-      const s = n[0], f = n[n.length - 1], o = document.activeElement;
-      e.shiftKey && (o === s || o === t) ? (e.preventDefault(), f?.focus()) : (!e.shiftKey && o === f || !e.shiftKey && o === t) && (e.preventDefault(), s?.focus());
+      const u = r[0], m = r[r.length - 1], o = document.activeElement;
+      e.shiftKey && (o === u || o === t) ? (e.preventDefault(), m?.focus()) : (!e.shiftKey && o === m || !e.shiftKey && o === t) && (e.preventDefault(), u?.focus());
     };
-    return document.addEventListener("keydown", i), () => {
-      cancelAnimationFrame(l), document.removeEventListener("keydown", i), r && document.contains(r) && r.focus();
+    return document.addEventListener("keydown", l), () => {
+      cancelAnimationFrame(b), document.removeEventListener("keydown", l), a === null ? t.removeAttribute("tabindex") : t.setAttribute("tabindex", a), requestAnimationFrame(() => {
+        const e = document.activeElement;
+        (!e || e === document.body) && n && document.contains(n) && n.focus({ preventScroll: !0 });
+      });
     };
-  }, [
-    c,
-    u,
-    a
-  ]);
+  }, [c, i]);
 };
 export {
-  b as useFocusTrap
+  E as useFocusTrap
 };

package/dist/src/components/data-display/chip/StyledChip.d.ts

@@ -47,6 +47,8 @@ export interface StyledChipProps {
     classes?: ChipClasses;
     sx?: unknown;
     tabIndex?: number;
+    /** Removes the delete affordance from sequential navigation when its owner has a keyboard equivalent. */
+    deleteButtonTabIndex?: number;
     'aria-label'?: string;
     /** Overrides the default `role="button"`/no-role logic — for `StyledInteractiveChip`'s
      * checkbox/radio chip, whose inner control is `decorative`/`aria-hidden` (a real, even hidden,

package/dist/src/components/inputs/dynamic-select/StyledDynamicSelect.d.ts

@@ -9,9 +9,8 @@ import { StyledDynamicSelectComponent } from './types';
  * **Multiple**) to a representation, which this component's thresholds reproduce exactly:
  * - **≤5 → Chips select** (`DynamicInteractiveChipGroup`): `StyledInteractiveChip` radio (single)
  *   or checkbox (multiple) chips; long labels stack vertically; "Clear selection" link + helper row.
- * - **>5 & ≤10 → Select (dropdown)**: outlined `StyledInputField` trigger + `Menus` list, typing
- *   disabled (caret hidden, keyboard blocked).
- * - **>10 → Autocomplete**: same trigger + scrollable `Menus` list with type-ahead search.
+ * - **>5 → Autocomplete**: outlined `StyledInputField` trigger + scrollable `Menus` list with
+ *   type-ahead search.
  * Each representation is composed from components already aligned to their own Figma nodes (Chip
  * `13248-31089`, Input field `15561-37391`, Menus `16073-19226`, Autocomplete `20474-27966`), so
  * parity here is the mode routing + the shared title/clear/helper chrome, not a bespoke visual.
@@ -25,7 +24,7 @@ import { StyledDynamicSelectComponent } from './types';
  *   Long labels automatically switch to a vertical stacked layout.
  *   When `!required` and a value is selected, a "Clear selection" button is shown.
  * - `0 or 6+ options` → renders as a searchable autocomplete (`DynamicSelectAutocomplete`).
- *   Typing is disabled when there are ≤10 options (caret hidden, keyboard blocked).
+ *   All autocomplete option counts remain filterable and keyboard-operable.
  *
  * **Option types:**
  * Options can be primitives (`string | number | boolean`) or objects. When using objects,

package/dist/src/components/inputs/dynamic-select/components/DynamicSelectAutocomplete.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/inputs/phone-field/CountryCodeOptions.d.ts

@@ -4,7 +4,7 @@ export interface CountryCodeOptionsProps {
     /** Already filtered — the caller owns the query. */
     visible: readonly PhoneCountryChoice[];
     selectedIso2: string;
-    activeIndex: number;
+    activeIndex: number | null;
     optionId: (index: number) => string;
     onSelect: (iso2: string) => void;
     listId: string;

package/dist/src/components/inputs/phone-field/useCountryPicker.d.ts

@@ -10,13 +10,16 @@ export interface UseCountryPickerOptions {
     selectedIso2: string;
     query: string;
     listId: string;
-    onSelect: (iso2: string) => void;
+    onSelect: (iso2: string, close?: boolean) => void;
     onDismiss: () => void;
 }
 export interface CountryPicker {
     visible: readonly PhoneCountryChoice[];
-    activeIndex: number;
+    activeIndex: number | null;
     optionId: (index: number) => string;
+    openWithKeyboard: (direction: -1 | 1) => void;
+    select: (iso2: string) => void;
+    dismiss: () => void;
     handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
 }
 /**

package/dist/src/components/navigation/listbox/Listbox.d.ts

@@ -5,16 +5,17 @@ declare function ListboxRoot<T>({ value, onChange, children, }: {
     onChange: (value: T) => void;
     children: ReactNode;
 }): JSX.Element;
-declare function ListboxOption<T>({ value, disabled, children, className, }: {
+declare function ListboxOption<T>({ value, disabled, children, className, optionIndex, }: {
     value: T;
     disabled?: boolean;
     children: RenderProp<{
         selected: boolean;
     }>;
     className?: string;
+    optionIndex?: number;
 }): JSX.Element;
 export declare const Listbox: typeof ListboxRoot & {
-    Button: ({ children, className, ...rest }: {
+    Button: ({ children, className, onClick, onKeyDown, ...rest }: {
         children: RenderProp<{
             open: boolean;
         }>;

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
               }) })