@altinn/altinn-components 0.54.2 → 0.55.0

package/dist/components/Toolbar/Toolbar.js

@@ -1,106 +1,20 @@
-"use client";
-import { jsxs as R, jsx as s } from "react/jsx-runtime";
-import { useState as q, useMemo as T, useEffect as G } from "react";
-import { useRootContext as V } from "../RootProvider/RootProvider.js";
-import { ToolbarAccountMenu as $ } from "./ToolbarAccountMenu.js";
-import { ToolbarAdd as k } from "./ToolbarAdd.js";
-import { ToolbarBase as w } from "./ToolbarBase.js";
-import { ToolbarFilter as B } from "./ToolbarFilter.js";
-import { ToolbarSearch as E } from "./ToolbarSearch.js";
-const g = (n, c) => c || `toolbar-filter-${n}`, P = ({
-  filters: n = [],
-  filterState: c,
-  onFilterStateChange: f,
-  search: m,
-  accountMenu: b,
-  getFilterLabel: h,
-  children: v,
-  showResultsLabel: y,
-  removeButtonAltText: S,
-  addFilterButtonLabel: x
-}) => {
-  const { openId: A, closeAll: F } = V(), t = c || {}, a = typeof f == "function" ? f : () => {
-  }, [i, d] = q(
-    () => n.filter((e) => !e.removable || typeof t[e.name] < "u").map((e) => e.name)
-  ), I = T(
-    () => i.map((e) => n.find((o) => o.name === e)).filter((e) => typeof e < "u"),
-    [n, i]
-  ), u = T(
-    () => n.filter((e) => !i.includes(e.name)),
-    [n, i]
-  );
-  G(() => {
-    const e = n.filter((o) => !o.removable || typeof t[o.name] < "u").map((o) => o.name);
-    d((o) => {
-      const l = e.filter((r) => !o.includes(r));
-      return l.length === 0 ? o : [...o, ...l];
-    });
-  }, [n, t]);
-  const j = ({ name: e, value: o, type: l }) => {
-    const r = [o];
-    l === "radio" ? (F(), a({
-      ...t,
-      [e]: r
-    })) : a({
-      ...t,
-      [e]: t[e] ? t[e].some((p) => r.includes(String(p))) ? t[e].filter((p) => !(r || []).includes(String(p))) : [...t[e], ...r || []] : r
-    });
-  }, C = (e) => {
-    d((o) => o.filter((l) => l !== e)), a({
-      ...t,
-      [e]: void 0
-    }), F();
-  }, N = (e, o) => {
-    i.includes(e) || d((l) => [...l, e]), A(o), a({
-      ...t,
-      [e]: t[e] ?? []
-    }), requestAnimationFrame(() => {
-      document.querySelector(`[data-testid="${o}"]`)?.focus();
-    });
-  };
-  return /* @__PURE__ */ R(w, { children: [
-    b && /* @__PURE__ */ s($, { buttonTestId: "account-menu-button", ...b }),
-    m && /* @__PURE__ */ s(E, { ...m }),
-    I.map((e) => /* @__PURE__ */ s(
-      B,
-      {
-        id: g(e.name, e.id),
-        showResultsLabel: y,
-        onRemove: () => C(e.name),
-        onChange: j,
-        name: e.name,
-        options: e.options,
-        label: e.label,
-        optionType: e.optionType,
-        removable: e.removable,
-        getSelectedLabel: h,
-        buttonAltText: S,
-        optionGroups: e.optionGroups,
-        filterState: t,
-        search: e.search
-      },
-      e.name
-    )),
-    u?.length > 0 && /* @__PURE__ */ s(
-      k,
-      {
-        id: "toolbar-filter-add",
-        label: x,
-        items: u.map((e) => {
-          const o = g(e.name, e.id);
-          return {
-            id: o,
-            title: e.label,
-            name: e.name,
-            onClick: () => N(e.name, o)
-          };
-        })
-      },
-      u.join(",")
-    ),
-    v
-  ] });
-};
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import "../Button/Button.js";
+import "../../index-p1eeF8LQ.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import { ToolbarFilter as u } from "./ToolbarFilter.js";
+import { ToolbarSearch as b } from "./ToolbarSearch.js";
+import { ToolbarMenu as i } from "./ToolbarMenu.js";
+import { ButtonGroup as f } from "../Button/ButtonGroup.js";
+const F = ({ accountMenu: o, menus: p, search: m, filter: t, children: e }) => /* @__PURE__ */ s(f, { size: "xs", wrap: !0, children: [
+  o && /* @__PURE__ */ r(i, { size: "md", ...o, virtualized: !0 }),
+  p?.map((a, l) => /* @__PURE__ */ r(i, { ...a }, l)),
+  m && /* @__PURE__ */ r(b, { ...m }),
+  t && /* @__PURE__ */ r(u, { ...t }),
+  e
+] });
 export {
-  P as Toolbar
+  F as Toolbar
 };

package/dist/components/Toolbar/ToolbarFilter.js

@@ -1,83 +1,79 @@
-import { jsxs as I, jsx as a } from "react/jsx-runtime";
+import { jsxs as g, jsx as m } from "react/jsx-runtime";
+import { useState as C, createElement as M } from "react";
+import { Button as w } from "../Button/Button.js";
 import "../../index-p1eeF8LQ.js";
-import "react";
-import { useIsDesktop as j } from "../../hooks/useIsDesktop.js";
-import "../Button/Button.js";
-import { useRootContext as F } from "../RootProvider/RootProvider.js";
-import { DrawerOrDropdown as L } from "../Dropdown/DrawerOrDropdown.js";
+import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { ToolbarButton as O } from "./ToolbarButton.js";
-import { ToolbarFilterBase as R } from "./ToolbarFilterBase.js";
-import { ToolbarOptions as E } from "./ToolbarOptions.js";
-const G = (i, t) => Array.isArray(t) ? t.join(", ") : t, Q = ({
-  removable: i,
-  label: t,
-  name: o,
-  filterState: c,
-  options: m,
-  optionGroups: b,
-  onChange: y,
-  onRemove: T,
-  buttonAltText: p = "Remove button",
-  getSelectedLabel: g,
-  showResultsLabel: x = "Show results",
-  search: A,
-  optionType: h,
-  id: s = `toolbar-filter-${o}`
+import { useFilter as I } from "./useFilter.js";
+import { ButtonGroup as L } from "../Button/ButtonGroup.js";
+import { ToolbarFilterAddMenu as N } from "./ToolbarFilterAddMenu.js";
+import { ToolbarFilterMenu as O } from "./ToolbarFilterMenu.js";
+import { S as y } from "../../XMark-tKk6aExO.js";
+const V = ({
+  filters: n,
+  filterState: e = {},
+  onFilterStateChange: r,
+  addLabel: u = "Legg til filter",
+  addNextLabel: b = "Legg til",
+  resetLabel: v = "Nullstill",
+  removeLabel: h = "Fjern filter",
+  submitLabel: F,
+  getFilterLabel: T,
+  virtualized: j
 }) => {
-  const { currentId: v, toggleId: k, closeAll: d } = F(), u = j(), w = (m ?? []).map((r) => {
-    const e = c?.[r.name || o];
-    return {
-      name: o,
-      ...r,
-      checked: Array.isArray(e) ? e.includes(r.value) : r.value === e
-    };
-  }), n = c?.[o], B = g?.(o, n) ?? G(o, n), f = () => k(s), l = v === s, C = (r) => {
-    const e = r.relatedTarget;
-    u && (!e || !r.currentTarget.contains(e)) && d();
-  }, D = Array.isArray(n) ? n.length > 0 : typeof n < "u";
-  return /* @__PURE__ */ I(R, { expanded: l, onBlurCapture: C, "data-testid": "filter-base-" + s, children: [
-    /* @__PURE__ */ a(
-      O,
+  const { visibleFilters: l, hiddenFilters: s, onFilterAdd: x, onFilterChange: R, onFilterRemove: i } = I({
+    filters: n,
+    filterState: e,
+    onFilterStateChange: r
+  }), f = (n?.filter((o) => o.removable)?.length || 0) > 0 && Object.values(e)?.some((o) => o && o?.length > 0), k = n?.filter((o) => o.removable)?.map((o) => o.name) ?? [], [a, d] = C(void 0), p = (o) => {
+    d((t) => t === o ? void 0 : o);
+  }, c = () => {
+    d(void 0);
+  }, A = () => {
+    for (const o of k)
+      i(o);
+    r?.({});
+  };
+  return /* @__PURE__ */ g(L, { size: "xs", wrap: !0, children: [
+    l?.map((o, t) => {
+      const B = T?.(o?.name, e?.[o?.id]) ?? o?.label;
+      return /* @__PURE__ */ M(
+        O,
+        {
+          ...o,
+          submitLabel: F,
+          key: t,
+          onToggle: () => p(o.name),
+          onClose: c,
+          open: a === o.name,
+          label: B,
+          onRemove: () => i(o.name),
+          removeLabel: h,
+          onFilterChange: R,
+          onFilterStateChange: r,
+          filterState: e
+        }
+      );
+    }),
+    s?.length > 0 && /* @__PURE__ */ m(
+      N,
       {
-        type: "select",
-        removable: i,
-        active: D,
-        onToggle: f,
-        ariaLabel: p,
-        iconAltText: p,
-        onRemove: T,
-        "data-testid": s,
-        tabIndex: l ? -1 : 0,
-        children: B || t
+        name: "add",
+        onToggle: () => p("add"),
+        onClose: c,
+        open: a === "add",
+        items: s,
+        onAdd: x,
+        label: l?.length > 0 ? b : u,
+        virtualized: j
       }
     ),
-    /* @__PURE__ */ a(
-      L,
-      {
-        open: l,
-        drawerTitle: t,
-        onClose: d,
-        drawerButton: {
-          onClick: f,
-          label: x
-        },
-        children: /* @__PURE__ */ a(
-          E,
-          {
-            name: o,
-            options: w,
-            optionGroups: b,
-            onChange: y,
-            optionType: h,
-            keyboardEvents: l && u,
-            search: A
-          }
-        )
-      }
-    )
+    f && /* @__PURE__ */ g(w, { onClick: A, variant: "ghost", children: [
+      /* @__PURE__ */ m(y, { "aria-hidden": "true" }),
+      /* @__PURE__ */ m("span", { children: v })
+    ] })
   ] });
 };
 export {
-  Q as ToolbarFilter
+  V as ToolbarFilter
 };

package/dist/components/Toolbar/ToolbarFilterAddMenu.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as s, jsxs as h } from "react/jsx-runtime";
+import f, { forwardRef as v, useRef as m, useEffect as y } from "react";
+import { Button as w } from "../Button/Button.js";
+import "../../index-p1eeF8LQ.js";
+import { Dropdown as b } from "../Dropdown/Dropdown.js";
+import "../RootProvider/RootProvider.js";
+import { Menu as O } from "../Menu/Menu.js";
+import { useDropdownMenuController as x } from "../Menu/useDropdownMenuController.js";
+import "../Snackbar/useSnackbar.js";
+import { u as I } from "../../useId-BVFxCjkq.js";
+var R = function(t, a) {
+  var o = {};
+  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && a.indexOf(e) < 0 && (o[e] = t[e]);
+  if (t != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var r = 0, e = Object.getOwnPropertySymbols(t); r < e.length; r++)
+      a.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (o[e[r]] = t[e[r]]);
+  return o;
+};
+const j = v((t, a) => {
+  var { title: o, titleId: e } = t, r = R(t, ["title", "titleId"]);
+  let i = I();
+  return i = o ? e || "title-" + i : void 0, f.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: a, "aria-labelledby": i }, r),
+    o ? f.createElement("title", { id: i }, o) : null,
+    f.createElement("path", { fill: "currentColor", d: "M12.75 5.5a.75.75 0 0 0-1.5 0v5.75H5.5a.75.75 0 0 0 0 1.5h5.75v5.75a.75.75 0 0 0 1.5 0v-5.75h5.75a.75.75 0 0 0 0-1.5h-5.75z" })
+  );
+}), H = ({
+  label: t = "Legg til filter",
+  items: a,
+  groups: o = {},
+  onAdd: e,
+  onToggle: r,
+  onClose: i,
+  open: n
+}) => {
+  const l = x({ id: "tool-filter-add" }), u = m(n), p = m(!1), c = a?.map((d) => ({
+    ...d,
+    onClick: () => e?.(d?.name ?? "")
+  }));
+  if (y(() => {
+    const d = u.current;
+    u.current = n, d && !n && l?.triggerRef?.current?.focus();
+  }, [n, l.triggerRef]), !c?.length)
+    return null;
+  const g = () => {
+    const d = document.getElementById(l.menuId);
+    p.current = !!d?.querySelector('[aria-haspopup="menu"][aria-expanded="true"]'), i();
+  };
+  return /* @__PURE__ */ s(
+    b,
+    {
+      variant: "drawer-dropdown",
+      trigger: /* @__PURE__ */ h(
+        w,
+        {
+          variant: "secondary",
+          style: {
+            borderStyle: "dashed"
+          },
+          "aria-haspopup": "menu",
+          "aria-expanded": n,
+          "aria-controls": n ? l.menuId : void 0,
+          onClick: r,
+          ref: l.triggerRef,
+          children: [
+            /* @__PURE__ */ s(j, { "aria-hidden": "true", focusable: "false" }),
+            /* @__PURE__ */ s("span", { children: t })
+          ]
+        }
+      ),
+      open: n,
+      onClose: g,
+      ...l.dropdownA11yProps,
+      children: /* @__PURE__ */ s(O, { groups: o, items: c, maxLevels: 1, keyboardEvents: n, open: n, ...l.menuA11yProps })
+    }
+  );
+};
+export {
+  H as ToolbarFilterAddMenu
+};

package/dist/components/Toolbar/ToolbarFilterButton.js

@@ -0,0 +1,46 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { Button as o } from "../Button/Button.js";
+import "../../index-p1eeF8LQ.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import { Tooltip as s } from "../Tooltip/Tooltip.js";
+import "../Snackbar/useSnackbar.js";
+import { ButtonGroup as c } from "../Button/ButtonGroup.js";
+import { ButtonGroupDivider as h } from "../Button/ButtonGroupDivider.js";
+import { S as b } from "../../XMark-tKk6aExO.js";
+import { S as v } from "../../ChevronUpDown-DqGsU4MC.js";
+function w({
+  name: i,
+  value: p,
+  onClick: e,
+  removable: d,
+  removeLabel: a = "Fjern filter",
+  onRemove: u,
+  children: n,
+  open: f,
+  ref: l
+}) {
+  const t = p ? "tinted" : "outline";
+  return d ? /* @__PURE__ */ m(c, { variant: t, connected: !0, children: [
+    /* @__PURE__ */ r(o, { variant: t, onClick: e, "data-id": `filter-button-${i}`, "aria-expanded": f, ref: l, children: /* @__PURE__ */ r("span", { children: n }) }),
+    /* @__PURE__ */ r(h, { variant: t }),
+    /* @__PURE__ */ r(s, { content: a, children: /* @__PURE__ */ r(
+      o,
+      {
+        variant: t,
+        onClick: u,
+        style: {
+          borderLeft: "none",
+          borderRadius: "0 .25em .25em 0"
+        },
+        children: /* @__PURE__ */ r(b, { "aria-hidden": "true" })
+      }
+    ) })
+  ] }) : /* @__PURE__ */ m(o, { variant: t, onClick: e, "data-id": `filter-button-${i}`, children: [
+    /* @__PURE__ */ r("span", { children: n }),
+    /* @__PURE__ */ r(v, {})
+  ] });
+}
+export {
+  w as ToolbarFilterButton
+};

package/dist/components/Toolbar/ToolbarFilterMenu.js

@@ -0,0 +1,117 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useRef as O, useEffect as B } from "react";
+import "../../index-p1eeF8LQ.js";
+import "../Button/Button.js";
+import { Menu as T } from "../Menu/Menu.js";
+import { useDropdownMenuController as V } from "../Menu/useDropdownMenuController.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import { Dropdown as I } from "../Dropdown/Dropdown.js";
+import { ToolbarFilterButton as M } from "./ToolbarFilterButton.js";
+const Y = ({
+  as: R,
+  size: l,
+  name: n,
+  label: a = "",
+  searchable: c,
+  groups: f,
+  items: p,
+  removable: A,
+  removeLabel: F = "Fjern filter",
+  filterState: s,
+  onFilterStateChange: g,
+  onFilterChange: P,
+  onRemove: E,
+  open: o,
+  onToggle: v,
+  onClose: u,
+  submitLabel: w,
+  search: y,
+  virtualized: b
+}) => {
+  const x = O(o), t = V({ id: "toolbar-filter-menu" });
+  B(() => {
+    const r = x.current;
+    x.current = o, r && !o && t?.triggerRef?.current?.focus();
+  }, [o, t.triggerRef]);
+  const j = (r) => {
+    const m = r.target.type, C = r.target.name, D = r.target.value;
+    P?.(m, C, D), m === "radio" && u();
+  }, h = p?.map((r) => ({
+    ...r,
+    onChange: (m) => j(m)
+  })), i = p?.filter((r) => r.checked)?.map((r) => r.value || "true"), k = R || T, d = c ? "combobox" : "menu";
+  return A ? /* @__PURE__ */ e(
+    I,
+    {
+      submitLabel: w,
+      variant: "drawer-dropdown",
+      trigger: /* @__PURE__ */ e(
+        M,
+        {
+          name: n,
+          onClick: v,
+          onRemove: E,
+          removable: !0,
+          value: i?.length > 0 ? i : void 0,
+          removeLabel: F,
+          open: o,
+          "aria-expanded": o,
+          "aria-controls": t.menuId,
+          ref: t.triggerRef,
+          children: a
+        }
+      ),
+      open: o,
+      onClose: u,
+      ...t.dropdownA11yProps,
+      children: /* @__PURE__ */ e(
+        k,
+        {
+          search: y,
+          name: n,
+          filterState: s,
+          onFilterStateChange: g,
+          size: l,
+          searchable: c,
+          groups: f,
+          items: h,
+          keyboardEvents: o,
+          a11yMode: d,
+          ...d === "combobox" ? { id: t.menuId } : t.menuA11yProps,
+          virtualized: b
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e(
+    I,
+    {
+      variant: "drawer-dropdown",
+      submitLabel: w,
+      trigger: /* @__PURE__ */ e(M, { name: n, onClick: v, value: i?.length > 0 ? i : void 0, children: a }),
+      open: o,
+      onClose: u,
+      ...t.dropdownA11yProps,
+      children: /* @__PURE__ */ e(
+        k,
+        {
+          search: y,
+          name: n,
+          filterState: s,
+          onFilterStateChange: g,
+          size: l,
+          searchable: c,
+          groups: f,
+          items: h,
+          keyboardEvents: o,
+          a11yMode: d,
+          ...d === "combobox" ? { id: t.menuId } : t.menuA11yProps,
+          virtualized: b
+        }
+      )
+    }
+  );
+};
+export {
+  Y as ToolbarFilterMenu
+};

package/dist/components/Toolbar/ToolbarMenu.js

@@ -1,28 +1,65 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { Button as d } from "../Button/Button.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import "../Button/Button.js";
-import { useRootContext as f } from "../RootProvider/RootProvider.js";
-import { DrawerOrDropdown as x } from "../Dropdown/DrawerOrDropdown.js";
-import { Menu as T } from "../Menu/Menu.js";
+import { Dropdown as u } from "../Dropdown/Dropdown.js";
+import "../RootProvider/RootProvider.js";
+import { Menu as c } from "../Menu/Menu.js";
+import { useDropdownMenuController as b } from "../Menu/useDropdownMenuController.js";
 import "../Snackbar/useSnackbar.js";
-import { ToolbarButton as b } from "./ToolbarButton.js";
-import { ToolbarFilterBase as g } from "./ToolbarFilterBase.js";
-const y = ({
-  label: e,
-  value: n,
-  groups: m,
-  search: i,
-  items: l,
-  id: r = "toolbar-menu",
-  title: p = "Endre aktør"
+import { S as f } from "../../ChevronUpDown-DqGsU4MC.js";
+const k = ({
+  title: a = "Title",
+  label: i = "Label",
+  items: p = [],
+  onSelectId: l,
+  ...e
 }) => {
-  const { currentId: s, toggleId: c, closeAll: a } = f(), d = () => c(r), t = s === r;
-  return /* @__PURE__ */ u(g, { expanded: t, children: [
-    /* @__PURE__ */ o(b, { type: "switch", onToggle: d, active: !!n, children: e }),
-    /* @__PURE__ */ o(x, { open: t, drawerTitle: p, onClose: a, children: /* @__PURE__ */ o(T, { groups: m, search: i, items: l }) })
-  ] });
+  const o = b({ id: "toolbar-menu", returnFocusOnClose: !0 }), n = e.searchable ? "combobox" : "menu", m = p.map((t) => ({
+    ...t,
+    onClick: () => {
+      l?.(t?.id ?? ""), o.setOpen(!1);
+    }
+  }));
+  return /* @__PURE__ */ r(
+    u,
+    {
+      id: "toolbar-menu",
+      variant: "drawer-dropdown",
+      title: a,
+      trigger: /* @__PURE__ */ s(
+        d,
+        {
+          variant: "primary",
+          onClick: o.toggleMenu,
+          "aria-expanded": o.open,
+          "aria-haspopup": "menu",
+          "aria-controls": o.open ? o.menuId : void 0,
+          ref: o.triggerRef,
+          children: [
+            /* @__PURE__ */ r("span", { children: i }),
+            /* @__PURE__ */ r(f, { "aria-hidden": "true", focusable: "false" })
+          ]
+        }
+      ),
+      open: o.open,
+      onClose: () => o.setOpen(!1),
+      ...e?.searchable ? {} : o.dropdownA11yProps,
+      children: /* @__PURE__ */ r(
+        c,
+        {
+          ...e,
+          items: m,
+          keyboardEvents: o.open,
+          a11yMode: n,
+          open: o.open,
+          scrollToTopOnOpen: e.virtualized,
+          ...n === "combobox" ? { id: o.menuId } : o.menuA11yProps
+        }
+      )
+    }
+  );
 };
 export {
-  y as ToolbarMenu
+  k as ToolbarMenu
 };

package/dist/components/Toolbar/ToolbarSearch.js

@@ -1,29 +1,34 @@
-import { jsx as p } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { SearchField as a } from "../Forms/SearchField.js";
 import "../Snackbar/useSnackbar.js";
-const n = ({
+import { SearchField as c } from "../Forms/SearchField.js";
+const S = ({
   value: r,
   name: o,
   placeholder: t = "Search",
-  clearButtonAltText: e = "Clear search",
+  collapsible: e,
+  clearButtonAltText: a = "Clear search",
   onChange: i,
-  onClear: m
-}) => /* @__PURE__ */ p(
-  a,
+  onClear: p
+}) => /* @__PURE__ */ m(
+  c,
   {
     size: "xs",
     value: r,
     name: o,
     placeholder: t,
-    clearButtonAltText: e,
+    clearButtonAltText: a,
     onChange: i,
-    onClear: m
+    onClear: p,
+    collapsible: e,
+    autoComplete: "off",
+    autoCapitalize: "off",
+    type: "search"
   }
 );
 export {
-  n as ToolbarSearch
+  S as ToolbarSearch
 };