@altinn/altinn-components 0.54.2 → 0.55.0

package/dist/components/Menu/MenuListDivider.js

@@ -0,0 +1,8 @@
+import { jsx as e } from "react/jsx-runtime";
+import '../../assets/MenuListDivider.css';const d = "_item_10r5c_1", n = "_divider_10r5c_6", i = {
+  item: d,
+  divider: n
+}, o = ({ ref: r, style: t, index: s }) => /* @__PURE__ */ e("li", { className: i.item, role: "presentation", ref: r, style: t, "data-index": s, children: /* @__PURE__ */ e("hr", { className: i.divider }) });
+export {
+  o as MenuListDivider
+};

package/dist/components/Menu/MenuListGroup.js

@@ -0,0 +1,7 @@
+import { jsx as i } from "react/jsx-runtime";
+import { c as e } from "../../index-p1eeF8LQ.js";
+import { s as m } from "../../menuList.module-DFH60CqT.js";
+const d = ({ ref: r, hidden: o, index: s, style: t, children: a }) => /* @__PURE__ */ i("li", { ref: r, className: e(m.group), style: t, "data-index": s, "aria-hidden": o, children: a });
+export {
+  d as MenuListGroup
+};

package/dist/components/Menu/MenuListHeading.js

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+import '../../assets/MenuListHeading.css';const d = "_heading_1logo_1", o = {
+  heading: d
+}, r = ({ ref: e, title: n, level: a = 1, index: i, style: s }) => /* @__PURE__ */ t("li", { className: o.heading, "aria-level": a, "data-index": i, ref: e, style: s, children: n });
+export {
+  r as MenuListHeading
+};

package/dist/components/Menu/MenuListItem.js

@@ -0,0 +1,34 @@
+import { jsx as p } from "react/jsx-runtime";
+import { c as l } from "../../index-p1eeF8LQ.js";
+import '../../assets/MenuListItem.css';const x = "_item_w7yo6_1", u = {
+  item: x
+}, k = ({
+  ref: e,
+  as: t = "li",
+  role: i = "menuitem",
+  className: m,
+  children: o,
+  style: a,
+  index: n,
+  disabled: s,
+  onMouseEnter: c,
+  onMouseLeave: r,
+  "aria-checked": d
+}) => /* @__PURE__ */ p(
+  t,
+  {
+    ref: e,
+    className: l(u.item, m),
+    style: a,
+    role: i,
+    onMouseEnter: c,
+    onMouseLeave: r,
+    "data-index": n,
+    "aria-disabled": s,
+    "aria-checked": d,
+    children: o
+  }
+);
+export {
+  k as MenuListItem
+};

package/dist/components/Menu/MenuListSearch.js

@@ -0,0 +1,83 @@
+import { jsx as r } from "react/jsx-runtime";
+import "../../index-p1eeF8LQ.js";
+import "react";
+import "../Button/Button.js";
+import "../RootProvider/RootProvider.js";
+import { SearchField as d } from "../Forms/SearchField.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/MenuListSearch.css';const C = "_search_18jfe_1", D = "_searchInput_18jfe_8", e = {
+  search: C,
+  searchInput: D
+}, S = ({
+  style: w,
+  index: x,
+  name: t,
+  value: o,
+  placeholder: s = "Search",
+  clearButtonAltText: c = "Clear search",
+  onChange: i,
+  onClear: p,
+  onNavigate: u,
+  combobox: y = !1,
+  listId: f,
+  "aria-activedescendant": _,
+  onKeyDown: n,
+  onInput: m,
+  onFocus: h,
+  ...l
+}) => /* @__PURE__ */ r("li", { className: e.search, style: w, "data-index": x, "data-menu-search": "true", children: y ? (
+  // biome-ignore lint/a11y/useFocusableInteractive: <explanation>
+  // biome-ignore lint/a11y/useAriaPropsForRole: <explanation>
+  // biome-ignore lint/a11y/useSemanticElements: <explanation>
+  /* @__PURE__ */ r("div", { role: "combobox", "aria-expanded": !0, "aria-haspopup": "listbox", "aria-owns": f, children: /* @__PURE__ */ r(
+    d,
+    {
+      size: "xs",
+      className: e.searchInput,
+      name: t,
+      value: o,
+      placeholder: s,
+      onChange: i,
+      onClear: p,
+      clearButtonAltText: c,
+      autoComplete: "off",
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      "aria-autocomplete": "list",
+      "aria-controls": f,
+      "aria-activedescendant": _,
+      autoFocus: !0,
+      onKeyDown: (a) => {
+        (a.key === "ArrowUp" || a.key === "ArrowDown") && (a.preventDefault(), u?.()), n?.(a);
+      },
+      onInput: m,
+      onFocus: h,
+      ...l
+    }
+  ) })
+) : /* @__PURE__ */ r(
+  d,
+  {
+    size: "xs",
+    className: e.searchInput,
+    name: t,
+    value: o,
+    placeholder: s,
+    onChange: i,
+    onClear: p,
+    clearButtonAltText: c,
+    autoComplete: "off",
+    autoCorrect: "off",
+    autoCapitalize: "off",
+    autoFocus: !0,
+    onKeyDown: (a) => {
+      (a.key === "ArrowUp" || a.key === "ArrowDown") && (a.preventDefault(), u?.()), n?.(a);
+    },
+    onInput: m,
+    onFocus: h,
+    ...l
+  }
+) });
+export {
+  S as MenuListSearch
+};

package/dist/components/Menu/MenuOption.js

@@ -1,89 +1,6 @@
-import { jsx as a, jsxs as s } from "react/jsx-runtime";
-import "../../index-p1eeF8LQ.js";
-import "react";
-import "../Button/Button.js";
-import "../RootProvider/RootProvider.js";
-import { MenuItem as h } from "./MenuItem.js";
-import "../Snackbar/useSnackbar.js";
-import { S as m } from "../../Checkmark-Byz_C9x4.js";
-import '../../assets/MenuOption.css';const j = "_label_xjlhn_1", f = "_title_xjlhn_16", k = "_titleWrapper_xjlhn_22", v = "_count_xjlhn_27", W = "_radio_xjlhn_34", I = "_checkbox_xjlhn_35", M = "_icon_xjlhn_68", e = {
-  label: j,
-  title: f,
-  titleWrapper: k,
-  count: v,
-  radio: W,
-  checkbox: I,
-  icon: M
-}, D = ({
-  size: c = "md",
-  type: _,
-  name: S,
-  active: l,
-  value: g,
-  label: r,
-  title: x,
-  description: u,
-  icon: N,
-  count: t = 0,
-  checked: n = !1,
-  disabled: i,
-  onMouseEnter: w,
-  onClick: o,
-  role: d,
-  ...p
-}) => {
-  const b = () => {
-    switch (_) {
-      case "checkbox":
-        return /* @__PURE__ */ s("span", { className: e.label, children: [
-          /* @__PURE__ */ a("span", { className: e.checkbox, "data-checked": n, children: /* @__PURE__ */ a(m, { className: e.icon, "aria-hidden": !0 }) }),
-          /* @__PURE__ */ s("div", { className: e.titleWrapper, children: [
-            /* @__PURE__ */ a("span", { className: e.title, children: r }),
-            t > 0 && /* @__PURE__ */ a("span", { className: e.count, "aria-hidden": "true", children: t })
-          ] })
-        ] });
-      case "radio":
-        return /* @__PURE__ */ s("span", { className: e.label, children: [
-          /* @__PURE__ */ a("span", { className: e.radio, "data-checked": n, children: /* @__PURE__ */ a(m, { className: e.icon, "aria-hidden": !0 }) }),
-          /* @__PURE__ */ s("div", { className: e.titleWrapper, children: [
-            /* @__PURE__ */ a("span", { className: e.title, children: r }),
-            t > 0 && /* @__PURE__ */ a("span", { className: e.count, "aria-hidden": "true", children: t })
-          ] })
-        ] });
-    }
-  };
-  return r ? /* @__PURE__ */ a(
-    h,
-    {
-      disabled: i,
-      selected: n,
-      size: c,
-      as: "div",
-      active: l,
-      tabIndex: -1,
-      onClick: o,
-      role: d,
-      label: /* @__PURE__ */ a(b, {}),
-      ...p
-    }
-  ) : /* @__PURE__ */ a(
-    h,
-    {
-      disabled: i,
-      selected: n,
-      size: c,
-      as: "div",
-      active: l,
-      tabIndex: -1,
-      onClick: o,
-      role: d,
-      icon: N,
-      title: x,
-      description: u,
-      ...p
-    }
-  );
-};
+import { jsx as n } from "react/jsx-runtime";
+import { MenuItem as p } from "./MenuItem.js";
+const s = ({ name: o, type: r, value: e, checked: t = !1, ...m }) => /* @__PURE__ */ n(p, { ...m, name: o, role: r, value: e, checked: t });
 export {
-  D as MenuOption
+  s as MenuOption
 };

package/dist/components/Menu/TabMenu.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import "../../index-p1eeF8LQ.js";
+import "../Button/Button.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import { MenuItem as l } from "./MenuItem.js";
+import '../../assets/TabMenu.css';const o = "_menu_1htwq_1", r = "_item_1htwq_28", a = "_link_1htwq_41", m = {
+  menu: o,
+  item: r,
+  link: a
+}, f = ({ items: n = [], variant: i = "default", size: s = "sm" }) => /* @__PURE__ */ e("ul", { className: m.menu, "data-variant": i, children: n?.map((t) => /* @__PURE__ */ e("li", { className: m.item, "aria-selected": t.selected, children: /* @__PURE__ */ e(l, { ...t, className: m.link, variant: i, size: s }) }, t.id)) });
+export {
+  f as TabMenu
+};

package/dist/components/Menu/VirtualizedMenuItems.js

@@ -0,0 +1,227 @@
+"use client";
+import { jsxs as ee, jsx as c } from "react/jsx-runtime";
+import { useRef as g, useState as H, useMemo as k, useLayoutEffect as K, useEffect as A } from "react";
+import "../../index-p1eeF8LQ.js";
+import { useMenu as te } from "../../hooks/useMenu.js";
+import "../Button/Button.js";
+import "../RootProvider/RootProvider.js";
+import { MenuListSearch as oe } from "./MenuListSearch.js";
+import { MenuItem as ie } from "./MenuItem.js";
+import { MenuList as N } from "./MenuList.js";
+import { MenuListItem as ne } from "./MenuListItem.js";
+import { MenuListGroup as re } from "./MenuListGroup.js";
+import { MenuListDivider as se } from "./MenuListDivider.js";
+import { MenuListHeading as ae } from "./MenuListHeading.js";
+import "../Snackbar/useSnackbar.js";
+import { u as ce } from "../../useMenuVirtualization-DpvWCsyD.js";
+const Ae = (W) => {
+  const x = g(null), P = g(null), [y, V] = H(0), {
+    search: l,
+    items: O,
+    groups: j = {},
+    size: B,
+    color: T,
+    variant: L,
+    keyboardEvents: w,
+    scrollRefStyles: h = {},
+    id: u,
+    expanded: G,
+    a11yMode: Y = "menu",
+    open: m,
+    scrollToTopOnOpen: z = !1,
+    autoActivateFirstItem: R = !0,
+    announceNoResults: F = !1,
+    onActiveItemIdChange: S
+  } = W, i = Y === "combobox", C = i && u ? `${u}-listbox` : u, v = g(m), [U, f] = H(!1), q = k(
+    () => O.map((e, t) => ({
+      ...e,
+      id: e.id || `${u}-item-${t}`
+    })),
+    [O, u]
+  ), { menu: J, activeItem: d, setActiveIndex: D, activeIndex: I } = te({
+    items: q,
+    groups: j,
+    groupByKey: "groupId",
+    keyboardEvents: w,
+    autoActivateFirstItem: R,
+    ref: x
+  }), { flatMenu: s, virtualizer: n, scrollMaxHeight: Q } = ce({
+    menu: J,
+    scrollRef: x
+  });
+  K(() => {
+    const e = P.current;
+    if (!e) return;
+    const t = Math.round(e.offsetTop);
+    V((o) => o === t ? o : t);
+  });
+  const a = k(() => {
+    const e = d?.id;
+    if (e)
+      return s.findIndex((o) => o.type === "item" && o.itemProps?.id === e);
+    if (I < 0) return -1;
+    let t = -1;
+    for (let o = 0; o < s.length; o++)
+      if (s[o]?.type === "item" && (t += 1, t === I))
+        return o;
+    return -1;
+  }, [d?.id, I, s]), M = g(null);
+  K(() => {
+    const e = M?.current, t = typeof e == "number" ? a <= e : !1;
+    M.current = a;
+    const o = t ? a : a + 2;
+    if (!t) {
+      const $ = n.getOffsetForIndex(o, "auto");
+      if (!$) return;
+      const [Z, _] = $;
+      if (_ === "auto") return;
+      n.scrollToOffset(Z + y + 10, { align: "start" });
+      return;
+    }
+    if (a <= 3) {
+      n.scrollToOffset(0);
+      return;
+    }
+    const r = n.getOffsetForIndex(a - 1, "auto");
+    if (!r) return;
+    const [p, b] = r;
+    b !== "auto" && n.scrollToOffset(p + y + 10, { align: "start" });
+  }, [a, y, n, M]);
+  const E = k(() => {
+    const e = /* @__PURE__ */ new Map();
+    let t = 0;
+    return s.forEach((o, r) => {
+      o.type === "item" && (t += 1, e.set(r, t));
+    }), { positions: e, total: t };
+  }, [s]);
+  A(() => {
+    S?.(d?.id);
+  }, [d?.id, S]), A(() => {
+    if (i && F) {
+      D(0), f(!0);
+      return;
+    }
+  }, [F, i, D]), A(() => {
+    if (!z) {
+      v.current = m;
+      return;
+    }
+    const e = v.current;
+    v.current = m, m && !e && x.current?.scrollTo({ top: 0 });
+  }, [m, z]);
+  const X = {
+    position: "relative",
+    maxHeight: h?.maxHeight || Q,
+    margin: "0 -0.5rem",
+    padding: "0.5rem",
+    minWidth: h?.minWidth ?? "20rem",
+    overflowY: "auto",
+    ...h
+  };
+  return /* @__PURE__ */ ee(
+    N,
+    {
+      ref: x,
+      style: X,
+      variant: L,
+      color: T,
+      expanded: G,
+      id: C,
+      role: i ? "listbox" : void 0,
+      children: [
+        l && /* @__PURE__ */ c(
+          oe,
+          {
+            ...l,
+            combobox: i,
+            listId: C,
+            "aria-activedescendant": i && U ? d?.id : void 0,
+            onNavigate: i ? () => f(!0) : void 0,
+            onChange: (e) => {
+              f(!1), l.onChange?.(e);
+            },
+            onFocus: (e) => {
+              f(!1), l.onFocus?.(e);
+            },
+            onInput: (e) => {
+              f(!1), l.onInput?.(e);
+            },
+            onKeyDown: (e) => {
+              const t = e.key === "ArrowUp" || e.key === "ArrowDown", o = e.key.length === 1 || e.key === "Backspace" || e.key === "Delete";
+              i && !t && o && f(!1), l.onKeyDown?.(e);
+            }
+          }
+        ),
+        /* @__PURE__ */ c(
+          re,
+          {
+            ref: P,
+            style: {
+              position: "relative",
+              height: `${n.getTotalSize()}px`,
+              width: "100%"
+            },
+            children: /* @__PURE__ */ c(N, { style: { width: "100%", minWidth: "100%" }, children: n.getVirtualItems().map((e) => {
+              const t = s[e.index];
+              if (!t) return null;
+              const o = {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                transform: `translateY(${e.start}px)`
+              }, r = {
+                style: o,
+                index: e.index,
+                "data-index": e.index,
+                ref: n.measureElement
+              };
+              switch (t.type) {
+                case "divider":
+                  return /* @__PURE__ */ c(
+                    se,
+                    {
+                      ...r,
+                      style: { ...o, padding: "0.25rem 0" }
+                    },
+                    e.key
+                  );
+                case "header":
+                  return /* @__PURE__ */ c(ae, { ...r, title: t.title || "", level: 1 }, e.key);
+                default: {
+                  const p = t.itemProps?.role === "checkbox" || t.itemProps?.role === "radio", b = i && !p ? "option" : t.itemProps?.role;
+                  return /* @__PURE__ */ c(
+                    ne,
+                    {
+                      ...r,
+                      role: i || p ? "presentation" : "menuitem",
+                      children: /* @__PURE__ */ c(
+                        ie,
+                        {
+                          ...t.itemProps || {},
+                          size: t.itemProps?.size || B,
+                          color: t.itemProps?.color || T,
+                          variant: t.itemProps?.variant || L,
+                          active: t.active,
+                          role: b,
+                          selected: i && !p ? t.active : t.itemProps?.selected,
+                          "aria-posinset": i ? E.positions.get(e.index) : void 0,
+                          "aria-setsize": i ? E.total : void 0,
+                          tabIndex: t.itemProps?.disabled || w ? -1 : 0
+                        }
+                      )
+                    },
+                    e.key
+                  );
+                }
+              }
+            }) })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Ae as VirtualizedMenuItems
+};

package/dist/components/Menu/aria.js

@@ -0,0 +1,9 @@
+function e(i) {
+  const t = {};
+  for (const [o, r] of Object.entries(i))
+    o.startsWith("aria-") && r !== void 0 && (t[o] = r);
+  return t;
+}
+export {
+  e as pickAriaProps
+};