@altinn/altinn-components 0.6.10 → 0.6.11

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

@@ -1,112 +1,145 @@
-import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { Fragment as p, useState as g } from "react";
-import { MetaItem as k } from "../Meta/MetaItem.js";
+import { MetaItem as i } from "../Meta/MetaItem.js";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
-import { ListItem as s } from "./ListItem.js";
-import { ListBase as u } from "./ListBase.js";
-import { List as y } from "./List.js";
-const a = ["lg", "md", "sm", "xs"], I = {
+import { ListItem as t } from "./ListItem.js";
+import { ListBase as s } from "./ListBase.js";
+import { List as k } from "./List.js";
+const c = ["lg", "md", "sm", "xs"], D = {
   title: "List/ListItem",
-  component: s,
+  component: t,
   tags: ["autodocs"],
   parameters: {},
   args: {
     id: "id",
     title: "Title",
     description: "Description",
-    size: "md",
-    href: "#"
+    size: "md"
   }
-}, _ = {
+}, T = {
   args: {}
-}, D = {
-  args: {
-    icon: "teddy-bear"
-  }
-}, B = {
-  args: {
-    color: "accent",
-    icon: "teddy-bear"
-  }
-}, Q = {
-  args: {
-    avatar: {
-      type: "person",
-      name: "Erik Huseklepp"
+}, w = (n) => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ e(t, { ...n }),
+  /* @__PURE__ */ e(i, { children: "No media" }),
+  /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear" }),
+  /* @__PURE__ */ e(i, { children: "Icon" }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      avatar: {
+        type: "person",
+        name: "Erik Huseklepp"
+      }
     }
-  }
-}, S = {
-  args: {
-    avatar: {
-      type: "company",
-      name: "Sportsklubben Brann"
+  ),
+  /* @__PURE__ */ e(i, { children: "Person" }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      avatar: {
+        type: "company",
+        name: "Sportsklubben Brann"
+      }
     }
-  }
-}, E = {
-  args: {
-    avatar: {
-      type: "company",
-      name: "Politiets sikkerhetstjeneste",
-      imageUrl: "https://media.licdn.com/dms/image/v2/D4D0BAQH7Yv86kmHN5g/company-logo_200_200/company-logo_200_200/0/1688735908848?e=1738195200&v=beta&t=f-Mkzd03bqzdQN4IT0h89VQ9_Jri1iJ6XphYYnjsgEo"
+  ),
+  /* @__PURE__ */ e(i, { children: "Company" }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      avatar: {
+        type: "company",
+        name: "Politiets sikkerhetstjeneste",
+        imageUrl: "https://media.licdn.com/dms/image/v2/D4D0BAQH7Yv86kmHN5g/company-logo_200_200/company-logo_200_200/0/1688735908848?e=1738195200&v=beta&t=f-Mkzd03bqzdQN4IT0h89VQ9_Jri1iJ6XphYYnjsgEo"
+      }
     }
-  }
-}, P = {
-  args: {
-    avatarGroup: {
-      items: [
-        {
-          type: "person",
-          name: "Albert Åberg"
-        },
-        {
-          type: "person",
-          name: "Birger Meling"
-        },
-        {
-          type: "person",
-          name: "Celine Dion"
-        }
-      ]
+  ),
+  /* @__PURE__ */ e(i, { children: "Logo" }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      avatarGroup: {
+        items: [
+          {
+            type: "person",
+            name: "Albert Åberg"
+          },
+          {
+            type: "person",
+            name: "Birger Meling"
+          },
+          {
+            type: "person",
+            name: "Celine Dion"
+          }
+        ]
+      }
     }
-  }
-}, T = {
-  args: {
-    avatarGroup: {
-      items: [
-        {
-          type: "company",
-          name: "Albert Åberg"
-        },
-        {
-          type: "company",
-          name: "Birger Meling"
-        },
-        {
-          type: "company",
-          name: "Celine Dion"
-        }
-      ]
+  ),
+  /* @__PURE__ */ e(i, { children: "People group" }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      avatarGroup: {
+        items: [
+          {
+            type: "company",
+            name: "Albert Åberg"
+          },
+          {
+            type: "company",
+            name: "Birger Meling"
+          },
+          {
+            type: "company",
+            name: "Celine Dion"
+          }
+        ]
+      }
     }
-  }
-}, z = {
-  args: {
-    avatar: {
-      type: "company",
-      name: "Direktoratet for samfunnssikkerhet og beredskap",
-      imageUrl: "https://media.licdn.com/dms/image/v2/C510BAQHlQiOWI4f45w/company-logo_200_200/company-logo_200_200/0/1631389121726?e=1738195200&v=beta&t=Q1P8kOwpgLvoqHBxyrHCaYd2upNkPQVi2zSSxJzbdCA"
-    },
-    title: "Samtykke for å reparere elektrisk utstyr hvis bruk er forbundet med særlig risiko, herunder elektromedisinsk utstyr",
-    description: "Direktoratet for samfunnssikkerhet og beredskap"
-  }
-}, G = (t) => /* @__PURE__ */ o(u, { children: a == null ? void 0 : a.map((r) => /* @__PURE__ */ i(p, { children: [
-  /* @__PURE__ */ o(s, { ...t, size: r, selected: r === (t == null ? void 0 : t.size) }),
-  /* @__PURE__ */ o(k, { children: r })
-] }, r)) }), j = (t) => {
-  const [r, l] = g(!1), m = () => {
-    l((e) => !e);
-  }, n = [
+  ),
+  /* @__PURE__ */ e(i, { children: "Company group" })
+] }), E = (n) => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ e(t, { ...n, linkIcon: "chevron-right" }),
+  /* @__PURE__ */ e(i, { children: "Link icon, emphasising that this will take you somewhere" }),
+  /* @__PURE__ */ e(t, { ...n, linkIcon: "chevron-right", linkText: "Åpne" }),
+  /* @__PURE__ */ e(i, { children: "Link icon + link text, emphasising that this will take you somewhere" }),
+  /* @__PURE__ */ e(t, { ...n, collapsible: !0, badge: { label: "Admin" } }),
+  /* @__PURE__ */ e(i, { children: "Collapsible item with badge" }),
+  /* @__PURE__ */ e(t, { ...n, collapsible: !0, expanded: !0 }),
+  /* @__PURE__ */ e(i, { children: "Collapsible and expanded item" }),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      linkIcon: "chevron-right",
+      menu: {
+        items: [
+          { label: "Innstillinger", icon: "cog" },
+          { label: "Aktivitetslogg", icon: "clock-dashed" }
+        ]
+      }
+    }
+  ),
+  /* @__PURE__ */ e(i, { children: "List item with context menu and linkIcon" })
+] }), H = (n) => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ e(t, { ...n }),
+  /* @__PURE__ */ e(i, { children: "Default" }),
+  /* @__PURE__ */ e(t, { ...n, color: "accent" }),
+  /* @__PURE__ */ e(i, { children: "Accent" })
+] }), B = (n) => /* @__PURE__ */ e(s, { children: c == null ? void 0 : c.map((o) => /* @__PURE__ */ a(p, { children: [
+  /* @__PURE__ */ e(t, { ...n, size: o, selected: o === (n == null ? void 0 : n.size) }),
+  /* @__PURE__ */ e(i, { children: o })
+] }, o)) }), M = (n) => {
+  const [o, d] = g(!1), m = () => {
+    d((r) => !r);
+  }, l = [
     {
       name: "Per Ove Ludvigsen",
       role: "Sportlig leder",
@@ -127,47 +160,42 @@ const a = ["lg", "md", "sm", "xs"], I = {
       role: "Toppspillerutvikler",
       rights: "Ingen rettigheter"
     }
-  ], c = n == null ? void 0 : n.map((e) => ({
+  ], h = l == null ? void 0 : l.map((r) => ({
     avatar: {
-      ...e,
+      ...r,
       type: "person"
     },
-    title: e == null ? void 0 : e.name,
-    description: e == null ? void 0 : e.role,
-    badge: { label: e == null ? void 0 : e.rights },
+    title: r == null ? void 0 : r.name,
+    description: r == null ? void 0 : r.role,
+    badge: { label: r == null ? void 0 : r.rights },
     linkIcon: "menu-elipsis-horizontal"
-  })), d = {
-    items: n == null ? void 0 : n.map((e) => ({
-      name: e == null ? void 0 : e.name,
+  })), u = {
+    items: l == null ? void 0 : l.map((r) => ({
+      name: r == null ? void 0 : r.name,
       type: "person"
     }))
   };
-  return /* @__PURE__ */ i(p, { children: [
-    /* @__PURE__ */ o(
-      s,
+  return /* @__PURE__ */ a(p, { children: [
+    /* @__PURE__ */ e(
+      t,
       {
-        ...t,
-        avatarGroup: d,
+        ...n,
+        avatarGroup: u,
         collapsible: !0,
-        expanded: r,
+        expanded: o,
         onClick: m,
         as: "button"
       }
     ),
-    r && /* @__PURE__ */ o(y, { size: "xs", spacing: "none", items: c })
+    o && /* @__PURE__ */ e(k, { size: "xs", spacing: "none", items: h })
   ] });
 };
 export {
-  j as Collapsible,
-  S as Company,
-  T as CompanyGroup,
-  _ as Default,
-  D as Icon,
-  B as IconAccent,
-  E as Logo,
-  z as LongTitle,
-  P as PeopleGroup,
-  Q as Person,
-  G as Sizes,
-  I as default
+  E as ActionProps,
+  M as Collapsible,
+  H as Colors,
+  T as Default,
+  w as MediaTypes,
+  B as Sizes,
+  D as default
 };

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { BadgeProps } from '../Badge';
+import { ContextMenuProps } from '../ContextMenu';
+import { IconName } from '../Icon';
+interface ListItemActionProps {
+    badge?: BadgeProps;
+    menu?: ContextMenuProps;
+    linkText?: string;
+    linkIcon?: IconName;
+    children?: ReactNode;
+}
+export declare const ListItemAction: ({ linkText, linkIcon, menu, badge, children }: ListItemActionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/List/ListItemAction.js

@@ -0,0 +1,19 @@
+import { jsx as n, jsxs as e, Fragment as l } from "react/jsx-runtime";
+import { Badge as m } from "../Badge/Badge.js";
+import { ContextMenu as a } from "../ContextMenu/ContextMenu.js";
+import { Icon as _ } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import "../../index-L8X2o7IH.js";
+import '../../assets/ListItemAction.css';const p = "_action_1lv65_3", x = "_linkText_1lv65_10", k = "_linkIcon_1lv65_15", t = {
+  action: p,
+  linkText: x,
+  linkIcon: k
+}, h = ({ linkText: o, linkIcon: i, menu: c, badge: s, children: r }) => /* @__PURE__ */ n("div", { className: t.action, children: r || /* @__PURE__ */ e(l, { children: [
+  s && /* @__PURE__ */ n(m, { ...s }),
+  c && /* @__PURE__ */ n(a, { ...c }),
+  o && /* @__PURE__ */ n("span", { className: t.linkText, children: o }),
+  i && /* @__PURE__ */ n(_, { name: i, className: t.linkIcon })
+] }) });
+export {
+  h as ListItemAction
+};

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

@@ -0,0 +1,45 @@
+import "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import { ListItemAction as t } from "./ListItemAction.js";
+import "react";
+import "../Icon/SvgIcon.js";
+const s = {
+  title: "List/ListItemAction",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, a = {
+  args: {
+    linkIcon: "chevron-right"
+  }
+}, c = {
+  args: {
+    linkText: "2 dager siden",
+    linkIcon: "chevron-right"
+  }
+}, m = {
+  args: {
+    badge: {
+      label: "Admin"
+    },
+    linkIcon: "chevron-down"
+  }
+}, l = {
+  args: {
+    menu: {
+      items: [
+        {
+          label: "Slett alle"
+        }
+      ]
+    }
+  }
+};
+export {
+  m as BadgeAndIcon,
+  l as ContextMenu,
+  a as Icon,
+  c as TextAndIcon,
+  s as default
+};

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

@@ -8,6 +8,7 @@ interface ListItemBaseProps {
     as?: ElementType;
     size?: ListItemSize;
     menu?: ContextMenuProps;
+    linkText?: string;
     linkIcon?: IconName;
     color?: ListItemColor;
     badge?: BadgeProps;
@@ -20,8 +21,9 @@ interface ListItemBaseProps {
     expanded?: boolean;
     onClick?: () => void;
     onKeyPress?: KeyboardEventHandler;
+    action?: ReactNode;
     children?: ReactNode;
     style?: React.CSSProperties;
 }
-export declare const ListItemBase: ({ as, children, className, href, size, color, active, hidden, collapsible, selected, expanded, linkIcon, menu, badge, onClick, onKeyPress, style, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemBase: ({ as, children, className, href, size, color, active, hidden, selected, collapsible, expanded, linkText, linkIcon, menu, badge, action, onClick, onKeyPress, style, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/List/ListItemBase.js

@@ -1,62 +1,58 @@
-import { jsxs as p, jsx as n } from "react/jsx-runtime";
-import { c as B } from "../../index-L8X2o7IH.js";
-import { Badge as g } from "../Badge/Badge.js";
-import { ContextMenu as w } from "../ContextMenu/ContextMenu.js";
-import { Icon as z } from "../Icon/Icon.js";
-import "../Icon/SvgIcon.js";
-import '../../assets/ListItemBase.css';const E = "_item_1cdyi_3", L = "_content_1cdyi_46", M = "_action_1cdyi_56", b = "_linkIcon_1cdyi_63", a = {
-  item: E,
-  content: L,
-  action: M,
-  linkIcon: b
-}, H = ({
-  as: l,
-  children: I,
-  className: f,
-  href: o,
-  size: i,
-  color: h,
-  active: v = !1,
-  hidden: x = !1,
+import { jsxs as u, jsx as i } from "react/jsx-runtime";
+import { c as N } from "../../index-L8X2o7IH.js";
+import { ListItemAction as w } from "./ListItemAction.js";
+import '../../assets/ListItemBase.css';const z = "_item_17cbe_3", A = "_content_17cbe_46", B = "_action_17cbe_56", E = "_linkText_17cbe_63", g = "_linkIcon_17cbe_68", s = {
+  item: z,
+  content: A,
+  action: B,
+  linkText: E,
+  linkIcon: g
+}, G = ({
+  as: m,
+  children: r,
+  className: _,
+  href: d,
+  size: c,
+  color: l,
+  active: x = !1,
+  hidden: I = !1,
+  selected: p,
   collapsible: e,
-  selected: N,
-  expanded: m,
-  linkIcon: y,
-  menu: r,
-  badge: s,
+  expanded: a,
+  linkText: b,
+  linkIcon: f,
+  menu: h,
+  badge: k,
+  action: v,
   onClick: t,
-  onKeyPress: c,
-  style: j
+  onKeyPress: n,
+  style: L
 }) => {
-  const u = l || "a", d = e && m ? "chevron-up" : e ? "chevron-down" : o ? "chevron-right" : y;
-  return /* @__PURE__ */ p(
-    u,
+  const T = m || "a", j = e && a ? "chevron-up" : e ? "chevron-down" : f;
+  return /* @__PURE__ */ u(
+    T,
     {
-      className: B(a.item, f),
-      "data-color": h,
-      "data-size": i,
-      "data-active": v,
-      "aria-hidden": x,
-      "aria-selected": N,
-      "aria-expanded": m,
-      href: o,
-      onKeyPress: (_) => {
-        _.key === "Enter" && (t == null || t()), c == null || c(_);
+      className: N(s.item, _),
+      "data-color": l,
+      "data-size": c,
+      "data-active": x,
+      "aria-hidden": I,
+      "aria-selected": p,
+      "aria-expanded": a,
+      href: d,
+      onKeyPress: (o) => {
+        o.key === "Enter" && (t == null || t()), n == null || n(o);
       },
       onClick: t,
       tabIndex: -1,
-      style: j,
+      style: L,
       children: [
-        /* @__PURE__ */ n("div", { className: a.content, "data-size": i, children: I }),
-        /* @__PURE__ */ p("div", { className: a.action, children: [
-          s && /* @__PURE__ */ n(g, { ...s }),
-          r && /* @__PURE__ */ n(w, { ...r }),
-          d && /* @__PURE__ */ n(z, { name: d, className: a.linkIcon })
-        ] })
+        /* @__PURE__ */ i("div", { className: s.content, "data-size": c, children: r }),
+        /* @__PURE__ */ i(w, { badge: k, linkText: b, linkIcon: j, menu: h, children: v })
       ]
     }
   );
 };
 export {
-  H as ListItemBase
+  G as ListItemBase
 };

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

@@ -4,3 +4,4 @@ export * from './ListBase';
 export * from './List';
 export * from './ListItemLabel';
 export * from './ListItemMedia';
+export * from './ListItemAction';

package/dist/components/List/index.js

@@ -1,14 +1,16 @@
 import { ListItemBase as o } from "./ListItemBase.js";
 import { ListItem as m } from "./ListItem.js";
-import { ListBase as i } from "./ListBase.js";
+import { ListBase as s } from "./ListBase.js";
 import { List as f } from "./List.js";
 import { ListItemLabel as x } from "./ListItemLabel.js";
-import { ListItemMedia as I } from "./ListItemMedia.js";
+import { ListItemMedia as a } from "./ListItemMedia.js";
+import { ListItemAction as b } from "./ListItemAction.js";
 export {
   f as List,
-  i as ListBase,
+  s as ListBase,
   m as ListItem,
+  b as ListItemAction,
   o as ListItemBase,
   x as ListItemLabel,
-  I as ListItemMedia
+  a as ListItemMedia
 };

package/dist/components/Menu/MenuItemBase.js

@@ -11,45 +11,45 @@ import '../../assets/MenuItemBase.css';const B = "_item_16huj_1", g = "_content_
   linkIcon: z,
   media: C
 }, E = ({
-  as: r,
-  onClick: l,
-  size: _,
-  color: d,
+  as: l,
+  onClick: _,
+  size: d,
+  color: h,
   linkIcon: o,
-  linkText: h,
-  badge: c,
+  linkText: c,
+  badge: i,
   tabIndex: p = 0,
   active: u = !1,
-  collapsible: i = !1,
-  expanded: s = !1,
+  collapsible: s = !1,
+  expanded: m = !1,
   selected: f = !1,
-  disabled: m = !1,
-  className: x,
-  children: j,
-  ...k
+  disabled: r = !1,
+  className: j,
+  children: x,
+  ...I
 }) => {
-  const I = r || "a", e = i && s ? "chevron-up" : i ? "chevron-down" : o && "chevron-right";
+  const k = l || "a", e = s && m ? "chevron-up" : s ? "chevron-down" : o && "chevron-right";
   return /* @__PURE__ */ t(
-    I,
+    k,
     {
       role: "menuitem",
-      tabIndex: m ? "-1" : p ?? 0,
-      "data-size": _,
-      "data-color": d,
+      tabIndex: r ? "-1" : p ?? 0,
+      "data-size": d,
+      "data-color": h,
       "data-active": u,
-      "aria-expanded": s,
-      "aria-disabled": m,
+      "aria-expanded": m,
+      "aria-disabled": r,
       "aria-selected": f,
-      onClick: l,
-      className: v(n.item, x),
-      ...k,
+      onClick: _,
+      className: v(n.item, j),
+      ...I,
       children: [
         /* @__PURE__ */ t("div", { className: n.content, children: [
-          j,
-          c && /* @__PURE__ */ a(N, { ...c })
+          x,
+          i && /* @__PURE__ */ a(N, { ...i })
         ] }),
         e && /* @__PURE__ */ t("div", { className: n.action, children: [
-          /* @__PURE__ */ a("span", { className: n.linkText, children: h }),
+          c && /* @__PURE__ */ a("span", { className: n.linkText, children: c }),
           e && /* @__PURE__ */ a(T, { name: e, className: n.linkIcon })
         ] })
       ]

package/dist/components/Searchbar/AutocompleteItem.js

@@ -4,9 +4,10 @@ import { ListItemLabel as s } from "../List/ListItemLabel.js";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../Icon/SvgIcon.js";
+import "../RootProvider/RootProvider.js";
 import '../../assets/AutocompleteItem.css';const c = "_item_1a3bc_1", n = {
   item: c
-}, u = ({ as: e = "a", label: t, active: i, ...o }) => /* @__PURE__ */ m(r, { className: n.item, as: e, size: "sm", active: i, linkIcon: "chevron-right", ...o, children: /* @__PURE__ */ m(s, { size: "sm", children: typeof t == "function" ? t() : t }) });
+}, L = ({ as: i = "a", label: t, active: o, ...e }) => /* @__PURE__ */ m(r, { className: n.item, as: i, size: "sm", active: o, linkIcon: "chevron-right", ...e, children: /* @__PURE__ */ m(s, { size: "sm", children: typeof t == "function" ? t() : t }) });
 export {
-  u as AutocompleteItem
+  L as AutocompleteItem
 };