@altinn/altinn-components 0.28.2 → 0.29.0

package/dist/components/Forms/SearchField.js

@@ -0,0 +1,34 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { Icon as p } from "../Icon/Icon.js";
+import "../../index-L8X2o7IH.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import { Input as _ } from "./Input.js";
+import { FieldBase as f } from "./FieldBase.js";
+import { S as d } from "../../MagnifyingGlass-3Ln1MufI.js";
+import { S as g } from "../../XMark-DIqxCTTQ.js";
+import '../../assets/SearchField.css';const u = "_field_5zm0g_1", h = "_icon_5zm0g_5", I = "_input_5zm0g_14", z = "_clear_5zm0g_24", N = "_clearIcon_5zm0g_48", c = {
+  field: u,
+  icon: h,
+  input: I,
+  clear: z,
+  clearIcon: N
+}, E = ({
+  className: t,
+  size: i,
+  color: n = "neutral",
+  label: a,
+  value: o,
+  onClear: e,
+  clearButtonAltText: s = "Clear search",
+  ...l
+}) => /* @__PURE__ */ r(f, { size: i, color: n, label: a, className: t, children: /* @__PURE__ */ m("div", { className: c.field, children: [
+  /* @__PURE__ */ r(_, { ...l, type: "search", value: o, className: c.input }),
+  /* @__PURE__ */ r(p, { svgElement: d, className: c.icon }),
+  e && !!o && /* @__PURE__ */ r("button", { type: "button", className: c.clear, onClick: e, "aria-label": s, children: /* @__PURE__ */ r(g, { className: c.clearIcon }) })
+] }) });
+export {
+  E as SearchField
+};

package/dist/components/Forms/index.js

@@ -6,34 +6,36 @@ import { Input as d } from "./Input.js";
 import { Textarea as s } from "./Textarea.js";
 import { Select as c } from "./Select.js";
 import { Radio as h } from "./Radio.js";
-import { Checkbox as S } from "./Checkbox.js";
+import { Checkbox as O } from "./Checkbox.js";
 import { Switch as B } from "./Switch.js";
 import { FieldBase as k } from "./FieldBase.js";
 import { TextField as C } from "./TextField.js";
 import { TextareaField as R } from "./TextareaField.js";
 import { SelectField as u } from "./SelectField.js";
-import { FieldsetBase as j } from "./FieldsetBase.js";
-import { OptionsBase as v } from "./OptionsBase.js";
-import { RadioOptions as z } from "./RadioOptions.js";
-import { SwitchOptions as D } from "./SwitchOptions.js";
-import { CheckboxOptions as G } from "./CheckboxOptions.js";
+import { SearchField as j } from "./SearchField.js";
+import { FieldsetBase as v } from "./FieldsetBase.js";
+import { OptionsBase as z } from "./OptionsBase.js";
+import { RadioOptions as D } from "./RadioOptions.js";
+import { SwitchOptions as G } from "./SwitchOptions.js";
+import { CheckboxOptions as J } from "./CheckboxOptions.js";
 export {
-  S as Checkbox,
-  G as CheckboxOptions,
+  O as Checkbox,
+  J as CheckboxOptions,
   r as Field,
   k as FieldBase,
   p as Fieldset,
-  j as FieldsetBase,
+  v as FieldsetBase,
   d as Input,
   i as Label,
   f as Legend,
-  v as OptionsBase,
+  z as OptionsBase,
   h as Radio,
-  z as RadioOptions,
+  D as RadioOptions,
+  j as SearchField,
   c as Select,
   u as SelectField,
   B as Switch,
-  D as SwitchOptions,
+  G as SwitchOptions,
   C as TextField,
   s as Textarea,
   R as TextareaField

package/dist/components/GlobalMenu/CurrentAccount.js

@@ -0,0 +1,28 @@
+import { jsx as e } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import { MenuItem as o } from "../Menu/MenuItem.js";
+import "../Searchbar/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import { Button as p } from "../Button/Button.js";
+import { S as s } from "../../ChevronRight-BbelnTke.js";
+const y = ({ account: r, as: m, onClick: t, linkText: i }) => /* @__PURE__ */ e(
+  o,
+  {
+    id: "account",
+    size: "lg",
+    as: m,
+    onClick: t,
+    controls: i && /* @__PURE__ */ e(p, { as: "div", icon: s, reverse: !0, variant: "outline", size: "xs", children: i }),
+    icon: {
+      name: r.name,
+      type: r.type
+    },
+    title: { children: r == null ? void 0 : r.name, size: "sm", weight: "medium" },
+    description: r == null ? void 0 : r.description
+  }
+);
+export {
+  y as CurrentAccount
+};

package/dist/components/GlobalMenu/GlobalMenu.js

@@ -1,95 +1,90 @@
 "use client";
-import { jsxs as p, jsx as i, Fragment as g } from "react/jsx-runtime";
+import { jsxs as p, jsx as r, Fragment as y } from "react/jsx-runtime";
 import { useState as w, useMemo as z } from "react";
 import "../../index-L8X2o7IH.js";
+import { AccountMenu as D } from "../Account/AccountMenu.js";
 import "../RootProvider/RootProvider.js";
-import { AccountMenu as D } from "./AccountMenu.js";
-import { AccountButton as J } from "./AccountButton.js";
+import { CurrentAccount as J } from "./CurrentAccount.js";
 import { BackButton as K } from "./BackButton.js";
-import { LogoutButton as v } from "./LogoutButton.js";
-import { EndUserLabel as x } from "./EndUserLabel.js";
+import { LogoutButton as T } from "./LogoutButton.js";
+import { EndUserLabel as j } from "./EndUserLabel.js";
 import "../Searchbar/AutocompleteBase.js";
+import { MenuListItem as h } from "../Menu/MenuBase.js";
+import { Menu as B } from "../Menu/Menu.js";
 import "../Snackbar/useSnackbar.js";
-import { MenuListItem as d } from "../Menu/MenuBase.js";
-import { Menu as G } from "../Menu/Menu.js";
-import { GlobalMenuBase as f, GlobalMenuHeader as L, GlobalMenuFooter as y } from "./GlobalMenuBase.js";
-const U = ({
-  accounts: n = [],
-  accountGroups: B = {},
-  accountSearch: T,
-  items: c = [],
-  groups: k,
-  changeLabel: j = "Change",
-  backLabel: F = "Back",
-  currentAccount: e,
-  currentEndUserLabel: l = "Signed in",
-  onSelectAccount: o,
-  onClose: r,
-  logoutButton: t,
-  menuItemsVirtual: H
+import { GlobalMenuBase as s, GlobalMenuHeader as L, GlobalMenuFooter as F } from "./GlobalMenuBase.js";
+const c = ({
+  accountMenu: l,
+  items: k = [],
+  groups: g,
+  changeLabel: H = "Change",
+  backLabel: M = "Back",
+  currentAccount: d,
+  currentEndUserLabel: t = "Signed in",
+  onSelectAccount: f,
+  onClose: m,
+  logoutButton: e
 }) => {
-  const [S, W] = w(!1), h = () => {
-    W((a) => !a);
-  }, q = (a) => {
-    h(), r == null || r(), o == null || o(a);
-  }, s = z(() => c.map((a) => ({
-    ...a,
+  var x;
+  const [S, W] = w(!1), o = () => {
+    W((i) => !i);
+  }, q = (i) => {
+    o(), m == null || m(), f == null || f(i);
+  }, v = z(() => k.map((i) => ({
+    ...i,
     onClick: () => {
-      var m;
-      (m = a.onClick) == null || m.call(a), r == null || r();
+      var a;
+      (a = i.onClick) == null || a.call(i), m == null || m();
     },
-    items: Array.isArray(a.items) ? a.items.map((m) => ({
-      ...m,
+    items: Array.isArray(i.items) ? i.items.map((a) => ({
+      ...a,
       onClick: () => {
-        var M;
-        (M = m.onClick) == null || M.call(m), r == null || r();
+        var G;
+        (G = a.onClick) == null || G.call(a), m == null || m();
       }
     })) : void 0
-  })), [c, r]);
-  return S ? /* @__PURE__ */ p(f, { children: [
-    /* @__PURE__ */ i(L, { children: /* @__PURE__ */ i(K, { onClick: h, label: F }) }),
-    /* @__PURE__ */ i(d, { as: "div", role: "separator" }),
-    /* @__PURE__ */ i(
-      D,
-      {
-        currentAccount: e,
-        accounts: n,
-        accountGroups: B,
-        accountSearch: T,
-        onSelectAccount: q,
-        menuItemsVirtual: H
-      }
-    )
-  ] }) : e ? /* @__PURE__ */ p(f, { color: e == null ? void 0 : e.type, children: [
-    /* @__PURE__ */ i(
-      J,
-      {
-        account: e,
-        linkText: j,
-        multipleAccounts: n.length > 1,
-        onClick: h
-      }
-    ),
-    /* @__PURE__ */ i(d, { as: "div", role: "separator" }),
-    /* @__PURE__ */ i(G, { groups: k, items: s, theme: "default" }),
-    t && /* @__PURE__ */ p(g, { children: [
-      /* @__PURE__ */ i(d, { as: "div", role: "separator" }),
-      /* @__PURE__ */ p(y, { children: [
-        l && /* @__PURE__ */ i(x, { children: l }),
-        /* @__PURE__ */ i(v, { ...t })
+  })), [k, m]);
+  if (S)
+    return /* @__PURE__ */ p(s, { children: [
+      /* @__PURE__ */ r(L, { children: /* @__PURE__ */ r(K, { onClick: o, label: M }) }),
+      /* @__PURE__ */ r(h, { as: "div", role: "separator" }),
+      l && /* @__PURE__ */ r(D, { ...l, currentAccount: d, onSelectAccount: q })
+    ] });
+  if (d) {
+    const i = l && ((x = l == null ? void 0 : l.items) == null ? void 0 : x.length) > 1;
+    return /* @__PURE__ */ p(s, { color: d == null ? void 0 : d.type, children: [
+      /* @__PURE__ */ r(
+        J,
+        {
+          account: d,
+          linkText: H,
+          multipleAccounts: i,
+          as: i ? "button" : "div",
+          onClick: i ? o : void 0
+        }
+      ),
+      /* @__PURE__ */ r(h, { as: "div", role: "separator" }),
+      /* @__PURE__ */ r(B, { groups: g, items: v, theme: "default" }),
+      e && /* @__PURE__ */ p(y, { children: [
+        /* @__PURE__ */ r(h, { as: "div", role: "separator" }),
+        /* @__PURE__ */ p(F, { children: [
+          t && /* @__PURE__ */ r(j, { children: t }),
+          /* @__PURE__ */ r(T, { ...e })
+        ] })
       ] })
-    ] })
-  ] }) : /* @__PURE__ */ p(f, { children: [
-    /* @__PURE__ */ i(G, { groups: k, items: s }),
-    t && /* @__PURE__ */ p(g, { children: [
-      /* @__PURE__ */ i(d, { as: "div", role: "separator" }),
-      /* @__PURE__ */ p(y, { children: [
-        l && /* @__PURE__ */ i(x, { children: l }),
-        /* @__PURE__ */ i(v, { ...t })
+    ] });
+  }
+  return /* @__PURE__ */ p(s, { children: [
+    /* @__PURE__ */ r(B, { groups: g, items: v }),
+    e && /* @__PURE__ */ p(y, { children: [
+      /* @__PURE__ */ r(h, { as: "div", role: "separator" }),
+      /* @__PURE__ */ p(F, { children: [
+        t && /* @__PURE__ */ r(j, { children: t }),
+        /* @__PURE__ */ r(T, { ...e })
       ] })
     ] })
   ] });
 };
 export {
-  U as GlobalMenu
+  c as GlobalMenu
 };

package/dist/components/GlobalMenu/index.js

@@ -1,14 +1,12 @@
-import { AccountMenu as r } from "./AccountMenu.js";
+import { CurrentAccount as t } from "./CurrentAccount.js";
 import { GlobalMenu as n } from "./GlobalMenu.js";
-import { AccountButton as f } from "./AccountButton.js";
-import { BackButton as p } from "./BackButton.js";
-import { LogoutButton as c } from "./LogoutButton.js";
+import { BackButton as f } from "./BackButton.js";
+import { LogoutButton as p } from "./LogoutButton.js";
 import { EndUserLabel as a } from "./EndUserLabel.js";
 export {
-  f as AccountButton,
-  r as AccountMenu,
-  p as BackButton,
+  f as BackButton,
+  t as CurrentAccount,
   a as EndUserLabel,
   n as GlobalMenu,
-  c as LogoutButton
+  p as LogoutButton
 };

package/dist/components/List/List.js

@@ -1,12 +1,14 @@
-import { jsx as p } from "react/jsx-runtime";
-import { createElement as n } from "react";
-import "../../index-L8X2o7IH.js";
+import { jsx as l } from "react/jsx-runtime";
+import { createElement as c } from "react";
+import { c as p } from "../../index-L8X2o7IH.js";
 import "../RootProvider/RootProvider.js";
-import { ListItem as c } from "./ListItem.js";
+import { ListItem as n } from "./ListItem.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as l } from "../Page/Flex.js";
-const j = ({ children: t, spacing: o = 2, items: m = [], ...i }) => /* @__PURE__ */ p(l, { direction: "col", as: "ul", spacing: o, ...i, children: t || m.map((r, e) => /* @__PURE__ */ n(c, { ...r, key: `item-${r.id ?? e}` })) });
+import { Flex as a } from "../Page/Flex.js";
+import '../../assets/List.css';const f = "_list_14rag_1", x = {
+  list: f
+}, k = ({ children: r, className: o, spacing: i, items: m = [], ...s }) => /* @__PURE__ */ l(a, { direction: "col", as: "ul", spacing: i, className: p(x.list, o), ...s, children: r || m.map((t, e) => /* @__PURE__ */ c(n, { ...t, key: `item-${t.id ?? e}` })) });
 export {
-  j as List
+  k as List
 };

package/dist/components/List/ListItemControls.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { c as r } from "../../index-L8X2o7IH.js";
-import '../../assets/ListItemControls.css';const c = "_controls_1schy_1", n = {
+import '../../assets/ListItemControls.css';const c = "_controls_mvhfq_1", n = {
   controls: c
 }, e = ({ className: o, children: s }) => /* @__PURE__ */ t("div", { className: r(n.controls, o), children: s });
 export {

package/dist/components/List/ListItemHeader.js

@@ -1,89 +1,89 @@
 import { jsxs as l, jsx as e, Fragment as E } from "react/jsx-runtime";
-import { c as w } from "../../index-L8X2o7IH.js";
-import { useId as z, isValidElement as D } from "react";
-import { Icon as F } from "../Icon/Icon.js";
-import { Badge as H } from "../Badge/Badge.js";
+import { c as g } from "../../index-L8X2o7IH.js";
+import { useId as w, isValidElement as z } from "react";
+import { Icon as D } from "../Icon/Icon.js";
+import { Badge as F } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemLink as R } from "./ListItemLink.js";
-import { ListItemLabel as U } from "./ListItemLabel.js";
-import { ListItemIcon as V } from "./ListItemIcon.js";
-import { ListItemControls as q } from "./ListItemControls.js";
-import { ListItemSelect as A } 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 "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-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_1rjb2_1", O = "_label_1rjb2_27", P = "_linkIcon_1rjb2_35", o = {
-  header: M,
-  label: O,
-  linkIcon: P
+import { S as A, a as G } from "../../ChevronUp-DR4Lz2Jb.js";
+import { S as J } from "../../ChevronRight-BbelnTke.js";
+import '../../assets/ListItemHeader.css';const K = "_header_s4ghf_1", M = "_label_s4ghf_27", O = "_linkIcon_s4ghf_35", o = {
+  header: K,
+  label: M,
+  linkIcon: O
 }, ne = ({
   as: c,
   interactive: p = !0,
-  color: d,
+  color: f,
   loading: t,
-  disabled: f,
-  collapsible: h,
+  disabled: h,
+  collapsible: d,
   linkIcon: I,
   expanded: v,
   select: s,
   href: L,
   onClick: _,
-  onKeyPress: b,
-  tabIndex: u,
+  onKeyPress: u,
+  tabIndex: S,
   size: i,
-  title: S,
-  description: j,
-  icon: k,
+  title: b,
+  description: k,
+  icon: N,
   active: m,
   badge: r,
   controls: n,
-  className: N,
-  children: x,
-  ariaLabel: y
+  className: x,
+  children: y,
+  ariaLabel: C
 }) => {
-  const a = h ? v ? G : J : I ? K : void 0, C = () => r && !t && typeof r == "object" && "label" in r ? /* @__PURE__ */ e(H, { ...r }) : D(r) ? r : null, B = z();
+  const a = d ? v ? A : G : I ? J : void 0, j = () => r && !t && typeof r == "object" && "label" in r ? /* @__PURE__ */ e(F, { ...r }) : z(r) ? r : null, B = w();
   return /* @__PURE__ */ l(
     "header",
     {
-      className: w(o.header, N),
-      "data-color": d,
+      className: g(o.header, x),
+      "data-color": f,
       "data-interactive": p,
       "data-size": i,
       "data-has-active-child": m,
       children: [
         /* @__PURE__ */ e(
-          R,
+          H,
           {
             as: c,
             href: L,
             onClick: _,
-            onKeyPress: b,
-            tabIndex: u,
+            onKeyPress: u,
+            tabIndex: S,
             loading: t,
-            disabled: f || t,
+            disabled: h || t,
             active: m,
-            ariaLabel: y
+            ariaLabel: C
           }
         ),
-        s && /* @__PURE__ */ e(A, { ...s, className: o.select }),
-        /* @__PURE__ */ e(V, { loading: t, icon: k }),
+        s && /* @__PURE__ */ e(q, { ...s, className: o.select }),
+        /* @__PURE__ */ e(U, { loading: t, icon: N }),
         /* @__PURE__ */ e(
-          U,
+          R,
           {
             size: i,
             loading: t,
-            title: S,
-            description: j,
+            title: b,
+            description: k,
             id: B,
             className: o.label,
-            children: x
+            children: y
           }
         ),
-        /* @__PURE__ */ e(q, { className: o.controls, children: n && !t ? /* @__PURE__ */ e("span", { style: { position: "relative" }, children: n }) : /* @__PURE__ */ l(E, { children: [
-          C(),
+        /* @__PURE__ */ e(V, { className: o.controls, children: n && !t ? /* @__PURE__ */ e("span", { style: { position: "relative" }, children: n }) : /* @__PURE__ */ l(E, { children: [
+          j(),
           a && /* @__PURE__ */ e("span", { className: o.linkIcon, children: /* @__PURE__ */ e(
-            F,
+            D,
             {
               svgElement: a,
               style: {

package/dist/components/List/ListItemLabel.js

@@ -1,53 +1,61 @@
-import { jsx as s, jsxs as u, Fragment as b } from "react/jsx-runtime";
-import { c as d } from "../../index-L8X2o7IH.js";
-import { isValidElement as h } from "react";
+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 "../RootProvider/RootProvider.js";
-import { Heading as c } from "../Typography/Heading.js";
+import { Heading as e } from "../Typography/Heading.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/ListItemLabel.css';const P = "_label_1aex5_1", x = {
-  label: P
-}, a = (r) => typeof r == "object" && r !== null && "children" in r;
-function m(r) {
-  return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || h(r);
+import '../../assets/ListItemLabel.css';const g = "_label_1aex5_1", h = {
+  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);
 }
 const y = (r) => {
-  const t = {
+  const s = {
     as: "h2",
     size: "sm"
     //    leading: "tight",
   };
-  return a(r) ? { ...t, ...r } : m(r) ? {
-    ...t,
+  return j(r) ? { ...s, ...r } : z(r) ? {
+    ...s,
     children: r
   } : null;
-}, g = (r) => {
-  const t = {
+}, d = (r) => {
+  const s = {
     as: "h3",
     size: "xs",
     weight: "normal",
     variant: "subtle"
     //    leading: "tight",
   };
-  return a(r) ? { ...t, ...r } : m(r) ? {
-    ...t,
+  return j(r) ? { ...s, ...r } : z(r) ? {
+    ...s,
     children: r
   } : null;
-}, D = ({
+}, I = ({
   loading: r = !1,
-  size: t,
-  title: n,
-  description: o,
-  children: l,
-  id: p,
-  className: f
+  size: s,
+  title: o,
+  value: p,
+  description: c,
+  children: n,
+  id: l,
+  className: a
 }) => {
-  const e = n && y(n), i = o && g(o);
-  return /* @__PURE__ */ s("span", { className: d(x.label, f), id: p, "data-size": t, children: l || /* @__PURE__ */ u(b, { children: [
-    e && /* @__PURE__ */ s(c, { ...e, loading: r, children: e.children }),
-    i && /* @__PURE__ */ s(c, { ...i, loading: r })
+  if (o && p) {
+    const f = o && d(o), u = p && y(p);
+    return /* @__PURE__ */ t("span", { className: x(h.label, a), id: l, "data-size": s, children: n || /* @__PURE__ */ b(P, { children: [
+      f && /* @__PURE__ */ t(e, { ...f, loading: r }),
+      u && /* @__PURE__ */ t(e, { ...u, loading: r })
+    ] }) });
+  }
+  const i = o && y(o), m = c && d(c);
+  return /* @__PURE__ */ t("span", { className: x(h.label, a), id: l, "data-size": s, children: n || /* @__PURE__ */ b(P, { children: [
+    i && /* @__PURE__ */ t(e, { ...i, loading: r }),
+    m && /* @__PURE__ */ t(e, { ...m, loading: r })
   ] }) });
 };
 export {
-  D as ListItemLabel
+  I as ListItemLabel
 };