@altinn/altinn-components 0.56.12 → 0.56.14

package/dist/SearchField-CYYz0JvC.js

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