@onereach/ui-components 5.0.2-beta.3144.0 → 5.0.2-beta.3145.0

package/dist/bundled/v2/components/OrSelectV3/OrSelect.js

@@ -177,7 +177,6 @@ var script = defineComponent({
     });
     const control = ref();
     const searchControl = ref();
-    const mobileSearchControl = ref();
     const popover = ref();
     const popoverRoot = computed(() => {
       var _a;
@@ -273,16 +272,6 @@ var script = defineComponent({
         proxyModelValue.value = modelValue.filter(value => value !== option.value);
       }
     }
-    function focusSearchControl() {
-      setTimeout(() => {
-        var _a, _b;
-        if (isMobile.value) {
-          (_a = mobileSearchControl.value) === null || _a === void 0 ? void 0 : _a.focus();
-        } else {
-          (_b = searchControl.value) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-      });
-    }
     function clearSearchControl() {
       searchText.value = '';
     }
@@ -292,15 +281,21 @@ var script = defineComponent({
     } = useOverflow(control);
     // Utils
     const {
+      isDesktop,
       isMobile
     } = useResponsive();
+    // Effects
+    watch(searchControl, control => {
+      setTimeout(() => {
+        control === null || control === void 0 ? void 0 : control.focus();
+      });
+    });
     return {
       root,
       inputBox,
       inputBoxRoot,
       control,
       searchControl,
-      mobileSearchControl,
       popover,
       popoverRoot,
       popoverState,
@@ -323,10 +318,10 @@ var script = defineComponent({
       toggle,
       close,
       deselect,
-      focusSearchControl,
       clearSearchControl,
       innerItems,
       outerItems,
+      isDesktop,
       isMobile
     };
   }
@@ -411,7 +406,7 @@ var __vue_render__ = function () {
     });
   }, {
     "model": _vm.proxyModelValue
-  }), _vm._v(" "), _vm.popoverState === 'open' && _vm.enableSearch ? [_c('OrInput', {
+  }), _vm._v(" "), _vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
     ref: "searchControl",
     class: _vm.searchControlStyles,
     attrs: {
@@ -432,7 +427,7 @@ var __vue_render__ = function () {
       },
       expression: "searchText"
     }
-  })] : _vm._e()] : [_vm.popoverState === 'open' && _vm.enableSearch ? [_c('OrInput', {
+  })] : _vm._e()] : [_vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
     ref: "searchControl",
     class: _vm.searchControlStyles,
     attrs: {
@@ -458,7 +453,7 @@ var __vue_render__ = function () {
     attrs: {
       "disabled": _vm.disabled ? '' : null
     }
-  }, [_vm._v("\n              " + _vm._s(_vm.placeholder) + "\n            ")])]]] : [_vm.popoverState === 'open' && _vm.enableSearch ? [_c('OrInput', {
+  }, [_vm._v("\n              " + _vm._s(_vm.placeholder) + "\n            ")])]]] : [_vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
     ref: "searchControl",
     class: _vm.searchControlStyles,
     attrs: {
@@ -520,15 +515,12 @@ var __vue_render__ = function () {
       "disable-default-styles": true
     },
     on: {
-      "open": function ($event) {
-        return _vm.focusSearchControl();
-      },
       "close": function ($event) {
         return _vm.clearSearchControl();
       }
     }
-  }, [_vm.isMobile ? [_c('OrInput', {
-    ref: "mobileSearchControl",
+  }, [_vm.popoverState === 'open' && _vm.enableSearch && _vm.isMobile ? [_c('OrInput', {
+    ref: "searchControl",
     class: _vm.searchControlStyles,
     attrs: {
       "type": 'search',

package/dist/bundled/v2/components/OrSelectV3/OrSelect.vue.d.ts

@@ -11,7 +11,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     inputBoxRoot: import("@vue/composition-api").ComputedRef<undefined>;
     control: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     searchControl: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    mobileSearchControl: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -41,10 +40,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toggle: () => void;
     close: () => void;
     deselect: (option: SelectOption) => void;
-    focusSearchControl: () => void;
     clearSearchControl: () => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
     isMobile: import("@vue/composition-api").Ref<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     options: {
@@ -205,7 +204,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     inputBoxRoot: import("@vue/composition-api").ComputedRef<undefined>;
     control: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     searchControl: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    mobileSearchControl: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -235,10 +233,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toggle: () => void;
     close: () => void;
     deselect: (option: SelectOption) => void;
-    focusSearchControl: () => void;
     clearSearchControl: () => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
     isMobile: import("@vue/composition-api").Ref<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string | number | object | string[] | object[] | number[];

package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-5f42a363.js → OrSelect.vue_vue_type_script_lang-4a6e81f8.js}

@@ -142,7 +142,6 @@ var script = defineComponent({
     });
     const control = ref();
     const searchControl = ref();
-    const mobileSearchControl = ref();
     const popover = ref();
     const popoverRoot = computed(() => {
       var _a;
@@ -238,16 +237,6 @@ var script = defineComponent({
         proxyModelValue.value = modelValue.filter(value => value !== option.value);
       }
     }
-    function focusSearchControl() {
-      setTimeout(() => {
-        var _a, _b;
-        if (isMobile.value) {
-          (_a = mobileSearchControl.value) === null || _a === void 0 ? void 0 : _a.focus();
-        } else {
-          (_b = searchControl.value) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-      });
-    }
     function clearSearchControl() {
       searchText.value = '';
     }
@@ -257,15 +246,21 @@ var script = defineComponent({
     } = useOverflow(control);
     // Utils
     const {
+      isDesktop,
       isMobile
     } = useResponsive();
+    // Effects
+    watch(searchControl, control => {
+      setTimeout(() => {
+        control === null || control === void 0 ? void 0 : control.focus();
+      });
+    });
     return {
       root,
       inputBox,
       inputBoxRoot,
       control,
       searchControl,
-      mobileSearchControl,
       popover,
       popoverRoot,
       popoverState,
@@ -288,10 +283,10 @@ var script = defineComponent({
       toggle,
       close,
       deselect,
-      focusSearchControl,
       clearSearchControl,
       innerItems,
       outerItems,
+      isDesktop,
       isMobile
     };
   }

package/dist/bundled/v3/components/OrSelectV3/OrSelect.js

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrSelect.vue_vue_type_script_lang-5f42a363.js';
-export { s as default } from '../../OrSelect.vue_vue_type_script_lang-5f42a363.js';
+import { s as script } from '../../OrSelect.vue_vue_type_script_lang-4a6e81f8.js';
+export { s as default } from '../../OrSelect.vue_vue_type_script_lang-4a6e81f8.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, withModifiers, createVNode, vShow } from 'vue';
 import 'vue-demi';
 import '../../utils/isEmptyValue.js';
@@ -163,7 +163,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
         _: 2 /* DYNAMIC */
       }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled", "onReset"]);
-    }), 128 /* KEYED_FRAGMENT */))]), _ctx.popoverState === 'open' && _ctx.enableSearch ? (openBlock(), createBlock(_component_OrInput, {
+    }), 128 /* KEYED_FRAGMENT */))]), _ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
       key: 0,
       ref: "searchControl",
       modelValue: _ctx.searchText,
@@ -176,7 +176,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
     }, null, 8 /* PROPS */, ["modelValue", "class", "size"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
       key: 1
-    }, [_ctx.popoverState === 'open' && _ctx.enableSearch ? (openBlock(), createBlock(_component_OrInput, {
+    }, [_ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
       key: 0,
       ref: "searchControl",
       modelValue: _ctx.searchText,
@@ -193,7 +193,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       disabled: _ctx.disabled ? '' : null
     }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_2))], 64 /* STABLE_FRAGMENT */))], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
       key: 1
-    }, [_ctx.popoverState === 'open' && _ctx.enableSearch ? (openBlock(), createBlock(_component_OrInput, {
+    }, [_ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
       key: 0,
       ref: "searchControl",
       modelValue: _ctx.searchText,
@@ -232,12 +232,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "full-width": true,
       "custom-styles": _ctx.dropdownStyles,
       "disable-default-styles": true,
-      onOpen: _cache[12] || (_cache[12] = $event => _ctx.focusSearchControl()),
-      onClose: _cache[13] || (_cache[13] = $event => _ctx.clearSearchControl())
+      onClose: _cache[12] || (_cache[12] = $event => _ctx.clearSearchControl())
     }, {
-      default: withCtx(() => [_ctx.isMobile ? (openBlock(), createBlock(_component_OrInput, {
+      default: withCtx(() => [_ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isMobile ? (openBlock(), createBlock(_component_OrInput, {
         key: 0,
-        ref: "mobileSearchControl",
+        ref: "searchControl",
         modelValue: _ctx.searchText,
         "onUpdate:modelValue": _cache[9] || (_cache[9] = $event => _ctx.searchText = $event),
         class: normalizeClass(_ctx.searchControlStyles),

package/dist/bundled/v3/components/OrSelectV3/OrSelect.vue.d.ts

@@ -72,7 +72,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     inputBoxRoot: import("vue-demi").ComputedRef<any>;
     control: import("vue-demi").Ref<HTMLElement | undefined>;
     searchControl: import("vue-demi").Ref<HTMLElement | undefined>;
-    mobileSearchControl: import("vue-demi").Ref<HTMLElement | undefined>;
     popover: import("vue-demi").Ref<any>;
     popoverRoot: import("vue-demi").ComputedRef<any>;
     popoverState: import("vue-demi").ComputedRef<any>;
@@ -98,10 +97,10 @@ declare const _default: import("vue-demi").DefineComponent<{
     toggle: () => void;
     close: () => void;
     deselect: (option: SelectOption) => void;
-    focusSearchControl: () => void;
     clearSearchControl: () => void;
     innerItems: import("vue-demi").Ref<HTMLElement[]>;
     outerItems: import("vue-demi").Ref<HTMLElement[]>;
+    isDesktop: import("vue-demi").Ref<boolean>;
     isMobile: import("vue-demi").Ref<boolean>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("search" | "update:modelValue" | "focus" | "blur")[], "search" | "update:modelValue" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     options: {

package/dist/bundled/v3/components/OrSelectV3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-5f42a363.js';
+export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-4a6e81f8.js';
 export { InputBoxSize as SelectSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../../utils/isEmptyValue.js';

package/dist/bundled/v3/components/index.js

@@ -114,7 +114,7 @@ export { s as OrSearchV3 } from '../OrSearch.vue_vue_type_script_lang-12bbade9.j
 export { s as OrSegmentedControlV3 } from '../OrSegmentedControl.vue_vue_type_script_lang-3a7df112.js';
 export { SegmentedControlSize } from './OrSegmentedControlV3/props.js';
 export { s as OrSelect } from '../OrSelect.vue_vue_type_script_lang-2516881b.js';
-export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-5f42a363.js';
+export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-4a6e81f8.js';
 export { s as OrSidebar } from '../OrSidebar.vue_vue_type_script_lang-81941fe6.js';
 export { OrSidebarSide } from './OrSidebar/constants.js';
 export { s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-a7103da5.js';

package/dist/bundled/v3/index.js

@@ -74,7 +74,7 @@ export { s as OrSegmentedControlV3 } from './OrSegmentedControl.vue_vue_type_scr
 import './components/OrSelect/OrSelect.js';
 export { s as OrSelect } from './OrSelect.vue_vue_type_script_lang-2516881b.js';
 import './components/OrSelectV3/OrSelect.js';
-export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-5f42a363.js';
+export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-4a6e81f8.js';
 import './components/OrSidebar/OrSidebar.js';
 export { s as OrSidebar } from './OrSidebar.vue_vue_type_script_lang-81941fe6.js';
 import './components/OrSidebarV3/OrSidebar.js';

package/dist/esm/v2/{OrSelect-36461157.js → OrSelect-4f215342.js}

@@ -192,7 +192,6 @@ var script = defineComponent({
     });
     const control = ref();
     const searchControl = ref();
-    const mobileSearchControl = ref();
     const popover = ref();
     const popoverRoot = computed(() => {
       var _a;
@@ -288,16 +287,6 @@ var script = defineComponent({
         proxyModelValue.value = modelValue.filter(value => value !== option.value);
       }
     }
-    function focusSearchControl() {
-      setTimeout(() => {
-        var _a, _b;
-        if (isMobile.value) {
-          (_a = mobileSearchControl.value) === null || _a === void 0 ? void 0 : _a.focus();
-        } else {
-          (_b = searchControl.value) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-      });
-    }
     function clearSearchControl() {
       searchText.value = '';
     }
@@ -307,15 +296,21 @@ var script = defineComponent({
     } = useOverflow(control);
     // Utils
     const {
+      isDesktop,
       isMobile
     } = useResponsive();
+    // Effects
+    watch(searchControl, control => {
+      setTimeout(() => {
+        control === null || control === void 0 ? void 0 : control.focus();
+      });
+    });
     return {
       root,
       inputBox,
       inputBoxRoot,
       control,
       searchControl,
-      mobileSearchControl,
       popover,
       popoverRoot,
       popoverState,
@@ -338,10 +333,10 @@ var script = defineComponent({
       toggle,
       close,
       deselect,
-      focusSearchControl,
       clearSearchControl,
       innerItems,
       outerItems,
+      isDesktop,
       isMobile
     };
   }
@@ -426,7 +421,7 @@ var __vue_render__ = function () {
     });
   }, {
     "model": _vm.proxyModelValue
-  }), _vm._v(" "), _vm.popoverState === 'open' && _vm.enableSearch ? [_c('OrInput', {
+  }), _vm._v(" "), _vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
     ref: "searchControl",
     class: _vm.searchControlStyles,
     attrs: {
@@ -447,7 +442,7 @@ var __vue_render__ = function () {
       },
       expression: "searchText"
     }
-  })] : _vm._e()] : [_vm.popoverState === 'open' && _vm.enableSearch ? [_c('OrInput', {
+  })] : _vm._e()] : [_vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
     ref: "searchControl",
     class: _vm.searchControlStyles,
     attrs: {
@@ -473,7 +468,7 @@ var __vue_render__ = function () {
     attrs: {
       "disabled": _vm.disabled ? '' : null
     }
-  }, [_vm._v("\n              " + _vm._s(_vm.placeholder) + "\n            ")])]]] : [_vm.popoverState === 'open' && _vm.enableSearch ? [_c('OrInput', {
+  }, [_vm._v("\n              " + _vm._s(_vm.placeholder) + "\n            ")])]]] : [_vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
     ref: "searchControl",
     class: _vm.searchControlStyles,
     attrs: {
@@ -535,15 +530,12 @@ var __vue_render__ = function () {
       "disable-default-styles": true
     },
     on: {
-      "open": function ($event) {
-        return _vm.focusSearchControl();
-      },
       "close": function ($event) {
         return _vm.clearSearchControl();
       }
     }
-  }, [_vm.isMobile ? [_c('OrInput', {
-    ref: "mobileSearchControl",
+  }, [_vm.popoverState === 'open' && _vm.enableSearch && _vm.isMobile ? [_c('OrInput', {
+    ref: "searchControl",
     class: _vm.searchControlStyles,
     attrs: {
       "type": 'search',

package/dist/esm/v2/components/index.js

@@ -78,7 +78,7 @@ export { _ as OrSearch } from '../OrSearch-ac542dd6.js';
 export { _ as OrSearchV3 } from '../OrSearch-598dee09.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-d4e32f80.js';
 export { _ as OrSelect } from '../OrSelect-c0d04cf6.js';
-export { _ as OrSelectV3 } from '../OrSelect-36461157.js';
+export { _ as OrSelectV3 } from '../OrSelect-4f215342.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-c56a9221.js';
 export { _ as OrSidebarV3 } from '../OrSidebar-0539d572.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-8474d9c3.js';

package/dist/esm/v2/components/or-select-v3/OrSelect.vue.d.ts

@@ -11,7 +11,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     inputBoxRoot: import("@vue/composition-api").ComputedRef<undefined>;
     control: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     searchControl: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    mobileSearchControl: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -41,10 +40,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toggle: () => void;
     close: () => void;
     deselect: (option: SelectOption) => void;
-    focusSearchControl: () => void;
     clearSearchControl: () => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
     isMobile: import("@vue/composition-api").Ref<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     options: {
@@ -205,7 +204,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     inputBoxRoot: import("@vue/composition-api").ComputedRef<undefined>;
     control: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     searchControl: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    mobileSearchControl: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -235,10 +233,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toggle: () => void;
     close: () => void;
     deselect: (option: SelectOption) => void;
-    focusSearchControl: () => void;
     clearSearchControl: () => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
     isMobile: import("@vue/composition-api").Ref<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string | number | object | string[] | object[] | number[];

package/dist/esm/v2/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-36461157.js';
+export { _ as OrSelectV3 } from '../../OrSelect-4f215342.js';
 export { I as SelectSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';

package/dist/esm/v2/index.js

@@ -78,7 +78,7 @@ export { _ as OrSearch } from './OrSearch-ac542dd6.js';
 export { _ as OrSearchV3 } from './OrSearch-598dee09.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-d4e32f80.js';
 export { _ as OrSelect } from './OrSelect-c0d04cf6.js';
-export { _ as OrSelectV3 } from './OrSelect-36461157.js';
+export { _ as OrSelectV3 } from './OrSelect-4f215342.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-c56a9221.js';
 export { _ as OrSidebarV3 } from './OrSidebar-0539d572.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-8474d9c3.js';

package/dist/esm/v3/{OrSelect-1ef6f9d9.js → OrSelect-f1ab4b44.js}

@@ -191,7 +191,6 @@ var script = defineComponent({
     });
     const control = ref();
     const searchControl = ref();
-    const mobileSearchControl = ref();
     const popover = ref();
     const popoverRoot = computed(() => {
       var _a;
@@ -287,16 +286,6 @@ var script = defineComponent({
         proxyModelValue.value = modelValue.filter(value => value !== option.value);
       }
     }
-    function focusSearchControl() {
-      setTimeout(() => {
-        var _a, _b;
-        if (isMobile.value) {
-          (_a = mobileSearchControl.value) === null || _a === void 0 ? void 0 : _a.focus();
-        } else {
-          (_b = searchControl.value) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-      });
-    }
     function clearSearchControl() {
       searchText.value = '';
     }
@@ -306,15 +295,21 @@ var script = defineComponent({
     } = useOverflow(control);
     // Utils
     const {
+      isDesktop,
       isMobile
     } = useResponsive();
+    // Effects
+    watch(searchControl, control => {
+      setTimeout(() => {
+        control === null || control === void 0 ? void 0 : control.focus();
+      });
+    });
     return {
       root,
       inputBox,
       inputBoxRoot,
       control,
       searchControl,
-      mobileSearchControl,
       popover,
       popoverRoot,
       popoverState,
@@ -337,10 +332,10 @@ var script = defineComponent({
       toggle,
       close,
       deselect,
-      focusSearchControl,
       clearSearchControl,
       innerItems,
       outerItems,
+      isDesktop,
       isMobile
     };
   }
@@ -424,7 +419,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
         _: 2 /* DYNAMIC */
       }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled", "onReset"]);
-    }), 128 /* KEYED_FRAGMENT */))]), _ctx.popoverState === 'open' && _ctx.enableSearch ? (openBlock(), createBlock(_component_OrInput, {
+    }), 128 /* KEYED_FRAGMENT */))]), _ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
       key: 0,
       ref: "searchControl",
       modelValue: _ctx.searchText,
@@ -437,7 +432,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
     }, null, 8 /* PROPS */, ["modelValue", "class", "size"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
       key: 1
-    }, [_ctx.popoverState === 'open' && _ctx.enableSearch ? (openBlock(), createBlock(_component_OrInput, {
+    }, [_ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
       key: 0,
       ref: "searchControl",
       modelValue: _ctx.searchText,
@@ -454,7 +449,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       disabled: _ctx.disabled ? '' : null
     }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_2))], 64 /* STABLE_FRAGMENT */))], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
       key: 1
-    }, [_ctx.popoverState === 'open' && _ctx.enableSearch ? (openBlock(), createBlock(_component_OrInput, {
+    }, [_ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
       key: 0,
       ref: "searchControl",
       modelValue: _ctx.searchText,
@@ -493,12 +488,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "full-width": true,
       "custom-styles": _ctx.dropdownStyles,
       "disable-default-styles": true,
-      onOpen: _cache[12] || (_cache[12] = $event => _ctx.focusSearchControl()),
-      onClose: _cache[13] || (_cache[13] = $event => _ctx.clearSearchControl())
+      onClose: _cache[12] || (_cache[12] = $event => _ctx.clearSearchControl())
     }, {
-      default: withCtx(() => [_ctx.isMobile ? (openBlock(), createBlock(_component_OrInput, {
+      default: withCtx(() => [_ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isMobile ? (openBlock(), createBlock(_component_OrInput, {
         key: 0,
-        ref: "mobileSearchControl",
+        ref: "searchControl",
         modelValue: _ctx.searchText,
         "onUpdate:modelValue": _cache[9] || (_cache[9] = $event => _ctx.searchText = $event),
         class: normalizeClass(_ctx.searchControlStyles),

package/dist/esm/v3/components/index.js

@@ -75,7 +75,7 @@ export { s as OrSearch } from '../OrSearch-2800e9bf.js';
 export { s as OrSearchV3 } from '../OrSearch-998e4390.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-c8eb217d.js';
 export { s as OrSelect } from '../OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from '../OrSelect-1ef6f9d9.js';
+export { s as OrSelectV3 } from '../OrSelect-f1ab4b44.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from '../OrSidebar-d8e70813.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-7a9f76cf.js';

package/dist/esm/v3/components/or-select-v3/OrSelect.vue.d.ts

@@ -72,7 +72,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     inputBoxRoot: import("vue-demi").ComputedRef<any>;
     control: import("vue-demi").Ref<HTMLElement | undefined>;
     searchControl: import("vue-demi").Ref<HTMLElement | undefined>;
-    mobileSearchControl: import("vue-demi").Ref<HTMLElement | undefined>;
     popover: import("vue-demi").Ref<any>;
     popoverRoot: import("vue-demi").ComputedRef<any>;
     popoverState: import("vue-demi").ComputedRef<any>;
@@ -98,10 +97,10 @@ declare const _default: import("vue-demi").DefineComponent<{
     toggle: () => void;
     close: () => void;
     deselect: (option: SelectOption) => void;
-    focusSearchControl: () => void;
     clearSearchControl: () => void;
     innerItems: import("vue-demi").Ref<HTMLElement[]>;
     outerItems: import("vue-demi").Ref<HTMLElement[]>;
+    isDesktop: import("vue-demi").Ref<boolean>;
     isMobile: import("vue-demi").Ref<boolean>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("search" | "update:modelValue" | "focus" | "blur")[], "search" | "update:modelValue" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     options: {

package/dist/esm/v3/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-1ef6f9d9.js';
+export { s as OrSelectV3 } from '../../OrSelect-f1ab4b44.js';
 export { I as SelectSize } from '../../OrInputBox-912a6254.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';

package/dist/esm/v3/index.js

@@ -75,7 +75,7 @@ export { s as OrSearch } from './OrSearch-2800e9bf.js';
 export { s as OrSearchV3 } from './OrSearch-998e4390.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-c8eb217d.js';
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from './OrSelect-1ef6f9d9.js';
+export { s as OrSelectV3 } from './OrSelect-f1ab4b44.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from './OrSidebar-d8e70813.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-7a9f76cf.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "5.0.2-beta.3144.0",
+  "version": "5.0.2-beta.3145.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,

package/src/components/or-select-v3/OrSelect.vue

@@ -55,7 +55,7 @@
               </OrTag>
             </slot>
 
-            <template v-if="popoverState === 'open' && enableSearch">
+            <template v-if="popoverState === 'open' && enableSearch && isDesktop">
               <OrInput
                 ref="searchControl"
                 v-model="searchText"
@@ -70,7 +70,7 @@
           </template>
 
           <template v-else>
-            <template v-if="popoverState === 'open' && enableSearch">
+            <template v-if="popoverState === 'open' && enableSearch && isDesktop">
               <OrInput
                 ref="searchControl"
                 v-model="searchText"
@@ -95,7 +95,7 @@
         </template>
 
         <template v-else>
-          <template v-if="popoverState === 'open' && enableSearch">
+          <template v-if="popoverState === 'open' && enableSearch && isDesktop">
             <OrInput
               ref="searchControl"
               v-model="searchText"
@@ -160,12 +160,11 @@
         :full-width="true"
         :custom-styles="dropdownStyles"
         :disable-default-styles="true"
-        @open="focusSearchControl()"
         @close="clearSearchControl()"
       >
-        <template v-if="isMobile">
+        <template v-if="popoverState === 'open' && enableSearch && isMobile">
           <OrInput
-            ref="mobileSearchControl"
+            ref="searchControl"
             v-model="searchText"
             :class="searchControlStyles"
             :type="'search'"
@@ -452,7 +451,6 @@ export default defineComponent({
     const control = ref<HTMLElement>();
 
     const searchControl = ref<HTMLElement>();
-    const mobileSearchControl = ref<HTMLElement>();
 
     const popover = ref<InstanceType<typeof OrPopover>>();
     const popoverRoot = computed(() => popover.value?.root);
@@ -593,16 +591,6 @@ export default defineComponent({
       }
     }
 
-    function focusSearchControl(): void {
-      setTimeout(() => {
-        if (isMobile.value) {
-          mobileSearchControl.value?.focus();
-        } else {
-          searchControl.value?.focus();
-        }
-      });
-    }
-
     function clearSearchControl(): void {
       searchText.value = '';
     }
@@ -610,7 +598,14 @@ export default defineComponent({
     const { innerItems, outerItems } = useOverflow(control);
 
     // Utils
-    const { isMobile } = useResponsive();
+    const { isDesktop, isMobile } = useResponsive();
+
+    // Effects
+    watch(searchControl, (control) => {
+      setTimeout(() => {
+        control?.focus();
+      });
+    });
 
     return {
       root,
@@ -618,7 +613,6 @@ export default defineComponent({
       inputBoxRoot,
       control,
       searchControl,
-      mobileSearchControl,
       popover,
       popoverRoot,
       popoverState,
@@ -641,10 +635,10 @@ export default defineComponent({
       toggle,
       close,
       deselect,
-      focusSearchControl,
       clearSearchControl,
       innerItems,
       outerItems,
+      isDesktop,
       isMobile,
     };
   },