@altinn/altinn-components 0.67.6 → 0.67.7

package/dist/assets/SnackbarBase.css

@@ -1 +1 @@
-._stack_ilsfl_1{position:fixed;inset:auto 0 0;display:flex;flex-direction:column;row-gap:.5rem;padding:1rem;pointer-events:none}._stack_ilsfl_1>*{pointer-events:auto}@media(min-width:1024px){._stack_ilsfl_1{align-items:center}}
+._stack_1q54g_1{inset:auto 0 0;width:100%;margin:0;border:none;padding:1rem;background:transparent;overflow:visible;display:flex;flex-direction:column;row-gap:.5rem;pointer-events:none}._stack_1q54g_1>*{pointer-events:auto}@media(min-width:1024px){._stack_1q54g_1{align-items:center}}

package/dist/components/Snackbar/Snackbar.js

@@ -1,27 +1,30 @@
 "use client";
-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,
+import { jsx as r } from "react/jsx-runtime";
+import { useRef as l, useEffect as d } from "react";
+import { SnackbarBase as u } from "./SnackbarBase.js";
+import { SnackbarItem as b } from "./SnackbarItem.js";
+import { useSnackbar as h } from "./useSnackbar.js";
+const S = 0.3, k = 0.4, w = ({ className: n }) => {
+  const { storedMessages: c, open: s, closeSnackbarItem: a } = h(), o = l(null);
+  d(() => {
+    const e = o.current;
+    e && (s ? e.showPopover() : e.matches(":popover-open") && e.hidePopover());
+  }, [s]);
+  const t = c || [], i = t.length - 1;
+  return /* @__PURE__ */ r(u, { ref: o, className: n, children: t.map((e, p) => {
+    const m = i - p, f = Math.max(k, 1 - m * S);
+    return /* @__PURE__ */ r(
+      b,
       {
-        onDismiss: () => a(s.id),
-        dismissable: s.dismissable,
-        style: { opacity: p },
-        ...s
+        onDismiss: () => a(e.id),
+        dismissable: e.dismissable,
+        style: { opacity: f },
+        ...e
       },
-      s.id
+      e.id
     );
   }) });
 };
 export {
-  y as Snackbar
+  w as Snackbar
 };

package/dist/components/Snackbar/SnackbarBase.js

@@ -1,7 +1,7 @@
-import { jsx as t } from "react/jsx-runtime";
-import '../../assets/SnackbarBase.css';const c = "_stack_ilsfl_1", a = {
+import { jsx as a } from "react/jsx-runtime";
+import '../../assets/SnackbarBase.css';const c = "_stack_1q54g_1", o = {
   stack: c
-}, e = ({ children: s }) => /* @__PURE__ */ t("section", { className: a.stack, children: s });
+}, n = ({ children: s, ref: t }) => /* @__PURE__ */ a("section", { ref: t, popover: "manual", className: o.stack, children: s });
 export {
-  e as SnackbarBase
+  n as SnackbarBase
 };

package/dist/components/Snackbar/SnackbarItem.js

@@ -1,59 +1,78 @@
 "use client";
-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-DyVcALSw.js";
-import a, { forwardRef as g } from "react";
+import { jsx as a, jsxs as v } from "react/jsx-runtime";
+import { c as h } from "../../index-p1eeF8LQ.js";
+import d, { forwardRef as _, useEffect as g } from "react";
+import { I as b, s as y } from "../../ToolbarSearch-DyVcALSw.js";
 import "../../tooltip-Ct39-719.js";
 import "../Typography/Link.js";
-import { Button as h } from "../Button/Button.js";
+import { Button as w } from "../Button/Button.js";
 import "react-dom";
 import "../GlobalMenu/GlobalMenuBase.js";
 import "./useSnackbar.js";
-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]);
+import { u as x } from "../../useId-BVFxCjkq.js";
+import '../../assets/SnackbarItem.css';var O = function(e, n) {
+  var i = {};
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && n.indexOf(t) < 0 && (i[t] = e[t]);
   if (e != null && typeof Object.getOwnPropertySymbols == "function")
     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;
+      n.indexOf(t[r]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[r]) && (i[t[r]] = e[t[r]]);
+  return i;
 };
-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(
+const I = _((e, n) => {
+  var { title: i, titleId: t } = e, r = O(e, ["title", "titleId"]);
+  let l = x();
+  return l = i ? t || "title-" + l : void 0, d.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: 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" })
+    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: n, "aria-labelledby": l }, r),
+    i ? d.createElement("title", { id: l }, i) : null,
+    d.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" })
   );
-}), 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
+}), j = "_item_18ro3_1", A = "_itemWrapper_18ro3_24", N = "_icon_18ro3_29", S = "_content_18ro3_39", B = "_action_18ro3_47", c = {
+  item: j,
+  itemWrapper: A,
+  icon: N,
+  content: S,
+  action: B
 };
-var B = /* @__PURE__ */ ((e) => (e.company = "company", e.success = "success", e.warning = "warning", e.danger = "danger", e.info = "info", e))(B || {});
-const X = ({
+var R = /* @__PURE__ */ ((e) => (e.company = "company", e.success = "success", e.warning = "warning", e.danger = "danger", e.info = "info", e))(R || {});
+const T = ({
   as: e,
-  message: o,
-  className: n,
+  message: n,
+  className: i,
   color: t,
-  icon: r = O,
+  icon: r = I,
   iconAltText: l = "Bell icon",
-  dismissable: s = !0,
+  dismissable: p = !0,
   onDismiss: m,
-  ...d
+  ...f
 }) => {
-  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" } }) }) })
+  const u = e || "div";
+  return g(() => {
+    if (!n)
+      return;
+    const s = document.querySelector("dialog[open]");
+    if (!s)
+      return;
+    let o = s.querySelector("[data-snackbar-live]");
+    o || (o = document.createElement("div"), o.setAttribute("data-snackbar-live", ""), o.setAttribute("aria-live", "polite"), o.setAttribute("aria-atomic", "true"), Object.assign(o.style, {
+      position: "absolute",
+      width: "1px",
+      height: "1px",
+      padding: "0",
+      overflow: "hidden",
+      clip: "rect(0,0,0,0)",
+      whiteSpace: "nowrap",
+      border: "0"
+    }), s.appendChild(o)), o.textContent = "", requestAnimationFrame(() => {
+      o.textContent = n;
+    });
+  }, [n]), /* @__PURE__ */ a("span", { className: c.itemWrapper, children: /* @__PURE__ */ v(u, { className: h(c.item, i), "data-color": t, role: "alert", ...f, children: [
+    /* @__PURE__ */ a(b, { svgElement: r, className: c.icon, "aria-hidden": "true" }),
+    /* @__PURE__ */ a("div", { className: c.content, children: n }),
+    p && /* @__PURE__ */ a("div", { className: c.action, children: /* @__PURE__ */ a(w, { variant: "solid", onClick: m, "aria-label": "close", children: /* @__PURE__ */ a(y, { style: { fontSize: "1.5em" } }) }) })
   ] }) });
 };
 export {
-  B as SnackbarColorEnum,
-  X as SnackbarItem
+  R as SnackbarColorEnum,
+  T as SnackbarItem
 };

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

@@ -2,4 +2,4 @@ export interface SnackbarProps {
     /** Optional classname */
     className?: string;
 }
-export declare const Snackbar: ({ className }: SnackbarProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Snackbar: ({ className }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: ({ className }: import('./Snackbar.tsx').SnackbarProps) => import("react/jsx-runtime").JSX.Element | null;
+    component: ({ className }: import('./Snackbar.tsx').SnackbarProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {};

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

@@ -1,8 +1,9 @@
-import { ReactNode } from 'react';
+import { ReactNode, Ref } from 'react';
 export interface SnackbarBaseProps {
     /** Optional classname */
     className?: string;
     /** Children */
     children: string | ReactNode;
+    ref?: Ref<HTMLElement>;
 }
-export declare const SnackbarBase: ({ children }: SnackbarBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SnackbarBase: ({ children, ref }: SnackbarBaseProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

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