@altinn/altinn-components 0.41.0 → 0.41.1

package/dist/components/Account/AccountList.js

@@ -1,28 +1,44 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import { Fragment as u, createElement as p } from "react";
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { Fragment as y, createElement as k } from "react";
 import "../../index-L8X2o7IH.js";
-import { AccountListItem as f } from "./AccountListItem.js";
-import { Typography as y } from "../Typography/Typography.js";
-import { Heading as d } from "../Typography/Heading.js";
+import { AccountListItem as u } from "./AccountListItem.js";
+import { Typography as x } from "../Typography/Typography.js";
+import { Heading as m } from "../Typography/Heading.js";
+import { useMenu as I } from "../../hooks/useMenu.js";
 import "../RootProvider/RootProvider.js";
-import { List as m } from "../List/List.js";
+import { List as L } from "../List/List.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as h } from "../Page/Section.js";
-const F = ({
-  items: t,
-  groups: i,
-  emptyTitle: g = "Ingen treff",
-  emptyDescription: s = "Søket ga ingen treff"
-}) => !t || t.length === 0 ? /* @__PURE__ */ l(h, { children: [
-  /* @__PURE__ */ n(d, { size: "lg", children: g }),
-  /* @__PURE__ */ n(y, { children: s })
-] }) : i ? /* @__PURE__ */ n(h, { spacing: 6, children: Object.entries(i).map(([r, a]) => {
-  const { title: o } = a, c = t.filter((e) => e.groupId === r && !e.hidden);
-  return c.length === 0 ? null : /* @__PURE__ */ l(u, { children: [
-    o && /* @__PURE__ */ n(d, { size: "lg", children: o }),
-    /* @__PURE__ */ n(m, { children: c.map((e) => /* @__PURE__ */ p(f, { ...e, key: e.id })) })
-  ] }, r);
-}) }) : /* @__PURE__ */ n(m, { children: t.filter((r) => !(r != null && r.hidden)).map((r) => /* @__PURE__ */ p(f, { ...r, key: r.id })) });
+import { Section as c } from "../Page/Section.js";
+const M = ({
+  items: i,
+  groups: p = {},
+  sortGroupBy: s,
+  emptyTitle: f = "Ingen treff",
+  emptyDescription: l = "Søket ga ingen treff"
+}) => {
+  if (!i || i.length === 0)
+    return /* @__PURE__ */ o(c, { children: [
+      /* @__PURE__ */ r(m, { size: "lg", children: f }),
+      /* @__PURE__ */ r(x, { children: l })
+    ] });
+  const { menu: n } = I({
+    items: i,
+    groups: p,
+    groupByKey: "groupId",
+    keyboardEvents: !1,
+    sortGroupBy: s
+  });
+  return /* @__PURE__ */ r(c, { spacing: 6, children: n == null ? void 0 : n.map((t, a) => {
+    const e = t.props || {};
+    return /* @__PURE__ */ o(y, { children: [
+      (e == null ? void 0 : e.title) && /* @__PURE__ */ r(m, { size: "lg", children: e.title }),
+      /* @__PURE__ */ r(L, { children: t == null ? void 0 : t.items.map((d, h) => {
+        const g = d.props || {};
+        return /* @__PURE__ */ k(u, { ...g, key: h });
+      }) })
+    ] }, a);
+  }) });
+};
 export {
-  F as AccountList
+  M as AccountList
 };

package/dist/components/Account/AccountListItem.js

@@ -1,57 +1,59 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { ListItem as k } from "../List/ListItem.js";
+import { ListItem as C } from "../List/ListItem.js";
 import "../Snackbar/useSnackbar.js";
-import { AccountListItemControls as C } from "./AccountListItemControls.js";
-const y = ({
-  id: r,
-  type: i,
-  size: m,
+import { AccountListItemControls as M } from "./AccountListItemControls.js";
+const B = ({
+  id: i,
+  type: m,
+  size: c,
   expanded: t,
-  icon: c,
-  title: s,
+  icon: s,
+  title: e,
   description: n,
-  isCurrentEndUser: e,
-  isDeleted: p,
-  badge: l,
-  favourite: u = !1,
-  favouriteLabel: f,
-  onToggleFavourite: I,
-  contextMenu: L,
-  children: v,
-  interactive: A,
-  ...j
-}) => /* @__PURE__ */ o(
-  k,
+  isCurrentEndUser: p,
+  isDeleted: u,
+  badge: f,
+  favourite: I = !1,
+  favouriteLabel: l,
+  onToggleFavourite: L,
+  contextMenu: v,
+  children: A,
+  interactive: j,
+  loading: o,
+  ...k
+}) => /* @__PURE__ */ r(
+  C,
   {
-    ...j,
-    size: m,
-    icon: c,
-    title: s,
+    ...k,
+    loading: o,
+    size: c,
+    icon: s,
+    title: e,
     description: t ? void 0 : n,
     expanded: t,
     selected: t,
-    controls: /* @__PURE__ */ o(
-      C,
+    controls: !o && /* @__PURE__ */ r(
+      M,
       {
-        id: r,
-        type: i,
-        favourite: u,
-        favouriteLabel: f,
-        badge: l,
-        isCurrentEndUser: e,
-        isDeleted: p,
-        onToggleFavourite: I,
-        contextMenu: t ? void 0 : L
+        id: i,
+        type: m,
+        favourite: I,
+        favouriteLabel: l,
+        badge: f,
+        isCurrentEndUser: p,
+        isDeleted: u,
+        onToggleFavourite: L,
+        contextMenu: t ? void 0 : v
       }
     ),
-    linkIcon: !0,
-    interactive: A,
-    children: v
+    linkIcon: !o && !0,
+    interactive: j,
+    children: A
   }
 );
 export {
-  y as AccountListItem
+  B as AccountListItem
 };

package/dist/components/ContextMenu/ContextMenu.js

@@ -2,9 +2,9 @@
 import { jsxs as y, jsx as f } from "react/jsx-runtime";
 import { c as I } from "../../index-L8X2o7IH.js";
 import m, { forwardRef as w, useRef as O, useMemo as k } from "react";
-import { IconButton as E } from "../Button/IconButton.js";
-import { useClickOutside as _ } from "../../hooks/useClickOutside.js";
-import { useEnterKey as C } from "../../hooks/useEnterKey.js";
+import { useClickOutside as E } from "../../hooks/useClickOutside.js";
+import { useEnterKey as _ } from "../../hooks/useEnterKey.js";
+import { IconButton as C } from "../Button/IconButton.js";
 import { DropdownBase as M } from "../Dropdown/DropdownBase.js";
 import { MenuItems as j } from "../Menu/MenuItems.js";
 import { useRootContext as R } from "../RootProvider/RootProvider.js";
@@ -38,7 +38,7 @@ const A = w((e, s) => {
   items: i
 }) => {
   const { currentId: v, toggleId: p, closeAll: a } = R(), d = O(null), g = "context-menu-" + e, x = () => p(e), u = v === e;
-  _(d, () => {
+  E(d, () => {
     u && p(e);
   });
   const b = k(() => i.map((n) => ({
@@ -49,7 +49,7 @@ const A = w((e, s) => {
       (c = n.onClick) == null || c.call(n), a();
     }
   })), [i, a]);
-  C((n) => {
+  _((n) => {
     var c;
     if (u) {
       n.preventDefault();
@@ -63,7 +63,7 @@ const A = w((e, s) => {
   };
   return /* @__PURE__ */ y("div", { className: I(S.toggle, o), ref: d, "data-testid": g, children: [
     /* @__PURE__ */ f(
-      E,
+      C,
       {
         size: "xs",
         rounded: !0,

package/dist/components/GlobalMenu/BackButton.js

@@ -6,24 +6,24 @@ import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { MenuItem as m } from "../Menu/MenuItem.js";
 import { u as c } from "../../useId-BVFxCjkq.js";
-var d = function(t, o) {
+var d = function(t, l) {
   var r = {};
-  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && o.indexOf(e) < 0 && (r[e] = t[e]);
+  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && l.indexOf(e) < 0 && (r[e] = t[e]);
   if (t != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var l = 0, e = Object.getOwnPropertySymbols(t); l < e.length; l++)
-      o.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
+    for (var o = 0, e = Object.getOwnPropertySymbols(t); o < e.length; o++)
+      l.indexOf(e[o]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[o]) && (r[e[o]] = t[e[o]]);
   return r;
 };
-const p = f((t, o) => {
-  var { title: r, titleId: e } = t, l = d(t, ["title", "titleId"]);
+const p = f((t, l) => {
+  var { title: r, titleId: e } = t, o = d(t, ["title", "titleId"]);
   let n = c();
   return n = r ? e || "title-" + n : void 0, i.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: o, "aria-labelledby": n }, l),
+    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: l, "aria-labelledby": n }, o),
     r ? i.createElement("title", { id: n }, r) : null,
-    i.createElement("path", { fill: "currentColor", d: "M14.97 3.97a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06l3.22-3.22H8a4.25 4.25 0 0 0 0 8.5h1.5a.75.75 0 0 1 0 1.5H8a5.75 5.75 0 0 1 0-11.5h10.19l-3.22-3.22a.75.75 0 0 1 0-1.06" })
+    i.createElement("path", { fill: "currentColor", d: "M9.03 5.03a.75.75 0 1 0-1.06-1.06l-4.5 4.5a.75.75 0 0 0 0 1.06l4.5 4.5a.75.75 0 1 0 1.06-1.06L5.81 9.75H16a4.25 4.25 0 0 1 0 8.5h-1.5a.75.75 0 0 0 0 1.5H16a5.75 5.75 0 0 0 0-11.5H5.81z" })
   );
-}), h = ({ label: t, onClick: o, as: r }) => /* @__PURE__ */ a(m, { size: "sm", id: "back", icon: p, title: t, onClick: o, as: r });
+}), v = ({ label: t, onClick: l, as: r }) => /* @__PURE__ */ a(m, { size: "sm", id: "back", icon: p, title: t, onClick: l, as: r });
 export {
-  h as BackButton
+  v as BackButton
 };

package/dist/components/Settings/SettingsList.js

@@ -1,38 +1,37 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import { Fragment as s } from "react";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { Fragment as s, createElement as f } from "react";
 import "../../index-L8X2o7IH.js";
-import { Heading as x } from "../Typography/Heading.js";
+import { useMenu as h } from "../../hooks/useMenu.js";
+import { Heading as g } from "../Typography/Heading.js";
 import "../RootProvider/RootProvider.js";
-import { Divider as f } from "../Divider/Divider.js";
-import { List as h } from "../List/List.js";
+import { Divider as y } from "../Divider/Divider.js";
+import { List as S } from "../List/List.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as I } from "../Page/Flex.js";
-import { SettingsSection as a } from "./SettingsSection.js";
-import { SettingsItem as p } from "./SettingsItem.js";
-const O = ({ items: r, groups: d }) => {
-  var c;
-  if (d) {
-    const e = (c = Object.keys(d).map((i) => {
-      const n = r == null ? void 0 : r.filter((o) => o.groupId === i && !o.hidden), { title: l } = d[i] || {};
-      return {
-        groupId: i,
-        title: l,
-        items: n
-      };
-    })) == null ? void 0 : c.filter((i) => i.items.length > 0);
-    return /* @__PURE__ */ t(I, { as: "div", spacing: "page", direction: "col", children: e.map((i) => /* @__PURE__ */ m(s, { children: [
-      (i == null ? void 0 : i.title) && /* @__PURE__ */ t(x, { size: "lg", children: i == null ? void 0 : i.title }),
-      /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(h, { size: "sm", children: i.items.map((n, l) => /* @__PURE__ */ m(s, { children: [
-        l > 0 && /* @__PURE__ */ t(f, {}),
-        /* @__PURE__ */ t(p, { ...n })
-      ] }, n.id)) }) })
-    ] }, i.groupId)) });
-  }
-  return /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(h, { size: "sm", children: r.filter((e) => !(e != null && e.hidden)).map((e, i) => /* @__PURE__ */ m(s, { children: [
-    i > 0 && /* @__PURE__ */ t(f, {}),
-    /* @__PURE__ */ t(p, { ...e })
-  ] }, e.id)) }) });
+import { Flex as v } from "../Page/Flex.js";
+import { SettingsSection as j } from "./SettingsSection.js";
+import { SettingsItem as k } from "./SettingsItem.js";
+const q = ({ items: n, groups: p = {}, sortGroupBy: c }) => {
+  const { menu: r } = h({
+    items: n,
+    groups: p,
+    groupByKey: "groupId",
+    keyboardEvents: !1,
+    sortGroupBy: c
+  });
+  return /* @__PURE__ */ t(v, { as: "div", spacing: "page", direction: "col", children: r == null ? void 0 : r.map((i, l) => {
+    const e = i.props || {};
+    return /* @__PURE__ */ o(s, { children: [
+      (e == null ? void 0 : e.title) && /* @__PURE__ */ t(g, { size: "lg", children: e.title }),
+      /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t(S, { size: "sm", children: i == null ? void 0 : i.items.map((a, m) => {
+        const d = a.props || {};
+        return /* @__PURE__ */ o(s, { children: [
+          m > 0 && /* @__PURE__ */ t(y, {}),
+          /* @__PURE__ */ f(k, { ...d, key: "settings-list-item" + m })
+        ] }, m);
+      }) }) })
+    ] }, l);
+  }) });
 };
 export {
-  O as SettingsList
+  q as SettingsList
 };

package/dist/types/lib/components/Account/AccountList.d.ts

@@ -6,7 +6,8 @@ export interface AccountListGroupProps {
 export interface AccountListProps {
     items: AccountListItemProps[];
     groups?: Record<string, AccountListGroupProps>;
+    sortGroupBy?: (a: [string, AccountListItemProps[]], b: [string, AccountListItemProps[]]) => number;
     emptyTitle?: string;
     emptyDescription?: string;
 }
-export declare const AccountList: ({ items, groups, emptyTitle, emptyDescription, }: AccountListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountList: ({ items, groups, sortGroupBy, emptyTitle, emptyDescription, }: AccountListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Account/AccountList.stories.d.ts

@@ -3,13 +3,14 @@ import { AccountListItemProps, AccountListProps } from '..';
 import { UseAccountsProps } from '../../../examples';
 declare const meta: {
     title: string;
-    component: ({ items, groups, emptyTitle, emptyDescription, }: AccountListProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ items, groups, sortGroupBy, emptyTitle, emptyDescription, }: AccountListProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: AccountListProps;
 };
 export default meta;
 export declare const Default: ({ includeGroups }: UseAccountsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Loading: () => import("react/jsx-runtime").JSX.Element;
 interface ControlledProps {
     includeGroups?: boolean;
     contextMenu?: boolean;

package/dist/types/lib/components/Account/AccountListItem.d.ts

@@ -16,4 +16,4 @@ export interface AccountListItemProps extends ListItemProps, AccountListItemCont
     contextMenu?: ContextMenuProps;
     label?: string;
 }
-export declare const AccountListItem: ({ id, type, size, expanded, icon, title, description, isCurrentEndUser, isDeleted, badge, favourite, favouriteLabel, onToggleFavourite, contextMenu, children, interactive, ...item }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountListItem: ({ id, type, size, expanded, icon, title, description, isCurrentEndUser, isDeleted, badge, favourite, favouriteLabel, onToggleFavourite, contextMenu, children, interactive, loading, ...item }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Account/AccountListItem.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { AccountListItemProps } from '..';
 declare const meta: {
     title: string;
-    component: ({ id, type, size, expanded, icon, title, description, isCurrentEndUser, isDeleted, badge, favourite, favouriteLabel, onToggleFavourite, contextMenu, children, interactive, ...item }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ id, type, size, expanded, icon, title, description, isCurrentEndUser, isDeleted, badge, favourite, favouriteLabel, onToggleFavourite, contextMenu, children, interactive, loading, ...item }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Settings/SettingsList.d.ts

@@ -5,5 +5,6 @@ export interface SettingsGroupProps {
 export interface SettingsListProps {
     items: SettingsItemProps[];
     groups?: Record<string, SettingsGroupProps>;
+    sortGroupBy?: (a: [string, SettingsItemProps[]], b: [string, SettingsItemProps[]]) => number;
 }
-export declare const SettingsList: ({ items, groups }: SettingsListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsList: ({ items, groups, sortGroupBy }: SettingsListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/stories/Settings/Settings.stories.d.ts

@@ -30,7 +30,7 @@ interface LocaleSettingsModal extends SettingsModalProps {
     value?: string;
 }
 export declare const LocaleSettingsModal: ({ open, onClose, value, onChange, }: LocaleSettingsModal) => import("react/jsx-runtime").JSX.Element;
-export declare const SearchSettings: ({ query, groups }: UseSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AllSettings: ({ query, groups, includeGroups, excludeGroups, }: UseSettingsProps) => import("react/jsx-runtime").JSX.Element;
 export declare const AlertSettings: () => import("react/jsx-runtime").JSX.Element;
 export declare const AccountSettings: () => import("react/jsx-runtime").JSX.Element;
 export declare const PersonSettings: () => import("react/jsx-runtime").JSX.Element;

package/package.json

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