@altinn/altinn-components 0.9.0 → 0.10.0

package/dist/components/Layout/Layout.stories.js

@@ -1,273 +1,61 @@
-import { jsx as o, jsxs as p, Fragment as y } from "react/jsx-runtime";
-import { useState as h, createElement as I } from "react";
+import { jsx as n, jsxs as u, Fragment as v } from "react/jsx-runtime";
+import { useState as h, createElement as x } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
+import "../Autocomplete/AutocompleteBase.js";
+import { DialogListItem as L } from "../Dialog/DialogListItem.js";
 import "../RootProvider/RootProvider.js";
-import { ListBase as A } from "../List/ListBase.js";
-import { DialogListItem as S } from "../Dialog/DialogListItem.js";
-import "../Searchbar/AutocompleteBase.js";
-import { Layout as k } from "./Layout.js";
-import { ActionHeader as v } from "../LayoutAction/ActionHeader.js";
-import { ActionFooter as L } from "../LayoutAction/ActionFooter.js";
-import { ActionMenu as w } from "../LayoutAction/ActionMenu.js";
-import { Snackbar as B } from "../Snackbar/Snackbar.js";
-const m = {
-  search: {
-    name: "search",
-    placeholder: "Søk i Altinn"
-  },
-  currentAccount: {
-    id: "party:aurora",
-    type: "person",
-    name: "Aurora Mikalsen"
-  },
-  menu: {
-    logoutButton: {
-      label: "Logg ut"
-    },
-    items: [
-      {
-        id: "1",
-        icon: "airplane",
-        size: "lg",
-        title: "Section 1"
-      },
-      {
-        id: "2",
-        icon: "briefcase",
-        size: "lg",
-        title: "Section 2"
-      },
-      {
-        id: "3",
-        size: "lg",
-        title: "Section 3",
-        icon: "camera"
-      }
-    ],
-    accountSearch: {
-      name: "account-search",
-      placeholder: "Søk etter konto"
-    },
-    accountGroups: {
-      primary: {
-        title: "Deg selv og favoritter"
-      },
-      secondary: {
-        title: "Andre kontoer"
-      }
-    },
-    accounts: [
-      {
-        id: "aurora",
-        groupId: "primary",
-        type: "person",
-        name: "Aurora Mikalsen",
-        selected: !0,
-        badge: {
-          label: "2"
-        }
-      },
-      {
-        id: "bergen-bar",
-        groupId: "favourites",
-        type: "company",
-        name: "Bergen Bar",
-        selected: !1,
-        badge: {
-          label: "19"
-        }
-      },
-      {
-        id: "allAccounts",
-        groupId: "groups",
-        type: "company",
-        name: "Alle virksomheter",
-        accountNames: ["Keeperhansker AS", "Stadion drift AS", "Landslaget"],
-        selected: !1,
-        badge: {
-          label: "19"
-        }
-      },
-      {
-        id: "keeper",
-        groupId: "secondary",
-        type: "company",
-        name: "Keeperhansker AS",
-        selected: !1
-      },
-      {
-        id: "stadion-drift",
-        groupId: "secondary",
-        type: "company",
-        name: "Stadion drift AS",
-        selected: !1
-      },
-      {
-        id: "sk-brann",
-        groupId: "favourites",
-        type: "company",
-        name: "Sportsklubben Brann",
-        selected: !1
-      },
-      {
-        id: "norge",
-        groupId: "secondary",
-        type: "company",
-        name: "Landslaget",
-        selected: !1
-      }
-    ]
-  }
-}, C = {
-  address: "Postboks 1382 Vika, 0114 Oslo.",
-  address2: "Org.nr. 991 825 827",
-  menu: {
-    items: [
-      {
-        id: "1",
-        href: "#",
-        title: "Om Altinn"
-      },
-      {
-        id: "2",
-        href: "#",
-        title: "Driftsmeldinger"
-      },
-      {
-        id: "3",
-        href: "#",
-        title: "Personvern"
-      },
-      {
-        id: "4",
-        href: "#",
-        title: "Tilgjengelighet"
-      }
-    ]
-  }
-}, f = {
-  groups: {},
-  items: [
-    {
-      id: "1",
-      groupId: 1,
-      size: "lg",
-      icon: "inbox",
-      title: "Innboks",
-      color: "strong"
-    },
-    {
-      id: "2",
-      groupId: 2,
-      icon: "doc-pencil",
-      title: "Utkast"
-    },
-    {
-      id: "3",
-      group: 2,
-      icon: "file-checkmark",
-      selected: !0,
-      title: "Sendt"
-    },
-    {
-      id: "4",
-      groupId: 3,
-      icon: "bookmark",
-      title: "Lagrede søk"
-    },
-    {
-      id: "5",
-      groupId: 4,
-      icon: "archive",
-      title: "Arkivert"
-    },
-    {
-      id: "6",
-      groupId: 4,
-      disabled: !0,
-      icon: "trash",
-      title: "Papirkurv"
-    }
-  ]
-}, H = {
+import { ListBase as B } from "../List/ListBase.js";
+import { Layout as d } from "./Layout.js";
+import { ActionHeader as C } from "../LayoutAction/ActionHeader.js";
+import { ActionFooter as F } from "../LayoutAction/ActionFooter.js";
+import { ActionMenu as j } from "../LayoutAction/ActionMenu.js";
+import { Snackbar as D } from "../Snackbar/Snackbar.js";
+import "../../examples/globalMenu.js";
+import { inboxMenu as p } from "../../examples/inboxMenu.js";
+import "../../examples/inboxFilters.js";
+import { header as f } from "../../examples/header.js";
+import { footer as w } from "../../examples/footer.js";
+import { useInboxSearch as b } from "../../examples/useInboxSearch.js";
+import { useAccountMenu as k } from "../../examples/useAccountMenu.js";
+import "../../examples/dialog/reportingDraftDialog.js";
+import "../../examples/dialog/reportingInProgressDialog.js";
+import "../../examples/dialog/reportingCompletedDialog.js";
+import "../../examples/dialog/transmissionsTimeline.js";
+import "../../examples/dialog/transmissionsInProgressDialog.js";
+import "../../examples/dialog/transmissionsCompletedDialog.js";
+const ne = {
   title: "Layout/Layout",
-  component: k,
+  component: d,
   tags: ["autodocs"],
   parameters: {
     layout: "fullscreen"
   },
   args: {
     theme: "person",
-    header: m,
-    footer: C,
+    header: f,
+    footer: w,
     sidebar: {
-      menu: f
-    }
-  }
-}, N = {
-  args: {}
-}, Q = (l) => {
-  const [r, s] = h(""), u = (t) => {
-    s(t.target.value);
-  }, g = [
-    {
-      type: "scope",
-      groupId: "1",
-      id: "inbox",
-      href: "#",
-      label: r ? () => /* @__PURE__ */ p("span", { children: [
-        /* @__PURE__ */ o("mark", { children: r }),
-        " i innboksen"
-      ] }) : "Alt i innboksen"
+      menu: p
     },
+    children: /* @__PURE__ */ n("p", { children: "Content (should be hidden on mobile when menu is open)." })
+  }
+}, ce = (o) => {
+  const s = b(o.header.search), i = k(o.header.menu);
+  return /* @__PURE__ */ n(
+    d,
     {
-      type: "scope",
-      groupId: "1",
-      id: "global",
-      href: "#",
-      label: r ? () => /* @__PURE__ */ p("span", { children: [
-        /* @__PURE__ */ o("mark", { children: r }),
-        " i hele Altinn"
-      ] }) : "Alt i hele Altinn"
-    }
-  ], c = r ? [
-    {
-      groupId: "2",
-      href: "http://www.altinn.no",
-      description: "Skattemelding 2024"
-    },
-    {
-      groupId: "2",
-      href: "http://www.altinn.no",
-      description: "Skattemelding 2025"
-    }
-  ].filter((t) => t.description.toLowerCase().includes((r ?? "").toLowerCase())) : [], d = {
-    groups: {
-      2: {
-        title: `${c.length} treff i innboksen`
-      }
-    },
-    items: [...g, ...c]
-  };
-  return /* @__PURE__ */ o(
-    k,
-    {
-      ...l,
+      ...o,
       header: {
-        ...l.header,
-        search: {
-          ...l.header.search,
-          value: r,
-          onChange: u,
-          onClear: () => s(""),
-          autocomplete: d
-        }
+        ...o.header,
+        currentAccount: i.currentAccount,
+        menu: i,
+        search: s
       }
     }
   );
-}, U = (l) => {
-  const [r, s] = h([]), [u, g] = h({
+}, le = (o) => {
+  const s = b(o.header.search), i = k(o.header.menu), [a, g] = h([]), [y, I] = h({
     1: {
       id: "1",
       title: "Item 1",
@@ -283,7 +71,7 @@ const m = {
       title: "Item 2",
       selected: !1
     }
-  }), c = [
+  }), A = [
     {
       id: "1",
       icon: "arrow-redo",
@@ -307,52 +95,51 @@ const m = {
   ].map((e) => ({
     ...e,
     as: "button",
-    onClick: () => s((n) => [
-      ...n,
+    onClick: () => g((r) => [
+      ...r,
       {
         message: "Snack me"
       }
     ])
-  })), d = ({ id: e }) => {
-    g((n) => ({
-      ...n,
+  })), m = ({ id: e }) => {
+    I((r) => ({
+      ...r,
       [e]: {
-        ...n[e],
-        selected: !n[e].selected
+        ...r[e],
+        selected: !r[e].selected
       }
     }));
-  }, t = Object.values(u), a = t == null ? void 0 : t.filter((e) => e.selected), i = (a == null ? void 0 : a.length) > 0, b = (a == null ? void 0 : a.length) + " av " + (t == null ? void 0 : t.length) + " valgt";
-  return /* @__PURE__ */ p(
-    k,
+  }, t = Object.values(y), c = t == null ? void 0 : t.filter((e) => e.selected), l = (c == null ? void 0 : c.length) > 0, M = (c == null ? void 0 : c.length) + " av " + (t == null ? void 0 : t.length) + " valgt";
+  return /* @__PURE__ */ u(
+    d,
     {
-      theme: i ? "neutral" : "company",
-      header: { ...m, search: i ? void 0 : m.search },
-      sidebar: { hidden: i, menu: f },
+      theme: l ? "neutral" : "company",
+      header: { ...f, menu: i, currentAccount: i.currentAccount, search: l ? void 0 : s },
+      sidebar: { hidden: l, menu: p },
       content: { theme: "neutral" },
       children: [
-        /* @__PURE__ */ o(v, { title: b, hidden: !i }),
-        /* @__PURE__ */ o(A, { children: t == null ? void 0 : t.map((e) => /* @__PURE__ */ I(
-          S,
+        /* @__PURE__ */ n(C, { title: M, hidden: !l }),
+        /* @__PURE__ */ n(B, { children: t == null ? void 0 : t.map((e) => /* @__PURE__ */ x(
+          L,
           {
             ...e,
             key: e == null ? void 0 : e.id,
             title: e.title,
-            onClick: i ? () => d(e) : void 0,
+            onClick: l ? () => m(e) : void 0,
             selected: e.selected,
-            select: { checked: e == null ? void 0 : e.selected, onChange: () => d(e) }
+            select: { checked: e == null ? void 0 : e.selected, onChange: () => m(e) }
           }
         )) }),
-        /* @__PURE__ */ o(L, { hidden: !1, children: /* @__PURE__ */ p(y, { children: [
-          i && /* @__PURE__ */ o(w, { items: c, theme: "global-dark" }),
-          r.length > 0 && (r == null ? void 0 : r.map((e, n) => /* @__PURE__ */ o(B, { ...e }, n)))
+        /* @__PURE__ */ n(F, { hidden: !1, children: /* @__PURE__ */ u(v, { children: [
+          l && /* @__PURE__ */ n(j, { items: A, theme: "global-dark" }),
+          a.length > 0 && (a == null ? void 0 : a.map((e, r) => /* @__PURE__ */ n(D, { ...e }, r)))
         ] }) })
       ]
     }
   );
 };
 export {
-  Q as ControlledStateSearch,
-  N as Default,
-  U as InboxBulkMode,
-  H as default
+  ce as Default,
+  le as InboxBulkMode,
+  ne as default
 };

package/dist/components/Layout/LayoutBase.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ currentId, theme, children }: import('./LayoutBase').LayoutBaseProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Layout/LayoutBody.d.ts

@@ -1,7 +1,11 @@
-import { LayoutBaseProps } from './LayoutBase';
+import { ReactNode } from 'react';
+export interface LayoutBodyProps {
+    currentId?: string;
+    children?: ReactNode;
+}
 /**
  * Body layout container. Should be a child of LayoutBase.
  * Defines a max-width for the application body.
  *
  */
-export declare const LayoutBody: ({ theme, children }: LayoutBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LayoutBody: ({ currentId, children }: LayoutBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Layout/LayoutBody.js

@@ -1,7 +1,7 @@
-import { jsx as s } from "react/jsx-runtime";
-import '../../assets/LayoutBody.css';const d = "_body_3cqh5_1", y = {
-  body: d
-}, a = ({ theme: o, children: t }) => /* @__PURE__ */ s("div", { className: y.body, "data-theme": o, children: t });
+import { jsx as d } from "react/jsx-runtime";
+import '../../assets/LayoutBody.css';const s = "_body_1oj0m_1", r = {
+  body: s
+}, a = ({ currentId: o, children: t }) => /* @__PURE__ */ d("div", { className: r.body, "data-current-id": o, children: t });
 export {
   a as LayoutBody
 };

package/dist/components/Layout/LayoutBody.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ currentId, children }: import('./LayoutBody').LayoutBodyProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Layout/LayoutContent.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ theme, children }: import('./LayoutBase').LayoutBaseProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Layout/LayoutSidebar.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ theme, hidden, children }: import('./LayoutSidebar').LayoutSidebarProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/LayoutAction/ActionHeader.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ hidden, title, dismissable, onDismiss }: import('./ActionHeader').ActionHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/LayoutAction/ActionMenu.js

@@ -3,8 +3,8 @@ import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
 import { MenuItem as o } from "../Menu/MenuItem.js";
+import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import "../Searchbar/AutocompleteBase.js";
 import { MenuBase as n } from "../Menu/MenuBase.js";
 import '../../assets/ActionMenu.css';const s = "_menu_12gbo_1", l = "_list_12gbo_14", e = {
   menu: s,

package/dist/components/List/List.js

@@ -2,8 +2,8 @@ import { jsx as p } from "react/jsx-runtime";
 import { createElement as s } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
+import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import "../Searchbar/AutocompleteBase.js";
 import { ListItem as n } from "./ListItem.js";
 import { ListBase as f } from "./ListBase.js";
 const j = ({ theme: r, size: t = "md", spacing: m = "md", items: o = [] }) => /* @__PURE__ */ p(f, { theme: r, spacing: m, children: o.map((i, e) => /* @__PURE__ */ s(n, { ...i, size: t, key: "item" + e })) });

package/dist/components/List/List.stories.js

@@ -1,9 +1,9 @@
 import "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
+import "../Icon/SvgIcon.js";
+import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import "../Searchbar/AutocompleteBase.js";
 import { List as t } from "./List.js";
 const a = {
   title: "List/List",

package/dist/components/List/ListItem.d.ts

@@ -1,9 +1,11 @@
+import { ReactElement, ReactNode } from 'react';
 import { AvatarGroupProps, AvatarProps } from '../Avatar';
 import { BadgeProps } from '../Badge';
 import { ContextMenuProps } from '../ContextMenu';
 import { IconName } from '../Icon';
+import { ListItemBaseProps } from './ListItemBase';
 import { ListItemHeaderProps } from './ListItemHeader';
-export interface ListItemProps extends ListItemHeaderProps {
+export interface ListItemProps extends ListItemBaseProps, ListItemHeaderProps {
     /** Custom className */
     className?: string;
     /** Element is loading, display a placeholder */
@@ -22,6 +24,8 @@ export interface ListItemProps extends ListItemHeaderProps {
     linkText?: string;
     /** Optional icon indicating behaviour */
     linkIcon?: IconName;
+    /** Custom label */
+    label?: ReactNode | (() => ReactElement);
     /** Optional badge */
     badge?: BadgeProps;
     /** Optional context menu */
@@ -32,4 +36,4 @@ export interface ListItemInputProps extends ListItemProps {
     /** Child items */
     items?: ListItemProps[];
 }
-export declare const ListItem: ({ className, color, loading, collapsible, expanded, size, icon, avatar, avatarGroup, title, description, badge, linkText, linkIcon, menu, select, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItem: ({ className, color, loading, collapsible, expanded, size, icon, avatar, avatarGroup, title, description, badge, linkText, linkIcon, label, menu, select, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItem.js

@@ -1,49 +1,56 @@
-import { jsx as e } from "react/jsx-runtime";
-import { ListItemBase as H } from "./ListItemBase.js";
-import { ListItemHeader as b } from "./ListItemHeader.js";
-const v = ({
-  className: o,
-  color: i,
-  loading: t,
-  collapsible: s,
-  expanded: p,
-  size: m = "sm",
-  icon: f,
-  avatar: I,
-  avatarGroup: L,
-  title: c,
-  description: n,
-  badge: x,
-  linkText: a,
-  linkIcon: d,
-  menu: h,
-  select: j,
-  controls: u,
+import { jsxs as b, jsx as d } from "react/jsx-runtime";
+import { ListItemBase as k } from "./ListItemBase.js";
+import { ListItemHeader as l } from "./ListItemHeader.js";
+const A = ({
+  className: s,
+  color: e,
+  loading: r,
+  collapsible: c,
+  expanded: m,
+  size: o = "sm",
+  icon: p,
+  avatar: f,
+  avatarGroup: n,
+  title: L,
+  description: I,
+  badge: h,
+  linkText: j,
+  linkIcon: u,
+  label: t,
+  menu: x,
+  select: a,
+  controls: y,
   children: B,
-  ...r
-}) => /* @__PURE__ */ e(H, { size: m, color: i, loading: t, ...r, children: /* @__PURE__ */ e(
-  b,
-  {
-    className: o,
-    loading: t,
-    collapsible: s,
-    expanded: p,
-    select: j,
-    size: m,
-    title: c,
-    description: n,
-    icon: f,
-    avatar: I,
-    avatarGroup: L,
-    linkIcon: d,
-    linkText: a,
-    badge: x,
-    controls: u,
-    menu: h,
-    ...r,
-    children: B
-  }
-) });
+  ...i
+}) => {
+  const H = typeof t == "function" ? t() : t;
+  return /* @__PURE__ */ b(k, { size: o, color: e, expanded: m, loading: r, ...i, children: [
+    /* @__PURE__ */ d(
+      l,
+      {
+        className: s,
+        loading: r,
+        collapsible: c,
+        expanded: m,
+        select: a,
+        size: o,
+        title: L,
+        description: I,
+        icon: p,
+        avatar: f,
+        avatarGroup: n,
+        linkIcon: u,
+        linkText: j,
+        badge: h,
+        controls: y,
+        menu: x,
+        ...i,
+        children: H
+      }
+    ),
+    B
+  ] });
+};
 export {
-  v as ListItem
+  A as ListItem
 };