@altinn/altinn-components 0.24.5 → 0.24.7

package/README.md

@@ -9,8 +9,22 @@ Today these teams are [Team Arbeidsflate](https://github.com/digdir/dialogporten
 Note that this package is specifically designed to meet the unique needs of the aforementioned teams and is not intended to serve as a general-purpose library.
 We already have the amazing [Norwegian public sector's Design System](https://designsystemet.no/), and we aim to incorporate its elements wherever it makes sense, ensuring alignment and leveraging its strengths while adapting to the specific requirements of Altinn.
 
-Currently, we do not use components from the design system _directly_ but rely on its token structure and continue to explore opportunities for deeper integration.
-This approach helps us align with brand guidelines and the broader vision of a unified Altinn product.
+
+## Strategy for Adopting Designsystemet
+
+As of April 10th, 2024, we’ve decided to start importing components from the [Norwegian public sector’s Design System](https://designsystemet.no/) as needed. These components will be exported from our own library using the `DS<Component>` prefix.
+Consumers of `altinn-components` will be able to use these components directly, without needing `@digdir/designsystemet` as a dependency.
+
+This approach allows us to:
+
+- Avoid conflicts with existing components during the transition phase.
+- Experiment with and adapt the appearance and behavior to fit the Altinn brand.
+- Gradually replace legacy components: once a `DS<Component>` has been sufficiently customized and tested, we will remove the `DS` prefix and promote it to a first-class component.
+- Leverage the strengths of the Design System while maintaining full control over the visual consistency of our solutions.
+- Maintain a curated and well-integrated selection of components from the `@digdir/designsystemet` with the look and feel of Altinn.
+
+This strategy is a natural progression from our previous approach, where we did not use components from `@digdir/designsystemet` directly but relied on its token structure and explored opportunities for deeper integration.
+That approach helped us move faster and build understanding — and now we're ready to take the next step.
 
 ## Feedback and questions
 

package/dist/components/Dialog/DialogList.js

@@ -1,29 +1,29 @@
-import { jsx as f } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import { createElement as t } from "react";
 import "../../index-L8X2o7IH.js";
-import { useMenu as l } from "../../hooks/useMenu.js";
+import { useMenu as y } from "../../hooks/useMenu.js";
 import "../RootProvider/RootProvider.js";
-import { DialogListGroup as y } from "./DialogListGroup.js";
+import { DialogListGroup as u } from "./DialogListGroup.js";
 import { DialogListItem as d } from "./DialogListItem.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Section as g } from "../Page/Section.js";
-const j = ({ items: i, groups: m = {}, sortGroupBy: e }) => {
-  const { menu: r } = l({
+const v = ({ items: i, groups: m = {}, sortGroupBy: e, isLoading: p }) => {
+  const { menu: o } = y({
     items: i,
     groups: m,
     groupByKey: "groupId",
     keyboardEvents: !1,
     sortGroupBy: e
   });
-  return /* @__PURE__ */ f(g, { spacing: 3, margin: "section", children: r == null ? void 0 : r.map((o, p) => {
-    const s = o.props || {};
-    return /* @__PURE__ */ t(y, { ...s, key: p }, o == null ? void 0 : o.items.map((n, a) => {
-      const c = n.props || {};
-      return /* @__PURE__ */ t(d, { ...c, key: a });
+  return /* @__PURE__ */ l(g, { spacing: 3, margin: "section", "aria-busy": p, children: o == null ? void 0 : o.map((r, s) => {
+    const n = r.props || {};
+    return /* @__PURE__ */ t(u, { ...n, key: s }, r == null ? void 0 : r.items.map((a, c) => {
+      const f = a.props || {};
+      return /* @__PURE__ */ t(d, { ...f, key: c });
     }));
   }) });
 };
 export {
-  j as DialogList
+  v as DialogList
 };

package/dist/components/Header/LocaleSwitcher.js

@@ -1,17 +1,31 @@
 "use client";
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import "../RootProvider/RootProvider.js";
+import { useRootContext as n } from "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { MenuOption as a } from "../Menu/MenuOption.js";
-import { MenuHeader as c } from "../Menu/MenuHeader.js";
-import { MenuBase as m, MenuList as p, MenuListItem as t } from "../Menu/MenuBase.js";
-const b = ({ title: o = "Select language", options: i, onChange: l }) => /* @__PURE__ */ e(m, { theme: "default", children: /* @__PURE__ */ n(p, { children: [
-  /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(c, { title: o }) }),
-  i.map((r) => /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(a, { onChange: l, label: r.label, type: "radio", value: r.value, checked: r.checked }) }, r.value))
-] }) });
+import { MenuOption as p } from "../Menu/MenuOption.js";
+import { MenuHeader as u } from "../Menu/MenuHeader.js";
+import { MenuBase as d, MenuList as s, MenuListItem as o } from "../Menu/MenuBase.js";
+const k = ({ title: l = "Select language", options: c, onChange: r }) => {
+  const { toggleId: i } = n(), m = (e) => {
+    i("locale"), r == null || r(e);
+  };
+  return /* @__PURE__ */ t(d, { theme: "default", children: /* @__PURE__ */ a(s, { children: [
+    /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t(u, { title: l }) }),
+    c.map((e) => /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t(
+      p,
+      {
+        onChange: m,
+        label: e.label,
+        type: "radio",
+        value: e.value,
+        checked: e.checked
+      }
+    ) }, e.value))
+  ] }) });
+};
 export {
-  b as LocaleSwitcher
+  k as LocaleSwitcher
 };

package/dist/components/Toolbar/Toolbar.js

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

package/dist/types/lib/components/Dialog/DialogList.d.ts

@@ -3,5 +3,6 @@ export interface DialogListProps {
     items: DialogListItemProps[];
     groups?: Record<string, DialogListGroupProps>;
     sortGroupBy?: (a: [string, DialogListItemProps[]], b: [string, DialogListItemProps[]]) => number;
+    isLoading?: boolean;
 }
-export declare const DialogList: ({ items, groups, sortGroupBy }: DialogListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogList: ({ items, groups, sortGroupBy, isLoading }: DialogListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dialog/DialogList.stories.d.ts

@@ -1,12 +1,13 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ items, groups, sortGroupBy }: import('./DialogList').DialogListProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ items, groups, sortGroupBy, isLoading }: import('./DialogList').DialogListProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     args: {
         items: import('./DialogListItem').DialogListItemProps[];
         groups?: Record<string, import('./DialogListGroup').DialogListGroupProps>;
         sortGroupBy?: (a: [string, import('./DialogListItem').DialogListItemProps[]], b: [string, import('./DialogListItem').DialogListItemProps[]]) => number;
+        isLoading?: boolean;
     };
 };
 export default meta;

package/package.json

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