@altinn/altinn-components 0.19.1 → 0.19.3

package/dist/assets/PageTabs.css

@@ -1 +1 @@
-._list_qqtoj_1{display:flex;width:100%;row-gap:.5rem;flex-direction:column;list-style:none;padding:0;margin:0}@media (min-width: 1024px){._list_qqtoj_1{flex-direction:row;align-items:center;justify-content:start;column-gap:.5rem;width:auto}}._item_qqtoj_21{margin:0;border-top:2px solid;border-bottom:2px solid;border-color:transparent}._item_qqtoj_21[aria-selected=true]{background-color:transparent;border-bottom-color:var(--ds-color-base-default)}
+._list_gp6cp_1{display:flex;width:100%;row-gap:.5rem;flex-direction:column;list-style:none;padding:0;margin:0}@media (min-width: 1024px){._list_gp6cp_1{flex-direction:row;align-items:center;justify-content:start;column-gap:.5rem;width:auto}}._item_gp6cp_21{margin:0;border-top:2px solid;border-bottom:2px solid;border-color:transparent}._item_gp6cp_21[data-selected=true]{background-color:transparent;border-bottom-color:var(--ds-color-base-default)}

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/components/Page/PageTabs.js

@@ -2,14 +2,14 @@ import { jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as l } from "../Menu/MenuItem.js";
+import { MenuItem as p } from "../Menu/MenuItem.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as n } from "./Flex.js";
-import '../../assets/PageTabs.css';const p = "_list_qqtoj_1", a = "_item_qqtoj_21", i = {
-  list: p,
-  item: a
-}, x = ({ theme: m = "transparent", color: o, items: e = [], padding: s = 0 }) => /* @__PURE__ */ t(n, { theme: m, color: o, padding: s, children: /* @__PURE__ */ t("ul", { className: i.list, children: e.map((r) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(l, { ...r, className: i.item }) }, r.id)) }) });
+import { Flex as l } from "./Flex.js";
+import '../../assets/PageTabs.css';const n = "_list_gp6cp_1", c = "_item_gp6cp_21", i = {
+  list: n,
+  item: c
+}, N = ({ theme: m = "transparent", color: e, items: s = [], padding: o = 0 }) => /* @__PURE__ */ t(l, { theme: m, color: e, padding: o, children: /* @__PURE__ */ t("ul", { className: i.list, children: s.map((r) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(p, { ...r, className: i.item }) }, r.id)) }) });
 export {
-  x as PageTabs
+  N as PageTabs
 };

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/components/Page/PageTabs.d.ts

@@ -1,9 +1,8 @@
-import { MenuItemColor, MenuItemProps } from '..';
-export type PageTabsTheme = 'transparent' | 'base';
+import { MenuItemColor, MenuItemProps, MenuTheme } from '..';
 export type PageTabsPadding = 0 | 2;
 export type PageTabsVariant = 'card' | undefined;
 export interface PageTabsProps {
-    theme?: PageTabsTheme;
+    theme?: MenuTheme;
     color?: MenuItemColor;
     padding?: PageTabsPadding;
     items?: MenuItemProps[];

package/dist/types/lib/components/Page/PageTabs.stories.d.ts

@@ -0,0 +1,23 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ theme, color, items, padding }: import('./PageTabs').PageTabsProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        items: ({
+            id: string;
+            href: string;
+            title: string;
+            selected: true;
+        } | {
+            id: string;
+            href: string;
+            title: string;
+            selected?: undefined;
+        })[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: 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.1",
+  "version": "0.19.3",
   "main": "dist/index.js",
   "files": [
     "dist/",