@altinn/altinn-components 0.7.2 → 0.7.4

package/dist/components/List/ListItemControls.js

@@ -1,19 +1,9 @@
-import { jsx as t, jsxs as l, Fragment as m } from "react/jsx-runtime";
-import { Badge as i } from "../Badge/Badge.js";
-import { ContextMenu as a } from "../ContextMenu/ContextMenu.js";
-import { Icon as d } from "../Icon/Icon.js";
+import "react/jsx-runtime";
+import "../Badge/Badge.js";
+import { L as e } from "../../Autocomplete-BNV2UfH3.js";
+import "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
-import '../../assets/ListItemControls.css';const _ = "_controls_dduzt_1", p = "_linkText_dduzt_14", x = "_linkIcon_dduzt_19", o = {
-  controls: _,
-  linkText: p,
-  linkIcon: x
-}, T = ({ badge: s, linkText: r, linkIcon: c, menu: n, children: e }) => /* @__PURE__ */ t("div", { className: o.controls, "data-menu": n && !0, children: e || /* @__PURE__ */ l(m, { children: [
-  s && /* @__PURE__ */ t(i, { ...s }),
-  r && /* @__PURE__ */ t("span", { className: o.linkText, children: r }),
-  c && /* @__PURE__ */ t(d, { name: c, className: o.linkIcon }),
-  n && /* @__PURE__ */ t(a, { ...n, className: o.menu })
-] }) });
 export {
-  T as ListItemControls
+  e as ListItemControls
 };

package/dist/components/List/index.js

@@ -1,20 +1,19 @@
 import { ListItemBase as o } from "./ListItemBase.js";
 import { ListItemHeader as m } from "./ListItemHeader.js";
-import { ListItemLabel as i } from "./ListItemLabel.js";
-import { ListItemMedia as f } from "./ListItemMedia.js";
-import { ListItemControls as x } from "./ListItemControls.js";
-import { ListItemSelect as a } from "./ListItemSelect.js";
-import { ListItem as d } from "./ListItem.js";
-import { ListBase as b } from "./ListBase.js";
-import { List as n } from "./List.js";
+import { ListItemLabel as L } from "./ListItemLabel.js";
+import { ListItemMedia as a } from "./ListItemMedia.js";
+import { a as p, L as x } from "../../Autocomplete-BNV2UfH3.js";
+import { ListItemSelect as l } from "./ListItemSelect.js";
+import { ListBase as B } from "./ListBase.js";
+import { List as c } from "./List.js";
 export {
-  n as List,
-  b as ListBase,
-  d as ListItem,
+  c as List,
+  B as ListBase,
+  p as ListItem,
   o as ListItemBase,
   x as ListItemControls,
   m as ListItemHeader,
-  i as ListItemLabel,
-  f as ListItemMedia,
-  a as ListItemSelect
+  L as ListItemLabel,
+  a as ListItemMedia,
+  l as ListItemSelect
 };

package/dist/components/Menu/Menu.js

@@ -1,18 +1,18 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { MenuBase as u } from "./MenuBase.js";
-import { MenuItems as p } from "./MenuItems.js";
-import { MenuSearch as f } from "./MenuSearch.js";
-const j = ({
+import { M as p } from "../../Autocomplete-BNV2UfH3.js";
+import { MenuSearch as M } from "./MenuSearch.js";
+const h = ({
   theme: m = "inherit",
   defaultItemColor: o = "subtle",
   defaultItemSize: t = "sm",
   groups: n,
-  items: i = [],
+  items: s = [],
   search: r
-}) => /* @__PURE__ */ s(u, { theme: m, children: [
-  r && /* @__PURE__ */ e(f, { ...r }),
-  /* @__PURE__ */ e(p, { items: i, groups: n, defaultItemColor: o, defaultItemSize: t })
+}) => /* @__PURE__ */ i(u, { theme: m, children: [
+  r && /* @__PURE__ */ e(M, { ...r }),
+  /* @__PURE__ */ e(p, { items: s, groups: n, defaultItemColor: o, defaultItemSize: t })
 ] });
 export {
-  j as Menu
+  h as Menu
 };

package/dist/components/Menu/MenuItem.stories.js

@@ -8,7 +8,8 @@ import "../RootProvider/RootProvider.js";
 import { MetaItem as p } from "../Meta/MetaItem.js";
 import { MenuItem as o } from "./MenuItem.js";
 import { MenuBase as m } from "./MenuBase.js";
-const v = {
+import "../../Autocomplete-BNV2UfH3.js";
+const I = {
   title: "Menu/MenuItem",
   component: o,
   tags: ["autodocs"],
@@ -17,12 +18,12 @@ const v = {
     id: "inbox",
     onClick: i()
   }
-}, I = {
+}, A = {
   args: {
     icon: "inbox",
     title: "Innboks"
   }
-}, A = {
+}, C = {
   args: {
     icon: "inbox",
     title: "Innboks",
@@ -30,14 +31,14 @@ const v = {
       label: "4"
     }
   }
-}, C = {
+}, G = {
   args: {
     size: "lg",
     icon: "inbox",
     title: "Innboks",
     color: "strong"
   }
-}, G = {
+}, M = {
   args: {
     size: "lg",
     icon: "inbox",
@@ -56,7 +57,7 @@ const v = {
     },
     title: "Eirik Horneland"
   }
-}, M = {
+}, z = {
   args: {
     avatarGroup: {
       items: [
@@ -84,7 +85,7 @@ const v = {
     },
     title: "Sportsklubben Brann"
   }
-}, z = {
+}, H = {
   args: {
     avatarGroup: {
       defaultType: "company",
@@ -102,19 +103,19 @@ const v = {
     },
     title: "3 virksomheter"
   }
-}, H = {
+}, S = {
   args: {
     ...c.args,
     size: "lg",
     description: "Født: XX.XX.XXXX"
   }
-}, S = {
+}, E = {
   args: {
     ...g.args,
     size: "lg",
     description: "Org nr.: XX.XX.XXXX"
   }
-}, E = () => {
+}, L = () => {
   const t = ["global", "neutral", "company", "person", "global-dark"], a = ["neutral", "subtle", "strong", "company", "person"];
   return /* @__PURE__ */ n("div", { style: { display: "flex", width: "100%" }, children: t.map((e) => /* @__PURE__ */ n("div", { style: { flexGrow: 1 }, children: /* @__PURE__ */ n(l, { theme: e, children: /* @__PURE__ */ n(m, { children: a.map((r) => /* @__PURE__ */ s("div", { children: [
     /* @__PURE__ */ n(o, { icon: "inbox", title: "Title", color: r, id: "inbox" }),
@@ -122,16 +123,16 @@ const v = {
   ] }, r)) }) }) }, e)) });
 };
 export {
-  G as AlertBadge,
+  M as AlertBadge,
   g as Company,
-  S as CompanyAccount,
-  z as CompanyGroup,
-  I as Default,
-  A as DefaultBadge,
-  C as Large,
+  E as CompanyAccount,
+  H as CompanyGroup,
+  A as Default,
+  C as DefaultBadge,
+  G as Large,
   c as Person,
-  H as PersonAccount,
-  M as PersonGroup,
-  E as ThemesAndColors,
-  v as default
+  S as PersonAccount,
+  z as PersonGroup,
+  L as ThemesAndColors,
+  I as default
 };

package/dist/components/Menu/MenuItems.js

@@ -1,64 +1,13 @@
-"use client";
-import { jsx as a, jsxs as i, Fragment as z } from "react/jsx-runtime";
-import { Fragment as L } from "react";
+import "react/jsx-runtime";
+import "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as k } from "./MenuItem.js";
-import { MenuHeader as B } from "./MenuHeader.js";
-import { MenuList as E, MenuListItem as m } from "./MenuBase.js";
-import { useMenu as G } from "../../hooks/useMenu.js";
-const H = ({
-  level: c = 0,
-  expanded: I,
-  items: b,
-  groups: r = {},
-  defaultItemColor: l,
-  defaultItemSize: o
-}) => {
-  const { menu: f } = G({
-    items: b,
-    groups: r,
-    groupByKey: "groupId",
-    keyboardEvents: !1
-  });
-  return /* @__PURE__ */ a(E, { expanded: I, children: f.map((t, s) => {
-    const n = (t == null ? void 0 : t.props) || {}, { title: x, divider: v = !0 } = n, y = f[s + 1];
-    return /* @__PURE__ */ i(L, { children: [
-      (c > 0 || s) && v ? /* @__PURE__ */ a(m, { role: "separator" }) : "",
-      x && /* @__PURE__ */ a(m, { children: /* @__PURE__ */ a(B, { title: x }) }),
-      t == null ? void 0 : t.items.map((M, h) => {
-        const { active: F } = M, { groupId: K, ...e } = M.props || {}, { expanded: d } = e, j = t == null ? void 0 : t.items[h + 1];
-        return /* @__PURE__ */ i(m, { role: "presentation", expanded: d, children: [
-          /* @__PURE__ */ a(
-            k,
-            {
-              ...e,
-              color: (e == null ? void 0 : e.color) || (n == null ? void 0 : n.defaultItemColor) || l,
-              size: (e == null ? void 0 : e.size) || (n == null ? void 0 : n.defaultItemSize) || o,
-              active: F,
-              tabIndex: e != null && e.disabled ? -1 : 0
-            }
-          ),
-          d && (e == null ? void 0 : e.items) && /* @__PURE__ */ i(z, { children: [
-            /* @__PURE__ */ a(
-              H,
-              {
-                expanded: d,
-                level: c + 1,
-                items: e == null ? void 0 : e.items,
-                groups: r,
-                defaultItemColor: l,
-                defaultItemSize: o
-              }
-            ),
-            (y || j) && /* @__PURE__ */ a(m, { role: "separator" })
-          ] })
-        ] }, h);
-      })
-    ] }, s);
-  }) });
-};
+import "./MenuItem.js";
+import "./MenuHeader.js";
+import { M as n } from "../../Autocomplete-BNV2UfH3.js";
+import "./MenuBase.js";
+import "../../hooks/useMenu.js";
 export {
-  H as MenuItems
+  n as MenuItems
 };

package/dist/components/Menu/MenuItems.stories.js

@@ -1,4 +1,4 @@
-import { MenuItems as r } from "./MenuItems.js";
+import { M as r } from "../../Autocomplete-BNV2UfH3.js";
 const o = {
   title: "Menu/MenuItems",
   component: r,

package/dist/components/Menu/MenuSearch.js

@@ -5,17 +5,18 @@ import "../../index-L8X2o7IH.js";
 import "react";
 import { IconButton as a } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
+import "../../Autocomplete-BNV2UfH3.js";
 import '../../assets/MenuSearch.css';const l = "_field_mo7y9_1", p = "_icon_mo7y9_5", _ = "_input_mo7y9_14", f = "_clear_mo7y9_31", o = {
   field: l,
   icon: p,
   input: _,
   clear: f
-}, k = ({ value: t, name: n, placeholder: s = "Søk", onChange: e, onClear: c }) => /* @__PURE__ */ m("div", { className: o.field, children: [
+}, j = ({ value: c, name: n, placeholder: s = "Søk", onChange: e, onClear: t }) => /* @__PURE__ */ m("div", { className: o.field, children: [
   /* @__PURE__ */ i(
     "input",
     {
       type: "search",
-      value: t,
+      value: c,
       name: n,
       placeholder: s,
       className: o.input,
@@ -24,7 +25,7 @@ import '../../assets/MenuSearch.css';const l = "_field_mo7y9_1", p = "_icon_mo7y
     }
   ),
   /* @__PURE__ */ i(r, { name: "magnifying-glass", className: o.icon }),
-  c && /* @__PURE__ */ i(
+  t && /* @__PURE__ */ i(
     a,
     {
       icon: "x-mark",
@@ -32,10 +33,10 @@ import '../../assets/MenuSearch.css';const l = "_field_mo7y9_1", p = "_icon_mo7y
       variant: "solid",
       size: "custom",
       className: o.clear,
-      onClick: c
+      onClick: t
     }
   )
 ] });
 export {
-  k as MenuSearch
+  j as MenuSearch
 };

package/dist/components/Menu/index.js

@@ -1,12 +1,12 @@
 import { MenuItemBase as o } from "./MenuItemBase.js";
 import { MenuItemLabel as m } from "./MenuItemLabel.js";
-import { MenuItemMedia as u } from "./MenuItemMedia.js";
+import { MenuItemMedia as M } from "./MenuItemMedia.js";
 import { MenuItem as p } from "./MenuItem.js";
 import { MenuInputField as x } from "./MenuInputField.js";
-import { MenuOption as a } from "./MenuOption.js";
-import { MenuSearch as s } from "./MenuSearch.js";
+import { MenuOption as I } from "./MenuOption.js";
+import { MenuSearch as i } from "./MenuSearch.js";
 import { MenuHeader as L } from "./MenuHeader.js";
-import { MenuItems as B } from "./MenuItems.js";
+import { M as B } from "../../Autocomplete-BNV2UfH3.js";
 import { MenuBase as c, MenuList as h, MenuListItem as F } from "./MenuBase.js";
 import { Menu as O } from "./Menu.js";
 export {
@@ -17,10 +17,10 @@ export {
   p as MenuItem,
   o as MenuItemBase,
   m as MenuItemLabel,
-  u as MenuItemMedia,
+  M as MenuItemMedia,
   B as MenuItems,
   h as MenuList,
   F as MenuListItem,
-  a as MenuOption,
-  s as MenuSearch
+  I as MenuOption,
+  i as MenuSearch
 };

package/dist/components/Page/PageHeader.js

@@ -4,19 +4,20 @@ import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { Heading as c } from "../Typography/Heading.js";
+import "../../Autocomplete-BNV2UfH3.js";
 import { SectionBase as n } from "./SectionBase.js";
-import { P as l, s as i } from "../../PageHeaderMedia-DpZ09tLD.js";
-import { PageNav as p } from "./PageNav.js";
-const y = ({ title: a, description: s, icon: o, avatar: m, avatarGroup: t, children: h, ...d }) => /* @__PURE__ */ r(n, { as: "header", ...d, children: [
-  /* @__PURE__ */ e(p, {}),
+import { P as p, s as i } from "../../PageHeaderMedia-DpZ09tLD.js";
+import { PageNav as l } from "./PageNav.js";
+const z = ({ title: a, description: o, icon: s, avatar: m, avatarGroup: t, children: h, ...d }) => /* @__PURE__ */ r(n, { as: "header", ...d, children: [
+  /* @__PURE__ */ e(l, {}),
   /* @__PURE__ */ r("section", { className: i.header, children: [
-    /* @__PURE__ */ e(l, { icon: o, avatar: m, avatarGroup: t }),
+    /* @__PURE__ */ e(p, { icon: s, avatar: m, avatarGroup: t }),
     /* @__PURE__ */ r("div", { className: i.title, children: [
       /* @__PURE__ */ e(c, { size: "md", children: a }),
-      /* @__PURE__ */ e("div", { className: "description", children: s })
+      /* @__PURE__ */ e("div", { className: "description", children: o })
     ] })
   ] })
 ] });
 export {
-  y as PageHeader
+  z as PageHeader
 };

package/dist/components/Searchbar/Autocomplete.d.ts

@@ -6,4 +6,4 @@ export interface AutocompleteProps {
     expanded?: boolean;
     className?: string;
 }
-export declare const Autocomplete: ({ className, items, groups, expanded }: AutocompleteProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Autocomplete: import('react').ForwardRefExoticComponent<AutocompleteProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Searchbar/Autocomplete.js

@@ -1,25 +1,9 @@
-import { jsx as e } from "react/jsx-runtime";
-import { createElement as f } from "react";
-import { useMenu as I } from "../../hooks/useMenu.js";
-import { AutocompleteBase as x } from "./AutocompleteBase.js";
-import { AutocompleteGroup as A } from "./AutocompleteGroup.js";
-import { AutocompleteItem as y } from "./AutocompleteItem.js";
-const M = ({ className: t, items: r, groups: m = {}, expanded: p }) => {
-  const { menu: n, setActiveIndex: u } = I({
-    items: r,
-    groups: m,
-    groupByKey: "groupId",
-    keyboardEvents: !0
-  });
-  return /* @__PURE__ */ e(x, { className: t, expanded: p, children: n.map((o, i) => /* @__PURE__ */ f(A, { ...o.props, key: i }, /* @__PURE__ */ e("ul", { children: o.items.map((c, s) => {
-    const {
-      active: l,
-      menuIndex: d,
-      props: { groupId: h, ...a }
-    } = c;
-    return /* @__PURE__ */ e("li", { tabIndex: -1, onMouseEnter: () => u(d), children: /* @__PURE__ */ e(y, { ...a, active: l }) }, s);
-  }) }))) });
-};
+import "react/jsx-runtime";
+import "react";
+import "../../hooks/useMenu.js";
+import "./AutocompleteBase.js";
+import "./AutocompleteGroup.js";
+import { A } from "../../Autocomplete-BNV2UfH3.js";
 export {
-  M as Autocomplete
+  A as Autocomplete
 };

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

@@ -1,5 +1,5 @@
 import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import { Autocomplete as l } from "./Autocomplete.js";
+import { A as l } from "../../Autocomplete-BNV2UfH3.js";
 const o = {
   title: "Header/Autocomplete",
   component: l,
@@ -31,7 +31,10 @@ const o = {
         id: "1a",
         type: "scope",
         href: "#",
-        label: "Skriv minst 3 tegn for søke i innboks"
+        label: () => /* @__PURE__ */ e("span", { children: [
+          /* @__PURE__ */ t("mark", { children: "sk" }),
+          " i innboks"
+        ] })
       },
       {
         id: "1b",
@@ -44,11 +47,11 @@ const o = {
       }
     ]
   }
-}, a = {
+}, r = {
   args: {
     groups: {
       3: {
-        title: "Mest relevante treff"
+        title: "Anbefalte treff"
       }
     },
     items: [
@@ -58,7 +61,7 @@ const o = {
         type: "scope",
         href: "#",
         badge: {
-          label: "2 treff"
+          label: "24 treff"
         },
         label: () => /* @__PURE__ */ e("span", { children: [
           /* @__PURE__ */ t("mark", { children: "skatt" }),
@@ -81,7 +84,7 @@ const o = {
         type: "dialog",
         href: "#",
         title: "Skattemeldingen 2023",
-        summary: "Skattemeldingen er klar for innsending."
+        description: "Skattemeldingen er klar for innsending."
       },
       {
         id: "2b",
@@ -89,15 +92,82 @@ const o = {
         type: "dialog",
         href: "#",
         title: "Skatteoppgjør 2022",
-        summary: "Skatteoppgjøret ditt er klart."
+        description: "Skatteoppgjøret ditt er klart."
+      },
+      {
+        id: "2c",
+        groupId: "3",
+        type: "dialog",
+        href: "#",
+        title: "Skatteoppgjør 2020",
+        description: "Skatteoppgjøret ditt er ferdigstilt."
       }
     ]
   }
-}, r = {
+}, g = {
   args: {
-    ...a.args,
+    groups: {
+      3: {
+        title: "Søker etter «skatt» ..."
+      }
+    },
+    items: r.args.items.map((a) => a.groupId === "3" ? {
+      ...a,
+      type: null,
+      icon: "inbox",
+      loading: !0
+    } : a)
+  }
+}, k = {
+  args: {
+    ...r.args,
+    groups: {
+      noHits: {
+        title: "Ingen treff"
+      }
+    },
     items: [
-      ...a.args.items,
+      {
+        id: "1a",
+        groupId: "1",
+        type: "scope",
+        href: "#",
+        disabled: !0,
+        badge: {
+          label: "Ingen treff"
+        },
+        label: () => /* @__PURE__ */ e("span", { children: [
+          /* @__PURE__ */ t("mark", { children: "skatt" }),
+          " i innboks"
+        ] })
+      },
+      {
+        id: "1b",
+        groupId: "1",
+        type: "scope",
+        href: "#",
+        label: () => /* @__PURE__ */ e("span", { children: [
+          /* @__PURE__ */ t("mark", { children: "skatt" }),
+          " i hele Altinn"
+        ] })
+      },
+      {
+        groupId: "noHits",
+        id: "2a",
+        type: "information",
+        label: () => /* @__PURE__ */ e("span", { children: [
+          "Søk etter ",
+          /* @__PURE__ */ t("mark", { children: "skatt" }),
+          " ga ingen treff."
+        ] })
+      }
+    ]
+  }
+}, i = {
+  args: {
+    ...r.args,
+    items: [
+      ...r.args.items,
       {
         id: "2c",
         groupId: "4",
@@ -116,7 +186,7 @@ const o = {
       }
     ]
   }
-}, i = {
+}, c = {
   args: {
     groups: {
       2: {
@@ -188,9 +258,9 @@ const o = {
       }
     ]
   }
-}, g = {
+}, f = {
   args: {
-    ...r.args,
+    ...i.args,
     groups: {
       2: {
         title: "Søkeforslag"
@@ -200,7 +270,7 @@ const o = {
       }
     },
     items: [
-      ...r.args.items,
+      ...i.args.items,
       {
         id: "2a",
         groupId: "2",
@@ -242,59 +312,15 @@ const o = {
       }
     ]
   }
-}, k = {
-  args: {
-    ...i.args,
-    groups: {
-      noHits: {
-        title: "Ingen treff"
-      }
-    },
-    items: [
-      {
-        id: "1a",
-        groupId: "1",
-        type: "scope",
-        href: "#",
-        disabled: !0,
-        badge: {
-          label: "Ingen treff"
-        },
-        label: () => /* @__PURE__ */ e("span", { children: [
-          /* @__PURE__ */ t("mark", { children: "skatt" }),
-          " i innboks"
-        ] })
-      },
-      {
-        id: "1b",
-        groupId: "1",
-        type: "scope",
-        href: "#",
-        label: () => /* @__PURE__ */ e("span", { children: [
-          /* @__PURE__ */ t("mark", { children: "skatt" }),
-          " i hele Altinn"
-        ] })
-      },
-      {
-        groupId: "noHits",
-        id: "2a",
-        type: "information",
-        label: () => /* @__PURE__ */ e("span", { children: [
-          "Søk etter ",
-          /* @__PURE__ */ t("mark", { children: "skatt" }),
-          " ga ingen treff."
-        ] })
-      }
-    ]
-  }
 };
 export {
+  g as LoadingResults,
   k as NoHits,
   p as Scopes,
-  r as ScopesAndMixedResults,
-  a as ScopesAndResults,
-  i as ScopesAndSuggestions,
-  g as ScopesResultsAndSuggestions,
+  i as ScopesAndMixedResults,
+  r as ScopesAndResults,
+  c as ScopesAndSuggestions,
+  f as ScopesResultsAndSuggestions,
   d as TooFewWords,
   o as default
 };

package/dist/components/Searchbar/AutocompleteBase.d.ts

@@ -3,5 +3,6 @@ export interface AutocompleteBaseProps {
     className?: string;
     expanded?: boolean;
     children?: ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const AutocompleteBase: ({ expanded, children, className }: AutocompleteBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutocompleteBase: import('react').ForwardRefExoticComponent<Omit<AutocompleteBaseProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;