@altinn/altinn-components 0.55.0 → 0.55.2

package/dist/assets/SearchField.css

@@ -1 +1 @@
-._container_1fveu_1{position:relative;display:inline-flex;width:100%}._icon_1fveu_7{position:absolute;top:0;bottom:0;left:0;width:2.5em;height:100%;color:var(--ds-color-text-subtle);display:flex;justify-content:center;align-items:center;pointer-events:none}._icon_1fveu_7>svg{font-size:1.25em;width:1.25em;height:1.25em}._input_1fveu_27{padding-left:2.25em;padding-right:2.25em}._input_1fveu_27[type=search]::-webkit-search-decoration,._input_1fveu_27[type=search]::-webkit-search-cancel-button{appearance:none}@media(max-width:1023px){._field_1fveu_39[data-size=xs] input[type=search]{font-size:1rem;padding-left:2em;padding-right:2em}}._clear_1fveu_46{position:absolute;top:0;right:0;bottom:0;width:2.5em;height:100%;display:flex;justify-content:center;align-items:center}._clearButton_1fveu_58[data-size=xs]{--dsc-button-size: 2.5em;--dsc-button-padding: 0;font-size:.75em;border:none}._clearButton_1fveu_58:focus-visible{outline-offset:0;outline-width:2px}._input_1fveu_27[data-collapsible=true]{transition:width .5s ease-in-out}._input_1fveu_27[data-collapsible=true]:placeholder-shown{background-color:transparent;width:8rem}._input_1fveu_27[data-collapsible=true]:focus,._input_1fveu_27[data-collapsible=true]:not(:placeholder-shown){width:auto;background-color:var(--ds-color-background-default)}
+._container_nkg1g_1{position:relative;display:inline-flex;width:100%}._icon_nkg1g_7{position:absolute;top:0;bottom:0;left:0;width:2.5em;height:100%;color:var(--ds-color-text-subtle);display:flex;justify-content:center;align-items:center;pointer-events:none}._icon_nkg1g_7>*{pointer-events:none}._icon_nkg1g_7>svg{font-size:1.25em;width:1.25em;height:1.25em}._input_nkg1g_31{padding-left:2.25em;padding-right:2.25em}._input_nkg1g_31[type=search]::-webkit-search-decoration,._input_nkg1g_31[type=search]::-webkit-search-cancel-button{appearance:none}@media(max-width:1023px){._field_nkg1g_43[data-size=xs] input[type=search]{font-size:1rem;padding-left:2em;padding-right:2em}}._clear_nkg1g_50{position:absolute;top:0;right:0;bottom:0;width:2.5em;height:100%;display:flex;justify-content:center;align-items:center}._clearButton_nkg1g_62[data-size=xs]{--dsc-button-size: 2.5em;--dsc-button-padding: 0;font-size:.75em;border:none}._clearButton_nkg1g_62:focus-visible{outline-offset:0;outline-width:2px}._input_nkg1g_31[data-collapsible=true]{transition:width .5s ease-in-out}._input_nkg1g_31[data-collapsible=true]:placeholder-shown{background-color:transparent;width:8rem}._input_nkg1g_31[data-collapsible=true]:focus,._input_nkg1g_31[data-collapsible=true]:not(:placeholder-shown){width:auto;background-color:var(--ds-color-background-default)}

package/dist/components/Forms/SearchField.js

@@ -1,56 +1,56 @@
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { c as p } from "../../index-p1eeF8LQ.js";
-import { Icon as u } from "../Icon/Icon.js";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { c as _ } from "../../index-p1eeF8LQ.js";
+import { Icon as f } from "../Icon/Icon.js";
 import "react";
-import { Button as _ } from "../Button/Button.js";
+import { Button as g } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { Input as d } from "./Input.js";
-import { FieldBase as v } from "./FieldBase.js";
+import { Input as u } from "./Input.js";
+import { FieldBase as d } from "./FieldBase.js";
 import "../Snackbar/useSnackbar.js";
-import { S as h } from "../../MagnifyingGlass-bwVhw07z.js";
-import { S as B } from "../../XMark-tKk6aExO.js";
-import '../../assets/SearchField.css';const N = "_container_1fveu_1", g = "_icon_1fveu_7", x = "_input_1fveu_27", S = "_field_1fveu_39", y = "_clear_1fveu_46", C = "_clearButton_1fveu_58", t = {
-  container: N,
-  icon: g,
+import { S as k } from "../../MagnifyingGlass-bwVhw07z.js";
+import { S as h } from "../../XMark-tKk6aExO.js";
+import '../../assets/SearchField.css';const B = "_container_nkg1g_1", N = "_icon_nkg1g_7", x = "_input_nkg1g_31", S = "_field_nkg1g_43", v = "_clear_nkg1g_50", y = "_clearButton_nkg1g_62", n = {
+  container: B,
+  icon: N,
   input: x,
   field: S,
-  clear: y,
-  clearButton: C
+  clear: v,
+  clearButton: y
 }, w = ({
-  className: a,
-  collapsible: i,
-  size: n,
+  className: r,
+  collapsible: a,
+  size: i,
   color: c = "neutral",
   label: s,
   value: o,
-  onClear: r,
+  onClear: e,
   clearButtonAltText: l = "Clear search",
   ...m
-}) => /* @__PURE__ */ e(v, { size: n, color: c, label: s, className: p(t.field, a), children: /* @__PURE__ */ f("div", { className: t.container, children: [
-  /* @__PURE__ */ e(
-    d,
+}) => /* @__PURE__ */ t(d, { size: i, color: c, label: s, className: _(n.field, r), children: /* @__PURE__ */ p("div", { className: n.container, children: [
+  /* @__PURE__ */ t(
+    u,
     {
       ...m,
       type: "search",
       value: o,
-      className: t.input,
-      "data-collapsible": i,
+      className: n.input,
+      "data-collapsible": a,
       autoCapitalize: "off",
       autoComplete: "off"
     }
   ),
-  /* @__PURE__ */ e(u, { svgElement: h, className: t.icon }),
-  r && !!o && /* @__PURE__ */ e("span", { className: t.clear, children: /* @__PURE__ */ e(
-    _,
+  /* @__PURE__ */ t(f, { svgElement: k, className: n.icon }),
+  e && !!o && /* @__PURE__ */ t("span", { className: n.clear, children: /* @__PURE__ */ t(
+    g,
     {
       size: "xs",
       rounded: !0,
       icon: !0,
       variant: "tinted",
-      className: t.clearButton,
-      onClick: r,
+      className: n.clearButton,
+      onClick: e,
       "aria-label": l,
-      children: /* @__PURE__ */ e(B, {})
+      children: /* @__PURE__ */ t(h, {})
     }
   ) })
 ] }) });

package/dist/components/GlobalMenu/GlobalMenu.js

@@ -1,65 +1,61 @@
 "use client";
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import { useState as d, useCallback as C, useEffect as G, useMemo as L } from "react";
-import { Menu as B } from "../Menu/Menu.js";
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { useState as d, useCallback as G, useEffect as L, useMemo as C } from "react";
+import { Menu as S } from "../Menu/Menu.js";
 import "../../index-p1eeF8LQ.js";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { LocaleSwitcher as S } from "./LocaleSwitcher.js";
+import { LocaleSwitcher as h } from "./LocaleSwitcher.js";
 import "../Snackbar/useSnackbar.js";
-import { MenuListItem as h } from "../Menu/MenuListItem.js";
-import { BackButton as v } from "./BackButton.js";
-import { GlobalMenuBase as u, GlobalMenuHeader as x, GlobalMenuFooter as j } from "./GlobalMenuBase.js";
-import { LogoutButton as y } from "./LogoutButton.js";
-import { S as A } from "../../Globe-BcPkcH4E.js";
-const Q = ({
-  menu: e,
-  backLabel: k = "Back",
+import { MenuListItem as v } from "../Menu/MenuListItem.js";
+import { GlobalMenuBase as u, GlobalMenuHeader as x, GlobalMenuFooter as T } from "./GlobalMenuBase.js";
+import { LogoutButton as j } from "./LogoutButton.js";
+import { S as y } from "../../Globe-BcPkcH4E.js";
+const N = ({
+  menu: o,
+  backLabel: g = "Back",
   onClose: l,
-  logoutButton: n,
-  ariaLabel: m = "Menu",
+  logoutButton: a,
+  ariaLabel: n = "Menu",
   localeSwitcher: r,
-  isOpen: c = !1
+  isOpen: m = !1
 }) => {
-  const [g, f] = d(!1), a = C(() => {
-    f((t) => !t);
+  const [k, c] = d(!1), s = G(() => {
+    c((t) => !t);
   }, []);
-  G(() => {
-    c || f(!1);
-  }, [c]);
-  const b = L(() => {
-    const t = (e?.items ?? []).map((i) => ({
+  L(() => {
+    m || c(!1);
+  }, [m]);
+  const M = C(() => {
+    const t = (o?.items ?? []).map((i) => ({
       ...i,
       onClick: () => {
         i.onClick?.(), l?.();
       },
-      items: Array.isArray(i.items) ? i.items.map((p) => ({
-        ...p,
+      items: Array.isArray(i.items) ? i.items.map((f) => ({
+        ...f,
         onClick: () => {
-          p.onClick?.(), l?.();
+          f.onClick?.(), l?.();
         }
       })) : void 0
     }));
     if (!r) return t;
-    const M = {
+    const b = {
       title: "Språk/language",
-      icon: A,
+      icon: y,
       size: "sm",
-      onClick: a
+      onClick: s
     };
-    return [...t, M];
-  }, [e, l, r, a]);
-  return g ? /* @__PURE__ */ s(u, { "aria-label": m, children: [
-    /* @__PURE__ */ s(x, { children: [
-      /* @__PURE__ */ o(v, { onClick: a, label: k }),
-      r && /* @__PURE__ */ o(S, { ...r })
-    ] }),
-    /* @__PURE__ */ o(h, { as: "div", role: "separator" })
-  ] }) : /* @__PURE__ */ s(u, { "aria-label": m, children: [
-    e && /* @__PURE__ */ o(B, { ...e, items: b }),
-    n && /* @__PURE__ */ o(j, { children: /* @__PURE__ */ o(y, { ...n }) })
+    return [...t, b];
+  }, [o, l, r, s]);
+  return k ? /* @__PURE__ */ p(u, { "aria-label": n, children: [
+    /* @__PURE__ */ e(x, { children: r && /* @__PURE__ */ e(h, { ...r, backLabel: g, onToggle: s }) }),
+    /* @__PURE__ */ e(v, { as: "div", role: "separator" })
+  ] }) : /* @__PURE__ */ p(u, { "aria-label": n, children: [
+    o && /* @__PURE__ */ e(S, { ...o, items: M }),
+    a && /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(j, { ...a }) })
   ] });
 };
 export {
-  Q as GlobalMenu
+  N as GlobalMenu
 };

package/dist/components/GlobalMenu/LocaleSwitcher.js

@@ -1,16 +1,23 @@
 "use client";
-import { jsx as o } from "react/jsx-runtime";
-import { useRef as f, useMemo as i } from "react";
-import { useEnterKey as g } from "../../hooks/useEnterKey.js";
+import { jsx as c } from "react/jsx-runtime";
+import { useRef as g, useMemo as l } from "react";
+import { useEnterKey as v } from "../../hooks/useEnterKey.js";
 import { MenuItems as h } from "../Menu/MenuItems.js";
 import "../../index-p1eeF8LQ.js";
 import "../Button/Button.js";
-import { useRootContext as k } from "../RootProvider/RootProvider.js";
+import { useRootContext as b } from "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { S as v } from "../../Checkmark-Byz_C9x4.js";
-const M = ({ title: s = "Select language", options: r, onSelect: a }) => {
-  const l = f(null), { currentId: u, closeAll: c } = k(), d = u === "locale", n = i(() => r.find((e) => e.checked)?.value ?? r[0]?.value, [r]), m = i(() => r.map((t) => {
-    const e = t.value === n;
+import { S } from "../../Checkmark-Byz_C9x4.js";
+import { S as x } from "../../ArrowUndo-hge1gMu8.js";
+const q = ({
+  title: s = "Select language",
+  options: r,
+  onSelect: a,
+  onToggle: u,
+  backLabel: d
+}) => {
+  const n = g(null), { currentId: m, closeAll: o } = b(), p = m === "locale", i = l(() => r.find((e) => e.checked)?.value ?? r[0]?.value, [r]), f = l(() => r.map((t) => {
+    const e = t.value === i;
     return {
       ...t,
       id: String(t.value),
@@ -19,22 +26,33 @@ const M = ({ title: s = "Select language", options: r, onSelect: a }) => {
       role: "radio",
       name: "locale",
       checked: e,
-      icon: e ? v : /* @__PURE__ */ o("span", { "aria-hidden": "true" }),
+      icon: e ? S : /* @__PURE__ */ c("span", { "aria-hidden": "true" }),
       onClick: () => {
-        a?.(String(t.value)), c();
+        a?.(String(t.value)), o();
       }
     };
-  }), [r, a, c, n]), p = {
+  }), [r, a, o, i]), k = {
     locales: { title: s || "Språk/language" }
   };
-  return g((t) => {
-    if (d) {
+  return v((t) => {
+    if (p) {
       t.preventDefault();
-      const e = l.current?.querySelector('[data-active="true"]');
-      e && (e.tagName === "A" && e.hasAttribute("href") ? e.click() : e.dispatchEvent(new MouseEvent("click", { bubbles: !0 }))), c();
+      const e = n.current?.querySelector('[data-active="true"]');
+      e && (e.tagName === "A" && e.hasAttribute("href") ? e.click() : e.dispatchEvent(new MouseEvent("click", { bubbles: !0 }))), o();
     }
-  }), /* @__PURE__ */ o("div", { ref: l, "data-testid": "locale-switcher", role: "radiogroup", children: /* @__PURE__ */ o(h, { groups: p, items: m, keyboardEvents: !1 }) });
+  }), /* @__PURE__ */ c("div", { ref: n, "data-testid": "locale-switcher", role: "radiogroup", children: /* @__PURE__ */ c(
+    h,
+    {
+      variant: "default",
+      groups: k,
+      items: [
+        { onClick: u, label: d, as: "button", icon: x, id: "back" },
+        ...f
+      ],
+      keyboardEvents: !1
+    }
+  ) });
 };
 export {
-  M as LocaleSwitcher
+  q as LocaleSwitcher
 };

package/dist/components/Menu/VirtualizedMenuItems.js

@@ -112,7 +112,7 @@ const Ae = (W) => {
   const X = {
     position: "relative",
     maxHeight: h?.maxHeight || Q,
-    margin: "0 -0.5rem",
+    margin: "-0.5rem",
     padding: "0.5rem",
     minWidth: h?.minWidth ?? "20rem",
     overflowY: "auto",

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

@@ -6,16 +6,7 @@ declare const meta: {
     parameters: {
         layout: string;
     };
-    args: {
-        address: string;
-        address2: string;
-        menu: {
-            items: {
-                id: string;
-                title: string;
-            }[];
-        };
-    };
+    args: import('./Footer').FooterProps;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/types/lib/components/GlobalMenu/LocaleSwitcher.d.ts

@@ -3,5 +3,7 @@ export interface LocaleSwitcherProps {
     title?: string;
     options: MenuOptionProps[];
     onSelect?: (value: string) => void;
+    backLabel?: string;
+    onToggle?: () => void;
 }
-export declare const LocaleSwitcher: ({ title, options, onSelect }: LocaleSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LocaleSwitcher: ({ title, options, onSelect, onToggle, backLabel, }: LocaleSwitcherProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

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

package/dist/components/GlobalMenu/BackButton.js

@@ -1,12 +0,0 @@
-import { jsx as m } from "react/jsx-runtime";
-import "react";
-import "../../index-p1eeF8LQ.js";
-import "../Button/Button.js";
-import "../RootProvider/RootProvider.js";
-import "../Snackbar/useSnackbar.js";
-import { MenuItem as i } from "../Menu/MenuItem.js";
-import { S as p } from "../../ArrowUndo-hge1gMu8.js";
-const k = ({ label: o, onClick: r, as: t }) => /* @__PURE__ */ m(i, { size: "sm", id: "back", icon: p, title: o, onClick: r, as: t });
-export {
-  k as BackButton
-};

package/dist/types/lib/components/GlobalMenu/BackButton.d.ts

@@ -1,7 +0,0 @@
-import { ElementType } from 'react';
-export interface BackButtonProps {
-    label: string;
-    onClick?: () => void;
-    as?: ElementType;
-}
-export declare const BackButton: ({ label, onClick, as }: BackButtonProps) => import("react/jsx-runtime").JSX.Element;