@onereach/ui-components 5.2.1 → 5.2.2

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

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed, toRefs, onMounted, watch } from 'vue-demi';
 import { isEmptyValue } from '../../utils/isEmptyValue.js';
 import { Select, SelectControl, SelectSearchControl, SelectPlaceholder, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './styles.js';
 import __vue_component__$1 from '../OrCheckboxV3/OrCheckbox.js';
@@ -144,6 +144,10 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
+    enableClear: {
+      type: Boolean,
+      default: false
+    },
     searchFunction: {
       type: Function,
       default: async (searchText, options) => {
@@ -187,6 +191,11 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
+    // Props
+    const {
+      enableClear,
+      modelValue
+    } = toRefs(props);
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...Select]);
     const controlStyles = computed(() => [...SelectControl]);
@@ -200,10 +209,13 @@ var script = defineComponent({
     const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
     // State
     const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
     const isEmptyModelValue = computed(() => {
       return Array.isArray(proxyModelValue.value) ? proxyModelValue.value.length === 0 : isEmptyValue(proxyModelValue.value);
     });
+    const showClear = computed(() => {
+      return enableClear.value && !isEmptyModelValue.value;
+    });
     onMounted(() => {
       if (!proxyModelValue.value && props.multiple) {
         proxyModelValue.value = [];
@@ -311,6 +323,7 @@ var script = defineComponent({
       proxyModelValue,
       readonly,
       isEmptyModelValue,
+      showClear,
       selection,
       searchText,
       internalSearchOptions,
@@ -448,7 +461,7 @@ var __vue_render__ = function () {
     class: ['grow']
   })], _vm._v(" "), _c('div', {
     class: ['layout-inline-row', 'gap-sm']
-  }, [_vm.popoverState === 'closed' && !_vm.isEmptyModelValue ? [_c('OrIconButton', {
+  }, [_vm.showClear ? [_c('OrIconButton', {
     attrs: {
       "icon": 'close',
       "color": 'inherit',

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

@@ -29,6 +29,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     isEmptyModelValue: import("@vue/composition-api").ComputedRef<boolean>;
+    showClear: import("@vue/composition-api").ComputedRef<boolean>;
     selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
@@ -102,6 +103,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -171,6 +176,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -198,6 +207,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
@@ -231,6 +241,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     isEmptyModelValue: import("@vue/composition-api").ComputedRef<boolean>;
+    showClear: import("@vue/composition-api").ComputedRef<boolean>;
     selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
@@ -262,6 +273,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
@@ -282,6 +294,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;

package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-a69c2fd5.js → OrSelect.vue_vue_type_script_lang-b029468d.js}

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed, toRefs, onMounted, watch } from 'vue-demi';
 import { isEmptyValue } from './utils/isEmptyValue.js';
 import { Select, SelectControl, SelectSearchControl, SelectPlaceholder, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './components/OrSelectV3/styles.js';
 import './components/OrCheckboxV3/OrCheckbox.js';
@@ -112,6 +112,10 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
+    enableClear: {
+      type: Boolean,
+      default: false
+    },
     searchFunction: {
       type: Function,
       default: async (searchText, options) => {
@@ -155,6 +159,11 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
+    // Props
+    const {
+      enableClear,
+      modelValue
+    } = toRefs(props);
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...Select]);
     const controlStyles = computed(() => [...SelectControl]);
@@ -168,10 +177,13 @@ var script = defineComponent({
     const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
     // State
     const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
     const isEmptyModelValue = computed(() => {
       return Array.isArray(proxyModelValue.value) ? proxyModelValue.value.length === 0 : isEmptyValue(proxyModelValue.value);
     });
+    const showClear = computed(() => {
+      return enableClear.value && !isEmptyModelValue.value;
+    });
     onMounted(() => {
       if (!proxyModelValue.value && props.multiple) {
         proxyModelValue.value = [];
@@ -279,6 +291,7 @@ var script = defineComponent({
       proxyModelValue,
       readonly,
       isEmptyModelValue,
+      showClear,
       selection,
       searchText,
       internalSearchOptions,

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

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrSelect.vue_vue_type_script_lang-a69c2fd5.js';
-export { s as default } from '../../OrSelect.vue_vue_type_script_lang-a69c2fd5.js';
+import { s as script } from '../../OrSelect.vue_vue_type_script_lang-b029468d.js';
+export { s as default } from '../../OrSelect.vue_vue_type_script_lang-b029468d.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';
@@ -189,7 +189,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       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, {
+    }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : (openBlock(), createElementBlock("div", _hoisted_5)), createElementVNode("div", _hoisted_6, [_ctx.showClear ? (openBlock(), createBlock(_component_OrIconButton, {
       key: 0,
       icon: 'close',
       color: 'inherit',

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

@@ -58,6 +58,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -90,6 +94,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[] | undefined>;
     readonly: import("vue-demi").ComputedRef<boolean>;
     isEmptyModelValue: import("vue-demi").ComputedRef<boolean>;
+    showClear: import("vue-demi").ComputedRef<boolean>;
     selection: import("vue-demi").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("vue-demi").Ref<string>;
     internalSearchOptions: import("vue-demi").Ref<{
@@ -163,6 +168,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -195,6 +204,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;

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

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-a69c2fd5.js';
+export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-b029468d.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-67994b95.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-594e7c11.js';
-export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-a69c2fd5.js';
+export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-b029468d.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-3ed42b69.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-594e7c11.js';
 import './components/OrSelectV3/OrSelect.js';
-export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-a69c2fd5.js';
+export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-b029468d.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-dcc41043.js → OrSelect-f3a50dc9.js}

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed, toRefs, onMounted, watch } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 import { u as useOverflow } from './useOverflow-c856b7b7.js';
 import '@vueuse/core';
@@ -161,6 +161,10 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
+    enableClear: {
+      type: Boolean,
+      default: false
+    },
     searchFunction: {
       type: Function,
       default: async (searchText, options) => {
@@ -204,6 +208,11 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
+    // Props
+    const {
+      enableClear,
+      modelValue
+    } = toRefs(props);
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...Select]);
     const controlStyles = computed(() => [...SelectControl]);
@@ -217,10 +226,13 @@ var script = defineComponent({
     const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
     // State
     const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
     const isEmptyModelValue = computed(() => {
       return Array.isArray(proxyModelValue.value) ? proxyModelValue.value.length === 0 : isEmptyValue(proxyModelValue.value);
     });
+    const showClear = computed(() => {
+      return enableClear.value && !isEmptyModelValue.value;
+    });
     onMounted(() => {
       if (!proxyModelValue.value && props.multiple) {
         proxyModelValue.value = [];
@@ -328,6 +340,7 @@ var script = defineComponent({
       proxyModelValue,
       readonly,
       isEmptyModelValue,
+      showClear,
       selection,
       searchText,
       internalSearchOptions,
@@ -465,7 +478,7 @@ var __vue_render__ = function () {
     class: ['grow']
   })], _vm._v(" "), _c('div', {
     class: ['layout-inline-row', 'gap-sm']
-  }, [_vm.popoverState === 'closed' && !_vm.isEmptyModelValue ? [_c('OrIconButton', {
+  }, [_vm.showClear ? [_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-2cd05f40.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-35b54d3c.js';
 export { _ as OrSelect } from '../OrSelect-c0d04cf6.js';
-export { _ as OrSelectV3 } from '../OrSelect-dcc41043.js';
+export { _ as OrSelectV3 } from '../OrSelect-f3a50dc9.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-c56a9221.js';
 export { _ as OrSidebarV3 } from '../OrSidebar-c76d3d4a.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-ad5db793.js';

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

@@ -29,6 +29,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     isEmptyModelValue: import("@vue/composition-api").ComputedRef<boolean>;
+    showClear: import("@vue/composition-api").ComputedRef<boolean>;
     selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
@@ -102,6 +103,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -171,6 +176,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -198,6 +207,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
@@ -231,6 +241,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     isEmptyModelValue: import("@vue/composition-api").ComputedRef<boolean>;
+    showClear: import("@vue/composition-api").ComputedRef<boolean>;
     selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
@@ -262,6 +273,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
@@ -282,6 +294,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;

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

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-dcc41043.js';
+export { _ as OrSelectV3 } from '../../OrSelect-f3a50dc9.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-2cd05f40.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-35b54d3c.js';
 export { _ as OrSelect } from './OrSelect-c0d04cf6.js';
-export { _ as OrSelectV3 } from './OrSelect-dcc41043.js';
+export { _ as OrSelectV3 } from './OrSelect-f3a50dc9.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-c56a9221.js';
 export { _ as OrSidebarV3 } from './OrSidebar-c76d3d4a.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-ad5db793.js';

package/dist/esm/v3/{OrSelect-a6e29937.js → OrSelect-a2272840.js}

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed, toRefs, onMounted, watch } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 import { u as useOverflow } from './useOverflow-c856b7b7.js';
 import '@vueuse/core';
@@ -160,6 +160,10 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
+    enableClear: {
+      type: Boolean,
+      default: false
+    },
     searchFunction: {
       type: Function,
       default: async (searchText, options) => {
@@ -203,6 +207,11 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
+    // Props
+    const {
+      enableClear,
+      modelValue
+    } = toRefs(props);
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...Select]);
     const controlStyles = computed(() => [...SelectControl]);
@@ -216,10 +225,13 @@ var script = defineComponent({
     const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
     // State
     const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
     const isEmptyModelValue = computed(() => {
       return Array.isArray(proxyModelValue.value) ? proxyModelValue.value.length === 0 : isEmptyValue(proxyModelValue.value);
     });
+    const showClear = computed(() => {
+      return enableClear.value && !isEmptyModelValue.value;
+    });
     onMounted(() => {
       if (!proxyModelValue.value && props.multiple) {
         proxyModelValue.value = [];
@@ -327,6 +339,7 @@ var script = defineComponent({
       proxyModelValue,
       readonly,
       isEmptyModelValue,
+      showClear,
       selection,
       searchText,
       internalSearchOptions,
@@ -451,7 +464,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       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, {
+    }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : (openBlock(), createElementBlock("div", _hoisted_5)), createElementVNode("div", _hoisted_6, [_ctx.showClear ? (openBlock(), createBlock(_component_OrIconButton, {
       key: 0,
       icon: 'close',
       color: 'inherit',

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-98342176.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-851db474.js';
 export { s as OrSelect } from '../OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from '../OrSelect-a6e29937.js';
+export { s as OrSelectV3 } from '../OrSelect-a2272840.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from '../OrSidebar-8f9b7502.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-79a7c625.js';

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

@@ -58,6 +58,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -90,6 +94,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[] | undefined>;
     readonly: import("vue-demi").ComputedRef<boolean>;
     isEmptyModelValue: import("vue-demi").ComputedRef<boolean>;
+    showClear: import("vue-demi").ComputedRef<boolean>;
     selection: import("vue-demi").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("vue-demi").Ref<string>;
     internalSearchOptions: import("vue-demi").Ref<{
@@ -163,6 +168,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    enableClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -195,6 +204,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
+    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;

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

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-a6e29937.js';
+export { s as OrSelectV3 } from '../../OrSelect-a2272840.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-98342176.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-851db474.js';
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from './OrSelect-a6e29937.js';
+export { s as OrSelectV3 } from './OrSelect-a2272840.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from './OrSidebar-8f9b7502.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-79a7c625.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -157,5 +157,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "00011657e6a55eca52cb728c93d584ee7e531121"
+  "gitHead": "6708e2cad0bfb997315b7a072bc1450bd17e2eb2"
 }

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

@@ -111,7 +111,7 @@
       </template>
 
       <div :class="['layout-inline-row', 'gap-sm']">
-        <template v-if="popoverState === 'closed' && !isEmptyModelValue">
+        <template v-if="showClear">
           <OrIconButton
             :icon="'close'"
             :color="'inherit'"
@@ -269,7 +269,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, toRef, watch } from 'vue-demi';
+import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, toRefs, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
 import { useOverflow, useProxyModelValue, useResponsive } from '../../hooks';
 import { isEmptyValue } from '../../utils/isEmptyValue';
@@ -386,6 +386,11 @@ export default defineComponent({
       default: false,
     },
 
+    enableClear: {
+      type: Boolean,
+      default: false,
+    },
+
     searchFunction: {
       type: Function as PropType<SelectSearchFunction>,
 
@@ -435,6 +440,9 @@ export default defineComponent({
     const popoverRoot = computed(() => popover.value?.root);
     const popoverState = computed(() => popover.value?.state);
 
+    // Props
+    const { enableClear, modelValue } = toRefs(props);
+
     // Styles
     const rootStyles = computed(() => [
       'or-select-v3',
@@ -469,7 +477,7 @@ export default defineComponent({
     // State
     const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
 
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
 
     const isEmptyModelValue = computed(() => {
       return Array.isArray(proxyModelValue.value)
@@ -477,6 +485,10 @@ export default defineComponent({
         : isEmptyValue(proxyModelValue.value);
     });
 
+    const showClear = computed(() => {
+      return enableClear.value && !isEmptyModelValue.value;
+    });
+
     onMounted(() => {
       if (!proxyModelValue.value && props.multiple) {
         proxyModelValue.value = [];
@@ -606,6 +618,7 @@ export default defineComponent({
       proxyModelValue,
       readonly,
       isEmptyModelValue,
+      showClear,
       selection,
       searchText,
       internalSearchOptions,