@altinn/altinn-components 0.25.0 → 0.25.1

package/dist/components/Toolbar/Toolbar.js

@@ -1,82 +1,87 @@
 "use client";
-import { jsxs as v, jsx as i } from "react/jsx-runtime";
-import { useState as F, useMemo as T } from "react";
-import { useRootContext as B } from "../RootProvider/RootProvider.js";
-import { ToolbarAccountMenu as M } from "./ToolbarAccountMenu.js";
-import { ToolbarAdd as V } from "./ToolbarAdd.js";
-import { ToolbarBase as $ } from "./ToolbarBase.js";
-import { ToolbarFilter as q } from "./ToolbarFilter.js";
-import { ToolbarSearch as w } from "./ToolbarSearch.js";
-const g = (n, l) => l || `toolbar-filter-${n}`, Q = ({
+import { jsxs as E, jsx as m } from "react/jsx-runtime";
+import { useState as v, useEffect as M, useMemo as T } from "react";
+import { useRootContext as V } from "../RootProvider/RootProvider.js";
+import { ToolbarAccountMenu as $ } from "./ToolbarAccountMenu.js";
+import { ToolbarAdd as q } from "./ToolbarAdd.js";
+import { ToolbarBase as w } from "./ToolbarBase.js";
+import { ToolbarFilter as z } from "./ToolbarFilter.js";
+import { ToolbarSearch as D } from "./ToolbarSearch.js";
+const g = (n, r) => r || `toolbar-filter-${n}`, X = ({
   filters: n = [],
-  filterState: l,
-  onFilterStateChange: s,
-  search: m,
-  accountMenu: b,
-  getFilterLabel: y,
-  children: x,
-  showResultsLabel: A,
-  removeButtonAltText: S,
+  filterState: r,
+  onFilterStateChange: b,
+  search: u,
+  accountMenu: f,
+  getFilterLabel: S,
+  children: y,
+  showResultsLabel: x,
+  removeButtonAltText: A,
   addFilterButtonLabel: h
 }) => {
-  const { openId: C, closeAll: I } = B(), [N, R] = F(
-    l ?? {}
-  ), p = typeof s == "function" ? s : R, t = l || N, [c, u] = F(
+  const { openId: C, closeAll: I } = V(), [N, R] = v(r || {}), p = typeof b == "function" ? b : R, t = r || N, [c, d] = v(
     (n == null ? void 0 : n.filter((o) => !(o.removable && typeof t[o.name] > "u")).map((o) => o.name)) ?? []
-  ), f = n == null ? void 0 : n.filter((o) => !c.includes(o.name)), j = T(
+  );
+  M(() => {
+    d(
+      (n == null ? void 0 : n.filter((o) => !(o.removable && typeof t[o.name] > "u")).map((o) => o.name)) ?? []
+    );
+  }, [t]);
+  const F = n == null ? void 0 : n.filter((o) => !c.includes(o.name)), j = T(
     () => c.map((o) => n.find((e) => e.name === o)).filter((o) => typeof o < "u"),
     [n, c]
-  ), a = T(
-    () => n.filter((o) => f.includes(o)),
-    [n, f]
-  ), G = (o, e, r) => {
-    r === "radio" ? (I(), p({
+  ), i = T(
+    () => n.filter((o) => F.includes(o)),
+    [n, F]
+  ), G = (o) => {
+    const { name: e, value: l, type: B } = o.target, a = [l];
+    B === "radio" ? (I(), p({
       ...t,
-      [o]: e
+      [e]: a
     })) : p({
       ...t,
-      [o]: t[o] ? t[o].some((d) => e == null ? void 0 : e.includes(d)) ? t[o].filter((d) => !e.includes(d)) : [...t[o], ...e] : e
+      [e]: t[e] ? t[e].some((s) => a == null ? void 0 : a.includes(String(s))) ? t[e].filter((s) => !a.includes(String(s))) : [...t[e], ...a] : a
     });
   }, L = (o) => {
-    u((e) => e.filter((r) => r !== o)), p({
+    d((e) => e.filter((l) => l !== o)), p({
       ...t,
       [o]: void 0
     });
   }, k = (o, e) => {
-    u((r) => [...r, o]), C(e);
+    d((l) => [...l, o]), C(e);
   };
-  return /* @__PURE__ */ v($, { children: [
-    b && /* @__PURE__ */ i(M, { ...b }),
-    m && /* @__PURE__ */ i(w, { ...m }),
-    j.map((o) => /* @__PURE__ */ i(
-      q,
+  return /* @__PURE__ */ E(w, { children: [
+    f && /* @__PURE__ */ m($, { ...f }),
+    u && /* @__PURE__ */ m(D, { ...u }),
+    j.map((o) => /* @__PURE__ */ m(
+      z,
       {
         id: g(o.name, o.id),
-        showResultsLabel: A,
+        showResultsLabel: x,
         onRemove: () => {
           L(o.name);
         },
         onChange: (e) => {
-          G(o.name, [e.target.value], o.optionType);
+          G(e);
         },
         name: o.name,
         options: o.options,
         label: o.label,
-        value: t[o.name],
         optionType: o.optionType,
         removable: o.removable,
-        getSelectedLabel: y,
-        buttonAltText: S,
-        optionGroups: o.optionGroups
+        getSelectedLabel: S,
+        buttonAltText: A,
+        optionGroups: o.optionGroups,
+        filterState: t
       },
       o.name
     )),
-    (a == null ? void 0 : a.length) > 0 && /* @__PURE__ */ i(
-      V,
+    (i == null ? void 0 : i.length) > 0 && /* @__PURE__ */ m(
+      q,
       {
         id: "toolbar-filter-add",
         label: h,
-        items: a.map((o) => {
+        items: i.map((o) => {
           const e = g(o.name, o.id);
           return {
             id: e,
@@ -89,9 +94,9 @@ const g = (n, l) => l || `toolbar-filter-${n}`, Q = ({
         })
       }
     ),
-    x
+    y
   ] });
 };
 export {
-  Q as Toolbar
+  X as Toolbar
 };

package/dist/components/Toolbar/ToolbarFilter.js

@@ -1,62 +1,64 @@
-import { jsxs as j, jsx as s } from "react/jsx-runtime";
+import { jsxs as B, jsx as u } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { useRootContext as B } from "../RootProvider/RootProvider.js";
-import { DrawerOrDropdown as C } from "../Dropdown/DrawerOrDropdown.js";
+import { useRootContext as C } from "../RootProvider/RootProvider.js";
+import { DrawerOrDropdown as O } from "../Dropdown/DrawerOrDropdown.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { ToolbarButton as O } from "./ToolbarButton.js";
-import { ToolbarFilterBase as k } from "./ToolbarFilterBase.js";
-import { ToolbarOptions as D } from "./ToolbarOptions.js";
-const F = (p, o) => Array.isArray(o) ? o.join(", ") : o, J = ({
-  removable: p,
-  label: o,
-  name: t,
-  value: r,
-  options: m,
-  optionGroups: f,
-  onChange: a,
-  onRemove: d,
-  buttonAltText: y = "Remove button",
-  getSelectedLabel: n,
-  showResultsLabel: A = "Show results",
-  optionType: h,
-  id: e = `toolbar-filter-${t}`
+import { ToolbarButton as k } from "./ToolbarButton.js";
+import { ToolbarFilterBase as D } from "./ToolbarFilterBase.js";
+import { ToolbarOptions as F } from "./ToolbarOptions.js";
+const I = (l, r) => Array.isArray(r) ? r.join(", ") : r, K = ({
+  removable: l,
+  label: r,
+  name: o,
+  filterState: n,
+  options: a,
+  optionGroups: y,
+  onChange: A,
+  onRemove: e,
+  buttonAltText: h = "Remove button",
+  getSelectedLabel: i,
+  showResultsLabel: T = "Show results",
+  optionType: b,
+  id: t = `toolbar-filter-${o}`
 }) => {
-  const { currentId: u, toggleId: T, closeAll: b } = B(), w = (m ?? []).map(
-    (i) => ({
-      ...i,
-      name: t,
-      checked: Array.isArray(r) ? r.includes(i.value) : i.value === r
-    })
-  ), x = (n == null ? void 0 : n(t, r)) ?? F(t, r), c = () => T(e), l = u === e;
-  return /* @__PURE__ */ j(k, { expanded: l, children: [
-    /* @__PURE__ */ s(
-      O,
+  const { currentId: v, toggleId: w, closeAll: x } = C(), f = (a ?? []).map((p) => {
+    const c = n == null ? void 0 : n[p.name || o];
+    return {
+      name: o,
+      ...p,
+      checked: Array.isArray(c) ? c.includes(p.value) : p.value === c
+    };
+  }), s = n == null ? void 0 : n[o], j = (i == null ? void 0 : i(o, s)) ?? I(o, s), d = () => w(t), m = v === t;
+  return /* @__PURE__ */ B(D, { expanded: m, children: [
+    /* @__PURE__ */ u(
+      k,
       {
         type: "select",
-        removable: p,
-        active: Array.isArray(r) ? r.length > 0 : typeof r < "u",
-        onToggle: c,
-        ariaLabel: y,
-        onRemove: d,
-        children: x || o
+        removable: l,
+        active: Array.isArray(s) ? s.length > 0 : typeof s < "u",
+        onToggle: d,
+        ariaLabel: h,
+        onRemove: e,
+        children: j || r
       }
     ),
-    /* @__PURE__ */ s(
-      C,
+    /* @__PURE__ */ u(
+      O,
       {
-        open: l,
-        drawerTitle: o,
-        onClose: b,
-        drawerButton: { onClick: c, label: A },
-        children: /* @__PURE__ */ s(
-          D,
+        open: m,
+        drawerTitle: r,
+        onClose: x,
+        drawerButton: { onClick: d, label: T },
+        children: /* @__PURE__ */ u(
+          F,
           {
-            options: w,
-            optionGroups: f,
-            onChange: a,
-            optionType: h
+            name: o,
+            options: f,
+            optionGroups: y,
+            onChange: A,
+            optionType: b
           }
         )
       }
@@ -64,5 +66,5 @@ const F = (p, o) => Array.isArray(o) ? o.join(", ") : o, J = ({
   ] });
 };
 export {
-  J as ToolbarFilter
+  K as ToolbarFilter
 };

package/dist/components/Toolbar/ToolbarOptions.js

@@ -1,48 +1,56 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { Fragment as M } from "react";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { Fragment as v } from "react";
 import "../../index-L8X2o7IH.js";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { MenuOption as v } from "../Menu/MenuOption.js";
-import { MenuSearch as j } from "../Menu/MenuSearch.js";
-import { MenuHeader as x } from "../Menu/MenuHeader.js";
-import { MenuBase as O, MenuList as I, MenuListItem as m } from "../Menu/MenuBase.js";
-const w = ({ search: d, optionGroups: o = {}, options: h, onChange: f, optionType: b }) => {
+import { MenuOption as j } from "../Menu/MenuOption.js";
+import { MenuSearch as x } from "../Menu/MenuSearch.js";
+import { MenuHeader as O } from "../Menu/MenuHeader.js";
+import { MenuBase as I, MenuList as L, MenuListItem as l } from "../Menu/MenuBase.js";
+const z = ({
+  name: h,
+  search: a,
+  optionGroups: o = {},
+  options: f,
+  onChange: b,
+  optionType: g
+}) => {
   var u;
-  const p = h.reduce(
-    (e, l) => {
-      const n = l.groupId || "";
-      return e[n] = e[n] || [], e[n].push(l), e;
+  const d = f.reduce(
+    (e, m) => {
+      const n = m.groupId || "";
+      return e[n] = e[n] || [], e[n].push(m), e;
     },
     {}
   );
-  return /* @__PURE__ */ c(O, { theme: "default", children: [
-    d && /* @__PURE__ */ r(j, { ...d }),
-    /* @__PURE__ */ r(I, { children: (u = Object.keys(p)) == null ? void 0 : u.map((e, l) => {
+  return /* @__PURE__ */ c(I, { theme: "default", children: [
+    a && /* @__PURE__ */ t(x, { ...a }),
+    /* @__PURE__ */ t(L, { children: (u = Object.keys(d)) == null ? void 0 : u.map((e, m) => {
       var i;
-      const n = o[e] || {}, { title: a, divider: g = !0 } = n;
-      return /* @__PURE__ */ c(M, { children: [
-        l && g ? /* @__PURE__ */ r(m, { role: "separator" }) : "",
-        a && /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(x, { title: a }) }),
-        (i = p[e]) == null ? void 0 : i.map((t) => {
+      const n = o[e] || {}, { title: p, divider: M = !0 } = n;
+      return /* @__PURE__ */ c(v, { children: [
+        m && M ? /* @__PURE__ */ t(l, { role: "separator" }) : "",
+        p && /* @__PURE__ */ t(l, { children: /* @__PURE__ */ t(O, { title: p }) }),
+        (i = d[e]) == null ? void 0 : i.map((r) => {
           var s;
-          return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(
-            v,
+          return /* @__PURE__ */ t(l, { children: /* @__PURE__ */ t(
+            j,
             {
-              onChange: f,
-              label: t.label,
-              badge: t.badge,
-              type: t.type || ((s = o == null ? void 0 : o[e]) == null ? void 0 : s.optionType) || b,
-              value: t.value,
-              checked: t.checked
+              onChange: b,
+              label: r.label,
+              badge: r.badge,
+              name: r.name || h,
+              type: r.type || ((s = o == null ? void 0 : o[e]) == null ? void 0 : s.optionType) || g,
+              value: r.value,
+              checked: r.checked
             }
-          ) }, t.value);
+          ) }, r.value);
         })
       ] }, e);
     }) })
   ] });
 };
 export {
-  w as ToolbarOptions
+  z as ToolbarOptions
 };

package/dist/types/lib/components/Toolbar/Toolbar.d.ts

@@ -2,13 +2,13 @@ import { ReactNode } from 'react';
 import { ToolbarAccountMenuProps } from './ToolbarAccountMenu.tsx';
 import { ToolbarFilterProps } from './ToolbarFilter.tsx';
 import { ToolbarSearchProps } from './ToolbarSearch.tsx';
-export type FilterState = Record<string, ToolbarFilterProps['value']>;
+export type FilterState = Record<string, (string | number)[] | undefined>;
 export interface ToolbarProps {
     accountMenu?: ToolbarAccountMenuProps;
     filters?: ToolbarFilterProps[];
     search?: ToolbarSearchProps;
     filterState?: FilterState;
-    getFilterLabel?: (name: string, value: ToolbarFilterProps['value']) => string;
+    getFilterLabel?: (name: string, value: (string | number)[] | undefined) => string;
     onFilterStateChange?: (state: FilterState) => void;
     showResultsLabel?: string;
     addFilterButtonLabel?: string;

package/dist/types/lib/components/Toolbar/Toolbar.stories.d.ts

@@ -21,3 +21,4 @@ export declare const WithSearch: Story;
 export declare const LongListAccounts: Story;
 export declare const ControlledStateFilters: (args: typeof Toolbar) => import("react/jsx-runtime").JSX.Element;
 export declare const ControlledStateAccount: () => import("react/jsx-runtime").JSX.Element;
+export declare const CombinedRadioCheckboxFilter: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Toolbar/ToolbarDate.stories.d.ts

@@ -1,12 +1,11 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ removable, label, name, value, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, optionType, id, }: import('./ToolbarFilter').ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ removable, label, name, filterState, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, optionType, id, }: import('./ToolbarFilter').ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
         label: string;
-        value: string[];
         optionType: "radio";
         options: ({
             groupId: string;

package/dist/types/lib/components/Toolbar/ToolbarFilter.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEventHandler, MouseEventHandler } from 'react';
+import { FilterState } from '../';
 import { MenuOptionProps } from '../Menu';
 import { OptionGroup } from './ToolbarOptions';
 type ToolbarFilterValue = (string | number)[];
@@ -10,7 +11,7 @@ export interface ToolbarFilterProps {
     };
     label: string;
     id?: string;
-    value?: ToolbarFilterValue;
+    filterState?: FilterState;
     optionType: 'checkbox' | 'radio';
     removable?: boolean;
     getSelectedLabel?: (name: string, value?: ToolbarFilterValue) => string;
@@ -20,5 +21,5 @@ export interface ToolbarFilterProps {
     onRemove?: MouseEventHandler;
     showResultsLabel?: string;
 }
-export declare const ToolbarFilter: ({ removable, label, name, value, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, optionType, id, }: ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolbarFilter: ({ removable, label, name, filterState, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, optionType, id, }: ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/lib/components/Toolbar/ToolbarFilter.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ removable, label, name, value, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, optionType, id, }: import('./ToolbarFilter').ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ removable, label, name, filterState, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, optionType, id, }: import('./ToolbarFilter').ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Toolbar/ToolbarOptions.d.ts

@@ -7,6 +7,7 @@ export interface OptionGroup {
     optionType?: ToolbarOptionType;
 }
 export interface ToolbarOptionsProps {
+    name: string;
     options: MenuOptionProps[];
     onChange?: ChangeEventHandler;
     search?: MenuSearchProps;
@@ -15,4 +16,4 @@ export interface ToolbarOptionsProps {
         [key: string]: OptionGroup;
     };
 }
-export declare const ToolbarOptions: ({ search, optionGroups, options, onChange, optionType }: ToolbarOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolbarOptions: ({ name, search, optionGroups, options, onChange, optionType, }: ToolbarOptionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Toolbar/ToolbarOptions.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ search, optionGroups, options, onChange, optionType }: import('./ToolbarOptions').ToolbarOptionsProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ name, search, optionGroups, options, onChange, optionType, }: import('./ToolbarOptions').ToolbarOptionsProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.25.0",
+  "version": "0.25.1",
   "main": "dist/index.js",
   "files": [
     "dist/",