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

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

@@ -1,299 +1,456 @@
-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({
+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({
     get() {
-      return a.value;
+      return selectedOptionRef.value;
     },
-    set(e) {
-      O("update:selected", e);
+    set(value) {
+      emit("update:selected", value);
     }
   });
-  m(
-    () => l.selected,
+  watch(
+    () => props.selected,
     () => {
-      a.value = l.selected;
+      selectedOptionRef.value = props.selected;
     }
   );
-  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 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;
   });
-  m(
-    () => l.disabled,
-    (e) => {
-      e !== void 0 && Y(e);
+  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);
+      }
     }
   );
-  const H = (e) => {
-    Z.value = W(e);
-  }, Z = r({
+  const toggle = (value) => {
+    isOpen.value = _toggle(value);
+  };
+  const isOpen = computed({
     get() {
-      return l.isOpen;
+      return props.isOpen;
     },
-    set(e) {
-      O("update:isOpen", e);
+    set(value) {
+      emit("update:isOpen", value);
     }
-  }), 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
   });
-  m(
-    () => l.isOpen,
-    (e) => {
-      H(e);
-    }
-  ), 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 maxClamped = computed(() => {
+    return filteredOptions.value.length - 1;
+  });
+  const activeIndex = useClamp(0, 0, maxClamped);
+  const selectedValue = computed(() => {
+    if (selectedOption.value) {
+      return props.displayValue(selectedOption.value);
     }
-  );
-  const f = (e, t = !1) => {
-    l.disabled || (H(e), w(() => {
-      v.value && O("opened"), v.value || O("closed"), A.value && t && A.value.focus();
-    }));
+    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;
   };
-  m(v, (e) => {
-    if (e) {
-      V.value && Array.isArray(u.value) && (_.value = T(u.value).slice());
+  const displayedValue = computed(() => {
+    if (!props.multi) {
+      return selectedOption.value ? props.displayValue(selectedOption.value) : props.placeholder;
+    }
+    if (!Array.isArray(selectedOptionRef.value)) {
       return;
     }
-    k();
+    return getMultiselectValueToShow(selectedOptionRef);
   });
-  const ie = () => {
-    re(), u.value = a.value;
-  }, re = () => {
-    if (L.value) {
-      a.value = [];
+  const allSelected = computed(() => {
+    if (!Array.isArray(selectedOptionRef.value)) {
       return;
     }
-    if (Array.isArray(a.value)) {
-      if (a.value.length === s.value.length) {
-        a.value = [];
+    return selectedOptionRef.value.length === filteredOptions.value.length;
+  });
+  const isIndeterminate = computed(() => {
+    if (!props.multi) {
+      return false;
+    }
+    if (!Array.isArray(selectedOptionRef.value)) {
+      return false;
+    }
+    return selectedOptionRef.value.length > 0 && selectedOptionRef.value.length < filteredOptions.value.length;
+  });
+  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);
+    }
+  );
+  watch([selectedIndex], async () => {
+    await nextTick();
+  });
+  watch(
+    [open, activeIndex, selectedIndex],
+    async ([openNewValue], [openOldValue]) => {
+      if (!open.value) {
         return;
       }
-      a.value = s.value;
+      await nextTick();
+      if (selectedIndex.value !== -1 && openNewValue !== openOldValue) {
+        setTimeout(() => {
+          scrollTo(selectedIndex.value);
+        });
+      }
+      if (activeIndex.value) {
+        setTimeout(() => {
+          scrollTo(activeIndex.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();
+      }
+    });
+  };
+  watch(open, (isOpen2) => {
+    if (isOpen2) {
+      if (isMulti.value && Array.isArray(selectedOption.value)) {
+        selectedOptionPrevious.value = toRaw(selectedOption.value).slice();
+      }
+      return;
+    }
+    focusButton();
+  });
+  const onSelectAll = () => {
+    selectAll();
+    selectedOption.value = selectedOptionRef.value;
+  };
+  const selectAll = () => {
+    if (allSelected.value) {
+      selectedOptionRef.value = [];
+      return;
+    }
+    if (!Array.isArray(selectedOptionRef.value)) {
+      return;
     }
-  }, N = (e, t) => {
-    if (e = T(e), c.value[t]?.disabled)
+    if (selectedOptionRef.value.length === filteredOptions.value.length) {
+      selectedOptionRef.value = [];
       return;
-    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));
+    }
+    selectedOptionRef.value = filteredOptions.value;
+  };
+  const onSelect = (option, index) => {
+    option = toRaw(option);
+    const isDisabled = optionsIds.value[index]?.disabled;
+    if (isDisabled) {
+      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);
+      }
       return;
     }
-    if (!Array.isArray(a.value))
+    if (!Array.isArray(selectedOptionRef.value)) {
       return;
-    d.value?.focus();
-    const g = T(a.value);
-    if (X(g, e)) {
-      a.value = g.filter(
-        (P) => !Pe(P, e)
+    }
+    inputRef.value?.focus();
+    const rawSelectedOption = toRaw(selectedOptionRef.value);
+    if (isObjectInArray(rawSelectedOption, option)) {
+      selectedOptionRef.value = rawSelectedOption.filter(
+        (item) => !objectsEqual(item, option)
       );
       return;
     } else {
-      a.value = [...g, e];
+      selectedOptionRef.value = [...rawSelectedOption, option];
       return;
     }
-  }, 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,
+  };
+  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,
     clearSelection: () => {
-      x(""), u.value = n.mode === y.Single ? null : [], d.value && (d.value.value = "");
+      queryChanged("");
+      selectedOption.value = api.mode === Mode.Single ? null : [];
+      if (inputRef.value) {
+        inputRef.value.value = "";
+      }
     },
-    search: x,
-    goToOption: async (e) => {
-      if (!v.value)
+    search: queryChanged,
+    goToOption: async (focus) => {
+      if (!open.value) {
         return;
-      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;
+      }
+      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;
           return;
         }
-        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;
+        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;
         }
+        activeOption.value = filteredOptions.value[index];
+        activeIndex.value = index;
+        return;
       }
     },
-    registerInput: (e) => {
-      d.value = e.value;
+    registerInput: (ref2) => {
+      inputRef.value = ref2.value;
     },
-    registerOption: (e, t, h) => {
-      c.value = [...c.value, { id: e, disabled: t, hasSubtitle: h }];
+    registerOption: (id, disabled, hasSubtitle2) => {
+      optionsIds.value = [...optionsIds.value, { id, disabled, hasSubtitle: hasSubtitle2 }];
     },
-    unRegisterOption(e) {
-      c.value = c.value.filter((t) => t.id !== e);
+    unRegisterOption(id) {
+      optionsIds.value = optionsIds.value.filter((item) => item.id !== id);
     }
   };
-  Oe(we, n), Se(
-    A,
+  provide(DropdownContext, api);
+  onClickOutside(
+    listRef,
     () => {
-      v.value && B();
+      if (open.value) {
+        onCancel();
+      }
     },
     {
-      ignore: [D, j, z, d, G.ref]
+      ignore: [buttonRef, apply, cancel, inputRef, containerProps.ref]
     }
   );
-  const se = () => {
-    d.value && (d.value.value = n.query.value = "");
+  const resetInput = () => {
+    if (!inputRef.value) {
+      return;
+    }
+    inputRef.value.value = api.query.value = "";
   };
-  be(async () => {
-    l.autoFocus && (await w(), setTimeout(() => {
-      $.value.focus();
-    })), n.goToOption(0);
+  onMounted(async () => {
+    if (props.autoFocus) {
+      await nextTick();
+      setTimeout(() => {
+        el.value.focus();
+      });
+    }
+    api.goToOption(0);
   });
-  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();
+  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();
       }
-  }, 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;
-        }
-        case "PageUp": {
-          n.goToOption(
-            10
-            /* NextPage */
-          ), e.preventDefault();
-          break;
-        }
-        case "PageDown": {
-          n.goToOption(
-            -10
-            /* PrevPage */
-          ), e.preventDefault();
-          break;
+    }
+  };
+  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;
+      }
+      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;
         }
-        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;
+        onSelect(filteredOptions.value[activeIndex.value], activeIndex.value);
+        if (api.mode === Mode.Single && !props.keepOpen) {
+          toggleMenu(false);
         }
+        event.preventDefault();
+        break;
       }
-  }, 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);
+    }
+  };
+  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);
   });
   return {
-    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
+    onKeydown,
+    location,
+    open,
+    toggleMenu,
+    onButtonKeydown,
+    displayedValue,
+    labelRef,
+    query,
+    containerProps,
+    calculateTableHeight,
+    wrapperProps,
+    filteredOptions,
+    allSelected,
+    isIndeterminate,
+    onSelectAll,
+    virtualOptions,
+    isSelected,
+    selectedOption,
+    onSelect,
+    activeIndex,
+    onCancel,
+    onApply,
+    scrollTo
   };
 };
-export {
-  He as dropdownCommon
-};
+
+export { dropdownCommon };