asma-ui-core 3.101.7 → 3.103.0

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/inputs/input-field/StyledInputField.d.ts

@@ -87,8 +87,9 @@ export interface StyledInputFieldProps {
  * own focus/value state to drive the shared field styling ([[field-styles]]); supports multiline,
  * start/end adornments, an optional clear button, and error/helper text. Public props preserved
  *
- * ponytail: `variant` is accepted but always renders outlined, and multiline uses fixed `rows`
- * (no auto-grow to `maxRows`) — known ceilings; Chromatic in CI is the visual gate.
+ * ponytail: `variant` is accepted but always renders outlined — a known ceiling; Chromatic in CI is
+ * the visual gate. Multiline auto-grows between `minRows` and `maxRows` (a fixed `rows` pins the height)
+ * and scrolls once the content exceeds the cap; `readOnly` ignores the cap and shows the whole value.
  */
 export declare const StyledInputField: ({ dataTest, label, value, defaultValue, onChange, onBlur, onFocus, error, helperText, reserveHelperText, expandHelperText, disabled, readOnly, required, allowClear, onClear, type, placeholder, name, id, autoComplete, autoFocus, multiline, rows, minRows, maxRows, size, fullWidth, className, style, sx, inputRef, slotProps, InputProps, onKeyDown, onClick, variant: _variant, }: StyledInputFieldProps) => JSX.Element;
 export {};

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.101.7",
+    "version": "3.103.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",