asma-ui-core 3.103.0 → 3.104.0

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

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

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

@@ -55,6 +55,8 @@ 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;
 }
 /**

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

@@ -5,6 +5,9 @@ interface DialogTitleProps extends HTMLAttributes<HTMLHeadingElement> {
 }
 /**
  * MUI-free dialog title: a semantic `<h2>` with the previous SCSS metrics as Tailwind. TASK-101.
+ *
+ * Adopts the id its enclosing `StyledDialog` offers, so the dialog is named by this visible title
+ * rather than by its test hook (WCAG 4.1.2). An explicit `id` from the caller always wins.
  */
-export declare const StyledDialogTitle: ({ children, className, sx, style, classes: _classes, ...rest }: DialogTitleProps) => JSX.Element | null;
+export declare const StyledDialogTitle: ({ children, className, sx, style, id, classes: _classes, ...rest }: DialogTitleProps) => JSX.Element | null;
 export {};

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

@@ -0,0 +1,15 @@
+/**
+ * Lets a `<StyledDialogTitle>` child name the dialog that contains it.
+ *
+ * `StyledDialog` can point `aria-labelledby` at its own `dialogTitle` prop directly, but a large
+ * share of consumers render the title as a child instead (e.g. advoca's privacy-consent modal).
+ * Without this, those dialogs fall back to having no accessible name at all — WCAG 4.1.2 requires
+ * the dialog to be named by its visible title, not by a test hook.
+ */
+export interface StyledDialogTitleContextValue {
+    /** `id` the title adopts so the dialog can reference it. */
+    titleId: string;
+    /** Registers the title's actual id, including an explicit caller-supplied id. */
+    setTitleId: (titleId: string | undefined) => void;
+}
+export declare const StyledDialogTitleContext: import('react').Context<StyledDialogTitleContextValue | null>;

package/dist/src/components/navigation/link/StyledLink.d.ts

@@ -1,4 +1,4 @@
-import { default as React, AnchorHTMLAttributes, ReactNode } from 'react';
+import { default as React, AnchorHTMLAttributes, MouseEvent, ReactNode } from 'react';
 /**
  * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#14472-14569 (Design-System · "Link")
  *
@@ -6,7 +6,8 @@ import { default as React, AnchorHTMLAttributes, ReactNode } from 'react';
  * Disabled = delta-300; Focused/Pressed adds a 1px gama-400 rounded indicator (radius 4, px4/py2).
  * State is derived at runtime from `:hover`/`:focus`/`disabled`, not a prop.
  */
-export type StyledLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+export type StyledLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'> & {
+    onClick?: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
     /** @figmaProp State = true→"Disabled" (renders a non-interactive <span>, delta-300) */
     disabled?: boolean;
     /** @figmaProp Size = small→"Base" (14/20) | large→"Medium" (16/24); xs (12/20) = none (no DS size) */

package/dist/src/table/components/columns/dndHandleColumn.d.ts

@@ -1,8 +1,9 @@
 import { Arguments } from '@dnd-kit/sortable/dist/hooks/useSortable';
 import { FC } from 'react';
 import { ColumnDef } from '../../types';
-export declare function generateDndHandleColumn<TData>(custom_props?: ColumnDef<TData, unknown>, rowHeight?: number): ColumnDef<TData, unknown>;
+export declare function generateDndHandleColumn<TData>(custom_props?: ColumnDef<TData, unknown>, rowHeight?: number, locale?: 'en' | 'no'): ColumnDef<TData, unknown>;
 export declare const RowDragHandleCell: FC<Partial<Omit<Arguments, 'id'>> & {
+    ariaLabel?: string;
     rowId: string;
     rowHeight?: number;
 }>;

package/dist/src/table/components/columns/expandColumn.d.ts

@@ -1,2 +1,2 @@
 import { ColumnDef } from '../../types';
-export declare function generateExpandColumn<TData>(isFixed: boolean, rowHeight?: number): ColumnDef<TData, unknown>;
+export declare function generateExpandColumn<TData>(isFixed: boolean, rowHeight?: number, locale?: 'en' | 'no'): ColumnDef<TData, unknown>;

package/dist/src/table/components/columns/showTextColumn.d.ts

@@ -1,2 +1,2 @@
 import { ColumnDef } from '../../types';
-export declare function generateShowFullTextColumn<TData>(isFixed: boolean, rowHeight?: number): ColumnDef<TData, unknown>;
+export declare function generateShowFullTextColumn<TData>(isFixed: boolean, rowHeight?: number, locale?: 'en' | 'no'): ColumnDef<TData, unknown>;

package/dist/table/components/columns/dndHandleColumn.js

@@ -1,40 +1,42 @@
-import { DND_HANDLE_COLUMN_ID as a } from "../../types.js";
-import { DotsHorizontalIcon as n } from "../../shared-components/DotsHorizontalIcon.js";
-import d from "clsx";
-import { jsx as o } from "react/jsx-runtime";
-import { useSortable as s } from "@dnd-kit/sortable";
-function D(r, t) {
+import { DND_HANDLE_COLUMN_ID as n } from "../../types.js";
+import { DotsHorizontalIcon as d } from "../../shared-components/DotsHorizontalIcon.js";
+import s from "clsx";
+import { jsx as a } from "react/jsx-runtime";
+import { useSortable as m } from "@dnd-kit/sortable";
+function p(r, t, l) {
   return {
     enableHiding: !1,
     enableSorting: !1,
     header: () => null,
-    cell: ({ row: e }) => /* @__PURE__ */ o(m, {
+    cell: ({ row: e }) => /* @__PURE__ */ a(u, {
+      ariaLabel: l === "no" ? `Endre rekkefølge på rad ${e.index + 1}` : `Reorder row ${e.index + 1}`,
       rowId: e.id,
       rowHeight: t
     }),
     minSize: 50,
     size: 50,
     ...r,
-    id: a
+    id: n
   };
 }
-var m = ({ rowId: r, rowHeight: t, ...e }) => {
-  const { attributes: l, listeners: i } = s({
-    id: r,
+var u = ({ ariaLabel: r, rowId: t, rowHeight: l, ...e }) => {
+  const { attributes: i, listeners: o } = m({
+    id: t,
     ...e
   });
-  return /* @__PURE__ */ o("div", {
-    ...l,
+  return /* @__PURE__ */ a("div", {
     ...i,
-    style: { height: t ?? "auto" },
-    children: /* @__PURE__ */ o(n, {
+    ...o,
+    "aria-label": r,
+    style: { height: l ?? "auto" },
+    children: /* @__PURE__ */ a(d, {
       width: 24,
       height: 24,
-      className: d(e.disabled ? "cursor-not-allowed text-delta-300" : "cursor-grab text-delta-800")
+      className: s(e.disabled ? "cursor-not-allowed text-delta-300" : "cursor-grab text-delta-800")
     })
   });
 };
 export {
-  m as RowDragHandleCell,
-  D as generateDndHandleColumn
+  u as RowDragHandleCell,
+  p as generateDndHandleColumn
 };

package/dist/table/components/columns/expandColumn.js

@@ -1,31 +1,31 @@
-import { EXPAND_COLUMN_ID as i } from "../../types.js";
-import { ChevronDownIcon as a } from "../../shared-components/ChevronDownIcon.js";
-import { jsx as t } from "react/jsx-runtime";
+import { EXPAND_COLUMN_ID as a } from "../../types.js";
+import { ChevronDownIcon as d } from "../../shared-components/ChevronDownIcon.js";
+import { jsx as r } from "react/jsx-runtime";
 import "@tanstack/react-table";
-function f(r, o) {
+function x(t, o, i) {
   return {
-    id: i,
+    id: a,
     minSize: 50,
     maxSize: 50,
     size: 50,
     enableHiding: !1,
     enableSorting: !1,
     header: () => null,
-    cell: ({ cell: e }) => {
-      const n = e.row.getIsExpanded();
-      return e.row.getCanExpand() ? /* @__PURE__ */ t("button", {
+    cell: ({ cell: n }) => {
+      const e = n.row.getIsExpanded();
+      return n.row.getCanExpand() ? /* @__PURE__ */ r("button", {
         type: "button",
-        "aria-label": n ? "Collapse row" : "Expand row",
-        "aria-expanded": n,
+        "aria-label": i === "no" ? e ? `Skjul rad ${n.row.index + 1}` : `Utvid rad ${n.row.index + 1}` : e ? `Collapse row ${n.row.index + 1}` : `Expand row ${n.row.index + 1}`,
+        "aria-expanded": e,
         className: "flex w-full items-center justify-center border-0 bg-transparent p-0 outline-none focus:outline-none",
-        onClick: () => e.row.getToggleExpandedHandler()(),
+        onClick: () => n.row.getToggleExpandedHandler()(),
         style: { height: o ?? "auto" },
-        children: /* @__PURE__ */ t(a, {
+        children: /* @__PURE__ */ r(d, {
           className: "block size-6 shrink-0",
           width: 24,
           height: 24,
           style: {
-            transform: n ? "rotate(180deg)" : "rotate(0deg)",
+            transform: e ? "rotate(180deg)" : "rotate(0deg)",
             transformBox: "fill-box",
             transformOrigin: "center",
             transitionProperty: "transform",
@@ -35,9 +35,9 @@ function f(r, o) {
         })
       }) : null;
     },
-    fixedLeft: r
+    fixedLeft: t
   };
 }
 export {
-  f as generateExpandColumn
+  x as generateExpandColumn
 };

package/dist/table/components/columns/showTextColumn.js

@@ -1,35 +1,36 @@
-import { SHOW_FULL_TEXT_ID as i } from "../../types.js";
-import { ChevronDownIcon as l } from "../../shared-components/ChevronDownIcon.js";
-import { StyledButton as s } from "../../shared-components/button/StyledButton.js";
-import { jsx as o } from "react/jsx-runtime";
-function f(e, r) {
+import { SHOW_FULL_TEXT_ID as l } from "../../types.js";
+import { ChevronDownIcon as s } from "../../shared-components/ChevronDownIcon.js";
+import { StyledButton as d } from "../../shared-components/button/StyledButton.js";
+import { jsx as r } from "react/jsx-runtime";
+function c(e, o, n) {
   return {
-    id: i,
+    id: l,
     minSize: 38,
     maxSize: 38,
     size: 38,
     enableHiding: !1,
     enableSorting: !1,
     header: () => null,
-    cell: (n) => /* @__PURE__ */ o(u, {
-      info: n,
-      rowHeight: r
+    cell: (a) => /* @__PURE__ */ r(u, {
+      info: a,
+      locale: n,
+      rowHeight: o
     }),
     fixedLeft: e
   };
 }
-function u({ info: e, rowHeight: r }) {
-  const n = e.row.getCanExpand(), a = e.row.isExpanded();
-  return /* @__PURE__ */ o("div", {
+function u({ info: e, locale: o, rowHeight: n }) {
+  const a = e.row.getCanExpand(), i = e.row.isExpanded();
+  return /* @__PURE__ */ r("div", {
     className: "flex w-full items-center justify-center",
-    style: { height: r ?? "auto" },
-    children: /* @__PURE__ */ o(s, {
+    style: { height: n ?? "auto" },
+    children: /* @__PURE__ */ r(d, {
       dataTest: "expand-text-button",
-      "aria-label": a ? "Collapse text" : "Show full text",
+      "aria-label": o === "no" ? i ? `Skjul full tekst for rad ${e.row.index + 1}` : `Vis full tekst for rad ${e.row.index + 1}` : i ? `Collapse full text for row ${e.row.index + 1}` : `Show full text for row ${e.row.index + 1}`,
       size: "small",
       variant: "textGray",
       onClick: (t) => {
-        t.stopPropagation(), n && e.row.getToggleExpandedHandler()(), e.row.toggleExpand();
+        t.stopPropagation(), a && e.row.getToggleExpandedHandler()(), e.row.toggleExpand();
       },
       onMouseDown: (t) => {
         t.preventDefault(), t.stopPropagation();
@@ -37,12 +38,12 @@ function u({ info: e, rowHeight: r }) {
       onMouseUp: (t) => {
         t.preventDefault(), t.stopPropagation();
       },
-      startIcon: /* @__PURE__ */ o(l, {
+      startIcon: /* @__PURE__ */ r(s, {
         className: "block size-5 shrink-0",
         width: 20,
         height: 20,
         style: {
-          transform: a ? "rotate(180deg)" : "rotate(0deg)",
+          transform: i ? "rotate(180deg)" : "rotate(0deg)",
           transformBox: "fill-box",
           transformOrigin: "center",
           transitionProperty: "transform",
@@ -55,5 +56,5 @@ function u({ info: e, rowHeight: r }) {
   });
 }
 export {
-  f as generateShowFullTextColumn
+  c as generateShowFullTextColumn
 };

package/dist/table/helpers/injectColumns.js

@@ -4,17 +4,17 @@ import { generateExpandColumn as h } from "../components/columns/expandColumn.js
 import { generateActionsColumn as x } from "../components/columns/action-column/actionColumn.js";
 import { generateDndHandleColumn as _ } from "../components/columns/dndHandleColumn.js";
 import { generateShowFullTextColumn as A } from "../components/columns/showTextColumn.js";
-var T = (i) => {
-  const { actions: r, customActionsNode: m, headerPin: d = !0, enableRowSelection: u, expandArrow: f, enableDnd: c, customDndColumnProps: a, rowHeight: e, textExpandArrow: s, customActionsColumnProps: p, rowActionsState: C, locale: l } = i, n = [...i.columns], t = n.some((o) => o.fixedLeft === !0);
-  return !n.find((o) => o.id === "actions") && (r || m || d) && n.push(x({
-    headerPin: d,
-    actions: r,
-    customActionsNode: m,
+var T = (r) => {
+  const { actions: m, customActionsNode: d, headerPin: s = !0, enableRowSelection: u, expandArrow: f, enableDnd: c, customDndColumnProps: a, rowHeight: e, textExpandArrow: l, customActionsColumnProps: p, rowActionsState: C, locale: t } = r, n = [...r.columns], i = n.some((o) => o.fixedLeft === !0);
+  return !n.find((o) => o.id === "actions") && (m || d || s) && n.push(x({
+    headerPin: s,
+    actions: m,
+    customActionsNode: d,
     rowHeight: e,
     customActionsColumnProps: p,
     rowActionsState: C,
-    locale: l
-  })), s && !n.find((o) => o.id === "show-full-text") && n.unshift(A(t, e)), f && !s && !n.find((o) => o.id === "expand-column-id") && n.unshift(h(t, e)), c && !n.find((o) => o.id === "dnd-handle") && n.unshift(_(a, e)), u && !n.find((o) => o.id === "select") && n.unshift(D(t, e, l)), n;
+    locale: t
+  })), l && !n.find((o) => o.id === "show-full-text") && n.unshift(A(i, e, t)), f && !l && !n.find((o) => o.id === "expand-column-id") && n.unshift(h(i, e, t)), c && !n.find((o) => o.id === "dnd-handle") && n.unshift(_(a, e, t)), u && !n.find((o) => o.id === "select") && n.unshift(D(i, e, t)), n;
 };
 export {
   T as injectColumns

package/package.json

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