@altinn/altinn-components 0.53.1 → 0.54.0

package/dist/components/Toolbar/Toolbar.js

@@ -13,10 +13,10 @@ const g = (n, c) => c || `toolbar-filter-${n}`, P = ({
   onFilterStateChange: f,
   search: m,
   accountMenu: b,
-  getFilterLabel: v,
-  children: y,
-  showResultsLabel: S,
-  removeButtonAltText: h,
+  getFilterLabel: h,
+  children: v,
+  showResultsLabel: y,
+  removeButtonAltText: S,
   addFilterButtonLabel: x
 }) => {
   const { openId: A, closeAll: F } = V(), t = c || {}, a = typeof f == "function" ? f : () => {
@@ -65,7 +65,7 @@ const g = (n, c) => c || `toolbar-filter-${n}`, P = ({
       B,
       {
         id: g(e.name, e.id),
-        showResultsLabel: S,
+        showResultsLabel: y,
         onRemove: () => C(e.name),
         onChange: j,
         name: e.name,
@@ -73,10 +73,11 @@ const g = (n, c) => c || `toolbar-filter-${n}`, P = ({
         label: e.label,
         optionType: e.optionType,
         removable: e.removable,
-        getSelectedLabel: v,
-        buttonAltText: h,
+        getSelectedLabel: h,
+        buttonAltText: S,
         optionGroups: e.optionGroups,
-        filterState: t
+        filterState: t,
+        search: e.search
       },
       e.name
     )),
@@ -97,7 +98,7 @@ const g = (n, c) => c || `toolbar-filter-${n}`, P = ({
       },
       u.join(",")
     ),
-    y
+    v
   ] });
 };
 export {

package/dist/components/Toolbar/ToolbarFilter.js

@@ -1,15 +1,15 @@
-import { jsxs as D, jsx as a } from "react/jsx-runtime";
+import { jsxs as I, jsx as a } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import { useIsDesktop as I } from "../../hooks/useIsDesktop.js";
+import { useIsDesktop as j } from "../../hooks/useIsDesktop.js";
 import "../Button/Button.js";
-import { useRootContext as j } from "../RootProvider/RootProvider.js";
-import { DrawerOrDropdown as F } from "../Dropdown/DrawerOrDropdown.js";
+import { useRootContext as F } from "../RootProvider/RootProvider.js";
+import { DrawerOrDropdown as L } from "../Dropdown/DrawerOrDropdown.js";
 import "../Snackbar/useSnackbar.js";
-import { ToolbarButton as L } from "./ToolbarButton.js";
-import { ToolbarFilterBase as O } from "./ToolbarFilterBase.js";
-import { ToolbarOptions as R } from "./ToolbarOptions.js";
-const E = (i, t) => Array.isArray(t) ? t.join(", ") : t, P = ({
+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,
@@ -21,38 +21,39 @@ const E = (i, t) => Array.isArray(t) ? t.join(", ") : t, P = ({
   buttonAltText: p = "Remove button",
   getSelectedLabel: g,
   showResultsLabel: x = "Show results",
-  optionType: A,
+  search: A,
+  optionType: h,
   id: s = `toolbar-filter-${o}`
 }) => {
-  const { currentId: h, toggleId: v, closeAll: d } = j(), u = I(), k = (m ?? []).map((r) => {
+  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], w = g?.(o, n) ?? E(o, n), f = () => v(s), l = h === s, B = (r) => {
+  }), 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();
-  }, C = Array.isArray(n) ? n.length > 0 : typeof n < "u";
-  return /* @__PURE__ */ D(O, { expanded: l, onBlurCapture: B, "data-testid": "filter-base-" + s, children: [
+  }, 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(
-      L,
+      O,
       {
         type: "select",
         removable: i,
-        active: C,
+        active: D,
         onToggle: f,
         ariaLabel: p,
         iconAltText: p,
         onRemove: T,
         "data-testid": s,
         tabIndex: l ? -1 : 0,
-        children: w || t
+        children: B || t
       }
     ),
     /* @__PURE__ */ a(
-      F,
+      L,
       {
         open: l,
         drawerTitle: t,
@@ -62,14 +63,15 @@ const E = (i, t) => Array.isArray(t) ? t.join(", ") : t, P = ({
           label: x
         },
         children: /* @__PURE__ */ a(
-          R,
+          E,
           {
             name: o,
-            options: k,
+            options: w,
             optionGroups: b,
             onChange: y,
-            optionType: A,
-            keyboardEvents: l && u
+            optionType: h,
+            keyboardEvents: l && u,
+            search: A
           }
         )
       }
@@ -77,5 +79,5 @@ const E = (i, t) => Array.isArray(t) ? t.join(", ") : t, P = ({
   ] });
 };
 export {
-  P as ToolbarFilter
+  Q as ToolbarFilter
 };

package/dist/components/Toolbar/ToolbarOptions.js

@@ -1,77 +1,84 @@
-import { jsxs as b, jsx as e } from "react/jsx-runtime";
-import { useRef as A, Fragment as F } from "react";
-import { useMenu as H } from "../../hooks/useMenu.js";
+import { jsxs as v, jsx as e } from "react/jsx-runtime";
+import { useRef as A, useState as F, useMemo as H, Fragment as K } from "react";
+import { useMenu as N } from "../../hooks/useMenu.js";
 import "../../index-p1eeF8LQ.js";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { MenuOption as K } from "../Menu/MenuOption.js";
-import { MenuSearch as N } from "../Menu/MenuSearch.js";
-import { MenuHeader as R } from "../Menu/MenuHeader.js";
-import { MenuBase as S, MenuList as q, MenuListItem as t } from "../Menu/MenuBase.js";
+import { MenuOption as R } from "../Menu/MenuOption.js";
+import { MenuSearch as q } from "../Menu/MenuSearch.js";
+import { MenuHeader as z } from "../Menu/MenuHeader.js";
+import { MenuBase as D, MenuList as E, MenuListItem as a } from "../Menu/MenuBase.js";
 import "../Snackbar/useSnackbar.js";
-const _ = ({
-  name: x,
-  search: n,
-  optionGroups: i = {},
-  options: y,
-  onChange: v,
-  optionType: g,
-  keyboardEvents: p,
-  onBlurCapture: k
+const ne = ({
+  name: S,
+  search: i,
+  optionGroups: l = {},
+  options: c,
+  onChange: x,
+  optionType: y,
+  keyboardEvents: s,
+  onBlurCapture: V
 }) => {
-  const m = A(null), { menu: I, setActiveIndex: L } = H({
-    items: y,
-    groups: i,
+  const u = A(null), [t, p] = F(""), L = H(
+    () => c.filter((r) => t ? r.label.toLowerCase().includes(t.toLowerCase()) : !0),
+    [c, t]
+  ), { menu: k, setActiveIndex: I } = N({
+    items: L,
+    groups: l,
     groupByKey: "groupId",
-    keyboardEvents: p,
-    ref: m
+    keyboardEvents: s,
+    ref: u
   });
-  return /* @__PURE__ */ b(S, { variant: "default", ref: m, children: [
-    n && /* @__PURE__ */ e(N, { ...n }),
-    /* @__PURE__ */ e(q, { role: "menu", onBlurCapture: k, children: I.map((a, c) => {
-      const T = a?.props || {}, { title: s, divider: j = !0 } = T;
-      return /* @__PURE__ */ b(F, { children: [
-        c && j ? /* @__PURE__ */ e(t, { role: "separator" }) : "",
-        s && /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(R, { title: s }) }),
-        a?.items.filter((r) => !r.props?.hidden).map((r, B) => {
-          const { active: C, onMouseEnter: O } = r, { groupId: l, onClick: w, value: u, checked: d, type: f, ...o } = r.props || {}, { expanded: P } = o, h = o.name || x, M = f || l && i[l]?.optionType || g;
+  return /* @__PURE__ */ v(D, { variant: "default", ref: u, children: [
+    i && /* @__PURE__ */ e(q, { ...i, value: t, onChange: (r) => {
+      p(r.target.value);
+    }, onClear: () => {
+      p("");
+    } }),
+    /* @__PURE__ */ e(E, { role: "menu", onBlurCapture: V, children: k.map((r, m) => {
+      const O = r?.props || {}, { title: d, divider: T = !0 } = O;
+      return /* @__PURE__ */ v(K, { children: [
+        m && T ? /* @__PURE__ */ e(a, { role: "separator" }) : "",
+        d && /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(z, { title: d }) }),
+        r?.items.filter((n) => !n.props?.hidden).map((n, j) => {
+          const { active: w, onMouseEnter: B } = n, { groupId: h, onClick: U, value: f, checked: C, type: M, ...o } = n.props || {}, { expanded: P } = o, g = o.name || S, b = M || h && l[h]?.optionType || y;
           return /* @__PURE__ */ e(
-            t,
+            a,
             {
               expanded: P,
-              onMouseEnter: O,
-              onMouseLeave: () => L(-1),
-              role: f === "radio" ? "menuitemradio" : "menuitemcheckbox",
-              "aria-checked": d ?? !1,
+              onMouseEnter: B,
+              onMouseLeave: () => I(-1),
+              role: M === "radio" ? "menuitemradio" : "menuitemcheckbox",
+              "aria-checked": C ?? !1,
               children: /* @__PURE__ */ e(
-                K,
+                R,
                 {
                   ...o,
-                  active: C,
-                  tabIndex: p ? -1 : 0,
+                  active: w,
+                  tabIndex: s ? -1 : 0,
                   label: o.label,
                   count: o.count,
-                  name: h,
-                  type: M,
-                  value: u,
-                  checked: d,
+                  name: g,
+                  type: b,
+                  value: f,
+                  checked: C,
                   onClick: () => {
-                    v?.({
-                      name: h,
-                      value: u,
-                      type: M
+                    x?.({
+                      name: g,
+                      value: f,
+                      type: b
                     });
                   }
                 }
               )
             },
-            B
+            j
           );
         })
-      ] }, c);
+      ] }, m);
     }) })
   ] });
 };
 export {
-  _ as ToolbarOptions
+  ne as ToolbarOptions
 };

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ removable, label, name, filterState, 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, search, optionType, id, }: import('./ToolbarFilter').ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

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

@@ -1,5 +1,5 @@
 import { MouseEventHandler } from 'react';
-import { FilterChangePayload, FilterState } from '../';
+import { FilterChangePayload, FilterState, ToolbarSearchProps } from '../';
 import { MenuOptionProps } from '../Menu';
 import { OptionGroup } from './ToolbarOptions';
 type ToolbarFilterValue = (string | number)[];
@@ -20,6 +20,7 @@ export interface ToolbarFilterProps {
     onChange?: (payload: FilterChangePayload) => void;
     onRemove?: MouseEventHandler;
     showResultsLabel?: string;
+    search?: ToolbarSearchProps;
 }
-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 declare const ToolbarFilter: ({ removable, label, name, filterState, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, search, 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-vite';
 declare const meta: {
     title: string;
-    component: ({ removable, label, name, filterState, 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, search, optionType, id, }: import('./ToolbarFilter').ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -17,3 +17,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Single: Story;
 export declare const Multiple: Story;
+export declare const MultipleWithSearch: Story;

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

@@ -1,5 +1,6 @@
-import { MenuOptionProps, MenuSearchProps } from '../Menu';
+import { MenuOptionProps } from '../Menu';
 import { FilterChangePayload } from './Toolbar.tsx';
+import { ToolbarSearchProps } from './ToolbarSearch';
 export type ToolbarOptionType = 'checkbox' | 'radio';
 export interface OptionGroup {
     title?: string;
@@ -10,7 +11,7 @@ export interface ToolbarOptionsProps {
     name: string;
     options: MenuOptionProps[];
     onChange?: (input: FilterChangePayload) => void;
-    search?: MenuSearchProps;
+    search?: ToolbarSearchProps;
     optionType: ToolbarOptionType;
     optionGroups?: {
         [key: string]: OptionGroup;

package/package.json

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