@onereach/ui-components 7.0.1-beta.3531.0 → 7.0.1-beta.3533.0

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

@@ -947,6 +947,7 @@ var __vue_render__ = function () {
       ref: "singleControl",
       attrs: {
         "model": _vm.proxyModelValue,
+        "disabled": _vm.disabled,
         "options": _vm.options,
         "placeholder": _vm.placeholder,
         "enable-search": _vm.enableSearch

package/dist/bundled/v2/components/OrTagsV3/OrTags.js

@@ -66,7 +66,8 @@ var script = defineComponent({
     const {
       innerItems
     } = useOverflow(container, {
-      hide: false
+      hide: false,
+      threshold: 8
     });
     const localItems = computed(() => {
       return items.value.map(castToTagObject);

package/dist/bundled/v2/hooks/useOverflow.d.ts

@@ -6,5 +6,6 @@ export interface Overflow {
 }
 export interface UseOverflowOptions {
     hide?: boolean;
+    threshold?: number;
 }
 export declare function useOverflow(container: MaybeElementRef<HTMLElement | undefined>, options?: UseOverflowOptions): Overflow;

package/dist/bundled/v2/hooks/useOverflow.js

@@ -3,9 +3,11 @@ import { isRef, ref, watch } from 'vue-demi';
 import { r as requestAF } from '../dom-cec392f3.js';
 
 function useOverflow(container) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    hide: true
-  };
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    hide = true,
+    threshold = 0
+  } = options;
   const containerRef = isRef(container) ? container : ref(container);
   // State
   const innerItemsRef = ref([]);
@@ -28,8 +30,8 @@ function useOverflow(container) {
           x: containerOffset,
           width: containerWidth
         } = container.getBoundingClientRect();
-        if (itemOffset + itemWidth > containerOffset + containerWidth) {
-          if (options.hide) {
+        if (itemOffset + itemWidth > containerOffset + containerWidth + threshold) {
+          if (hide) {
             item.style.setProperty('visibility', 'hidden');
           }
           return {
@@ -37,7 +39,7 @@ function useOverflow(container) {
             outerItems: [...outerItems, item]
           };
         } else {
-          if (options.hide) {
+          if (hide) {
             item.style.removeProperty('visibility');
           }
           return {

package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-3c895f3a.js → OrSelect.vue_vue_type_script_lang-e11d6b35.js}

@@ -5,7 +5,7 @@ import { isEmptyValue } from './utils/isEmptyValue.js';
 import { f as useFocus } from './index-c5cda763.js';
 import { useProxyModelValue } from './hooks/useProxyModelValue.js';
 import './components/OrTagsV3/OrTags.js';
-import { s as script$5 } from './OrTags.vue_vue_type_script_lang-ab2ccd23.js';
+import { s as script$5 } from './OrTags.vue_vue_type_script_lang-bce52bb6.js';
 import { TagsOverflow } from './components/OrTagsV3/props.js';
 import './components/OrCheckboxV3/OrCheckbox.js';
 import './components/OrErrorV3/OrError.js';

package/dist/bundled/v3/{OrTagInput.vue_vue_type_script_lang-cef895f1.js → OrTagInput.vue_vue_type_script_lang-049cd088.js}

@@ -12,7 +12,7 @@ import { s as script$2 } from './OrHint.vue_vue_type_script_lang-0ab8b932.js';
 import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-6a53a819.js';
 import { s as script$4 } from './OrInputBox.vue_vue_type_script_lang-137cb650.js';
 import { s as script$5 } from './OrLabel.vue_vue_type_script_lang-e2bcff17.js';
-import { s as script$6 } from './OrTags.vue_vue_type_script_lang-ab2ccd23.js';
+import { s as script$6 } from './OrTags.vue_vue_type_script_lang-bce52bb6.js';
 import { TagsOverflow } from './components/OrTagsV3/props.js';
 import { useIdAttribute } from './hooks/useIdAttribute.js';
 import { useControlAttributes } from './hooks/useControlAttributes.js';

package/dist/bundled/v3/{OrTags.vue_vue_type_script_lang-ab2ccd23.js → OrTags.vue_vue_type_script_lang-bce52bb6.js}

@@ -68,7 +68,8 @@ var script = defineComponent({
     const {
       innerItems
     } = useOverflow(container, {
-      hide: false
+      hide: false,
+      threshold: 8
     });
     const localItems = computed(() => {
       return items.value.map(castToTagObject);

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

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrSelect.vue_vue_type_script_lang-3c895f3a.js';
-export { s as default } from '../../OrSelect.vue_vue_type_script_lang-3c895f3a.js';
+import { s as script } from '../../OrSelect.vue_vue_type_script_lang-e11d6b35.js';
+export { s as default } from '../../OrSelect.vue_vue_type_script_lang-e11d6b35.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, withModifiers, createVNode, Fragment, renderList, vShow } from 'vue';
 
 const _hoisted_1 = ["id", "tabindex", "disabled"];
@@ -81,10 +81,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       modelValue: _ctx.searchText,
       "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.searchText = $event),
       model: _ctx.proxyModelValue,
+      disabled: _ctx.disabled,
       options: _ctx.options,
       placeholder: _ctx.placeholder,
       "enable-search": _ctx.enableSearch
-    }, null, 8 /* PROPS */, ["modelValue", "model", "options", "placeholder", "enable-search"]))])], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), createElementVNode("div", _hoisted_2, [_ctx.showClear ? (openBlock(), createBlock(_component_OrIconButton, {
+    }, null, 8 /* PROPS */, ["modelValue", "model", "disabled", "options", "placeholder", "enable-search"]))])], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), createElementVNode("div", _hoisted_2, [_ctx.showClear ? (openBlock(), createBlock(_component_OrIconButton, {
       key: 0,
       icon: 'close',
       color: 'inherit',

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

@@ -1,2 +1,2 @@
-export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-3c895f3a.js';
+export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-e11d6b35.js';
 export { InputBoxSize as SelectSize } from '../OrInputBoxV3/props.js';

package/dist/bundled/v3/components/OrTagInputV3/OrTagInput.js

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrTagInput.vue_vue_type_script_lang-cef895f1.js';
-export { s as default } from '../../OrTagInput.vue_vue_type_script_lang-cef895f1.js';
+import { s as script } from '../../OrTagInput.vue_vue_type_script_lang-049cd088.js';
+export { s as default } from '../../OrTagInput.vue_vue_type_script_lang-049cd088.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createSlots, createElementVNode, withDirectives, mergeProps, withKeys, vModelDynamic, vShow } from 'vue';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 

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

@@ -1,2 +1,2 @@
-export { s as OrTagInputV3 } from '../../OrTagInput.vue_vue_type_script_lang-cef895f1.js';
+export { s as OrTagInputV3 } from '../../OrTagInput.vue_vue_type_script_lang-049cd088.js';
 export { InputBoxSize as TagInputSize } from '../OrInputBoxV3/props.js';

package/dist/bundled/v3/components/OrTagsV3/OrTags.js

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrTags.vue_vue_type_script_lang-ab2ccd23.js';
-export { s as default } from '../../OrTags.vue_vue_type_script_lang-ab2ccd23.js';
+import { s as script } from '../../OrTags.vue_vue_type_script_lang-bce52bb6.js';
+export { s as default } from '../../OrTags.vue_vue_type_script_lang-bce52bb6.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createBlock, mergeProps, withCtx, createTextVNode, toDisplayString, renderSlot, createCommentVNode, createVNode, withModifiers, createElementVNode } from 'vue';
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {

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

@@ -1,2 +1,2 @@
 export { TagsOverflow } from './props.js';
-export { s as OrTagsV3 } from '../../OrTags.vue_vue_type_script_lang-ab2ccd23.js';
+export { s as OrTagsV3 } from '../../OrTags.vue_vue_type_script_lang-bce52bb6.js';

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

@@ -136,7 +136,7 @@ export { s as OrSearchV3 } from '../OrSearch.vue_vue_type_script_lang-e756d8a8.j
 export { s as OrSegmentedControlV3 } from '../OrSegmentedControl.vue_vue_type_script_lang-10bd4ea8.js';
 export { SegmentedControlSize } from './OrSegmentedControlV3/props.js';
 export { s as OrSelect } from '../OrSelect.vue_vue_type_script_lang-a4d17559.js';
-export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-3c895f3a.js';
+export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-e11d6b35.js';
 export { s as OrSidebar } from '../OrSidebar.vue_vue_type_script_lang-f69f92ca.js';
 export { OrSidebarSide } from './OrSidebar/constants.js';
 export { s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-314721d5.js';
@@ -160,10 +160,10 @@ export { s as OrTabs } from '../OrTabs.vue_vue_type_script_lang-9129d34b.js';
 export { s as OrTabsV3 } from '../OrTabs.vue_vue_type_script_lang-ddac6c54.js';
 export { TabsVariant } from './OrTabsV3/props.js';
 export { s as OrTag } from '../OrTag.vue_vue_type_script_lang-b62c0b79.js';
-export { s as OrTagInputV3 } from '../OrTagInput.vue_vue_type_script_lang-cef895f1.js';
+export { s as OrTagInputV3 } from '../OrTagInput.vue_vue_type_script_lang-049cd088.js';
 export { s as OrTagV3 } from '../OrTag.vue_vue_type_script_lang-6c0094be.js';
 export { TagColor, TagVariant } from './OrTagV3/props.js';
-export { s as OrTagsV3 } from '../OrTags.vue_vue_type_script_lang-ab2ccd23.js';
+export { s as OrTagsV3 } from '../OrTags.vue_vue_type_script_lang-bce52bb6.js';
 export { TagsOverflow } from './OrTagsV3/props.js';
 export { default as OrTeleport } from './OrTeleport/OrTeleport.js';
 export { s as OrTeleportV3 } from '../OrTeleport.vue3.vue_vue_type_script_lang-a6ce162e.js';

package/dist/bundled/v3/hooks/useOverflow.d.ts

@@ -6,5 +6,6 @@ export interface Overflow {
 }
 export interface UseOverflowOptions {
     hide?: boolean;
+    threshold?: number;
 }
 export declare function useOverflow(container: MaybeElementRef<HTMLElement | undefined>, options?: UseOverflowOptions): Overflow;

package/dist/bundled/v3/hooks/useOverflow.js

@@ -3,9 +3,11 @@ import { isRef, ref, watch } from 'vue-demi';
 import { r as requestAF } from '../dom-cec392f3.js';
 
 function useOverflow(container) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    hide: true
-  };
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    hide = true,
+    threshold = 0
+  } = options;
   const containerRef = isRef(container) ? container : ref(container);
   // State
   const innerItemsRef = ref([]);
@@ -28,8 +30,8 @@ function useOverflow(container) {
           x: containerOffset,
           width: containerWidth
         } = container.getBoundingClientRect();
-        if (itemOffset + itemWidth > containerOffset + containerWidth) {
-          if (options.hide) {
+        if (itemOffset + itemWidth > containerOffset + containerWidth + threshold) {
+          if (hide) {
             item.style.setProperty('visibility', 'hidden');
           }
           return {
@@ -37,7 +39,7 @@ function useOverflow(container) {
             outerItems: [...outerItems, item]
           };
         } else {
-          if (options.hide) {
+          if (hide) {
             item.style.removeProperty('visibility');
           }
           return {

package/dist/bundled/v3/index.js

@@ -82,7 +82,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-a4d17559.js';
 import './components/OrSelectV3/OrSelect.js';
-export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-3c895f3a.js';
+export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-e11d6b35.js';
 import './components/OrSidebar/OrSidebar.js';
 export { s as OrSidebar } from './OrSidebar.vue_vue_type_script_lang-f69f92ca.js';
 import './components/OrSidebarV3/OrSidebar.js';
@@ -116,7 +116,7 @@ export { s as OrTabsV3 } from './OrTabs.vue_vue_type_script_lang-ddac6c54.js';
 import './components/OrTag/OrTag.js';
 export { s as OrTag } from './OrTag.vue_vue_type_script_lang-b62c0b79.js';
 import './components/OrTagInputV3/OrTagInput.js';
-export { s as OrTagInputV3 } from './OrTagInput.vue_vue_type_script_lang-cef895f1.js';
+export { s as OrTagInputV3 } from './OrTagInput.vue_vue_type_script_lang-049cd088.js';
 import './components/OrTextV3/OrText.js';
 export { s as OrTextV3 } from './OrText.vue_vue_type_script_lang-6ce019db.js';
 import './components/OrTextarea/OrTextarea.js';
@@ -243,7 +243,7 @@ export { s as OrTabV3 } from './OrTab.vue_vue_type_script_lang-a300956d.js';
 export { TabsVariant } from './components/OrTabsV3/props.js';
 export { s as OrTagV3 } from './OrTag.vue_vue_type_script_lang-6c0094be.js';
 export { TagColor, TagVariant } from './components/OrTagV3/props.js';
-export { s as OrTagsV3 } from './OrTags.vue_vue_type_script_lang-ab2ccd23.js';
+export { s as OrTagsV3 } from './OrTags.vue_vue_type_script_lang-bce52bb6.js';
 export { TagsOverflow } from './components/OrTagsV3/props.js';
 export { default as OrTeleport } from './components/OrTeleport/OrTeleport.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3.vue_vue_type_script_lang-a6ce162e.js';

package/dist/esm/v2/{OrSelect-578bcee2.js → OrSelect-07de6a73.js}

@@ -18,8 +18,8 @@ import { _ as __vue_component__$9 } from './OrInput-e9e91885.js';
 import { _ as __vue_component__$b } from './OrLabel-b465bc0b.js';
 import { _ as __vue_component__$c } from './OrMenuItem-8d1c89f6.js';
 import { _ as __vue_component__$d } from './OrPopover-2ced765c.js';
-import { T as TagsOverflow } from './OrTags-ed4ddf4d.js';
-import { _ as __vue_component__$1 } from './OrSelectMultipleControl-961d8d6a.js';
+import { T as TagsOverflow } from './OrTags-a733e716.js';
+import { _ as __vue_component__$1 } from './OrSelectMultipleControl-e891fad1.js';
 import { _ as __vue_component__$2 } from './OrSelectSingleControl-76b29e0b.js';
 import './OrSelectPlaceholder-f36f4e40.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -465,6 +465,7 @@ var __vue_render__ = function () {
       ref: "singleControl",
       attrs: {
         "model": _vm.proxyModelValue,
+        "disabled": _vm.disabled,
         "options": _vm.options,
         "placeholder": _vm.placeholder,
         "enable-search": _vm.enableSearch

package/dist/esm/v2/{OrSelectMultipleControl-961d8d6a.js → OrSelectMultipleControl-e891fad1.js}

@@ -4,7 +4,7 @@ import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { _ as __vue_component__$3, T as TagsOverflow } from './OrTags-ed4ddf4d.js';
+import { _ as __vue_component__$3, T as TagsOverflow } from './OrTags-a733e716.js';
 import { _ as __vue_component__$1 } from './OrSelectPlaceholder-f36f4e40.js';
 import { i as isEmptyValue } from './isEmptyValue-fd56a6e4.js';
 import { _ as __vue_component__$2 } from './OrSelectControlInput-28c226f8.js';

package/dist/esm/v2/{OrTagInput-7f917d41.js → OrTagInput-4c4d0714.js}

@@ -12,7 +12,7 @@ import { _ as __vue_component__$3 } from './OrIconButton-07c0bd56.js';
 import { _ as __vue_component__$4 } from './OrInputBox-7dc5b9e9.js';
 import './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import { _ as __vue_component__$5 } from './OrLabel-b465bc0b.js';
-import { _ as __vue_component__$6, T as TagsOverflow } from './OrTags-ed4ddf4d.js';
+import { _ as __vue_component__$6, T as TagsOverflow } from './OrTags-a733e716.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrTags-ed4ddf4d.js → OrTags-a733e716.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, toRefs, computed, nextTick } from 'vue-demi';
-import { u as useOverflow } from './useOverflow-b482f3c9.js';
+import { u as useOverflow } from './useOverflow-e91d2314.js';
 import '@vueuse/core';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
@@ -130,7 +130,8 @@ var script = defineComponent({
     const {
       innerItems
     } = useOverflow(container, {
-      hide: false
+      hide: false,
+      threshold: 8
     });
     const localItems = computed(() => {
       return items.value.map(castToTagObject);

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

@@ -93,7 +93,7 @@ export { _ as OrSearch } from '../OrSearch-ac542dd6.js';
 export { _ as OrSearchV3 } from '../OrSearch-c5850ddd.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-bba94cda.js';
 export { _ as OrSelect } from '../OrSelect-c0d04cf6.js';
-export { _ as OrSelectV3 } from '../OrSelect-578bcee2.js';
+export { _ as OrSelectV3 } from '../OrSelect-07de6a73.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-c56a9221.js';
 export { _ as OrSidebarV3 } from '../OrSidebar-d24100a9.js';
 export { S as OrSidebarPlacement, S as SidebarPlacement } from '../props-cc0586c8.js';
@@ -115,9 +115,9 @@ export { _ as OrTabV3 } from '../OrTab-13db2e49.js';
 export { _ as OrTabs } from '../OrTabs-62e7e478.js';
 export { _ as OrTabsV3, T as TabsVariant } from '../OrTabs-71f4fc47.js';
 export { _ as OrTag } from '../OrTag-b5803a20.js';
-export { _ as OrTagInputV3 } from '../OrTagInput-7f917d41.js';
+export { _ as OrTagInputV3 } from '../OrTagInput-4c4d0714.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-884d1994.js';
-export { _ as OrTagsV3, T as TagsOverflow } from '../OrTags-ed4ddf4d.js';
+export { _ as OrTagsV3, T as TagsOverflow } from '../OrTags-a733e716.js';
 export { _ as OrTeleport } from '../OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from '../OrTeleport.vue2-424c7f33.js';
 export { _ as OrTextV3 } from '../OrText-44449e7b.js';
@@ -199,12 +199,12 @@ import '../codemirrorView-020fe885.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import 'lodash/keyBy';
-import '../OrSelectMultipleControl-961d8d6a.js';
+import '../OrSelectMultipleControl-e891fad1.js';
 import '../OrSelectPlaceholder-f36f4e40.js';
 import '../OrSelectControlInput-28c226f8.js';
 import '../OrSelectSingleControl-76b29e0b.js';
 import 'lodash/range';
 import '../styles-ed564e39.js';
-import '../useOverflow-b482f3c9.js';
+import '../useOverflow-e91d2314.js';
 import 'portal-vue/dist/portal-vue.esm.js';
 import 'portal-vue';

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

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-578bcee2.js';
+export { _ as OrSelectV3 } from '../../OrSelect-07de6a73.js';
 export { I as SelectSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
@@ -36,11 +36,11 @@ import '../../OrInput-e9e91885.js';
 import '../../useValidationAttributes-d1abbe34.js';
 import '../../OrLoader-b0c381f9.js';
 import '../../OrMenuItem-8d1c89f6.js';
-import '../../OrTags-ed4ddf4d.js';
-import '../../useOverflow-b482f3c9.js';
+import '../../OrTags-a733e716.js';
+import '../../useOverflow-e91d2314.js';
 import '../../OrButton-78336f88.js';
 import '../../OrTag-884d1994.js';
-import '../../OrSelectMultipleControl-961d8d6a.js';
+import '../../OrSelectMultipleControl-e891fad1.js';
 import '../../OrSelectPlaceholder-f36f4e40.js';
 import '../../OrSelectControlInput-28c226f8.js';
 import '../../OrSelectSingleControl-76b29e0b.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrSelectMultipleControl } from '../../../OrSelectMultipleControl-961d8d6a.js';
+export { _ as OrSelectMultipleControl } from '../../../OrSelectMultipleControl-e891fad1.js';
 export { _ as OrSelectSingleControl } from '../../../OrSelectSingleControl-76b29e0b.js';
 export { _ as OrSelectPlaceholder } from '../../../OrSelectPlaceholder-f36f4e40.js';
 import 'vue-demi';
@@ -9,8 +9,8 @@ import 'lodash/get';
 import '../../../useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import '../../../OrTags-ed4ddf4d.js';
-import '../../../useOverflow-b482f3c9.js';
+import '../../../OrTags-a733e716.js';
+import '../../../useOverflow-e91d2314.js';
 import '../../../OrButton-78336f88.js';
 import '../../../OrLoader-b0c381f9.js';
 import '../../../normalize-component-6e8e3d80.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrSelectMultipleControl } from '../../../../OrSelectMultipleControl-961d8d6a.js';
+export { _ as OrSelectMultipleControl } from '../../../../OrSelectMultipleControl-e891fad1.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../../../dom-aecadd9a.js';
@@ -7,8 +7,8 @@ import 'lodash/get';
 import '../../../../useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import '../../../../OrTags-ed4ddf4d.js';
-import '../../../../useOverflow-b482f3c9.js';
+import '../../../../OrTags-a733e716.js';
+import '../../../../useOverflow-e91d2314.js';
 import '../../../../OrButton-78336f88.js';
 import '../../../../OrLoader-b0c381f9.js';
 import '../../../../normalize-component-6e8e3d80.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrTagInputV3 } from '../../OrTagInput-7f917d41.js';
+export { _ as OrTagInputV3 } from '../../OrTagInput-4c4d0714.js';
 export { I as TagInputSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import 'vue-demi';
 import '@vueuse/core';
@@ -28,8 +28,8 @@ import 'portal-vue';
 import '../../useTheme-0ef25778.js';
 import '../../OrInputBox-7dc5b9e9.js';
 import '../../OrLabel-b465bc0b.js';
-import '../../OrTags-ed4ddf4d.js';
-import '../../useOverflow-b482f3c9.js';
+import '../../OrTags-a733e716.js';
+import '../../useOverflow-e91d2314.js';
 import '../../OrButton-78336f88.js';
 import '../../OrLoader-b0c381f9.js';
 import '../../OrTag-884d1994.js';

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

@@ -1,6 +1,6 @@
-export { _ as OrTagsV3, T as TagsOverflow } from '../../OrTags-ed4ddf4d.js';
+export { _ as OrTagsV3, T as TagsOverflow } from '../../OrTags-a733e716.js';
 import 'vue-demi';
-import '../../useOverflow-b482f3c9.js';
+import '../../useOverflow-e91d2314.js';
 import '@vueuse/core';
 import '../../dom-aecadd9a.js';
 import 'lodash/isElement';

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

@@ -1,6 +1,6 @@
 export { u as useControlAttributes, a as useIdAttribute } from '../useIdAttribute-859439f0.js';
 export { u as useElevation } from '../useElevation-a50ec347.js';
-export { u as useOverflow } from '../useOverflow-b482f3c9.js';
+export { u as useOverflow } from '../useOverflow-e91d2314.js';
 export { u as usePopoverState } from '../usePopoverState-b92c698b.js';
 export { u as useProxyModelValue } from '../useProxyModelValue-940010d2.js';
 export { u as useResponsive } from '../useResponsive-5c8291da.js';

package/dist/esm/v2/hooks/useOverflow.d.ts

@@ -6,5 +6,6 @@ export interface Overflow {
 }
 export interface UseOverflowOptions {
     hide?: boolean;
+    threshold?: number;
 }
 export declare function useOverflow(container: MaybeElementRef<HTMLElement | undefined>, options?: UseOverflowOptions): Overflow;

package/dist/esm/v2/index.js

@@ -93,7 +93,7 @@ export { _ as OrSearch } from './OrSearch-ac542dd6.js';
 export { _ as OrSearchV3 } from './OrSearch-c5850ddd.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-bba94cda.js';
 export { _ as OrSelect } from './OrSelect-c0d04cf6.js';
-export { _ as OrSelectV3 } from './OrSelect-578bcee2.js';
+export { _ as OrSelectV3 } from './OrSelect-07de6a73.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-c56a9221.js';
 export { _ as OrSidebarV3 } from './OrSidebar-d24100a9.js';
 export { S as OrSidebarPlacement, S as SidebarPlacement } from './props-cc0586c8.js';
@@ -115,9 +115,9 @@ export { _ as OrTabV3 } from './OrTab-13db2e49.js';
 export { _ as OrTabs } from './OrTabs-62e7e478.js';
 export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-71f4fc47.js';
 export { _ as OrTag } from './OrTag-b5803a20.js';
-export { _ as OrTagInputV3 } from './OrTagInput-7f917d41.js';
+export { _ as OrTagInputV3 } from './OrTagInput-4c4d0714.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-884d1994.js';
-export { _ as OrTagsV3, T as TagsOverflow } from './OrTags-ed4ddf4d.js';
+export { _ as OrTagsV3, T as TagsOverflow } from './OrTags-a733e716.js';
 export { _ as OrTeleport } from './OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from './OrTeleport.vue2-424c7f33.js';
 export { _ as OrTextV3 } from './OrText-44449e7b.js';
@@ -137,7 +137,7 @@ export { _ as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-943553c1.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
 export { u as useElevation } from './useElevation-a50ec347.js';
-export { u as useOverflow } from './useOverflow-b482f3c9.js';
+export { u as useOverflow } from './useOverflow-e91d2314.js';
 export { u as usePopoverState } from './usePopoverState-b92c698b.js';
 export { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 export { u as useResponsive } from './useResponsive-5c8291da.js';
@@ -200,7 +200,7 @@ import './codemirrorView-020fe885.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import 'lodash/keyBy';
-import './OrSelectMultipleControl-961d8d6a.js';
+import './OrSelectMultipleControl-e891fad1.js';
 import './OrSelectPlaceholder-f36f4e40.js';
 import './OrSelectControlInput-28c226f8.js';
 import './OrSelectSingleControl-76b29e0b.js';

package/dist/esm/v2/{useOverflow-b482f3c9.js → useOverflow-e91d2314.js}

@@ -3,9 +3,11 @@ import { isRef, ref, watch } from 'vue-demi';
 import { r as requestAF } from './dom-aecadd9a.js';
 
 function useOverflow(container) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    hide: true
-  };
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    hide = true,
+    threshold = 0
+  } = options;
   const containerRef = isRef(container) ? container : ref(container);
   // State
   const innerItemsRef = ref([]);
@@ -28,8 +30,8 @@ function useOverflow(container) {
           x: containerOffset,
           width: containerWidth
         } = container.getBoundingClientRect();
-        if (itemOffset + itemWidth > containerOffset + containerWidth) {
-          if (options.hide) {
+        if (itemOffset + itemWidth > containerOffset + containerWidth + threshold) {
+          if (hide) {
             item.style.setProperty('visibility', 'hidden');
           }
           return {
@@ -37,7 +39,7 @@ function useOverflow(container) {
             outerItems: [...outerItems, item]
           };
         } else {
-          if (options.hide) {
+          if (hide) {
             item.style.removeProperty('visibility');
           }
           return {

package/dist/esm/v3/{OrSelect-b359beb6.js → OrSelect-31442785.js}

@@ -17,8 +17,8 @@ import { s as script$9 } from './OrInput-0db1e05f.js';
 import { s as script$b } from './OrLabel-b826da04.js';
 import { s as script$c } from './OrMenuItem-fdc66517.js';
 import { s as script$d } from './OrPopover-3b07d49e.js';
-import { T as TagsOverflow } from './OrTags-52da64cd.js';
-import { s as script$1 } from './OrSelectMultipleControl-3620b234.js';
+import { T as TagsOverflow } from './OrTags-ba8ef261.js';
+import { s as script$1 } from './OrSelectMultipleControl-64bb859f.js';
 import { s as script$2 } from './OrSelectSingleControl-f969c913.js';
 import './OrSelectPlaceholder-10e3bf5e.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, withModifiers, createVNode, Fragment, renderList, vShow } from 'vue';
@@ -455,10 +455,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       modelValue: _ctx.searchText,
       "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.searchText = $event),
       model: _ctx.proxyModelValue,
+      disabled: _ctx.disabled,
       options: _ctx.options,
       placeholder: _ctx.placeholder,
       "enable-search": _ctx.enableSearch
-    }, null, 8 /* PROPS */, ["modelValue", "model", "options", "placeholder", "enable-search"]))])], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), createElementVNode("div", _hoisted_2, [_ctx.showClear ? (openBlock(), createBlock(_component_OrIconButton, {
+    }, null, 8 /* PROPS */, ["modelValue", "model", "disabled", "options", "placeholder", "enable-search"]))])], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), createElementVNode("div", _hoisted_2, [_ctx.showClear ? (openBlock(), createBlock(_component_OrIconButton, {
       key: 0,
       icon: 'close',
       color: 'inherit',

package/dist/esm/v3/{OrSelectMultipleControl-3620b234.js → OrSelectMultipleControl-64bb859f.js}

@@ -4,7 +4,7 @@ import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { s as script$3, T as TagsOverflow } from './OrTags-52da64cd.js';
+import { s as script$3, T as TagsOverflow } from './OrTags-ba8ef261.js';
 import { s as script$1 } from './OrSelectPlaceholder-10e3bf5e.js';
 import { i as isEmptyValue } from './isEmptyValue-fd56a6e4.js';
 import { s as script$2 } from './OrSelectControlInput-3297e30d.js';

package/dist/esm/v3/{OrTagInput-56ee7d0b.js → OrTagInput-d018033c.js}

@@ -11,7 +11,7 @@ import { s as script$2 } from './OrHint-55d3de35.js';
 import { s as script$3 } from './OrIconButton-c89f733b.js';
 import { s as script$4 } from './OrInputBox-912a6254.js';
 import { s as script$5 } from './OrLabel-b826da04.js';
-import { s as script$6, T as TagsOverflow } from './OrTags-52da64cd.js';
+import { s as script$6, T as TagsOverflow } from './OrTags-ba8ef261.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createSlots, createElementVNode, withDirectives, mergeProps, withKeys, vModelDynamic, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 

package/dist/esm/v3/{OrTags-52da64cd.js → OrTags-ba8ef261.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, toRefs, computed, nextTick } from 'vue-demi';
-import { u as useOverflow } from './useOverflow-b482f3c9.js';
+import { u as useOverflow } from './useOverflow-e91d2314.js';
 import '@vueuse/core';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
@@ -130,7 +130,8 @@ var script = defineComponent({
     const {
       innerItems
     } = useOverflow(container, {
-      hide: false
+      hide: false,
+      threshold: 8
     });
     const localItems = computed(() => {
       return items.value.map(castToTagObject);

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

@@ -90,7 +90,7 @@ export { s as OrSearch } from '../OrSearch-2800e9bf.js';
 export { s as OrSearchV3 } from '../OrSearch-602356a0.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-6be79b4e.js';
 export { s as OrSelect } from '../OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from '../OrSelect-b359beb6.js';
+export { s as OrSelectV3 } from '../OrSelect-31442785.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from '../OrSidebar-459ec28f.js';
 export { S as OrSidebarPlacement, S as SidebarPlacement } from '../props-64389534.js';
@@ -112,9 +112,9 @@ export { s as OrTabV3 } from '../OrTab-db771526.js';
 export { s as OrTabs } from '../OrTabs-3da3ea89.js';
 export { s as OrTabsV3, T as TabsVariant } from '../OrTabs-f1773b57.js';
 export { s as OrTag } from '../OrTag-1b3b1296.js';
-export { s as OrTagInputV3 } from '../OrTagInput-56ee7d0b.js';
+export { s as OrTagInputV3 } from '../OrTagInput-d018033c.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-32739999.js';
-export { s as OrTagsV3, T as TagsOverflow } from '../OrTags-52da64cd.js';
+export { s as OrTagsV3, T as TagsOverflow } from '../OrTags-ba8ef261.js';
 export { s as OrTeleport } from '../OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from '../OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from '../OrText-d54c951d.js';
@@ -191,11 +191,11 @@ import '../codemirrorView-020fe885.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import 'lodash/keyBy';
-import '../OrSelectMultipleControl-3620b234.js';
+import '../OrSelectMultipleControl-64bb859f.js';
 import '../OrSelectPlaceholder-10e3bf5e.js';
 import '../OrSelectControlInput-3297e30d.js';
 import '../OrSelectSingleControl-f969c913.js';
 import 'lodash/range';
 import '../styles-ed564e39.js';
-import '../useOverflow-b482f3c9.js';
+import '../useOverflow-e91d2314.js';
 import 'lodash/isNil';

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

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-b359beb6.js';
+export { s as OrSelectV3 } from '../../OrSelect-31442785.js';
 export { I as SelectSize } from '../../OrInputBox-912a6254.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
@@ -34,11 +34,11 @@ import '../../OrInput-0db1e05f.js';
 import '../../useValidationAttributes-d1abbe34.js';
 import '../../OrLoader-b79022da.js';
 import '../../OrMenuItem-fdc66517.js';
-import '../../OrTags-52da64cd.js';
-import '../../useOverflow-b482f3c9.js';
+import '../../OrTags-ba8ef261.js';
+import '../../useOverflow-e91d2314.js';
 import '../../OrButton-2e3a73fb.js';
 import '../../OrTag-32739999.js';
-import '../../OrSelectMultipleControl-3620b234.js';
+import '../../OrSelectMultipleControl-64bb859f.js';
 import '../../OrSelectPlaceholder-10e3bf5e.js';
 import '../../OrSelectControlInput-3297e30d.js';
 import '../../OrSelectSingleControl-f969c913.js';

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

@@ -1,4 +1,4 @@
-export { s as OrSelectMultipleControl } from '../../../OrSelectMultipleControl-3620b234.js';
+export { s as OrSelectMultipleControl } from '../../../OrSelectMultipleControl-64bb859f.js';
 export { s as OrSelectSingleControl } from '../../../OrSelectSingleControl-f969c913.js';
 export { s as OrSelectPlaceholder } from '../../../OrSelectPlaceholder-10e3bf5e.js';
 import 'vue-demi';
@@ -9,8 +9,8 @@ import 'lodash/get';
 import '../../../useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import '../../../OrTags-52da64cd.js';
-import '../../../useOverflow-b482f3c9.js';
+import '../../../OrTags-ba8ef261.js';
+import '../../../useOverflow-e91d2314.js';
 import '../../../OrButton-2e3a73fb.js';
 import '../../../OrLoader-b79022da.js';
 import 'vue';

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

@@ -1,4 +1,4 @@
-export { s as OrSelectMultipleControl } from '../../../../OrSelectMultipleControl-3620b234.js';
+export { s as OrSelectMultipleControl } from '../../../../OrSelectMultipleControl-64bb859f.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../../../dom-aecadd9a.js';
@@ -7,8 +7,8 @@ import 'lodash/get';
 import '../../../../useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import '../../../../OrTags-52da64cd.js';
-import '../../../../useOverflow-b482f3c9.js';
+import '../../../../OrTags-ba8ef261.js';
+import '../../../../useOverflow-e91d2314.js';
 import '../../../../OrButton-2e3a73fb.js';
 import '../../../../OrLoader-b79022da.js';
 import 'vue';

package/dist/esm/v3/components/or-tag-input-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrTagInputV3 } from '../../OrTagInput-56ee7d0b.js';
+export { s as OrTagInputV3 } from '../../OrTagInput-d018033c.js';
 export { I as TagInputSize } from '../../OrInputBox-912a6254.js';
 import 'vue-demi';
 import '@vueuse/core';
@@ -26,8 +26,8 @@ import '../../OrOverlay-6269c33a.js';
 import '../../OrTeleport.vue3-8099178c.js';
 import '../../useTheme-0ef25778.js';
 import '../../OrLabel-b826da04.js';
-import '../../OrTags-52da64cd.js';
-import '../../useOverflow-b482f3c9.js';
+import '../../OrTags-ba8ef261.js';
+import '../../useOverflow-e91d2314.js';
 import '../../OrButton-2e3a73fb.js';
 import '../../OrLoader-b79022da.js';
 import '../../OrTag-32739999.js';

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

@@ -1,6 +1,6 @@
-export { s as OrTagsV3, T as TagsOverflow } from '../../OrTags-52da64cd.js';
+export { s as OrTagsV3, T as TagsOverflow } from '../../OrTags-ba8ef261.js';
 import 'vue-demi';
-import '../../useOverflow-b482f3c9.js';
+import '../../useOverflow-e91d2314.js';
 import '@vueuse/core';
 import '../../dom-aecadd9a.js';
 import 'lodash/isElement';

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

@@ -1,6 +1,6 @@
 export { u as useControlAttributes, a as useIdAttribute } from '../useIdAttribute-859439f0.js';
 export { u as useElevation } from '../useElevation-a50ec347.js';
-export { u as useOverflow } from '../useOverflow-b482f3c9.js';
+export { u as useOverflow } from '../useOverflow-e91d2314.js';
 export { u as usePopoverState } from '../usePopoverState-b92c698b.js';
 export { u as useProxyModelValue } from '../useProxyModelValue-940010d2.js';
 export { u as useResponsive } from '../useResponsive-5c8291da.js';

package/dist/esm/v3/hooks/useOverflow.d.ts

@@ -6,5 +6,6 @@ export interface Overflow {
 }
 export interface UseOverflowOptions {
     hide?: boolean;
+    threshold?: number;
 }
 export declare function useOverflow(container: MaybeElementRef<HTMLElement | undefined>, options?: UseOverflowOptions): Overflow;

package/dist/esm/v3/index.js

@@ -90,7 +90,7 @@ export { s as OrSearch } from './OrSearch-2800e9bf.js';
 export { s as OrSearchV3 } from './OrSearch-602356a0.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-6be79b4e.js';
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from './OrSelect-b359beb6.js';
+export { s as OrSelectV3 } from './OrSelect-31442785.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from './OrSidebar-459ec28f.js';
 export { S as OrSidebarPlacement, S as SidebarPlacement } from './props-64389534.js';
@@ -112,9 +112,9 @@ export { s as OrTabV3 } from './OrTab-db771526.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs-f1773b57.js';
 export { s as OrTag } from './OrTag-1b3b1296.js';
-export { s as OrTagInputV3 } from './OrTagInput-56ee7d0b.js';
+export { s as OrTagInputV3 } from './OrTagInput-d018033c.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-32739999.js';
-export { s as OrTagsV3, T as TagsOverflow } from './OrTags-52da64cd.js';
+export { s as OrTagsV3, T as TagsOverflow } from './OrTags-ba8ef261.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from './OrText-d54c951d.js';
@@ -134,7 +134,7 @@ export { s as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-938aab61.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
 export { u as useElevation } from './useElevation-a50ec347.js';
-export { u as useOverflow } from './useOverflow-b482f3c9.js';
+export { u as useOverflow } from './useOverflow-e91d2314.js';
 export { u as usePopoverState } from './usePopoverState-b92c698b.js';
 export { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 export { u as useResponsive } from './useResponsive-5c8291da.js';
@@ -192,7 +192,7 @@ import './codemirrorView-020fe885.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import 'lodash/keyBy';
-import './OrSelectMultipleControl-3620b234.js';
+import './OrSelectMultipleControl-64bb859f.js';
 import './OrSelectPlaceholder-10e3bf5e.js';
 import './OrSelectControlInput-3297e30d.js';
 import './OrSelectSingleControl-f969c913.js';

package/dist/esm/v3/{useOverflow-b482f3c9.js → useOverflow-e91d2314.js}

@@ -3,9 +3,11 @@ import { isRef, ref, watch } from 'vue-demi';
 import { r as requestAF } from './dom-aecadd9a.js';
 
 function useOverflow(container) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    hide: true
-  };
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    hide = true,
+    threshold = 0
+  } = options;
   const containerRef = isRef(container) ? container : ref(container);
   // State
   const innerItemsRef = ref([]);
@@ -28,8 +30,8 @@ function useOverflow(container) {
           x: containerOffset,
           width: containerWidth
         } = container.getBoundingClientRect();
-        if (itemOffset + itemWidth > containerOffset + containerWidth) {
-          if (options.hide) {
+        if (itemOffset + itemWidth > containerOffset + containerWidth + threshold) {
+          if (hide) {
             item.style.setProperty('visibility', 'hidden');
           }
           return {
@@ -37,7 +39,7 @@ function useOverflow(container) {
             outerItems: [...outerItems, item]
           };
         } else {
-          if (options.hide) {
+          if (hide) {
             item.style.removeProperty('visibility');
           }
           return {

package/package.json

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

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

@@ -61,6 +61,7 @@
               ref="singleControl"
               v-model="searchText"
               :model="proxyModelValue"
+              :disabled="disabled"
               :options="options"
               :placeholder="placeholder"
               :enable-search="enableSearch"

package/src/components/or-tags-v3/OrTags.vue

@@ -156,7 +156,10 @@ export default defineComponent({
     ]);
 
     // State
-    const { innerItems } = useOverflow(container, { hide: false });
+    const { innerItems } = useOverflow(container, {
+      hide: false,
+      threshold: 8,
+    });
 
     const localItems = computed(() => {
       return items.value.map(castToTagObject);

package/src/hooks/useOverflow.ts

@@ -9,11 +9,13 @@ export interface Overflow {
 
 export interface UseOverflowOptions {
   hide?: boolean;
+  threshold?: number;
 }
 export function useOverflow(
   container: MaybeElementRef<HTMLElement | undefined>,
-  options: UseOverflowOptions = { hide: true },
+  options: UseOverflowOptions = {},
 ): Overflow {
+  const { hide = true, threshold = 0 } = options;
   const containerRef = isRef(container) ? container : ref(container);
 
   // State
@@ -31,8 +33,8 @@ export function useOverflow(
         const { x: itemOffset, width: itemWidth } = item.getBoundingClientRect();
         const { x: containerOffset, width: containerWidth } = container.getBoundingClientRect();
 
-        if (itemOffset + itemWidth > containerOffset + containerWidth) {
-          if (options.hide) {
+        if (itemOffset + itemWidth > containerOffset + containerWidth + threshold) {
+          if (hide) {
             item.style.setProperty('visibility', 'hidden');
           }
 
@@ -41,7 +43,7 @@ export function useOverflow(
             outerItems: [...outerItems, item],
           };
         } else {
-          if (options.hide) {
+          if (hide) {
             item.style.removeProperty('visibility');
           }