@onereach/ui-components 6.4.7 → 6.4.8-beta.3470.0

package/dist/esm/v3/index.js

@@ -7,7 +7,7 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-4a3c3e7b.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-8c81a2d5.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-64175d94.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-307a4c3d.js';
 export { C as CardPadding, s as OrCardV3 } from './OrCard-a789e0d9.js';
 export { s as OrCheckbox } from './OrCheckbox-5666c954.js';
 export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-bcf1f5b0.js';
@@ -21,23 +21,23 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-56268647.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-b4fe3443.js';
 export { s as OrCollapse } from './OrCollapse-d7c0afae.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-252f482b.js';
-export { s as OrCombinedInputV3 } from './OrCombinedInput-b8a868cb.js';
-export { I as CombinedInputSize, I as DatePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize } from './OrInputBox-912a6254.js';
+export { s as OrCombinedInputV3 } from './OrCombinedInput-28a8d0b4.js';
+export { I as CombinedInputSize, I as DatePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize } from './OrInputBox-893ccc8d.js';
 export { s as OrConfirm } from './OrConfirm-97ab80b9.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-658dfa58.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-4d88e0c8.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-0a6a5668.js';
 export { s as OrMenuV3 } from './OrMenu-ce78b703.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-2132e8b9.js';
-export { s as OrDateFormatV3 } from './OrDateFormat-8322187d.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-a6518904.js';
-export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-fc9a09d9.js';
+export { s as OrDateFormatV3 } from './OrDateFormat-c2d94f69.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-7d148993.js';
+export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-2061b8a0.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-4bfefbcd.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-e13abe97.js';
-export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-1a7950ad.js';
-export { D as DateTimePickerTimeFormat, D as TimePickerFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from './getTimePlaceholder-09859f55.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-765046c1.js';
+export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-ae6165f0.js';
+export { D as DateTimePickerTimeFormat, D as TimePickerFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from './getTimePlaceholder-60978b3e.js';
 export { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f9.js';
 export { s as OrError } from './OrError-f90296db.js';
@@ -57,7 +57,7 @@ export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-4321
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-a3c4c7dc.js';
 export { s as OrInlineTextareaV3 } from './OrInlineTextarea-3434585e.js';
 export { s as OrInput } from './OrInput-2c3111c2.js';
-export { I as InputType, s as OrInputV3 } from './OrInput-30df8d73.js';
+export { I as InputType, s as OrInputV3 } from './OrInput-b7b6e94d.js';
 export { s as OrLabel } from './OrLabel-a7d99df4.js';
 export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-d4c46bb6.js';
 export { L as LinkColor, s as OrLinkV3 } from './OrLink-dcae31fb.js';
@@ -82,12 +82,12 @@ export { s as OrRadio } from './OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioGroupV3 } from './OrRadioGroup-cae1897c.js';
 export { s as OrRadioV3 } from './OrRadio-02e0d111.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-bdf2e88f.js';
+export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-29838f8d.js';
 export { s as OrSearch } from './OrSearch-2800e9bf.js';
-export { s as OrSearchV3 } from './OrSearch-04fdc116.js';
+export { s as OrSearchV3 } from './OrSearch-a7b923ca.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-4c4fff7b.js';
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from './OrSelect-559c6cf5.js';
+export { s as OrSelectV3 } from './OrSelect-aa023d90.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from './OrSidebar-f9803fee.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-035f0736.js';
@@ -109,17 +109,17 @@ export { s as OrTabV3 } from './OrTab-2d567d8e.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs-05d39983.js';
 export { s as OrTag } from './OrTag-1b3b1296.js';
-export { s as OrTagInputV3 } from './OrTagInput-6824b64e.js';
+export { s as OrTagInputV3 } from './OrTagInput-7225068a.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-31b2c78f.js';
-export { s as OrTagsV3, T as TagsOverflow } from './OrTags-ba7e85ee.js';
+export { s as OrTagsV3, T as TagsOverflow } from './OrTags-5b795df2.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';
 export { s as OrTextarea } from './OrTextarea-7a753c1a.js';
-export { s as OrTextareaV3 } from './OrTextarea-aa1cf564.js';
+export { s as OrTextareaV3 } from './OrTextarea-5159520e.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-cb6762c8.js';
-export { s as OrTimeFormatV3 } from './OrTimeFormat-845f1078.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-294ab841.js';
+export { s as OrTimeFormatV3 } from './OrTimeFormat-dc1ab7ee.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-a77919b5.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-d6f117e2.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-05a9c81b.js';
 export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-7a770dfb.js';
@@ -131,7 +131,7 @@ export { s as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-f661895f.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-ff9ae748.js';
+export { u as useOverflow } from './useOverflow-122c613d.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/{useOverflow-ff9ae748.js → useOverflow-122c613d.js}

@@ -26,7 +26,7 @@ function useOverflow(container) {
           width: containerWidth
         } = container.getBoundingClientRect();
         if (itemOffset + itemWidth > containerOffset + containerWidth) {
-          item.style.setProperty('visibility', 'hidden');
+          // item.style.setProperty('visibility', 'hidden');
           return {
             innerItems,
             outerItems: [...outerItems, item]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "6.4.7",
+  "version": "6.4.8-beta.3470.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -175,6 +175,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "07a128f25cc5c0703dca1e25b86c80e410a8bbf1"
+  }
 }

package/src/components/or-input-box-v3/OrInputBox.vue

@@ -5,6 +5,7 @@
     :invalid="invalid ? '' : null"
     :readonly="readonly ? '' : null"
     :disabled="disabled ? '' : null"
+    @focus="$emit('focus')"
   >
     <slot />
 
@@ -62,6 +63,9 @@ export default defineComponent({
     'root',
   ],
 
+  emits: [
+    'focus',
+  ],
   setup(props) {
     // Refs
     const root = ref<HTMLElement>();

package/src/components/or-tag-input-v3/OrTagInput.vue

@@ -19,49 +19,65 @@
     </template>
 
     <OrInputBox
+      ref="inputBox"
       :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
       :size="size"
+      :force-state="activated ? 'focus-within': undefined"
+      class="cursor-text"
       :invalid="!!error"
       :readonly="readonly"
       :disabled="disabled"
+      tabindex="0"
+      @focus="activate"
     >
-      <template v-if="proxyModelValue.length > 0">
-        <OrTags
-          :items="proxyModelValue"
-          :tag-props="{
-            variant: readonly || disabled ? 'tag' : 'reset',
-            disabled: disabled
-          }"
-          @reset="remove($event)"
-        />
-      </template>
-
-      <input
-        ref="control"
-        v-model="draftModelValue"
-        v-bind="controlAttributes"
-        :class="controlStyles"
-        :type="'text'"
-        :placeholder="proxyModelValue.length === 0 ? placeholder : undefined"
-        :readonly="readonly"
-        :disabled="disabled"
-        :autocomplete="'off'"
-        :minlength="undefined"
-        :maxlength="undefined"
-        @keydown.enter="add()"
-        @keydown="$emit('keydown', $event)"
-        @keyup="$emit('keyup', $event)"
-        @focus="$emit('focus', $event)"
-        @blur="$emit('blur', $event)"
+      <OrTags
+        ref="tags"
+        :items="proxyModelValue"
+        class="grow"
+        :tag-props="{
+          variant: readonly || disabled ? 'tag' : 'reset',
+          disabled: disabled
+        }"
+        :overflow="overflow"
+        @reset="remove($event)"
       >
+        <template
+          v-if="showControl"
+          v-slot:tail
+        >
+          <div class="inline-flex w-fit">
+            <input
+              ref="control"
+              v-model="draftModelValue"
+              v-bind="controlAttributes"
+              :class="controlStyles"
+              :style="controlInlineStyles"
+              :type="'text'"
+              :placeholder="proxyModelValue.length === 0 ? placeholder : undefined"
+              :readonly="readonly"
+              :disabled="disabled"
+              :autocomplete="'off'"
+              :minlength="undefined"
+              :maxlength="undefined"
+              @keydown.enter="add()"
+              @keydown="$emit('keydown', $event)"
+              @keyup="$emit('keyup', $event)"
+              @focus="activate"
+            >
+          </div>
+        </template>
+      </OrTags>
 
-      <template v-slot:addon>
+      <template
+        v-if="enableClear"
+        v-slot:addon
+      >
         <template v-if="proxyModelValue.length > 0 || draftModelValue">
           <OrIconButton
             :icon="'close'"
             :color="'inherit'"
             :disabled="readonly || disabled"
-            @click.stop="reset()"
+            @click="reset()"
           />
         </template>
       </template>
@@ -104,14 +120,15 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, reactive, ref, toRef } from 'vue-demi';
+import { PropType, computed, defineComponent, reactive, ref, toRefs, nextTick, watch } from 'vue-demi';
+import { MaybeElementRef, onClickOutside } from '@vueuse/core';
 import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes } from '../../hooks';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
-import { OrTagsV3 as OrTags } from '../or-tags-v3';
+import { OrTagsV3 as OrTags, TagsOverflow } from '../or-tags-v3';
 import { TagInputSize } from './props';
 import { TagInput, TagInputControl, TagInputItem } from './styles';
 
@@ -182,6 +199,17 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+
+    overflow: {
+      type: String as PropType<`${TagsOverflow}`>,
+      default: TagsOverflow.Hidden,
+    },
+
+    // todo: review default state, disabling will breaking
+    enableClear: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   emits: [
@@ -191,6 +219,7 @@ export default defineComponent({
     'keyup',
     'focus',
     'blur',
+    'reset',
   ],
 
   expose: [
@@ -204,6 +233,11 @@ export default defineComponent({
     // Refs
     const root = ref<HTMLElement>();
     const control = ref<HTMLInputElement>();
+    const inputBox = ref<InstanceType<typeof OrInputBox>>();
+    const tags = ref<InstanceType<typeof OrTags>>();
+
+    // Props
+    const { modelValue, overflow, placeholder } = toRefs(props);
 
     // Styles
     const rootStyles = computed(() => [
@@ -226,12 +260,30 @@ export default defineComponent({
       ...useValidationAttributes(),
     });
 
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const draftModelValue = ref<string>();
+    const activated = ref(false);
+    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
+    const draftModelValue = ref<string>('');
 
     const currentLength = computed(() => proxyModelValue.value?.length ?? 0);
     const maxLength = computed(() => controlAttributes.maxlength);
 
+    const controlInlineStyles = computed(() => {
+      const chars = draftModelValue.value.length > 0
+        ? draftModelValue.value.length
+        : currentLength.value === 0
+          ? placeholder.value?.length ?? 0
+          : 0;
+      return {
+        width: `${Math.max(chars + 1 || 0, 3)}ch`,
+      };
+    });
+
+    const showControl = computed(() => {
+      return draftModelValue.value.length > 0
+        || currentLength.value === 0
+        || activated.value;
+    });
+
     // Methods
     function focus(): void {
       control.value?.focus();
@@ -241,6 +293,18 @@ export default defineComponent({
       control.value?.blur();
     }
 
+    function deactivate() {
+      activated.value = false;
+      nextTick(() => blur());
+      context.emit('blur');
+    }
+
+    function activate() {
+      activated.value = true;
+      nextTick(() => focus());
+      context.emit('focus');
+    }
+
     function add(): void {
       const newItem = draftModelValue.value?.trim();
 
@@ -249,7 +313,7 @@ export default defineComponent({
       if (maxLength.value && currentLength.value >= maxLength.value) return;
 
       proxyModelValue.value = [...proxyModelValue.value, newItem];
-      draftModelValue.value = undefined;
+      draftModelValue.value = '';
     }
 
     function remove(value: string): void {
@@ -258,23 +322,45 @@ export default defineComponent({
 
     function reset(): void {
       proxyModelValue.value = [];
-      draftModelValue.value = undefined;
+      draftModelValue.value = '';
+      context.emit('reset');
     }
 
+    // Effects
+    onClickOutside((inputBox as MaybeElementRef), () => {
+      if (activated.value === false || (tags.value?.overflowPopover as any)?.state === 'open') return;
+      deactivate();
+    });
+
+    watch(proxyModelValue, (items, prevItems) => {
+      if (items.length != prevItems.length && overflow.value === TagsOverflow.Scroll) {
+        nextTick(() => {
+          (tags.value?.container as any)?.lastElementChild?.scrollIntoView({ behavior: 'smooth' });
+        });
+      }
+    });
+
     return {
       root,
       control,
+      inputBox,
+      tags,
       rootStyles,
       controlStyles,
       itemStyles,
+      controlInlineStyles,
       controlAttributes,
       proxyModelValue,
       draftModelValue,
       currentLength,
       maxLength,
+      activated,
+      showControl,
       focus,
       blur,
       add,
+      activate,
+      deactivate,
       remove,
       reset,
     };

package/src/components/or-tag-input-v3/styles.ts

@@ -8,7 +8,7 @@ export const TagInput: string[] = [
 
 export const TagInputControl: string[] = [
   // Layout
-  'flex-auto',
+  // 'flex-auto',
 
   // Typography
   'typography-inherit',

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

@@ -4,6 +4,7 @@
     :class="rootStyles"
   >
     <div
+      v-if="items.length > 0"
       ref="container"
       :class="containerStyles"
     >
@@ -11,20 +12,25 @@
         v-for="item in items"
         v-bind="tagProps"
         :key="item"
+        class="max-w-full"
         @reset="$emit('reset', item)"
       >
         {{ item }}
       </OrTag>
+      <slot
+        v-if="localOverflow === 'wrap'"
+        name="tail"
+      />
     </div>
 
-    <template v-if="overflowItems.length > 0">
+    <template v-if="localOverflow === 'hidden' && overflowItems.length > 0">
       <OrButton
         ref="overflowButton"
         :class="overflowButtonStyles"
         :type="'button'"
         :variant="'link'"
         :color="'inherit'"
-        @click.stop="overflowPopover.open()"
+        @click.stop="togglePopover"
       >
         +{{ overflowItems.length }}
       </OrButton>
@@ -45,11 +51,15 @@
         </div>
       </OrPopover>
     </template>
+    <slot
+      v-if="localOverflow != 'wrap' || items.length === 0"
+      name="tail"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, ref } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRefs } from 'vue-demi';
 import { useOverflow } from '../../hooks';
 import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
@@ -74,7 +84,7 @@ export default defineComponent({
 
     overflow: {
       type: String as PropType<`${TagsOverflow}`>,
-      default: TagsOverflow.Default,
+      default: TagsOverflow.Hidden,
     },
 
     tagProps: {
@@ -93,6 +103,8 @@ export default defineComponent({
 
   expose: [
     'root',
+    'container',
+    'overflowPopover',
   ],
 
   setup(props) {
@@ -100,6 +112,15 @@ export default defineComponent({
     const root = ref<HTMLElement>();
     const container = ref<HTMLElement>();
 
+    // Props
+    const { overflow } = toRefs(props);
+
+    const localOverflow = computed(() => {
+      return overflow.value === TagsOverflow.Default
+        ? TagsOverflow.Hidden
+        : overflow.value;
+    });
+
     const overflowButton = ref<InstanceType<typeof OrButton>>();
     const overflowButtonRoot = computed(() => overflowButton.value?.root);
 
@@ -114,7 +135,7 @@ export default defineComponent({
 
     const containerStyles = computed(() => [
       ...TagsContainer,
-      ...TagsContainerOverflows[props.overflow],
+      ...TagsContainerOverflows[localOverflow.value],
     ]);
 
     const overflowButtonStyles = computed(() => [
@@ -132,9 +153,15 @@ export default defineComponent({
       return props.items.slice(innerItems.value.length);
     });
 
+    // Methods
+    function togglePopover() {
+      (overflowPopover.value!.toggle as () => void)();
+    }
+
     return {
       root,
       container,
+      localOverflow,
       overflowButton,
       overflowButtonRoot,
       overflowPopover,
@@ -144,6 +171,7 @@ export default defineComponent({
       overflowButtonStyles,
       overflowPopoverStyles,
       overflowItems,
+      togglePopover,
     };
   },
 });

package/src/components/or-tags-v3/props.ts

@@ -1,4 +1,8 @@
 export enum TagsOverflow {
+  // todo: remove in next braking release
+  // @deprecated use Hidden instead
   Default = 'default',
   Wrap = 'wrap',
+  Hidden = 'hidden',
+  Scroll = 'scroll',
 }

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

@@ -18,21 +18,36 @@ export const Tags: string[] = [
 export const TagsContainer: string[] = [
   // Layout
   'layout-row',
+  'max-w-full',
 
   // Spacing
   'gap-sm',
+  'py-xs',
 ];
 
 export const TagsContainerOverflows: Record<TagsOverflow, string[]> = {
+  // todo: remove in next braking release
+  // @deprecated use Hidden instead
   [TagsOverflow.Default]: [
     // Overflow
     'overflow-hidden',
   ],
 
+  [TagsOverflow.Hidden]: [
+    // Overflow
+    'overflow-hidden',
+  ],
+
   [TagsOverflow.Wrap]: [
     // Layout
     '!flex-wrap',
   ],
+  [TagsOverflow.Scroll]: [
+    // Layout
+    'overflow-y-auto',
+    // todo: extract to plugin?
+    '[&::-webkit-scrollbar]:hidden [-ms-overflow-style:\'none\'] [scrollbar-width:\'none\']',
+  ],
 };
 
 export const TagsOverflowButton: string[] = [

package/src/hooks/useOverflow.ts

@@ -26,7 +26,7 @@ export function useOverflow(container: MaybeElementRef<HTMLElement | undefined>)
         const { x: containerOffset, width: containerWidth } = container.getBoundingClientRect();
 
         if (itemOffset + itemWidth > containerOffset + containerWidth) {
-          item.style.setProperty('visibility', 'hidden');
+          // item.style.setProperty('visibility', 'hidden');
 
           return {
             innerItems,