@altinn/altinn-components 0.18.0 → 0.18.2

package/dist/assets/MenuOption.css

@@ -1 +1 @@
-._label_cv7w3_1{padding-left:6px}._input_cv7w3_5{position:absolute;opacity:0}._icon_cv7w3_10{flex-shrink:0;font-size:1rem;display:flex;align-items:center;justify-content:center}._icon_cv7w3_10{color:var(--ds-color-base-default)}._icon_cv7w3_10 [data-hover=true]{opacity:0}._label_cv7w3_1:hover [data-hover=true]{opacity:1}
+._base_igy0i_1{padding-left:6px}._base_igy0i_1:hover [data-hover=true]{opacity:1}._label_igy0i_9{display:block;white-space:nowrap;text-overflow:ellipsis;width:max-content;overflow:hidden;max-width:240px}._input_igy0i_18{position:absolute;opacity:0}._icon_igy0i_23{flex-shrink:0;font-size:1rem;display:flex;align-items:center;justify-content:center}._icon_igy0i_23{color:var(--ds-color-base-default)}._icon_igy0i_23 [data-hover=true]{opacity:0}

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/Dropdown/DrawerBase.js

@@ -1,18 +1,18 @@
 import { jsx as d } from "react/jsx-runtime";
-import { c as s } from "../../index-L8X2o7IH.js";
-import '../../assets/DrawerBase.css';const o = "_drawer_vej3t_1", n = {
-  drawer: o
-}, m = ({ placement: a = "inline", open: e = !1, className: r, children: t }) => /* @__PURE__ */ d(
+import { c as o } from "../../index-L8X2o7IH.js";
+import '../../assets/DrawerBase.css';const s = "_drawer_vej3t_1", c = {
+  drawer: s
+}, l = ({ placement: a = "inline", open: e = !1, className: r, children: t }) => /* @__PURE__ */ d(
   "div",
   {
-    className: s(n.drawer, r),
+    className: o(c.drawer, r),
     "data-placement": a,
     "data-theme": "default",
-    "data-color": "neutral",
+    "data-color": "company",
     "data-expanded": e,
     children: t
   }
 );
 export {
-  m as DrawerBase
+  l as DrawerBase
 };

package/dist/components/Dropdown/DropdownBase.js

@@ -9,8 +9,8 @@ import '../../assets/DropdownBase.css';const l = "_dropdown_1hh2v_1", u = "_draw
 }, x = ({
   placement: t = "left",
   padding: d = !0,
-  open: r = !1,
-  className: a,
+  open: a = !1,
+  className: r,
   children: e,
   onClose: n
 }) => {
@@ -19,14 +19,14 @@ import '../../assets/DropdownBase.css';const l = "_dropdown_1hh2v_1", u = "_draw
     "div",
     {
       ref: o,
-      className: m(w.dropdown, a),
+      className: m(w.dropdown, r),
       "data-theme": "default",
-      "data-color": "neutral",
+      "data-color": "company",
       "data-shadow": "md",
       "data-placement": t,
       "data-padding": d,
       role: "menu",
-      "data-expanded": r,
+      "data-expanded": a,
       children: e
     }
   );

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/Menu/MenuItemLabel.js

@@ -1,12 +1,13 @@
-import { jsx as t, jsxs as c, Fragment as r } from "react/jsx-runtime";
-import '../../assets/MenuItemLabel.css';const o = "_label_1ejxp_1", p = "_title_1ejxp_7", d = "_description_1ejxp_25", s = {
-  label: o,
-  title: p,
-  description: d
-}, m = ({ size: e = "sm", label: l, title: n, description: i, children: a }) => /* @__PURE__ */ t("span", { className: s.label, "data-size": e, children: a || /* @__PURE__ */ c(r, { children: [
-  /* @__PURE__ */ t("strong", { className: s.title, "data-size": e, children: n || l }),
-  /* @__PURE__ */ t("span", { className: s.description, "data-size": e, children: i })
+import { jsx as t, jsxs as r, Fragment as o } from "react/jsx-runtime";
+import { c as p } from "../../index-L8X2o7IH.js";
+import '../../assets/MenuItemLabel.css';const d = "_label_1ejxp_1", m = "_title_1ejxp_7", _ = "_description_1ejxp_25", s = {
+  label: d,
+  title: m,
+  description: _
+}, j = ({ className: l, size: e = "sm", label: i, title: n, description: c, children: a }) => /* @__PURE__ */ t("span", { className: p(s.label, l), "data-size": e, children: a || /* @__PURE__ */ r(o, { children: [
+  /* @__PURE__ */ t("strong", { className: s.title, "data-size": e, children: n || i }),
+  /* @__PURE__ */ t("span", { className: s.description, "data-size": e, children: c })
 ] }) });
 export {
-  m as MenuItemLabel
+  j as MenuItemLabel
 };

package/dist/components/Menu/MenuOption.js

@@ -1,45 +1,46 @@
-import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { MenuItemBase as f } from "./MenuItemBase.js";
-import { MenuItemLabel as v } from "./MenuItemLabel.js";
+import { MenuItemLabel as x } from "./MenuItemLabel.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { CheckboxIcon as x } from "../Icon/CheckboxIcon.js";
-import { RadioIcon as I } from "../Icon/RadioIcon.js";
-import '../../assets/MenuOption.css';const N = "_label_cv7w3_1", d = "_input_cv7w3_5", h = "_icon_cv7w3_10", r = {
-  label: N,
-  input: d,
-  icon: h
+import { CheckboxIcon as N } from "../Icon/CheckboxIcon.js";
+import { RadioIcon as g } from "../Icon/RadioIcon.js";
+import '../../assets/MenuOption.css';const I = "_base_igy0i_1", d = "_label_igy0i_9", h = "_input_igy0i_18", y = "_icon_igy0i_23", o = {
+  base: I,
+  label: d,
+  input: h,
+  icon: y
 }, A = ({
-  size: n = "md",
-  type: i,
-  name: e,
-  value: m,
-  label: s,
-  title: l,
-  description: a,
+  size: e = "md",
+  type: t,
+  name: a,
+  value: n,
+  label: r,
+  title: m,
+  description: l,
   badge: c,
-  checked: o = !1,
+  checked: i = !1,
   disabled: p,
-  onChange: u,
+  onChange: b,
   ..._
-}) => /* @__PURE__ */ b(
+}) => /* @__PURE__ */ u(
   f,
   {
-    className: r.label,
+    className: o.base,
     disabled: p,
-    selected: o,
-    size: n,
+    selected: i,
+    size: e,
     badge: c,
     as: "label",
     ..._,
     children: [
-      /* @__PURE__ */ t("input", { className: r.input, name: e, value: m, type: i, checked: o, onChange: u }),
-      i === "checkbox" && /* @__PURE__ */ t(x, { checked: o, hover: !0, className: r.icon }),
-      i === "radio" && /* @__PURE__ */ t(I, { checked: o, hover: !0, className: r.icon }),
-      /* @__PURE__ */ t(v, { title: l, description: a, size: n, children: s })
+      /* @__PURE__ */ s("input", { className: o.input, name: a, value: n, type: t, checked: i, onChange: b }),
+      t === "checkbox" && /* @__PURE__ */ s(N, { checked: i, hover: !0, className: o.icon }),
+      t === "radio" && /* @__PURE__ */ s(g, { checked: i, hover: !0, className: o.icon }),
+      /* @__PURE__ */ s(x, { className: o.label, title: m, description: l, size: e, children: r })
     ]
   }
 );

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/List/ListBase.stories.d.ts

@@ -8,5 +8,5 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Interactive: Story;
-export declare const NonIteractive: Story;
+export declare const Default: Story;
+export declare const NonInteractive: Story;

package/dist/types/lib/components/Menu/MenuItemLabel.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
 import { MenuItemSize } from './MenuItemBase';
 export interface MenuItemLabelProps {
+    className?: string;
     size?: MenuItemSize;
     label?: string;
     title?: string;
     description?: string;
     children?: ReactNode;
 }
-export declare const MenuItemLabel: ({ size, label, title, description, children }: MenuItemLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItemLabel: ({ className, size, label, title, description, children }: MenuItemLabelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -9,6 +9,9 @@ declare const meta: {
         options: {
             label: string;
             value: string;
+            badge: {
+                label: string;
+            };
         }[];
     };
 };

package/package.json

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