@altinn/altinn-components 0.8.3 → 0.9.1

package/dist/components/Menu/MenuItems.js

@@ -1,68 +1,73 @@
 "use client";
-import { jsx as i, jsxs as c, Fragment as z } from "react/jsx-runtime";
-import { Fragment as L } from "react";
+import { jsxs as a, jsx as i, Fragment as L } from "react/jsx-runtime";
+import { Fragment as k } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
+import { useMenu as B } from "../../hooks/useMenu.js";
+import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as k } from "./MenuItem.js";
-import { MenuHeader as B } from "./MenuHeader.js";
-import { MenuList as E, MenuListItem as s } from "./MenuBase.js";
-import { useMenu as G } from "../../hooks/useMenu.js";
-import "../Searchbar/AutocompleteBase.js";
-const H = ({
+import { MenuItem as E } from "./MenuItem.js";
+import { MenuSearch as G } from "./MenuSearch.js";
+import { MenuHeader as H } from "./MenuHeader.js";
+import { MenuList as K, MenuListItem as d } from "./MenuBase.js";
+const S = ({
   level: l = 0,
-  expanded: I,
-  items: v,
-  groups: o = {},
-  defaultItemColor: f,
-  defaultItemSize: x
+  expanded: v,
+  search: o,
+  items: b,
+  groups: f = {},
+  defaultItemColor: x,
+  defaultItemSize: M
 }) => {
-  const { menu: h } = G({
-    items: v,
-    groups: o,
+  const { menu: h } = B({
+    items: b,
+    groups: f,
     groupByKey: "groupId",
     keyboardEvents: !1
   });
-  return /* @__PURE__ */ i(E, { expanded: I, children: h.map((t, m) => {
-    const n = (t == null ? void 0 : t.props) || {}, { title: M, divider: b = !0 } = n, y = h[m + 1];
-    return /* @__PURE__ */ c(L, { children: [
-      (l > 0 || m) && b ? /* @__PURE__ */ i(s, { role: "separator" }) : "",
-      M && /* @__PURE__ */ i(s, { children: /* @__PURE__ */ i(B, { title: M }) }),
-      t == null ? void 0 : t.items.filter((d) => {
-        var a;
-        return !((a = d.props) != null && a.hidden);
-      }).map((d, a) => {
-        const { active: F } = d, { groupId: K, ...e } = d.props || {}, { expanded: r } = e, j = t == null ? void 0 : t.items[a + 1];
-        return /* @__PURE__ */ c(s, { role: "presentation", expanded: r, children: [
-          /* @__PURE__ */ i(
-            k,
-            {
-              ...e,
-              color: (e == null ? void 0 : e.color) || (n == null ? void 0 : n.defaultItemColor) || f,
-              size: (e == null ? void 0 : e.size) || (n == null ? void 0 : n.defaultItemSize) || x,
-              active: F,
-              tabIndex: e != null && e.disabled ? -1 : 0
-            }
-          ),
-          r && (e == null ? void 0 : e.items) && /* @__PURE__ */ c(z, { children: [
+  return /* @__PURE__ */ a(K, { expanded: v, children: [
+    o && /* @__PURE__ */ i(G, { ...o }),
+    h.map((t, s) => {
+      const n = (t == null ? void 0 : t.props) || {}, { title: I, divider: y = !0 } = n, F = h[s + 1];
+      return /* @__PURE__ */ a(k, { children: [
+        (l ?? s) > 0 && y ? /* @__PURE__ */ i(d, { role: "separator" }) : "",
+        I && /* @__PURE__ */ i(d, { children: /* @__PURE__ */ i(H, { title: I }) }),
+        t == null ? void 0 : t.items.filter((r) => {
+          var m;
+          return !((m = r.props) != null && m.hidden);
+        }).map((r, m) => {
+          const { active: j } = r, { groupId: _, ...e } = r.props || {}, { expanded: c } = e, z = t == null ? void 0 : t.items[m + 1];
+          return /* @__PURE__ */ a(d, { role: "presentation", expanded: c, children: [
             /* @__PURE__ */ i(
-              H,
+              E,
               {
-                expanded: r,
-                level: l + 1,
-                items: e == null ? void 0 : e.items,
-                groups: o,
-                defaultItemColor: f,
-                defaultItemSize: x
+                ...e,
+                color: (e == null ? void 0 : e.color) || (n == null ? void 0 : n.defaultItemColor) || x,
+                size: (e == null ? void 0 : e.size) || (n == null ? void 0 : n.defaultItemSize) || M,
+                active: j,
+                tabIndex: e != null && e.disabled ? -1 : 0
               }
             ),
-            (y || j) && /* @__PURE__ */ i(s, { role: "separator", as: "div" })
-          ] })
-        ] }, a);
-      })
-    ] }, m);
-  }) });
+            c && (e == null ? void 0 : e.items) && /* @__PURE__ */ a(L, { children: [
+              /* @__PURE__ */ i(
+                S,
+                {
+                  expanded: c,
+                  level: l + 1,
+                  items: e == null ? void 0 : e.items,
+                  groups: f,
+                  defaultItemColor: x,
+                  defaultItemSize: M
+                }
+              ),
+              (F || z) && /* @__PURE__ */ i(d, { role: "separator", as: "div" })
+            ] })
+          ] }, m);
+        })
+      ] }, s);
+    })
+  ] });
 };
 export {
-  H as MenuItems
+  S as MenuItems
 };

package/dist/components/Menu/MenuItems.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ level, expanded, search, items, groups, defaultItemColor, defaultItemSize, }: import('./MenuItems').MenuItemsProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const InboxMenu: Story;
+export declare const PersonMenu: Story;
+export declare const CompanyMenu: Story;
+export declare const AccountMenu: Story;
+export declare const CollapsibleGlobalMenu: Story;
+export declare const ExpandedGlobalMenu: Story;
+export declare const DrilldownMenu: Story;

package/dist/components/Menu/MenuItems.stories.js

@@ -1,16 +1,17 @@
+import { menuItems as i } from "../../examples/menuItems.js";
 import { MenuItems as r } from "./MenuItems.js";
-const o = {
+const n = {
   title: "Menu/MenuItems",
   component: r,
   tags: ["autodocs"],
   parameters: {},
   args: {}
-}, a = {
+}, s = {
   args: {
     groups: {
       shortcuts: {
         title: "Snarveier",
-        defaultItemColor: "default"
+        defaultItemColor: "neutral"
       }
     },
     defaultItemColor: "subtle",
@@ -85,7 +86,7 @@ const o = {
       }
     ]
   }
-}, l = {
+}, a = {
   args: {
     groups: {},
     defaultItemColor: "subtle",
@@ -132,7 +133,7 @@ const o = {
       }
     ]
   }
-}, n = {
+}, d = {
   args: {
     groups: {},
     defaultItemColor: "subtle",
@@ -173,104 +174,17 @@ const o = {
       }
     ]
   }
-}, d = {
+}, g = {
   args: {
     groups: {
       a1: {
         title: "Deg selv, favoritter og grupper"
       },
       b1: {
-        id: "companies",
         title: "Andre kontoer"
       }
     },
-    items: [
-      {
-        id: "1",
-        groupId: "a1",
-        avatar: {
-          type: "person",
-          name: "Dolly Duck"
-        },
-        title: "Dolly Duck",
-        badge: {
-          label: "15"
-        }
-      },
-      {
-        id: "2",
-        groupId: "a2",
-        avatar: {
-          type: "company",
-          name: "Bergen Bar"
-        },
-        title: "Bergen Bar",
-        badge: {
-          label: "21"
-        }
-      },
-      {
-        id: "3",
-        groupId: "a2",
-        avatar: {
-          type: "company",
-          name: "Sportsklubben Brann"
-        },
-        title: "Sportsklubben Brann",
-        badge: {
-          label: "4"
-        }
-      },
-      {
-        id: "4",
-        groupId: "a3",
-        avatarGroup: {
-          type: "company",
-          items: [
-            {
-              name: "Sportsklubben Brann"
-            },
-            {
-              name: "Bergen Bar"
-            }
-          ]
-        },
-        title: "Alle virksomheter",
-        badge: {
-          label: "45"
-        }
-      },
-      {
-        id: "5",
-        groupId: "b1",
-        avatar: {
-          type: "company",
-          name: "Jensens Laks"
-        },
-        title: "Jensens laks"
-      },
-      {
-        id: "6",
-        groupId: "b1",
-        avatar: {
-          type: "company",
-          name: "Haralds gym"
-        },
-        title: "Haralds gym",
-        badge: {
-          label: "2"
-        }
-      },
-      {
-        id: "7",
-        groupId: "b1",
-        avatar: {
-          type: "company",
-          name: "Trim og tran"
-        },
-        title: "Trim og tran"
-      }
-    ]
+    items: i
   }
 }, t = {
   args: {
@@ -355,7 +269,7 @@ const o = {
       }
     ]
   }
-}, s = {
+}, u = {
   args: {
     ...t.args,
     items: [...t.args.items].map((e) => e.collapsible ? {
@@ -363,7 +277,7 @@ const o = {
       expanded: !0
     } : e)
   }
-}, g = {
+}, p = {
   args: {
     defaultItemColor: "subtle",
     groups: {
@@ -385,7 +299,7 @@ const o = {
         items: [
           {
             groupId: "level-2",
-            name: "tema",
+            id: "tema",
             icon: "teddy-bear",
             title: "Tema",
             expanded: !0,
@@ -413,12 +327,12 @@ const o = {
   }
 };
 export {
-  d as AccountMenu,
+  g as AccountMenu,
   t as CollapsibleGlobalMenu,
-  n as CompanyMenu,
-  g as DrilldownMenu,
-  s as ExpandedGlobalMenu,
-  a as InboxMenu,
-  l as PersonMenu,
-  o as default
+  d as CompanyMenu,
+  p as DrilldownMenu,
+  u as ExpandedGlobalMenu,
+  s as InboxMenu,
+  a as PersonMenu,
+  n as default
 };

package/dist/components/Menu/MenuOption.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ size, type, name, value, label, title, description, badge, checked, disabled, onChange, }: import('./MenuOption').MenuOptionProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        value: string;
+        label: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Checkbox: Story;
+export declare const CheckboxChecked: Story;
+export declare const Radio: Story;
+export declare const RadioChecked: Story;

package/dist/components/Menu/MenuSearch.d.ts

@@ -2,8 +2,8 @@ import { ChangeEventHandler } from 'react';
 export interface MenuSearchProps {
     placeholder?: string;
     name: string;
-    value: string;
-    onChange: ChangeEventHandler;
+    value?: string;
+    onChange?: ChangeEventHandler;
     onClear?: () => void;
 }
 export declare const MenuSearch: ({ value, name, placeholder, onChange, onClear }: MenuSearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuSearch.js

@@ -1,17 +1,17 @@
-import { jsxs as m, jsx as i } from "react/jsx-runtime";
-import { Icon as r } from "../Icon/Icon.js";
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { Icon as a } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { IconButton as a } from "../Button/IconButton.js";
+import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import "../Searchbar/AutocompleteBase.js";
-import '../../assets/MenuSearch.css';const l = "_field_mo7y9_1", p = "_icon_mo7y9_5", _ = "_input_mo7y9_14", f = "_clear_mo7y9_31", o = {
-  field: l,
-  icon: p,
+import { IconButton as m } from "../Button/IconButton.js";
+import '../../assets/MenuSearch.css';const p = "_field_10py0_2", l = "_icon_10py0_7", _ = "_input_10py0_16", f = "_clear_10py0_33", o = {
+  field: p,
+  icon: l,
   input: _,
   clear: f
-}, j = ({ value: c, name: n, placeholder: s = "Søk", onChange: e, onClear: t }) => /* @__PURE__ */ m("div", { className: o.field, children: [
+}, j = ({ value: c, name: n, placeholder: s = "Søk", onChange: e, onClear: t }) => /* @__PURE__ */ r("div", { className: o.field, children: [
   /* @__PURE__ */ i(
     "input",
     {
@@ -24,9 +24,9 @@ import '../../assets/MenuSearch.css';const l = "_field_mo7y9_1", p = "_icon_mo7y
       autoComplete: "off"
     }
   ),
-  /* @__PURE__ */ i(r, { name: "magnifying-glass", className: o.icon }),
+  /* @__PURE__ */ i(a, { name: "magnifying-glass", className: o.icon }),
   t && /* @__PURE__ */ i(
-    a,
+    m,
     {
       icon: "x-mark",
       color: "secondary",

package/dist/components/Menu/MenuSearch.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ value, name, placeholder, onChange, onClear }: import('./MenuSearch').MenuSearchProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        name: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Menu/MenuSearch.stories.js

@@ -1,17 +1,16 @@
-import { fn as e } from "@storybook/test";
-import { MenuSearch as t } from "./MenuSearch.js";
-const r = {
+import { MenuSearch as e } from "./MenuSearch.js";
+const t = {
   title: "Menu/MenuSearch",
-  component: t,
+  component: e,
   tags: ["autodocs"],
   parameters: {},
-  args: {}
-}, n = {
   args: {
-    onClear: e()
+    name: "search"
   }
+}, r = {
+  args: {}
 };
 export {
-  n as Default,
-  r as default
+  r as Default,
+  t as default
 };

package/dist/components/Meta/MetaItem.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ loading, size, variant, icon, children, ...rest }: import('./MetaItem').MetaItemProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        children: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Icon: Story;

package/dist/components/Meta/MetaList.stories.d.ts

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

package/dist/components/Meta/MetaProgress.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ size, variant, progress, children }: import('./MetaProgress').MetaProgressProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const InProgress: Story;
+export declare const ProgressComplete: Story;

package/dist/components/Meta/MetaTimestamp.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ loading, size, variant, datetime, icon, children, }: import('./MetaTimestamp').MetaTimestampProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        children: string;
+        datetime: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Icon: Story;

package/dist/components/Page/PageHeader.js

@@ -3,8 +3,8 @@ import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import { Heading as c } from "../Typography/Heading.js";
 import "react";
+import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import "../Searchbar/AutocompleteBase.js";
 import { SectionBase as n } from "./SectionBase.js";
 import { P as p, s as i } from "../../PageHeaderMedia-DpZ09tLD.js";
 import { PageNav as l } from "./PageNav.js";

package/dist/components/ResourceList/ResourceList.d.ts

@@ -0,0 +1,6 @@
+import { ListProps } from '../List';
+import { ResourceListItemProps } from './ResourceListItem';
+export interface ResourceListProps extends Omit<ListProps, 'items'> {
+    items: ResourceListItemProps[];
+}
+export declare const ResourceList: ({ items, size, ...props }: ResourceListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ResourceList/ResourceList.js

@@ -0,0 +1,12 @@
+import { jsx as e } from "react/jsx-runtime";
+import { createElement as i } from "react";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import { ResourceListItem as p } from "./ResourceListItem.js";
+import { ListBase as s } from "../List/ListBase.js";
+const x = ({ items: o, size: t = "md", ...m }) => /* @__PURE__ */ e(s, { ...m, children: o.map((r) => /* @__PURE__ */ i(p, { ...r, key: r.id, size: t })) });
+export {
+  x as ResourceList
+};