@altinn/altinn-components 0.56.6 → 0.56.7

package/dist/SearchField-d2UqvD48.js

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