@altinn/altinn-components 0.38.0 → 0.38.2

package/dist/components/List/ListItemHeader.js

@@ -1,97 +1,99 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { c as B } from "../../index-L8X2o7IH.js";
-import { useId as E, isValidElement as w } from "react";
-import { Icon as z } from "../Icon/Icon.js";
-import { Badge as A } from "../Badge/Badge.js";
+import { c as E } from "../../index-L8X2o7IH.js";
+import { useId as w, isValidElement as z } from "react";
+import { Icon as A } from "../Icon/Icon.js";
+import { Badge as D } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemLink as D } from "./ListItemLink.js";
-import { ListItemLabel as H } from "./ListItemLabel.js";
-import { ListItemIcon as R } from "./ListItemIcon.js";
-import { ListItemControls as U } from "./ListItemControls.js";
-import { ListItemSelect as V } from "./ListItemSelect.js";
+import { ListItemLink as H } from "./ListItemLink.js";
+import { ListItemLabel as R } from "./ListItemLabel.js";
+import { ListItemIcon as U } from "./ListItemIcon.js";
+import { ListItemControls as V } from "./ListItemControls.js";
+import { ListItemSelect as q } from "./ListItemSelect.js";
 import "../Snackbar/useSnackbar.js";
-import { S as q, a as G } from "../../ChevronUp-DR4Lz2Jb.js";
-import { S as J } from "../../ChevronRight-BbelnTke.js";
-import '../../assets/ListItemHeader.css';const K = "_header_1v1u9_1", M = "_label_1v1u9_27", O = "_link_1v1u9_39", P = "_badge_1v1u9_43", Q = "_linkIcon_1v1u9_47", T = "_linkFocus_1v1u9_57", W = "_controls_1v1u9_65", o = {
-  header: K,
-  label: M,
-  link: O,
-  badge: P,
-  linkIcon: Q,
-  linkFocus: T,
-  controls: W
-}, mo = ({
+import { S as G, a as J } from "../../ChevronUp-DR4Lz2Jb.js";
+import { S as K } from "../../ChevronRight-BbelnTke.js";
+import '../../assets/ListItemHeader.css';const M = "_header_1v1u9_1", O = "_label_1v1u9_27", P = "_link_1v1u9_39", Q = "_badge_1v1u9_43", T = "_linkIcon_1v1u9_47", W = "_linkFocus_1v1u9_57", X = "_controls_1v1u9_65", o = {
+  header: M,
+  label: O,
+  link: P,
+  badge: Q,
+  linkIcon: T,
+  linkFocus: W,
+  controls: X
+}, po = ({
   as: _,
+  highlightWords: u,
   interactive: i = !0,
-  color: u,
+  color: v,
   loading: s,
-  disabled: v,
-  collapsible: f,
-  linkIcon: h,
-  expanded: I,
+  disabled: f,
+  collapsible: h,
+  linkIcon: I,
+  expanded: k,
   select: l,
-  href: k,
-  onClick: b,
-  onKeyPress: L,
-  tabIndex: N,
+  href: b,
+  onClick: L,
+  onKeyPress: N,
+  tabIndex: S,
   size: a,
   title: r,
-  description: S,
-  icon: C,
+  description: C,
+  icon: x,
   active: c,
   badge: t,
   controls: m,
-  className: x,
-  children: y,
+  className: y,
+  children: F,
   ariaLabel: d
 }) => {
-  const p = f ? I ? q : G : h ? J : void 0, F = () => t && !s && typeof t == "object" && "label" in t ? /* @__PURE__ */ e(A, { ...t, className: o.badge }) : w(t) ? t : null, j = d !== void 0 ? d : typeof r == "string" ? r : void 0, g = E();
+  const p = h ? k ? G : J : I ? K : void 0, j = () => t && !s && typeof t == "object" && "label" in t ? /* @__PURE__ */ e(D, { ...t, className: o.badge }) : z(t) ? t : null, g = d !== void 0 ? d : typeof r == "string" ? r : void 0, B = w();
   return /* @__PURE__ */ n(
     "div",
     {
-      className: B(o.header, x),
-      "data-color": u,
+      className: E(o.header, y),
+      "data-color": v,
       "data-interactive": i,
       "data-size": a,
       "data-has-active-child": c,
       children: [
         /* @__PURE__ */ n(
-          D,
+          H,
           {
             as: _,
-            href: k,
-            onClick: b,
-            onKeyPress: L,
-            tabIndex: N,
+            href: b,
+            onClick: L,
+            onKeyPress: N,
+            tabIndex: S,
             loading: s,
-            disabled: v || s,
+            disabled: f || s,
             active: c,
-            ariaLabel: j,
+            ariaLabel: g,
             className: o.link,
             children: [
               i && /* @__PURE__ */ e("div", { className: o.linkFocus, "aria-hidden": "true" }),
-              l && /* @__PURE__ */ e(V, { ...l, className: o.select }),
-              /* @__PURE__ */ e(R, { loading: s, icon: C }),
+              l && /* @__PURE__ */ e(q, { ...l, className: o.select }),
+              /* @__PURE__ */ e(U, { loading: s, icon: x }),
               /* @__PURE__ */ e(
-                H,
+                R,
                 {
                   size: a,
                   loading: s,
+                  highlightWords: u,
                   title: r,
-                  description: S,
-                  id: g,
+                  description: C,
+                  id: B,
                   className: o.label,
-                  children: y
+                  children: F
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ n(U, { className: o.controls, children: [
+        /* @__PURE__ */ n(V, { className: o.controls, children: [
           m && !s && /* @__PURE__ */ e("span", { className: o.customControls, children: m }),
-          F(),
+          j(),
           p && /* @__PURE__ */ e("span", { className: o.linkIcon, children: /* @__PURE__ */ e(
-            z,
+            A,
             {
               svgElement: p,
               style: {
@@ -105,5 +107,5 @@ import '../../assets/ListItemHeader.css';const K = "_header_1v1u9_1", M = "_labe
   );
 };
 export {
-  mo as ListItemHeader
+  po as ListItemHeader
 };

package/dist/components/List/ListItemLabel.js

@@ -1,59 +1,60 @@
-import { jsx as t, jsxs as b, Fragment as P } from "react/jsx-runtime";
-import { c as x } from "../../index-L8X2o7IH.js";
-import { isValidElement as _ } from "react";
+import { jsx as n, jsxs as P, Fragment as x } from "react/jsx-runtime";
+import { c as y } from "../../index-L8X2o7IH.js";
+import { isValidElement as N } from "react";
 import "../RootProvider/RootProvider.js";
-import { Heading as e } from "../Typography/Heading.js";
+import { Heading as o } from "../Typography/Heading.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/ListItemLabel.css';const g = "_label_1b76c_1", y = {
-  label: g
-}, j = (r) => typeof r == "object" && r !== null && "children" in r;
-function z(r) {
-  return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || _(r);
+import '../../assets/ListItemLabel.css';const d = "_label_1cju7_1", j = {
+  label: d
+}, H = (r) => typeof r == "object" && r !== null && "children" in r;
+function L(r) {
+  return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || N(r);
 }
-const d = (r) => {
+const z = (r) => {
   const s = {
     as: "h3",
     size: "sm"
   };
-  return j(r) ? { ...s, ...r } : z(r) ? {
+  return H(r) ? { ...s, ...r } : L(r) ? {
     ...s,
     children: r
   } : null;
-}, h = (r) => {
+}, _ = (r) => {
   const s = {
     as: "span",
     size: "xs",
     weight: "normal",
     variant: "subtle"
   };
-  return j(r) ? { ...s, ...r } : z(r) ? {
+  return H(r) ? { ...s, ...r } : L(r) ? {
     ...s,
     children: r
   } : null;
-}, F = ({
+}, T = ({
   loading: r = !1,
-  size: s,
-  title: n,
+  highlightWords: s,
+  size: p,
+  title: t,
   value: c,
-  description: p,
-  children: o,
-  id: l,
-  className: a
+  description: a,
+  children: e,
+  id: f,
+  className: l
 }) => {
-  if (n && c) {
-    const m = n && d(n), u = c && h(c);
-    return /* @__PURE__ */ t("span", { className: x(y.label, a), id: l, "data-size": s, children: o || /* @__PURE__ */ b(P, { children: [
-      m && /* @__PURE__ */ t(e, { ...m, loading: r }),
-      u && /* @__PURE__ */ t(e, { ...u, loading: r })
+  if (t && c) {
+    const i = t && z(t), b = c && _(c);
+    return /* @__PURE__ */ n("span", { className: y(j.label, l), id: f, "data-size": p, children: e || /* @__PURE__ */ P(x, { children: [
+      i && /* @__PURE__ */ n(o, { ...i, loading: r, highlightWords: s }),
+      b && /* @__PURE__ */ n(o, { ...b, loading: r, highlightWords: s })
     ] }) });
   }
-  const i = n && d(n), f = p && h(p);
-  return /* @__PURE__ */ t("span", { className: x(y.label, a), id: l, "data-size": s, children: o || /* @__PURE__ */ b(P, { children: [
-    i && /* @__PURE__ */ t(e, { ...i, loading: r }),
-    f && /* @__PURE__ */ t(e, { ...f, loading: r })
+  const m = t && z(t), u = a && _(a);
+  return /* @__PURE__ */ n("span", { className: y(j.label, l), id: f, "data-size": p, children: e || /* @__PURE__ */ P(x, { children: [
+    m && /* @__PURE__ */ n(o, { ...m, loading: r, highlightWords: s }),
+    u && /* @__PURE__ */ n(o, { ...u, loading: r, highlightWords: s })
   ] }) });
 };
 export {
-  F as ListItemLabel,
-  j as isHeadingProps
+  T as ListItemLabel,
+  H as isHeadingProps
 };

package/dist/components/Menu/MenuItem.js

@@ -1,17 +1,17 @@
-import { jsxs as u, jsx as o, Fragment as k } from "react/jsx-runtime";
-import { Icon as M } from "../Icon/Icon.js";
+import { jsxs as k, jsx as o, Fragment as M } from "react/jsx-runtime";
+import { Icon as b } from "../Icon/Icon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { MenuItemBase as b } from "./MenuItemBase.js";
-import { MenuItemLabel as y } from "./MenuItemLabel.js";
-import { MenuItemIcon as C } from "./MenuItemIcon.js";
+import { MenuItemBase as y } from "./MenuItemBase.js";
+import { MenuItemLabel as C } from "./MenuItemLabel.js";
+import { MenuItemIcon as _ } from "./MenuItemIcon.js";
 import "../Snackbar/useSnackbar.js";
-import { S as _, a as j } from "../../ChevronUp-DR4Lz2Jb.js";
-import { S as w } from "../../ChevronRight-BbelnTke.js";
-import '../../assets/MenuItem.css';const x = "_linkIcon_1owl4_57", m = {
-  linkIcon: x
-}, H = ({
+import { S as j, a as w } from "../../ChevronUp-DR4Lz2Jb.js";
+import { S as x } from "../../ChevronRight-BbelnTke.js";
+import '../../assets/MenuItem.css';const N = "_linkIcon_1owl4_57", m = {
+  linkIcon: N
+}, J = ({
   as: i = "a",
   size: n = "md",
   color: s,
@@ -23,18 +23,19 @@ import '../../assets/MenuItem.css';const x = "_linkIcon_1owl4_57", m = {
   iconBadge: h,
   title: I,
   description: v,
-  badge: f,
+  highlightWords: f,
+  badge: d,
   controls: r,
-  linkIcon: d,
-  label: g,
-  ...S
+  linkIcon: g,
+  label: S,
+  ...u
 }) => {
-  const t = c ? e ? _ : j : d ? w : void 0;
-  return /* @__PURE__ */ u(b, { as: i, size: n, theme: l, color: s, expanded: e, ...S, children: [
-    /* @__PURE__ */ o(C, { size: n, icon: a, theme: p, badge: h }),
-    /* @__PURE__ */ o(y, { title: I, description: v, size: n, badge: f, children: g }),
-    /* @__PURE__ */ o("span", { className: m.controls, children: r ? /* @__PURE__ */ o("span", { style: { position: "relative" }, children: r }) : /* @__PURE__ */ o(k, { children: t && /* @__PURE__ */ o("span", { className: m.linkIcon, children: /* @__PURE__ */ o(
-      M,
+  const t = c ? e ? j : w : g ? x : void 0;
+  return /* @__PURE__ */ k(y, { as: i, size: n, theme: l, color: s, expanded: e, ...u, children: [
+    /* @__PURE__ */ o(_, { size: n, icon: a, theme: p, badge: h }),
+    /* @__PURE__ */ o(C, { title: I, description: v, highlightWords: f, size: n, badge: d, children: S }),
+    /* @__PURE__ */ o("span", { className: m.controls, children: r ? /* @__PURE__ */ o("span", { style: { position: "relative" }, children: r }) : /* @__PURE__ */ o(M, { children: t && /* @__PURE__ */ o("span", { className: m.linkIcon, children: /* @__PURE__ */ o(
+      b,
       {
         svgElement: t,
         style: {
@@ -45,5 +46,5 @@ import '../../assets/MenuItem.css';const x = "_linkIcon_1owl4_57", m = {
   ] });
 };
 export {
-  H as MenuItem
+  J as MenuItem
 };

package/dist/components/Menu/MenuItemLabel.js

@@ -1,33 +1,33 @@
-import { jsx as o, jsxs as c, Fragment as g } from "react/jsx-runtime";
-import { c as d } from "../../index-L8X2o7IH.js";
+import { jsx as t, jsxs as f, Fragment as g } from "react/jsx-runtime";
+import { c as b } from "../../index-L8X2o7IH.js";
 import { isValidElement as h } from "react";
-import { Badge as b } from "../Badge/Badge.js";
+import { Badge as x } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
-import { Heading as f } from "../Typography/Heading.js";
-import { isHeadingProps as s } from "../List/ListItemLabel.js";
+import { Heading as p } from "../Typography/Heading.js";
+import { isHeadingProps as o } from "../List/ListItemLabel.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/MenuItemLabel.css';const x = "_label_mk4ho_1", _ = "_title_mk4ho_20", p = {
-  label: x,
-  title: _
+import '../../assets/MenuItemLabel.css';const _ = "_label_k9qsn_1", y = "_title_k9qsn_20", u = {
+  label: _,
+  title: y
 };
-function u(r) {
+function d(r) {
   return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || h(r);
 }
-const y = (r) => {
+const P = (r) => {
   const n = {
     as: "span"
   };
-  return s(r) ? { ...n, ...r } : u(r) ? {
+  return o(r) ? { ...n, ...r } : d(r) ? {
     ...n,
     children: r
   } : null;
-}, P = (r) => {
+}, w = (r) => {
   const n = {
     as: "span",
     weight: "normal",
     variant: "subtle"
   };
-  return s(r) ? { ...n, ...r } : u(r) ? {
+  return o(r) ? { ...n, ...r } : d(r) ? {
     ...n,
     children: r
   } : null;
@@ -35,25 +35,41 @@ const y = (r) => {
 function z(r) {
   if (typeof r == "string")
     return r;
-  if (s(r))
+  if (o(r))
     return r.children;
 }
-const A = ({ className: r, size: n = "sm", title: i, badge: l, description: m, children: a }) => {
-  const t = i && y(i), e = m && P(m);
-  return /* @__PURE__ */ o("span", { className: d(p.label, r), "data-size": n, children: a || /* @__PURE__ */ c(g, { children: [
-    t && /* @__PURE__ */ c(
-      f,
+const A = ({
+  className: r,
+  size: n = "sm",
+  title: i,
+  badge: l,
+  description: a,
+  highlightWords: m,
+  children: c
+}) => {
+  const e = i && P(i), s = a && w(a);
+  return /* @__PURE__ */ t("span", { className: b(u.label, r), "data-size": n, children: c || /* @__PURE__ */ f(g, { children: [
+    e && /* @__PURE__ */ f(
+      p,
       {
-        ...t,
-        className: p.title,
-        weight: t != null && t.weight || n === "lg" ? "medium" : "normal",
+        ...e,
+        highlightWords: m,
+        className: u.title,
+        weight: e != null && e.weight || n === "lg" ? "medium" : "normal",
         children: [
-          t.children,
-          l && /* @__PURE__ */ o(b, { ...l })
+          /* @__PURE__ */ t("span", { children: e.children }),
+          l && /* @__PURE__ */ t(x, { ...l })
         ]
       }
     ),
-    e && /* @__PURE__ */ o(f, { ...e, size: e.size || n === "lg" ? "xs" : "xxs" })
+    s && /* @__PURE__ */ t(
+      p,
+      {
+        ...s,
+        highlightWords: m,
+        size: s.size || n === "lg" ? "xs" : "xxs"
+      }
+    )
   ] }) });
 };
 export {

package/dist/components/Modal/ModalBase.js

@@ -5,15 +5,15 @@ import "../../index-L8X2o7IH.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { Section as x } from "../Page/Section.js";
-import '../../assets/ModalBase.css';const R = "_modal_1tnpv_1", I = "_content_1tnpv_30", d = {
+import '../../assets/ModalBase.css';const R = "_modal_4vfmr_1", I = "_content_4vfmr_35", d = {
   modal: R,
   content: I
 }, Y = ({
   open: c,
   onClose: a,
   closedBy: n = "any",
-  children: p,
-  backdropColor: v = "inherit",
+  children: v,
+  backdropColor: p = "inherit",
   size: E,
   color: h,
   padding: y = 0,
@@ -50,7 +50,7 @@ import '../../assets/ModalBase.css';const R = "_modal_1tnpv_1", I = "_content_1t
       onCancel: (e) => {
         e.preventDefault(), n === "any" && a();
       },
-      "data-backdrop-color": v,
+      "data-backdrop-color": p,
       className: d.modal,
       "data-variant": k,
       onClose: n !== "none" ? a : void 0,
@@ -63,7 +63,7 @@ import '../../assets/ModalBase.css';const R = "_modal_1tnpv_1", I = "_content_1t
           color: h,
           padding: y,
           spacing: b,
-          children: p
+          children: v
         }
       )
     }

package/dist/components/Typography/Heading.js

@@ -1,43 +1,45 @@
 "use client";
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { c as x } from "../../index-L8X2o7IH.js";
 import "react";
 import { Skeleton as f } from "../Skeleton/Skeleton.js";
 import "../RootProvider/RootProvider.js";
 import { useHighlightedText as u } from "./useHighlightedText.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/Heading.css';const H = "_heading_1dyne_1", _ = {
+import '../../assets/Heading.css';const H = "_heading_1dyne_1", N = {
   heading: H
-}, T = ({
-  loading: e,
-  highlightWords: i = [],
-  as: o = "h2",
+}, L = ({
+  loading: i,
+  highlightWords: n = [],
+  as: r = "h2",
   size: t,
-  leading: n = "tight",
-  weight: r = "medium",
-  color: d,
-  variant: m,
-  maxRows: s,
-  className: c,
+  leading: d = "tight",
+  weight: s = "medium",
+  color: m,
+  variant: c,
+  maxRows: l,
+  className: g,
   style: h,
-  children: g
+  children: o
 }) => {
-  const l = o, p = u(g, i || []);
-  return /* @__PURE__ */ a(f, { loading: e, children: /* @__PURE__ */ a(
-    l,
+  const p = r;
+  console.log("CHILDREN", o);
+  const a = u(o, n || []);
+  return console.log("CHILDREN", a), /* @__PURE__ */ e(f, { loading: i, children: /* @__PURE__ */ e(
+    p,
     {
-      className: x(_.heading, c),
+      className: x(N.heading, g),
       style: h,
       "data-size": t,
-      "data-leading": n,
-      "data-weight": r,
-      "data-color": d,
-      "data-variant": t === "xxs" && "default" || m,
-      "data-max-rows": s,
-      children: p
+      "data-leading": d,
+      "data-weight": s,
+      "data-color": m,
+      "data-variant": t === "xxs" && "default" || c,
+      "data-max-rows": l,
+      children: a
     }
   ) });
 };
 export {
-  T as Heading
+  L as Heading
 };

package/dist/components/Typography/useHighlightedText.js

@@ -1,7 +1,7 @@
 import { jsx as u } from "react/jsx-runtime";
-import f, { useMemo as p, isValidElement as d, cloneElement as m } from "react";
-const g = /* @__PURE__ */ new Set(["mark", "code", "pre", "script", "style"]);
-function h(e) {
+import f, { useMemo as p, isValidElement as d, cloneElement as h } from "react";
+const m = /* @__PURE__ */ new Set(["mark", "code", "pre", "script", "style"]);
+function g(e) {
   return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 function y(e, t) {
@@ -9,45 +9,52 @@ function y(e, t) {
     return { node: e, changed: !1 };
   t.lastIndex = 0;
   const n = [];
-  let s = 0, c;
-  for (; c = t.exec(e); ) {
-    const r = c.index, l = r + c[0].length;
-    r > s && n.push(e.slice(s, r)), n.push(/* @__PURE__ */ u("mark", { children: c[0] }, n.length)), s = l;
+  let s = 0, a;
+  for (; a = t.exec(e); ) {
+    const r = a.index, c = r + a[0].length;
+    r > s && n.push(e.slice(s, r)), n.push(/* @__PURE__ */ u("mark", { children: a[0] }, n.length)), s = c;
   }
   return s < e.length && n.push(e.slice(s)), { node: n.length === 1 ? n[0] : n, changed: !0 };
 }
-function i(e, t) {
+function l(e, t) {
   if (typeof e == "string")
     return y(e, t);
+  if (Array.isArray(e)) {
+    let n = !1;
+    return { node: e.map((a) => {
+      const r = l(a, t);
+      return r.changed && (n = !0), r.node;
+    }), changed: n };
+  }
   if (d(e)) {
     const n = e, s = typeof n.type == "string" ? n.type : void 0;
-    if (s && g.has(s)) return { node: e, changed: !1 };
-    let c = !1;
+    if (s && m.has(s)) return { node: e, changed: !1 };
+    let a = !1;
     const r = f.Children.map(n.props.children, (o) => {
-      const a = i(o, t);
-      return a.changed && (c = !0), a.node;
+      const i = l(o, t);
+      return i.changed && (a = !0), i.node;
     });
-    if (!c)
+    if (!a)
       return { node: e, changed: !1 };
-    const l = r && r.length === 1 ? r[0] : r;
-    return { node: m(n, { children: l }), changed: !0 };
+    const c = r && r.length === 1 ? r[0] : r;
+    return { node: h(n, { children: c }), changed: !0 };
   }
   return { node: e, changed: !1 };
 }
-function E(e, t) {
+function A(e, t) {
   return p(() => {
     if (!e || !(t != null && t.length)) return e;
     const n = Array.from(
       new Set(
-        t.map((r) => r.trim()).filter(Boolean).map(h)
+        t.map((r) => r.trim()).filter(Boolean).map(g)
       )
     );
     if (n.length === 0) return e;
-    n.sort((r, l) => l.length - r.length);
-    const s = new RegExp(`(${n.join("|")})`, "gi"), { node: c } = i(e, s);
-    return c;
+    n.sort((r, c) => c.length - r.length);
+    const s = new RegExp(`(${n.join("|")})`, "gi"), { node: a } = l(e, s);
+    return a;
   }, [e, t]);
 }
 export {
-  E as useHighlightedText
+  A as useHighlightedText
 };