asma-ui-core 3.102.0 → 3.103.0

package/dist/components/custom/module/header-layout/ToolbarActionGroup.js

@@ -1,30 +1,30 @@
-import { cn as f } from "../../../../helpers/cn.js";
+import { cn as h } from "../../../../helpers/cn.js";
 import { DotsVerticalIcon as g } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
 import { StyledButton as p } from "../../../inputs/button/StyledButton.js";
 import { StyledMenu as x } from "../../../navigation/menu/StyledMenu.js";
 import { StyledMenuItem as v } from "../../../navigation/menu/StyledMenuItem.js";
-import { Fragment as k, useState as y } from "react";
-import { Fragment as T, jsx as n, jsxs as o } from "react/jsx-runtime";
+import { useState as k } from "react";
+import { Fragment as y, jsx as n, jsxs as s } from "react/jsx-runtime";
 function O(e) {
   return e != null && (e.inlineActions.length > 0 || e.showMoreMenu);
 }
-function A({ action: e, showLabel: l, selectionTone: i = !1 }) {
+function T({ action: e, showLabel: l, selectionTone: t = !1 }) {
   if (e.render) return e.render({ showLabel: l });
-  const a = e.ariaLabel ?? e.label;
+  const o = e.ariaLabel ?? e.label;
   return /* @__PURE__ */ n(p, {
     dataTest: e.dataTest ?? `dynamic-toolbar-action-${e.id}`,
-    variant: e.variant ?? (i ? "text" : "outlined"),
+    variant: e.variant ?? (t ? "text" : "outlined"),
     error: e.tone === "danger",
     size: e.size ?? "large",
     type: "button",
     disabled: e.disabled,
     startIcon: e.icon,
     onClick: e.onClick,
-    "aria-label": l && e.ariaLabel == null ? void 0 : a,
+    "aria-label": l && e.ariaLabel == null ? void 0 : o,
     children: l ? e.label : void 0
   });
 }
-function C({ overflowMenuLabel: e, onOpen: l }) {
+function A({ overflowMenuLabel: e, onOpen: l }) {
   return /* @__PURE__ */ n(p, {
     dataTest: "dynamic-toolbar-overflow-actions",
     variant: "text",
@@ -34,34 +34,34 @@ function C({ overflowMenuLabel: e, onOpen: l }) {
       width: 20,
       height: 20
     }),
-    onClick: (i) => l?.(i.currentTarget),
+    onClick: (t) => l?.(t.currentTarget),
     "aria-label": e,
     "aria-haspopup": "menu",
     children: e
   });
 }
-function j({ plan: e, overflowMenuLabel: l, className: i, selectionTone: a = !1, registerActionWidth: d }) {
-  const [u, s] = y(null), { inlineActions: m, overflowActions: b, showMoreMenu: c } = e;
-  return !m.length && !c ? null : /* @__PURE__ */ o("div", {
-    className: f("flex shrink-0 flex-nowrap items-center gap-2", i),
-    children: [m.map(({ action: r, showLabel: t }) => {
-      const h = /* @__PURE__ */ n(A, {
+function j({ plan: e, overflowMenuLabel: l, className: t, selectionTone: o = !1, registerActionWidth: d }) {
+  const [u, a] = k(null), { inlineActions: m, overflowActions: b, showMoreMenu: c } = e;
+  return !m.length && !c ? null : /* @__PURE__ */ s("div", {
+    className: h("flex shrink-0 flex-nowrap items-center gap-2", t),
+    children: [m.map(({ action: r, showLabel: i }) => {
+      const f = /* @__PURE__ */ n(T, {
         action: r,
-        showLabel: t,
-        selectionTone: a
+        showLabel: i,
+        selectionTone: o
       }, r.id);
-      return d == null || r.measureInStrip !== !1 ? h : /* @__PURE__ */ n("span", {
-        ref: d(r.id, t),
+      return d == null || r.measureInStrip !== !1 ? f : /* @__PURE__ */ n("span", {
+        ref: d(r.id, i),
         className: "inline-flex shrink-0",
-        children: h
+        children: f
       }, r.id);
-    }), c && /* @__PURE__ */ o(T, { children: [/* @__PURE__ */ n(C, {
+    }), c && /* @__PURE__ */ s(y, { children: [/* @__PURE__ */ n(A, {
       overflowMenuLabel: l,
-      onOpen: (r) => s((t) => t ? null : r)
+      onOpen: (r) => a((i) => i ? null : r)
     }), /* @__PURE__ */ n(x, {
       anchorEl: u,
       open: !!u,
-      onClose: () => s(null),
+      onClose: () => a(null),
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "right"
@@ -70,22 +70,22 @@ function j({ plan: e, overflowMenuLabel: l, className: i, selectionTone: a = !1,
         vertical: "top",
         horizontal: "right"
       },
-      children: b.map((r, t) => /* @__PURE__ */ o(k, { children: [t > 0 && /* @__PURE__ */ n("hr", { className: "m-0 border-0 border-t border-solid border-delta-200" }), /* @__PURE__ */ n(v, {
+      children: b.map((r) => /* @__PURE__ */ n(v, {
         disabled: r.disabled,
         onClick: () => {
-          s(null), r.onClick();
+          a(null), r.onClick();
         },
-        children: /* @__PURE__ */ o("div", {
-          className: f("flex items-center gap-2", r.tone === "danger" ? "text-beta-500" : "text-delta-700"),
+        children: /* @__PURE__ */ s("div", {
+          className: h("flex items-center gap-2", r.tone === "danger" ? "text-beta-500" : "text-delta-700"),
           children: [r.icon, /* @__PURE__ */ n("span", { children: r.label })]
         })
-      })] }, r.id))
+      }, r.id))
     })] })]
   });
 }
 export {
-  C as MoreTriggerButton,
-  A as ToolbarActionButton,
+  A as MoreTriggerButton,
+  T as ToolbarActionButton,
   j as ToolbarActionGroup,
   O as hasPlannedActions
 };

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

@@ -1,36 +1,33 @@
-import { cn as u } from "../../../helpers/cn.js";
-import { StyledPopover as c } from "../../utils/popover/StyledPopover.js";
-import { StyledMenuList as S } from "./StyledMenuList.js";
+import { cn as c } from "../../../helpers/cn.js";
+import { StyledPopover as x } from "../../utils/popover/StyledPopover.js";
+import { StyledMenuList as N } from "./StyledMenuList.js";
 import { jsx as o } from "react/jsx-runtime";
-var N = {
-  border: "1px solid var(--colors-delta-300)",
-  boxShadow: "0px 2px 4px 0px rgba(34, 33, 51, 0.15)"
-}, h = ({ open: p, anchorEl: m, onClose: t, anchorOrigin: l, transformOrigin: i, id: d, className: s, sx: x, classes: a, slotProps: e, autoFocus: n = !0, onClick: y, children: b, keepMounted: f }) => /* @__PURE__ */ o(c, {
+var S = { border: "1px solid var(--colors-delta-300)" }, w = ({ open: p, anchorEl: m, onClose: t, anchorOrigin: l, transformOrigin: i, id: s, className: d, sx: n, classes: a, slotProps: e, autoFocus: y = !0, onClick: f, children: u, keepMounted: b }) => /* @__PURE__ */ o(x, {
   open: p,
   anchorEl: m,
   onClose: t,
   tabIntoContent: !1,
   anchorOrigin: l,
   transformOrigin: i,
-  id: d,
-  className: s,
-  sx: x,
-  keepMounted: f,
+  id: s,
+  className: d,
+  sx: n,
+  keepMounted: b,
   slotProps: { paper: {
-    className: u("rounded", a?.paper, e?.paper?.className),
-    sx: [N, e?.paper?.sx],
+    className: c("rounded", a?.paper, e?.paper?.className),
+    sx: [S, e?.paper?.sx],
     style: e?.paper?.style
   } },
-  children: /* @__PURE__ */ o(S, {
-    autoFocus: n,
+  children: /* @__PURE__ */ o(N, {
+    autoFocus: y,
     className: a?.list,
-    onClick: y,
+    onClick: f,
     onKeyDown: (r) => {
       r.key === "Tab" && r.target.getAttribute("role") === "menuitem" && t?.(r, "tabKeyDown");
     },
-    children: b
+    children: u
   })
 });
 export {
-  h as StyledMenu
+  w as StyledMenu
 };

package/dist/components/navigation/menu/StyledMenu.module.js

@@ -0,0 +1,4 @@
+var t = "_list_1t3hh_1", e = { list: t };
+export {
+  e as default
+};

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

@@ -1,25 +1,51 @@
-import { cn as r } from "../../../helpers/cn.js";
-import { resolveSx as c } from "../../../helpers/sx.js";
-import { jsx as f } from "react/jsx-runtime";
-var g = ({ children: n, onClick: o, onMouseDown: i, onMouseUp: s, disabled: e, selected: l, dense: m, className: d, classes: a, sx: u, "data-test": p, "data-testid": x, value: v }) => /* @__PURE__ */ f("li", {
-  role: "menuitem",
-  "aria-disabled": e ? !0 : void 0,
-  tabIndex: -1,
-  "data-test": p,
-  "data-testid": x,
-  onClick: e ? void 0 : o,
-  onMouseDown: e ? void 0 : i,
-  onMouseUp: e ? void 0 : s,
-  onKeyDown: (t) => {
-    e || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), o?.(t));
-  },
-  className: r("box-border flex items-center px-4 text-base outline-none focus-visible:shadow-[inset_3px_0_var(--colors-focus-ring)]", m ? "min-h-8 py-1" : "min-h-10 py-2", "asma-pressable asma-touch-target", e ? "cursor-not-allowed text-delta-300 aria-disabled:text-delta-300" : "cursor-pointer text-delta-700 hover:bg-delta-50", l && r("bg-gama-50", a?.selected), a?.root, d),
-  style: {
-    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-    ...c(u)
-  },
-  children: n
-});
+import { cn as i } from "../../../helpers/cn.js";
+import { resolveSx as w } from "../../../helpers/sx.js";
+import { StyledCheckbox as D } from "../../inputs/checkbox/base-ui/StyledCheckbox.js";
+import { StyledTooltip as g } from "../../data-display/tooltip/StyledTooltip.js";
+import { Children as k, isValidElement as A } from "react";
+import { jsx as u } from "react/jsx-runtime";
+var p = {
+  en: "Already added",
+  no: "Allerede lagt til"
+}, E = () => (typeof document > "u" ? "" : document.documentElement.lang).toLowerCase().startsWith("en") ? p.en : p.no, c = (r) => {
+  let t = !1;
+  return k.forEach(r, (o) => {
+    if (t || !A(o)) return;
+    if (o.type === D) {
+      const e = o.props;
+      t = e.checked === !0 && e.disabled === !0;
+      return;
+    }
+    const a = o.props.children;
+    a !== void 0 && c(a) && (t = !0);
+  }), t;
+}, j = ({ children: r, onClick: t, onMouseDown: o, onMouseUp: a, disabled: e, selected: l, dense: f, tooltip: y, className: v, classes: d, sx: x, "data-test": h, "data-testid": b, value: _ }) => {
+  const s = /* @__PURE__ */ u("li", {
+    role: "menuitem",
+    "aria-disabled": e ? !0 : void 0,
+    tabIndex: -1,
+    "data-test": h,
+    "data-testid": b,
+    onClick: e ? void 0 : t,
+    onMouseDown: e ? void 0 : o,
+    onMouseUp: e ? void 0 : a,
+    onKeyDown: (n) => {
+      e || (n.key === "Enter" || n.key === " ") && (n.preventDefault(), t?.(n));
+    },
+    className: i("box-border flex items-center px-4 text-base outline-none focus-visible:shadow-[inset_3px_0_var(--colors-focus-ring)]", f ? "min-h-8 py-1" : "min-h-10 py-2", "asma-pressable asma-touch-target", e ? "cursor-not-allowed text-delta-300 aria-disabled:text-delta-300" : i("cursor-pointer text-delta-700", !l && "hover:bg-delta-50"), l && i("bg-gama-50", d?.selected), d?.root, v),
+    style: {
+      fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+      ...w(x)
+    },
+    children: r
+  }), m = y ?? (c(r) ? E() : void 0);
+  return m ? /* @__PURE__ */ u(g, {
+    title: m,
+    arrow: !0,
+    placement: "top",
+    children: s
+  }) : s;
+};
 export {
-  g as StyledMenuItem
+  j as StyledMenuItem
 };

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

@@ -1,44 +1,60 @@
-import { cn as A } from "../../../helpers/cn.js";
-import { consumerOverrides as h } from "../../../helpers/classOverride.js";
-import { useEffect as b, useRef as k } from "react";
-import { jsx as u } from "react/jsx-runtime";
-var c = (o) => o ? Array.from(o.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')) : [], R = ({ children: o, id: a, role: d = "menu", className: s, autoFocus: i, disablePadding: y, onClick: p, onKeyDown: x }) => {
-  const t = k(null), f = h(s, "padding");
-  b(() => {
-    i && c(t.current)[0]?.focus();
-  }, [i]);
-  const w = (e) => {
-    if (x?.(e), ![
+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(() => {
+    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]));
+    };
+    t();
+    const s = new MutationObserver(t);
+    return s.observe(e, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["hidden"]
+    }), () => s.disconnect();
+  }, []), I(() => {
+    f && y(i.current)[0]?.focus();
+  }, [f]);
+  const x = (e) => {
+    if (w?.(e), ![
       "ArrowDown",
       "ArrowUp",
       "Home",
       "End"
     ].includes(e.key)) return;
     e.preventDefault();
-    const r = c(t.current);
-    if (r.length === 0) return;
-    const l = r.findIndex((g) => g === document.activeElement);
-    let n = l;
-    e.key === "ArrowDown" ? n = (l + 1) % r.length : e.key === "ArrowUp" ? n = (l - 1 + r.length) % r.length : e.key === "Home" ? n = 0 : e.key === "End" && (n = r.length - 1), r[n]?.focus();
+    const t = y(i.current);
+    if (t.length === 0) return;
+    const s = t.findIndex((l) => l === document.activeElement);
+    let n = s;
+    e.key === "ArrowDown" ? n = (s + 1) % t.length : e.key === "ArrowUp" ? n = (s - 1 + t.length) % t.length : e.key === "Home" ? n = 0 : e.key === "End" && (n = t.length - 1), t[n]?.focus();
   }, m = {
-    id: a,
-    className: A("m-0 list-none outline-none", !f && "px-0", !f && (y ? "py-0" : "py-2"), s),
+    id: r,
+    className: S(L.list, "m-0 list-none outline-none", !c && "px-0", !c && (E ? "py-0" : "py-2"), a),
     style: { fontFamily: "Roboto, Helvetica, Arial, sans-serif" },
-    onClick: p,
-    onKeyDown: w
+    onClick: A,
+    onKeyDown: x
   };
-  return d === "listbox" ? /* @__PURE__ */ u("ul", {
-    ref: t,
+  return h === "listbox" ? /* @__PURE__ */ d("ul", {
+    ref: i,
     ...m,
     role: "listbox",
     children: o
-  }) : /* @__PURE__ */ u("ul", {
-    ref: t,
+  }) : /* @__PURE__ */ d("ul", {
+    ref: i,
     ...m,
     role: "menu",
     children: o
   });
 };
 export {
-  R as StyledMenuList
+  H as StyledMenuList
 };

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

@@ -1,9 +1,7 @@
 import { MouseEvent, ReactNode } from 'react';
 /**
- * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#16073-19226
- * Figma "Menus item" (h40, label 16px text-icon/body). Figma **State** (Enabled/Hover/Selected/
- * Disabled) ← native hover + `selected`/`disabled`; **Type** (Only Label/Icon/Checkbox/Check mark)
- * is expressed via `children`. Selected bg = `gama-50`, hover bg = `delta-50`.
+ * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#16073-21583
+ * Figma "Menus item" (h40, label 16px text-icon/body). Hover gray `#f0f2f4`, separator `#d3d8df`.
  */
 export interface StyledMenuItemProps {
     /** @figmaProp content — Type (Only Label / Icon / Checkbox / Check mark) via composition */
@@ -18,6 +16,12 @@ export interface StyledMenuItemProps {
     selected?: boolean;
     /** Compact vertical padding (MUI `MenuItem` `dense` parity, DEC-003). */
     dense?: boolean;
+    /**
+     * Hover/focus hint. Optional. When omitted, a checked and disabled checkbox (an option that is
+     * already selected and cannot be picked again) gets "Allerede lagt til", or "Already added" when
+     * `<html lang>` is English. Pass this to use another phrase, such as "Already in use".
+     */
+    tooltip?: ReactNode;
     value?: unknown;
     className?: string;
     classes?: {
@@ -32,4 +36,4 @@ export interface StyledMenuItemProps {
  * Native `role="menuitem"` (replaces MUI `MenuItem`). Enter/Space activate; a disabled item stays
  * focusable but non-interactive (MUI parity). Public props preserved (DEC-003). TASK-303.
  */
-export declare const StyledMenuItem: ({ children, onClick, onMouseDown, onMouseUp, disabled, selected, dense, className, classes, sx, "data-test": dataTest, "data-testid": dataTestId, value: _value, }: StyledMenuItemProps) => JSX.Element;
+export declare const StyledMenuItem: ({ children, onClick, onMouseDown, onMouseUp, disabled, selected, dense, tooltip, className, classes, sx, "data-test": dataTest, "data-testid": dataTestId, value: _value, }: StyledMenuItemProps) => JSX.Element;

package/package.json

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