@altinn/altinn-components 0.56.34 → 0.57.3

package/dist/components/Toolbar/DatepickerFilter.js

@@ -6,21 +6,20 @@ import { Label as c } from "../Forms/Label.js";
 import { Input as s } from "../Forms/Input.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import { useRootContext as x } from "../RootProvider/RootProvider.js";
+import { x, q as g } from "../../Section-xbt3ft20.js";
 import "../Button/Button.js";
 import "react-dom";
-import { MenuItem as g } from "../Menu/MenuItem.js";
 import { MenuList as M } from "../Menu/MenuList.js";
 import { MenuListItem as m } from "../Menu/MenuListItem.js";
 import { MenuListDivider as p } from "../Menu/MenuListDivider.js";
 import "../Snackbar/useSnackbar.js";
 import { S } from "../../ArrowUndo-hge1gMu8.js";
-import '../../assets/DatepickerFilter.css';const u = {}, Q = ({
+import '../../assets/DatepickerFilter.css';const u = {}, P = ({
   formData: t = { fromDate: "", toDate: "" },
   onChange: r,
-  onSubmit: f
+  onSubmit: b
 }) => {
-  const { fromDate: i, toDate: a } = t, { languageCode: b } = x(), { backLabel: d, fromLabel: L, toLabel: D } = y(b), k = (o) => {
+  const { fromDate: a, toDate: i } = t, { languageCode: f } = x(), { backLabel: d, fromLabel: L, toLabel: D } = y(f), k = (o) => {
     r?.({
       ...t,
       fromDate: o.target.value
@@ -31,7 +30,7 @@ import '../../assets/DatepickerFilter.css';const u = {}, Q = ({
       toDate: o.target.value
     });
   }, F = (o) => {
-    if (a) {
+    if (i) {
       r?.({
         ...t,
         fromDate: o,
@@ -39,16 +38,16 @@ import '../../assets/DatepickerFilter.css';const u = {}, Q = ({
       });
       return;
     }
-    if (!i) {
+    if (!a) {
       r?.({
         ...t,
         fromDate: o
       });
       return;
     }
-    o < i ? r?.({
+    o < a ? r?.({
       ...t,
-      toDate: i,
+      toDate: a,
       fromDate: o
     }) : r?.({
       ...t,
@@ -57,21 +56,21 @@ import '../../assets/DatepickerFilter.css';const u = {}, Q = ({
   };
   return /* @__PURE__ */ l(M, { children: [
     /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(g, { variant: "default", icon: S, title: d, onClick: () => {
-      f?.({ fromDate: i, toDate: a });
+      b?.({ fromDate: a, toDate: i });
     } }) }),
     /* @__PURE__ */ e(p, {}),
     /* @__PURE__ */ e(m, { children: /* @__PURE__ */ l(v, { size: "xs", children: [
       /* @__PURE__ */ l(n, { children: [
         /* @__PURE__ */ e(c, { children: L }),
-        /* @__PURE__ */ e(s, { className: u.input, name: "fromDate", value: i, type: "date", onChange: k })
+        /* @__PURE__ */ e(s, { className: u.input, name: "fromDate", value: a, type: "date", onChange: k })
       ] }),
       /* @__PURE__ */ l(n, { children: [
         /* @__PURE__ */ e(c, { children: D }),
-        /* @__PURE__ */ e(s, { className: u.input, name: "toDate", value: a, type: "date", onChange: h })
+        /* @__PURE__ */ e(s, { className: u.input, name: "toDate", value: i, type: "date", onChange: h })
       ] })
     ] }) }),
     /* @__PURE__ */ e(p, {}),
-    /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(T, { onSelect: F, selectFrom: i, selectTo: a }) })
+    /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(T, { onSelect: F, selectFrom: a, selectTo: i }) })
   ] });
 }, y = (t) => {
   switch (t) {
@@ -96,5 +95,5 @@ import '../../assets/DatepickerFilter.css';const u = {}, Q = ({
   }
 };
 export {
-  Q as DatepickerFilter
+  P as DatepickerFilter
 };

package/dist/components/Toolbar/QueryLabel.js

@@ -1,13 +1,13 @@
 import { jsx as o, jsxs as m } from "react/jsx-runtime";
 import { QueryItem as a } from "./QueryLabelItem.js";
 import { S as u } from "../../Plus-Cj3oOc3N.js";
-import '../../assets/QueryLabel.css';const d = "_label_1pb2p_1", n = "_group_1pb2p_32", s = {
+import '../../assets/QueryLabel.css';const d = "_label_10hpc_1", n = "_group_10hpc_37", c = {
   label: d,
   group: n
-}, i = ({ params: e = [], size: l = "xs", variant: r = "default", color: p }) => /* @__PURE__ */ o("div", { className: s.label, "data-size": l, "data-variant": r, "data-color": p, children: e.map((c, t) => /* @__PURE__ */ m("div", { className: s.group, children: [
-  /* @__PURE__ */ o(a, { ...c, size: l, variant: r }),
+}, h = ({ params: e = [], size: l = "xs", variant: r = "default", color: s }) => /* @__PURE__ */ o("div", { className: c.label, "data-size": l, "data-variant": r, "data-color": s, children: e.map((p, t) => /* @__PURE__ */ m("div", { className: c.group, children: [
+  /* @__PURE__ */ o(a, { ...p, size: l, variant: r }),
   e[t + 1] && /* @__PURE__ */ o(a, { type: "connector", size: l, variant: r, children: /* @__PURE__ */ o(u, {}) })
 ] }, t)) });
 export {
-  i as QueryLabel
+  h as QueryLabel
 };

package/dist/components/Toolbar/QueryLabelItem.js

@@ -1,7 +1,7 @@
-import { jsx as i } from "react/jsx-runtime";
-import '../../assets/QueryLabelItem.css';const m = "_item_1e67k_1", n = {
-  item: m
-}, o = ({ type: t = "search", size: e = "xs", variant: a = "default", children: s, label: r }) => /* @__PURE__ */ i("span", { className: n.item, "data-type": t, "data-variant": a, "data-size": e, children: s || r });
+import { jsx as r } from "react/jsx-runtime";
+import '../../assets/QueryLabelItem.css';const i = "_item_1mq43_1", n = {
+  item: i
+}, o = ({ type: t = "search", size: e = "xs", variant: a = "default", children: s, label: m }) => /* @__PURE__ */ r("span", { className: n.item, "data-type": t, "data-variant": a, "data-size": e, children: s || m });
 export {
   o as QueryItem
 };

package/dist/components/Toolbar/SelectDateFilter.js

@@ -1,14 +1,13 @@
 import { jsx as d } from "react/jsx-runtime";
-import { useRef as A, useState as p, useCallback as C, useEffect as R } from "react";
-import { M as x } from "../../SearchField-BU7Imhpe.js";
+import { useRef as A, useState as u, useCallback as C, useEffect as R } from "react";
+import { M as x } from "../../Section-xbt3ft20.js";
 import "../../index-p1eeF8LQ.js";
-import "../RootProvider/RootProvider.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
 import { DatepickerFilter as M } from "./DatepickerFilter.js";
 import { formatDateRange as j } from "./formatDateRange.js";
-const P = ({
+const N = ({
   name: n = "time",
   size: k,
   searchable: v,
@@ -18,18 +17,18 @@ const P = ({
   filterState: o = {},
   onFilterStateChange: c
 }) => {
-  const i = A(null), [a, u] = p(!1), [t, w] = p(o?.fromDate?.[0] || ""), [r, b] = p(o?.toDate?.[0] || ""), y = () => {
+  const i = A(null), [a, p] = u(!1), [t, w] = u(o?.fromDate?.[0] || ""), [r, b] = u(o?.toDate?.[0] || ""), y = () => {
     c?.({
       ...o,
       [n]: ["fromAndToDate"]
-    }), u(!0);
+    }), p(!0);
   }, s = C(() => {
     c?.({
       ...o,
       fromDate: t ? [t] : void 0,
       toDate: r ? [r] : void 0,
       [n]: t || r ? ["fromAndToDate"] : void 0
-    }), u(!1);
+    }), p(!1);
   }, [c, o, t, r, n]);
   R(() => {
     if (!a) return;
@@ -66,5 +65,5 @@ const P = ({
   return a ? /* @__PURE__ */ d("div", { ref: i, children: /* @__PURE__ */ d(M, { formData: { fromDate: t, toDate: r }, onChange: L, onSubmit: s }) }) : /* @__PURE__ */ d(x, { size: k, searchable: v, keyboardEvents: l, items: g, groups: T });
 };
 export {
-  P as SelectDateFilter
+  N as SelectDateFilter
 };

package/dist/components/Toolbar/Toolbar.js

@@ -1,21 +1,15 @@
-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 "react-dom";
-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 G = ({ 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
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { ToolbarFilter as T } from "./ToolbarFilter.js";
+import { y as l, T as x } from "../../Section-xbt3ft20.js";
+import '../../assets/Toolbar.css';const c = "_toolbar_1dvgn_1", z = {
+  toolbar: c
+}, u = ({ accountMenu: t, menus: m, search: a, filter: s, disabled: o, controls: e, children: n }) => /* @__PURE__ */ i("span", { className: z.toolbar, "data-size": "xs", children: [
+  t && /* @__PURE__ */ r(l, { size: "md", ...t, disabled: o, virtualized: !0 }),
+  m?.map((p, b) => /* @__PURE__ */ r(l, { ...p, disabled: o }, b)),
+  a && /* @__PURE__ */ r(x, { ...a, disabled: o }),
+  s && /* @__PURE__ */ r(T, { ...s, controls: e, disabled: o }),
+  n
 ] });
 export {
-  G as Toolbar
+  u as Toolbar
 };

package/dist/components/Toolbar/ToolbarControls.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import { c as t } from "../../index-p1eeF8LQ.js";
+import '../../assets/ToolbarControls.css';const c = "_controls_1jcyc_1", n = {
+  controls: c
+}, m = ({ className: o, children: s }) => /* @__PURE__ */ r("span", { className: t(n.controls, o), children: s });
+export {
+  m as ToolbarControls
+};

package/dist/components/Toolbar/ToolbarFilter.js

@@ -1,79 +1,88 @@
-import { jsxs as g, Fragment as f, jsx as m } from "react/jsx-runtime";
-import { useState as B, createElement as I } from "react";
-import { Button as L } from "../Button/Button.js";
+import { jsxs as l, Fragment as E, jsx as s } from "react/jsx-runtime";
+import { useMemo as I, useState as L, createElement as N } from "react";
+import { Button as O } from "../Button/Button.js";
 import "../../index-p1eeF8LQ.js";
-import "../RootProvider/RootProvider.js";
+import { E as w } from "../../Section-xbt3ft20.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
-import { ToolbarFilterMenu as N } from "./ToolbarFilterMenu.js";
-import { useFilter as O } from "./useFilter.js";
-import { ToolbarFilterAddMenu as w } from "./ToolbarFilterAddMenu.js";
-import { S as y } from "../../XMark-tKk6aExO.js";
-const V = ({
-  filters: n,
+import { ToolbarFilterMenu as y } from "./ToolbarFilterMenu.js";
+import { useFilter as X } from "./useFilter.js";
+import { ToolbarControls as q } from "./ToolbarControls.js";
+import { ToolbarFilterAddMenu as z } from "./ToolbarFilterAddMenu.js";
+const Z = ({
+  disabled: n,
+  filters: r,
   filterState: e = {},
-  onFilterStateChange: r,
-  addLabel: b = "Legg til filter",
-  addNextLabel: v = "Legg til",
-  resetLabel: u = "Nullstill",
-  removeLabel: F = "Fjern filter",
-  submitLabel: h,
-  getFilterLabel: T,
-  virtualized: j
+  onFilterStateChange: t,
+  addLabel: v = "Legg til filter",
+  addNextLabel: F = "Legg til",
+  resetLabel: b = "Nullstill",
+  removeLabel: T = "Fjern filter",
+  submitLabel: j,
+  getFilterLabel: M,
+  virtualized: R,
+  controls: k
 }) => {
-  const { visibleFilters: l, hiddenFilters: i, onFilterAdd: R, onFilterChange: k, onFilterRemove: s } = O({
-    filters: n,
+  const { visibleFilters: i, hiddenFilters: a, onFilterAdd: x, onFilterChange: A, onFilterRemove: d } = X({
+    filters: r,
     filterState: e,
-    onFilterStateChange: r
-  }), x = (n?.filter((o) => o.removable)?.length || 0) > 0 && Object.values(e)?.some((o) => o && o?.length > 0), A = n?.filter((o) => o.removable)?.map((o) => o.name) ?? [], [a, d] = B(void 0), p = (o) => {
-    d((t) => t === o ? void 0 : o);
-  }, c = () => {
-    d(void 0);
-  }, C = () => {
-    for (const o of A)
-      s(o);
-    r?.({});
+    onFilterStateChange: t
+  }), p = I(
+    () => r?.filter((o) => o.removable)?.map((o) => o.name) ?? [],
+    [r]
+  ), f = p.length > 0 && Object.values(e)?.some((o) => o && o?.length > 0), [c, g] = L(void 0), h = (o) => {
+    g((m) => m === o ? void 0 : o);
+  }, u = () => {
+    g(void 0);
+  }, B = () => {
+    for (const o of p)
+      d(o);
+    t?.({});
   };
-  return /* @__PURE__ */ g(f, { children: [
-    l?.map((o, t) => {
-      const M = T?.(o?.name, e?.[o?.id]) ?? o?.label;
-      return /* @__PURE__ */ I(
-        N,
+  return /* @__PURE__ */ l(E, { children: [
+    i?.map((o, m) => {
+      const C = M?.(o?.name, e?.[o?.id]) ?? o?.label;
+      return /* @__PURE__ */ N(
+        y,
         {
           ...o,
-          submitLabel: h,
-          key: t,
-          onToggle: () => p(o.name),
-          onClose: c,
-          open: a === o.name,
-          label: M,
-          onRemove: () => s(o.name),
-          removeLabel: F,
-          onFilterChange: k,
-          onFilterStateChange: r,
+          disabled: n,
+          submitLabel: j,
+          key: m,
+          onToggle: () => h(o.name),
+          onClose: u,
+          open: c === o.name,
+          label: C,
+          onRemove: () => d(o.name),
+          removeLabel: T,
+          onFilterChange: A,
+          onFilterStateChange: t,
           filterState: e
         }
       );
     }),
-    i?.length > 0 && /* @__PURE__ */ m(
-      w,
+    !n && a?.length > 0 && /* @__PURE__ */ s(
+      z,
       {
         name: "add",
-        onToggle: () => p("add"),
-        onClose: c,
-        open: a === "add",
-        items: i,
-        onAdd: R,
-        label: l?.length > 0 ? v : b,
-        virtualized: j
+        onToggle: () => h("add"),
+        onClose: u,
+        open: c === "add",
+        items: a,
+        onAdd: x,
+        label: i?.length > 0 ? F : v,
+        virtualized: R
       }
     ),
-    x && /* @__PURE__ */ g(L, { onClick: C, variant: "ghost", children: [
-      /* @__PURE__ */ m(y, { "aria-hidden": "true" }),
-      /* @__PURE__ */ m("span", { children: u })
+    /* @__PURE__ */ l(q, { children: [
+      !n && f && /* @__PURE__ */ l(O, { onClick: B, variant: "ghost", children: [
+        /* @__PURE__ */ s(w, { "aria-hidden": "true" }),
+        /* @__PURE__ */ s("span", { children: b })
+      ] }),
+      k
     ] })
   ] });
 };
 export {
-  V as ToolbarFilter
+  Z as ToolbarFilter
 };

package/dist/components/Toolbar/ToolbarFilterAddMenu.js

@@ -2,38 +2,36 @@ import { jsx as t, jsxs as h } from "react/jsx-runtime";
 import { useRef as a, useEffect as y } from "react";
 import { Button as v } from "../Button/Button.js";
 import "../../index-p1eeF8LQ.js";
-import { M as w } from "../../SearchField-BU7Imhpe.js";
-import "../RootProvider/RootProvider.js";
-import { Dropdown as x } from "../Dropdown/Dropdown.js";
+import { g as w, M as x } from "../../Section-xbt3ft20.js";
 import { useDropdownMenuController as C } from "../Menu/useDropdownMenuController.js";
 import "../Snackbar/useSnackbar.js";
 import { S as R } from "../../Plus-Cj3oOc3N.js";
-const j = ({
-  label: i = "Legg til filter",
-  items: d,
+const O = ({
+  label: d = "Legg til filter",
+  items: i,
   groups: l = {},
-  onAdd: m,
-  onToggle: u,
+  onAdd: u,
+  onToggle: m,
   onClose: c,
-  open: r,
+  open: e,
   dropdownSize: f = "sm"
 }) => {
-  const e = C({ id: "tool-filter-add" }), n = a(r), p = a(!1), s = d?.map((o) => ({
+  const r = C({ id: "tool-filter-add" }), n = a(e), p = a(!1), s = i?.map((o) => ({
     linkIcon: !0,
     ...o,
-    onClick: () => m?.(o?.name ?? "")
+    onClick: () => u?.(o?.name ?? "")
   }));
   if (y(() => {
     const o = n.current;
-    n.current = r, o && !r && e?.triggerRef?.current?.focus();
-  }, [r, e.triggerRef]), !s?.length)
+    n.current = e, o && !e && r?.triggerRef?.current?.focus();
+  }, [e, r.triggerRef]), !s?.length)
     return null;
   const g = () => {
-    const o = document.getElementById(e.menuId);
+    const o = document.getElementById(r.menuId);
     p.current = !!o?.querySelector('[aria-haspopup="menu"][aria-expanded="true"]'), c();
   };
   return /* @__PURE__ */ t(
-    x,
+    w,
     {
       variant: "drawer-dropdown",
       size: f,
@@ -45,23 +43,23 @@ const j = ({
             borderStyle: "dashed"
           },
           "aria-haspopup": "menu",
-          "aria-expanded": r,
-          "aria-controls": r ? e.menuId : void 0,
-          onClick: u,
-          ref: e.triggerRef,
+          "aria-expanded": e,
+          "aria-controls": e ? r.menuId : void 0,
+          onClick: m,
+          ref: r.triggerRef,
           children: [
             /* @__PURE__ */ t(R, { "aria-hidden": "true", focusable: "false" }),
-            /* @__PURE__ */ t("span", { children: i })
+            /* @__PURE__ */ t("span", { children: d })
           ]
         }
       ),
-      open: r,
+      open: e,
       onClose: g,
-      ...e.dropdownA11yProps,
-      children: /* @__PURE__ */ t(w, { groups: l, items: s, maxLevels: 1, keyboardEvents: r, open: r, ...e.menuA11yProps })
+      ...r.dropdownA11yProps,
+      children: /* @__PURE__ */ t(x, { groups: l, items: s, maxLevels: 1, keyboardEvents: e, open: e, ...r.menuA11yProps })
     }
   );
 };
 export {
-  j as ToolbarFilterAddMenu
+  O as ToolbarFilterAddMenu
 };

package/dist/components/Toolbar/ToolbarFilterButton.js

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