@altinn/altinn-components 0.18.1 → 0.18.3

package/dist/components/AccessAreaList/AccessAreaList.js

@@ -1,12 +1,12 @@
-import { jsx as m } from "react/jsx-runtime";
-import { createElement as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
+import "react";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { AccessAreaListItem as i } from "./AccessAreaListItem.js";
+import { AccessAreaListItem as m } from "./AccessAreaListItem.js";
 import { ListBase as p } from "../List/ListBase.js";
-const l = ({ items: t, color: o }) => /* @__PURE__ */ m(p, { color: o, spacing: 1, children: t.map((r) => /* @__PURE__ */ e(i, { ...r, key: r.id, ...r })) });
+const d = ({ items: i, color: o }) => /* @__PURE__ */ t(p, { color: o, spacing: 1, children: i.map((r) => /* @__PURE__ */ t(m, { ...r }, r.id)) });
 export {
-  l as AccessAreaList
+  d as AccessAreaList
 };

package/dist/components/AccessAreaList/AccessAreaListItem.js

@@ -4,36 +4,43 @@ import "react";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { ListItem as a } from "../List/ListItem.js";
-import '../../assets/AccessAreaListItem.css';const b = "_content_7hk0i_1", d = {
-  content: b
-}, j = ({
+import { ListItem as b } from "../List/ListItem.js";
+import '../../assets/AccessAreaListItem.css';const d = "_content_7hk0i_1", f = {
+  content: d
+}, k = ({
   name: c,
   icon: m,
-  size: i = "md",
-  children: r,
+  iconUrl: i,
+  size: r = "md",
+  children: l,
   expanded: t = !1,
-  onClick: l,
-  badgeText: o,
-  colorTheme: e,
+  onClick: p,
+  badgeText: e,
+  colorTheme: o,
   loading: n,
-  ...p
+  ...a
 }) => /* @__PURE__ */ s(
-  a,
+  b,
   {
     as: "button",
-    icon: { svgElement: m, theme: "subtle", color: e },
+    icon: {
+      svgElement: m,
+      iconUrl: i,
+      theme: "subtle",
+      color: o,
+      altText: ""
+    },
     title: c,
-    size: i,
+    size: r,
     collapsible: !n,
     expanded: t,
-    onClick: l,
-    badge: o ? { label: o, color: e } : void 0,
+    onClick: p,
+    badge: e ? { label: e, color: o } : void 0,
     loading: n,
-    ...p,
-    children: t && /* @__PURE__ */ s("div", { className: d.content, children: r })
+    ...a,
+    children: t && /* @__PURE__ */ s("div", { className: f.content, children: l })
   }
 );
 export {
-  j as AccessAreaListItem
+  k as AccessAreaListItem
 };

package/dist/components/Icon/Icon.js

@@ -1,13 +1,22 @@
-import { jsx as o } from "react/jsx-runtime";
-import { c as i } from "../../index-L8X2o7IH.js";
+import { jsx as r } from "react/jsx-runtime";
+import { c as t } from "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { Skeleton as p } from "../Skeleton/Skeleton.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/Icon.css';const l = "_icon_3p8he_1", n = {
-  icon: l
-}, j = ({ loading: a, altText: c, svgElement: r, size: e, color: s, theme: m, className: t }) => r ? /* @__PURE__ */ o(p, { loading: a, variant: "circle", children: /* @__PURE__ */ o("span", { "data-size": e, "data-color": s, "data-theme": m, className: i([n.icon], t), children: /* @__PURE__ */ o(r, { "aria-hidden": "true", "alt-label": c }) }) }) : /* @__PURE__ */ o("span", { className: i([n.icon], t) });
+import '../../assets/Icon.css';const d = "_icon_3p8he_1", a = {
+  icon: d
+}, b = ({
+  loading: c,
+  altText: n,
+  svgElement: o,
+  size: e,
+  color: s,
+  theme: m,
+  iconUrl: l,
+  className: i
+}) => o ? /* @__PURE__ */ r(p, { loading: c, variant: "circle", children: /* @__PURE__ */ r("span", { "data-size": e, "data-color": s, "data-theme": m, className: t([a.icon], i), children: /* @__PURE__ */ r(o, { "aria-hidden": "true", "alt-label": n }) }) }) : l ? /* @__PURE__ */ r(p, { loading: c, variant: "circle", children: /* @__PURE__ */ r("span", { "data-size": e, "data-color": s, "data-theme": m, className: t([a.icon], i), children: /* @__PURE__ */ r("img", { src: l, alt: n, className: a.icon }) }) }) : /* @__PURE__ */ r("span", { className: t([a.icon], i) });
 export {
-  j as Icon
+  b as Icon
 };

package/dist/components/Icon/IconOrAvatar.js

@@ -1,5 +1,5 @@
-import { jsx as o } from "react/jsx-runtime";
-import { isValidElement as n } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { isValidElement as o } from "react";
 import { Icon as i } from "./Icon.js";
 import "../../index-L8X2o7IH.js";
 import { Avatar as s } from "../Avatar/Avatar.js";
@@ -8,17 +8,17 @@ import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 function u(r) {
-  return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || n(r);
+  return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || o(r);
 }
-const l = (r) => r.svgElement !== void 0, x = ({ size: r, icon: t, iconTheme: f, avatar: e, avatarGroup: m }) => {
-  if (!t && !e && !m)
+const d = (r) => r.svgElement !== void 0 || r.iconUrl !== void 0, x = ({ size: r, icon: e, iconTheme: f, avatar: t, avatarGroup: m }) => {
+  if (!e && !t && !m)
     return null;
-  if (t)
-    return l(t) ? /* @__PURE__ */ o(i, { theme: t.theme || f, size: t.size || r, ...t }) : u(t) ? t : /* @__PURE__ */ o(i, { svgElement: t, theme: f, size: r });
   if (e)
-    return /* @__PURE__ */ o(s, { ...e, size: e.size || r });
+    return d(e) ? /* @__PURE__ */ n(i, { theme: e.theme || f, size: e.size || r, ...e }) : u(e) ? e : /* @__PURE__ */ n(i, { svgElement: e, theme: f, size: r });
+  if (t)
+    return /* @__PURE__ */ n(s, { ...t, size: t.size || r });
   if (m)
-    return /* @__PURE__ */ o(p, { ...m, size: m.size || r });
+    return /* @__PURE__ */ n(p, { ...m, size: m.size || r });
 };
 export {
   x as IconOrAvatar

package/dist/components/Search/Autocomplete.js

@@ -1,44 +1,46 @@
 import { jsx as m } from "react/jsx-runtime";
-import { useRef as v, createElement as x } from "react";
+import { useRef as v, createElement as A } from "react";
 import "../../index-L8X2o7IH.js";
-import { useMenu as A } from "../../hooks/useMenu.js";
+import { useMenu as I } from "../../hooks/useMenu.js";
 import "../RootProvider/RootProvider.js";
-import { AutocompleteBase as I } from "./AutocompleteBase.js";
-import { AutocompleteGroup as l } from "./AutocompleteGroup.js";
+import { AutocompleteBase as l } from "./AutocompleteBase.js";
+import { AutocompleteGroup as x } from "./AutocompleteGroup.js";
 import { AutocompleteItem as h } from "./AutocompleteItem.js";
 import "../Snackbar/useSnackbar.js";
 import { useEnterKey as k } from "../../hooks/useEnterKey.js";
-const C = ({ className: u, items: s, groups: i = {}, expanded: n, onSelect: r }) => {
+const C = ({ className: s, items: i, groups: n = {}, expanded: u, onSelect: r }) => {
   const p = v(null);
   k(() => {
-    var e;
-    const t = (e = p.current) == null ? void 0 : e.querySelector('[data-active="true"]');
-    t == null || t.dispatchEvent(new MouseEvent("click", { bubbles: !0 })), r == null || r();
+    var t;
+    if (u) {
+      const e = (t = p.current) == null ? void 0 : t.querySelector('[data-active="true"]');
+      e == null || e.dispatchEvent(new MouseEvent("click", { bubbles: !0 })), r == null || r();
+    }
   });
-  const { menu: a, setActiveIndex: c } = A({
-    items: s,
-    groups: i,
+  const { menu: c, setActiveIndex: f } = I({
+    items: i,
+    groups: n,
     groupByKey: "groupId",
     keyboardEvents: !0
   });
-  return /* @__PURE__ */ m(I, { className: u, expanded: n, ref: p, children: a.map((t, e) => /* @__PURE__ */ x(l, { ...t.props, key: e }, /* @__PURE__ */ m("ul", { children: t.items.map((d, f) => {
+  return /* @__PURE__ */ m(l, { className: s, expanded: u, ref: p, children: c.map((t, e) => /* @__PURE__ */ A(x, { ...t.props, key: e }, /* @__PURE__ */ m("ul", { children: t.items.map((a, d) => {
     const {
       active: y,
       menuIndex: E,
       props: { groupId: M, onClick: o, ...b }
-    } = d;
+    } = a;
     return /* @__PURE__ */ m(
       h,
       {
         tabIndex: -1,
-        onMouseEnter: () => c(E),
+        onMouseEnter: () => f(E),
         ...b,
         onClick: () => {
           o == null || o(), r == null || r();
         },
         active: y
       },
-      f
+      d
     );
   }) }))) });
 };

package/dist/components/Toolbar/ToolbarAccountMenu.js

@@ -1,20 +1,34 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { jsxs as f, jsx as m } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { useRootContext as a } from "../RootProvider/RootProvider.js";
-import { ToolbarButton as d } from "./ToolbarButton.js";
-import { ToolbarFilterBase as f } from "./ToolbarFilterBase.js";
-import { DrawerOrDropdown as x } from "../Dropdown/DrawerOrDropdown.js";
-import { AccountMenu as T } from "../GlobalMenu/AccountMenu.js";
+import { useRootContext as n } from "../RootProvider/RootProvider.js";
+import { ToolbarButton as x } from "./ToolbarButton.js";
+import { ToolbarFilterBase as T } from "./ToolbarFilterBase.js";
+import { DrawerOrDropdown as b } from "../Dropdown/DrawerOrDropdown.js";
+import { AccountMenu as g } from "../GlobalMenu/AccountMenu.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const k = ({ currentAccount: o, id: t = "toolbar-accounts", ...m }) => {
-  const { currentId: i, toggleId: l, closeAll: p } = a(), s = () => l(t), e = i === t;
-  return /* @__PURE__ */ n(f, { expanded: e, children: [
-    /* @__PURE__ */ r(d, { type: "switch", onToggle: s, active: !!o, children: o == null ? void 0 : o.name }),
-    /* @__PURE__ */ r(x, { open: e, drawerTitle: "Endre konto", onClose: p, children: /* @__PURE__ */ r(T, { ...m, currentAccount: o }) })
+const y = ({
+  currentAccount: o,
+  id: i = "toolbar-accounts",
+  onSelectAccount: r,
+  ...e
+}) => {
+  const { currentId: s, toggleId: l, closeAll: p } = n(), a = () => l(i), t = s === i;
+  return /* @__PURE__ */ f(T, { expanded: t, children: [
+    /* @__PURE__ */ m(x, { type: "switch", onToggle: a, active: !!o, children: o == null ? void 0 : o.name }),
+    /* @__PURE__ */ m(b, { open: t, drawerTitle: "Endre konto", onClose: p, children: /* @__PURE__ */ m(
+      g,
+      {
+        ...e,
+        onSelectAccount: (d) => {
+          r == null || r(d), p();
+        },
+        currentAccount: o
+      }
+    ) })
   ] });
 };
 export {
-  k as ToolbarAccountMenu
+  y as ToolbarAccountMenu
 };

package/dist/types/lib/components/AccessAreaList/AccessAreaListItem.d.ts

@@ -1,13 +1,11 @@
 import { Color } from '../../types';
 import { SvgElement } from '../Icon';
 import { ListItemProps } from '../List';
-export interface AccessAreaListItemProps extends Pick<ListItemProps, 'size' | 'onClick' | 'expanded' | 'loading'> {
+interface AccessAreaListItemDefaultProps extends Pick<ListItemProps, 'size' | 'onClick' | 'expanded' | 'loading'> {
     /** Id of the item */
     id: string;
     /** Name of the Access Area */
     name: string;
-    /** The icon associated with the Access Area */
-    icon: SvgElement;
     /** Color theme of the Access Area */
     colorTheme?: Color;
     /** Optional Badge to display things like the number of packages a user has in the area */
@@ -15,4 +13,12 @@ export interface AccessAreaListItemProps extends Pick<ListItemProps, 'size' | 'o
     /** Children to render when the item is expanded */
     children?: React.ReactNode;
 }
-export declare const AccessAreaListItem: ({ name, icon, size, children, expanded, onClick, badgeText, colorTheme, loading, ...props }: AccessAreaListItemProps) => import("react/jsx-runtime").JSX.Element;
+export type AccessAreaListItemProps = (AccessAreaListItemDefaultProps & {
+    icon: SvgElement;
+    iconUrl?: never;
+}) | (AccessAreaListItemDefaultProps & {
+    iconUrl: string;
+    icon?: never;
+});
+export declare const AccessAreaListItem: ({ name, icon, iconUrl, size, children, expanded, onClick, badgeText, colorTheme, loading, ...props }: AccessAreaListItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/lib/components/AccessAreaList/AccessAreaListItem.stories.d.ts

@@ -1,15 +1,14 @@
 import { StoryObj } from '@storybook/react';
-import { default as React } from 'react';
 import { AccessAreaListItemProps } from './AccessAreaListItem';
 declare const meta: {
     title: string;
-    component: ({ name, icon, size, children, expanded, onClick, badgeText, colorTheme, loading, ...props }: AccessAreaListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ name, icon, iconUrl, size, children, expanded, onClick, badgeText, colorTheme, loading, ...props }: AccessAreaListItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     args: {
         id: string;
         size: "md";
         name: string;
-        icon: React.FC<React.SVGProps<SVGSVGElement>>;
+        iconUrl: string;
         badgeText: string;
         colorTheme: "company";
         loading: false;
@@ -26,11 +25,6 @@ declare const meta: {
                 type: "inline-radio";
             };
         };
-        icon: {
-            control: {
-                disable: true;
-            };
-        };
         colorTheme: {
             options: string[];
             control: {

package/dist/types/lib/components/Icon/Icon.d.ts

@@ -4,7 +4,8 @@ export type IconSize = Size | undefined;
 export type IconColor = Color;
 export type IconTheme = Theme;
 export interface IconProps {
-    svgElement: SvgElement | undefined | null | string;
+    svgElement?: SvgElement | undefined | null | string;
+    iconUrl?: string;
     altText?: string;
     loading?: boolean;
     size?: IconSize;
@@ -12,4 +13,4 @@ export interface IconProps {
     theme?: IconTheme;
     className?: string;
 }
-export declare const Icon: ({ loading, altText, svgElement: SvgElement, size, color, theme, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ loading, altText, svgElement: SvgElement, size, color, theme, iconUrl, className, }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Toolbar/Toolbar.stories.d.ts

@@ -19,3 +19,4 @@ export declare const HiddenFilters: Story;
 export declare const WithAccountMenu: Story;
 export declare const WithSearch: Story;
 export declare const ControlledStateFilters: (args: typeof Toolbar) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledStateAccount: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Toolbar/ToolbarAccountMenu.d.ts

@@ -2,4 +2,4 @@ import { AccountMenuProps } from '../';
 export interface ToolbarAccountMenuProps extends AccountMenuProps {
     id?: string;
 }
-export declare const ToolbarAccountMenu: ({ currentAccount, id, ...rest }: ToolbarAccountMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolbarAccountMenu: ({ currentAccount, id, onSelectAccount, ...rest }: ToolbarAccountMenuProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "main": "dist/index.js",
   "files": [
     "dist/",