@altinn/altinn-components 0.54.2 → 0.55.0

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

@@ -0,0 +1,388 @@
+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",
+      role: "datepicker",
+      icon: o,
+      title: "Spesifiser dato ...",
+      linkIcon: !0
+    }
+  ]
+}, y = {
+  id: "seenBy",
+  groupId: "2",
+  icon: v,
+  name: "seenBy",
+  label: "Sett av ...",
+  searchable: !0,
+  search: {
+    name: "seenBy",
+    placeholder: "Seen by who?",
+    onChange: (e) => console.log(e.target.value)
+  },
+  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], V = 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"
+  },
+  {
+    id: "cc-3",
+    groupId: "dd",
+    name: "Den kjempeskumle krokodillen Alan",
+    orgNumber: "333444557",
+    parentId: ""
+  }
+].map((e) => {
+  const a = [e.name, e.orgNumber, e.birthdate].filter(Boolean) || void 0;
+  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 l(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 d = "Org. nr. " + l(e?.orgNumber);
+  return {
+    id: e.id,
+    groupId: e.groupId,
+    title: e.name,
+    description: d,
+    searchWords: a,
+    icon: {
+      type: "company",
+      name: e.name,
+      isParent: !!e?.parentId
+    }
+  };
+}), D = {
+  label: n[0].title,
+  items: n,
+  searchable: !0,
+  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"
+  }
+], U = {
+  label: i[0].title,
+  items: i,
+  size: "sm"
+};
+export {
+  D as accountMenu,
+  n as accountMenuItems,
+  N as contentFilter,
+  F as inboxFilters,
+  U as inboxMenu,
+  i as inboxMenuItems,
+  V as removableInboxFilters,
+  y as seenByFilter,
+  x as statusFilter,
+  B as timeFilter
+};

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

@@ -0,0 +1,68 @@
+import { useState as S } from "react";
+import { inboxFilters as v, accountMenu as l } from "./example.data.js";
+import { formatDateRange as h } from "./formatDateRange.js";
+const p = ({ filters: s = v, defaultFilterState: c = {} }) => {
+  const [n, u] = S(c), d = () => {
+    const t = n?.seenBy || [], e = t?.length;
+    return e > 1 && t?.includes("you") && t?.includes("others") ? "Sett av deg + andre" : e > 1 && t?.includes("you") ? `Sett av deg + ${e - 1}` : t?.includes("user") ? "Sett av deg" : t?.includes("others") ? "Sett av andre" : e ? `Sett av ${e}` : "Sett av ...";
+  }, o = () => {
+    const t = (n?.drafts?.length ?? 0) > 0 ? "Utkast" : void 0, e = (n?.attachments?.length ?? 0) > 0 ? "Vedlegg" : void 0, i = (n?.sent?.length ?? 0) > 0 ? "Sendt" : void 0, r = (n?.received?.length ?? 0) > 0 ? "Mottatt" : void 0;
+    return [t, e, i, r].filter(Boolean).join(" + ");
+  }, b = () => {
+    const t = n?.fromDate?.[0]?.toString(), e = n?.toDate?.[0]?.toString();
+    if (t && e)
+      return h(t, e);
+    if (t)
+      return h(t);
+    const i = n?.time || [], r = i?.length, g = s?.find((a) => a.name === "time")?.items, m = i?.map((a) => g?.find((f) => f.value === a)?.title);
+    return r === 1 ? m?.[0] : r > 1 ? `${r} tider` : "Tid";
+  }, L = () => {
+    const t = n?.status || [], e = t?.length, i = s?.find((a) => a.name === "status")?.items, r = t?.map((a) => i?.find((f) => f.value === a)?.title), g = (n?.unread?.length ?? 0) > 0 ? "Ulest" : void 0, m = e === 1 ? r?.[0] : e > 1 ? `${e} statuser` : void 0;
+    return [g, m].filter(Boolean).join(" + ");
+  };
+  return {
+    addLabel: "Legg til filter",
+    submitLabel: "Show results",
+    addNextLabel: "Legg til",
+    filters: s,
+    filterState: n,
+    onFilterStateChange: u,
+    getFilterLabel: (t) => {
+      switch (t) {
+        case "status":
+          return L() || "Status";
+        case "time":
+          return b() || "Tid";
+        case "seenBy":
+          return d() || "Sett av";
+        case "content":
+          return o() || "Innhold";
+        default:
+          return t;
+      }
+    }
+  };
+}, F = () => {
+  const [s, c] = S(l.items[0].id), n = (o) => {
+    c(o);
+  }, u = l.items.find((o) => o.id === s)?.title?.toString() || "Account", d = l.items.map((o) => ({
+    ...o,
+    selected: o.id === s
+  }));
+  return { ...l, label: u, onSelectId: n, items: d, virtualized: !0 };
+}, A = () => {
+  const s = p({ filters: v });
+  return {
+    menus: [F()],
+    search: {
+      name: "search",
+      placeholder: "Søk"
+    },
+    filter: s
+  };
+};
+export {
+  F as useAccountMenu,
+  p as useInboxFilter,
+  A as useInboxToolbar
+};

package/dist/components/Toolbar/formatDateRange.js

@@ -0,0 +1,19 @@
+function u(e) {
+  if (!e || e === "" || !/^\d{4}-\d{2}-\d{2}$/.test(e))
+    return !1;
+  const [s, t, a] = e.split("-"), n = Number.parseInt(s, 10), i = Number.parseInt(t, 10), m = Number.parseInt(a, 10), o = new Date(n, i - 1, m);
+  return !Number.isNaN(o.getTime()) && // Check if date is not "Invalid Date"
+  o.getFullYear() === n && o.getMonth() + 1 === i && // Add 1 back to month for comparison
+  o.getDate() === m;
+}
+function f(e, r, s = "nb-NO") {
+  const t = e && u(e) ? new Date(e) : void 0, a = r && u(r) ? new Date(r) : void 0, n = new Intl.DateTimeFormat(s, {
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  });
+  return t && a && n.formatRange ? n.formatRange(t, a) : t ? n.format(t) : "";
+}
+export {
+  f as formatDateRange
+};

package/dist/components/Toolbar/index.js

@@ -1,16 +1,14 @@
-import { ToolbarBase as e } from "./ToolbarBase.js";
-import { ToolbarButton as t } from "./ToolbarButton.js";
-import { Toolbar as b } from "./Toolbar.js";
-import { ToolbarSearch as m } from "./ToolbarSearch.js";
-import { ToolbarFilterBase as x } from "./ToolbarFilterBase.js";
-import { ToolbarFilter as B } from "./ToolbarFilter.js";
-import { ToolbarDaterange as n } from "./ToolbarDaterange.js";
+import { Toolbar as e } from "./Toolbar.js";
+import { ToolbarFilter as l } from "./ToolbarFilter.js";
+import { ToolbarSearch as f } from "./ToolbarSearch.js";
+import { ToolbarMenu as p } from "./ToolbarMenu.js";
+import { useFilter as b } from "./useFilter.js";
+import { SelectDateFilter as i } from "./SelectDateFilter.js";
 export {
-  b as Toolbar,
-  e as ToolbarBase,
-  t as ToolbarButton,
-  n as ToolbarDaterange,
-  B as ToolbarFilter,
-  x as ToolbarFilterBase,
-  m as ToolbarSearch
+  i as SelectDateFilter,
+  e as Toolbar,
+  l as ToolbarFilter,
+  p as ToolbarMenu,
+  f as ToolbarSearch,
+  b as useFilter
 };

package/dist/components/Toolbar/useFilter.js

@@ -0,0 +1,63 @@
+"use client";
+import { useState as g, useMemo as f, useEffect as h } from "react";
+const m = (l, d) => d || `toolbar-filter-${l}`, N = ({ filters: l = [], filterState: d, onFilterStateChange: u }) => {
+  const i = d || {}, c = typeof u == "function" ? u : () => {
+  }, [r, o] = g(
+    () => l.filter((e) => !e.removable || typeof i[e.name] < "u").map((e) => e.name)
+  ), F = f(
+    () => r.map((e) => l.find((t) => t.name === e)).filter((e) => typeof e < "u"),
+    [l, r]
+  ), b = f(
+    () => l.filter((e) => !r.includes(e.name)),
+    [l, r]
+  );
+  h(() => {
+    const e = l.filter((t) => !t.removable || typeof i[t.name] < "u").map((t) => t.name);
+    o((t) => {
+      const s = e.filter((n) => !t.includes(n));
+      return s.length === 0 ? t : [...t, ...s];
+    });
+  }, [l, i]);
+  const v = (e, t, s) => {
+    const n = [s];
+    c(e === "radio" ? {
+      ...i,
+      [t]: n
+    } : {
+      ...i,
+      [t]: i[t] ? i[t].some((a) => n.includes(String(a))) ? i[t].filter((a) => !(n || []).includes(String(a))) : [...i[t], ...n || []] : n
+    });
+  }, p = (e) => {
+    o((t) => t.filter((s) => s !== e)), c({
+      ...i,
+      [e]: void 0
+    });
+  }, y = (e) => {
+    r.includes(e) || o((t) => [...t, e]), c({
+      ...i,
+      [e]: i[e] ?? []
+    }), requestAnimationFrame(() => {
+      document.querySelector(`[data-id="filter-button-${e}"]`)?.click();
+    });
+  };
+  return {
+    visibleFilters: F?.map((e) => ({
+      ...e,
+      items: e.items?.map((t) => ({
+        ...t,
+        checked: t?.name && t?.value !== void 0 ? i?.[t.name]?.includes(t.value) : !1
+      })),
+      id: m(e.name, e.id)
+    })),
+    hiddenFilters: b?.map((e) => ({
+      ...e,
+      id: m(e.name, e.id)
+    })),
+    onFilterChange: v,
+    onFilterRemove: p,
+    onFilterAdd: y
+  };
+};
+export {
+  N as useFilter
+};

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsxs as z, Fragment as I, jsx as w } from "react/jsx-runtime";
+import { a as j, c as D, o as N, f as W, s as x } from "../../floating-ui.dom-bEgaHJCq.js";
+import { S as B } from "../../index-D7FJjvrv.js";
+import { c as K } from "../../lite-1fxw3LjI.js";
+import { forwardRef as U, useId as X, useState as Y, useRef as k, useEffect as E, Fragment as q, version as T } from "react";
+import { u as G } from "../../use-merge-refs-Cj4kTYVj.js";
+import '../../assets/Tooltip.css';const H = U(function({ id: s, children: e, content: n, placement: t = "top", autoPlacement: o = !0, open: P, className: M, type: v, ...R }, $) {
+  const F = X(), [L, f] = Y(!1), d = k(null), u = k(null), O = G([u, $]), i = P ?? L, m = s ?? F, g = () => {
+    f(!0);
+  }, h = () => {
+    f(!1);
+  };
+  E(() => {
+    const a = u.current, p = d.current;
+    if (a?.togglePopover?.(i), a && (a.style.opacity = i ? "1" : "0"), a && p && i)
+      return j(p, a, () => {
+        D(p, a, {
+          placement: t,
+          strategy: "fixed",
+          middleware: [
+            N((l) => {
+              const c = getComputedStyle(l.elements.floating, "::before");
+              return parseFloat(c.height);
+            }),
+            ...o ? [W({ fallbackAxisSideDirection: "start" }), x()] : [],
+            x(),
+            J,
+            Q
+          ]
+        }).then(({ x: l, y: c }) => {
+          a.style.translate = `${Math.round(l)}px ${Math.round(c)}px`;
+        });
+      });
+  }, [i, t]), E(() => {
+    const a = u.current, p = d.current, l = (y) => {
+      y.key === "Escape" && f(!1);
+    }, c = (y) => {
+      const b = y.target, C = a?.contains(b);
+      !p?.contains(b) && !C && i && f(!1);
+    };
+    return i && (window.addEventListener("keydown", l), document.addEventListener("click", c)), () => {
+      window.removeEventListener("keydown", l), document.removeEventListener("click", c);
+    };
+  }, [i]);
+  const S = typeof e == "string" ? "span" : B;
+  if (typeof e != "string" && e.type === q)
+    return console.error("<Tooltip> children needs to be a single ReactElement that can receive a ref and not: <Fragment/> | <></>"), null;
+  const _ = {
+    [T.startsWith("19") ? "popoverTarget" : "popovertarget"]: m,
+    [T.startsWith("19") ? "popoverTargetAction" : "popovertargetaction"]: "show"
+  }, A = `aria-${d.current?.innerText?.trim() ? "describedby" : "labelledby"}`;
+  return z(I, { children: [w(S, { ref: d, ..._, onMouseEnter: g, onMouseLeave: h, onFocus: g, onBlur: h, [v ? "aria-" + v : A]: m, children: e }), w("span", { onMouseEnter: g, onMouseLeave: h, ref: O, role: "tooltip", className: K("ds-tooltip", M), id: m, popover: "manual", ...R, children: n })] });
+}), J = {
+  name: "ArrowPseudoElement",
+  fn(r) {
+    const { elements: s, rects: e, placement: n } = r;
+    let t = `${Math.round(e.reference.width / 2 + e.reference.x - r.x)}px`, o = `${Math.round(e.reference.height / 2 + e.reference.y - r.y)}px`;
+    switch (n) {
+      case "top":
+        o = "100%";
+        break;
+      case "right":
+        t = "0";
+        break;
+      case "bottom":
+        o = "0";
+        break;
+      case "left":
+        t = "100%";
+        break;
+    }
+    return s.floating.style.setProperty("--dsc-tooltip-arrow-x", t), s.floating.style.setProperty("--dsc-tooltip-arrow-y", o), r;
+  }
+}, Q = {
+  name: "SafeAreaElement",
+  fn(r) {
+    const { elements: s, placement: e } = r;
+    let n = "100%", t = "var(--dsc-tooltip-arrow-size)", o = "0px";
+    switch (e) {
+      case "top":
+        o = "-50% 0%";
+        break;
+      case "right":
+        t = "100%", n = "var(--dsc-tooltip-arrow-size)", o = "-100% -50%";
+        break;
+      case "bottom":
+        o = "-50% -100%";
+        break;
+      case "left":
+        t = "100%", n = "var(--dsc-tooltip-arrow-size)", o = "0 -50%";
+        break;
+    }
+    return s.floating.style.setProperty("--_dsc-tooltip-safearea-height", t), s.floating.style.setProperty("--_dsc-tooltip-safearea-width", n), s.floating.style.setProperty("--_dsc-tooltip-safearea-translate", o), r;
+  }
+}, V = "_tooltip_10ebf_1", Z = {
+  tooltip: V
+}, le = ({ size: r = "xs", placement: s, children: e, content: n, hidden: t }) => /* @__PURE__ */ w(H, { "aria-hidden": t, "data-size": r, content: n, placement: s, className: Z.tooltip, children: e });
+export {
+  le as Tooltip
+};

package/dist/components/Tooltip/index.js

@@ -0,0 +1,4 @@
+import { Tooltip as r } from "./Tooltip.js";
+export {
+  r as Tooltip
+};