@ironsource/shared-ui 2.2.0-rc.42 → 2.2.0-rc.48

package/components/dropdown/common/Dropdown.common.js

@@ -1,399 +1,476 @@
-import { useToggle as ke } from "../../../composables/useToggle.js";
-import { inject as Ge, ref as r, computed as c, watch as b, useSlots as Le, toRaw as w, nextTick as N, provide as Ue, onMounted as Be } from "vue";
-import { isObjectInArray as ue } from "../../../utils/array.js";
-import { objectsEqual as He } from "../../../utils/object.js";
-import { useClamp as qe, useVirtualList as Xe, onClickOutside as ie, useInfiniteScroll as $e } from "@vueuse/core";
-import { Mode as x, Type as U, DropdownContext as je } from "./DropdownContext.js";
-import { pxToRem as ze } from "../../../utils/style.js";
-import { useEditableContext as We } from "../../table-cells/common/EditableContext.js";
-import { useGroupedOptions as Je } from "./useGroupedOptions.js";
-const nl = (e, d, y) => {
-  const B = Ge("isTreeDropdown", !1), {
-    sortOutGroups: H,
-    flattenAndMarkGroupOptions: q,
-    isGroup: X,
-    selectAllWithGroups: re,
-    isIndeterminateGrouped: oe,
-    allSelectedGrouped: $,
-    areAllPreviousSelected: ce,
-    groupedChildOptionsLength: se
-  } = Je(e), de = (l, t) => e.multi && Array.isArray(l) ? e.comparingKey ? l?.findIndex(
-    (i) => i[e.comparingKey] === t[e.comparingKey]
-  ) > -1 : ue(l, t) : e.comparingKey ? l?.[e.comparingKey] === t[e.comparingKey] : l === t;
-  let j;
-  ((l) => {
-    l[l.None = 0] = "None", l[l.Next = 1] = "Next", l[l.Previous = -1] = "Previous", l[l.NextPage = 10] = "NextPage", l[l.PrevPage = -10] = "PrevPage";
-  })(j || (j = {}));
-  const a = r(
-    e.selected
-  ), K = We(), n = c({
+import { useToggle as je } from "../../../composables/useToggle.js";
+import { inject as ze, ref as s, computed as c, watch as A, useSlots as We, toRaw as T, nextTick as R, provide as Fe, onMounted as Je } from "vue";
+import { isObjectInArray as se } from "../../../utils/array.js";
+import { objectsEqual as Qe } from "../../../utils/object.js";
+import { useClamp as Ye, useVirtualList as Ze, onClickOutside as de, useInfiniteScroll as pe } from "@vueuse/core";
+import { Mode as N, Type as q, DropdownContext as et } from "./DropdownContext.js";
+import { pxToRem as tt } from "../../../utils/style.js";
+import { useEditableContext as lt } from "../../table-cells/common/EditableContext.js";
+import { useGroupedOptions as at } from "./useGroupedOptions.js";
+const vt = (t, v, g) => {
+  const X = ze("isTreeDropdown", !1), {
+    sortOutGroups: $,
+    flattenAndMarkGroupOptions: k,
+    isGroup: j,
+    selectAllWithGroups: fe,
+    isIndeterminateGrouped: ve,
+    allSelectedGrouped: z,
+    areAllPreviousSelected: ge,
+    groupedChildOptionsLength: ye
+  } = at(t), W = (e, l) => t.multi && Array.isArray(e) ? t.comparingKey ? e?.findIndex(
+    (a) => a[t.comparingKey] === l[t.comparingKey]
+  ) > -1 : se(e, l) : t.comparingKey ? e?.[t.comparingKey] === l[t.comparingKey] : e === l;
+  let F;
+  ((e) => {
+    e[e.None = 0] = "None", e[e.Next = 1] = "Next", e[e.Previous = -1] = "Previous", e[e.NextPage = 10] = "NextPage", e[e.PrevPage = -10] = "PrevPage";
+  })(F || (F = {}));
+  const n = s(
+    t.selected
+  ), _ = lt(), r = c({
     get() {
-      return K?.value?.value ?? a.value;
+      return _?.value?.value ?? n.value;
     },
-    set(l) {
-      K.onChange?.(l), K.onClose?.(), d("update:selected", l);
+    set(e) {
+      _.onChange?.(e), _.onClose?.(), v("update:selected", e);
     }
   });
-  b(
-    () => e.selected,
+  A(
+    () => t.selected,
     () => {
-      a.value = e.selected, v.value = e.selected;
+      n.value = t.selected, y.value = t.selected;
     }
   );
-  const ve = Le(), D = r(null), m = r(null), z = r(null), R = r(null), W = r(null), M = r(null), fe = r(), J = r(null), Q = r(null), Y = r(null), ge = 8, ye = c(() => M.value ? M.value.getBoundingClientRect().height + ge + e.distance : 0), C = r(!1), h = r([]), T = r(-1), O = r(""), v = r(e.selected || []), Z = () => M.value?.focus(), [S, he, Oe] = ke({
-    disabled: e.disabled,
-    initialValue: e.defaultOpen
+  const he = We(), x = s(null), S = s(null), D = s(null), V = s(null), J = s(null), I = s(null), be = s(), Q = s(null), Y = s(null), Z = s(null), me = 8, Oe = c(() => I.value ? I.value.getBoundingClientRect().height + me + t.distance : 0), C = s(!1), O = s([]), P = s(-1), b = s(""), y = s(t.selected || []), p = () => I.value?.focus(), [h, Se, Ae] = je({
+    disabled: t.disabled,
+    initialValue: t.defaultOpen
   });
-  b(
-    () => e.disabled,
-    (l) => {
-      l !== void 0 && Oe(l);
+  A(
+    () => t.disabled,
+    (e) => {
+      e !== void 0 && Ae(e);
     }
   );
-  const F = (l) => {
-    Se.value = he(l);
-  }, Se = c({
+  const ee = (e) => {
+    Te.value = Se(e);
+  }, Te = c({
     get() {
-      return e.isOpen;
+      return t.isOpen;
     },
-    set(l) {
-      d("update:isOpen", l);
+    set(e) {
+      v("update:isOpen", e);
     }
-  }), me = c(() => o.value.length - 1), g = qe(0, 0, me), p = c(() => n.value ? e.displayValue(n.value) : ""), Ae = (l) => {
-    if (!l.value.length && !e.multiOptionsPlaceholderPrefix && !e.multiOptionsPlaceholderSuffix)
-      return e.placeholder;
-    const t = !e.multiOptionsPlaceholderPrefix && !e.multiOptionsPlaceholderSuffix ? `${l.value.length} selected` : `${e.multiOptionsPlaceholderPrefix ?? ""}${l.value.length ?? "0"}${e.multiOptionsPlaceholderSuffix ?? ""}`;
-    return l.value.length == 1 && e.displayValue ? e.displayValue(l.value[0]) : t;
-  }, be = c(() => {
-    if (!e.multi)
-      return n.value ? e.displayValue(n.value) : e.placeholder;
-    if (Array.isArray(a.value))
-      return Ae(a);
-  }), E = c(() => {
-    if (Array.isArray(a.value))
-      return e.groupedOptions ? $(o, a) : a.value.length === o.value.length;
-  }), Te = c(() => !e.multi || !Array.isArray(a.value) ? !1 : e.groupedOptions ? oe(
+  }), xe = c(() => o.value.length - 1), te = c(
+    () => g.VERSION === 4 && t.showSelectAll !== !1 && t.multi && !b.value && !t.loading && !!t.options.length && !(t.minSelections || t.maxSelections)
+  ), Ie = c(() => te.value ? -1 : 0), d = Ye(0, Ie, xe), le = c(() => r.value ? t.displayValue(r.value) : ""), Pe = (e) => {
+    if (!e.value.length && !t.multiOptionsPlaceholderPrefix && !t.multiOptionsPlaceholderSuffix)
+      return t.placeholder;
+    const l = !t.multiOptionsPlaceholderPrefix && !t.multiOptionsPlaceholderSuffix ? `${e.value.length} selected` : `${t.multiOptionsPlaceholderPrefix ?? ""}${e.value.length ?? "0"}${t.multiOptionsPlaceholderSuffix ?? ""}`;
+    return e.value.length == 1 && t.displayValue ? t.displayValue(e.value[0]) : l;
+  }, Ke = c(() => {
+    if (!t.multi)
+      return r.value ? t.displayValue(r.value) : t.placeholder;
+    if (Array.isArray(n.value))
+      return Pe(n);
+  }), G = c(() => {
+    if (Array.isArray(n.value))
+      return t.groupedOptions ? z(o, n) : n.value.length === o.value.length;
+  }), we = c(() => !t.multi || !Array.isArray(n.value) ? !1 : t.groupedOptions ? ve(
     o,
-    a
-  ) : a.value.length > 0 && a.value.length < o.value.length), _ = (l) => {
-    O.value = l;
-  }, P = c(() => e.groupedOptions ? q(e.options) : e.options), Pe = c(() => {
-    if (e.groupedOptions && !e.resortGroupedOptions || ce(
-      P,
-      v
+    n
+  ) : n.value.length > 0 && n.value.length < o.value.length), L = (e) => {
+    b.value = e;
+  }, K = c(() => t.groupedOptions ? k(t.options) : t.options), Ne = c(() => {
+    if (t.groupedOptions && !t.resortGroupedOptions || ge(
+      K,
+      y
     ))
-      return P.value;
-    const l = {
+      return K.value;
+    const e = {
       selected: [],
       notSelected: []
     };
-    w(P).value.forEach((i) => {
-      const u = (e.comparingKey ? v.value.findIndex(
-        (L) => L[e.comparingKey] === i[e.comparingKey]
-      ) > -1 : v.value.includes(i)) ? "selected" : "notSelected";
-      l[u].push(i);
+    T(K).value.forEach((a) => {
+      const u = (t.comparingKey ? y.value.findIndex(
+        (w) => w[t.comparingKey] === a[t.comparingKey]
+      ) > -1 : y.value.includes(a)) ? "selected" : "notSelected";
+      e[u].push(a);
     });
-    const t = e.groupedOptions ? H(l.notSelected) : l.notSelected;
-    return [].concat(l.selected, t);
+    const l = t.groupedOptions ? $(e.notSelected) : e.notSelected;
+    return [].concat(e.selected, l);
   }), o = c(() => {
-    const l = Array.isArray(v.value) && e.multi && y.VERSION === 4 && !B ? Pe.value : P.value;
-    if (e.onSearch) {
-      const t = l.filter((i) => e.groupedOptions && X(i) ? i : e.onSearch(i, O.value));
-      return e.groupedOptions ? H(t) : t;
+    const e = Array.isArray(y.value) && t.multi && g.VERSION === 4 && !X ? Ne.value : K.value;
+    if (t.onSearch) {
+      const l = e.filter((a) => t.groupedOptions && j(a) ? a : t.onSearch(a, b.value));
+      return t.groupedOptions ? $(l) : l;
     } else
-      return l;
-  }), Ie = c(() => h.value[0]?.hasSubtitle), ee = c(() => s.mode === x.Multi), le = c(
-    () => Ie.value ? y.MULTILINE_LIST_HEIGHT : y.LIST_HEIGHT
+      return e;
+  }), De = c(() => O.value[0]?.hasSubtitle), ae = c(() => f.mode === N.Multi), ne = c(
+    () => De.value ? g.MULTILINE_LIST_HEIGHT : g.LIST_HEIGHT
   ), {
-    list: V,
-    containerProps: k,
-    wrapperProps: we,
-    scrollTo: I
-  } = Xe(o, {
-    itemHeight: le.value,
-    overscan: e.disableVirtualScroll ? 1 / 0 : 2
+    list: U,
+    containerProps: E,
+    wrapperProps: Ce,
+    scrollTo: B
+  } = Ze(o, {
+    itemHeight: ne.value,
+    overscan: t.disableVirtualScroll ? 1 / 0 : 2
   });
-  b(
-    () => e.isOpen,
-    (l) => {
-      F(l);
+  A(
+    () => t.isOpen,
+    (e) => {
+      ee(e);
     }
-  ), b([T], async () => {
-    await N();
-  }), b(
-    [S, g, T],
-    async ([l], [t]) => {
-      S.value && (await N(), T.value !== -1 && l !== t && setTimeout(() => {
-        if (!(e.multi && y.VERSION === 4))
-          if (I(T.value), e.groupedOptions) {
-            const i = P.value.findIndex(
-              (f) => f === n.value
+  ), A([P], async () => {
+    await R();
+  });
+  const M = (e) => {
+    e == null || e < 0 || E.ref?.value && B(e);
+  };
+  A(
+    [h, d, P],
+    async ([e, l], [a, i]) => {
+      h.value && (await R(), P.value !== -1 && e !== a && setTimeout(() => {
+        if (!(t.multi && g.VERSION === 4))
+          if (M(P.value), t.groupedOptions) {
+            const u = K.value.findIndex(
+              (w) => w === r.value
             );
-            I(i);
+            M(u);
           } else
-            I(T.value);
-      }), g.value && setTimeout(() => {
-        I(g.value);
+            M(P.value);
+      }), d.value && (l !== i || e !== a) && setTimeout(() => {
+        M(d.value);
       }));
     }
-  ), b(O, () => {
-    d("onsearch", O.value), I(0);
+  ), A(b, () => {
+    v("onsearch", b.value), B(0);
   });
-  const A = (l, t = !1) => {
-    e.disabled || (F(l), N(() => {
-      S.value && d("opened"), S.value || d("closed"), D.value && t && D.value.focus();
+  const m = (e, l = !1) => {
+    t.disabled || (ee(e), R(() => {
+      h.value && v("opened"), h.value || v("closed"), x.value && l && x.value.focus();
     }));
   };
-  b(S, (l) => {
-    if (l) {
-      O.value = "", ee.value && Array.isArray(n.value) && (v.value = w(n.value).slice());
+  A(h, (e) => {
+    if (e) {
+      b.value = "";
+      const l = o.value.findIndex(
+        (a) => W(T(r.value), a)
+      );
+      d.value = l > -1 ? l : 0, ae.value && Array.isArray(r.value) && (y.value = T(r.value).slice());
       return;
     }
-    Z();
+    p();
   });
-  const xe = () => {
-    if (E.value) {
-      a.value = [];
+  const Ee = () => {
+    if (G.value) {
+      n.value = [];
       return;
     }
-    if (Array.isArray(a.value)) {
-      if (e.groupedOptions)
-        re(o, a);
+    if (Array.isArray(n.value)) {
+      if (t.groupedOptions)
+        fe(o, n);
       else {
-        if (a.value.length === o.value.length) {
-          a.value = [];
+        if (n.value.length === o.value.length) {
+          n.value = [];
           return;
         }
-        a.value = o.value;
+        n.value = o.value;
       }
-      d("selectAll");
+      v("selectAll");
     }
-  }, De = () => {
-    xe(), y.VERSION !== 4 && (n.value = a.value);
-  }, Me = (l = !0) => {
-    a.value = [], l ? (n.value = [], v.value = [], d("clear")) : e.dynamicFilterMode || d("clear");
-  }, G = (l, t) => {
-    if (l = w(l), y.VERSION === 4 ? l[e.disabledOptionKey] : h.value[t]?.disabled)
+  }, ie = () => {
+    Ee(), g.VERSION !== 4 && (r.value = n.value);
+  }, Me = (e = !0) => {
+    n.value = [], e ? (r.value = [], y.value = [], v("clear")) : t.dynamicFilterMode || v("clear");
+  }, H = (e, l) => {
+    if (e = T(e), g.VERSION === 4 ? e[t.disabledOptionKey] : O.value[l]?.disabled)
       return;
-    if (T.value = t, !e.multi) {
-      e.keepOpen || A(!1), s.goToOption(
+    if (P.value = l, !t.multi) {
+      t.keepOpen || m(!1), f.goToOption(
         0
         /* None */
-      ), n.value = l, _(""), Z(), s.type === U.Search && m.value && (m.value.value = e.displayValue(l)), ae();
+      ), r.value = e, L(""), p(), f.type === q.Search && S.value && (S.value.value = t.displayValue(e)), re();
       return;
     }
-    if (!Array.isArray(a.value))
+    if (!Array.isArray(n.value))
       return;
-    m.value?.focus();
-    const f = w(a.value);
-    if (ue(f, l) || e.comparingKey && f.findIndex(
-      (u) => u[e.comparingKey] === l[e.comparingKey]
+    S.value?.focus();
+    const i = T(n.value);
+    if (se(i, e) || t.comparingKey && i.findIndex(
+      (u) => u[t.comparingKey] === e[t.comparingKey]
     ) > -1) {
-      a.value = f.filter((u) => e.comparingKey ? u[e.comparingKey] !== l[e.comparingKey] : !He(u, l));
+      n.value = i.filter((u) => t.comparingKey ? u[t.comparingKey] !== e[t.comparingKey] : !Qe(u, e));
       return;
     } else {
-      a.value = [...f, l];
+      n.value = [...i, e];
       return;
     }
-  }, Ce = (l) => h.value[l]?.disabled, s = {
-    activeIndex: g,
-    options: h,
-    selectedOption: n,
-    labelRef: W,
-    activeOption: R,
-    listRef: D,
-    clearable: e.clearable,
-    type: ve.input ? U.Search : U.Dropdown,
-    mode: e.multi ? x.Multi : x.Single,
-    query: O,
-    selectedValue: p,
-    toggle: A,
-    disabled: e.disabled,
-    open: S,
-    mandatory: e.mandatory,
-    size: e.size,
-    placeholder: e.placeholder,
-    select: G,
+  }, Re = (e) => O.value[e]?.disabled, f = {
+    activeIndex: d,
+    options: O,
+    selectedOption: r,
+    labelRef: J,
+    activeOption: V,
+    listRef: x,
+    clearable: t.clearable,
+    type: he.input ? q.Search : q.Dropdown,
+    mode: t.multi ? N.Multi : N.Single,
+    query: b,
+    selectedValue: le,
+    toggle: m,
+    disabled: t.disabled,
+    open: h,
+    mandatory: t.mandatory,
+    size: t.size,
+    placeholder: t.placeholder,
+    select: H,
     clearSelection: () => {
-      _(""), n.value = s.mode === x.Single ? null : [], v.value = s.mode === x.Single ? null : [], m.value && (m.value.value = "");
+      L(""), r.value = f.mode === N.Single ? null : [], y.value = f.mode === N.Single ? null : [], S.value && (S.value.value = "");
     },
-    search: _,
-    goToOption: async (l) => {
-      if (!S.value)
+    search: L,
+    goToOption: async (e) => {
+      if (!h.value)
         return;
-      let t = g.value + l;
-      const i = h.value.filter(
+      let l = d.value + e;
+      const a = O.value.filter(
         (u) => u.disabled
-      ).length, f = o.value.length - i;
-      for (t > f && (t = f + 1); ; ) {
-        if (!h.value[t]?.disabled) {
-          R.value = o.value[t], g.value = t;
+      ).length, i = o.value.length - a;
+      for (l > i && (l = i + 1); ; ) {
+        if (!O.value[l]?.disabled) {
+          V.value = o.value[l], d.value = l;
           return;
         }
-        if ((l === 1 || l === 10) && (t = t + 1), (l === -1 || l === -10) && (t = t + -1), !!Ce(g.value)) {
-          R.value = o.value[t], g.value = t;
+        if ((e === 1 || e === 10) && (l = l + 1), (e === -1 || e === -10) && (l = l + -1), !!Re(d.value)) {
+          V.value = o.value[l], d.value = l;
           return;
         }
       }
     },
-    registerInput: (l) => {
-      m.value = l.value;
+    registerInput: (e) => {
+      S.value = e.value;
     },
-    registerOption: (l, t, i) => {
-      h.value = [...h.value, { id: l, disabled: t, hasSubtitle: i }];
+    registerOption: (e, l, a) => {
+      O.value = [...O.value, { id: e, disabled: l, hasSubtitle: a }];
     },
-    unRegisterOption(l) {
-      h.value = h.value.filter((t) => t.id !== l);
+    unRegisterOption(e) {
+      O.value = O.value.filter((l) => l.id !== e);
     }
   };
-  Ue(je, s), ie(
-    D,
+  Fe(et, f), de(
+    x,
     () => {
-      S.value && ne();
+      h.value && ce();
     },
     {
       ignore: [
-        M,
-        J,
+        I,
         Q,
         Y,
-        m,
-        k.ref
+        Z,
+        S,
+        E.ref
       ]
     }
   );
-  const Ne = () => {
-    m.value && (m.value.value = s.query.value = "");
-  }, te = () => {
-    e.multi && !B && (e.groupedOptions ? C.value = $(
+  const ke = () => {
+    S.value && (S.value.value = f.query.value = "");
+  }, ue = () => {
+    t.multi && !X && (t.groupedOptions ? C.value = z(
       o,
-      a
-    ) : C.value = e.options.length === e.selected.length);
+      n
+    ) : C.value = t.options.length === t.selected.length);
   };
-  Be(async () => {
-    e.autoFocus && (await N(), setTimeout(() => {
-      z.value.focus();
-    })), s.goToOption(0), te();
-  }), b([() => e.options, () => e.selected], () => {
-    te();
+  Je(async () => {
+    t.autoFocus && (await R(), setTimeout(() => {
+      D.value.focus();
+    })), f.goToOption(0), ue();
+  }), A([() => t.options, () => t.selected], () => {
+    ue();
   });
-  const ae = () => {
-    e.multi && (n.value = a.value, Array.isArray(n.value) && (v.value = w(n.value).slice(), C.value = e.groupedOptions ? se(e.options) === n.value.length : e.options.length === n.value.length)), d("apply", n.value), d("allSelectedChanged", E.value), A(!1), Ne();
-  }, ne = () => {
-    ee.value && Array.isArray(v.value) && (n.value = w(v.value).slice()), O.value = "", A(!1);
-  }, Ke = (l) => {
-    if (!e.disableKeyboardEvents)
-      switch (l.key) {
+  const re = () => {
+    t.multi && (r.value = n.value, Array.isArray(r.value) && (y.value = T(r.value).slice(), C.value = t.groupedOptions ? ye(t.options) === r.value.length : t.options.length === r.value.length)), v("apply", r.value), v("allSelectedChanged", G.value), m(!1), ke();
+  }, ce = () => {
+    ae.value && Array.isArray(y.value) && (r.value = T(y.value).slice()), b.value = "", m(!1);
+  }, _e = (e) => {
+    if (!t.disableKeyboardEvents)
+      switch (e.key) {
         case "Space":
         case "Enter":
         case "ArrowUp":
         case "ArrowDown":
-          A(!0), l.preventDefault();
+          m(!0), e.preventDefault();
       }
-  }, Re = (l) => {
-    if (!e.disableKeyboardEvents)
-      switch (l.key) {
+  }, Ve = (e) => {
+    const l = e.target;
+    if (!l)
+      return !1;
+    const a = l.tagName;
+    return a === "INPUT" || a === "TEXTAREA" || l.isContentEditable ? !0 : !(!(a === "BUTTON" || a === "A" || l.getAttribute?.("role") === "button") || I.value?.contains?.(l));
+  }, Ge = (e) => {
+    const l = e.target;
+    if (!l)
+      return !1;
+    const a = l.tagName;
+    return !(!(a === "BUTTON" || a === "A" || l.getAttribute?.("role") === "button") || I.value?.contains?.(l));
+  }, oe = () => {
+    if (d.value === -1 && te.value) {
+      ie();
+      return;
+    }
+    const e = o.value[d.value];
+    e !== void 0 && (Ue(e) || (H(e, d.value), f.mode === N.Single && !t.keepOpen && m(!1)));
+  }, Le = c(() => {
+    if (!t.comparingKey || !(t.minSelections || t.maxSelections))
+      return [];
+    const e = T(r.value);
+    if (!Array.isArray(e))
+      return [];
+    if (e.length <= t.minSelections)
+      return e.map((l) => l[t.comparingKey]);
+    if (t.maxSelections && e.length >= t.maxSelections) {
+      const l = t.groupedOptions ? k(t.options) : t.options, a = e.map((i) => i[t.comparingKey]);
+      return l.filter((i) => i && !a.includes(i[t.comparingKey])).map((i) => i[t.comparingKey]);
+    }
+    return [];
+  }), Ue = (e) => e ? e[t.disabledOptionKey] ? !0 : !!t.comparingKey && Le.value.includes(e[t.comparingKey]) : !1, Be = () => {
+    const e = [];
+    return D.value && e.push(D.value), x.value && e.push(
+      ...Array.from(
+        x.value.querySelectorAll(
+          'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        )
+      )
+    ), e.filter((l) => l === D.value || l.offsetParent !== null);
+  }, He = (e) => {
+    if (!t.disableKeyboardEvents)
+      switch (e.key) {
+        case "Tab": {
+          if (!h.value)
+            break;
+          const l = Be();
+          if (l.length <= 1) {
+            m(!1);
+            return;
+          }
+          e.preventDefault();
+          const a = document.activeElement, i = l.indexOf(a), u = e.shiftKey ? -1 : 1;
+          l[((i === -1 ? 0 : i) + u + l.length) % l.length]?.focus();
+          break;
+        }
         case "ArrowUp": {
-          s.goToOption(
+          f.goToOption(
             -1
             /* Previous */
-          ), l.preventDefault(), l.stopPropagation();
+          ), e.preventDefault(), e.stopPropagation();
           break;
         }
         case "ArrowDown": {
-          s.goToOption(
+          f.goToOption(
             1
             /* Next */
-          ), l.preventDefault(), l.stopPropagation();
+          ), e.preventDefault(), e.stopPropagation();
           break;
         }
         case "Escape": {
-          A(!1), l.preventDefault();
+          m(!1), e.preventDefault();
           break;
         }
         case "PageUp": {
-          s.goToOption(
+          f.goToOption(
             10
             /* NextPage */
-          ), l.preventDefault();
+          ), e.preventDefault();
           break;
         }
         case "PageDown": {
-          s.goToOption(
+          f.goToOption(
             -10
             /* PrevPage */
-          ), l.preventDefault();
+          ), e.preventDefault();
+          break;
+        }
+        case " ":
+        case "Spacebar": {
+          if (Ve(e) || g.VERSION !== 4)
+            break;
+          if (e.preventDefault(), !h.value) {
+            m(!0);
+            break;
+          }
+          oe();
           break;
         }
         case "Enter": {
-          if (!S.value) {
-            A(!0);
+          if (Ge(e))
+            break;
+          if (!h.value) {
+            m(!0);
             return;
           }
-          G(o.value[g.value], g.value), s.mode === x.Single && !e.keepOpen && A(!1), l.preventDefault();
+          e.preventDefault(), oe();
           break;
         }
       }
-  }, Ee = c(() => {
-    if (e.loading)
+  }, qe = c(() => {
+    if (t.loading)
       return 8.5;
-    const l = e.loadMoreLoading && y.MAX_NUMBER_OF_OPTIONS || e.customNumberOfDisplayedOptions || V.value.reduce((L, _e) => {
-      const Ve = e.overrideOptionCountCalculation ? e.overrideOptionCountCalculation(_e.data) : 1;
-      return L + Ve;
-    }, 0), t = e.multi && e.showSelectAll && !O.value ? 1 : 0, i = l > y.MAX_NUMBER_OF_OPTIONS, f = l + t;
-    let u = i ? y.MAX_NUMBER_OF_OPTIONS + 0.1 : f;
-    return e.loadMoreLoading && e.multi && (V.value.length ? u = u + 0.1 : u = u - 0.9), e.noResultsText && u === 0 && (u = u + 1), e.withConditions && O.value && (u = u + 1), ze(
-      u * le.value + y.PADDING_PX
+    const e = t.loadMoreLoading && g.MAX_NUMBER_OF_OPTIONS || t.customNumberOfDisplayedOptions || U.value.reduce((w, Xe) => {
+      const $e = t.overrideOptionCountCalculation ? t.overrideOptionCountCalculation(Xe.data) : 1;
+      return w + $e;
+    }, 0), l = t.multi && t.showSelectAll && !b.value ? 1 : 0, a = e > g.MAX_NUMBER_OF_OPTIONS, i = e + l;
+    let u = a ? g.MAX_NUMBER_OF_OPTIONS + 0.1 : i;
+    return t.loadMoreLoading && t.multi && (U.value.length ? u = u + 0.1 : u = u - 0.9), t.noResultsText && u === 0 && (u = u + 1), t.withConditions && b.value && (u = u + 1), tt(
+      u * ne.value + g.PADDING_PX
     );
   });
-  return $e(
-    k.ref,
+  return pe(
+    E.ref,
     () => {
-      !e.loadMoreLoading && e.infiniteLoading && d("loadMore");
+      !t.loadMoreLoading && t.infiniteLoading && v("loadMore");
     },
-    { distance: e.infiniteScrollThreshold }
-  ), b(a, () => {
-    d("unsavedSelectionUpdate", a.value);
+    { distance: t.infiniteScrollThreshold }
+  ), A(n, () => {
+    v("unsavedSelectionUpdate", n.value);
   }), {
-    onKeydown: Re,
-    location: ye,
-    open: S,
-    toggleMenu: A,
-    onButtonKeydown: Ke,
-    displayedValue: be,
-    labelRef: W,
-    query: O,
-    containerProps: k,
-    calculateTableHeight: Ee,
-    wrapperProps: we,
+    onKeydown: He,
+    location: Oe,
+    open: h,
+    toggleMenu: m,
+    onButtonKeydown: _e,
+    displayedValue: Ke,
+    labelRef: J,
+    query: b,
+    containerProps: E,
+    calculateTableHeight: qe,
+    wrapperProps: Ce,
     filteredOptions: o,
-    allSelected: E,
+    allSelected: G,
     allSelectedApplied: C,
-    isIndeterminate: Te,
-    onSelectAll: De,
-    virtualOptions: V,
-    isSelected: de,
-    selectedOption: n,
-    selectedOptionPrevious: v,
-    selectedValue: p,
-    onSelect: G,
-    activeIndex: g,
-    onCancel: ne,
-    onApply: ae,
-    scrollTo: I,
-    onClickOutside: ie,
-    listRef: D,
-    buttonRef: M,
-    apply: J,
-    cancel: Q,
-    el: z,
-    triggerRef: fe,
-    clearAll: Y,
+    isIndeterminate: we,
+    onSelectAll: ie,
+    virtualOptions: U,
+    isSelected: W,
+    selectedOption: r,
+    selectedOptionPrevious: y,
+    selectedValue: le,
+    onSelect: H,
+    activeIndex: d,
+    onCancel: ce,
+    onApply: re,
+    scrollTo: B,
+    onClickOutside: de,
+    listRef: x,
+    buttonRef: I,
+    apply: Q,
+    cancel: Y,
+    el: D,
+    triggerRef: be,
+    clearAll: Z,
     onClearAllSelections: Me,
-    isGroup: X,
-    flattenAndMarkGroupOptions: q
+    isGroup: j,
+    flattenAndMarkGroupOptions: k
   };
 };
 export {
-  nl as dropdownCommon
+  vt as dropdownCommon
 };