@onereach/ui-components 5.0.2-beta.3150.0 → 5.0.2-beta.3152.0

package/dist/esm/v2/{OrSelect-7dcb6eb1.js → OrSelect-804d3352.js}

@@ -29,7 +29,9 @@ const Select = [
 'gap-xs'];
 const SelectControl = [
 // Layout
-'layout-row grow',
+'layout-row',
+// Layout (empty)
+'empty:hidden',
 // Overflow
 'overflow-hidden',
 // Spacing
@@ -202,9 +204,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...Select]);
     const controlStyles = computed(() => [...SelectControl]);
-    const searchControlStyles = computed(() => [...SelectSearchControl, '!visible' // Search control is always visible despite `useOverflow` effects
-    ]);
-
+    const searchControlStyles = computed(() => [...SelectSearchControl]);
     const placeholderStyles = computed(() => [...SelectPlaceholder]);
     const dropdownStyles = computed(() => {
       var _a;
@@ -421,56 +421,25 @@ var __vue_render__ = function () {
     });
   }, {
     "model": _vm.proxyModelValue
-  }), _vm._v(" "), _vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
-    ref: "searchControl",
-    class: _vm.searchControlStyles,
-    attrs: {
-      "type": 'search',
-      "placeholder": _vm.placeholder,
-      "size": _vm.size,
-      "disable-default-styles": true
-    },
-    on: {
-      "click": function ($event) {
-        $event.stopPropagation();
-      }
-    },
-    model: {
-      value: _vm.searchText,
-      callback: function ($$v) {
-        _vm.searchText = $$v;
-      },
-      expression: "searchText"
-    }
-  })] : _vm._e()] : [_vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
-    ref: "searchControl",
-    class: _vm.searchControlStyles,
+  })] : _vm.popoverState === 'closed' || !_vm.enableSearch ? [_c('span', {
+    class: _vm.placeholderStyles,
     attrs: {
-      "type": 'search',
-      "placeholder": _vm.placeholder,
-      "size": _vm.size,
-      "disable-default-styles": true
-    },
-    on: {
-      "click": function ($event) {
-        $event.stopPropagation();
-      }
-    },
-    model: {
-      value: _vm.searchText,
-      callback: function ($$v) {
-        _vm.searchText = $$v;
-      },
-      expression: "searchText"
+      "disabled": _vm.disabled ? '' : null
     }
-  })] : [_c('span', {
+  }, [_vm._v("\n            " + _vm._s(_vm.placeholder) + "\n          ")])] : _vm._e()] : [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
+    return [_c('span', {
+      staticClass: "truncate"
+    }, [_vm._v("\n              " + _vm._s(_vm.selection && _vm.selection.label) + "\n            ")])];
+  }, {
+    "model": _vm.proxyModelValue
+  })] : _vm.popoverState === 'closed' || !_vm.enableSearch ? [_c('span', {
     class: _vm.placeholderStyles,
     attrs: {
       "disabled": _vm.disabled ? '' : null
     }
-  }, [_vm._v("\n              " + _vm._s(_vm.placeholder) + "\n            ")])]]] : [_vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
+  }, [_vm._v("\n            " + _vm._s(_vm.placeholder) + "\n          ")])] : _vm._e()]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n      +" + _vm._s(_vm.outerItems.length) + "\n    ")] : _vm._e(), _vm._v(" "), _vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
     ref: "searchControl",
-    class: _vm.searchControlStyles,
+    class: _vm.searchControlStyles.concat([_vm.isEmptyModelValue && 'md:!ml-none']),
     attrs: {
       "type": 'search',
       "placeholder": _vm.placeholder,
@@ -489,20 +458,11 @@ var __vue_render__ = function () {
       },
       expression: "searchText"
     }
-  })] : [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
-    return [_c('span', {
-      staticClass: "truncate"
-    }, [_vm._v("\n                " + _vm._s(_vm.selection && _vm.selection.label) + "\n              ")])];
-  }, {
-    "model": _vm.proxyModelValue
-  })] : [_c('span', {
-    class: _vm.placeholderStyles,
-    attrs: {
-      "disabled": _vm.disabled ? '' : null
-    }
-  }, [_vm._v("\n              " + _vm._s(_vm.placeholder) + "\n            ")])]]]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n      +" + _vm._s(_vm.outerItems.length) + "\n    ")] : _vm._e(), _vm._v(" "), _c('div', {
+  })] : [_c('div', {
+    class: ['grow']
+  })], _vm._v(" "), _c('div', {
     class: ['layout-inline-row', 'gap-sm']
-  }, [!_vm.isEmptyModelValue && _vm.popoverState === 'closed' ? [_c('OrIconButton', {
+  }, [_vm.popoverState === 'closed' && !_vm.isEmptyModelValue ? [_c('OrIconButton', {
     attrs: {
       "icon": 'close',
       "color": 'inherit',

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-7dcb6eb1.js';
+export { _ as OrSelectV3 } from '../OrSelect-804d3352.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/index.js

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-7dcb6eb1.js';
+export { _ as OrSelectV3 } from '../../OrSelect-804d3352.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-7dcb6eb1.js';
+export { _ as OrSelectV3 } from './OrSelect-804d3352.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-2af4a6eb.js → OrSelect-268edd66.js}

@@ -28,7 +28,9 @@ const Select = [
 'gap-xs'];
 const SelectControl = [
 // Layout
-'layout-row grow',
+'layout-row',
+// Layout (empty)
+'empty:hidden',
 // Overflow
 'overflow-hidden',
 // Spacing
@@ -201,9 +203,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...Select]);
     const controlStyles = computed(() => [...SelectControl]);
-    const searchControlStyles = computed(() => [...SelectSearchControl, '!visible' // Search control is always visible despite `useOverflow` effects
-    ]);
-
+    const searchControlStyles = computed(() => [...SelectSearchControl]);
     const placeholderStyles = computed(() => [...SelectPlaceholder]);
     const dropdownStyles = computed(() => {
       var _a;
@@ -348,14 +348,18 @@ const _hoisted_3 = {
 };
 const _hoisted_4 = ["disabled"];
 const _hoisted_5 = {
-  class: /*#__PURE__*/normalizeClass(['layout-inline-row', 'gap-sm'])
+  key: 2,
+  class: /*#__PURE__*/normalizeClass(['grow'])
 };
 const _hoisted_6 = {
-  class: /*#__PURE__*/normalizeClass(['contents'])
+  class: /*#__PURE__*/normalizeClass(['layout-inline-row', 'gap-sm'])
 };
 const _hoisted_7 = {
   class: /*#__PURE__*/normalizeClass(['contents'])
 };
+const _hoisted_8 = {
+  class: /*#__PURE__*/normalizeClass(['contents'])
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
   const _component_OrTag = resolveComponent("OrTag");
@@ -400,13 +404,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(_ctx.controlStyles),
       tabindex: !_ctx.disabled ? 0 : null,
       disabled: _ctx.disabled,
-      onFocus: _cache[6] || (_cache[6] = $event => _ctx.$emit('focus', $event)),
-      onBlur: _cache[7] || (_cache[7] = $event => _ctx.$emit('blur', $event))
+      onFocus: _cache[0] || (_cache[0] = $event => _ctx.$emit('focus', $event)),
+      onBlur: _cache[1] || (_cache[1] = $event => _ctx.$emit('blur', $event))
     }, [_ctx.multiple ? (openBlock(), createElementBlock(Fragment, {
       key: 0
-    }, [!_ctx.isEmptyModelValue ? (openBlock(), createElementBlock(Fragment, {
-      key: 0
-    }, [renderSlot(_ctx.$slots, "valueTemplate", {
+    }, [!_ctx.isEmptyModelValue ? renderSlot(_ctx.$slots, "valueTemplate", {
+      key: 0,
       model: _ctx.proxyModelValue
     }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selection, option => {
       return openBlock(), createBlock(_component_OrTag, {
@@ -419,64 +422,38 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
         _: 2 /* DYNAMIC */
       }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled", "onReset"]);
-    }), 128 /* KEYED_FRAGMENT */))]), _ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
-      key: 0,
-      ref: "searchControl",
-      modelValue: _ctx.searchText,
-      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.searchText = $event),
-      class: normalizeClass(_ctx.searchControlStyles),
-      type: 'search',
-      placeholder: _ctx.placeholder,
-      size: _ctx.size,
-      "disable-default-styles": true,
-      onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
-    }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
-      key: 1
-    }, [_ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
-      key: 0,
-      ref: "searchControl",
-      modelValue: _ctx.searchText,
-      "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.searchText = $event),
-      class: normalizeClass(_ctx.searchControlStyles),
-      type: 'search',
-      placeholder: _ctx.placeholder,
-      size: _ctx.size,
-      "disable-default-styles": true,
-      onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
-    }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : (openBlock(), createElementBlock("span", {
+    }), 128 /* KEYED_FRAGMENT */))]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(), createElementBlock("span", {
       key: 1,
       class: normalizeClass(_ctx.placeholderStyles),
       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 && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
-      key: 0,
-      ref: "searchControl",
-      modelValue: _ctx.searchText,
-      "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.searchText = $event),
-      class: normalizeClass(_ctx.searchControlStyles),
-      type: 'search',
-      placeholder: _ctx.placeholder,
-      size: _ctx.size,
-      "disable-default-styles": true,
-      onClick: _cache[5] || (_cache[5] = withModifiers(() => {}, ["stop"]))
-    }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : (openBlock(), createElementBlock(Fragment, {
+    }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_2)) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
       key: 1
     }, [!_ctx.isEmptyModelValue ? renderSlot(_ctx.$slots, "valueTemplate", {
       key: 0,
       model: _ctx.proxyModelValue
-    }, () => [createElementVNode("span", _hoisted_3, toDisplayString(_ctx.selection && _ctx.selection.label), 1 /* TEXT */)]) : (openBlock(), createElementBlock("span", {
+    }, () => [createElementVNode("span", _hoisted_3, toDisplayString(_ctx.selection && _ctx.selection.label), 1 /* TEXT */)]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(), createElementBlock("span", {
       key: 1,
       class: normalizeClass(_ctx.placeholderStyles),
       disabled: _ctx.disabled ? '' : null
-    }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_4))], 64 /* STABLE_FRAGMENT */))], 64 /* STABLE_FRAGMENT */))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), _ctx.multiple && _ctx.outerItems.length > 0 ? (openBlock(), createElementBlock(Fragment, {
+    }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_4)) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), _ctx.multiple && _ctx.outerItems.length > 0 ? (openBlock(), createElementBlock(Fragment, {
       key: 0
-    }, [createTextVNode(" +" + toDisplayString(_ctx.outerItems.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_5, [!_ctx.isEmptyModelValue && _ctx.popoverState === 'closed' ? (openBlock(), createBlock(_component_OrIconButton, {
+    }, [createTextVNode(" +" + toDisplayString(_ctx.outerItems.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), _ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
+      key: 1,
+      ref: "searchControl",
+      modelValue: _ctx.searchText,
+      "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.searchText = $event),
+      class: normalizeClass([..._ctx.searchControlStyles, _ctx.isEmptyModelValue && 'md:!ml-none']),
+      type: 'search',
+      placeholder: _ctx.placeholder,
+      size: _ctx.size,
+      "disable-default-styles": true,
+      onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
+    }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : (openBlock(), createElementBlock("div", _hoisted_5)), createElementVNode("div", _hoisted_6, [_ctx.popoverState === 'closed' && !_ctx.isEmptyModelValue ? (openBlock(), createBlock(_component_OrIconButton, {
       key: 0,
       icon: 'close',
       color: 'inherit',
       disabled: _ctx.readonly || _ctx.disabled,
-      onClick: _cache[8] || (_cache[8] = withModifiers($event => _ctx.$emit('update:modelValue', _ctx.multiple ? [] : undefined), ["stop"]))
+      onClick: _cache[4] || (_cache[4] = withModifiers($event => _ctx.$emit('update:modelValue', _ctx.multiple ? [] : undefined), ["stop"]))
     }, null, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true), createVNode(_component_OrIcon, {
       icon: _ctx.popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down',
       variant: 'outlined'
@@ -488,13 +465,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "full-width": true,
       "custom-styles": _ctx.dropdownStyles,
       "disable-default-styles": true,
-      onClose: _cache[12] || (_cache[12] = $event => _ctx.clearSearchControl())
+      onClose: _cache[8] || (_cache[8] = $event => _ctx.clearSearchControl())
     }, {
       default: withCtx(() => [_ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isMobile ? (openBlock(), createBlock(_component_OrInput, {
         key: 0,
         ref: "searchControl",
         modelValue: _ctx.searchText,
-        "onUpdate:modelValue": _cache[9] || (_cache[9] = $event => _ctx.searchText = $event),
+        "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => _ctx.searchText = $event),
         class: normalizeClass(_ctx.searchControlStyles),
         type: 'search',
         placeholder: _ctx.placeholder
@@ -519,7 +496,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 option: option
               }, () => [createVNode(_component_OrCheckbox, {
                 modelValue: _ctx.proxyModelValue,
-                "onUpdate:modelValue": _cache[10] || (_cache[10] = $event => _ctx.proxyModelValue = $event),
+                "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => _ctx.proxyModelValue = $event),
                 value: option.value,
                 label: option.label,
                 "label-variant": 'menu-item'
@@ -560,7 +537,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }, {
           default: withCtx(() => [createVNode(_component_OrCheckbox, {
             modelValue: _ctx.proxyModelValue,
-            "onUpdate:modelValue": _cache[11] || (_cache[11] = $event => _ctx.proxyModelValue = $event),
+            "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.proxyModelValue = $event),
             value: option.value,
             label: option.label,
             "label-variant": 'menu-item'
@@ -600,14 +577,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       _: 3 /* FORWARDED */
     }, 8 /* PROPS */, ["trigger", "custom-styles"])]),
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["class", "variant", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.toggle], [_directive_dropdown_close, _ctx.close]]), withDirectives(createElementVNode("div", _hoisted_6, [_ctx.hint ? (openBlock(), createBlock(_component_OrHint, {
+  }, 8 /* PROPS */, ["class", "variant", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.toggle], [_directive_dropdown_close, _ctx.close]]), withDirectives(createElementVNode("div", _hoisted_7, [_ctx.hint ? (openBlock(), createBlock(_component_OrHint, {
     key: 0,
     disabled: _ctx.disabled
   }, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.hint), 1 /* TEXT */)]),
 
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_7, [createVNode(_component_OrError, {
+  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_8, [createVNode(_component_OrError, {
     disabled: _ctx.disabled
   }, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error), 1 /* TEXT */)]),

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-2af4a6eb.js';
+export { s as OrSelectV3 } from '../OrSelect-268edd66.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/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-2af4a6eb.js';
+export { s as OrSelectV3 } from '../../OrSelect-268edd66.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-2af4a6eb.js';
+export { s as OrSelectV3 } from './OrSelect-268edd66.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.3150.0",
+  "version": "5.0.2-beta.3152.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,

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

@@ -54,80 +54,37 @@
                 {{ option.label }}
               </OrTag>
             </slot>
-
-            <template v-if="popoverState === 'open' && enableSearch && isDesktop">
-              <OrInput
-                ref="searchControl"
-                v-model="searchText"
-                :class="searchControlStyles"
-                :type="'search'"
-                :placeholder="placeholder"
-                :size="size"
-                :disable-default-styles="true"
-                @click.stop
-              />
-            </template>
           </template>
 
-          <template v-else>
-            <template v-if="popoverState === 'open' && enableSearch && isDesktop">
-              <OrInput
-                ref="searchControl"
-                v-model="searchText"
-                :class="searchControlStyles"
-                :type="'search'"
-                :placeholder="placeholder"
-                :size="size"
-                :disable-default-styles="true"
-                @click.stop
-              />
-            </template>
-
-            <template v-else>
-              <span
-                :class="placeholderStyles"
-                :disabled="disabled ? '' : null"
-              >
-                {{ placeholder }}
-              </span>
-            </template>
+          <template v-else-if="popoverState === 'closed' || !enableSearch">
+            <span
+              :class="placeholderStyles"
+              :disabled="disabled ? '' : null"
+            >
+              {{ placeholder }}
+            </span>
           </template>
         </template>
 
         <template v-else>
-          <template v-if="popoverState === 'open' && enableSearch && isDesktop">
-            <OrInput
-              ref="searchControl"
-              v-model="searchText"
-              :class="searchControlStyles"
-              :type="'search'"
-              :placeholder="placeholder"
-              :size="size"
-              :disable-default-styles="true"
-              @click.stop
-            />
+          <template v-if="!isEmptyModelValue">
+            <slot
+              name="valueTemplate"
+              :model="proxyModelValue"
+            >
+              <span class="truncate">
+                {{ selection && selection.label }}
+              </span>
+            </slot>
           </template>
 
-          <template v-else>
-            <template v-if="!isEmptyModelValue">
-              <slot
-                name="valueTemplate"
-                :model="proxyModelValue"
-              >
-                <span class="truncate">
-                  {{ selection && selection.label }}
-                </span>
-              </slot>
-            </template>
-
-            <template v-else>
-              <span
-                :class="placeholderStyles"
-                :disabled="disabled ? '' : null"
-              >
-                {{ placeholder }}
-              </span>
-            </template>
+          <template v-else-if="popoverState === 'closed' || !enableSearch">
+            <span
+              :class="placeholderStyles"
+              :disabled="disabled ? '' : null"
+            >
+              {{ placeholder }}
+            </span>
           </template>
         </template>
       </div>
@@ -136,8 +93,25 @@
         +{{ outerItems.length }}
       </template>
 
+      <template v-if="popoverState === 'open' && enableSearch && isDesktop">
+        <OrInput
+          ref="searchControl"
+          v-model="searchText"
+          :class="[...searchControlStyles, isEmptyModelValue && 'md:!ml-none']"
+          :type="'search'"
+          :placeholder="placeholder"
+          :size="size"
+          :disable-default-styles="true"
+          @click.stop
+        />
+      </template>
+
+      <template v-else>
+        <div :class="['grow']" />
+      </template>
+
       <div :class="['layout-inline-row', 'gap-sm']">
-        <template v-if="!isEmptyModelValue && popoverState === 'closed'">
+        <template v-if="popoverState === 'closed' && !isEmptyModelValue">
           <OrIconButton
             :icon="'close'"
             :color="'inherit'"
@@ -468,7 +442,6 @@ export default defineComponent({
 
     const searchControlStyles = computed(() => [
       ...SelectSearchControl,
-      '!visible', // Search control is always visible despite `useOverflow` effects
     ]);
 
     const placeholderStyles = computed(() => [

package/src/components/or-select-v3/styles.ts

@@ -8,7 +8,10 @@ export const Select: string[] = [
 
 export const SelectControl: string[] = [
   // Layout
-  'layout-row grow',
+  'layout-row',
+
+  // Layout (empty)
+  'empty:hidden',
 
   // Overflow
   'overflow-hidden',