@altinn/altinn-components 0.54.2 → 0.55.0

package/dist/components/Menu/Menu.js

@@ -1,47 +1,69 @@
-import { jsx as r } from "react/jsx-runtime";
-import { MenuBase as h } from "./MenuBase.js";
-import { MenuItems as w } from "./MenuItems.js";
-import { MenuItemsVirtual as A } from "./MenuItemsVirtual.js";
-const J = ({
-  color: m,
-  variant: n,
-  defaultItemColor: i,
-  defaultItemVariant: p,
-  defaultItemSize: M,
-  defaultIconTheme: o,
-  groups: u,
-  items: x = [],
-  search: j,
-  isVirtualized: q,
-  keyboardEvents: B,
-  scrollRefStyles: f
-}) => q ? /* @__PURE__ */ r(h, { color: m, variant: n, children: /* @__PURE__ */ r(
-  A,
-  {
-    search: j,
-    items: x,
-    groups: u,
-    defaultItemSize: M,
-    defaultItemColor: i,
-    defaultItemVariant: p,
-    defaultIconTheme: o,
-    keyboardEvents: B,
-    scrollRefStyles: f
-  }
-) }) : /* @__PURE__ */ r(h, { color: m, variant: n, children: /* @__PURE__ */ r(
-  w,
-  {
-    search: j,
-    items: x,
-    groups: u,
-    defaultItemSize: M,
-    defaultItemColor: i,
-    defaultItemVariant: p,
-    defaultIconTheme: o,
-    keyboardEvents: B,
-    scrollRefStyles: f
-  }
-) });
+"use client";
+import { jsx as F } from "react/jsx-runtime";
+import { MenuItems as N } from "./MenuItems.js";
+import { VirtualizedMenuItems as Q } from "./VirtualizedMenuItems.js";
+import { useMenuSearch as V } from "./useMenuSearch.js";
+const A = ({
+  searchable: u,
+  search: s,
+  items: m = [],
+  groups: o = {},
+  variant: c = "default",
+  size: e,
+  level: n = 0,
+  maxLevels: i = 3,
+  virtualized: G = !1,
+  keyboardEvents: p = !1,
+  scrollRefStyles: a = {},
+  onActiveItemIdChange: f,
+  a11yMode: r = "menu",
+  open: h,
+  scrollToTopOnOpen: l,
+  id: x
+}) => {
+  const t = V({ ...s, items: m, groups: o }), I = u ? t.search : s, M = u && t.hasQuery && t.resultCount === 0, S = u ? t.items : m, b = u ? { ...o, ...t.groups } : o, j = r !== "combobox";
+  return G ? /* @__PURE__ */ F(
+    Q,
+    {
+      id: x,
+      search: I,
+      announceNoResults: M,
+      items: S,
+      groups: b,
+      variant: c,
+      size: e,
+      level: n,
+      maxLevels: i,
+      keyboardEvents: p,
+      scrollRefStyles: a,
+      onActiveItemIdChange: f,
+      a11yMode: r,
+      open: h,
+      scrollToTopOnOpen: l,
+      autoActivateFirstItem: j
+    }
+  ) : /* @__PURE__ */ F(
+    N,
+    {
+      id: x,
+      search: I,
+      announceNoResults: M,
+      items: S,
+      groups: b,
+      variant: c,
+      size: e,
+      level: n,
+      maxLevels: i,
+      keyboardEvents: p,
+      scrollRefStyles: a,
+      onActiveItemIdChange: f,
+      a11yMode: r,
+      open: h,
+      scrollToTopOnOpen: l,
+      autoActivateFirstItem: j
+    }
+  );
+};
 export {
-  J as Menu
+  A as Menu
 };

package/dist/components/Menu/MenuItem.js

@@ -1,82 +1,208 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { isValidElement as C } from "react";
-import { Badge as N } from "../Badge/Badge.js";
-import { Icon as d } from "../Icon/Icon.js";
-import "../../index-p1eeF8LQ.js";
+"use client";
+import { jsxs as m, jsx as l, Fragment as U } from "react/jsx-runtime";
+import { c as z } from "../../index-p1eeF8LQ.js";
+import { Badge as A } from "../Badge/Badge.js";
+import { Icon as V } from "../Icon/Icon.js";
+import h, { forwardRef as X } from "react";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItemBase as q } from "./MenuItemBase.js";
-import { MenuItemLabel as x } from "./MenuItemLabel.js";
-import { MenuItemIcon as E } from "./MenuItemIcon.js";
+import { ItemMedia as C } from "../Item/ItemMedia.js";
+import { ItemLabel as F } from "../Item/ItemLabel.js";
+import { ItemControls as K } from "../Item/ItemControls.js";
 import "../Snackbar/useSnackbar.js";
-import { S as L, a as b } from "../../ChevronUp-_BBfEirx.js";
-import { S as D } from "../../ChevronRight-ANFWmIs1.js";
-import '../../assets/MenuItem.css';const R = "_controls_w98qm_46", U = "_linkIcon_w98qm_59", m = {
-  controls: R,
-  linkIcon: U
-}, Y = ({
-  as: p = "a",
-  size: n = "md",
-  color: l,
-  variant: f,
-  collapsible: a,
-  expanded: c,
-  icon: I,
-  iconTheme: h,
-  iconBadge: u,
-  title: v,
-  description: S,
-  highlightWords: _,
-  badge: o,
-  controls: k,
-  loading: r,
-  linkIcon: y,
-  label: e,
-  ariaLabel: M,
-  ...j
+import { pickAriaProps as Y } from "./aria.js";
+import { S as Z } from "../../Checkmark-Byz_C9x4.js";
+import { u as $ } from "../../useId-BVFxCjkq.js";
+import { S as T } from "../../ChevronRight-ANFWmIs1.js";
+import '../../assets/MenuItem.css';var W = function(e, o) {
+  var a = {};
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && o.indexOf(t) < 0 && (a[t] = e[t]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var r = 0, t = Object.getOwnPropertySymbols(e); r < t.length; r++)
+      o.indexOf(t[r]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[r]) && (a[t[r]] = e[t[r]]);
+  return a;
+};
+const ee = X((e, o) => {
+  var { title: a, titleId: t } = e, r = W(e, ["title", "titleId"]);
+  let n = $();
+  return n = a ? t || "title-" + n : void 0, h.createElement(
+    "svg",
+    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: o, "aria-labelledby": n }, r),
+    a ? h.createElement("title", { id: n }, a) : null,
+    h.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M4.75 12a.75.75 0 0 1 .75-.75h13a.75.75 0 1 1 0 1.5h-13a.75.75 0 0 1-.75-.75", clipRule: "evenodd" })
+  );
+}), te = "_item_ifeef_3", ae = "_media_ifeef_121", ie = "_label_ifeef_142", re = "_title_ifeef_157", le = "_description_ifeef_161", ne = "_count_ifeef_173", oe = "_linkIcon_ifeef_181", i = {
+  item: te,
+  media: ae,
+  label: ie,
+  title: re,
+  description: le,
+  count: ne,
+  linkIcon: oe
+}, Ne = ({
+  id: e,
+  groupId: o,
+  role: a = "menuItem",
+  as: t,
+  href: r,
+  onClick: n,
+  onChange: v,
+  onKeyPress: y,
+  onMouseEnter: I,
+  size: g = "sm",
+  variant: w,
+  color: N,
+  name: q,
+  value: D,
+  checked: c,
+  icon: _,
+  label: b,
+  badge: d,
+  controls: O,
+  title: p,
+  description: x,
+  highlightWords: P,
+  count: f,
+  linkIcon: j = !1,
+  disabled: s,
+  selected: G,
+  active: S,
+  tabIndex: k = 0,
+  className: E,
+  "data-testid": R,
+  ...H
 }) => {
-  const w = typeof e == "function" ? e() : e, s = a ? c ? L : b : y ? D : void 0, B = () => o && !r && typeof o == "object" && "label" in o ? /* @__PURE__ */ t(N, { ...o, className: m.badge }) : C(o) ? o : null;
-  return /* @__PURE__ */ i(
-    q,
+  const B = typeof b == "function" ? b() : b, L = Y(H);
+  if (a === "checkbox" || a === "radio") {
+    const u = _ || (c ? Z : ee);
+    return /* @__PURE__ */ m(
+      "label",
+      {
+        ...L,
+        className: z(i.item, E),
+        id: e,
+        "data-id": e,
+        "data-group-id": o,
+        "data-size": g,
+        "data-variant": w,
+        "data-color": N,
+        "data-active": S,
+        role: a,
+        "aria-disabled": s,
+        "aria-checked": c,
+        "aria-selected": c,
+        "aria-label": p,
+        "data-testid": R,
+        onKeyUp: (M) => {
+          s || (M.key === "Enter" && n?.(), y?.(M));
+        },
+        onClick: n,
+        onMouseEnter: I,
+        tabIndex: k,
+        children: [
+          /* @__PURE__ */ l(
+            "input",
+            {
+              name: q,
+              value: D,
+              type: a,
+              checked: !!c,
+              onChange: v,
+              readOnly: !v,
+              style: { opacity: 0, position: "absolute" },
+              tabIndex: -1
+            }
+          ),
+          /* @__PURE__ */ l(C, { icon: u, className: i.media }),
+          /* @__PURE__ */ l(
+            F,
+            {
+              className: i.label,
+              highlightWords: P,
+              title: /* @__PURE__ */ m(U, { children: [
+                p,
+                " ",
+                f && /* @__PURE__ */ l("i", { className: i.count, children: f })
+              ] }),
+              titleProps: {
+                weight: "medium",
+                className: i.title
+              },
+              description: x,
+              descriptionProps: {
+                weight: "normal",
+                variant: "subtle",
+                className: i.description
+              },
+              children: B
+            }
+          ),
+          /* @__PURE__ */ m(K, { children: [
+            d && /* @__PURE__ */ l(A, { ...d }),
+            O
+          ] })
+        ]
+      }
+    );
+  }
+  const J = t || (r ? "a" : "button"), Q = j && T;
+  return /* @__PURE__ */ m(
+    J,
     {
-      as: p,
-      size: n,
-      variant: f,
-      color: l,
-      expanded: c,
-      ariaLabel: M,
-      hidden: r,
-      ...j,
+      href: r,
+      className: z(i.item, E),
+      id: e,
+      "data-id": e,
+      "data-group-id": o,
+      "data-size": g,
+      "data-variant": w,
+      "data-color": N,
+      "data-active": S,
+      "aria-disabled": s,
+      "aria-selected": G,
+      "aria-label": p,
+      "data-testid": R,
+      onKeyUp: (u) => {
+        s || (u.key === "Enter" && n?.(), y?.(u));
+      },
+      onClick: n,
+      onMouseEnter: I,
+      tabIndex: s ? -1 : k ?? 0,
+      role: a === "menuItem" ? "menuitem" : a,
+      ...L,
       children: [
-        /* @__PURE__ */ t(E, { loading: r, size: n, icon: I, theme: h, badge: u }),
-        /* @__PURE__ */ t(
-          x,
+        _ && /* @__PURE__ */ l(C, { icon: _, className: i.media }),
+        /* @__PURE__ */ l(
+          F,
           {
-            loading: r,
-            title: v,
-            description: S,
-            highlightWords: _,
-            size: n,
-            children: w
+            className: i.label,
+            highlightWords: P,
+            title: /* @__PURE__ */ m(U, { children: [
+              p,
+              " ",
+              f && /* @__PURE__ */ l("i", { className: i.count, children: f })
+            ] }),
+            titleProps: {
+              weight: "medium",
+              className: i.title
+            },
+            description: x,
+            descriptionProps: {
+              variant: "subtle",
+              className: i.description
+            },
+            children: B
           }
         ),
-        /* @__PURE__ */ i("span", { className: m.controls, children: [
-          !r && B(),
-          !r && k,
-          s && /* @__PURE__ */ t("span", { className: m.linkIcon, children: /* @__PURE__ */ t(
-            d,
-            {
-              svgElement: s,
-              style: {
-                fontSize: "1.5rem"
-              }
-            }
-          ) })
+        /* @__PURE__ */ m(K, { children: [
+          d && /* @__PURE__ */ l(A, { ...d }),
+          O,
+          j && /* @__PURE__ */ l(V, { svgElement: Q, className: i.linkIcon })
         ] })
       ]
     }
   );
 };
 export {
-  Y as MenuItem
+  Ne as MenuItem
 };

package/dist/components/Menu/MenuItems.js

@@ -1,83 +1,166 @@
 "use client";
-import { jsxs as n, jsx as t, Fragment as G } from "react/jsx-runtime";
-import { useRef as H, Fragment as K } from "react";
+import { jsxs as v, jsx as c } from "react/jsx-runtime";
+import { useRef as A, useState as X, useMemo as Y, useEffect as x, Fragment as Z } from "react";
 import "../../index-p1eeF8LQ.js";
-import { useMenu as R } from "../../hooks/useMenu.js";
+import { useMenu as E } from "../../hooks/useMenu.js";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as S } from "./MenuItem.js";
-import { MenuSearch as _ } from "./MenuSearch.js";
-import { MenuHeader as $ } from "./MenuHeader.js";
-import { MenuList as q, MenuListItem as i } from "./MenuBase.js";
+import { MenuListSearch as ee } from "./MenuListSearch.js";
+import { MenuItem as te } from "./MenuItem.js";
+import { MenuList as B } from "./MenuList.js";
+import { MenuListItem as oe } from "./MenuListItem.js";
+import { MenuListGroup as re } from "./MenuListGroup.js";
+import { MenuListDivider as ie } from "./MenuListDivider.js";
+import { MenuListHeading as ne } from "./MenuListHeading.js";
 import "../Snackbar/useSnackbar.js";
-const w = ({
-  level: a = 0,
-  expanded: L,
-  search: c,
-  items: b,
-  groups: d = {},
-  defaultItemSize: u,
-  defaultItemColor: l,
-  defaultItemVariant: f,
-  defaultIconTheme: x,
-  as: g,
-  keyboardEvents: M = !1,
-  onSelect: j = () => {
-  }
+const se = ({
+  level: d = 0,
+  maxLevels: M,
+  expanded: N,
+  a11yMode: O = "menu",
+  open: r,
+  scrollToTopOnOpen: L = !1,
+  autoActivateFirstItem: P = !0,
+  announceNoResults: D = !1,
+  search: i,
+  items: F,
+  groups: k = {},
+  size: K,
+  id: m,
+  color: S,
+  variant: b,
+  scrollRefStyles: q = {},
+  keyboardEvents: a = !1,
+  onSelect: G = () => {
+  },
+  onActiveItemIdChange: C
 }) => {
-  const h = H(null), { menu: I, setActiveIndex: z } = R({
-    items: b,
-    groups: d,
+  if (M && d >= M)
+    return null;
+  const o = O === "combobox", R = o && m ? `${m}-listbox` : m, I = A(r), $ = A(r), [H, s] = X(!1), U = Y(
+    () => F.map((e, n) => ({
+      ...e,
+      id: e.id || `${m}-item-${n}`
+    })),
+    [F, m]
+  ), p = A(null), { menu: W, setActiveIndex: y, activeItem: g } = E({
+    items: U,
+    groups: k,
     groupByKey: "groupId",
-    keyboardEvents: M,
-    onSelect: j,
-    ref: h
+    keyboardEvents: a,
+    autoActivateFirstItem: P,
+    onSelect: G,
+    ref: p
   });
-  return /* @__PURE__ */ n(q, { expanded: L, as: g, ref: h, children: [
-    c && /* @__PURE__ */ t(_, { ...c }),
-    I.map((s, m) => {
-      const r = s?.props || {}, { title: v, divider: P = !0 } = r, T = I[m + 1];
-      return /* @__PURE__ */ n(K, { children: [
-        (a > 0 || m) && P ? /* @__PURE__ */ t(i, { role: "separator" }) : "",
-        v && /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t($, { title: v }) }),
-        s?.items.filter((o) => !o.props?.hidden).map((o, F) => {
-          const { active: y, onMouseEnter: A } = o, { groupId: C, ...e } = o.props || {}, { expanded: p } = e, B = s?.items[F + 1];
-          return /* @__PURE__ */ n(i, { expanded: p, onMouseLeave: () => z(-1), children: [
-            /* @__PURE__ */ t(
-              S,
-              {
-                ...e,
-                size: e?.size || r?.defaultItemSize || u,
-                color: e?.color || r?.defaultItemColor || l,
-                variant: e?.variant || r?.defaultItemVariant || f,
-                iconTheme: e?.iconTheme || r?.defaultIconTheme || x,
-                active: y,
-                tabIndex: e?.disabled || M ? -1 : e.tabIndex ?? 0,
-                onMouseEnter: A
-              }
-            ),
-            p && e?.items && /* @__PURE__ */ n(G, { children: [
-              /* @__PURE__ */ t(
-                w,
-                {
-                  expanded: p,
-                  level: a + 1,
-                  items: e?.items,
-                  groups: d,
-                  defaultItemSize: u,
-                  defaultItemColor: l,
-                  defaultItemVariant: f,
-                  defaultIconTheme: x
-                }
-              ),
-              (T || B) && /* @__PURE__ */ t(i, { role: "separator", as: "div" })
-            ] })
-          ] }, F);
+  return x(() => {
+    C?.(g?.id);
+  }, [g?.id, C]), x(() => {
+    if (!L) {
+      I.current = r;
+      return;
+    }
+    const e = I.current;
+    I.current = r, r && !e && p.current?.scrollTo({ top: 0 });
+  }, [r, L]), x(() => {
+    const e = $.current;
+    $.current = r, !(!a || i) && r && !e && requestAnimationFrame(() => p.current?.focus?.({ preventScroll: !0 }));
+  }, [r, a, i]), x(() => {
+    if (o && D) {
+      y(0), s(!0);
+      return;
+    }
+  }, [D, o, y]), /* @__PURE__ */ v(
+    B,
+    {
+      variant: b,
+      expanded: N,
+      ref: p,
+      style: q,
+      id: R,
+      role: o ? "listbox" : void 0,
+      tabIndex: a ? -1 : void 0,
+      children: [
+        i && /* @__PURE__ */ c(
+          ee,
+          {
+            ...i,
+            combobox: o,
+            listId: R,
+            "aria-activedescendant": o && H ? g?.id : void 0,
+            onNavigate: o ? () => s(!0) : void 0,
+            onChange: (e) => {
+              s(!1), i.onChange?.(e);
+            },
+            onFocus: (e) => {
+              s(!1), i.onFocus?.(e);
+            },
+            onInput: (e) => {
+              s(!1), i.onInput?.(e);
+            },
+            onKeyDown: (e) => {
+              const n = e.key === "ArrowUp" || e.key === "ArrowDown", u = e.key.length === 1 || e.key === "Backspace" || e.key === "Delete";
+              o && !n && u && s(!1), i.onKeyDown?.(e);
+            }
+          }
+        ),
+        W.map((e, n) => {
+          const u = e?.props || {}, { title: j, hidden: _ = !1, divider: J = !0 } = u;
+          return /* @__PURE__ */ v(Z, { children: [
+            (d > 0 || n) && J ? /* @__PURE__ */ c(ie, {}) : "",
+            /* @__PURE__ */ c(re, { hidden: _, children: /* @__PURE__ */ v(B, { role: "presentation", children: [
+              j && /* @__PURE__ */ c(ne, { title: j, level: d }),
+              e?.items.filter((l) => !l.props?.hidden).map((l, Q) => {
+                const { active: z, onMouseEnter: T } = l, { groupId: ue, ...t } = l.props || {}, { expanded: f } = t, h = Array.isArray(t?.items) && t.items.length > 0, w = t.role === "checkbox" || t.role === "radio", V = o && !w ? "option" : t.role;
+                return /* @__PURE__ */ v(
+                  oe,
+                  {
+                    expanded: f,
+                    onMouseLeave: () => y(-1),
+                    role: o || w ? "presentation" : void 0,
+                    children: [
+                      /* @__PURE__ */ c(
+                        te,
+                        {
+                          ...t,
+                          size: t?.size || u?.size || K,
+                          color: t?.color || u?.color || S,
+                          variant: t?.variant || u?.variant || b,
+                          active: z,
+                          role: V,
+                          selected: o && !w ? z : t.selected,
+                          tabIndex: t?.disabled || a ? -1 : t.tabIndex ?? 0,
+                          onMouseEnter: T,
+                          "aria-haspopup": h ? "menu" : void 0,
+                          "aria-expanded": h ? f : void 0,
+                          "aria-controls": h ? t.id + "-menu" : void 0
+                        }
+                      ),
+                      f && t?.items && /* @__PURE__ */ c(
+                        se,
+                        {
+                          id: t.id + "-menu",
+                          expanded: f,
+                          level: d + 1,
+                          maxLevels: M,
+                          items: t?.items,
+                          groups: k,
+                          size: K,
+                          color: S,
+                          variant: b
+                        }
+                      )
+                    ]
+                  },
+                  Q
+                );
+              })
+            ] }) }, n)
+          ] }, n);
         })
-      ] }, m);
-    })
-  ] });
+      ]
+    }
+  );
 };
 export {
-  w as MenuItems
+  se as MenuItems
 };

package/dist/components/Menu/MenuList.js

@@ -0,0 +1,39 @@
+import { jsx as x } from "react/jsx-runtime";
+import { c as d } from "../../index-p1eeF8LQ.js";
+import { s as C } from "../../menuList.module-DFH60CqT.js";
+const L = ({
+  ref: o,
+  id: t,
+  as: r = "ul",
+  role: s = "group",
+  variant: a,
+  color: m,
+  className: n,
+  style: e,
+  tabIndex: p,
+  children: c,
+  onMouseEnter: i,
+  onMouseLeave: l,
+  onBlurCapture: u,
+  onScroll: f
+}) => /* @__PURE__ */ x(
+  r,
+  {
+    id: t,
+    ref: o,
+    className: d(C.list, n),
+    role: s,
+    "data-variant": a,
+    "data-color": m,
+    style: e,
+    tabIndex: p,
+    onMouseEnter: i,
+    onMouseLeave: l,
+    onBlurCapture: u,
+    onScroll: f,
+    children: c
+  }
+);
+export {
+  L as MenuList
+};