@altinn/altinn-components 0.64.1 → 0.65.0

package/dist/assets/SnackbarItem.css

@@ -1 +1 @@
-._item_1a13i_1{border:none;color:inherit;font:inherit;text-align:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-user-select:none;user-select:none;border-radius:.5rem;box-shadow:var(--ds-shadow-xs)}._item_1a13i_1{position:relative;display:flex;align-items:center;text-decoration:none;color:inherit;padding:.625rem}._icon_1a13i_23{flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;width:2.75rem;height:2.75rem}._content_1a13i_33{flex-grow:1;display:flex;align-items:center;margin-left:.625rem;margin-right:1.25rem}._action_1a13i_41{flex-shrink:0;display:flex;align-items:center;justify-content:center}._item_1a13i_1{background-color:var(--ds-color-base-default);color:var(--ds-color-base-contrast-default)}
+._item_18ro3_1{border:none;color:inherit;font:inherit;text-align:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-user-select:none;user-select:none;border-radius:.5rem;box-shadow:var(--ds-shadow-xs);transition:opacity .2s ease}._item_18ro3_1{position:relative;display:flex;align-items:center;text-decoration:none;color:inherit;padding:.625rem}._itemWrapper_18ro3_24{background:#fff;border-radius:.5rem}._icon_18ro3_29{flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;width:2.75rem;height:2.75rem}._content_18ro3_39{flex-grow:1;display:flex;align-items:center;margin-left:.625rem;margin-right:1.25rem}._action_18ro3_47{flex-shrink:0;display:flex;align-items:center;justify-content:center}._item_18ro3_1{background-color:var(--ds-color-base-default);color:var(--ds-color-base-contrast-default)}

package/dist/components/ResourceListItem/ResourceListItem.js

@@ -1,36 +1,47 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsxs as d, Fragment as f, jsx as o } from "react/jsx-runtime";
+import { B as g } from "../../ToolbarSearch-DeQTx93w.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../../tooltip-Ct39-719.js";
-import "../../ToolbarSearch-DeQTx93w.js";
 import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../GlobalMenu/GlobalMenuBase.js";
 import "../Snackbar/useSnackbar.js";
-import { ListItem as c } from "../List/ListItem.js";
-const L = ({
+import { ListItem as h } from "../List/ListItem.js";
+const F = ({
   ownerName: t,
   resourceName: i,
-  ownerLogoUrlAlt: r,
-  ownerLogoUrl: m,
-  description: o,
-  titleAs: p = "h3",
-  ...e
-}) => /* @__PURE__ */ s(
-  c,
-  {
-    icon: {
-      name: t,
-      imageUrl: m,
-      imageUrlAlt: r,
-      type: "company"
-    },
-    title: { children: i, as: p },
-    description: o ?? t,
-    ...e
-  }
-);
+  ownerLogoUrlAlt: e,
+  ownerLogoUrl: p,
+  description: n,
+  titleAs: s = "h3",
+  titleBadge: r,
+  size: l,
+  loading: m,
+  ...c
+}) => {
+  const a = r && !m ? /* @__PURE__ */ d(f, { children: [
+    i,
+    /* @__PURE__ */ o(g, { ...r, style: { marginLeft: "0.5em", verticalAlign: "middle" } })
+  ] }) : i;
+  return /* @__PURE__ */ o(
+    h,
+    {
+      icon: {
+        name: t,
+        imageUrl: p,
+        imageUrlAlt: e,
+        type: "company"
+      },
+      title: { children: a, as: s },
+      description: n ?? t,
+      size: l,
+      loading: m,
+      ...c
+    }
+  );
+};
 export {
-  L as ResourceListItem
+  F as ResourceListItem
 };

package/dist/components/Snackbar/Snackbar.js

@@ -1,20 +1,27 @@
 "use client";
-import { jsx as s } from "react/jsx-runtime";
-import { SnackbarBase as i } from "./SnackbarBase.js";
-import { SnackbarItem as m } from "./SnackbarItem.js";
-import { useSnackbar as c } from "./useSnackbar.js";
-const d = ({ className: a }) => {
-  const { storedMessages: o, open: e, closeSnackbarItem: n } = c();
-  return e ? /* @__PURE__ */ s(i, { className: a, children: (o || []).map((r) => /* @__PURE__ */ s(
-    m,
-    {
-      onDismiss: () => n(r.id),
-      dismissable: r.dismissable,
-      ...r
-    },
-    r.id
-  )) }) : null;
+import { jsx as n } from "react/jsx-runtime";
+import { SnackbarBase as l } from "./SnackbarBase.js";
+import { SnackbarItem as d } from "./SnackbarItem.js";
+import { useSnackbar as b } from "./useSnackbar.js";
+const u = 0.3, S = 0.4, y = ({ className: e }) => {
+  const { storedMessages: o, open: r, closeSnackbarItem: a } = b();
+  if (!r)
+    return null;
+  const t = o || [], c = t.length - 1;
+  return /* @__PURE__ */ n(l, { className: e, children: t.map((s, i) => {
+    const m = c - i, p = Math.max(S, 1 - m * u);
+    return /* @__PURE__ */ n(
+      d,
+      {
+        onDismiss: () => a(s.id),
+        dismissable: s.dismissable,
+        style: { opacity: p },
+        ...s
+      },
+      s.id
+    );
+  }) });
 };
 export {
-  d as Snackbar
+  y as Snackbar
 };

package/dist/components/Snackbar/SnackbarItem.js

@@ -1,55 +1,59 @@
 "use client";
-import { jsxs as f, jsx as l } from "react/jsx-runtime";
-import { c as p } from "../../index-p1eeF8LQ.js";
-import { I as u, s as v } from "../../ToolbarSearch-DeQTx93w.js";
-import a, { forwardRef as _ } from "react";
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import { c as u } from "../../index-p1eeF8LQ.js";
+import { I as v, s as _ } from "../../ToolbarSearch-DeQTx93w.js";
+import a, { forwardRef as g } from "react";
 import "../../tooltip-Ct39-719.js";
 import "../Typography/Link.js";
-import { Button as g } from "../Button/Button.js";
+import { Button as h } from "../Button/Button.js";
 import "react-dom";
 import "../GlobalMenu/GlobalMenuBase.js";
 import "./useSnackbar.js";
-import { u as h } from "../../useId-BVFxCjkq.js";
-import '../../assets/SnackbarItem.css';var y = function(e, i) {
-  var o = {};
-  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && i.indexOf(t) < 0 && (o[t] = e[t]);
+import { u as y } from "../../useId-BVFxCjkq.js";
+import '../../assets/SnackbarItem.css';var w = function(e, o) {
+  var n = {};
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && o.indexOf(t) < 0 && (n[t] = e[t]);
   if (e != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var n = 0, t = Object.getOwnPropertySymbols(e); n < t.length; n++)
-      i.indexOf(t[n]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[n]) && (o[t[n]] = e[t[n]]);
-  return o;
+    for (var r = 0, t = Object.getOwnPropertySymbols(e); r < t.length; r++)
+      o.indexOf(t[r]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[r]) && (n[t[r]] = e[t[r]]);
+  return n;
 };
-const w = _((e, i) => {
-  var { title: o, titleId: t } = e, n = y(e, ["title", "titleId"]);
-  let r = h();
-  return r = o ? t || "title-" + r : void 0, a.createElement(
+const O = g((e, o) => {
+  var { title: n, titleId: t } = e, r = w(e, ["title", "titleId"]);
+  let l = y();
+  return l = n ? t || "title-" + l : void 0, a.createElement(
     "svg",
-    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: i, "aria-labelledby": r }, n),
-    o ? a.createElement("title", { id: r }, o) : null,
+    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: o, "aria-labelledby": l }, r),
+    n ? a.createElement("title", { id: l }, n) : null,
     a.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M12.75 2.5a.75.75 0 0 0-1.5 0v1.273c-2.222.14-3.655.92-4.499 2.186-.887 1.33-1.001 3.04-1.001 4.541v3c0 .809-.424 1.92-.92 2.915a18 18 0 0 1-.936 1.641l-.014.022-.004.006A.75.75 0 0 0 4.5 19.25h4.338a3.25 3.25 0 0 0 6.324 0H19.5a.75.75 0 0 0 .624-1.166l-.004-.006-.014-.022-.06-.091c-.05-.081-.125-.2-.215-.35-.18-.301-.42-.722-.66-1.2-.497-.994-.921-2.106-.921-2.915v-3c0-1.501-.114-3.21-1.001-4.541-.844-1.266-2.277-2.046-4.499-2.186zm-1.987 17.237a1.8 1.8 0 0 1-.344-.487h3.162a1.75 1.75 0 0 1-1.581 1 1.75 1.75 0 0 1-1.237-.513", clipRule: "evenodd" })
   );
-}), O = "_item_1a13i_1", b = "_icon_1a13i_23", x = "_content_1a13i_33", I = "_action_1a13i_41", c = {
-  item: O,
-  icon: b,
-  content: x,
-  action: I
+}), b = "_item_18ro3_1", x = "_itemWrapper_18ro3_24", I = "_icon_18ro3_29", j = "_content_18ro3_39", N = "_action_18ro3_47", c = {
+  item: b,
+  itemWrapper: x,
+  icon: I,
+  content: j,
+  action: N
 };
-var j = /* @__PURE__ */ ((e) => (e.company = "company", e.success = "success", e.warning = "warning", e.danger = "danger", e.info = "info", e))(j || {});
+var B = /* @__PURE__ */ ((e) => (e.company = "company", e.success = "success", e.warning = "warning", e.danger = "danger", e.info = "info", e))(B || {});
 const X = ({
   as: e,
-  message: i,
-  className: o,
+  message: o,
+  className: n,
   color: t,
-  icon: n = w,
-  iconAltText: r = "Bell icon",
+  icon: r = O,
+  iconAltText: l = "Bell icon",
   dismissable: s = !0,
   onDismiss: m,
   ...d
-}) => /* @__PURE__ */ f(e || "div", { className: p(c.item, o), "data-color": t, role: "alert", ...d, children: [
-  /* @__PURE__ */ l(u, { svgElement: n, className: c.icon, "aria-hidden": "true" }),
-  /* @__PURE__ */ l("div", { className: c.content, children: i }),
-  s && /* @__PURE__ */ l("div", { className: c.action, children: /* @__PURE__ */ l(g, { variant: "solid", onClick: m, "aria-label": "close", children: /* @__PURE__ */ l(v, { style: { fontSize: "1.5em" } }) }) })
-] });
+}) => {
+  const p = e || "div";
+  return /* @__PURE__ */ i("span", { className: c.itemWrapper, children: /* @__PURE__ */ f(p, { className: u(c.item, n), "data-color": t, role: "alert", ...d, children: [
+    /* @__PURE__ */ i(v, { svgElement: r, className: c.icon, "aria-hidden": "true" }),
+    /* @__PURE__ */ i("div", { className: c.content, children: o }),
+    s && /* @__PURE__ */ i("div", { className: c.action, children: /* @__PURE__ */ i(h, { variant: "solid", onClick: m, "aria-label": "close", children: /* @__PURE__ */ i(_, { style: { fontSize: "1.5em" } }) }) })
+  ] }) });
+};
 export {
-  j as SnackbarColorEnum,
+  B as SnackbarColorEnum,
   X as SnackbarItem
 };

package/dist/components/Snackbar/useSnackbar.js

@@ -1,47 +1,53 @@
 "use client";
 import { jsx as v } from "react/jsx-runtime";
-import { createContext as h, useState as a, useRef as x, useCallback as b, useEffect as w, useContext as M } from "react";
-var C = /* @__PURE__ */ ((e) => (e[e.infinite = 0] = "infinite", e[e.short = 1e3] = "short", e[e.normal = 3e3] = "normal", e[e.long = 5e3] = "long", e))(C || {});
-const l = h(void 0), d = 3e3, P = ({ children: e }) => {
-  const [f, o] = a(!1), [i, c] = a([]), r = x(null), m = () => {
-    c([]), o(!1), r.current && clearTimeout(r.current);
-  }, g = (t) => {
+import { createContext as x, useState as d, useRef as M, useCallback as b, useEffect as w, useContext as C } from "react";
+var S = /* @__PURE__ */ ((e) => (e[e.infinite = 0] = "infinite", e[e.short = 1e3] = "short", e[e.normal = 3e3] = "normal", e[e.long = 5e3] = "long", e))(S || {});
+const g = x(void 0), f = 3e3, T = 3, E = ({
+  children: e,
+  maxSnacks: l = T
+}) => {
+  const [m, c] = d(!1), [i, u] = d([]), o = M(null), h = () => {
+    u([]), c(!1), o.current && clearTimeout(o.current);
+  }, p = (t) => {
     const s = btoa(String(Math.random())).substring(0, 12);
-    return c((n) => [...n, { ...t, id: s }]), o(!0), s;
-  }, u = b((t) => {
-    c((s) => {
-      const n = s.filter((p) => p.id !== t);
-      return o(n.length > 0), n;
+    return u((n) => {
+      const r = [...n, { ...t, id: s }];
+      return r.length > l ? r.slice(r.length - l) : r;
+    }), c(!0), s;
+  }, a = b((t) => {
+    u((s) => {
+      const n = s.filter((r) => r.id !== t);
+      return c(n.length > 0), n;
     });
   }, []);
   return w(() => {
-    const t = i.find((n) => (n.duration ?? d) > 0), s = t?.duration || d;
-    return t && (r.current = window.setTimeout(() => {
-      u(t.id);
+    const t = i.find((n) => (n.duration ?? f) > 0), s = t?.duration || f;
+    return t && (o.current = window.setTimeout(() => {
+      a(t.id);
     }, s)), () => {
-      r.current && clearTimeout(r.current);
+      o.current && clearTimeout(o.current);
     };
-  }, [i, u]), /* @__PURE__ */ v(
-    l.Provider,
+  }, [i, a]), /* @__PURE__ */ v(
+    g.Provider,
     {
       value: {
-        open: f,
+        open: m,
         storedMessages: i,
-        openSnackbar: g,
-        closeSnackbarItem: u,
-        dismissSnackbar: m
+        openSnackbar: p,
+        closeSnackbarItem: a,
+        dismissSnackbar: h
       },
       children: e
     }
   );
-}, k = () => {
-  const e = M(l);
+}, I = () => {
+  const e = C(g);
   if (!e)
     throw new Error("useSnackbar must be used within a SnackbarProvider");
   return e;
 };
 export {
-  C as SnackbarDuration,
-  P as SnackbarProvider,
-  k as useSnackbar
+  S as SnackbarDuration,
+  E as SnackbarProvider,
+  I as useSnackbar
 };

package/dist/types/lib/components/Forms/EmailValidation.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react-vite';
+interface EmailDetailsProps {
+    /** Saved email for the account, if any. */
+    email?: string;
+}
+declare const meta: {
+    title: string;
+    component: ({ email }: EmailDetailsProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** Empty field — shows the neutral info hint, prompts to verify once valid. */
+export declare const Empty: Story;

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

@@ -15,7 +15,9 @@ export interface ResourceListItemProps extends Pick<ListItemProps, 'size' | 'con
     description?: string;
     /** Badge properties for the resource item (optional) */
     badge?: BadgeProps;
+    /** Badge displayed inline next to the title */
+    titleBadge?: BadgeProps;
     /** Title element for the resource item (optional) */
     titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
 }
-export declare const ResourceListItem: ({ ownerName, resourceName, ownerLogoUrlAlt, ownerLogoUrl, description, titleAs, ...props }: ResourceListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ResourceListItem: ({ ownerName, resourceName, ownerLogoUrlAlt, ownerLogoUrl, description, titleAs, titleBadge, size, loading, ...props }: ResourceListItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ ownerName, resourceName, ownerLogoUrlAlt, ownerLogoUrl, description, titleAs, ...props }: import('./ResourceListItem').ResourceListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ ownerName, resourceName, ownerLogoUrlAlt, ownerLogoUrl, description, titleAs, titleBadge, size, loading, ...props }: import('./ResourceListItem').ResourceListItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -15,6 +15,7 @@ declare const meta: {
         border: "none";
         as: "div";
         titleAs: "h3";
+        titleBadge: undefined;
     };
     argTypes: {
         size: {
@@ -58,4 +59,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const TitleBadge: Story;
 export declare const ListOfResources: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Snackbar/SnackbarItem.d.ts

@@ -1,4 +1,4 @@
-import { ElementType, ReactNode } from 'react';
+import { CSSProperties, ElementType, ReactNode } from 'react';
 import { SvgElement } from '..';
 export declare enum SnackbarColorEnum {
     company = "company",
@@ -16,6 +16,7 @@ export interface SnackbarItemProps {
     iconAltText?: string;
     href?: string;
     className?: string;
+    style?: CSSProperties;
     dismissable?: boolean;
     onDismiss?: () => void;
     children?: ReactNode;

package/dist/types/lib/components/Snackbar/useSnackbar.d.ts

@@ -34,6 +34,7 @@ interface SnackbarContextValue {
 }
 export declare const SnackbarProvider: React.FC<{
     children: React.ReactNode;
+    maxSnacks?: number;
 }>;
 export declare const useSnackbar: () => SnackbarContextValue;
 export {};

package/dist/types/lib/stories/Color.stories.d.ts

@@ -8,7 +8,7 @@ declare const meta: {
 };
 export default meta;
 interface DesignToken {
-    $type?: "color" | string;
+    $type?: 'color' | string;
     $value: string;
     $description?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.64.1",
+  "version": "0.65.0",
   "main": "dist/index.js",
   "files": [
     "dist/",
@@ -48,7 +48,7 @@
     "@vitest/browser-playwright": "4.0.16",
     "@vitest/coverage-v8": "^4.1.3",
     "axe-core": "^4.10.3",
-    "axe-playwright": "^2.1.0",
+    "axe-playwright": "^2.2.2",
     "glob": "^13.0.6",
     "lint-staged": "^15.5.2",
     "pixelmatch": "^7.1.0",