@altinn/altinn-components 0.19.2 → 0.19.3

package/dist/components/Dialog/DialogList.js

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

package/dist/hooks/useMenu.js

@@ -1,12 +1,13 @@
 "use client";
-import { useState as h, useMemo as w, useCallback as x, useEffect as i } from "react";
-const v = ({
+import { useState as w, useMemo as x, useCallback as i, useEffect as k } from "react";
+const I = ({
   items: n,
   groups: f,
   groupByKey: u,
-  keyboardEvents: a = !1
+  keyboardEvents: a = !1,
+  sortGroupBy: p
 }) => {
-  const [l, d] = h(-1), p = w(() => {
+  const [l, d] = w(-1), h = x(() => {
     const r = n.reduce(
       (o, s) => {
         const e = u && s[u] ? s[u] : "ungrouped";
@@ -14,7 +15,7 @@ const v = ({
       },
       {}
     ), t = Object.values(r).flat();
-    return Object.entries(r).map(([o, s]) => ({
+    return Object.entries(r).sort(p || (() => 0)).map(([o, s]) => ({
       items: s.map((e) => ({
         menuIndex: t.indexOf(e),
         active: l === t.indexOf(e),
@@ -22,19 +23,19 @@ const v = ({
       })),
       props: f[o] || {}
     }));
-  }, [n, u, l, f]), c = x(
+  }, [n, u, l, f]), c = i(
     (r) => {
       r.key === "ArrowDown" ? d((t) => (t + 1) % n.length) : r.key === "ArrowUp" && d((t) => (t - 1 + n.length) % n.length);
     },
     [n.length]
   );
-  return i(() => {
+  return k(() => {
     if (a)
       return d(0), document.addEventListener("keydown", c), () => {
         document.removeEventListener("keydown", c);
       };
-  }, [c, a]), { menu: p, activeIndex: l, setActiveIndex: d };
+  }, [c, a]), { menu: h, activeIndex: l, setActiveIndex: d };
 };
 export {
-  v as useMenu
+  I as useMenu
 };

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

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

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ items, groups }: import('./DialogList').DialogListProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ items, groups, sortGroupBy }: import('./DialogList').DialogListProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;
@@ -12,4 +12,5 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Grouped: Story;
+export declare const GroupedByDate: Story;
+export declare const GroupedByRoute: Story;

package/dist/types/lib/hooks/useMenu.d.ts

@@ -17,5 +17,6 @@ export interface UseMenuInput<T, V> {
     groups: Record<string, V>;
     groupByKey?: keyof T;
     keyboardEvents?: boolean;
+    sortGroupBy?: (a: [string, T[]], b: [string, T[]]) => number;
 }
-export declare const useMenu: <T, V>({ items, groups, groupByKey, keyboardEvents, }: UseMenuInput<T, V>) => UseMenuOutput<T, V>;
+export declare const useMenu: <T, V>({ items, groups, groupByKey, keyboardEvents, sortGroupBy, }: UseMenuInput<T, V>) => UseMenuOutput<T, V>;

package/package.json

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