@ironsource/shared-ui 1.4.2-vite.1 → 1.4.3-andyk.1

package/components/autocompleteDropdown/AutocompleteDropdown.vue.js

@@ -1,6 +1,149 @@
-import o from "./AutocompleteDropdown.vue2.js";
-/* empty css                           */import t from "../../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-86a26bdc"]]);
-export {
-  a as default
-};
+import { defineComponent, ref, computed, watch, nextTick, openBlock, createBlock, unref, mergeProps, withModifiers, withCtx, createVNode, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import Dropdown from '../dropdown/Dropdown.vue.js';
+/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+/* empty css                                                                  *//* empty css                                                            *//* empty css                                                                    */import '@vue/shared';
+/* empty css                                                                  *//* empty css                                                                 *//* empty css                                                                    *//* empty css                                                                    *//* empty css                                                                       */import GroupOption from './GroupOption.vue.js';
+import AutocompleteInput from './AutocompleteInput.vue.js';
+import { DEFAULT_PLACEHOLDER, GROUP_OPTION_FLAG } from './consts.vue.js';
+import { useKeyboardNavigation } from './useKeyboardNavigation.vue.js';
+/* empty css                                                                      */
+import "../../AutocompleteDropdown.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AutocompleteDropdown",
+  props: {
+    options: { default: () => [] },
+    selected: { default: () => [] },
+    placeholder: { default: DEFAULT_PLACEHOLDER },
+    displayValue: { type: Function, default: (option) => option.toString() },
+    handleSearch: { type: Function, default: () => true },
+    grouped: { type: Boolean, default: false },
+    testId: { default: "" }
+  },
+  emits: ["update:selected"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const inputRef = ref(null);
+    const dropdownRef = ref(null);
+    const selection = computed({
+      get() {
+        return props.selected;
+      },
+      set(value) {
+        emit("update:selected", value);
+      }
+    });
+    function selectOption(option) {
+      selection.value.push(option);
+      inputRef.value.focusInput();
+    }
+    function deselectOption(option) {
+      selection.value.splice(selection.value.indexOf(option), 1);
+    }
+    async function scrollToTop() {
+      await nextTick();
+      setTimeout(() => {
+        dropdownRef?.value?.scrollTo(0);
+      });
+    }
+    const searchQuery = ref("");
+    const isGroup = (option) => option && !!option[GROUP_OPTION_FLAG];
+    const flatOptions = computed(() => {
+      if (!props.grouped)
+        return props.options;
+      return props.options.reduce((prev, group) => {
+        const { options = [], ...otherFields } = group;
+        const groupOption = {
+          ...otherFields,
+          [GROUP_OPTION_FLAG]: true
+        };
+        return [...prev, groupOption, ...options];
+      }, []);
+    });
+    const filteredOptions = computed(() => {
+      const options = flatOptions.value.filter((option) => !selection.value.includes(option)).filter((option) => {
+        if (isGroup(option))
+          return true;
+        return props.handleSearch(option, searchQuery.value);
+      });
+      if (props.grouped) {
+        return options.filter((option, index) => {
+          const nextOption = options[index + 1];
+          return isGroup(option) ? nextOption && !isGroup(nextOption) : true;
+        });
+      }
+      return options;
+    });
+    const { isFocused, keyDownHandler } = useKeyboardNavigation({
+      options: filteredOptions,
+      canFocus: (option) => !isGroup(option),
+      scrollTo: (index) => dropdownRef?.value?.scrollTo(index),
+      selectItem: (option) => {
+        dropdownRef?.value?.selectItem(option);
+        scrollToTop();
+      }
+    });
+    const distance = ref(0);
+    watch(props.selected, async () => {
+      distance.value += 1;
+      await nextTick();
+      distance.value = 0;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Dropdown), mergeProps({
+        ref_key: "dropdownRef",
+        ref: dropdownRef,
+        class: "autocomplete-dropdown"
+      }, _ctx.$attrs, {
+        selected: unref(selection),
+        options: unref(filteredOptions),
+        "on-search": () => true,
+        "display-value": __props.displayValue,
+        "keep-open": "",
+        "is-on-top": false,
+        multi: false,
+        "show-select-all": false,
+        "auto-size": "",
+        distance: distance.value,
+        "disable-keyboard-events": "",
+        "test-id": __props.testId,
+        onOpened: scrollToTop,
+        onKeydown: withModifiers(unref(keyDownHandler), ["stop"]),
+        "onUpdate:selected": selectOption
+      }), {
+        input: withCtx(() => [
+          createVNode(AutocompleteInput, {
+            ref_key: "inputRef",
+            ref: inputRef,
+            value: unref(selection),
+            placeholder: __props.placeholder,
+            "display-value": __props.displayValue,
+            "test-id": __props.testId,
+            onRemove: deselectOption,
+            onSearch: _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event)
+          }, {
+            option: withCtx(({ option }) => [
+              renderSlot(_ctx.$slots, "input-option", { option }, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["value", "placeholder", "display-value", "test-id"])
+        ]),
+        default: withCtx(({ option }) => [
+          __props.grouped && isGroup(option) ? (openBlock(), createBlock(GroupOption, { key: 0 }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.displayValue(option)), 1)
+            ]),
+            _: 2
+          }, 1024)) : renderSlot(_ctx.$slots, "default", {
+            key: 1,
+            option,
+            active: unref(isFocused)(option)
+          }, void 0, true)
+        ]),
+        _: 3
+      }, 16, ["selected", "options", "on-search", "display-value", "distance", "test-id", "onKeydown"]);
+    };
+  }
+});
+var AutocompleteDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5c2ad255"]]);
+
+export { AutocompleteDropdown as default };

package/components/autocompleteDropdown/AutocompleteInput.vue.d.ts

@@ -1,52 +1,50 @@
-declare function focusInput(): void;
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    value: {
-        type: import("vue").PropType<unknown[]>;
-        required: true;
-        default: () => any[];
-    };
-    placeholder: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    displayValue: {
-        type: import("vue").PropType<(option: unknown) => string>;
-        default: (option: unknown) => string;
-    };
-}, {
-    focusInput: typeof focusInput;
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    value: unknown[];
+    displayValue?: (option: unknown) => string;
+    placeholder?: string;
+    testId?: string;
+}>, {
+    value: () => any[];
+    displayValue: (option: unknown) => string;
+    placeholder: string;
+    testId: string;
+}>, {
+    focusInput: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: (option: unknown) => void;
+} & {
     search: (searchQuery: string) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    value: {
-        type: import("vue").PropType<unknown[]>;
-        required: true;
-        default: () => any[];
-    };
-    placeholder: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    displayValue: {
-        type: import("vue").PropType<(option: unknown) => string>;
-        default: (option: unknown) => string;
-    };
-}>> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    value: unknown[];
+    displayValue?: (option: unknown) => string;
+    placeholder?: string;
+    testId?: string;
+}>, {
+    value: () => any[];
+    displayValue: (option: unknown) => string;
+    placeholder: string;
+    testId: string;
+}>>> & {
     onSearch?: (searchQuery: string) => any;
     onRemove?: (option: unknown) => any;
 }, {
     value: unknown[];
+    testId: string;
     placeholder: string;
     displayValue: (option: unknown) => string;
-}>, {
-    option?(_: {
-        option: unknown;
-    }): any;
 }>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
+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/autocompleteDropdown/AutocompleteInput.vue.js

@@ -1,6 +1,99 @@
-import o from "./AutocompleteInput.vue2.js";
-/* empty css                        */import t from "../../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-171b1615"]]);
-export {
-  e as default
-};
+import { defineComponent, ref, computed, watch, openBlock, createElementBlock, normalizeClass, unref, withModifiers, Fragment, renderList, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, createElementVNode } from 'vue';
+import Icon from '../icon/Icon.vue.js';
+import Text from '../typography/Text.vue.js';
+import { useDropdownContext } from '../dropdown/DropdownContext.vue.js';
+import { DEFAULT_PLACEHOLDER } from './consts.vue.js';
+import { AutocompleteInputTestIdModifiers } from '../../testids/index.vue.js';
+/* empty css                                                                   */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+
+import "../../AutocompleteInput.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = ["data-testid", "onClick"];
+const _hoisted_2 = ["data-testid"];
+const _hoisted_3 = ["value", "placeholder", "data-testid"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AutocompleteInput",
+  props: {
+    value: { default: () => [] },
+    displayValue: { type: Function, default: (option) => option.toString() },
+    placeholder: { default: DEFAULT_PLACEHOLDER },
+    testId: { default: "" }
+  },
+  emits: ["remove", "search"],
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const api = useDropdownContext("autocompleteInput");
+    const inputEl = ref(null);
+    const isOpen = computed(() => api.open.value);
+    const getOptionLabel = (option) => props.displayValue(option);
+    function onContainerClick() {
+      api.toggle(true);
+      focusInput();
+    }
+    const onSearch = (event) => {
+      const { value } = event.target;
+      api.toggle(true);
+      api.search(value);
+    };
+    function removeOption(option) {
+      emit("remove", option);
+      if (isOpen.value) {
+        focusInput();
+      }
+    }
+    watch(api.query, (value) => {
+      emit("search", value);
+    });
+    function focusInput() {
+      inputEl.value?.focus();
+    }
+    expose({
+      focusInput
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["autocomplete-input", { "autocomplete-input--focused": unref(isOpen) }]),
+        "data-testid": `${__props.testId}-${unref(AutocompleteInputTestIdModifiers).WRAPPER}`,
+        onClick: withModifiers(onContainerClick, ["stop"])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.value, (option, index) => {
+          return openBlock(), createElementBlock("div", {
+            key: index,
+            "data-testid": `${__props.testId}-${unref(AutocompleteInputTestIdModifiers).SELECTED_OPTION}-${index}`,
+            class: "autocomplete-input__option"
+          }, [
+            renderSlot(_ctx.$slots, "option", { option }, () => [
+              createVNode(Text, {
+                size: "sm",
+                "is-truncated": ""
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(getOptionLabel(option)), 1)
+                ]),
+                _: 2
+              }, 1024)
+            ], true),
+            createVNode(unref(Icon), {
+              class: "autocomplete-input__close-icon",
+              name: "close-bold",
+              "font-size": "sm",
+              onClick: withModifiers(($event) => removeOption(option), ["stop"])
+            }, null, 8, ["onClick"])
+          ], 8, _hoisted_2);
+        }), 128)),
+        createElementVNode("input", {
+          ref_key: "inputEl",
+          ref: inputEl,
+          class: "autocomplete-input__search-field",
+          type: "text",
+          value: unref(api).query.value,
+          placeholder: __props.placeholder,
+          "data-testid": `${__props.testId}-${unref(AutocompleteInputTestIdModifiers).SEARCH_FIELD}`,
+          onInput: onSearch
+        }, null, 40, _hoisted_3)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+var AutocompleteInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b95f1c9c"]]);
+
+export { AutocompleteInput as default };

package/components/autocompleteDropdown/GroupOption.vue.d.ts

@@ -1,9 +1,2 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, {
-    default?(_: {}): any;
-}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/components/autocompleteDropdown/GroupOption.vue.js

@@ -1,6 +1,42 @@
-import o from "./GroupOption.vue2.js";
-/* empty css                  */import t from "../../_virtual/_plugin-vue_export-helper.js";
-const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-7ca2cd83"]]);
-export {
-  c as default
-};
+import { defineComponent, ref, onMounted, onUnmounted, openBlock, createElementBlock, withModifiers, unref, createVNode, withCtx, renderSlot } from 'vue';
+import { NOOP } from '@vue/shared';
+/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+import Text from '../typography/Text.vue.js';
+import { useDropdownContext } from '../dropdown/DropdownContext.vue.js';
+import { useId } from '../../composables/useId.vue.js';
+/* empty css                                                             */
+import "../../GroupOption.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GroupOption",
+  setup(__props) {
+    const api = useDropdownContext("GroupOption");
+    const id = useId().value;
+    const el = ref(null);
+    onMounted(() => api.registerOption(id, true, false));
+    onUnmounted(() => api.unRegisterOption(id));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "el",
+        ref: el,
+        class: "group-option",
+        onClick: _cache[0] || (_cache[0] = withModifiers(
+          (...args) => unref(NOOP) && unref(NOOP)(...args),
+          ["stop"]
+        ))
+      }, [
+        createVNode(unref(Text), {
+          size: "md",
+          strong: ""
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ]),
+          _: 3
+        })
+      ], 512);
+    };
+  }
+});
+var GroupOption = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-76680bfa"]]);
+
+export { GroupOption as default };

package/components/autocompleteDropdown/consts.vue.js

@@ -0,0 +1,4 @@
+const DEFAULT_PLACEHOLDER = "Add item...";
+const GROUP_OPTION_FLAG = "__IS_GROUP";
+
+export { DEFAULT_PLACEHOLDER, GROUP_OPTION_FLAG };