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

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

@@ -1,456 +0,0 @@
-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 selectedOptionRef.value;
-    },
-    set(value) {
-      emit("update:selected", value);
-    }
-  });
-  watch(
-    () => props.selected,
-    () => {
-      selectedOptionRef.value = props.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 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 toggle = (value) => {
-    isOpen.value = _toggle(value);
-  };
-  const isOpen = computed({
-    get() {
-      return props.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;
-    }
-    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;
-      }
-      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;
-    }
-    if (selectedOptionRef.value.length === filteredOptions.value.length) {
-      selectedOptionRef.value = [];
-      return;
-    }
-    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(selectedOptionRef.value)) {
-      return;
-    }
-    inputRef.value?.focus();
-    const rawSelectedOption = toRaw(selectedOptionRef.value);
-    if (isObjectInArray(rawSelectedOption, option)) {
-      selectedOptionRef.value = rawSelectedOption.filter(
-        (item) => !objectsEqual(item, option)
-      );
-      return;
-    } else {
-      selectedOptionRef.value = [...rawSelectedOption, option];
-      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,
-    clearSelection: () => {
-      queryChanged("");
-      selectedOption.value = api.mode === Mode.Single ? null : [];
-      if (inputRef.value) {
-        inputRef.value.value = "";
-      }
-    },
-    search: queryChanged,
-    goToOption: async (focus) => {
-      if (!open.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;
-          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: (ref2) => {
-      inputRef.value = ref2.value;
-    },
-    registerOption: (id, disabled, hasSubtitle2) => {
-      optionsIds.value = [...optionsIds.value, { id, disabled, hasSubtitle: hasSubtitle2 }];
-    },
-    unRegisterOption(id) {
-      optionsIds.value = optionsIds.value.filter((item) => item.id !== id);
-    }
-  };
-  provide(DropdownContext, api);
-  onClickOutside(
-    listRef,
-    () => {
-      if (open.value) {
-        onCancel();
-      }
-    },
-    {
-      ignore: [buttonRef, apply, cancel, inputRef, containerProps.ref]
-    }
-  );
-  const resetInput = () => {
-    if (!inputRef.value) {
-      return;
-    }
-    inputRef.value.value = api.query.value = "";
-  };
-  onMounted(async () => {
-    if (props.autoFocus) {
-      await nextTick();
-      setTimeout(() => {
-        el.value.focus();
-      });
-    }
-    api.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;
-      }
-      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;
-        }
-        onSelect(filteredOptions.value[activeIndex.value], activeIndex.value);
-        if (api.mode === Mode.Single && !props.keepOpen) {
-          toggleMenu(false);
-        }
-        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);
-  });
-  return {
-    onKeydown,
-    location,
-    open,
-    toggleMenu,
-    onButtonKeydown,
-    displayedValue,
-    labelRef,
-    query,
-    containerProps,
-    calculateTableHeight,
-    wrapperProps,
-    filteredOptions,
-    allSelected,
-    isIndeterminate,
-    onSelectAll,
-    virtualOptions,
-    isSelected,
-    selectedOption,
-    onSelect,
-    activeIndex,
-    onCancel,
-    onApply,
-    scrollTo
-  };
-};
-
-export { dropdownCommon };

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

@@ -1,29 +0,0 @@
-import { inject } from 'vue';
-
-var Mode = /* @__PURE__ */ ((Mode2) => {
-  Mode2[Mode2["Multi"] = 0] = "Multi";
-  Mode2[Mode2["Single"] = 1] = "Single";
-  return Mode2;
-})(Mode || {});
-var Type = /* @__PURE__ */ ((Type2) => {
-  Type2[Type2["Search"] = 0] = "Search";
-  Type2[Type2["Dropdown"] = 1] = "Dropdown";
-  return Type2;
-})(Type || {});
-const DropdownContext = Symbol(
-  "DropdownContext"
-);
-function useDropdownContext(component) {
-  const context = inject(DropdownContext, null);
-  if (context === null) {
-    const err = new Error(
-      `<${component} /> is missing a parent <Dropdown /> component.`
-    );
-    if (Error.captureStackTrace)
-      Error.captureStackTrace(err, useDropdownContext);
-    throw err;
-  }
-  return context;
-}
-
-export { DropdownContext, Mode, Type, useDropdownContext };

package/components/dropdown/v3/index.vue.js

@@ -1,12 +0,0 @@
-import Dropdown from './Dropdown.vue.js';
-export { default as Dropdown } from './Dropdown.vue.js';
-import Option from '../common/Option.vue.js';
-export { default as Option } from '../common/Option.vue.js';
-import Label from '../common/Label.vue.js';
-export { default as Label } from '../common/Label.vue.js';
-import SearchInput from '../common/SearchInput.vue.js';
-export { default as SearchInput } from '../common/SearchInput.vue.js';
-
-const DropdownTypes = () => [Dropdown, Option, Label, SearchInput];
-
-export { DropdownTypes };

package/components/dropdown/v4/index.vue.js

@@ -1,6 +0,0 @@
-import Dropdown from './DropdownV4.vue.js';
-export { default as Dropdown } from './DropdownV4.vue.js';
-
-const DropdownTypes = () => [Dropdown];
-
-export { DropdownTypes };

package/components/emptyState/index.vue.js

@@ -1,6 +0,0 @@
-import EmptyState from './EmptyState.vue.js';
-export { default as EmptyState } from './EmptyState.vue.js';
-
-const EmptyStateTypes = () => [EmptyState];
-
-export { EmptyStateTypes };

package/components/filterDropdown/index.vue.js

@@ -1,8 +0,0 @@
-import FilterDropdown from './FilterDropdown.vue.js';
-export { default as FilterDropdown } from './FilterDropdown.vue.js';
-import AddFilterButton from './AddFilterButton.vue.js';
-export { default as AddFilterButton } from './AddFilterButton.vue.js';
-
-const FilterDropdownTypes = () => [FilterDropdown, AddFilterButton];
-
-export { FilterDropdownTypes };

package/components/filtersPanel/FiltersPanel.vue.d.ts

@@ -1,38 +0,0 @@
-import { Filter } from './Filter';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    filters: Filter[];
-    isOpen?: boolean;
-    selected: Record<string, Filter> | Record<string, Filter>[];
-    isMultiSelect?: boolean;
-    testId?: string;
-}>, {
-    isOpen: boolean;
-    testId: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    filters: Filter[];
-    isOpen?: boolean;
-    selected: Record<string, Filter> | Record<string, Filter>[];
-    isMultiSelect?: boolean;
-    testId?: string;
-}>, {
-    isOpen: boolean;
-    testId: string;
-}>>>, {
-    testId: string;
-    isOpen: boolean;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
-        default: D[K];
-    } : P[K];
-};

package/components/filtersPanel/index.vue.js

@@ -1,14 +0,0 @@
-import FiltersPanel from './FiltersPanel.vue.js';
-export { default as FiltersPanel } from './FiltersPanel.vue.js';
-import FilterSearchInput from './FilterSearchInput.vue.js';
-export { default as FilterSearchInput } from './FilterSearchInput.vue.js';
-import { useHiddenFilter } from './useHiddenFilter.vue.js';
-export { useHiddenFilter } from './useHiddenFilter.vue.js';
-
-const FilterPanelTypes = () => [
-  FiltersPanel,
-  FilterSearchInput,
-  useHiddenFilter
-];
-
-export { FilterPanelTypes };

package/components/filtersPanel/useHiddenFilter.vue.js

@@ -1,33 +0,0 @@
-import { computed, ref, reactive } from 'vue';
-
-const useHiddenFilter = ({ filters }) => {
-  const search = computed(() => {
-    return ({ label }, query) => label.toLowerCase().replace(/\s+/g, "").includes(query.toLowerCase().replace(/\s+/g, ""));
-  });
-  const added = ref([]);
-  const state = reactive({});
-  const isOpen = ref(false);
-  const addNewFilter = (filter) => {
-    added.value.push(filter);
-    isOpen.value = true;
-  };
-  const disabled = computed(() => {
-    return added.value.length === filters.filter((item) => item.hidden).length;
-  });
-  const onClear = (filter) => {
-    added.value = added.value.filter((item) => item.id !== filter.id);
-    isOpen.value = false;
-    delete state[filter.id];
-  };
-  return {
-    onClear,
-    disabled,
-    isOpen,
-    state,
-    added,
-    search,
-    addNewFilter
-  };
-};
-
-export { useHiddenFilter };

package/components/floatingToolbar/index.vue.js

@@ -1,6 +0,0 @@
-import FloatingToolbar from './FloatingToolbar.vue.js';
-export { default as FloatingToolbar } from './FloatingToolbar.vue.js';
-
-const FloatingToolbarTypes = () => [FloatingToolbar];
-
-export { FloatingToolbarTypes };

package/components/icon/v3/Icon.vue.d.ts

@@ -1,32 +0,0 @@
-import { icons } from './icons';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    name?: keyof typeof icons | string;
-    fontSize?: string | 'sm' | 'md' | 'lg';
-}>, {
-    fontSize: any;
-    name: any;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    name?: keyof typeof icons | string;
-    fontSize?: string | 'sm' | 'md' | 'lg';
-}>, {
-    fontSize: any;
-    name: any;
-}>>>, {
-    name: keyof typeof icons | string;
-    fontSize: string | 'sm' | 'md' | 'lg';
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
-        default: D[K];
-    } : P[K];
-};