@altinn/altinn-components 0.56.3 → 0.56.5

package/dist/SearchField-CN2mo8ck.js

@@ -1,636 +0,0 @@
-"use client";
-import { jsx as r, jsxs as L } from "react/jsx-runtime";
-import { c as fe } from "./index-p1eeF8LQ.js";
-import { useRef as W, useState as X, useMemo as R, useEffect as j, Fragment as me, useLayoutEffect as oe, useId as ne } from "react";
-import { Icon as he } from "./components/Icon/Icon.js";
-import { Button as ye } from "./components/Button/Button.js";
-import "./components/RootProvider/RootProvider.js";
-import { useMenu as se } from "./hooks/useMenu.js";
-import { Input as xe } from "./components/Forms/Input.js";
-import { FieldBase as ge } from "./components/Forms/FieldBase.js";
-import "./components/Snackbar/useSnackbar.js";
-import { S as Ie } from "./MagnifyingGlass-bwVhw07z.js";
-import { S as ve } from "./XMark-tKk6aExO.js";
-import { MenuItem as ie } from "./components/Menu/MenuItem.js";
-import { MenuList as Z } from "./components/Menu/MenuList.js";
-import { MenuListItem as ae } from "./components/Menu/MenuListItem.js";
-import { MenuListGroup as ce } from "./components/Menu/MenuListGroup.js";
-import { MenuListDivider as le } from "./components/Menu/MenuListDivider.js";
-import { MenuListHeading as ue } from "./components/Menu/MenuListHeading.js";
-import { a as be } from "./useMenuVirtualization-Cs426RCN.js";
-import { useMenuSearch as we } from "./components/Menu/useMenuSearch.js";
-import './assets/SearchField.css';const _e = "_search_18jfe_1", ke = "_searchInput_18jfe_8", te = {
-  search: _e,
-  searchInput: ke
-}, de = ({
-  style: v,
-  index: b,
-  name: M,
-  value: _,
-  placeholder: p = "Search",
-  clearButtonAltText: a = "Clear search",
-  onChange: A,
-  onClear: D,
-  onNavigate: m,
-  combobox: l = !1,
-  listId: g,
-  "aria-activedescendant": C,
-  onKeyDown: h,
-  onInput: s,
-  onFocus: w,
-  ...k
-}) => /* @__PURE__ */ r("li", { className: te.search, style: v, "data-index": b, "data-menu-search": "true", children: l ? (
-  // biome-ignore lint/a11y/useFocusableInteractive: <explanation>
-  // biome-ignore lint/a11y/useAriaPropsForRole: <explanation>
-  // biome-ignore lint/a11y/useSemanticElements: <explanation>
-  /* @__PURE__ */ r("div", { role: "combobox", "aria-expanded": !0, "aria-haspopup": "listbox", "aria-owns": g, children: /* @__PURE__ */ r(
-    re,
-    {
-      size: "xs",
-      className: te.searchInput,
-      name: M,
-      value: _,
-      placeholder: p,
-      onChange: A,
-      onClear: D,
-      clearButtonAltText: a,
-      autoComplete: "off",
-      autoCorrect: "off",
-      autoCapitalize: "off",
-      "aria-autocomplete": "list",
-      "aria-controls": g,
-      "aria-activedescendant": C,
-      autoFocus: !0,
-      onKeyDown: (c) => {
-        (c.key === "ArrowUp" || c.key === "ArrowDown") && (c.preventDefault(), m?.()), h?.(c);
-      },
-      onInput: s,
-      onFocus: w,
-      ...k
-    }
-  ) })
-) : /* @__PURE__ */ r(
-  re,
-  {
-    size: "xs",
-    className: te.searchInput,
-    name: M,
-    value: _,
-    placeholder: p,
-    onChange: A,
-    onClear: D,
-    clearButtonAltText: a,
-    autoComplete: "off",
-    autoCorrect: "off",
-    autoCapitalize: "off",
-    autoFocus: !0,
-    onKeyDown: (c) => {
-      (c.key === "ArrowUp" || c.key === "ArrowDown") && (c.preventDefault(), m?.()), h?.(c);
-    },
-    onInput: s,
-    onFocus: w,
-    ...k
-  }
-) }), pe = ({
-  level: v = 0,
-  maxLevels: b,
-  expanded: M,
-  a11yMode: _ = "menu",
-  open: p,
-  scrollToTopOnOpen: a = !1,
-  autoActivateFirstItem: A = !0,
-  autoFocusList: D = !0,
-  announceNoResults: m = !1,
-  search: l,
-  items: g,
-  groups: C = {},
-  size: h,
-  id: s,
-  color: w,
-  variant: k,
-  scrollRefStyles: c = {},
-  keyboardEvents: y = !1,
-  onSelect: S = () => {
-  },
-  onActiveItemIdChange: I
-}) => {
-  if (b && v >= b)
-    return null;
-  const f = _ === "combobox", u = f && s ? `${s}-listbox` : s, B = W(p), z = W(p), [Y, n] = X(!1), P = R(
-    () => g.map((o, x) => ({
-      ...o,
-      id: o.id || `${s}-item-${x}`
-    })),
-    [g, s]
-  ), G = W(null), { menu: T, setActiveIndex: H, activeItem: $ } = se({
-    items: P,
-    groups: C,
-    groupByKey: "groupId",
-    keyboardEvents: y,
-    autoActivateFirstItem: A,
-    onSelect: S,
-    ref: G
-  });
-  return j(() => {
-    I?.($?.id);
-  }, [$?.id, I]), j(() => {
-    if (!a) {
-      B.current = p;
-      return;
-    }
-    const o = B.current;
-    B.current = p, p && !o && G.current?.scrollTo({ top: 0 });
-  }, [p, a]), j(() => {
-    const o = z.current;
-    z.current = p, !(!y || l || !D) && p && !o && requestAnimationFrame(() => G.current?.focus?.({ preventScroll: !0 }));
-  }, [p, y, l]), j(() => {
-    if (f && m) {
-      H(0), n(!0);
-      return;
-    }
-  }, [m, f, H]), /* @__PURE__ */ L(
-    Z,
-    {
-      variant: k,
-      expanded: M,
-      ref: G,
-      style: c,
-      id: u,
-      role: f ? "listbox" : void 0,
-      tabIndex: y ? -1 : void 0,
-      children: [
-        l && /* @__PURE__ */ r(
-          de,
-          {
-            ...l,
-            combobox: f,
-            listId: u,
-            "aria-activedescendant": f && Y ? $?.id : void 0,
-            onNavigate: f ? () => n(!0) : void 0,
-            onChange: (o) => {
-              n(!1), l.onChange?.(o);
-            },
-            onFocus: (o) => {
-              n(!1), l.onFocus?.(o);
-            },
-            onInput: (o) => {
-              n(!1), l.onInput?.(o);
-            },
-            onKeyDown: (o) => {
-              const x = o.key === "ArrowUp" || o.key === "ArrowDown", O = o.key.length === 1 || o.key === "Backspace" || o.key === "Delete";
-              f && !x && O && n(!1), l.onKeyDown?.(o);
-            }
-          }
-        ),
-        T.map((o, x) => {
-          const O = o?.props || {}, { title: F, hidden: q = !1, divider: J = !0 } = O;
-          return /* @__PURE__ */ L(me, { children: [
-            (v > 0 || x) && J ? /* @__PURE__ */ r(le, {}) : "",
-            /* @__PURE__ */ r(ce, { hidden: q, children: /* @__PURE__ */ L(Z, { role: "presentation", children: [
-              F && /* @__PURE__ */ r(ue, { title: F, level: v }),
-              o?.items.filter((U) => !U.props?.hidden).map((U, e) => {
-                const { active: t, onMouseEnter: d } = U, { groupId: N, ...i } = U.props || {}, { expanded: K } = i, V = Array.isArray(i?.items) && i.items.length > 0, Q = i.role === "checkbox" || i.role === "radio", ee = f && !Q ? "option" : i.role;
-                return /* @__PURE__ */ L(
-                  ae,
-                  {
-                    expanded: K,
-                    onMouseLeave: () => H(-1),
-                    role: f || Q ? "presentation" : void 0,
-                    children: [
-                      /* @__PURE__ */ r(
-                        ie,
-                        {
-                          ...i,
-                          size: i?.size || O?.size || h,
-                          color: i?.color || O?.color || w,
-                          variant: i?.variant || O?.variant || k,
-                          active: t,
-                          role: ee,
-                          selected: f && !Q ? t : i.selected,
-                          tabIndex: i?.disabled || y ? -1 : i.tabIndex ?? 0,
-                          onMouseEnter: d,
-                          "aria-haspopup": V ? "menu" : void 0,
-                          "aria-expanded": V ? K : void 0,
-                          "aria-controls": V ? i.id + "-menu" : void 0
-                        }
-                      ),
-                      K && i?.items && /* @__PURE__ */ r(
-                        pe,
-                        {
-                          id: i.id + "-menu",
-                          expanded: K,
-                          level: v + 1,
-                          maxLevels: b,
-                          items: i?.items,
-                          groups: C,
-                          size: h,
-                          color: w,
-                          variant: k
-                        }
-                      )
-                    ]
-                  },
-                  e
-                );
-              })
-            ] }) }, x)
-          ] }, x);
-        })
-      ]
-    }
-  );
-}, Ae = (v) => {
-  const b = W(null), M = W(null), [_, p] = X(0), {
-    search: a,
-    items: A,
-    groups: D = {},
-    size: m,
-    color: l,
-    variant: g,
-    keyboardEvents: C,
-    scrollRefStyles: h = {},
-    id: s,
-    expanded: w,
-    a11yMode: k = "menu",
-    open: c,
-    scrollToTopOnOpen: y = !1,
-    autoActivateFirstItem: S = !0,
-    announceNoResults: I = !1,
-    onActiveItemIdChange: f
-  } = v, u = k === "combobox", B = u && s ? `${s}-listbox` : s, z = W(c), [Y, n] = X(!1), P = R(
-    () => A.map((e, t) => ({
-      ...e,
-      id: e.id || `${s}-item-${t}`
-    })),
-    [A, s]
-  ), { menu: G, activeItem: T, setActiveIndex: H, activeIndex: $ } = se({
-    items: P,
-    groups: D,
-    groupByKey: "groupId",
-    keyboardEvents: C,
-    autoActivateFirstItem: S,
-    ref: b
-  }), { flatMenu: o, virtualizer: x, scrollMaxHeight: O } = be({
-    menu: G,
-    scrollRef: b
-  });
-  oe(() => {
-    const e = M.current;
-    if (!e) return;
-    const t = Math.round(e.offsetTop);
-    p((d) => d === t ? d : t);
-  });
-  const F = R(() => {
-    const e = T?.id;
-    if (e)
-      return o.findIndex((d) => d.type === "item" && d.itemProps?.id === e);
-    if ($ < 0) return -1;
-    let t = -1;
-    for (let d = 0; d < o.length; d++)
-      if (o[d]?.type === "item" && (t += 1, t === $))
-        return d;
-    return -1;
-  }, [T?.id, $, o]), q = W(null);
-  oe(() => {
-    const e = q?.current, t = typeof e == "number" ? F <= e : !1;
-    q.current = F;
-    const d = t ? F : F + 2;
-    if (!t) {
-      const V = x.getOffsetForIndex(d, "auto");
-      if (!V) return;
-      const [Q, ee] = V;
-      if (ee === "auto") return;
-      x.scrollToOffset(Q + _ + 10, { align: "start" });
-      return;
-    }
-    if (F <= 3) {
-      x.scrollToOffset(0);
-      return;
-    }
-    const N = x.getOffsetForIndex(F - 1, "auto");
-    if (!N) return;
-    const [i, K] = N;
-    K !== "auto" && x.scrollToOffset(i + _ + 10, { align: "start" });
-  }, [F, _, x, q]);
-  const J = R(() => {
-    const e = /* @__PURE__ */ new Map();
-    let t = 0;
-    return o.forEach((d, N) => {
-      d.type === "item" && (t += 1, e.set(N, t));
-    }), { positions: e, total: t };
-  }, [o]);
-  j(() => {
-    f?.(T?.id);
-  }, [T?.id, f]), j(() => {
-    if (u && I) {
-      H(0), n(!0);
-      return;
-    }
-  }, [I, u, H]), j(() => {
-    if (!y) {
-      z.current = c;
-      return;
-    }
-    const e = z.current;
-    z.current = c, c && !e && b.current?.scrollTo({ top: 0 });
-  }, [c, y]);
-  const U = {
-    position: "relative",
-    maxHeight: h?.maxHeight || O,
-    margin: "-0.5rem",
-    padding: "0.5rem",
-    minWidth: h?.minWidth ?? "20rem",
-    overflowY: "auto",
-    ...h
-  };
-  return /* @__PURE__ */ L(
-    Z,
-    {
-      ref: b,
-      style: U,
-      variant: g,
-      color: l,
-      expanded: w,
-      id: B,
-      role: u ? "listbox" : void 0,
-      children: [
-        a && /* @__PURE__ */ r(
-          de,
-          {
-            ...a,
-            combobox: u,
-            listId: B,
-            "aria-activedescendant": u && Y ? T?.id : void 0,
-            onNavigate: u ? () => n(!0) : void 0,
-            onChange: (e) => {
-              n(!1), a.onChange?.(e);
-            },
-            onFocus: (e) => {
-              n(!1), a.onFocus?.(e);
-            },
-            onInput: (e) => {
-              n(!1), a.onInput?.(e);
-            },
-            onKeyDown: (e) => {
-              const t = e.key === "ArrowUp" || e.key === "ArrowDown", d = e.key.length === 1 || e.key === "Backspace" || e.key === "Delete";
-              u && !t && d && n(!1), a.onKeyDown?.(e);
-            }
-          }
-        ),
-        /* @__PURE__ */ r(
-          ce,
-          {
-            ref: M,
-            style: {
-              position: "relative",
-              height: `${x.getTotalSize()}px`,
-              width: "100%"
-            },
-            children: /* @__PURE__ */ r(Z, { style: { width: "100%", minWidth: "100%" }, children: x.getVirtualItems().map((e) => {
-              const t = o[e.index];
-              if (!t) return null;
-              const d = {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                transform: `translateY(${e.start}px)`
-              }, N = {
-                style: d,
-                index: e.index,
-                "data-index": e.index,
-                ref: x.measureElement
-              };
-              switch (t.type) {
-                case "divider":
-                  return /* @__PURE__ */ r(
-                    le,
-                    {
-                      ...N,
-                      style: { ...d, padding: "0.25rem 0" }
-                    },
-                    e.key
-                  );
-                case "header":
-                  return /* @__PURE__ */ r(ue, { ...N, title: t.title || "", level: 1 }, e.key);
-                default: {
-                  const i = t.itemProps?.role === "checkbox" || t.itemProps?.role === "radio", K = u && !i ? "option" : t.itemProps?.role;
-                  return /* @__PURE__ */ r(
-                    ae,
-                    {
-                      ...N,
-                      role: u || i ? "presentation" : "menuitem",
-                      children: /* @__PURE__ */ r(
-                        ie,
-                        {
-                          ...t.itemProps || {},
-                          size: t.itemProps?.size || m,
-                          color: t.itemProps?.color || l,
-                          variant: t.itemProps?.variant || g,
-                          active: t.active,
-                          role: K,
-                          selected: u && !i ? t.active : t.itemProps?.selected,
-                          "aria-posinset": u ? J.positions.get(e.index) : void 0,
-                          "aria-setsize": u ? J.total : void 0,
-                          tabIndex: t.itemProps?.disabled || C ? -1 : 0
-                        }
-                      )
-                    },
-                    e.key
-                  );
-                }
-              }
-            }) })
-          }
-        )
-      ]
-    }
-  );
-}, Me = ({
-  searchable: v,
-  search: b,
-  items: M = [],
-  groups: _ = {},
-  variant: p = "default",
-  size: a,
-  level: A = 0,
-  maxLevels: D = 3,
-  virtualized: m = !1,
-  keyboardEvents: l = !1,
-  scrollRefStyles: g = {},
-  onActiveItemIdChange: C,
-  a11yMode: h = "menu",
-  open: s,
-  scrollToTopOnOpen: w,
-  autoFocusList: k,
-  id: c
-}) => {
-  const y = we({ ...b, items: M, groups: _ }), S = v ? y.search : b, I = v && y.hasQuery && y.resultCount === 0, f = v ? y.items : M, u = v ? { ..._, ...y.groups } : _, B = h !== "combobox";
-  return m ? /* @__PURE__ */ r(
-    Ae,
-    {
-      id: c,
-      search: S,
-      announceNoResults: I,
-      items: f,
-      groups: u,
-      variant: p,
-      size: a,
-      level: A,
-      maxLevels: D,
-      keyboardEvents: l,
-      scrollRefStyles: g,
-      onActiveItemIdChange: C,
-      a11yMode: h,
-      open: s,
-      scrollToTopOnOpen: w,
-      autoActivateFirstItem: B,
-      autoFocusList: k
-    }
-  ) : /* @__PURE__ */ r(
-    pe,
-    {
-      id: c,
-      search: S,
-      announceNoResults: I,
-      items: f,
-      groups: u,
-      variant: p,
-      size: a,
-      level: A,
-      maxLevels: D,
-      keyboardEvents: l,
-      scrollRefStyles: g,
-      onActiveItemIdChange: C,
-      a11yMode: h,
-      open: s,
-      scrollToTopOnOpen: w,
-      autoActivateFirstItem: B,
-      autoFocusList: k
-    }
-  );
-}, Ce = "_field_lyp0p_1", De = "_container_lyp0p_5", Be = "_icon_lyp0p_11", Fe = "_input_lyp0p_35", Se = "_clear_lyp0p_54", Ne = "_clearButton_lyp0p_66", ze = "_autocomplete_lyp0p_95", E = {
-  field: Ce,
-  container: De,
-  icon: Be,
-  input: Fe,
-  clear: Se,
-  clearButton: Ne,
-  autocomplete: ze
-}, re = ({
-  className: v,
-  collapsible: b,
-  size: M,
-  color: _ = "neutral",
-  label: p,
-  value: a,
-  onClear: A,
-  clearButtonAltText: D = "Clear search",
-  menu: m,
-  minLength: l,
-  ...g
-}) => {
-  const C = ne(), [h, s] = X(!1), w = g.id || `search-field-${C}`, k = `${w}-listbox`, [c, y] = X(void 0), S = "searchfield-clear-button-" + ne(), I = R(() => !a || typeof l == "number" && typeof a == "string" && a.length < l ? !1 : h, [h, l, a]), f = R(() => (m?.items ?? []).map((n) => ({
-    ...n,
-    onClick: () => {
-      n.onClick?.(), s(!1);
-    }
-  })), [m]), u = (n) => {
-    if (n.key === "Enter" && I) {
-      m?.items?.[0]?.onClick?.(), s(!1);
-      return;
-    }
-    if (n.key === "Escape" && I) {
-      n.preventDefault(), n.stopPropagation(), s(!1), m?.onClose(), document.getElementById(w)?.focus();
-      return;
-    }
-    g.onKeyDown?.(n), s(!0);
-  }, B = () => {
-    s(!0);
-  }, z = (n) => {
-    if (!h) return;
-    const P = n.relatedTarget;
-    P && n.currentTarget.contains(P) || s(!1);
-  }, Y = (n) => {
-    n.relatedTarget?.id === S && y(void 0), g.onBlur?.(n);
-  };
-  return /* @__PURE__ */ L(
-    ge,
-    {
-      size: M,
-      color: _,
-      label: p,
-      className: fe(E.field, v),
-      onBlurCapture: z,
-      children: [
-        /* @__PURE__ */ L("div", { className: E.container, children: [
-          /* @__PURE__ */ r(
-            xe,
-            {
-              ...g,
-              id: w,
-              type: "search",
-              value: a,
-              className: E.input,
-              "data-collapsible": b,
-              autoCapitalize: "off",
-              autoComplete: "off",
-              minLength: l,
-              onKeyDown: u,
-              onBlur: Y,
-              ...m && {
-                role: "combobox",
-                "aria-autocomplete": "list",
-                "aria-expanded": !!I,
-                "aria-haspopup": "listbox",
-                "aria-controls": k,
-                "aria-activedescendant": I ? c : void 0,
-                onFocus: B
-              }
-            }
-          ),
-          /* @__PURE__ */ r(he, { svgElement: Ie, className: E.icon }),
-          A && !!a && /* @__PURE__ */ r("span", { className: E.clear, children: /* @__PURE__ */ r(
-            ye,
-            {
-              id: S,
-              "data-testid": "clear-button",
-              size: "xs",
-              rounded: !0,
-              icon: !0,
-              variant: "tinted",
-              className: E.clearButton,
-              onClick: () => {
-                A?.(), document.getElementById(w)?.focus();
-              },
-              "aria-label": D,
-              "data-action": "clear-input",
-              children: /* @__PURE__ */ r(ve, {})
-            }
-          ) })
-        ] }),
-        m && I && /* @__PURE__ */ r("div", { className: E.autocomplete, "data-color": "company", "aria-hidden": !I, children: /* @__PURE__ */ r(
-          Me,
-          {
-            ...m,
-            id: k,
-            items: f,
-            groups: m?.groups,
-            keyboardEvents: !0,
-            a11yMode: "combobox",
-            open: I,
-            autoFocusList: !1,
-            onActiveItemIdChange: y
-          }
-        ) })
-      ]
-    }
-  );
-};
-export {
-  Me as M,
-  re as S,
-  Ae as V,
-  pe as a,
-  de as b
-};