@ironsource/shared-ui 2.0.0-rc.1 → 2.0.0-rc.2

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

@@ -1,456 +1,299 @@
-import { useToggle } from '../../../composables/useToggle.vue.js';
-import { ref, computed, watch, useSlots, nextTick, toRaw, provide, onMounted } from 'vue';
-import { isObjectInArray } from '../../../utils/array.vue.js';
-import { objectsEqual } from '../../../utils/object.vue.js';
-import { useClamp, useVirtualList, onClickOutside } from '@vueuse/core';
-import { Mode, Type, DropdownContext } from './DropdownContext.vue.js';
-import { pxToRem } from '../../../utils/style.vue.js';
-
-const dropdownCommon = (props, emit) => {
-  const isSelected = (arr, element) => {
-    if (props.multi) {
-      return isObjectInArray(arr, element);
-    }
-    return toRaw(arr) === element;
-  };
-  const MULTILINE_LIST_HEIGHT = 48;
-  const LIST_HEIGHT = 34;
-  let Focus;
-  ((Focus2) => {
-    Focus2[Focus2["None"] = 0] = "None";
-    Focus2[Focus2["Next"] = 1] = "Next";
-    Focus2[Focus2["Previous"] = -1] = "Previous";
-    Focus2[Focus2["NextPage"] = 10] = "NextPage";
-    Focus2[Focus2["PrevPage"] = -10] = "PrevPage";
-  })(Focus || (Focus = {}));
-  const selectedOptionRef = ref(
-    props.selected
-  );
-  const selectedOption = computed({
+import { useToggle as me } from "../../../composables/useToggle.vue.js";
+import { ref as i, computed as r, watch as m, useSlots as ye, nextTick as w, toRaw as T, provide as Oe, onMounted as be } from "vue";
+import { isObjectInArray as X } from "../../../utils/array.vue.js";
+import { objectsEqual as Pe } from "../../../utils/object.vue.js";
+import { useClamp as Te, useVirtualList as Ae, onClickOutside as Se } from "@vueuse/core";
+import { Mode as y, Type as E, DropdownContext as we } from "./DropdownContext.vue.js";
+import { pxToRem as Ie } from "../../../utils/style.vue.js";
+const He = (l, O) => {
+  const q = (e, t) => l.multi ? X(e, t) : T(e) === t;
+  let p;
+  ((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";
+  })(p || (p = {}));
+  const a = i(
+    l.selected
+  ), u = r({
     get() {
-      return selectedOptionRef.value;
+      return a.value;
     },
-    set(value) {
-      emit("update:selected", value);
+    set(e) {
+      O("update:selected", e);
     }
   });
-  watch(
-    () => props.selected,
+  m(
+    () => l.selected,
     () => {
-      selectedOptionRef.value = props.selected;
+      a.value = l.selected;
     }
   );
-  const slots = useSlots();
-  const listRef = ref(null);
-  const inputRef = ref(null);
-  const el = ref(null);
-  const activeOption = ref(null);
-  const labelRef = ref(null);
-  const buttonRef = ref(null);
-  const apply = ref(null);
-  const cancel = ref(null);
-  const IS_ON_TOP_PADDING = 8;
-  const location = computed(() => {
-    return buttonRef.value?.getBoundingClientRect().height + IS_ON_TOP_PADDING + props.distance;
+  const K = ye(), A = i(null), d = i(null), $ = i(null), I = i(null), R = i(null), D = i(null), j = i(null), z = i(null), J = 8, Q = r(() => D.value?.getBoundingClientRect().height + J + l.distance), c = i([]), b = i(-1), S = i(""), _ = i([]), k = () => D.value?.focus(), [v, W, Y] = me({
+    disabled: l.disabled,
+    initialValue: l.defaultOpen
   });
-  const optionsIds = ref([]);
-  const selectedIndex = ref(-1);
-  const query = ref("");
-  const selectedOptionPrevious = ref([]);
-  const focusButton = () => buttonRef.value?.focus();
-  const [open, _toggle, disable] = useToggle({
-    disabled: props.disabled,
-    initialValue: props.defaultOpen
-  });
-  watch(
-    () => props.disabled,
-    (value) => {
-      if (value !== void 0) {
-        disable(value);
-      }
+  m(
+    () => l.disabled,
+    (e) => {
+      e !== void 0 && Y(e);
     }
   );
-  const toggle = (value) => {
-    isOpen.value = _toggle(value);
-  };
-  const isOpen = computed({
+  const H = (e) => {
+    Z.value = W(e);
+  }, Z = r({
     get() {
-      return props.isOpen;
+      return l.isOpen;
     },
-    set(value) {
-      emit("update:isOpen", value);
-    }
-  });
-  const maxClamped = computed(() => {
-    return filteredOptions.value.length - 1;
-  });
-  const activeIndex = useClamp(0, 0, maxClamped);
-  const selectedValue = computed(() => {
-    if (selectedOption.value) {
-      return props.displayValue(selectedOption.value);
-    }
-    return "";
-  });
-  const getMultiselectValueToShow = (selectedOption2) => {
-    if (!selectedOption2.value.length && !props.multiOptionsPlaceholderPrefix && !props.multiOptionsPlaceholderSuffix)
-      return props.placeholder;
-    const multipleOptionsPlaceholder = !props.multiOptionsPlaceholderPrefix && !props.multiOptionsPlaceholderSuffix ? `${selectedOption2.value.length} selected` : `${props.multiOptionsPlaceholderPrefix ?? ""}${selectedOption2.value.length ?? "0"}${props.multiOptionsPlaceholderSuffix ?? ""}`;
-    return selectedOption2.value.length == 1 && !!props.displayValue ? props.displayValue(selectedOption2.value[0]) : multipleOptionsPlaceholder;
-  };
-  const displayedValue = computed(() => {
-    if (!props.multi) {
-      return selectedOption.value ? props.displayValue(selectedOption.value) : props.placeholder;
-    }
-    if (!Array.isArray(selectedOptionRef.value)) {
-      return;
-    }
-    return getMultiselectValueToShow(selectedOptionRef);
-  });
-  const allSelected = computed(() => {
-    if (!Array.isArray(selectedOptionRef.value)) {
-      return;
-    }
-    return selectedOptionRef.value.length === filteredOptions.value.length;
-  });
-  const isIndeterminate = computed(() => {
-    if (!props.multi) {
-      return false;
-    }
-    if (!Array.isArray(selectedOptionRef.value)) {
-      return false;
+    set(e) {
+      O("update:isOpen", e);
     }
-    return selectedOptionRef.value.length > 0 && selectedOptionRef.value.length < filteredOptions.value.length;
+  }), F = r(() => s.value.length - 1), o = Te(0, 0, F), ee = r(() => u.value ? l.displayValue(u.value) : ""), le = (e) => {
+    if (!e.value.length && !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix)
+      return l.placeholder;
+    const t = !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix ? `${e.value.length} selected` : `${l.multiOptionsPlaceholderPrefix ?? ""}${e.value.length ?? "0"}${l.multiOptionsPlaceholderSuffix ?? ""}`;
+    return e.value.length == 1 && l.displayValue ? l.displayValue(e.value[0]) : t;
+  }, te = r(() => {
+    if (!l.multi)
+      return u.value ? l.displayValue(u.value) : l.placeholder;
+    if (Array.isArray(a.value))
+      return le(a);
+  }), L = r(() => {
+    if (Array.isArray(a.value))
+      return a.value.length === s.value.length;
+  }), ae = r(() => !l.multi || !Array.isArray(a.value) ? !1 : a.value.length > 0 && a.value.length < s.value.length), x = (e) => {
+    S.value = e;
+  }, s = r(
+    () => l.options.filter((e) => l.onSearch(e, S.value))
+  ), ue = r(() => c.value[0]?.hasSubtitle), V = r(() => n.mode === y.Multi), C = r(
+    () => ue.value ? 48 : 34
+  ), {
+    list: U,
+    containerProps: G,
+    wrapperProps: ne,
+    scrollTo: M
+  } = Ae(s, {
+    itemHeight: C.value
   });
-  const queryChanged = (value) => {
-    query.value = value;
-  };
-  const filteredOptions = computed(
-    () => props.options.filter((option) => props.onSearch(option, query.value))
-  );
-  const hasSubtitle = computed(() => optionsIds.value[0]?.hasSubtitle);
-  const isMulti = computed(() => api.mode === Mode.Multi);
-  const itemHeight = computed(
-    () => hasSubtitle.value ? MULTILINE_LIST_HEIGHT : LIST_HEIGHT
-  );
-  const {
-    list: virtualOptions,
-    containerProps,
-    wrapperProps,
-    scrollTo
-  } = useVirtualList(filteredOptions, {
-    itemHeight: itemHeight.value
-  });
-  watch(
-    () => props.isOpen,
-    (value) => {
-      toggle(value);
+  m(
+    () => l.isOpen,
+    (e) => {
+      H(e);
     }
-  );
-  watch([selectedIndex], async () => {
-    await nextTick();
-  });
-  watch(
-    [open, activeIndex, selectedIndex],
-    async ([openNewValue], [openOldValue]) => {
-      if (!open.value) {
-        return;
-      }
-      await nextTick();
-      if (selectedIndex.value !== -1 && openNewValue !== openOldValue) {
-        setTimeout(() => {
-          scrollTo(selectedIndex.value);
-        });
-      }
-      if (activeIndex.value) {
-        setTimeout(() => {
-          scrollTo(activeIndex.value);
-        });
-      }
+  ), m([b], async () => {
+    await w();
+  }), m(
+    [v, o, b],
+    async ([e], [t]) => {
+      v.value && (await w(), b.value !== -1 && e !== t && setTimeout(() => {
+        M(b.value);
+      }), o.value && setTimeout(() => {
+        M(o.value);
+      }));
     }
   );
-  const toggleMenu = (value, withFocus = false) => {
-    if (props.disabled) {
-      return;
-    }
-    toggle(value);
-    nextTick(() => {
-      if (open.value) {
-        emit("opened");
-      }
-      if (!open.value) {
-        emit("closed");
-      }
-      if (listRef.value && withFocus) {
-        listRef.value.focus();
-      }
-    });
+  const f = (e, t = !1) => {
+    l.disabled || (H(e), w(() => {
+      v.value && O("opened"), v.value || O("closed"), A.value && t && A.value.focus();
+    }));
   };
-  watch(open, (isOpen2) => {
-    if (isOpen2) {
-      if (isMulti.value && Array.isArray(selectedOption.value)) {
-        selectedOptionPrevious.value = toRaw(selectedOption.value).slice();
-      }
+  m(v, (e) => {
+    if (e) {
+      V.value && Array.isArray(u.value) && (_.value = T(u.value).slice());
       return;
     }
-    focusButton();
+    k();
   });
-  const onSelectAll = () => {
-    selectAll();
-    selectedOption.value = selectedOptionRef.value;
-  };
-  const selectAll = () => {
-    if (allSelected.value) {
-      selectedOptionRef.value = [];
+  const ie = () => {
+    re(), u.value = a.value;
+  }, re = () => {
+    if (L.value) {
+      a.value = [];
       return;
     }
-    if (!Array.isArray(selectedOptionRef.value)) {
-      return;
-    }
-    if (selectedOptionRef.value.length === filteredOptions.value.length) {
-      selectedOptionRef.value = [];
-      return;
+    if (Array.isArray(a.value)) {
+      if (a.value.length === s.value.length) {
+        a.value = [];
+        return;
+      }
+      a.value = s.value;
     }
-    selectedOptionRef.value = filteredOptions.value;
-  };
-  const onSelect = (option, index) => {
-    option = toRaw(option);
-    const isDisabled = optionsIds.value[index]?.disabled;
-    if (isDisabled) {
+  }, N = (e, t) => {
+    if (e = T(e), c.value[t]?.disabled)
       return;
-    }
-    selectedIndex.value = index;
-    if (api.mode !== Mode.Multi) {
-      if (!props.keepOpen) {
-        toggleMenu(false);
-      }
-      api.goToOption(0 /* None */);
-      selectedOption.value = option;
-      queryChanged("");
-      focusButton();
-      if (api.type === Type.Search && inputRef.value) {
-        inputRef.value.value = props.displayValue(option);
-      }
+    if (b.value = t, n.mode !== y.Multi) {
+      l.keepOpen || f(!1), n.goToOption(
+        0
+        /* None */
+      ), u.value = e, x(""), k(), n.type === E.Search && d.value && (d.value.value = l.displayValue(e));
       return;
     }
-    if (!Array.isArray(selectedOptionRef.value)) {
+    if (!Array.isArray(a.value))
       return;
-    }
-    inputRef.value?.focus();
-    const rawSelectedOption = toRaw(selectedOptionRef.value);
-    if (isObjectInArray(rawSelectedOption, option)) {
-      selectedOptionRef.value = rawSelectedOption.filter(
-        (item) => !objectsEqual(item, option)
+    d.value?.focus();
+    const g = T(a.value);
+    if (X(g, e)) {
+      a.value = g.filter(
+        (P) => !Pe(P, e)
       );
       return;
     } else {
-      selectedOptionRef.value = [...rawSelectedOption, option];
+      a.value = [...g, e];
       return;
     }
-  };
-  const canFocus = (index) => {
-    return optionsIds.value[index]?.disabled;
-  };
-  const api = {
-    activeIndex,
-    options: optionsIds,
-    selectedOption,
-    labelRef,
-    activeOption,
-    listRef,
-    clearable: props.clearable,
-    type: slots.input ? Type.Search : Type.Dropdown,
-    mode: props.multi ? Mode.Multi : Mode.Single,
-    query,
-    selectedValue,
-    toggle: toggleMenu,
-    disabled: props.disabled,
-    open,
-    mandatory: props.mandatory,
-    size: props.size,
-    placeholder: props.placeholder,
-    select: onSelect,
+  }, oe = (e) => c.value[e]?.disabled, n = {
+    activeIndex: o,
+    options: c,
+    selectedOption: u,
+    labelRef: R,
+    activeOption: I,
+    listRef: A,
+    clearable: l.clearable,
+    type: K.input ? E.Search : E.Dropdown,
+    mode: l.multi ? y.Multi : y.Single,
+    query: S,
+    selectedValue: ee,
+    toggle: f,
+    disabled: l.disabled,
+    open: v,
+    mandatory: l.mandatory,
+    size: l.size,
+    placeholder: l.placeholder,
+    select: N,
     clearSelection: () => {
-      queryChanged("");
-      selectedOption.value = api.mode === Mode.Single ? null : [];
-      if (inputRef.value) {
-        inputRef.value.value = "";
-      }
+      x(""), u.value = n.mode === y.Single ? null : [], d.value && (d.value.value = "");
     },
-    search: queryChanged,
-    goToOption: async (focus) => {
-      if (!open.value) {
+    search: x,
+    goToOption: async (e) => {
+      if (!v.value)
         return;
-      }
-      let index = activeIndex.value + focus;
-      const totalDisabled = optionsIds.value.filter(
-        (item) => item.disabled
-      ).length;
-      const total = filteredOptions.value.length - totalDisabled;
-      if (index > total) {
-        index = total + 1;
-      }
-      while (true) {
-        if (!optionsIds.value[index]?.disabled) {
-          activeOption.value = filteredOptions.value[index];
-          activeIndex.value = index;
+      let t = o.value + e;
+      const h = c.value.filter(
+        (P) => P.disabled
+      ).length, g = s.value.length - h;
+      for (t > g && (t = g + 1); ; ) {
+        if (!c.value[t]?.disabled) {
+          I.value = s.value[t], o.value = t;
           return;
         }
-        if (focus === 1 /* Next */ || focus === 10 /* NextPage */) {
-          index = index + 1 /* Next */;
-        }
-        if (focus === -1 /* Previous */ || focus === -10 /* PrevPage */) {
-          index = index + -1 /* Previous */;
-        }
-        if (!canFocus(activeIndex.value)) {
-          continue;
+        if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!oe(o.value)) {
+          I.value = s.value[t], o.value = t;
+          return;
         }
-        activeOption.value = filteredOptions.value[index];
-        activeIndex.value = index;
-        return;
       }
     },
-    registerInput: (ref2) => {
-      inputRef.value = ref2.value;
+    registerInput: (e) => {
+      d.value = e.value;
     },
-    registerOption: (id, disabled, hasSubtitle2) => {
-      optionsIds.value = [...optionsIds.value, { id, disabled, hasSubtitle: hasSubtitle2 }];
+    registerOption: (e, t, h) => {
+      c.value = [...c.value, { id: e, disabled: t, hasSubtitle: h }];
     },
-    unRegisterOption(id) {
-      optionsIds.value = optionsIds.value.filter((item) => item.id !== id);
+    unRegisterOption(e) {
+      c.value = c.value.filter((t) => t.id !== e);
     }
   };
-  provide(DropdownContext, api);
-  onClickOutside(
-    listRef,
+  Oe(we, n), Se(
+    A,
     () => {
-      if (open.value) {
-        onCancel();
-      }
+      v.value && B();
     },
     {
-      ignore: [buttonRef, apply, cancel, inputRef, containerProps.ref]
+      ignore: [D, j, z, d, G.ref]
     }
   );
-  const resetInput = () => {
-    if (!inputRef.value) {
-      return;
-    }
-    inputRef.value.value = api.query.value = "";
+  const se = () => {
+    d.value && (d.value.value = n.query.value = "");
   };
-  onMounted(async () => {
-    if (props.autoFocus) {
-      await nextTick();
-      setTimeout(() => {
-        el.value.focus();
-      });
-    }
-    api.goToOption(0);
+  be(async () => {
+    l.autoFocus && (await w(), setTimeout(() => {
+      $.value.focus();
+    })), n.goToOption(0);
   });
-  const onApply = () => {
-    selectedOption.value = selectedOptionRef.value;
-    emit("apply", selectedOption.value);
-    toggleMenu(false);
-    resetInput();
-  };
-  const onCancel = () => {
-    if (isMulti.value && Array.isArray(selectedOptionPrevious.value)) {
-      selectedOption.value = toRaw(selectedOptionPrevious.value).slice();
-    }
-    toggleMenu(false);
-  };
-  const onButtonKeydown = (event) => {
-    if (props.disableKeyboardEvents)
-      return;
-    switch (event.key) {
-      case "Space":
-      case "Enter":
-      case "ArrowUp":
-      case "ArrowDown": {
-        toggleMenu(true);
-        event.preventDefault();
-      }
-    }
-  };
-  const onKeydown = (event) => {
-    if (props.disableKeyboardEvents)
-      return;
-    switch (event.key) {
-      case "ArrowUp": {
-        api.goToOption(-1 /* Previous */);
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      }
-      case "ArrowDown": {
-        api.goToOption(1 /* Next */);
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      }
-      case "Escape": {
-        toggleMenu(false);
-        event.preventDefault();
-        break;
+  const ce = () => {
+    u.value = a.value, O("apply", u.value), f(!1), se();
+  }, B = () => {
+    V.value && Array.isArray(_.value) && (u.value = T(_.value).slice()), f(!1);
+  }, ve = (e) => {
+    if (!l.disableKeyboardEvents)
+      switch (e.key) {
+        case "Space":
+        case "Enter":
+        case "ArrowUp":
+        case "ArrowDown":
+          f(!0), e.preventDefault();
       }
-      case "PageUp": {
-        api.goToOption(10 /* NextPage */);
-        event.preventDefault();
-        break;
-      }
-      case "PageDown": {
-        api.goToOption(-10 /* PrevPage */);
-        event.preventDefault();
-        break;
-      }
-      case "Enter": {
-        if (!open.value) {
-          toggleMenu(true);
-          return;
+  }, de = (e) => {
+    if (!l.disableKeyboardEvents)
+      switch (e.key) {
+        case "ArrowUp": {
+          n.goToOption(
+            -1
+            /* Previous */
+          ), e.preventDefault(), e.stopPropagation();
+          break;
+        }
+        case "ArrowDown": {
+          n.goToOption(
+            1
+            /* Next */
+          ), e.preventDefault(), e.stopPropagation();
+          break;
+        }
+        case "Escape": {
+          f(!1), e.preventDefault();
+          break;
         }
-        onSelect(filteredOptions.value[activeIndex.value], activeIndex.value);
-        if (api.mode === Mode.Single && !props.keepOpen) {
-          toggleMenu(false);
+        case "PageUp": {
+          n.goToOption(
+            10
+            /* NextPage */
+          ), e.preventDefault();
+          break;
+        }
+        case "PageDown": {
+          n.goToOption(
+            -10
+            /* PrevPage */
+          ), e.preventDefault();
+          break;
+        }
+        case "Enter": {
+          if (!v.value) {
+            f(!0);
+            return;
+          }
+          N(s.value[o.value], o.value), n.mode === y.Single && !l.keepOpen && f(!1), e.preventDefault();
+          break;
         }
-        event.preventDefault();
-        break;
       }
-    }
-  };
-  const calculateTableHeight = computed(() => {
-    const MAX_NUMBER_OF_OPTIONS = 7;
-    const PADDING_PX = 8;
-    const optionsLength = virtualOptions.value.length;
-    const showSelectAllAddition = props.showSelectAll ? 1 : 0;
-    const isThereMoreOptionsThenMax = optionsLength > MAX_NUMBER_OF_OPTIONS;
-    const numberOfRows = optionsLength + showSelectAllAddition;
-    const numToCalculate = isThereMoreOptionsThenMax ? MAX_NUMBER_OF_OPTIONS + 0.5 : numberOfRows;
-    return pxToRem(numToCalculate * itemHeight.value + PADDING_PX);
+  }, fe = r(() => {
+    const h = U.value.length, g = l.showSelectAll ? 1 : 0, P = h > 7, ge = h + g, he = P ? 7 + 0.5 : ge;
+    return Ie(he * C.value + 8);
   });
   return {
-    onKeydown,
-    location,
-    open,
-    toggleMenu,
-    onButtonKeydown,
-    displayedValue,
-    labelRef,
-    query,
-    containerProps,
-    calculateTableHeight,
-    wrapperProps,
-    filteredOptions,
-    allSelected,
-    isIndeterminate,
-    onSelectAll,
-    virtualOptions,
-    isSelected,
-    selectedOption,
-    onSelect,
-    activeIndex,
-    onCancel,
-    onApply,
-    scrollTo
+    onKeydown: de,
+    location: Q,
+    open: v,
+    toggleMenu: f,
+    onButtonKeydown: ve,
+    displayedValue: te,
+    labelRef: R,
+    query: S,
+    containerProps: G,
+    calculateTableHeight: fe,
+    wrapperProps: ne,
+    filteredOptions: s,
+    allSelected: L,
+    isIndeterminate: ae,
+    onSelectAll: ie,
+    virtualOptions: U,
+    isSelected: q,
+    selectedOption: u,
+    onSelect: N,
+    activeIndex: o,
+    onCancel: B,
+    onApply: ce,
+    scrollTo: M
   };
 };
-
-export { dropdownCommon };
+export {
+  He as dropdownCommon
+};