@altinn/altinn-components 0.54.2 → 0.55.0

package/dist/components/Menu/example.data.js

@@ -0,0 +1,373 @@
+import { S as m } from "../../InformationSquare-D3WAxfVw.js";
+import { S as o, a as p, b as I, c as b } from "../../Trash-DBcymOP9.js";
+import { S as v } from "../../Eye-BrbjRZJp.js";
+import { S as h, a as k, b as S, c as f } from "../../InboxFill-vGck_zM_.js";
+const x = {
+  id: "1",
+  groupId: "1",
+  name: "status",
+  icon: m,
+  label: "Velg status",
+  groups: {
+    1: {
+      title: "Velg status"
+    }
+  },
+  items: [
+    {
+      id: "1",
+      groupId: "1",
+      role: "checkbox",
+      name: "unread",
+      value: "true",
+      title: "Ulest"
+    },
+    {
+      id: "2",
+      groupId: "2",
+      role: "checkbox",
+      name: "status",
+      value: "requires-action",
+      title: "Krever handling"
+    },
+    {
+      id: "3",
+      groupId: "2",
+      role: "checkbox",
+      name: "status",
+      value: "awaiting",
+      title: "Avventer"
+    },
+    {
+      id: "4",
+      groupId: "2",
+      role: "checkbox",
+      name: "status",
+      value: "in-progress",
+      title: "Under arbeid"
+    },
+    {
+      id: "5",
+      groupId: "2",
+      role: "checkbox",
+      name: "status",
+      value: "completed",
+      title: "Avsluttet"
+    },
+    {
+      id: "6",
+      groupId: "3",
+      role: "checkbox",
+      name: "status",
+      value: "undefined",
+      title: "Ingen status"
+    }
+  ]
+}, B = {
+  id: "2",
+  groupId: "1",
+  icon: o,
+  name: "time",
+  label: "Velg dato",
+  groups: {
+    1: {
+      title: "Velg dato"
+    }
+  },
+  items: [
+    {
+      id: "1",
+      groupId: "1",
+      name: "time",
+      role: "radio",
+      value: "all-time",
+      title: "Alle tider"
+    },
+    {
+      id: "2",
+      groupId: "2",
+      name: "time",
+      role: "radio",
+      value: "today",
+      title: "I dag"
+    },
+    {
+      id: "3",
+      groupId: "2",
+      name: "time",
+      role: "radio",
+      value: "this-week",
+      title: "Denne uken"
+    },
+    {
+      id: "4",
+      groupId: "2",
+      name: "time",
+      role: "radio",
+      value: "this-month",
+      title: "Denne måneden"
+    },
+    {
+      id: "5",
+      groupId: "3",
+      name: "time",
+      role: "radio",
+      value: "last-6-months",
+      title: "Siste 6 måneder"
+    },
+    {
+      id: "6",
+      groupId: "3",
+      name: "time",
+      role: "radio",
+      value: "last-12-months",
+      title: "Siste 12 måneder"
+    },
+    {
+      id: "7",
+      groupId: "4",
+      name: "datepicker",
+      icon: o,
+      title: "Spesifiser dato"
+    }
+  ]
+}, y = {
+  id: "seenBy",
+  groupId: "2",
+  icon: v,
+  name: "seenBy",
+  label: "Sett av ...",
+  searchable: !0,
+  groups: {
+    1: {
+      title: "Sett av ..."
+    },
+    search: {
+      title: "{count} treff"
+    }
+  },
+  items: [
+    {
+      id: "1",
+      groupId: "1",
+      name: "seenBy",
+      role: "checkbox",
+      value: "you",
+      title: "Sett av deg"
+    },
+    {
+      id: "2",
+      groupId: "1",
+      name: "seenBy",
+      role: "checkbox",
+      value: "others",
+      title: "Sett av andre"
+    },
+    {
+      id: "3",
+      groupId: "2",
+      name: "seenBy",
+      role: "checkbox",
+      value: "per-nordmann",
+      title: "Per Nordmann"
+    },
+    {
+      id: "4",
+      groupId: "2",
+      name: "seenBy",
+      role: "checkbox",
+      value: "kari-nordmann",
+      title: "Kari Nordmann"
+    }
+  ]
+}, N = {
+  id: "content",
+  groupId: "2",
+  icon: p,
+  name: "content",
+  label: "Inneholder ...",
+  groups: {
+    1: {
+      title: "Inneholder ..."
+    }
+  },
+  items: [
+    {
+      id: "1",
+      groupId: "1",
+      name: "drafts",
+      role: "checkbox",
+      value: "true",
+      title: "Utkast"
+    },
+    {
+      id: "2",
+      groupId: "1",
+      name: "attachments",
+      role: "checkbox",
+      value: "true",
+      title: "Vedlegg"
+    },
+    {
+      id: "3",
+      groupId: "2",
+      name: "sent",
+      role: "checkbox",
+      value: "true",
+      title: "Sendte meldinger"
+    },
+    {
+      id: "4",
+      groupId: "2",
+      name: "received",
+      role: "checkbox",
+      value: "true",
+      title: "Mottatte meldinger"
+    }
+  ]
+}, F = [x, B, y, N], C = F?.map((e) => ({
+  ...e,
+  removable: !0
+})), n = [
+  {
+    id: "user",
+    groupId: "favourites",
+    name: "Kari Nordmann",
+    birthdate: "03037712345"
+  },
+  {
+    id: "aa-1",
+    groupId: "aa",
+    name: "Alfa Bar & Brød",
+    orgNumber: "551415161"
+  },
+  {
+    id: "aa-2",
+    groupId: "aa",
+    name: "Alfa Bar & Brød",
+    orgNumber: "551415162",
+    parentId: "aa-1"
+  },
+  {
+    id: "bb-1",
+    groupId: "bb",
+    name: "Beta Inc.",
+    orgNumber: "991557788"
+  },
+  {
+    id: "bb-2",
+    groupId: "bb",
+    name: "Beta Inc.",
+    orgNumber: "991557789",
+    parentId: "bb-1"
+  },
+  {
+    id: "cc-1",
+    groupId: "cc",
+    name: "Charlies engler",
+    orgNumber: "333444555"
+  },
+  {
+    id: "cc-2",
+    groupId: "cc",
+    name: "Charlies engler",
+    orgNumber: "333444556",
+    parentId: "cc-1"
+  }
+].map((e) => {
+  const a = [e.name, e.orgNumber, e.birthdate].filter(Boolean);
+  if (e.birthdate)
+    return {
+      id: e.id,
+      groupId: e.groupId,
+      searchWords: a,
+      title: e.name,
+      description: "Født: " + e.birthdate,
+      icon: {
+        type: "person",
+        name: e.name
+      }
+    };
+  function d(t) {
+    if (!t)
+      return "";
+    const u = t.length, r = Math.ceil(u / 3), s = t.slice(0, r), c = t.slice(r, r * 2), g = t.slice(r * 2);
+    return [s, c, g].join(" ");
+  }
+  const l = "Org. nr. " + d(e?.orgNumber);
+  return {
+    id: e.id,
+    groupId: e.groupId,
+    title: e.name,
+    description: l,
+    searchWords: a,
+    icon: {
+      type: "company",
+      name: e.name,
+      isParent: !!e?.parentId
+    }
+  };
+}), U = {
+  label: n[0].title,
+  items: n,
+  groups: {
+    favourites: { title: "Favoritter" },
+    aa: { title: "Alfa Bar & Brød" },
+    search: { title: "{count} treff" }
+  },
+  size: "md"
+}, i = [
+  {
+    id: "inbox",
+    groupId: "1",
+    icon: h,
+    selected: !0,
+    title: "Innboks"
+  },
+  {
+    id: "drafts",
+    groupId: "2",
+    icon: k,
+    title: "Utkast"
+  },
+  {
+    id: "sent",
+    groupId: "2",
+    icon: S,
+    title: "Sendt"
+  },
+  {
+    id: "bookmarks",
+    groupId: "3",
+    icon: f,
+    title: "Lagrede søk"
+  },
+  {
+    id: "trash",
+    groupId: "4",
+    icon: I,
+    title: "Arkivert"
+  },
+  {
+    id: "6",
+    groupId: "4",
+    icon: b,
+    title: "Papirkurv"
+  }
+], D = {
+  label: i[0].title,
+  items: i,
+  size: "md"
+};
+export {
+  U as accountMenu,
+  n as accountMenuItems,
+  N as contentFilter,
+  F as inboxFilters,
+  D as inboxMenu,
+  i as inboxMenuItems,
+  C as removableInboxFilters,
+  y as seenByFilter,
+  x as statusFilter,
+  B as timeFilter
+};

package/dist/components/Menu/example.hooks.js

@@ -0,0 +1,75 @@
+const N = (u = 10) => {
+  const m = ["Nordic", "Global", "Norwegian", "Alpha", "Beta", "Gamma", "Rapid", "Smart", "Green", "Future"], l = [
+    "Solutions",
+    "Logistics",
+    "Systems",
+    "Consulting",
+    "Bakery",
+    "Tech",
+    "Holdings",
+    "Ventures",
+    "Media",
+    "Group"
+  ], h = ["AS", "ASA", "AB", "Inc", "Ltd", "Corp"], c = (n) => n[Math.floor(Math.random() * n.length)], g = () => Math.floor(1e8 + Math.random() * 9e8).toString(), f = ((n) => {
+    const r = [], a = [];
+    for (let o = 0; o < n; o++) {
+      const t = `company-${o}`, s = `${c(m)} ${c(l)} ${c(h)}`, e = s.charAt(0).toLowerCase(), i = o > 0 && Math.random() < 0.5 ? a[Math.floor(Math.random() * a.length)] : void 0;
+      r.push({
+        id: t,
+        groupId: e,
+        name: s,
+        orgNumber: g(),
+        parentId: i
+      }), a.push(t);
+    }
+    return r.sort((o, t) => o.name.localeCompare(t.name));
+  })(u), d = [
+    {
+      id: "user",
+      groupId: "favourites",
+      name: "Kari Nordmann",
+      birthdate: "03037712345"
+    },
+    ...f
+  ].map((n) => {
+    const r = [n.name, n.orgNumber, n.birthdate];
+    if (n.birthdate)
+      return {
+        ...n,
+        searchWords: r,
+        title: n.name,
+        description: "Født: " + n.birthdate,
+        icon: {
+          type: "person",
+          name: n.name
+        }
+      };
+    function a(t) {
+      if (!t)
+        return "";
+      const s = t.length, e = Math.ceil(s / 3), p = t.slice(0, e), i = t.slice(e, e * 2), I = t.slice(e * 2);
+      return [p, i, I].join(" ");
+    }
+    const o = "Org. nr. " + a(n?.orgNumber);
+    return {
+      id: n.id,
+      groupId: n?.parentId || n.id,
+      title: n.name,
+      description: o,
+      searchWords: r,
+      icon: {
+        type: "company",
+        name: n.name,
+        isParent: !!n.parentId
+      }
+    };
+  }), C = d.find((n) => n.icon.type === "company")?.groupId || "aa", y = {
+    favourites: { title: "Favoritter" },
+    [C]: { title: "Alle virksomheter" },
+    search: { title: "{count} treff" }
+  };
+  return { items: d, groups: y };
+};
+export {
+  N as useRandomMenuItems
+};

package/dist/components/Menu/index.js

@@ -1,27 +1,26 @@
-import { MenuItemBase as o } from "./MenuItemBase.js";
-import { MenuItemLabel as m, getAriaLabelFromTitle as n } from "./MenuItemLabel.js";
-import { MenuItemIcon as p } from "./MenuItemIcon.js";
-import { MenuItem as f } from "./MenuItem.js";
-import { MenuInputField as I } from "./MenuInputField.js";
-import { MenuOption as i } from "./MenuOption.js";
-import { MenuSearch as l } from "./MenuSearch.js";
-import { MenuHeader as b } from "./MenuHeader.js";
-import { MenuItems as d } from "./MenuItems.js";
-import { MenuBase as F, MenuList as g, MenuListItem as h } from "./MenuBase.js";
-import { Menu as H } from "./Menu.js";
+import { Menu as o } from "./Menu.js";
+import { MenuItem as m } from "./MenuItem.js";
+import { MenuItems as p } from "./MenuItems.js";
+import { MenuList as f } from "./MenuList.js";
+import { MenuListItem as x } from "./MenuListItem.js";
+import { MenuListGroup as s } from "./MenuListGroup.js";
+import { MenuListDivider as a } from "./MenuListDivider.js";
+import { MenuListHeading as d } from "./MenuListHeading.js";
+import { MenuListSearch as c } from "./MenuListSearch.js";
+import { MenuOption as h } from "./MenuOption.js";
+import { TabMenu as v } from "./TabMenu.js";
+import { VirtualizedMenuItems as D } from "./VirtualizedMenuItems.js";
 export {
-  H as Menu,
-  F as MenuBase,
-  b as MenuHeader,
-  I as MenuInputField,
-  f as MenuItem,
-  o as MenuItemBase,
-  p as MenuItemIcon,
-  m as MenuItemLabel,
-  d as MenuItems,
-  g as MenuList,
-  h as MenuListItem,
-  i as MenuOption,
-  l as MenuSearch,
-  n as getAriaLabelFromTitle
+  o as Menu,
+  m as MenuItem,
+  p as MenuItems,
+  f as MenuList,
+  a as MenuListDivider,
+  s as MenuListGroup,
+  d as MenuListHeading,
+  x as MenuListItem,
+  c as MenuListSearch,
+  h as MenuOption,
+  v as TabMenu,
+  D as VirtualizedMenuItems
 };

package/dist/components/Menu/types.js

@@ -0,0 +1 @@
+

package/dist/components/Menu/useDropdownMenuController.js

@@ -0,0 +1,43 @@
+import { useId as D, useMemo as u, useState as v, useRef as c, useCallback as a, useEffect as F } from "react";
+function q(A = {}) {
+  const { id: f, focusPanelOnOpen: i = !0, returnFocusOnClose: l = !0 } = A, p = D(), n = u(() => f || `menu-${p}`, [f, p]), [e, t] = v(!1), [s, d] = v(void 0), m = c(null), r = c(null), I = c(e), O = a(() => t(!0), []), g = a(() => t(!1), []), M = a(() => t((o) => !o), []);
+  F(() => {
+    const o = I.current;
+    if (I.current = e, o && !e && l) {
+      requestAnimationFrame(() => m.current?.focus?.());
+      return;
+    }
+    !o && e && i && requestAnimationFrame(() => r.current?.focus?.());
+  }, [e, i, l]);
+  const C = u(
+    () => ({
+      menuId: n,
+      activeDescendantId: s,
+      panelRef: r
+    }),
+    [n, s]
+  ), R = u(
+    () => ({
+      id: n,
+      onActiveItemIdChange: d
+    }),
+    [n]
+  );
+  return {
+    open: e,
+    setOpen: t,
+    openMenu: O,
+    closeMenu: g,
+    toggleMenu: M,
+    menuId: n,
+    activeDescendantId: s,
+    setActiveDescendantId: d,
+    triggerRef: m,
+    panelRef: r,
+    dropdownA11yProps: C,
+    menuA11yProps: R
+  };
+}
+export {
+  q as useDropdownMenuController
+};

package/dist/components/Menu/useMenuSearch.js

@@ -0,0 +1,146 @@
+"use client";
+import * as t from "react";
+import { useRootContext as Q } from "../RootProvider/RootProvider.js";
+import { S as z } from "../../InformationSquare-D3WAxfVw.js";
+const B = (u) => {
+  switch (u) {
+    case "nn":
+      return {
+        placeholder: "Søk ...",
+        hits: (e) => `${e} treff`,
+        selected: (e) => `${e} valt`,
+        noResults: "Ingen treff"
+      };
+    case "en":
+      return {
+        placeholder: "Search ...",
+        hits: (e) => `${e} hit${e === 1 ? "" : "s"}`,
+        selected: (e) => `${e} selected`,
+        noResults: "No results"
+      };
+    default:
+      return {
+        placeholder: "Søk ...",
+        hits: (e) => `${e} treff`,
+        selected: (e) => `${e} valgt`,
+        noResults: "Ingen treff"
+      };
+  }
+}, j = (u) => {
+  const e = /* @__PURE__ */ new Set(), l = [];
+  for (const d of u) {
+    const a = d.id;
+    if (!a) {
+      l.push(d);
+      continue;
+    }
+    e.has(a) || (e.add(a), l.push(d));
+  }
+  return l;
+}, K = ({
+  placeholder: u,
+  name: e,
+  onChange: l,
+  onClear: d,
+  clearButtonAltText: a,
+  items: h = [],
+  groups: M = {}
+}) => {
+  const { languageCode: I } = Q(), o = t.useMemo(() => B(I), [I]), [f, R] = t.useState(""), C = t.useCallback(
+    (s) => {
+      R(s.target.value), l?.(s);
+    },
+    [l]
+  ), w = t.useCallback(() => {
+    R(""), d?.();
+  }, [d]), i = t.useMemo(() => f.trim().replace(/\s+/g, " "), [f]), r = i.length > 0, y = t.useMemo(() => i.toLowerCase(), [i]), v = t.useMemo(() => i ? i.split(" ") : [], [i]), H = t.useMemo(
+    () => ({
+      placeholder: u ?? o.placeholder,
+      name: e ?? "search",
+      value: f,
+      onChange: C,
+      onClear: w,
+      clearButtonAltText: a
+    }),
+    [u, o.placeholder, e, f, C, w, a]
+  ), $ = t.useMemo(
+    () => h.map((s) => {
+      const c = s?.searchWords?.length ? s.searchWords : [s?.title, s?.description].filter(Boolean);
+      return {
+        ...s,
+        searchWords: c ?? []
+      };
+    }),
+    [h]
+  ), k = t.useMemo(
+    () => [
+      {
+        id: "emptySearch",
+        title: o.noResults,
+        groupId: "emptySearch",
+        icon: z,
+        size: "sm",
+        as: "div"
+      }
+    ],
+    [o.noResults]
+  ), q = t.useMemo(() => {
+    const s = h.filter((c) => c.groupId === "emptySearch").map((c) => ({ ...c, hidden: !1 }));
+    return s.length ? s : k;
+  }, [h, k]), { selectedItems: p, results: g } = t.useMemo(() => {
+    if (!r) return { selectedItems: [], results: [] };
+    const s = [], c = [];
+    for (const S of $)
+      S.checked === !0 && s.push({ ...S, groupId: "selected" }), (S.searchWords ?? []).some((G) => String(G).toLowerCase().includes(y)) && c.push({
+        ...S,
+        groupId: "search",
+        highlightWords: v
+      });
+    return { selectedItems: s, results: c };
+  }, [r, $, y, v]), n = g.length, m = p.length, W = t.useMemo(
+    () => ({
+      search: {
+        hidden: !0,
+        title: o.hits(n)
+      },
+      selected: {
+        hidden: !0,
+        title: o.selected(m)
+      },
+      emptySearch: {
+        hidden: !0,
+        title: o.noResults
+      },
+      ...M
+    }),
+    [o, n, m, M]
+  ), L = t.useMemo(
+    () => ({
+      ...W,
+      search: {
+        hidden: !r,
+        title: o.hits(n)
+      },
+      selected: {
+        hidden: m === 0,
+        title: o.selected(m)
+      },
+      emptySearch: {
+        hidden: r && (n > 0 || m > 0),
+        title: o.noResults
+      }
+    }),
+    [W, r, o, n, m]
+  ), b = t.useMemo(() => r ? j([...g, ...p]) : [], [r, g, p]), x = t.useMemo(() => [...q || [], ...p || []], [q, p]), N = t.useMemo(() => r ? n ? b : x : h, [r, h, n, b, x]);
+  return {
+    search: H,
+    results: g,
+    resultCount: n,
+    hasQuery: r,
+    items: N,
+    groups: L
+  };
+};
+export {
+  K as useMenuSearch
+};

package/dist/components/Menu/useMenuVirtualization.js

@@ -0,0 +1,5 @@
+import { u as t } from "../../useMenuVirtualization-DpvWCsyD.js";
+import "react";
+export {
+  t as useMenuVirtualization
+};