@ironsource/shared-ui 1.4.2-test.3 → 1.4.2-test.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "1.4.2-test.3",
+  "version": "1.4.2-test.5",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"
@@ -48,7 +48,8 @@
     "date-fns": "^2.29.1",
     "floating-vue": "2.0.0-beta.20",
     "focus-trap": "^6.9.4",
-    "vue": "^3.2.31"
+    "vue": "^3.2.31",
+    "vuedraggable": "^4.1.0"
   },
   "peerDependencies": {
     "@vueuse/core": "^8.7.5",
@@ -83,8 +84,8 @@
     "@types/prismjs": "^1.26.0",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitest/coverage-v8": "^0.33.0",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitest/coverage-c8": "^0.23.4",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^2.0.0-rc.17",
     "autoprefixer": "^10.4.7",
@@ -114,19 +115,17 @@
     "prettier": "^2.6.0",
     "prismjs": "^1.29.0",
     "puppeteer": "^19.4.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "replace": "^1.2.1",
     "rimraf": "^3.0.2",
     "sass": "^1.49.7",
     "start-server-and-test": "^1.15.2",
     "svgo": "^2.8.0",
     "typescript": "^4.5.4",
-    "vite": "^4.4.8",
+    "vite": "^2.9.9",
     "vite-plugin-libcss": "^1.0.5",
-    "vite-plugin-static-copy": "^0.17.0",
-    "vitest": "^0.34.1",
-    "vue-tsc": "^1.8.8"
+    "vite-plugin-static-copy": "^0.6.0",
+    "vitest": "^0.23.2",
+    "vue-tsc": "^0.35.0"
   },
   "repository": "https://github.com/ironsource-mobile/shared-ui-ssp.git",
   "main": "./index.js",

package/src/components/appIcon/AppIcon.vue.js

@@ -0,0 +1,43 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, pushScopeId, popScopeId } from 'vue';
+/* empty css                                                         */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+
+////import "../../AppIcon.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _withScopeId = (n) => (pushScopeId("data-v-359522d4"), n = n(), popScopeId(), n);
+const _hoisted_1 = ["src"];
+const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "100%",
+  height: "100%",
+  viewBox: "0 0 120 120",
+  preserveAspectRatio: "none",
+  class: "squircle-mask"
+}, [
+  /* @__PURE__ */ createElementVNode("path", {
+    d: "M120 0v120H60c48 0 60-12 60-60S108 0 60 0 0 12 0 60s12 60 60 60H0V0h120z",
+    fill: "white",
+    fillRule: "evenodd"
+  })
+], -1));
+const _sfc_main = defineComponent({
+  __name: "AppIcon",
+  props: {
+    size: { default: "md" },
+    src: { default: "" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(["application-icon", `icon-${_ctx.size}`])
+      }, [
+        createElementVNode("img", {
+          src: _ctx.src,
+          alt: ""
+        }, null, 8, _hoisted_1),
+        _hoisted_2
+      ], 2);
+    };
+  }
+});
+var AppIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-359522d4"]]);
+
+export { AppIcon as default };

package/src/components/appIcon/index.vue.js

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

package/src/components/appTrigger/AppTrigger.vue.js

@@ -0,0 +1,188 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createElementVNode, createBlock, unref, createCommentVNode, createVNode, withCtx, createTextVNode, toDisplayString } from 'vue';
+import AppIcon from '../appIcon/AppIcon.vue.js';
+import '../button/Button.vue.js';
+import IconButton from '../button/IconButton.vue.js';
+import '../button/ScrollButton.vue.js';
+import Icon from '../icon/Icon.vue.js';
+import _sfc_main$1 from '../tooltip/Tooltip.vue.js';
+import '../typography/Heading.vue.js';
+import Text from '../typography/Text.vue.js';
+/* empty css                                                            */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+
+////import "../../AppTrigger.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = { class: "app-trigger__left-image" };
+const allTitle = "All apps selected";
+const NoAppsTitle = "No apps to select";
+const allAppsIcon = "widgetsz";
+const noAppsIcon = "cube-background";
+const _sfc_main = defineComponent({
+  __name: "AppTrigger",
+  props: {
+    selected: { default: null },
+    options: { default: null },
+    loading: { type: Boolean, default: false },
+    singleAppSelection: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const title = computed(() => {
+      if (props.singleAppSelection && noApp.value) {
+        return NoAppsTitle;
+      }
+      if (props.singleAppSelection && singleApp.value) {
+        return `${firstSelection.value?.name}`;
+      }
+      if (allMode.value) {
+        return allTitle;
+      }
+      if (singleApp.value) {
+        return `${firstSelection.value?.name}`;
+      }
+      return `${selectedSize.value} apps selected`;
+    });
+    const appIcon = computed(
+      () => props.singleAppSelection && noApp.value ? noAppsIcon : allAppsIcon
+    );
+    const osIcon = computed(() => {
+      if (!allMode.value || props.singleAppSelection && singleApp.value) {
+        return firstSelection.value.platform.toLowerCase();
+      }
+      return null;
+    });
+    const appImage = computed(() => {
+      if (!selectedSize.value || !optionsSize.value) {
+        return "";
+      }
+      return firstSelection.value?.icon;
+    });
+    const description = computed(() => {
+      if (props.loading) {
+        return "";
+      }
+      if (singleApp.value) {
+        return firstSelection.value.appKey;
+      }
+      if (allMode.value) {
+        return allDescription.value;
+      }
+      if (selectedSize.value <= 0) {
+        return `${firstSelection.value?.name}`;
+      }
+      return `${firstSelection.value?.name} and ${selectedSize.value - 1}+`;
+    });
+    const selectedSize = computed(() => {
+      return props.selected?.length || 0;
+    });
+    const optionsSize = computed(() => {
+      return props.options?.length || 0;
+    });
+    const singleApp = computed(() => {
+      return selectedSize.value === 1;
+    });
+    const noApp = computed(() => {
+      return optionsSize.value === 0;
+    });
+    const allMode = computed(() => {
+      return props.loading || optionsSize.value === selectedSize.value || !selectedSize.value;
+    });
+    const allDescription = computed(() => {
+      if (optionsSize.value === 1) {
+        return `${firstOption.value?.name}`;
+      }
+      return `${firstOption.value?.name} and ${optionsSize.value - 1}+`;
+    });
+    const firstSelection = computed(() => props.selected?.[0]);
+    const firstOption = computed(() => props.options?.[0]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["app-trigger", {
+          "app-trigger--with-icons": selectedSize.value > 0 || allMode.value
+        }])
+      }, [
+        renderSlot(_ctx.$slots, "left-image", {}, () => [
+          createElementVNode("div", _hoisted_1, [
+            appImage.value ? (openBlock(), createBlock(unref(AppIcon), {
+              key: 0,
+              size: "xl",
+              src: appImage.value
+            }, null, 8, ["src"])) : (openBlock(), createBlock(unref(Icon), {
+              key: 1,
+              class: "trigger-icon",
+              "font-size": "2rem",
+              name: appIcon.value
+            }, null, 8, ["name"]))
+          ])
+        ], true),
+        renderSlot(_ctx.$slots, "left-icon", {}, () => [
+          osIcon.value ? (openBlock(), createBlock(unref(Icon), {
+            key: 0,
+            class: "app-trigger__left-icon",
+            name: osIcon.value,
+            "font-size": "md"
+          }, null, 8, ["name"])) : createCommentVNode("", true)
+        ], true),
+        createElementVNode("div", {
+          class: normalizeClass(["app-trigger__middle-section", {
+            "app-trigger__middle-section--single": singleApp.value,
+            "app-trigger__middle-section--loading": _ctx.loading || !_ctx.options?.length
+          }])
+        }, [
+          renderSlot(_ctx.$slots, "title", {}, () => [
+            createVNode(unref(_sfc_main$1), { text: title.value }, {
+              default: withCtx(() => [
+                createVNode(unref(Text), {
+                  strong: "",
+                  class: "title",
+                  "is-truncated": "",
+                  size: "sm"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(title.value), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["text"])
+          ], true),
+          renderSlot(_ctx.$slots, "description", {}, () => [
+            createElementVNode("div", null, [
+              createVNode(unref(_sfc_main$1), { text: description.value }, {
+                default: withCtx(() => [
+                  createVNode(unref(Text), {
+                    class: "app-trigger__description",
+                    size: "xs",
+                    "is-truncated": ""
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(description.value), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["text"])
+            ])
+          ], true)
+        ], 2),
+        renderSlot(_ctx.$slots, "right-icon", {}, () => [
+          createVNode(unref(IconButton), {
+            class: "app-trigger__right-icon",
+            theme: "third"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(Icon), {
+                "font-size": "sm",
+                name: "angle-down"
+              })
+            ]),
+            _: 1
+          })
+        ], true)
+      ], 2);
+    };
+  }
+});
+var AppTrigger = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6c498348"]]);
+
+export { AppTrigger as default };

package/src/components/appTrigger/index.vue.js

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

package/src/components/autocompleteDropdown/AutocompleteDropdown.vue.js

@@ -0,0 +1,148 @@
+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';
+import '../dropdown/Option.vue.js';
+import '../dropdown/Label.vue.js';
+import '../dropdown/SearchInput.vue.js';
+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 _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+
+////import "../../AutocompleteDropdown.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _sfc_main = 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 }
+  },
+  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: selection.value,
+        options: filteredOptions.value,
+        "on-search": () => true,
+        "display-value": _ctx.displayValue,
+        "keep-open": "",
+        "is-on-top": false,
+        multi: false,
+        "show-select-all": false,
+        "auto-size": "",
+        distance: distance.value,
+        "disable-keyboard-events": "",
+        onOpened: scrollToTop,
+        onKeydown: withModifiers(unref(keyDownHandler), ["stop"]),
+        "onUpdate:selected": selectOption
+      }), {
+        input: withCtx(() => [
+          createVNode(AutocompleteInput, {
+            ref_key: "inputRef",
+            ref: inputRef,
+            value: selection.value,
+            placeholder: _ctx.placeholder,
+            "display-value": _ctx.displayValue,
+            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"])
+        ]),
+        default: withCtx(({ option }) => [
+          _ctx.grouped && isGroup(option) ? (openBlock(), createBlock(GroupOption, { key: 0 }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.displayValue(option)), 1)
+            ]),
+            _: 2
+          }, 1024)) : renderSlot(_ctx.$slots, "default", {
+            key: 1,
+            option,
+            active: unref(isFocused)(option)
+          }, void 0, true)
+        ]),
+        _: 3
+      }, 16, ["selected", "options", "display-value", "distance", "onKeydown"]);
+    };
+  }
+});
+var AutocompleteDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-201d8abe"]]);
+
+export { AutocompleteDropdown as default };

package/src/components/autocompleteDropdown/AutocompleteInput.vue.js

@@ -0,0 +1,93 @@
+import { defineComponent, ref, computed, watch, openBlock, createElementBlock, normalizeClass, withModifiers, Fragment, renderList, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, unref, 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';
+/* 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 = ["onClick"];
+const _hoisted_2 = ["value", "placeholder"];
+const _sfc_main = defineComponent({
+  __name: "AutocompleteInput",
+  props: {
+    value: { default: () => [] },
+    displayValue: { type: Function, default: (option) => option.toString() },
+    placeholder: { default: DEFAULT_PLACEHOLDER }
+  },
+  emits: ["remove", "search"],
+  setup(__props, { expose: __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": isOpen.value }]),
+        onClick: withModifiers(onContainerClick, ["stop"])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.value, (option, index) => {
+          return openBlock(), createElementBlock("div", {
+            key: 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"])
+          ]);
+        }), 128)),
+        createElementVNode("input", {
+          ref_key: "inputEl",
+          ref: inputEl,
+          class: "autocomplete-input__search-field",
+          type: "text",
+          value: unref(api).query.value,
+          placeholder: _ctx.placeholder,
+          onInput: onSearch
+        }, null, 40, _hoisted_2)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+var AutocompleteInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0e10ff6d"]]);
+
+export { AutocompleteInput as default };

package/src/components/autocompleteDropdown/GroupOption.vue.js

@@ -0,0 +1,43 @@
+import { defineComponent, ref, onMounted, onUnmounted, openBlock, createElementBlock, withModifiers, unref, createVNode, withCtx, renderSlot } from 'vue';
+import { NOOP } from '@vue/shared';
+import '../typography/Heading.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 _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+
+////import "../../GroupOption.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _sfc_main = 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/src/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 };

package/src/components/autocompleteDropdown/index.vue.js

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

package/src/components/autocompleteDropdown/useKeyboardNavigation.vue.js

@@ -0,0 +1,79 @@
+import { ref, computed, watch, toRaw } from 'vue';
+
+const useKeyboardNavigation = ({
+  options,
+  canFocus,
+  scrollTo,
+  selectItem
+}) => {
+  const focusedIndex = ref(-1);
+  const focusedOption = computed(() => options.value[focusedIndex.value]);
+  const optionAfterFocused = computed(
+    () => options.value[focusedIndex.value + 1]
+  );
+  const optionBeforeFocused = computed(
+    () => options.value[focusedIndex.value - 1]
+  );
+  const isFocused = (option) => {
+    return toRaw(option) === toRaw(focusedOption.value);
+  };
+  const focusNext = () => {
+    if (focusedIndex.value > options.value.length - 1)
+      return -1;
+    if (!canFocus(optionAfterFocused.value)) {
+      focusedIndex.value += 2;
+    } else {
+      focusedIndex.value += 1;
+    }
+  };
+  const focusPrev = () => {
+    if (focusedIndex.value < 0)
+      return -1;
+    if (!canFocus(optionBeforeFocused.value)) {
+      focusedIndex.value -= 2;
+    } else {
+      focusedIndex.value -= 1;
+    }
+  };
+  const selectFocused = () => {
+    if (!focusedOption.value || !canFocus(focusedOption.value))
+      return;
+    selectItem(focusedOption.value);
+  };
+  watch(options, () => {
+    focusedIndex.value = -1;
+  });
+  watch(focusedIndex, () => {
+    const scrollToIndex = focusedIndex.value - 5;
+    if (scrollToIndex >= 0) {
+      scrollTo(scrollToIndex);
+    }
+  });
+  function keyDownHandler(event) {
+    switch (event.key) {
+      case "ArrowUp": {
+        focusPrev();
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      }
+      case "ArrowDown": {
+        focusNext();
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      }
+      case "Enter": {
+        selectFocused();
+        event.preventDefault();
+        break;
+      }
+    }
+  }
+  return {
+    isFocused,
+    keyDownHandler
+  };
+};
+
+export { useKeyboardNavigation };