@altinn/altinn-components 0.8.3 → 0.9.1

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

@@ -2,15 +2,15 @@ import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { Fragment as s, useState as g } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { Button as k } from "../Button/Button.js";
-import "../RootProvider/RootProvider.js";
+import "../Autocomplete/AutocompleteBase.js";
 import { MetaItem as r } from "../Meta/MetaItem.js";
-import { ListItemBase as b } from "./ListItemBase.js";
-import { ListItemHeader as y } from "./ListItemHeader.js";
+import { ListItemBase as k } from "./ListItemBase.js";
+import { ListItemHeader as b } from "./ListItemHeader.js";
+import "../RootProvider/RootProvider.js";
 import { ListItem as t } from "./ListItem.js";
 import { ListBase as d } from "./ListBase.js";
-import { List as v } from "./List.js";
-import "../Searchbar/AutocompleteBase.js";
+import { List as y } from "./List.js";
+import { Button as v } from "../Button/Button.js";
 const l = ["lg", "md", "sm", "xs"], S = {
   title: "List/ListItem",
   component: t,
@@ -141,7 +141,7 @@ const l = ["lg", "md", "sm", "xs"], S = {
     t,
     {
       ...n,
-      controls: /* @__PURE__ */ e("div", { style: { position: "absolute", right: 0, display: "flex", alignItems: "center", margin: "0.625rem" }, children: /* @__PURE__ */ e(k, { icon: "pencil", size: "sm", variant: "outline", children: "Rediger" }) })
+      controls: /* @__PURE__ */ e("div", { style: { position: "absolute", right: 0, display: "flex", alignItems: "center", margin: "0.625rem" }, children: /* @__PURE__ */ e(v, { icon: "pencil", size: "sm", variant: "outline", children: "Rediger" }) })
     }
   ),
   /* @__PURE__ */ e(r, { children: "List item with custom controls" })
@@ -215,9 +215,9 @@ const l = ["lg", "md", "sm", "xs"], S = {
       type: "person"
     }))
   };
-  return /* @__PURE__ */ a(b, { children: [
+  return /* @__PURE__ */ a(k, { children: [
     /* @__PURE__ */ e(
-      y,
+      b,
       {
         ...n,
         avatarGroup: u,
@@ -227,7 +227,7 @@ const l = ["lg", "md", "sm", "xs"], S = {
         as: "button"
       }
     ),
-    i && /* @__PURE__ */ e(v, { size: "sm", spacing: "none", items: h })
+    i && /* @__PURE__ */ e(y, { size: "sm", spacing: "none", items: h })
   ] });
 };
 export {

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

@@ -2,12 +2,12 @@ import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { Fragment as s, useState as g } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { Button as k } from "../Button/Button.js";
-import "../RootProvider/RootProvider.js";
+import "../Autocomplete/AutocompleteBase.js";
 import { MetaItem as r } from "../Meta/MetaItem.js";
 import { ListItemHeader as t } from "./ListItemHeader.js";
+import "../RootProvider/RootProvider.js";
 import { ListBase as d } from "./ListBase.js";
-import "../Searchbar/AutocompleteBase.js";
+import { Button as k } from "../Button/Button.js";
 const l = ["lg", "md", "sm", "xs"], w = {
   title: "List/ListItemHeader",
   component: t,

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

@@ -1,8 +1,6 @@
 import { MenuTheme } from './MenuBase';
 import { MenuItemsProps } from './MenuItems';
-import { MenuSearchProps } from './MenuSearch';
 export interface MenuProps extends MenuItemsProps {
     theme?: MenuTheme;
-    search?: MenuSearchProps;
 }
 export declare const Menu: ({ theme, defaultItemColor, defaultItemSize, groups, items, search, }: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/Menu.js

@@ -1,18 +1,23 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { MenuBase as u } from "./MenuBase.js";
-import { MenuItems as p } from "./MenuItems.js";
-import { MenuSearch as f } from "./MenuSearch.js";
-const j = ({
-  theme: m = "inherit",
-  defaultItemColor: o = "subtle",
-  defaultItemSize: t = "sm",
-  groups: n,
-  items: i = [],
-  search: r
-}) => /* @__PURE__ */ s(u, { theme: m, children: [
-  r && /* @__PURE__ */ e(f, { ...r }),
-  /* @__PURE__ */ e(p, { items: i, groups: n, defaultItemColor: o, defaultItemSize: t })
-] });
+import { jsx as r } from "react/jsx-runtime";
+import { MenuBase as s } from "./MenuBase.js";
+import { MenuItems as u } from "./MenuItems.js";
+const c = ({
+  theme: e = "inherit",
+  defaultItemColor: t = "subtle",
+  defaultItemSize: m = "sm",
+  groups: o,
+  items: n = [],
+  search: i
+}) => /* @__PURE__ */ r(s, { theme: e, children: /* @__PURE__ */ r(
+  u,
+  {
+    search: i,
+    items: n,
+    groups: o,
+    defaultItemColor: t,
+    defaultItemSize: m
+  }
+) });
 export {
-  j as Menu
+  c as Menu
 };

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

@@ -0,0 +1,35 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ theme, defaultItemColor, defaultItemSize, groups, items, search, }: import('./Menu').MenuProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const GlobalMenu: Story;
+export declare const CollapsibleGlobalMenu: Story;
+export declare const ExpandedGlobalMenu: Story;
+export declare const DrilldownMenu: Story;
+export declare const InboxMenu: Story;
+export declare const InboxMenuWithShortcuts: {
+    args: {
+        groups: {
+            shortcuts: {
+                title: string;
+                defaultItemColor: string;
+            };
+        };
+        items: (import('./MenuItem.tsx').MenuItemProps | {
+            id: string;
+            groupId: string;
+            icon: string;
+            title: string;
+        })[];
+    };
+};
+export declare const PersonMenu: Story;
+export declare const CompanyMenu: Story;
+export declare const AccountMenu: Story;
+export declare const AccountMenuWithSearch: Story;

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

@@ -1,15 +1,16 @@
-import { Menu as a } from "./Menu.js";
-const s = {
+import { menuItems as l } from "../../examples/menuItems.js";
+import { Menu as s } from "./Menu.js";
+const d = {
   title: "Menu/Menu",
-  component: a,
+  component: s,
   tags: ["autodocs"],
   parameters: {},
   args: {}
-}, d = {
+}, p = {
   args: {
     groups: {
       settings: {
-        defaultItemColor: "default"
+        defaultItemColor: "neutral"
       }
     },
     items: [
@@ -61,11 +62,11 @@ const s = {
       }
     ]
   }
-}, r = {
+}, i = {
   args: {
     groups: {
       settings: {
-        defaultItemColor: "default"
+        defaultItemColor: "neutral"
       }
     },
     items: [
@@ -143,18 +144,18 @@ const s = {
       }
     ]
   }
-}, g = {
+}, u = {
   args: {
-    ...r.args,
-    items: [...r.args.items].map((e) => e.collapsible ? {
+    ...i.args,
+    items: [...i.args.items].map((e) => e.collapsible ? {
       ...e,
       group: (e == null ? void 0 : e.id) === "inbox" ? "inbox" : "",
       expanded: !0
     } : e)
   }
-}, p = {
+}, c = {
   args: {
-    color: "subtle",
+    defaultItemColor: "subtle",
     groups: {
       "level-1": {
         divider: !0
@@ -174,7 +175,7 @@ const s = {
         items: [
           {
             groupId: "level-2",
-            name: "tema",
+            id: "tema",
             icon: "teddy-bear",
             title: "Tema",
             expanded: !0,
@@ -264,11 +265,11 @@ const s = {
     defaultItemColor: "subtle"
   }
 };
-var i, o;
-const u = {
+var r, o;
+const k = {
   args: {
     groups: {
-      ...(i = t.args) == null ? void 0 : i.groups,
+      ...(r = t.args) == null ? void 0 : r.groups,
       shortcuts: {
         title: "Snarveier",
         defaultItemColor: "default"
@@ -290,7 +291,7 @@ const u = {
       }
     ]
   }
-}, c = {
+}, m = {
   args: {
     groups: {},
     items: [
@@ -336,7 +337,7 @@ const u = {
       }
     ]
   }
-}, m = {
+}, I = {
   args: {
     groups: {},
     items: [
@@ -376,123 +377,35 @@ const u = {
       }
     ]
   }
-}, l = {
+}, n = {
   args: {
     groups: {
       a1: {
         title: "Deg selv, favoritter og grupper"
       },
-      b1: {
-        id: "companies",
-        title: "Andre kontoer"
-      }
+      b1: { 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: l
   }
 }, b = {
   args: {
-    ...l.args,
+    ...n.args,
     search: {
+      name: "search",
       placeholder: "Søk i kontoer"
     }
   }
 };
 export {
-  l as AccountMenu,
+  n as AccountMenu,
   b as AccountMenuWithSearch,
-  r as CollapsibleGlobalMenu,
-  m as CompanyMenu,
-  p as DrilldownMenu,
-  g as ExpandedGlobalMenu,
-  d as GlobalMenu,
+  i as CollapsibleGlobalMenu,
+  I as CompanyMenu,
+  c as DrilldownMenu,
+  u as ExpandedGlobalMenu,
+  p as GlobalMenu,
   t as InboxMenu,
-  u as InboxMenuWithShortcuts,
-  c as PersonMenu,
-  s as default
+  k as InboxMenuWithShortcuts,
+  m as PersonMenu,
+  d as default
 };

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

@@ -28,7 +28,7 @@ export interface MenuItemProps {
     linkIcon?: IconName;
     linkText?: string;
     className?: string;
-    children?: ReactNode;
+    label?: ReactNode;
     items?: MenuItemProps[];
 }
-export declare const MenuItem: ({ as, color, size, collapsible, expanded, icon, avatar, avatarGroup, title, description, badge, linkText, linkIcon, children, ...rest }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ as, color, size, collapsible, expanded, icon, avatar, avatarGroup, title, description, badge, linkText, linkIcon, label, ...rest }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuItem.js

@@ -1,4 +1,4 @@
-import { jsxs as h, jsx as m } from "react/jsx-runtime";
+import { jsxs as s, jsx as m } from "react/jsx-runtime";
 import { MenuItemBase as k } from "./MenuItemBase.js";
 import { MenuItemLabel as L } from "./MenuItemLabel.js";
 import { MenuItemMedia as b } from "./MenuItemMedia.js";
@@ -6,32 +6,32 @@ const B = ({
   as: t = "a",
   color: e = "neutral",
   size: n = "sm",
-  collapsible: o,
-  expanded: r,
+  collapsible: r,
+  expanded: o,
   icon: c,
   avatar: i,
   avatarGroup: p,
   title: a,
   description: u,
   badge: I,
-  linkText: M,
-  linkIcon: f,
-  children: l,
-  ...s
-}) => /* @__PURE__ */ h(
+  linkText: l,
+  linkIcon: M,
+  label: f,
+  ...h
+}) => /* @__PURE__ */ s(
   k,
   {
     as: t,
     size: n,
     badge: I,
-    linkText: M,
-    linkIcon: o && r ? "chevron-up" : o ? "chevron-down" : f,
+    linkText: l,
+    linkIcon: r && o ? "chevron-up" : r ? "chevron-down" : M,
     color: e,
-    expanded: r,
-    ...s,
+    expanded: o,
+    ...h,
     children: [
       /* @__PURE__ */ m(b, { color: e, size: n, icon: c, avatar: i, avatarGroup: p }),
-      /* @__PURE__ */ m(L, { title: a, description: u, size: n, children: l })
+      /* @__PURE__ */ m(L, { title: a, description: u, size: n, children: f })
     ]
   }
 );

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

@@ -4,11 +4,11 @@ import { LayoutBase as l } from "../Layout/LayoutBase.js";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../Icon/SvgIcon.js";
-import "../RootProvider/RootProvider.js";
+import "../Autocomplete/AutocompleteBase.js";
 import { MetaItem as p } from "../Meta/MetaItem.js";
+import "../RootProvider/RootProvider.js";
 import { MenuItem as o } from "./MenuItem.js";
 import { MenuBase as m } from "./MenuBase.js";
-import "../Searchbar/AutocompleteBase.js";
 const I = {
   title: "Menu/MenuItem",
   component: o,

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

@@ -1,7 +1,7 @@
 import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
 import { BadgeProps } from '../Badge';
 import { IconName } from '../Icon';
-export type MenuItemSize = 'sm' | 'md' | 'lg';
+export type MenuItemSize = 'xs' | 'sm' | 'md' | 'lg';
 export type MenuItemColor = 'neutral' | 'subtle' | 'strong' | 'company' | 'person';
 export interface MenuItemBaseProps {
     as?: ElementType;

package/dist/components/Menu/MenuItemBase.js

@@ -1,63 +1,63 @@
 import { jsxs as i, jsx as c } from "react/jsx-runtime";
-import { c as N } from "../../index-L8X2o7IH.js";
-import { Badge as u } from "../Badge/Badge.js";
-import { Icon as v } from "../Icon/Icon.js";
+import { c as v } from "../../index-L8X2o7IH.js";
+import { Badge as T } from "../Badge/Badge.js";
+import { Icon as j } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
-import '../../assets/MenuItemBase.css';const T = "_item_y1gbn_1", j = "_content_y1gbn_37", B = "_action_y1gbn_45", k = "_linkText_y1gbn_52", z = "_linkIcon_y1gbn_57", E = "_media_y1gbn_77", t = {
-  item: T,
-  content: j,
-  action: B,
-  linkText: k,
-  linkIcon: z,
-  media: E
-}, G = ({
+import '../../assets/MenuItemBase.css';const B = "_item_uwh99_1", k = "_content_uwh99_41", z = "_action_uwh99_49", E = "_linkText_uwh99_56", M = "_linkIcon_uwh99_61", b = "_media_uwh99_81", t = {
+  item: B,
+  content: k,
+  action: z,
+  linkText: E,
+  linkIcon: M,
+  media: b
+}, H = ({
   as: d,
   size: _,
   color: l,
-  className: p,
-  href: x,
-  onClick: n,
-  onKeyPress: a,
-  tabIndex: f = 0,
-  hidden: b,
+  className: h,
+  href: p,
+  onClick: a,
+  onKeyPress: e,
+  tabIndex: u = 0,
+  hidden: x,
   disabled: o = !1,
-  active: g = !1,
-  selected: h = !1,
-  expanded: y = !1,
-  linkIcon: e,
+  active: f = !1,
+  selected: w = !1,
+  expanded: I = !1,
+  linkIcon: n,
   linkText: m,
   badge: s,
-  children: I
+  children: N
 }) => /* @__PURE__ */ i(
   d || "a",
   {
     role: "menuitem",
-    tabIndex: o ? "-1" : f ?? 0,
-    className: N(t.item, p),
+    tabIndex: o ? "-1" : u ?? 0,
+    className: v(t.item, h),
     "data-size": _,
     "data-color": l,
-    "data-active": g,
-    "aria-hidden": b,
-    "aria-expanded": y,
+    "data-active": f,
+    "aria-hidden": x,
+    "aria-expanded": I,
     "aria-disabled": o,
-    "aria-selected": h,
-    href: x,
+    "aria-selected": w,
+    href: p,
     onKeyPress: (r) => {
-      r.key === "Enter" && (n == null || n()), a == null || a(r);
+      r.key === "Enter" && (a == null || a()), e == null || e(r);
     },
-    onClick: n,
+    onClick: a,
     children: [
       /* @__PURE__ */ i("div", { className: t.content, children: [
-        I,
-        s && /* @__PURE__ */ c(u, { ...s })
+        N,
+        s && /* @__PURE__ */ c(T, { ...s })
       ] }),
-      e && /* @__PURE__ */ i("div", { className: t.action, children: [
+      n && /* @__PURE__ */ i("div", { className: t.action, children: [
         m && /* @__PURE__ */ c("span", { className: t.linkText, children: m }),
-        e && /* @__PURE__ */ c(v, { name: e, className: t.linkIcon })
+        n && /* @__PURE__ */ c(j, { name: n, className: t.linkIcon })
       ] })
     ]
   }
 );
 export {
-  G as MenuItemBase
+  H as MenuItemBase
 };

package/dist/components/Menu/MenuItemLabel.js

@@ -1,11 +1,11 @@
-import { jsx as t, jsxs as r, Fragment as c } from "react/jsx-runtime";
-import '../../assets/MenuItemLabel.css';const o = "_label_1rsak_1", d = "_title_1rsak_7", _ = "_description_1rsak_29", e = {
-  label: o,
+import { jsx as e, jsxs as o, Fragment as c } from "react/jsx-runtime";
+import '../../assets/MenuItemLabel.css';const r = "_label_1ohd5_1", d = "_title_1ohd5_7", _ = "_description_1ohd5_35", s = {
+  label: r,
   title: d,
   description: _
-}, p = ({ size: s = "sm", label: l, title: n, description: i, children: a }) => /* @__PURE__ */ t("span", { className: e.label, "data-size": s, children: a || /* @__PURE__ */ r(c, { children: [
-  /* @__PURE__ */ t("strong", { className: e.title, "data-size": s, children: n || l }),
-  /* @__PURE__ */ t("span", { className: e.description, "data-size": s, children: i })
+}, p = ({ size: t = "sm", label: l, title: n, description: i, children: a }) => /* @__PURE__ */ e("span", { className: s.label, "data-size": t, children: a || /* @__PURE__ */ o(c, { children: [
+  /* @__PURE__ */ e("strong", { className: s.title, "data-size": t, children: n || l }),
+  /* @__PURE__ */ e("span", { className: s.description, "data-size": t, children: i })
 ] }) });
 export {
   p as MenuItemLabel

package/dist/components/Menu/MenuItemMedia.js

@@ -1,25 +1,27 @@
 import { jsxs as d, jsx as a } from "react/jsx-runtime";
 import { Avatar as l } from "../Avatar/Avatar.js";
 import { AvatarGroup as c } from "../Avatar/AvatarGroup.js";
-import { Icon as u } from "../Icon/Icon.js";
+import { Icon as x } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
-import '../../assets/MenuItemMedia.css';const f = "_media_7n7uy_1", _ = "_icon_7n7uy_16", e = {
+import '../../assets/MenuItemMedia.css';const f = "_media_1n26h_1", u = "_icon_1n26h_21", e = {
   media: f,
-  icon: _
+  icon: u
 }, m = {
   avatar: {
+    xs: "xs",
     sm: "sm",
     md: "md",
     lg: "lg"
   },
   avatarGroup: {
+    xs: "xs",
     sm: "xs",
     md: "sm",
     lg: "md"
   }
-}, A = ({ size: o = "sm", color: n, icon: t, avatar: s, avatarGroup: r, children: i }) => !t && !s && !r && !i ? !1 : /* @__PURE__ */ d("div", { className: e.media, "data-size": o, "data-color": t ? n : null, children: [
-  t && /* @__PURE__ */ a(u, { name: t, variant: n === "strong" ? "solid" : "outline", className: e.icon }) || s && /* @__PURE__ */ a(l, { ...s, size: m == null ? void 0 : m.avatar[o] }) || r && /* @__PURE__ */ a(c, { ...r, size: m == null ? void 0 : m.avatarGroup[o] }),
+}, A = ({ size: t = "sm", color: n, icon: s, avatar: o, avatarGroup: r, children: i }) => !s && !o && !r && !i ? !1 : /* @__PURE__ */ d("div", { className: e.media, "data-size": t, "data-color": s ? n : null, children: [
+  s && /* @__PURE__ */ a(x, { name: s, variant: n === "strong" ? "solid" : "outline", className: e.icon }) || o && /* @__PURE__ */ a(l, { ...o, size: m == null ? void 0 : m.avatar[t] }) || r && /* @__PURE__ */ a(c, { ...r, size: m == null ? void 0 : m.avatarGroup[t] }),
   i
 ] });
 export {

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

@@ -1,4 +1,5 @@
 import { MenuItemColor, MenuItemProps, MenuItemSize } from '../';
+import { MenuSearchProps } from './MenuSearch';
 export interface MenuGroupProps {
     title?: string;
     divider?: boolean;
@@ -9,9 +10,10 @@ export type MenuItemGroups = Record<string, MenuGroupProps>;
 export interface MenuItemsProps {
     level?: number;
     expanded?: boolean;
+    search?: MenuSearchProps;
     items: MenuItemProps[];
     groups?: MenuItemGroups;
     defaultItemColor?: MenuItemColor;
     defaultItemSize?: MenuItemSize;
 }
-export declare const MenuItems: ({ level, expanded, items, groups, defaultItemColor, defaultItemSize, }: MenuItemsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItems: ({ level, expanded, search, items, groups, defaultItemColor, defaultItemSize, }: MenuItemsProps) => import("react/jsx-runtime").JSX.Element;