@altinn/altinn-components 0.67.1 → 0.67.3

package/dist/assets/Tooltip.css

@@ -1 +1 @@
-._tooltip_10ebf_1{padding:.5em}._tooltip_10ebf_1[aria-hidden=true]{display:none}
+._tooltip_t2itc_1{padding:.5em}

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,81 +1,91 @@
 "use client";
 import { jsx as a } from "react/jsx-runtime";
-import u, { forwardRef as c, useMemo as f } from "react";
-import { Button as g } from "../Button/Button.js";
+import s, { forwardRef as v, useRef as O, useEffect as h, useMemo as w } from "react";
+import { Button as y } from "../Button/Button.js";
 import "../../index-p1eeF8LQ.js";
 import "../../tooltip-Ct39-719.js";
-import { w as h, g as b, M as x } from "../../ToolbarSearch-bv2opbAj.js";
+import { w as x, g as C, M as R } from "../../ToolbarSearch-bv2opbAj.js";
 import "../Typography/Link.js";
-import { Tooltip as v } from "../Tooltip/Tooltip.js";
+import { Tooltip as I } from "../Tooltip/Tooltip.js";
 import "../GlobalMenu/GlobalMenuBase.js";
 import "../Snackbar/useSnackbar.js";
-import { useDropdownMenuController as w } from "../Menu/useDropdownMenuController.js";
-import { u as y } from "../../useId-BVFxCjkq.js";
-var O = function(t, i) {
-  var r = {};
-  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && i.indexOf(e) < 0 && (r[e] = t[e]);
-  if (t != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var o = 0, e = Object.getOwnPropertySymbols(t); o < e.length; o++)
-      i.indexOf(e[o]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[o]) && (r[e[o]] = t[e[o]]);
-  return r;
+import { useDropdownMenuController as M } from "../Menu/useDropdownMenuController.js";
+import { u as A } from "../../useId-BVFxCjkq.js";
+var E = function(r, i) {
+  var o = {};
+  for (var t in r) Object.prototype.hasOwnProperty.call(r, t) && i.indexOf(t) < 0 && (o[t] = r[t]);
+  if (r != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var n = 0, t = Object.getOwnPropertySymbols(r); n < t.length; n++)
+      i.indexOf(t[n]) < 0 && Object.prototype.propertyIsEnumerable.call(r, t[n]) && (o[t[n]] = r[t[n]]);
+  return o;
 };
-const C = c((t, i) => {
-  var { title: r, titleId: e } = t, o = O(t, ["title", "titleId"]);
-  let l = y();
-  return l = r ? e || "title-" + l : void 0, u.createElement(
+const j = v((r, i) => {
+  var { title: o, titleId: t } = r, n = E(r, ["title", "titleId"]);
+  let l = A();
+  return l = o ? t || "title-" + l : void 0, s.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": l }, o),
-    r ? u.createElement("title", { id: l }, r) : null,
-    u.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M6 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m4.5 1.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0m6 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0", 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: i, "aria-labelledby": l }, n),
+    o ? s.createElement("title", { id: l }, o) : null,
+    s.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M6 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m4.5 1.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0m6 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0", clipRule: "evenodd" })
   );
-}), F = ({
-  groups: t = {},
+}), G = ({
+  groups: r = {},
   items: i,
-  title: r,
-  color: e,
-  id: o = "context-menu",
+  title: o,
+  color: t,
+  id: n = "context-menu",
   placement: l = "right",
-  "aria-label": p
+  "aria-label": m
 }) => {
-  const n = w({ id: o, returnFocusOnClose: !0 }), { languageCode: d } = h(), m = f(() => i.map((s) => ({
-    ...s,
+  const e = M({ id: n, returnFocusOnClose: !0 }), { languageCode: f } = x(), c = O(e.open);
+  h(() => {
+    const u = c.current;
+    if (c.current = e.open, !u || e.open) return;
+    const p = e.triggerRef.current, d = p?.getAttribute("data-tooltip");
+    if (!p || d == null) return;
+    p.removeAttribute("data-tooltip");
+    const b = requestAnimationFrame(() => p.setAttribute("data-tooltip", d));
+    return () => cancelAnimationFrame(b);
+  }, [e.open, e.triggerRef]);
+  const g = w(() => i.map((u) => ({
+    ...u,
     onClick: () => {
-      n.setOpen(!1), s.onClick?.();
+      e.setOpen(!1), u.onClick?.();
     }
-  })), [i, n]);
+  })), [i, e]);
   return /* @__PURE__ */ a(
-    b,
+    C,
     {
       backdrop: !1,
-      color: e,
-      trigger: /* @__PURE__ */ a(() => /* @__PURE__ */ a(v, { content: r || M(d).title, hidden: n.open, children: /* @__PURE__ */ a(
-        g,
+      color: t,
+      trigger: /* @__PURE__ */ a(I, { content: e.open ? "" : o || P(f).title, children: /* @__PURE__ */ a(
+        y,
         {
-          ref: n.triggerRef,
+          ref: e.triggerRef,
           icon: !0,
           variant: "ghost",
           rounded: !0,
           size: "xs",
-          "aria-label": p,
-          onClick: () => n.toggleMenu(),
+          "aria-label": m,
+          onClick: () => e.toggleMenu(),
           "aria-haspopup": "menu",
-          "aria-expanded": n.open,
-          "aria-controls": n.open ? n.menuId : void 0,
-          color: e,
-          children: /* @__PURE__ */ a(C, { "aria-hidden": "true" })
+          "aria-expanded": e.open,
+          "aria-controls": e.open ? e.menuId : void 0,
+          color: t,
+          children: /* @__PURE__ */ a(j, { "aria-hidden": "true" })
         }
-      ) }), {}),
-      open: n.open,
-      onClose: () => n.setOpen(!1),
-      id: n.menuId,
+      ) }),
+      open: e.open,
+      onClose: () => e.setOpen(!1),
+      id: e.menuId,
       placement: l,
       useFixedPosition: !0,
-      ...n.dropdownA11yProps,
-      children: /* @__PURE__ */ a(x, { groups: t, items: m, maxLevels: 1, keyboardEvents: n.open, ...n.menuA11yProps })
+      ...e.dropdownA11yProps,
+      children: /* @__PURE__ */ a(R, { groups: r, items: g, maxLevels: 1, keyboardEvents: e.open, ...e.menuA11yProps })
     }
   );
-}, M = (t) => {
-  switch (t) {
+}, P = (r) => {
+  switch (r) {
     case "nb":
       return {
         title: "Åpne meny"
@@ -91,5 +101,5 @@ const C = c((t, i) => {
   }
 };
 export {
-  F as ContextMenu
+  G as ContextMenu
 };

package/dist/components/GlobalHeader/HeaderDrawer.js

@@ -1,90 +1,83 @@
-import { jsxs as c, Fragment as m, jsx as r } from "react/jsx-runtime";
-import { useRef as N, useEffect as v } from "react";
+import { jsxs as a, Fragment as l, jsx as t } from "react/jsx-runtime";
+import { useRef as E, useEffect as h } from "react";
 import { Button as D } from "../Button/Button.js";
 import "../../index-p1eeF8LQ.js";
 import "../../tooltip-Ct39-719.js";
-import { w as L } from "../../ToolbarSearch-bv2opbAj.js";
+import { w as j } from "../../ToolbarSearch-bv2opbAj.js";
 import "../Typography/Link.js";
 import "react-dom";
 import "../GlobalMenu/GlobalMenuBase.js";
 import "../Snackbar/useSnackbar.js";
-import { S as j } from "../../ChevronUp-hn05LboH.js";
-import { S as I } from "../../ChevronDown-D_a7nb-G.js";
-import '../../assets/HeaderDrawer.css';const M = "_backdrop_yn0zc_11", R = "_drawer_yn0zc_28", F = "_footer_yn0zc_60", V = "_body_yn0zc_64", q = "_toggleButton_yn0zc_104", t = {
+import { S as I } from "../../ChevronUp-hn05LboH.js";
+import { S as L } from "../../ChevronDown-D_a7nb-G.js";
+import '../../assets/HeaderDrawer.css';const M = "_backdrop_yn0zc_11", R = "_drawer_yn0zc_28", B = "_footer_yn0zc_60", F = "_body_yn0zc_64", V = "_toggleButton_yn0zc_104", n = {
   backdrop: M,
   drawer: R,
-  footer: F,
-  body: V,
-  toggleButton: q
+  footer: B,
+  body: F,
+  toggleButton: V
 }, Z = ({
-  id: l,
-  open: i,
-  onClose: a,
+  id: c,
+  open: r,
+  onClose: v,
   closedBy: o = "any",
-  expanded: u,
-  expandable: y = !0,
+  expanded: d,
+  expandable: _ = !0,
   onToggle: b,
-  children: _
+  children: w
 }) => {
-  const { languageCode: w } = L(), f = A(w), d = N(null);
-  v(() => {
-    const e = d.current, s = (n) => {
-      const { clientY: p, clientX: h, target: z } = n;
-      if (n instanceof KeyboardEvent && n.key === "Escape") {
-        if (o === "none") {
-          n.preventDefault();
-          return;
-        }
-        a();
-        return;
+  const { languageCode: k } = j(), m = q(k), s = E(null);
+  h(() => {
+    const e = s.current, u = (i) => {
+      if (window.getSelection()?.toString()) return;
+      const { clientY: g, clientX: p, target: z } = i;
+      if (e && z === e && o === "any") {
+        const { top: C, left: x, right: S, bottom: N } = e.getBoundingClientRect();
+        C <= g && g <= N && x <= p && p <= S || e.close();
       }
-      if (!window.getSelection()?.toString() && e && z === e && o === "any") {
-        const { top: E, left: x, right: S, bottom: C } = e.getBoundingClientRect();
-        E <= p && p <= C && x <= h && h <= S || e?.close();
-      }
-    }, g = () => {
-      const n = e?.querySelector("[autofocus]");
-      document.activeElement !== n && n?.focus();
+    }, f = () => {
+      const i = e?.querySelector("[autofocus]");
+      document.activeElement !== i && i?.focus();
     };
-    return e?.addEventListener("animationend", g), e?.addEventListener("click", s), e?.addEventListener("keydown", s), () => {
-      e?.removeEventListener("animationend", g), e?.removeEventListener("click", s), e?.removeEventListener("keydown", s);
+    return e?.addEventListener("animationend", f), e?.addEventListener("click", u), () => {
+      e?.removeEventListener("animationend", f), e?.removeEventListener("click", u);
     };
-  }, [o, a]), v(() => {
-    const e = d.current;
-    e && (i ? e.open || e.showModal() : e.open && e.close());
-  }, [i]);
-  const k = (e) => {
-    e.preventDefault(), o === "any" && a();
+  }, [o]), h(() => {
+    const e = s.current;
+    e && (r ? e.open || e.showModal() : e.open && e.close());
+  }, [r]);
+  const y = (e) => {
+    o === "none" && e.preventDefault();
   };
-  return /* @__PURE__ */ c(m, { children: [
-    /* @__PURE__ */ r("div", { className: t.backdrop, "aria-hidden": !i }),
-    /* @__PURE__ */ c(
+  return /* @__PURE__ */ a(l, { children: [
+    /* @__PURE__ */ t("div", { className: n.backdrop, "aria-hidden": !r }),
+    /* @__PURE__ */ a(
       "dialog",
       {
-        id: l,
-        ref: d,
+        id: c,
+        ref: s,
         "aria-modal": "true",
         "aria-labelledby": "modal-title",
-        "data-open": i,
-        "data-expanded": u,
-        onCancel: k,
-        className: t.drawer,
-        onClose: o !== "none" ? a : void 0,
+        "data-open": r,
+        "data-expanded": d,
+        onCancel: y,
+        className: n.drawer,
+        onClose: o !== "none" ? v : void 0,
         children: [
-          /* @__PURE__ */ r("div", { className: t.body, children: _ }),
-          o !== "none" && y && /* @__PURE__ */ r("footer", { className: t.footer, children: /* @__PURE__ */ r(D, { className: t.toggleButton, size: "xs", variant: "outline", onClick: b, children: u ? /* @__PURE__ */ c(m, { children: [
-            /* @__PURE__ */ r(j, { className: t.btnIcon, "aria-hidden": "true" }),
-            f.minimize
-          ] }) : /* @__PURE__ */ c(m, { children: [
-            /* @__PURE__ */ r(I, { className: t.btnIcon, "aria-hidden": "true" }),
-            f.fullscreen
+          /* @__PURE__ */ t("div", { className: n.body, children: w }),
+          o !== "none" && _ && /* @__PURE__ */ t("footer", { className: n.footer, children: /* @__PURE__ */ t(D, { className: n.toggleButton, size: "xs", variant: "outline", onClick: b, children: d ? /* @__PURE__ */ a(l, { children: [
+            /* @__PURE__ */ t(I, { className: n.btnIcon, "aria-hidden": "true" }),
+            m.minimize
+          ] }) : /* @__PURE__ */ a(l, { children: [
+            /* @__PURE__ */ t(L, { className: n.btnIcon, "aria-hidden": "true" }),
+            m.fullscreen
           ] }) }) })
         ]
       }
     )
   ] });
-}, A = (l) => {
-  switch (l) {
+}, q = (c) => {
+  switch (c) {
     case "nn":
       return {
         minimize: "Minimer",

package/dist/components/Modal/ModalBase.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as s } from "react/jsx-runtime";
-import { useRef as D, useEffect as m } from "react";
+import { useRef as w, useEffect as d } from "react";
 import "../../index-p1eeF8LQ.js";
 import "../../tooltip-Ct39-719.js";
 import "../../ToolbarSearch-bv2opbAj.js";
@@ -9,73 +9,66 @@ import "../Button/Button.js";
 import "react-dom";
 import "../GlobalMenu/GlobalMenuBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as S } from "../Page/Section.js";
-import '../../assets/ModalBase.css';const C = "_modal_3d5cx_1", R = "_content_3d5cx_41", f = {
-  modal: C,
+import { Section as y } from "../Page/Section.js";
+import '../../assets/ModalBase.css';const D = "_modal_3d5cx_1", R = "_content_3d5cx_41", m = {
+  modal: D,
   content: R
 }, J = ({
-  open: r,
-  onClose: o,
-  closedBy: n = "any",
-  children: u,
+  open: a,
+  onClose: u,
+  closedBy: e = "any",
+  children: f,
   backdropColor: p = "inherit",
   size: g,
-  color: v,
-  padding: h = 0,
-  spacing: E = 0,
-  height: y = "auto",
-  variant: b = "default"
+  color: h,
+  padding: v = 0,
+  spacing: C = 0,
+  height: E = "auto",
+  variant: _ = "default"
 }) => {
-  const i = D(null);
-  return m(() => {
-    const t = i.current, a = (e) => {
-      const { clientY: l, clientX: d, target: k } = e;
-      if (e instanceof KeyboardEvent && e.key === "Escape") {
-        if (n === "none") {
-          e.preventDefault();
-          return;
-        }
-        o();
-        return;
-      }
-      if (!window.getSelection()?.toString() && t && k === t && n === "any") {
-        const { top: L, left: _, right: w, bottom: x } = t.getBoundingClientRect();
-        L <= l && l <= x && _ <= d && d <= w || t?.close();
+  const n = w(null);
+  return d(() => {
+    const t = n.current, i = (o) => {
+      if (window.getSelection()?.toString()) return;
+      const { clientY: r, clientX: l, target: b } = o;
+      if (t && b === t && e === "any") {
+        const { top: k, left: x, right: L, bottom: S } = t.getBoundingClientRect();
+        k <= r && r <= S && x <= l && l <= L || t.close();
       }
     }, c = () => {
-      const e = t?.querySelector("[autofocus]");
-      document.activeElement !== e && e?.focus();
+      const o = t?.querySelector("[autofocus]");
+      document.activeElement !== o && o?.focus();
     };
-    return t?.addEventListener("animationend", c), t?.addEventListener("click", a), t?.addEventListener("keydown", a), () => {
-      t?.removeEventListener("animationend", c), t?.removeEventListener("click", a), t?.removeEventListener("keydown", a);
+    return t?.addEventListener("animationend", c), t?.addEventListener("click", i), () => {
+      t?.removeEventListener("animationend", c), t?.removeEventListener("click", i);
     };
-  }, [n, o]), m(() => {
-    const t = i.current;
-    t && (r ? t.open || t.showModal() : t.open && t.close());
-  }, [r]), /* @__PURE__ */ s(
+  }, [e]), d(() => {
+    const t = n.current;
+    t && (a ? t.open || t.showModal() : t.open && t.close());
+  }, [a]), /* @__PURE__ */ s(
     "dialog",
     {
-      ref: i,
+      ref: n,
       "aria-modal": "true",
       "aria-labelledby": "modal-title",
       onCancel: (t) => {
-        t.preventDefault(), n === "any" && o();
+        e === "none" && t.preventDefault();
       },
       "data-backdrop-color": p,
-      className: f.modal,
-      "data-variant": b,
-      "data-height": y,
-      onClose: n !== "none" ? o : void 0,
+      className: m.modal,
+      "data-variant": _,
+      "data-height": E,
+      onClose: e !== "none" ? u : void 0,
       children: /* @__PURE__ */ s(
-        S,
+        y,
         {
-          className: f.content,
+          className: m.content,
           "aria-label": "modal content",
           size: g,
-          color: v,
-          padding: h,
-          spacing: E,
-          children: u
+          color: h,
+          padding: v,
+          spacing: C,
+          children: f
         }
       )
     }

package/dist/components/Settings/SettingsModal.js

@@ -1,5 +1,5 @@
 import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import { createElement as u } from "react";
+import { createElement as h } from "react";
 import "../../index-p1eeF8LQ.js";
 import "../../tooltip-Ct39-719.js";
 import "../../ToolbarSearch-bv2opbAj.js";
@@ -13,7 +13,7 @@ import "../GlobalMenu/GlobalMenuBase.js";
 import "../Snackbar/useSnackbar.js";
 import { ModalBase as j } from "../Modal/ModalBase.js";
 import { ModalHeader as y } from "../Modal/ModalHeader.js";
-import { ModalBody as E } from "../Modal/ModalBody.js";
+import { ModalBody as w } from "../Modal/ModalBody.js";
 const K = ({
   icon: e,
   title: n,
@@ -25,17 +25,17 @@ const K = ({
   ...d
 }) => /* @__PURE__ */ p(j, { ...d, open: l, onClose: r, children: [
   /* @__PURE__ */ o(y, { icon: e, title: n, description: c, onClose: r }),
-  /* @__PURE__ */ p(E, { children: [
+  /* @__PURE__ */ p(w, { children: [
     a,
-    m?.length && /* @__PURE__ */ o(g, { children: m?.map((t, f) => {
-      const { icon: i, label: s, ...B } = t;
-      return /* @__PURE__ */ u(
+    m?.length && /* @__PURE__ */ o(g, { wrap: !0, children: m?.map((t, f) => {
+      const { icon: i, label: s, ...u } = t;
+      return /* @__PURE__ */ h(
         M,
         {
-          ...B,
+          ...u,
           key: f,
-          onClick: (h) => {
-            t?.onClick?.(h), t?.close && r?.();
+          onClick: (B) => {
+            t?.onClick?.(B), t?.close && r?.();
           }
         },
         i && /* @__PURE__ */ o(k, { icon: i }),

package/dist/components/Tooltip/Tooltip.js

@@ -1,9 +1,9 @@
-import { jsx as r } from "react/jsx-runtime";
-import { v as a } from "../../tooltip-Ct39-719.js";
+import { jsx as p } from "react/jsx-runtime";
+import { v as r } from "../../tooltip-Ct39-719.js";
 import "react";
-import '../../assets/Tooltip.css';const l = "_tooltip_10ebf_1", e = {
+import '../../assets/Tooltip.css';const l = "_tooltip_t2itc_1", m = {
   tooltip: l
-}, x = ({ size: i = "xs", placement: s, children: o, content: t, hidden: p }) => t ? /* @__PURE__ */ r(a, { "aria-hidden": p, "data-size": i, content: t, placement: s, className: e.tooltip, children: o }) : o;
+}, f = ({ size: i = "xs", placement: s, children: t, content: o }) => o ? /* @__PURE__ */ p(r, { "data-size": i, content: o, placement: s, className: m.tooltip, children: t }) : t;
 export {
-  x as Tooltip
+  f as Tooltip
 };

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

@@ -2,7 +2,6 @@ import { TooltipProps as DsTooltipProps, Size } from '@digdir/designsystemet-rea
 export type TooltipProps = {
     children: React.ReactNode;
     content: string;
-    hidden?: boolean;
     size?: Size;
 } & Omit<DsTooltipProps, 'content | children'>;
-export declare const Tooltip: ({ size, placement, children, content, hidden }: TooltipProps) => string | import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ size, placement, children, content }: TooltipProps) => string | import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: ({ size, placement, children, content, hidden }: import('./Tooltip').TooltipProps) => string | import("react/jsx-runtime").JSX.Element;
+    component: ({ size, placement, children, content }: import('./Tooltip').TooltipProps) => string | import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {};

package/package.json

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