@altinn/altinn-components 0.7.3 → 0.7.5

package/dist/components/Searchbar/Searchbar.stories.js

@@ -1,23 +1,23 @@
-import { jsx as n, jsxs as l } from "react/jsx-runtime";
-import { useState as a } from "react";
-import { Searchbar as o } from "./Searchbar.js";
-const k = {
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { useState as s } from "react";
+import { Searchbar as i } from "./Searchbar.js";
+const S = {
   title: "Header/Searchbar",
-  component: o,
+  component: i,
   tags: ["autodocs"],
   parameters: {},
   args: {
     placeholder: "Search",
     name: "search",
-    expanded: !1
+    expanded: !0
   }
-}, S = {
+}, y = {
   args: {}
 }, x = {
   args: {
     value: "query"
   }
-}, I = {
+}, A = {
   args: {
     placeholder: "Søk i innboks",
     expanded: !0,
@@ -29,96 +29,112 @@ const k = {
       },
       items: [
         {
+          type: "scope",
           id: "1a",
           groupId: "1",
           href: "#",
-          label: "Alt i innboks"
+          label: "Alt i innboks",
+          badge: {
+            label: "2"
+          }
         },
         {
+          type: "scope",
           id: "1b",
           groupId: "1",
           href: "#",
-          label: "Alt i hele Altinn"
+          label: "Alt i hele Altinn",
+          badge: {
+            label: "2"
+          }
         },
         {
+          type: "dialog",
           id: "2a",
           groupId: "2",
           href: "#",
-          label: "Skattemelding 2024"
+          title: "Skattemelding 2024"
         },
         {
+          type: "dialog",
           id: "2b",
           groupId: "2",
           href: "#",
-          label: "Skattemelding 2025"
+          title: "Skattemelding 2025"
         }
       ]
     }
   }
-}, A = (s) => {
-  const [i, d] = a(!1), [e, c] = a(""), p = (t) => {
-    c(t.target.value);
+}, C = (d) => {
+  const [t, o] = s(""), [p, a] = s(!1), c = (e) => {
+    o(e.target.value);
   }, u = () => {
-    d(!0);
+    o("");
   }, g = [
     {
-      groupId: "1",
       id: "inbox",
-      href: "#",
-      label: e ? () => /* @__PURE__ */ l("span", { children: [
-        /* @__PURE__ */ n("mark", { children: e }),
+      label: t ? () => /* @__PURE__ */ l("span", { children: [
+        /* @__PURE__ */ n("mark", { children: t }),
         " i innboksen"
       ] }) : "Alt i innboksen"
     },
     {
-      groupId: "1",
       id: "global",
-      href: "#",
-      label: e ? () => /* @__PURE__ */ l("span", { children: [
-        /* @__PURE__ */ n("mark", { children: e }),
+      label: t ? () => /* @__PURE__ */ l("span", { children: [
+        /* @__PURE__ */ n("mark", { children: t }),
         " i hele Altinn"
       ] }) : "Alt i hele Altinn"
     }
-  ], r = e ? [
+  ].map((e) => ({
+    ...e,
+    groupId: "1",
+    type: "scope"
+  })), r = t ? [
     {
-      groupId: "2",
-      href: "http://www.altinn.no",
-      label: "Skattemelding 2024"
+      href: "#skatt-2024",
+      title: "Skattemelding 2024"
     },
     {
-      groupId: "2",
-      onClick: () => {
-        alert("Skattemelding 2025 ble trykket på");
-      },
-      label: "Skattemelding 2025"
+      href: "#skatt-2024",
+      title: "Skattemelding 2025"
+    }
+  ].filter((e) => e.title.toLowerCase().includes((t ?? "").toLowerCase())).map((e) => ({
+    ...e,
+    type: "dialog",
+    groupId: "2"
+  })) : [], m = [...g, ...r].map((e) => ({
+    ...e,
+    onClick: () => {
+      console.log(JSON.stringify(e));
     }
-  ].filter((t) => t.label.toLowerCase().includes((e ?? "").toLowerCase())) : [], h = {
+  })), h = {
     groups: {
       2: {
         title: `${r.length} treff i innboksen`
       }
     },
-    items: [...g, ...r]
+    items: m
   };
   return /* @__PURE__ */ n(
-    o,
+    i,
     {
-      ...s,
+      ...d,
       autocomplete: h,
-      expanded: i,
-      value: e,
-      onChange: p,
-      onFocus: u,
-      onEnter: () => {
-        alert(`Søk etter ${e}`);
+      value: t,
+      onChange: c,
+      onClear: u,
+      expanded: p,
+      onFocus: () => a(!0),
+      onClose: () => {
+        a(!1);
       }
     }
   );
 };
 export {
-  A as ControlledState,
-  S as Default,
-  I as Expanded,
+  C as ControlledState,
+  y as Default,
+  A as Expanded,
   x as Query,
-  k as default
+  S as default
 };

package/dist/components/Toolbar/ToolbarAdd.js

@@ -5,12 +5,13 @@ import "react";
 import "../RootProvider/RootProvider.js";
 import { Menu as p } from "../Menu/Menu.js";
 import { DrawerOrDropdown as l } from "../Dropdown/DrawerOrDropdown.js";
+import "../../Autocomplete-hEFuiN2u.js";
 import { ToolbarButton as n } from "./ToolbarButton.js";
 import { ToolbarFilterBase as s } from "./ToolbarFilterBase.js";
-const x = ({ expanded: o = !1, onToggle: t, label: i = "Legg til", items: m }) => /* @__PURE__ */ e(s, { expanded: o, children: [
+const B = ({ expanded: o = !1, onToggle: t, label: i = "Legg til", items: m }) => /* @__PURE__ */ e(s, { expanded: o, children: [
   /* @__PURE__ */ r(n, { type: "add", onToggle: t, children: i }),
   /* @__PURE__ */ r(l, { title: i, onClose: t, expanded: o, children: /* @__PURE__ */ r(p, { theme: "global", items: m }) })
 ] });
 export {
-  x as ToolbarAdd
+  B as ToolbarAdd
 };

package/dist/components/Toolbar/ToolbarDaterange.js

@@ -6,6 +6,7 @@ import "../RootProvider/RootProvider.js";
 import { MenuInputField as p } from "../Menu/MenuInputField.js";
 import { MenuBase as v } from "../Menu/MenuBase.js";
 import { DrawerOrDropdown as C } from "../Dropdown/DrawerOrDropdown.js";
+import "../../Autocomplete-hEFuiN2u.js";
 import { ToolbarButton as F } from "./ToolbarButton.js";
 import { ToolbarFilterBase as T } from "./ToolbarFilterBase.js";
 import { Datepicker as S } from "../Datepicker/Datepicker.js";
@@ -13,7 +14,7 @@ import '../../assets/ToolbarDaterange.css';const y = "_datepicker_mqb1p_1", q =
   datepicker: y,
   fields: q,
   description: w
-}, H = ({
+}, J = ({
   title: d = "Select daterange",
   description: f = "Choose dates or click to set daterange.",
   fromLabel: h = "From date",
@@ -45,5 +46,5 @@ import '../../assets/ToolbarDaterange.css';const y = "_datepicker_mqb1p_1", q =
   ] });
 };
 export {
-  H as ToolbarDaterange
+  J as ToolbarDaterange
 };

package/dist/components/Toolbar/ToolbarFilter.js

@@ -4,10 +4,11 @@ import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { DrawerOrDropdown as j } from "../Dropdown/DrawerOrDropdown.js";
+import "../../Autocomplete-hEFuiN2u.js";
 import { ToolbarButton as O } from "./ToolbarButton.js";
 import { ToolbarFilterBase as k } from "./ToolbarFilterBase.js";
 import { ToolbarOptions as u } from "./ToolbarOptions.js";
-const w = (t, o) => Array.isArray(o) ? o.join(", ") : o, _ = ({
+const w = (t, o) => Array.isArray(o) ? o.join(", ") : o, e = ({
   expanded: t = !1,
   removable: o,
   label: m,
@@ -61,5 +62,5 @@ const w = (t, o) => Array.isArray(o) ? o.join(", ") : o, _ = ({
   ] });
 };
 export {
-  _ as ToolbarFilter
+  e as ToolbarFilter
 };

package/dist/components/Toolbar/ToolbarMenu.js

@@ -5,12 +5,13 @@ import "react";
 import "../RootProvider/RootProvider.js";
 import { Menu as s } from "../Menu/Menu.js";
 import { DrawerOrDropdown as a } from "../Dropdown/DrawerOrDropdown.js";
+import "../../Autocomplete-hEFuiN2u.js";
 import { ToolbarButton as f } from "./ToolbarButton.js";
 import { ToolbarFilterBase as c } from "./ToolbarFilterBase.js";
-const D = ({ expanded: r = !1, onToggle: t, label: e, value: i, groups: m, search: l, items: p }) => /* @__PURE__ */ n(c, { expanded: r, children: [
+const M = ({ expanded: r = !1, onToggle: t, label: e, value: i, groups: m, search: l, items: p }) => /* @__PURE__ */ n(c, { expanded: r, children: [
   /* @__PURE__ */ o(f, { type: "switch", onToggle: t, active: !!i, children: e }),
   /* @__PURE__ */ o(a, { expanded: r, title: "Endre konto", onClose: t, children: /* @__PURE__ */ o(s, { theme: "global", defaultItemColor: "subtle", groups: m, search: l, items: p }) })
 ] });
 export {
-  D as ToolbarMenu
+  M as ToolbarMenu
 };

package/dist/components/Toolbar/ToolbarOptions.js

@@ -6,25 +6,26 @@ import { MenuOption as v } from "../Menu/MenuOption.js";
 import { MenuSearch as j } from "../Menu/MenuSearch.js";
 import { MenuHeader as x } from "../Menu/MenuHeader.js";
 import "../RootProvider/RootProvider.js";
+import "../../Autocomplete-hEFuiN2u.js";
 import { MenuBase as O, MenuList as I, MenuListItem as m } from "../Menu/MenuBase.js";
-const q = ({ search: d, optionGroups: o = {}, options: h, onChange: b, optionType: g }) => {
-  var p;
-  const a = h.reduce(
+const w = ({ search: d, optionGroups: n = {}, options: h, onChange: b, optionType: g }) => {
+  var a;
+  const p = h.reduce(
     (e, l) => {
-      const n = l.groupId || "";
-      return e[n] = e[n] || [], e[n].push(l), e;
+      const o = l.groupId || "";
+      return e[o] = e[o] || [], e[o].push(l), e;
     },
     {}
   );
   return /* @__PURE__ */ c(O, { theme: "global", children: [
     d && /* @__PURE__ */ r(j, { ...d }),
-    /* @__PURE__ */ r(I, { children: (p = Object.keys(a)) == null ? void 0 : p.map((e, l) => {
-      var i;
-      const n = o[e] || {}, { title: u, divider: f = !0 } = n;
+    /* @__PURE__ */ r(I, { children: (a = Object.keys(p)) == null ? void 0 : a.map((e, l) => {
+      var u;
+      const o = n[e] || {}, { title: i, divider: f = !0 } = o;
       return /* @__PURE__ */ c(M, { children: [
         l && f ? /* @__PURE__ */ r(m, { role: "separator" }) : "",
-        u && /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(x, { title: u }) }),
-        (i = a[e]) == null ? void 0 : i.map((t) => {
+        i && /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(x, { title: i }) }),
+        (u = p[e]) == null ? void 0 : u.map((t) => {
           var s;
           return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(
             v,
@@ -32,7 +33,7 @@ const q = ({ search: d, optionGroups: o = {}, options: h, onChange: b, optionTyp
               onChange: b,
               label: t.label,
               badge: t.badge,
-              type: t.type || ((s = o == null ? void 0 : o[e]) == null ? void 0 : s.optionType) || g,
+              type: t.type || ((s = n == null ? void 0 : n[e]) == null ? void 0 : s.optionType) || g,
               value: t.value,
               checked: t.checked
             }
@@ -43,5 +44,5 @@ const q = ({ search: d, optionGroups: o = {}, options: h, onChange: b, optionTyp
   ] });
 };
 export {
-  q as ToolbarOptions
+  w as ToolbarOptions
 };

package/dist/components/Toolbar/ToolbarSearch.js

@@ -1,40 +1,41 @@
-import { jsxs as r, jsx as c } from "react/jsx-runtime";
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import { Icon as a } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { IconButton as l } from "../Button/IconButton.js";
+import { IconButton as m } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
-import '../../assets/ToolbarSearch.css';const m = "_field_dvezx_1", p = "_icon_dvezx_5", d = "_input_dvezx_14", _ = "_clear_dvezx_30", o = {
-  field: m,
+import "../../Autocomplete-hEFuiN2u.js";
+import '../../assets/ToolbarSearch.css';const l = "_field_dvezx_1", p = "_icon_dvezx_5", d = "_input_dvezx_14", _ = "_clear_dvezx_30", o = {
+  field: l,
   icon: p,
   input: d,
   clear: _
-}, N = ({ value: e, name: n, placeholder: s = "Search", onChange: t, onClear: i }) => /* @__PURE__ */ r("div", { className: o.field, children: [
-  /* @__PURE__ */ c(
+}, g = ({ value: t, name: e, placeholder: n = "Search", onChange: r, onClear: c }) => /* @__PURE__ */ s("div", { className: o.field, children: [
+  /* @__PURE__ */ i(
     "input",
     {
       type: "search",
-      value: e,
-      name: n,
-      placeholder: s,
+      value: t,
+      name: e,
+      placeholder: n,
       className: o.input,
-      onChange: t
+      onChange: r
     }
   ),
-  /* @__PURE__ */ c(a, { name: "magnifying-glass", className: o.icon }),
-  i && /* @__PURE__ */ c(
-    l,
+  /* @__PURE__ */ i(a, { name: "magnifying-glass", className: o.icon }),
+  c && /* @__PURE__ */ i(
+    m,
     {
       icon: "x-mark",
       color: "secondary",
       variant: "solid",
       size: "custom",
       className: o.clear,
-      onClick: i
+      onClick: c
     }
   )
 ] });
 export {
-  N as ToolbarSearch
+  g as ToolbarSearch
 };