@altinn/altinn-components 0.7.3 → 0.7.5

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-hEFuiN2u.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-hEFuiN2u.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-hEFuiN2u.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-hEFuiN2u.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-hEFuiN2u.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

@@ -5,6 +5,5 @@ export interface AutocompleteProps {
     groups?: Record<string, AutocompleteGroupProps>;
     expanded?: boolean;
     className?: string;
-    onSelect?: () => void;
 }
-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-hEFuiN2u.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-hEFuiN2u.js";
 const o = {
   title: "Header/Autocomplete",
   component: l,

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>>;

package/dist/components/Searchbar/AutocompleteBase.js

@@ -1,8 +1,11 @@
-import { jsx as a } from "react/jsx-runtime";
-import { c } from "../../index-L8X2o7IH.js";
-import '../../assets/AutocompleteBase.css';const m = "_autocomplete_1yzw8_1", s = {
-  autocomplete: m
-}, l = ({ expanded: o, children: t, className: e }) => /* @__PURE__ */ a("nav", { className: c(s.autocomplete, e), "aria-expanded": o, children: t });
+import { jsx as m } from "react/jsx-runtime";
+import { c as r } from "../../index-L8X2o7IH.js";
+import { forwardRef as c } from "react";
+import '../../assets/AutocompleteBase.css';const p = "_autocomplete_1yzw8_1", s = {
+  autocomplete: p
+}, f = c(
+  ({ expanded: o, children: t, className: e }, a) => /* @__PURE__ */ m("nav", { className: r(s.autocomplete, e), "aria-expanded": o, ref: a, children: t })
+);
 export {
-  l as AutocompleteBase
+  f as AutocompleteBase
 };

package/dist/components/Searchbar/AutocompleteItem.js

@@ -1,26 +1,9 @@
-import { jsx as e } from "react/jsx-runtime";
+import "react/jsx-runtime";
 import "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
-import { DialogListItem as r } from "../Dialog/DialogListItem.js";
-import { ListItem as o } from "../List/ListItem.js";
-import { BookmarksListItem as n } from "../Bookmarks/BookmarksListItem.js";
-import { ScopeListItem as i } from "./ScopeListItem.js";
-const h = ({ type: m, ...t }) => {
-  switch (m) {
-    case "scope":
-      return /* @__PURE__ */ e(i, { ...t, shadow: "none", tabIndex: -1 });
-    case "bookmark":
-      return /* @__PURE__ */ e(n, { ...t, shadow: "none", size: "sm", tabIndex: -1 });
-    case "dialog":
-      return /* @__PURE__ */ e(r, { ...t, shadow: "none", size: "sm", tabIndex: -1 });
-    case "information":
-      return /* @__PURE__ */ e(o, { ...t, shadow: "none", tabIndex: -1, disabled: !0 });
-    default:
-      return /* @__PURE__ */ e(o, { ...t, shadow: "none", size: "sm", tabIndex: -1 });
-  }
-};
+import { c } from "../../Autocomplete-hEFuiN2u.js";
 export {
-  h as AutocompleteItem
+  c as AutocompleteItem
 };

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

@@ -1,4 +1,4 @@
-import { ElementType, ReactNode } from 'react';
+import { ElementType, ReactElement } from 'react';
 import { BadgeProps } from '../Badge';
 import { ListItemProps } from '../List/';
 export interface ScopeListItemProps extends ListItemProps {
@@ -7,6 +7,6 @@ export interface ScopeListItemProps extends ListItemProps {
     onClick?: () => void;
     badge: BadgeProps;
     loading?: boolean;
-    label?: string | (() => ReactNode);
+    label?: string | (() => ReactElement);
 }
 export declare const ScopeListItem: ({ as, label, ...rest }: ScopeListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Searchbar/ScopeListItem.js

@@ -1,12 +1,9 @@
-import { jsx as i } from "react/jsx-runtime";
+import "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { ListItem as m } from "../List/ListItem.js";
-import '../../assets/ScopeListItem.css';const r = "_item_1a3bc_1", e = {
-  item: r
-}, I = ({ as: s = "a", label: t, ...o }) => /* @__PURE__ */ i(m, { className: e.item, linkIcon: "chevron-right", ...o, children: typeof t == "function" ? t() : t });
+import { S as s } from "../../Autocomplete-hEFuiN2u.js";
 export {
-  I as ScopeListItem
+  s as ScopeListItem
 };

package/dist/components/Searchbar/SearchField.js

@@ -1,69 +1,69 @@
 "use client";
-import { jsxs as k, jsx as i } from "react/jsx-runtime";
-import { c as q } from "../../index-L8X2o7IH.js";
-import { useRef as h } from "react";
-import { Icon as w } from "../Icon/Icon.js";
+import { jsxs as q, jsx as i } from "react/jsx-runtime";
+import { c as h } from "../../index-L8X2o7IH.js";
+import { useRef as w } from "react";
+import { Icon as N } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
-import { IconButton as n } from "../Button/IconButton.js";
-import '../../assets/SearchField.css';const N = "_field_1wjpq_1", g = "_icon_1wjpq_10", C = "_input_1wjpq_17", I = "_dismiss_1wjpq_41", b = "_clear_1wjpq_47", s = {
-  field: N,
+import { IconButton as l } from "../Button/IconButton.js";
+import '../../assets/SearchField.css';const b = "_field_1wjpq_1", g = "_icon_1wjpq_10", C = "_input_1wjpq_17", I = "_dismiss_1wjpq_41", K = "_clear_1wjpq_47", s = {
+  field: b,
   icon: g,
   input: C,
   dismiss: I,
-  clear: b
-}, F = ({
-  className: l,
-  expanded: a,
-  name: m = "q",
-  value: o,
-  placeholder: p = "Søk",
+  clear: K
+}, O = ({
+  className: m,
+  expanded: c,
+  name: p = "q",
+  value: e,
+  placeholder: u = "Søk",
   onFocus: f,
-  onBlur: u,
-  onChange: d,
-  onClear: _,
-  onClose: x,
-  onEnter: c,
-  tabIndex: y
+  onBlur: d,
+  onChange: _,
+  onClear: x,
+  onClose: y,
+  onEnter: a,
+  tabIndex: j
 }) => {
-  const e = h(null), j = (t) => {
-    var r;
-    t.key === "Escape" && ((r = e.current) == null || r.blur()), t.key === "Enter" && (c == null || c());
+  const o = w(null), k = (t) => {
+    var r, n;
+    t.key === "Escape" && ((r = o.current) == null || r.blur()), t.key === "Enter" && ((n = o.current) == null || n.blur(), a == null || a());
   };
-  return /* @__PURE__ */ k("div", { className: q(s.field, l), "aria-expanded": a, children: [
+  return /* @__PURE__ */ q("div", { className: h(s.field, m), "aria-expanded": c, children: [
     /* @__PURE__ */ i(
       "input",
       {
-        ref: e,
+        ref: o,
         onFocus: f,
-        onBlur: u,
-        name: m,
-        value: o,
-        onChange: d,
-        placeholder: p,
+        onBlur: d,
+        name: p,
+        value: e,
+        onChange: _,
+        placeholder: u,
         className: s.input,
-        onKeyUp: j,
+        onKeyUp: k,
         type: "search",
         "aria-haspopup": !0,
         autoComplete: "off",
         "aria-autocomplete": "list",
-        "aria-expanded": a,
-        tabIndex: y ?? 0
+        "aria-expanded": c,
+        tabIndex: j ?? 0
       }
     ),
-    /* @__PURE__ */ i(w, { name: "magnifying-glass", className: s.icon }),
-    o && /* @__PURE__ */ i(
-      n,
+    /* @__PURE__ */ i(N, { name: "magnifying-glass", className: s.icon }),
+    e && /* @__PURE__ */ i(
+      l,
       {
         icon: "x-mark",
         color: "secondary",
         variant: "solid",
         size: "custom",
         className: s.clear,
-        onClick: _
+        onClick: x
       }
-    ) || a && /* @__PURE__ */ i(n, { icon: "x-mark", variant: "text", className: s.dismiss, onClick: x })
+    ) || c && /* @__PURE__ */ i(l, { icon: "x-mark", variant: "text", className: s.dismiss, onClick: y })
   ] });
 };
 export {
-  F as SearchField
+  O as SearchField
 };

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

@@ -6,4 +6,4 @@ export interface SearchbarProps extends SearchFieldProps {
     expanded: boolean;
     tabIndex?: number;
 }
-export declare const Searchbar: ({ className, autocomplete, expanded, onClose, onEnter, tabIndex, ...search }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Searchbar: ({ className, autocomplete, expanded, onClose, tabIndex, ...search }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Searchbar/Searchbar.js

@@ -1,19 +1,27 @@
-import { jsxs as f, jsx as m } from "react/jsx-runtime";
-import { Autocomplete as a } from "./Autocomplete.js";
-import { SearchField as h } from "./SearchField.js";
-import { SearchbarBase as l } from "./SearchbarBase.js";
-const n = ({
-  className: t,
-  autocomplete: r,
-  expanded: o = !1,
-  onClose: i,
-  onEnter: s,
-  tabIndex: c,
-  ...e
-}) => /* @__PURE__ */ f(l, { className: t, expanded: o, autocomplete: !!r, children: [
-  /* @__PURE__ */ m(h, { ...e, expanded: o, onClose: i, onEnter: s, tabIndex: c }),
-  r && /* @__PURE__ */ m(a, { ...r, expanded: o })
-] });
+import { jsxs as p, jsx as u } from "react/jsx-runtime";
+import { useRef as h } from "react";
+import { useEnterKey as l } from "../../hooks/useEnterKey.js";
+import { A as b } from "../../Autocomplete-hEFuiN2u.js";
+import { SearchField as n } from "./SearchField.js";
+import { SearchbarBase as E } from "./SearchbarBase.js";
+const d = ({
+  className: o,
+  autocomplete: t,
+  expanded: e = !1,
+  onClose: r,
+  tabIndex: s,
+  ...a
+}) => {
+  const c = h(null);
+  return l(() => {
+    var i, f;
+    const m = (i = c.current) == null ? void 0 : i.querySelector('[data-active="true"]');
+    (f = m == null ? void 0 : m.firstElementChild) == null || f.dispatchEvent(new MouseEvent("click", { bubbles: !0 })), r == null || r();
+  }), /* @__PURE__ */ p(E, { className: o, expanded: e, autocomplete: !!t, children: [
+    /* @__PURE__ */ u(n, { ...a, expanded: e, onClose: r, tabIndex: s }),
+    t && /* @__PURE__ */ u(b, { ...t, expanded: e, ref: c })
+  ] });
+};
 export {
-  n as Searchbar
+  d as Searchbar
 };