asma-ui-core 3.97.0 → 3.98.1

package/dist/components/custom/widget/widget-title/StyledWidgetTitle.js

@@ -1,14 +1,14 @@
 import { cn as i } from "../../../../helpers/cn.js";
-import r from "./StyledWidgetTitle.module.js";
-import { forwardRef as d } from "react";
-import { jsx as l } from "react/jsx-runtime";
-var n = d(function(e, t) {
-  return /* @__PURE__ */ l("div", {
+import l from "./StyledWidgetTitle.module.js";
+import { forwardRef as r } from "react";
+import { jsx as d } from "react/jsx-runtime";
+var c = r(function(e, t) {
+  return /* @__PURE__ */ d(e.component ?? "h2", {
     ref: t,
-    className: i(r["styled-widget-title"], e.className),
+    className: i(l["styled-widget-title"], e.className),
     children: e.children
   });
 });
 export {
-  n as StyledWidgetTitle
+  c as StyledWidgetTitle
 };

package/dist/components/custom/widget/widget-title/StyledWidgetTitle.module.js

@@ -1,4 +1,4 @@
-var t = { "styled-widget-title": "_styled-widget-title_1o7tp_1" };
+var t = { "styled-widget-title": "_styled-widget-title_gfsr3_1" };
 export {
   t as default
 };

package/dist/components/inputs/phone-field/StyledPhoneField.js

@@ -3,66 +3,67 @@ import { StyledInputField as M } from "../input-field/StyledInputField.js";
 import { StyledLink as V } from "../../navigation/link/StyledLink.js";
 import { CountryCodeSelect as W } from "./CountryCodeSelect.js";
 import { useId as z } from "react";
-import { jsx as t, jsxs as r } from "react/jsx-runtime";
-var E = (e) => e.replace(/\D/g, ""), U = ({ dataTest: e, label: l, countries: h, country: n, onCountryChange: x, value: s, onChange: f, onBlur: N, error: v, helperText: y, reserveHelperText: g = !0, disabled: d, readOnly: $, readOnlyText: i, readOnlyHref: m, required: c, placeholder: b, formatNationalNumber: I, renderFlag: C, selectCountryLabel: S, searchPlaceholder: F, id: j, name: P, size: k = "medium", fieldClassName: p, helperTextClassName: w, className: A }) => {
-  const B = z(), a = j ?? `${B}-phone`, u = `${a}-label`, o = I?.(s, n) ?? s;
-  return /* @__PURE__ */ r("div", {
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+var E = (e) => e.replace(/\D/g, ""), U = ({ dataTest: e, label: l, countries: h, country: n, onCountryChange: x, value: s, onChange: f, onBlur: v, error: y, helperText: N, reserveHelperText: b = !0, disabled: i, readOnly: g, readOnlyText: m, readOnlyHref: c, required: p, placeholder: $, formatNationalNumber: I, renderFlag: C, selectCountryLabel: S, searchPlaceholder: F, id: j, name: P, size: k = "medium", fieldClassName: u, helperTextClassName: w, className: A }) => {
+  const B = z(), a = j ?? `${B}-phone`, o = `${a}-label`, r = I?.(s, n) ?? s;
+  return /* @__PURE__ */ d("div", {
     className: L("flex flex-col", A),
     "data-testid": `${e}-root`,
-    children: [l != null && /* @__PURE__ */ r("label", {
-      id: u,
+    children: [l != null && /* @__PURE__ */ d("label", {
+      id: o,
       htmlFor: a,
       className: "pb-1 text-base font-semibold text-delta-800",
-      children: [l, c === !0 && /* @__PURE__ */ t("span", {
+      children: [l, p === !0 && /* @__PURE__ */ t("span", {
         "aria-hidden": "true",
         children: " *"
       })]
-    }), $ === !0 ? /* @__PURE__ */ t("span", {
+    }), g === !0 ? /* @__PURE__ */ t("span", {
       className: "py-2 text-base text-delta-800",
-      children: m === void 0 ? /* @__PURE__ */ t("span", {
+      children: c === void 0 ? /* @__PURE__ */ t("span", {
         "data-testid": `${e}-readonly`,
-        children: i ?? o
+        children: m ?? r
       }) : /* @__PURE__ */ t(V, {
         dataTest: `${e}-readonly`,
-        href: m,
+        href: c,
         className: "-ml-1",
-        contentNode: i ?? o
+        contentNode: m ?? r
       })
-    }) : /* @__PURE__ */ r("div", {
+    }) : /* @__PURE__ */ d("div", {
       className: "flex items-start gap-2.5",
       children: [/* @__PURE__ */ t(W, {
         dataTest: `${e}-country`,
         countries: h,
         value: n,
         onChange: x,
-        disabled: d,
+        disabled: i,
         selectCountryLabel: S,
         searchPlaceholder: F,
         renderFlag: C,
-        labelledBy: l == null ? void 0 : u,
-        className: p
+        labelledBy: l == null ? void 0 : o,
+        className: u
       }), /* @__PURE__ */ t(M, {
         dataTest: `${e}-number`,
         className: "max-w-[200px]",
         id: a,
         name: P,
-        value: o,
+        value: r,
         onChange: (D) => f(E(D.target.value)),
-        onBlur: N,
-        placeholder: b,
-        error: v,
-        disabled: d,
-        required: c,
+        onBlur: v,
+        placeholder: $,
+        error: y,
+        disabled: i,
+        required: p,
         fullWidth: !0,
-        helperText: y,
-        reserveHelperText: g,
+        helperText: N,
+        reserveHelperText: b,
         size: k,
         slotProps: {
           htmlInput: {
             inputMode: "tel",
-            autoComplete: "tel"
+            autoComplete: "tel",
+            "aria-labelledby": l == null ? void 0 : o
           },
-          input: { className: p },
+          input: { className: u },
           formHelperText: { className: w }
         }
       })]

package/dist/src/components/custom/widget/widget-title/StyledWidgetTitle.d.ts

@@ -4,6 +4,7 @@
  */
 export declare const StyledWidgetTitle: import('react').ForwardRefExoticComponent<{
     className?: string;
+    component?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 } & {
     children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLDivElement>>;
+} & import('react').RefAttributes<HTMLHeadingElement>>;

package/dist/src/table/types.d.ts

@@ -92,6 +92,13 @@ export type StyledTableProps<TData, TCustomData> = {
     focusable?: boolean;
     stickyHeader?: boolean;
     getRowClassName?: (row: Row<TData>) => string;
+    /**
+     * The row the user is working with — e.g. the one whose preview is open beside the table — matched
+     * against `row.id`. Drawn in the Figma table-row **Focused** state (the 3px focus frame keyboard
+     * focus draws; with a ticked row, "Selected + focused"), and it stays drawn after focus moves on,
+     * which `:focus-visible` alone cannot do. Opt-in: tables that do not pass it are unchanged.
+     */
+    activeRowId?: string | null;
     onRowClick?: (e: MouseEvent<HTMLTableRowElement, globalThis.MouseEvent> | React.KeyboardEvent<HTMLTableRowElement>, row: Row<TData>) => void;
     renderSubRows?: (props: {
         rows: TCustomData[];

package/dist/table/components/StyledTable.module.js

@@ -1,57 +1,57 @@
-var t = "_tbody_yxsst_124", e = "_expanded_row_yxsst_174", _ = "_selected_yxsst_192", s = "_shadowed_yxsst_217", l = "_resizer_yxsst_274", a = "_isResizing_yxsst_286", o = {
-  "asma-ui-table-styled-table": "_asma-ui-table-styled-table_yxsst_1",
-  "table-wrapper": "_table-wrapper_yxsst_26",
-  "table-shell": "_table-shell_yxsst_33",
-  "table-wrapper--no-rows": "_table-wrapper--no-rows_yxsst_39",
-  "table-wrapper--proxy": "_table-wrapper--proxy_yxsst_42",
-  "table-wrapper--proxy-bottom": "_table-wrapper--proxy-bottom_yxsst_43",
-  "table-wrapper-fetching": "_table-wrapper-fetching_yxsst_53",
-  "table-scroll": "_table-scroll_yxsst_56",
-  "table-x--fill-height": "_table-x--fill-height_yxsst_65",
-  "table-x": "_table-x_yxsst_65",
-  "table-content": "_table-content_yxsst_80",
-  "table-header--sticky": "_table-header--sticky_yxsst_85",
-  "table-hscroll": "_table-hscroll_yxsst_90",
-  "table-hscroll__content": "_table-hscroll__content_yxsst_100",
-  "no-rows-overlay-container": "_no-rows-overlay-container_yxsst_103",
-  "no-rows-overlay-content": "_no-rows-overlay-content_yxsst_111",
-  "styled-table": "_styled-table_yxsst_115",
-  tbody: t,
-  "loading-icon": "_loading-icon_yxsst_129",
-  "t-row": "_t-row_yxsst_136",
-  "t-cell": "_t-cell_yxsst_136",
-  "action-cell": "_action-cell_yxsst_146",
-  "fixed-cell": "_fixed-cell_yxsst_150",
-  "fixed-right-cell": "_fixed-right-cell_yxsst_153",
-  expanded_row: e,
+var e = "_tbody_ewknl_124", l = "_expanded_row_ewknl_174", _ = "_selected_ewknl_192", t = "_shadowed_ewknl_217", a = "_resizer_ewknl_274", n = "_isResizing_ewknl_286", o = {
+  "asma-ui-table-styled-table": "_asma-ui-table-styled-table_ewknl_1",
+  "table-wrapper": "_table-wrapper_ewknl_26",
+  "table-shell": "_table-shell_ewknl_33",
+  "table-wrapper--no-rows": "_table-wrapper--no-rows_ewknl_39",
+  "table-wrapper--proxy": "_table-wrapper--proxy_ewknl_42",
+  "table-wrapper--proxy-bottom": "_table-wrapper--proxy-bottom_ewknl_43",
+  "table-wrapper-fetching": "_table-wrapper-fetching_ewknl_53",
+  "table-scroll": "_table-scroll_ewknl_56",
+  "table-x--fill-height": "_table-x--fill-height_ewknl_65",
+  "table-x": "_table-x_ewknl_65",
+  "table-content": "_table-content_ewknl_80",
+  "table-header--sticky": "_table-header--sticky_ewknl_85",
+  "table-hscroll": "_table-hscroll_ewknl_90",
+  "table-hscroll__content": "_table-hscroll__content_ewknl_100",
+  "no-rows-overlay-container": "_no-rows-overlay-container_ewknl_103",
+  "no-rows-overlay-content": "_no-rows-overlay-content_ewknl_111",
+  "styled-table": "_styled-table_ewknl_115",
+  tbody: e,
+  "loading-icon": "_loading-icon_ewknl_129",
+  "t-row": "_t-row_ewknl_136",
+  "t-cell": "_t-cell_ewknl_136",
+  "action-cell": "_action-cell_ewknl_146",
+  "fixed-cell": "_fixed-cell_ewknl_150",
+  "fixed-right-cell": "_fixed-right-cell_ewknl_153",
+  expanded_row: l,
   selected: _,
-  "single-selection": "_single-selection_yxsst_195",
-  "action-cell--no-shadow": "_action-cell--no-shadow_yxsst_213",
-  shadowed: s,
-  "shadowed-right": "_shadowed-right_yxsst_253",
-  "is-loading": "_is-loading_yxsst_258",
-  "action-cell-default-background": "_action-cell-default-background_yxsst_261",
-  "fixed-cell-default-background": "_fixed-cell-default-background_yxsst_264",
-  "fixed-right-cell-default-background": "_fixed-right-cell-default-background_yxsst_267",
-  "sortable-column": "_sortable-column_yxsst_270",
-  resizer: l,
-  isResizing: a,
-  "hide-table-header": "_hide-table-header_yxsst_298",
-  "show-table-header": "_show-table-header_yxsst_302",
-  "table-header": "_table-header_yxsst_85",
-  "hide-header": "_hide-header_yxsst_338",
-  "t-cell__actions": "_t-cell__actions_yxsst_341",
-  "t-cell__actions--no-shadow": "_t-cell__actions--no-shadow_yxsst_350",
-  "t-cell__fixed": "_t-cell__fixed_yxsst_355",
-  "t-cell__fixed-right": "_t-cell__fixed-right_yxsst_363",
-  "sort-icon": "_sort-icon_yxsst_371",
-  "header-content": "_header-content_yxsst_375",
-  "table-footer--sticky": "_table-footer--sticky_yxsst_406",
-  "table-footer--inline": "_table-footer--inline_yxsst_417",
-  "table-bottom": "_table-bottom_yxsst_428",
-  "table-bottom--sticky": "_table-bottom--sticky_yxsst_442",
-  "cursor-not-allowed": "_cursor-not-allowed_yxsst_446",
-  "select-control": "_select-control_yxsst_450"
+  "single-selection": "_single-selection_ewknl_195",
+  "action-cell--no-shadow": "_action-cell--no-shadow_ewknl_213",
+  shadowed: t,
+  "shadowed-right": "_shadowed-right_ewknl_253",
+  "is-loading": "_is-loading_ewknl_258",
+  "action-cell-default-background": "_action-cell-default-background_ewknl_261",
+  "fixed-cell-default-background": "_fixed-cell-default-background_ewknl_264",
+  "fixed-right-cell-default-background": "_fixed-right-cell-default-background_ewknl_267",
+  "sortable-column": "_sortable-column_ewknl_270",
+  resizer: a,
+  isResizing: n,
+  "hide-table-header": "_hide-table-header_ewknl_298",
+  "show-table-header": "_show-table-header_ewknl_302",
+  "table-header": "_table-header_ewknl_85",
+  "hide-header": "_hide-header_ewknl_338",
+  "t-cell__actions": "_t-cell__actions_ewknl_341",
+  "t-cell__actions--no-shadow": "_t-cell__actions--no-shadow_ewknl_350",
+  "t-cell__fixed": "_t-cell__fixed_ewknl_355",
+  "t-cell__fixed-right": "_t-cell__fixed-right_ewknl_363",
+  "sort-icon": "_sort-icon_ewknl_371",
+  "header-content": "_header-content_ewknl_375",
+  "table-footer--sticky": "_table-footer--sticky_ewknl_409",
+  "table-footer--inline": "_table-footer--inline_ewknl_420",
+  "table-bottom": "_table-bottom_ewknl_431",
+  "table-bottom--sticky": "_table-bottom--sticky_ewknl_445",
+  "cursor-not-allowed": "_cursor-not-allowed_ewknl_449",
+  "select-control": "_select-control_ewknl_453"
 };
 export {
   o as default

package/dist/table/components/TableRow.js

@@ -1,46 +1,46 @@
-import { ACTIONS_COLUMN_ID as j } from "../types.js";
-import { useRootContext as he } from "../context/RootContext.js";
+import { ACTIONS_COLUMN_ID as q } from "../types.js";
+import { useRootContext as pe } from "../context/RootContext.js";
 import n from "./StyledTable.module.js";
-import { compact as pe } from "../../helpers/arrays.js";
-import q from "clsx";
-import { Fragment as xe, useCallback as K, useEffect as be, useLayoutEffect as Ce, useMemo as m, useRef as Re, useState as Se } from "react";
-import { Fragment as De, jsx as s, jsxs as C } from "react/jsx-runtime";
-import { useSortable as ve } from "@dnd-kit/sortable";
-import { flexRender as ye } from "@tanstack/react-table";
-import { CSS as Ne } from "@dnd-kit/utilities";
-var Fe = (R) => {
+import { compact as xe } from "../../helpers/arrays.js";
+import K from "clsx";
+import { Fragment as be, useCallback as G, useEffect as Ce, useLayoutEffect as Re, useMemo as m, useRef as Se, useState as De } from "react";
+import { Fragment as ve, jsx as s, jsxs as C } from "react/jsx-runtime";
+import { useSortable as ye } from "@dnd-kit/sortable";
+import { flexRender as Ne } from "@tanstack/react-table";
+import { CSS as Fe } from "@dnd-kit/utilities";
+var ke = (R) => {
   const t = R.closest("table");
   if (!t) return !1;
   const r = Array.from(document.querySelectorAll('a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])')).find((g) => !t.contains(g) && !!(t.compareDocumentPosition(g) & Node.DOCUMENT_POSITION_FOLLOWING));
   return r ? (r.focus(), document.activeElement === r) : !1;
 };
-function Ue({ styledTableProps: R, row: t, index: r, hasFocusedRow: g, columnWindow: { paddingLeft: h, paddingRight: p, indexes: T } }) {
-  const { loading: G, getRowClassName: l, rowHeight: x, onRowClick: S, expandArrow: V, enableDnd: w, disableDndForRow: Y, tdClassName: A, customSubRowData: B, renderSubRows: J, defaultExpanded: Q, actions: D, customActionsNode: X, textExpandArrow: L, enableMultiRowSelection: Z, enableRowSelection: ee, singleSelectionRow: te } = R, v = Y?.(t), { transform: ne, transition: oe, setNodeRef: M, isDragging: H } = ve({
+function We({ styledTableProps: R, row: t, index: r, hasFocusedRow: g, columnWindow: { paddingLeft: h, paddingRight: p, indexes: T } }) {
+  const { loading: V, getRowClassName: l, activeRowId: w, rowHeight: x, onRowClick: S, expandArrow: Y, enableDnd: A, disableDndForRow: J, tdClassName: B, customSubRowData: L, renderSubRows: Q, defaultExpanded: X, actions: D, customActionsNode: Z, textExpandArrow: M, enableMultiRowSelection: ee, enableRowSelection: te, singleSelectionRow: ne } = R, v = J?.(t), { transform: ie, transition: oe, setNodeRef: H, isDragging: O } = ye({
     id: t.original.id,
-    disabled: !w || v
-  }), ie = {
-    transform: Ne.Transform.toString(ne),
+    disabled: !A || v
+  }), se = {
+    transform: Fe.Transform.toString(ie),
     transition: oe,
-    opacity: H ? 0.8 : 1,
-    zIndex: H ? 1 : 0,
+    opacity: O ? 0.8 : 1,
+    zIndex: O ? 1 : 0,
     position: "relative"
-  }, { isResizing: se, disableResizingFlag: le } = he(), y = t.isExpanded(), b = Re(null), [ae, ce] = Se(void 0);
-  Ce(() => {
-    !y && b.current && ce(b.current.cells[0]?.clientHeight ?? b.current.offsetHeight);
+  }, { isResizing: le, disableResizingFlag: ae } = pe(), y = t.isExpanded(), b = Se(null), [ce, de] = De(void 0);
+  Re(() => {
+    !y && b.current && de(b.current.cells[0]?.clientHeight ?? b.current.offsetHeight);
   }, [y]);
-  const de = K((e) => {
-    b.current = e, v || M(e);
-  }, [v, M]), O = y ? ae ?? x : x;
-  be(() => {
-    Q && t.getCanExpand() && !t.getIsExpanded() && t.toggleExpand();
+  const re = G((e) => {
+    b.current = e, v || H(e);
+  }, [v, H]), U = y ? ce ?? x : x;
+  Ce(() => {
+    X && t.getCanExpand() && !t.getIsExpanded() && t.toggleExpand();
   }, []);
-  const U = (e) => {
-    t.getCanExpand() && !V && t.getToggleExpandedHandler()(), document.getElementById(t.id)?.focus();
-    const o = window.getSelection()?.type !== "Range" && !se, i = S instanceof Function;
-    !i && L && o ? t.toggleExpand() : i && o && S(e, t), le();
-  }, re = (e) => {
-    e.target.classList.contains("MuiModal-backdrop") || e.target.nodeName === "INPUT" || e.target.nodeName === "BUTTON" || e.target.nodeName === "LI" || e.target.closest("li") || U(e);
+  const W = (e) => {
+    t.getCanExpand() && !Y && t.getToggleExpandedHandler()(), document.getElementById(t.id)?.focus();
+    const i = window.getSelection()?.type !== "Range" && !le, o = S instanceof Function;
+    !o && M && i ? t.toggleExpand() : o && i && S(e, t), ae();
   }, ue = (e) => {
+    e.target.classList.contains("MuiModal-backdrop") || e.target.nodeName === "INPUT" || e.target.nodeName === "BUTTON" || e.target.nodeName === "LI" || e.target.closest("li") || W(e);
+  }, fe = (e) => {
     if (e.target === e.currentTarget)
       switch (e.key) {
         case "Tab":
@@ -49,9 +49,9 @@ function Ue({ styledTableProps: R, row: t, index: r, hasFocusedRow: g, columnWin
               e.preventDefault();
               break;
             }
-            const o = e.currentTarget.closest("table")?.querySelector('thead tr[tabindex="0"]');
-            o && (e.preventDefault(), o.focus());
-          } else (t.focusNextRow() || Fe(e.currentTarget)) && e.preventDefault();
+            const i = e.currentTarget.closest("table")?.querySelector('thead tr[tabindex="0"]');
+            i && (e.preventDefault(), i.focus());
+          } else (t.focusNextRow() || ke(e.currentTarget)) && e.preventDefault();
           break;
         case "ArrowDown":
           t.focusNextRow() && e.preventDefault();
@@ -60,29 +60,29 @@ function Ue({ styledTableProps: R, row: t, index: r, hasFocusedRow: g, columnWin
           t.focusPrevRow() && e.preventDefault();
           break;
         case "Enter":
-          e.preventDefault(), U(e);
+          e.preventDefault(), W(e);
           break;
       }
-  }, u = t.getVisibleCells().map((e, o, i) => ({
+  }, u = t.getVisibleCells().map((e, i, o) => ({
     ...e,
-    left: i.slice(0, o).reduce((c, d) => c + (d.column.getSize() ?? 0), 0)
-  })), W = m(() => u.filter((e) => !e.column.columnDef.fixedLeft && !e.column.columnDef.fixedRight && e.column.id !== "actions"), [u]), a = m(() => u.filter((e) => !!e.column.columnDef.fixedRight || e.column.id === "actions").map((e, o, i) => ({
+    left: o.slice(0, i).reduce((c, d) => c + (d.column.getSize() ?? 0), 0)
+  })), _ = m(() => u.filter((e) => !e.column.columnDef.fixedLeft && !e.column.columnDef.fixedRight && e.column.id !== "actions"), [u]), a = m(() => u.filter((e) => !!e.column.columnDef.fixedRight || e.column.id === "actions").map((e, i, o) => ({
     ...e,
-    right: i.slice(o + 1).reduce((c, d) => c + (d.column.getSize() ?? 0), 0)
-  })), [u]), _ = m(() => a.some((e) => e.column.id === j), [a]), z = !!D || !!X, P = m(() => a.some((e) => !!e.column.columnDef.fixedRight), [a]), f = m(() => u.filter((e) => e.column.columnDef.fixedLeft), [u]), N = !Z && !ee && te, F = t.getIsSelected() && N, k = S instanceof Function, $ = T.length > 0 ? pe(T.map((e) => W[e])) : W, E = K((e, o) => {
-    const i = e.column.id === j, c = e.column.columnDef.fixedLeft, d = !!e.column.columnDef.fixedRight, fe = e.id === f.at(-1)?.id, me = e.id === a.at(0)?.id && !i, ge = t.isExpanded(), I = o === 0;
+    right: o.slice(i + 1).reduce((c, d) => c + (d.column.getSize() ?? 0), 0)
+  })), [u]), z = m(() => a.some((e) => e.column.id === q), [a]), P = !!D || !!Z, $ = m(() => a.some((e) => !!e.column.columnDef.fixedRight), [a]), f = m(() => u.filter((e) => e.column.columnDef.fixedLeft), [u]), N = !ee && !te && ne, F = t.getIsSelected() && N, k = S instanceof Function, j = T.length > 0 ? xe(T.map((e) => _[e])) : _, E = G((e, i) => {
+    const o = e.column.id === q, c = e.column.columnDef.fixedLeft, d = !!e.column.columnDef.fixedRight, me = e.id === f.at(-1)?.id, ge = e.id === a.at(0)?.id && !o, he = t.isExpanded(), I = i === 0;
     return /* @__PURE__ */ s("td", {
-      className: q(n["t-cell"], k && "cursor-pointer", A, i && n["action-cell"], i && (!z || P) && n["action-cell--no-shadow"], i && !!D && f.length && n.shadowed, i && (l?.(t) ? l?.(t) : n["action-cell-default-background"]), c && n["fixed-cell"], d && n["fixed-right-cell"], fe && n.shadowed, me && n["shadowed-right"], t.getIsSelected() && n.selected, c && (l?.(t) ? l?.(t) : n["fixed-cell-default-background"]), d && (l?.(t) ? l?.(t) : n["fixed-right-cell-default-background"]), ge && n.expanded_row, !!F && n["single-selection"]),
+      className: K(n["t-cell"], k && "cursor-pointer", B, o && n["action-cell"], o && (!P || $) && n["action-cell--no-shadow"], o && !!D && f.length && n.shadowed, o && (l?.(t) ? l?.(t) : n["action-cell-default-background"]), c && n["fixed-cell"], d && n["fixed-right-cell"], me && n.shadowed, ge && n["shadowed-right"], t.getIsSelected() && n.selected, c && (l?.(t) ? l?.(t) : n["fixed-cell-default-background"]), d && (l?.(t) ? l?.(t) : n["fixed-right-cell-default-background"]), he && n.expanded_row, !!F && n["single-selection"]),
       style: {
         left: c ? e.left : void 0,
-        right: d ? e.right + (_ ? -1 : 0) : void 0
+        right: d ? e.right + (z ? -1 : 0) : void 0
       },
       children: /* @__PURE__ */ C("div", {
         style: {
           display: "flex",
           alignItems: "center",
           minWidth: I ? 32 : void 0,
-          minHeight: O,
+          minHeight: U,
           position: "relative"
         },
         children: [I && F && /* @__PURE__ */ s("span", {
@@ -94,53 +94,54 @@ function Ue({ styledTableProps: R, row: t, index: r, hasFocusedRow: g, columnWin
             top: "50%",
             transform: "translateY(-50%)"
           },
-          children: /* @__PURE__ */ s(ke, {})
+          children: /* @__PURE__ */ s(Ee, {})
         }), /* @__PURE__ */ s("span", {
           style: {
             marginLeft: I && N ? 30 : 0,
             width: "100%"
           },
-          children: ye(e.column.columnDef.cell, e.getContext())
+          children: Ne(e.column.columnDef.cell, e.getContext())
         })]
       })
     }, e.id);
   }, [
     F,
     D,
-    O,
+    U,
     l,
     k,
-    _,
-    P,
+    z,
+    $,
     f,
     a,
     t,
-    z,
+    P,
     N,
-    A
+    B
   ]);
-  return /* @__PURE__ */ C(xe, { children: [/* @__PURE__ */ C("tr", {
+  return /* @__PURE__ */ C(be, { children: [/* @__PURE__ */ C("tr", {
     "aria-selected": t.getIsSelected() || t.isFocused() ? "true" : "false",
     tabIndex: t.isFocused() || r === 0 && !g ? 0 : -1,
     "data-index": r,
     "data-test": t.id,
+    "data-active": w != null && t.id === w ? "true" : void 0,
     id: t.id,
-    className: q(n["t-row"], G && n["is-loading"], l?.(t)),
+    className: K(n["t-row"], V && n["is-loading"], l?.(t)),
     style: {
       height: x ? `${x}px` : "inherit",
-      ...w && ie
+      ...A && se
     },
-    ref: de,
+    ref: re,
     onFocus: (e) => {
       e.target === e.currentTarget && !t.isFocused() && t.onChangeFocused(!0);
     },
-    onMouseUp: re,
+    onMouseUp: ue,
     onMouseDown: (e) => {
-      e.detail > 1 && !k && L && e.preventDefault();
+      e.detail > 1 && !k && M && e.preventDefault();
     },
-    onKeyDownCapture: ue,
+    onKeyDownCapture: fe,
     children: [
-      f.map((e, o) => E(e, o)),
+      f.map((e, i) => E(e, i)),
       h > 0 && /* @__PURE__ */ s("td", {
         "aria-hidden": !0,
         className: n["t-cell"],
@@ -152,7 +153,7 @@ function Ue({ styledTableProps: R, row: t, index: r, hasFocusedRow: g, columnWin
           border: "none"
         }
       }),
-      $.map((e, o) => E(e, f.length + o)),
+      j.map((e, i) => E(e, f.length + i)),
       p > 0 && /* @__PURE__ */ s("td", {
         "aria-hidden": !0,
         className: n["t-cell"],
@@ -164,14 +165,14 @@ function Ue({ styledTableProps: R, row: t, index: r, hasFocusedRow: g, columnWin
           border: "none"
         }
       }),
-      a.map((e, o) => E(e, f.length + $.length + o))
+      a.map((e, i) => E(e, f.length + j.length + i))
     ]
-  }), t.getIsExpanded() && /* @__PURE__ */ s(De, { children: B && J?.({
-    rows: B.get(t.original.id.toString()) ?? [],
+  }), t.getIsExpanded() && /* @__PURE__ */ s(ve, { children: L && Q?.({
+    rows: L.get(t.original.id.toString()) ?? [],
     row: t.original
   }) })] }, t.id);
 }
-var ke = () => /* @__PURE__ */ C("svg", {
+var Ee = () => /* @__PURE__ */ C("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "20",
   height: "20",
@@ -183,5 +184,5 @@ var ke = () => /* @__PURE__ */ C("svg", {
   })]
 });
 export {
-  Ue as TableRow
+  We as TableRow
 };

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

@@ -1,17 +1,17 @@
-import { ChevronRightIcon as N } from "../../../components/icons/chevron-right-icon/ChevronRightIcon.js";
+import { ChevronRightIcon as $ } from "../../../components/icons/chevron-right-icon/ChevronRightIcon.js";
 import { ChevronLeftIcon as O } from "../../../components/icons/chevron-left-icon/ChevronLeftIcon.js";
 import { StyledPopover as k } from "../../../components/utils/popover/StyledPopover.js";
 import { StyledMenuList as z } from "../../../components/navigation/menu/StyledMenuList.js";
 import { StyledSelectItem as D } from "../../../components/inputs/select/StyledSelectItem.js";
-import m from "../StyledTable.module.js";
-import { StyledTooltip as p } from "../../shared-components/tooltip/index.js";
-import { ChevronDownIcon as L } from "../../shared-components/ChevronDownIcon.js";
-import { useKeyboardSelectMenu as R } from "../../hooks/useToggleMenuVisibility.hook.js";
+import h from "../StyledTable.module.js";
+import { StyledTooltip as m } from "../../shared-components/tooltip/index.js";
+import { ChevronDownIcon as F } from "../../shared-components/ChevronDownIcon.js";
+import { useKeyboardSelectMenu as L } from "../../hooks/useToggleMenuVisibility.hook.js";
 import { StyledButton as u } from "../../shared-components/button/StyledButton.js";
-import { useCallback as I, useId as F, useMemo as S, useRef as K } from "react";
+import { useCallback as I, useId as R, 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), r = y === "no", a = F(), b = S(() => ({
+  const v = K(null), r = y === "no", a = R(), b = S(() => ({
     anchorOrigin: {
       vertical: -5,
       horizontal: "center"
@@ -21,20 +21,20 @@ function U({ table: o, locale: y }) {
       horizontal: "center"
     }
   }), []), l = I(() => {
-    const t = m["asma-ui-table-styled-table"], n = v.current?.closest(`.${t}`)?.querySelector(`.${m["table-scroll"]}, .${m["table-wrapper"]}`);
+    const t = h["asma-ui-table-styled-table"], n = v.current?.closest(`.${t}`)?.querySelector(`.${h["table-scroll"]}, .${h["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, 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({
+  }, [o, l]), { anchorEl: g, open: d, handleClose: x, handleOpen: N, triggerRef: T, activeIndex: p, handleKeyDown: w } = L({
     optionCount: c.length,
     selectedIndex: i - 1,
     onSelect: (t) => P(c[t])
   });
   return /* @__PURE__ */ f(M, { children: [
-    /* @__PURE__ */ e(p, {
+    /* @__PURE__ */ e(m, {
       title: r ? "Nåværende side" : "Current Page",
       children: /* @__PURE__ */ e("div", {
         ref: v,
@@ -42,15 +42,15 @@ function U({ table: o, locale: y }) {
           dataTest: "current-page-button",
           variant: "outlined",
           size: "large",
-          refLink: w,
-          onClick: T,
-          onKeyDown: $,
+          refLink: T,
+          onClick: N,
+          onKeyDown: w,
           role: "combobox",
           "aria-haspopup": "listbox",
           "aria-controls": d ? a : void 0,
           "aria-expanded": d,
-          "aria-activedescendant": h === null ? void 0 : `${a}-option-${h}`,
-          endIcon: /* @__PURE__ */ e(L, {
+          "aria-activedescendant": p === null ? void 0 : `${a}-option-${p}`,
+          endIcon: /* @__PURE__ */ e(F, {
             className: `${d ? "flip-180" : "rotate-0"} transition-transform duration-300`,
             height: 24,
             width: 24
@@ -87,7 +87,7 @@ function U({ table: o, locale: y }) {
         role: "listbox",
         children: c.map((t, n) => /* @__PURE__ */ e(D, {
           id: `${a}-option-${n}`,
-          active: n === h,
+          active: n === p,
           onClick: (C) => {
             C.stopPropagation(), C.preventDefault(), P(t), x();
           },
@@ -103,7 +103,7 @@ function U({ table: o, locale: y }) {
         }, t))
       })
     }),
-    /* @__PURE__ */ e(p, {
+    /* @__PURE__ */ e(m, {
       title: i === 1 ? "" : r ? "Forrige side" : "Previous Page",
       children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(u, {
         dataTest: "prev-page-button",
@@ -113,13 +113,14 @@ function U({ table: o, locale: y }) {
         },
         size: "large",
         disabled: !o.getCanPreviousPage(),
+        "aria-label": r ? "Forrige side" : "Previous page",
         startIcon: /* @__PURE__ */ e(O, {
           height: 24,
           width: 24
         })
       }) })
     }),
-    /* @__PURE__ */ e(p, {
+    /* @__PURE__ */ e(m, {
       title: i === s ? "" : r ? "Neste side" : "Next Page",
       children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(u, {
         dataTest: "next-page-button",
@@ -129,7 +130,8 @@ function U({ table: o, locale: y }) {
         },
         size: "large",
         disabled: !o.getCanNextPage(),
-        startIcon: /* @__PURE__ */ e(N, {
+        "aria-label": r ? "Neste side" : "Next page",
+        startIcon: /* @__PURE__ */ e($, {
           height: 24,
           width: 24
         })

package/package.json

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