@onereach/ui-components 16.3.0-beta.4791.0 → 16.3.0-beta.4796.0

package/dist/bundled/v2/components/OrDataGridV3/OrDataGrid.js

@@ -1,2 +1,2 @@
-export { _ as default } from '../../OrDataGrid-05c4bdc6.js';
+export { _ as default } from '../../OrDataGrid-337a4151.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrDataGridV3/index.js

@@ -1 +1 @@
-export { D as DataGridVariant, _ as OrDataGridV3 } from '../../OrDataGrid-05c4bdc6.js';
+export { D as DataGridVariant, _ as OrDataGridV3 } from '../../OrDataGrid-337a4151.js';

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, toRefs, computed, watch, getCurrentInstance } from 'vue-demi';
+import { defineComponent, ref, toRefs, computed, watch, nextTick, getCurrentInstance } from 'vue-demi';
 import { k as useFocus } from '../../index-a7c3000c.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
@@ -7,20 +7,21 @@ import { isEqual } from '../../utils/isEqual.js';
 import { TagsOverflow } from '../OrTagsV3/props.js';
 import { isNil } from '../../utils/isNil.js';
 import { toArray } from '../../utils/toArray.js';
+import __vue_component__$6 from '../OrTooltipV3/OrTooltip.js';
 import { isEmpty } from '../../utils/isEmpty.js';
 import { Select, SelectControl, SelectSearchControl, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './styles.js';
-import __vue_component__$6 from '../OrCheckboxV3/OrCheckbox.js';
-import __vue_component__$7 from '../OrErrorV3/OrError.js';
-import __vue_component__$8 from '../OrExpansionPanelV3/OrExpansionPanel.js';
-import __vue_component__$9 from '../OrHintV3/OrHint.js';
-import __vue_component__$a from '../OrIconV3/OrIcon.js';
-import __vue_component__$b from '../OrIconButtonV3/OrIconButton.js';
-import { _ as __vue_component__$c } from '../../OrInput-873ac2db.js';
-import __vue_component__$d from '../OrInputBoxV3/OrInputBox.js';
-import __vue_component__$e from '../OrLabelV3/OrLabel.js';
-import __vue_component__$f from '../OrMenuItemV3/OrMenuItem.js';
-import __vue_component__$g from '../OrPopoverV3/OrPopover.js';
-import __vue_component__$h from '../OrSkeletonTextV3/OrSkeletonText.js';
+import __vue_component__$7 from '../OrCheckboxV3/OrCheckbox.js';
+import __vue_component__$8 from '../OrErrorV3/OrError.js';
+import __vue_component__$9 from '../OrExpansionPanelV3/OrExpansionPanel.js';
+import __vue_component__$a from '../OrHintV3/OrHint.js';
+import __vue_component__$b from '../OrIconV3/OrIcon.js';
+import __vue_component__$c from '../OrIconButtonV3/OrIconButton.js';
+import { _ as __vue_component__$d } from '../../OrInput-873ac2db.js';
+import __vue_component__$e from '../OrInputBoxV3/OrInputBox.js';
+import __vue_component__$f from '../OrLabelV3/OrLabel.js';
+import __vue_component__$g from '../OrMenuItemV3/OrMenuItem.js';
+import __vue_component__$h from '../OrPopoverV3/OrPopover.js';
+import __vue_component__$i from '../OrSkeletonTextV3/OrSkeletonText.js';
 import { searchItemsByLabel } from '../../helpers/searchItemsByLabel.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';
@@ -448,7 +449,8 @@ var script$1 = defineComponent({
   name: 'OrSelectSingleControl',
   components: {
     OrSelectPlaceholder,
-    OrSelectControlInput
+    OrSelectControlInput,
+    OrTooltip: __vue_component__$6
   },
   model: {
     prop: 'modelValue',
@@ -490,6 +492,9 @@ var script$1 = defineComponent({
     // Refs
     const root = ref();
     const searchControl = ref();
+    const selectionLabelRef = ref();
+    const tooltipRef = ref();
+    const isContentTruncated = ref(false);
     // Props
     const {
       modelValue,
@@ -508,10 +513,24 @@ var script$1 = defineComponent({
       var _a;
       return (_a = selection.value) === null || _a === void 0 ? void 0 : _a.label;
     });
+    /* NOTE: using watch here due to async action.
+    Computed don't work since we need not just to track the data but to analyze UI after the re-render */
+    watch(model, async () => {
+      await nextTick();
+      if (selectionLabelRef.value) {
+        isContentTruncated.value = selectionLabelRef.value.scrollWidth > selectionLabelRef.value.clientWidth;
+      }
+    });
     const focused = computed(() => {
       var _a;
       return (_a = searchControl.value) === null || _a === void 0 ? void 0 : _a.focused;
     });
+    const openTooltip = () => {
+      if (tooltipRef.value) tooltipRef.value.open();
+    };
+    const closeTooltip = () => {
+      if (tooltipRef.value) tooltipRef.value.close();
+    };
     // Styles
     const rootStyles = computed(() => ['or-select-single-control-v3', ...SelectSingleControlInput]);
     // Methods
@@ -529,7 +548,12 @@ var script$1 = defineComponent({
       selection,
       selectionLabel,
       focus,
-      focused
+      focused,
+      isContentTruncated,
+      selectionLabelRef,
+      tooltipRef,
+      openTooltip,
+      closeTooltip
     };
   }
 });
@@ -561,9 +585,24 @@ var __vue_render__$1 = function () {
     attrs: {
       "disabled": _vm.disabled
     }
-  }, [_vm._v("\n        " + _vm._s(_vm.placeholder) + "\n      ")])] : [_c('span', {
-    staticClass: "truncate"
-  }, [_vm._v("\n        " + _vm._s(_vm.selectionLabel) + "\n      ")])]]], 2);
+  }, [_vm._v("\n        " + _vm._s(_vm.placeholder) + "\n      ")])] : [_c('div', {
+    staticClass: "flex"
+  }, [_c('div', {
+    ref: "selectionLabelRef",
+    staticClass: "truncate w-full",
+    on: {
+      "mouseenter": _vm.openTooltip,
+      "mouseleave": function ($event) {
+        _vm.tooltipRef && _vm.tooltipRef.close();
+      }
+    }
+  }, [_vm._v("\n          " + _vm._s(_vm.selectionLabel) + "\n        ")]), _vm._v(" "), _vm.isContentTruncated ? _c('OrTooltip', {
+    ref: "tooltipRef",
+    attrs: {
+      "content": _vm.selectionLabel,
+      "trigger": _vm.selectionLabelRef
+    }
+  }) : _vm._e()], 1)]]], 2);
 };
 var __vue_staticRenderFns__$1 = [];
 
@@ -590,20 +629,20 @@ var OrSelectSingleControl = __vue_component__$1;
 var script = defineComponent({
   name: 'OrSelect',
   components: {
-    OrCheckbox: __vue_component__$6,
-    OrError: __vue_component__$7,
-    OrExpansionPanel: __vue_component__$8,
-    OrHint: __vue_component__$9,
-    OrIcon: __vue_component__$a,
-    OrIconButton: __vue_component__$b,
-    OrInput: __vue_component__$c,
-    OrInputBox: __vue_component__$d,
-    OrLabel: __vue_component__$e,
-    OrMenuItem: __vue_component__$f,
-    OrPopover: __vue_component__$g,
+    OrCheckbox: __vue_component__$7,
+    OrError: __vue_component__$8,
+    OrExpansionPanel: __vue_component__$9,
+    OrHint: __vue_component__$a,
+    OrIcon: __vue_component__$b,
+    OrIconButton: __vue_component__$c,
+    OrInput: __vue_component__$d,
+    OrInputBox: __vue_component__$e,
+    OrLabel: __vue_component__$f,
+    OrMenuItem: __vue_component__$g,
+    OrPopover: __vue_component__$h,
     OrSelectMultipleControl,
     OrSelectSingleControl,
-    OrSkeletonText: __vue_component__$h
+    OrSkeletonText: __vue_component__$i
   },
   directives: {
     DropdownClose,

package/dist/bundled/v2/components/OrToast/index.js

@@ -1,5 +1,5 @@
 export { default as OrToast } from './OrToast.js';
 export { default as OrToastContainer } from '../OrToastContainer/OrToastContainer.js';
-export { PositionsX, PositionsY, ToastType, TransitionType } from './constants.js';
 export { default as useToast } from './composable/useToast.js';
 export { default as useQueue } from './composable/useQueue.js';
+export { PositionsX, PositionsY, ToastType, TransitionType } from './constants.js';

package/dist/bundled/v2/components/OrToastContainer/index.js

@@ -1,4 +1,4 @@
 export { default as OrToastContainer } from './OrToastContainer.js';
-export { PositionsX, PositionsY, ToastType, TransitionType } from '../OrToast/constants.js';
 export { default as useToast } from '../OrToast/composable/useToast.js';
 export { default as useQueue } from '../OrToast/composable/useQueue.js';
+export { PositionsX, PositionsY, ToastType, TransitionType } from '../OrToast/constants.js';

package/dist/bundled/v2/components/OrToastContainerV3/index.js

@@ -1,5 +1,5 @@
 export { default as OrToastContainerV3 } from './OrToastContainer.js';
-export { t as TypesV3 } from '../../types-668300dd.js';
-export { p as PropsV3 } from '../../props-7be029c7.js';
 export { default as useToastV3 } from '../OrToastV3/composable/useToast.js';
 export { default as useQueueV3 } from '../OrToastV3/composable/useQueue.js';
+export { t as TypesV3 } from '../../types-668300dd.js';
+export { p as PropsV3 } from '../../props-7be029c7.js';

package/dist/bundled/v2/components/OrToastV3/index.js

@@ -1,6 +1,6 @@
 export { default as OrToastV3 } from './OrToast.js';
 export { default as OrToastContainerV3 } from '../OrToastContainerV3/OrToastContainer.js';
-export { t as TypesV3 } from '../../types-668300dd.js';
-export { p as PropsV3 } from '../../props-7be029c7.js';
 export { default as useToastV3 } from './composable/useToast.js';
 export { default as useQueueV3 } from './composable/useQueue.js';
+export { t as TypesV3 } from '../../types-668300dd.js';
+export { p as PropsV3 } from '../../props-7be029c7.js';

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

@@ -44,7 +44,7 @@ export { default as OrConfirm } from './OrConfirm/OrConfirm.js';
 export { default as OrConfirmV3 } from './OrConfirmV3/OrConfirm.js';
 export { ConfirmType } from './OrConfirmV3/props.js';
 export { default as OrContextMenuV3 } from './OrContextMenuV3/OrContextMenu.js';
-export { D as DataGridVariant, _ as OrDataGridV3 } from '../OrDataGrid-05c4bdc6.js';
+export { D as DataGridVariant, _ as OrDataGridV3 } from '../OrDataGrid-337a4151.js';
 export { default as OrDateFormatV3 } from './OrDateFormatV3/OrDateFormat.js';
 export { default as OrDatePickerV3 } from './OrDatePickerV3/OrDatePicker.js';
 export { default as OrDateRangePickerV3 } from './OrDateRangePickerV3/OrDateRangePicker.js';

package/dist/bundled/v2/index.js

@@ -18,7 +18,7 @@ export { default as OrCombinedInputV3 } from './components/OrCombinedInputV3/OrC
 export { default as OrConfirm } from './components/OrConfirm/OrConfirm.js';
 export { default as OrConfirmV3 } from './components/OrConfirmV3/OrConfirm.js';
 export { default as OrContextMenuV3 } from './components/OrContextMenuV3/OrContextMenu.js';
-export { D as DataGridVariant, _ as OrDataGridV3 } from './OrDataGrid-05c4bdc6.js';
+export { D as DataGridVariant, _ as OrDataGridV3 } from './OrDataGrid-337a4151.js';
 export { default as OrDateFormatV3 } from './components/OrDateFormatV3/OrDateFormat.js';
 export { default as OrDatePickerV3 } from './components/OrDatePickerV3/OrDatePicker.js';
 export { default as OrDateRangePickerV3 } from './components/OrDateRangePickerV3/OrDateRangePicker.js';

package/dist/bundled/v3/components/OrDataGridV3/OrDataGrid.js

@@ -1 +1 @@
-export { s as default } from '../OrDataGridV3-e01c5258.js';
+export { s as default } from '../OrDataGridV3-a06f6814.js';

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

@@ -1 +1 @@
-export { D as DataGridVariant, s as OrDataGridV3 } from '../OrDataGridV3-e01c5258.js';
+export { D as DataGridVariant, s as OrDataGridV3 } from '../OrDataGridV3-a06f6814.js';

package/dist/bundled/v3/components/OrDataGridV3/styles.js

@@ -1 +1 @@
-export { a as DataGrid } from '../OrDataGridV3-e01c5258.js';
+export { a as DataGrid } from '../OrDataGridV3-a06f6814.js';

package/dist/bundled/v3/components/{OrDataGridV3-e01c5258.js → OrDataGridV3-a06f6814.js}

@@ -5,7 +5,7 @@ import { s as script$g } from './OrDatePickerV3-30492c4c.js';
 import { s as script$h } from './OrDateTimePickerV3-0f7c75ba.js';
 import { s as script$i } from './OrInputV3-bd25f9e7.js';
 import { s as script$j } from './OrRatingV3-e3260da7.js';
-import { s as script$k } from './OrSelectV3-adaeaa6e.js';
+import { s as script$k } from './OrSelectV3-d3facf4f.js';
 import { s as script$l } from './OrSwitchV3-a2f4cdeb.js';
 import { s as script$m } from './OrTagInputV3-094bca9d.js';
 import { s as script$n } from './OrTimePickerV3-0fa8e719.js';

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

@@ -1 +1 @@
-export { s as default } from '../OrSelectV3-adaeaa6e.js';
+export { s as default } from '../OrSelectV3-d3facf4f.js';

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

@@ -1 +1 @@
-export { s as OrSelectV3 } from '../OrSelectV3-adaeaa6e.js';
+export { s as OrSelectV3 } from '../OrSelectV3-d3facf4f.js';

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

@@ -1 +1 @@
-export { S as Select, a as SelectControl, c as SelectDropdown, d as SelectDropdownDefault, e as SelectDropdownFlipped, f as SelectDropdownItem, g as SelectNoSearchResults, b as SelectSearchControl } from '../OrSelectV3-adaeaa6e.js';
+export { S as Select, a as SelectControl, c as SelectDropdown, d as SelectDropdownDefault, e as SelectDropdownFlipped, f as SelectDropdownItem, g as SelectNoSearchResults, b as SelectSearchControl } from '../OrSelectV3-d3facf4f.js';

package/dist/bundled/v3/components/{OrSelectV3-adaeaa6e.js → OrSelectV3-d3facf4f.js}

@@ -1,24 +1,25 @@
 import { withDirectives, openBlock, createElementBlock, normalizeStyle, normalizeClass, vModelDynamic, renderSlot, resolveComponent, createVNode, createSlots, withCtx, createTextVNode, toDisplayString, createElementVNode, vShow, createBlock, createCommentVNode, Fragment, resolveDirective, withModifiers, renderList } from 'vue';
-import { defineComponent, ref, toRefs, computed, watch, getCurrentInstance } from 'vue-demi';
+import { defineComponent, ref, toRefs, computed, watch, nextTick, getCurrentInstance } from 'vue-demi';
 import { v as useFocus } from './OrAutocompleteV3-72df6cbd.js';
 import { useProxyModelValue } from '../hooks/useProxyModelValue.js';
 import { s as script$5, T as TagsOverflow } from './OrTagsV3-5a41119c.js';
 import { isEqual } from '../utils/isEqual.js';
 import { isNil } from '../utils/isNil.js';
 import { toArray } from '../utils/toArray.js';
+import { s as script$6 } from './OrTooltipV3-a54da954.js';
 import { isEmpty } from '../utils/isEmpty.js';
-import { s as script$6 } from './OrCheckboxV3-2f2f7bc1.js';
-import { s as script$7 } from './OrErrorV3-b04d76aa.js';
-import { s as script$8 } from './OrExpansionPanelV3-eaf7465e.js';
-import { s as script$9 } from './OrHintV3-c8ac5975.js';
-import { s as script$a } from './OrIconV3-b5c97ea7.js';
-import { s as script$b } from './OrIconButtonV3-2d89d3fd.js';
-import { s as script$c } from './OrInputV3-bd25f9e7.js';
-import { s as script$d, I as InputBoxVariant } from './OrInputBoxV3-efe30bd8.js';
-import { s as script$e } from './OrLabelV3-2715e117.js';
-import { s as script$f } from './OrMenuItemV3-b0cfe54a.js';
-import { s as script$g } from './OrPopoverV3-4b885d7a.js';
-import { s as script$h } from './OrSkeletonV3-b48005a2.js';
+import { s as script$7 } from './OrCheckboxV3-2f2f7bc1.js';
+import { s as script$8 } from './OrErrorV3-b04d76aa.js';
+import { s as script$9 } from './OrExpansionPanelV3-eaf7465e.js';
+import { s as script$a } from './OrHintV3-c8ac5975.js';
+import { s as script$b } from './OrIconV3-b5c97ea7.js';
+import { s as script$c } from './OrIconButtonV3-2d89d3fd.js';
+import { s as script$d } from './OrInputV3-bd25f9e7.js';
+import { s as script$e, I as InputBoxVariant } from './OrInputBoxV3-efe30bd8.js';
+import { s as script$f } from './OrLabelV3-2715e117.js';
+import { s as script$g } from './OrMenuItemV3-b0cfe54a.js';
+import { s as script$h } from './OrPopoverV3-4b885d7a.js';
+import { s as script$i } from './OrSkeletonV3-b48005a2.js';
 import { searchItemsByLabel } from '../helpers/searchItemsByLabel.js';
 import { DropdownClose } from '../directives/dropdown-close.js';
 import { DropdownOpen } from '../directives/dropdown-open.js';
@@ -333,7 +334,8 @@ var script$1 = defineComponent({
   name: 'OrSelectSingleControl',
   components: {
     OrSelectPlaceholder: script$3,
-    OrSelectControlInput: script$4
+    OrSelectControlInput: script$4,
+    OrTooltip: script$6
   },
   model: {
     prop: 'modelValue',
@@ -375,6 +377,9 @@ var script$1 = defineComponent({
     // Refs
     const root = ref();
     const searchControl = ref();
+    const selectionLabelRef = ref();
+    const tooltipRef = ref();
+    const isContentTruncated = ref(false);
     // Props
     const {
       modelValue,
@@ -393,10 +398,24 @@ var script$1 = defineComponent({
       var _a;
       return (_a = selection.value) === null || _a === void 0 ? void 0 : _a.label;
     });
+    /* NOTE: using watch here due to async action.
+    Computed don't work since we need not just to track the data but to analyze UI after the re-render */
+    watch(model, async () => {
+      await nextTick();
+      if (selectionLabelRef.value) {
+        isContentTruncated.value = selectionLabelRef.value.scrollWidth > selectionLabelRef.value.clientWidth;
+      }
+    });
     const focused = computed(() => {
       var _a;
       return (_a = searchControl.value) === null || _a === void 0 ? void 0 : _a.focused;
     });
+    const openTooltip = () => {
+      if (tooltipRef.value) tooltipRef.value.open();
+    };
+    const closeTooltip = () => {
+      if (tooltipRef.value) tooltipRef.value.close();
+    };
     // Styles
     const rootStyles = computed(() => ['or-select-single-control-v3', ...SelectSingleControlInput]);
     // Methods
@@ -414,18 +433,24 @@ var script$1 = defineComponent({
       selection,
       selectionLabel,
       focus,
-      focused
+      focused,
+      isContentTruncated,
+      selectionLabelRef,
+      tooltipRef,
+      openTooltip,
+      closeTooltip
     };
   }
 });
 
 const _hoisted_1$1 = {
   key: 1,
-  class: "truncate"
+  class: "flex"
 };
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrSelectControlInput = resolveComponent("OrSelectControlInput");
   const _component_OrSelectPlaceholder = resolveComponent("OrSelectPlaceholder");
+  const _component_OrTooltip = resolveComponent("OrTooltip");
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
@@ -443,7 +468,17 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)]),
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["disabled"])) : (openBlock(), createElementBlock("span", _hoisted_1$1, toDisplayString(_ctx.selectionLabel), 1 /* TEXT */))], 64 /* STABLE_FRAGMENT */))], 2 /* CLASS */);
+  }, 8 /* PROPS */, ["disabled"])) : (openBlock(), createElementBlock("div", _hoisted_1$1, [createElementVNode("div", {
+    ref: "selectionLabelRef",
+    class: "truncate w-full",
+    onMouseenter: _cache[1] || (_cache[1] = (...args) => _ctx.openTooltip && _ctx.openTooltip(...args)),
+    onMouseleave: _cache[2] || (_cache[2] = $event => _ctx.tooltipRef && _ctx.tooltipRef.close())
+  }, toDisplayString(_ctx.selectionLabel), 545 /* TEXT, NEED_HYDRATION, NEED_PATCH */), _ctx.isContentTruncated ? (openBlock(), createBlock(_component_OrTooltip, {
+    key: 0,
+    ref: "tooltipRef",
+    content: _ctx.selectionLabel,
+    trigger: _ctx.selectionLabelRef
+  }, null, 8 /* PROPS */, ["content", "trigger"])) : createCommentVNode("v-if", true)]))], 64 /* STABLE_FRAGMENT */))], 2 /* CLASS */);
 }
 
 script$1.render = render$1;
@@ -505,20 +540,20 @@ const SelectNoSearchResults = [
 var script = defineComponent({
   name: 'OrSelect',
   components: {
-    OrCheckbox: script$6,
-    OrError: script$7,
-    OrExpansionPanel: script$8,
-    OrHint: script$9,
-    OrIcon: script$a,
-    OrIconButton: script$b,
-    OrInput: script$c,
-    OrInputBox: script$d,
-    OrLabel: script$e,
-    OrMenuItem: script$f,
-    OrPopover: script$g,
+    OrCheckbox: script$7,
+    OrError: script$8,
+    OrExpansionPanel: script$9,
+    OrHint: script$a,
+    OrIcon: script$b,
+    OrIconButton: script$c,
+    OrInput: script$d,
+    OrInputBox: script$e,
+    OrLabel: script$f,
+    OrMenuItem: script$g,
+    OrPopover: script$h,
     OrSelectMultipleControl: script$2,
     OrSelectSingleControl: script$1,
-    OrSkeletonText: script$h
+    OrSkeletonText: script$i
   },
   directives: {
     DropdownClose,

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

@@ -24,7 +24,7 @@ export { s as OrCombinedInputV3 } from './OrCombinedInputV3-ceff5a22.js';
 export { s as OrConfirm } from './OrConfirm-d85d5ef4.js';
 export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirmV3-9a0d8dca.js';
 export { default as OrContextMenuV3 } from './OrContextMenuV3/OrContextMenu.js';
-export { D as DataGridVariant, s as OrDataGridV3 } from './OrDataGridV3-e01c5258.js';
+export { D as DataGridVariant, s as OrDataGridV3 } from './OrDataGridV3-a06f6814.js';
 export { s as OrDateFormatV3 } from './OrDateFormatV3-72908378.js';
 export { s as OrDatePickerV3 } from './OrDatePickerV3-30492c4c.js';
 export { s as OrDateRangePickerV3 } from './OrDateRangePickerV3-be91d8cd.js';
@@ -93,7 +93,7 @@ export { default as OrSearch } from './OrSearch/OrSearch.js';
 export { default as OrSearchV3 } from './OrSearchV3/OrSearch.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControlV3-99c7f6ed.js';
 export { s as OrSelect } from './OrSelect-06b1f2ff.js';
-export { s as OrSelectV3 } from './OrSelectV3-adaeaa6e.js';
+export { s as OrSelectV3 } from './OrSelectV3-d3facf4f.js';
 export { OrSidebar, OrSidebarSide } from './OrSidebar/index.js';
 export { s as OrSidebarV3, S as SidebarPlacement } from './OrSidebarV3-57477782.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeleton-766b54c3.js';

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

@@ -7,9 +7,9 @@ export { useLocale } from './useLocale.js';
 export { useOverflow } from './useOverflow.js';
 export { usePopoverState } from './usePopoverState.js';
 export { useProxyModelValue } from './useProxyModelValue.js';
+export { default as useResponsive } from './useResponsive/useResponsive.js';
 export { useTheme } from './useTheme.js';
 export { useTimeFormat } from './useTimeFormat.js';
 export { useTimeMask } from './useTimeMask.js';
 export { default as useToggle } from './useToggle.js';
 export { useValidationAttributes } from './useValidationAttributes.js';
-export { default as useResponsive } from './useResponsive/useResponsive.js';

package/dist/bundled/v3/index.js

@@ -16,7 +16,7 @@ export { s as OrCombinedInputV3 } from './components/OrCombinedInputV3-ceff5a22.
 export { s as OrConfirm } from './components/OrConfirm-d85d5ef4.js';
 export { C as ConfirmType, s as OrConfirmV3 } from './components/OrConfirmV3-9a0d8dca.js';
 export { default as OrContextMenuV3 } from './components/OrContextMenuV3/OrContextMenu.js';
-export { D as DataGridVariant, s as OrDataGridV3 } from './components/OrDataGridV3-e01c5258.js';
+export { D as DataGridVariant, s as OrDataGridV3 } from './components/OrDataGridV3-a06f6814.js';
 export { s as OrDateFormatV3 } from './components/OrDateFormatV3-72908378.js';
 export { s as OrDateRangePickerV3 } from './components/OrDateRangePickerV3-be91d8cd.js';
 export { s as OrDateTimeFormatV3 } from './components/OrDateTimeFormatV3-689439f5.js';
@@ -116,7 +116,7 @@ export { s as OrRatingV3, R as RatingVariant } from './components/OrRatingV3-e32
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './components/OrResizeablePanelV3-951e391d.js';
 export { default as OrSearch } from './components/OrSearch/OrSearch.js';
 export { default as OrSearchV3 } from './components/OrSearchV3/OrSearch.js';
-export { s as OrSelectV3 } from './components/OrSelectV3-adaeaa6e.js';
+export { s as OrSelectV3 } from './components/OrSelectV3-d3facf4f.js';
 export { s as OrSortingV3 } from './components/OrSortingV3-cd48e096.js';
 export { s as OrSwitchV3 } from './components/OrSwitchV3-a2f4cdeb.js';
 export { default as OrTabHeaderItem } from './components/OrTabHeaderItem/OrTabHeaderItem.js';

package/dist/esm/v2/{OrDataGrid-e28e164f.js → OrDataGrid-e9889846.js}

@@ -5,7 +5,7 @@ import { _ as __vue_component__$h } from './OrSearch-c8fe6750.js';
 import './OrSkeletonCircle.vue_rollup-plugin-vue_script-f572f02f.js';
 import './OrSkeletonRect.vue_rollup-plugin-vue_script-d2b78065.js';
 import { _ as __vue_component__$i } from './OrSkeletonText-b6e51e70.js';
-import { _ as __vue_component__$2, a as __vue_component__$3, b as __vue_component__$4, c as __vue_component__$5, d as __vue_component__$6, e as __vue_component__$7, f as __vue_component__$8, g as __vue_component__$9, h as __vue_component__$a, i as __vue_component__$b, j as __vue_component__$c, k as __vue_component__$d, l as __vue_component__$e, m as __vue_component__$f, D as DataGridVariant } from './OrDataGridToolbar-114bcc93.js';
+import { _ as __vue_component__$2, a as __vue_component__$3, b as __vue_component__$4, c as __vue_component__$5, d as __vue_component__$6, e as __vue_component__$7, f as __vue_component__$8, g as __vue_component__$9, h as __vue_component__$a, i as __vue_component__$b, j as __vue_component__$c, k as __vue_component__$d, l as __vue_component__$e, m as __vue_component__$f, D as DataGridVariant } from './OrDataGridToolbar-323cb335.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const DataGrid = [

package/dist/esm/v2/{OrDataGridToolbar-114bcc93.js → OrDataGridToolbar-323cb335.js}

@@ -12,7 +12,7 @@ import { _ as __vue_component__$g } from './OrDateTimePicker-c16643e9.js';
 import './OrDateTimePickerTimeSelect-08e435fd.js';
 import { _ as __vue_component__$h } from './OrInput-1801c226.js';
 import { _ as __vue_component__$i } from './OrRating-7c968949.js';
-import { _ as __vue_component__$j } from './OrSelect-a051d32b.js';
+import { _ as __vue_component__$j } from './OrSelect-03b0b27f.js';
 import { _ as __vue_component__$k } from './OrSwitch-d9bb9ac5.js';
 import { _ as __vue_component__$l } from './OrTagInput-35d812e2.js';
 import { _ as __vue_component__$m } from './OrTimePicker-59f1941d.js';

package/dist/esm/v2/{OrSelect-a051d32b.js → OrSelect-03b0b27f.js}

@@ -27,7 +27,7 @@ import './OrSkeletonRect.vue_rollup-plugin-vue_script-d2b78065.js';
 import { _ as __vue_component__$e } from './OrSkeletonText-b6e51e70.js';
 import { T as TagsOverflow } from './OrTags-1dd44e9c.js';
 import { _ as __vue_component__$c } from './OrSelectMultipleControl-63dbf79d.js';
-import { _ as __vue_component__$d } from './OrSelectSingleControl-5525edde.js';
+import { _ as __vue_component__$d } from './OrSelectSingleControl-58b80fd4.js';
 import './OrSelectPlaceholder-a6caa9e0.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrSelectSingleControl-5525edde.js → OrSelectSingleControl-58b80fd4.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, toRefs, computed } from 'vue-demi';
+import { defineComponent, ref, toRefs, computed, watch, nextTick } from 'vue-demi';
 import './TimeFormat-a7f5565b.js';
 import './dom-53c9635b.js';
 import { i as isEmpty } from './isString-cf957a95.js';
@@ -9,6 +9,7 @@ import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$2 } from './OrSelectControlInput-31d24ab9.js';
 import { _ as __vue_component__$1 } from './OrSelectPlaceholder-a6caa9e0.js';
+import { _ as __vue_component__$3 } from './OrTooltip-24e3f17d.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const SelectSingleControlInput = [
@@ -19,7 +20,8 @@ var script = defineComponent({
   name: 'OrSelectSingleControl',
   components: {
     OrSelectPlaceholder: __vue_component__$1,
-    OrSelectControlInput: __vue_component__$2
+    OrSelectControlInput: __vue_component__$2,
+    OrTooltip: __vue_component__$3
   },
   model: {
     prop: 'modelValue',
@@ -61,6 +63,9 @@ var script = defineComponent({
     // Refs
     const root = ref();
     const searchControl = ref();
+    const selectionLabelRef = ref();
+    const tooltipRef = ref();
+    const isContentTruncated = ref(false);
     // Props
     const {
       modelValue,
@@ -79,10 +84,24 @@ var script = defineComponent({
       var _a;
       return (_a = selection.value) === null || _a === void 0 ? void 0 : _a.label;
     });
+    /* NOTE: using watch here due to async action.
+    Computed don't work since we need not just to track the data but to analyze UI after the re-render */
+    watch(model, async () => {
+      await nextTick();
+      if (selectionLabelRef.value) {
+        isContentTruncated.value = selectionLabelRef.value.scrollWidth > selectionLabelRef.value.clientWidth;
+      }
+    });
     const focused = computed(() => {
       var _a;
       return (_a = searchControl.value) === null || _a === void 0 ? void 0 : _a.focused;
     });
+    const openTooltip = () => {
+      if (tooltipRef.value) tooltipRef.value.open();
+    };
+    const closeTooltip = () => {
+      if (tooltipRef.value) tooltipRef.value.close();
+    };
     // Styles
     const rootStyles = computed(() => ['or-select-single-control-v3', ...SelectSingleControlInput]);
     // Methods
@@ -100,7 +119,12 @@ var script = defineComponent({
       selection,
       selectionLabel,
       focus,
-      focused
+      focused,
+      isContentTruncated,
+      selectionLabelRef,
+      tooltipRef,
+      openTooltip,
+      closeTooltip
     };
   }
 });
@@ -132,9 +156,24 @@ var __vue_render__ = function () {
     attrs: {
       "disabled": _vm.disabled
     }
-  }, [_vm._v("\n        " + _vm._s(_vm.placeholder) + "\n      ")])] : [_c('span', {
-    staticClass: "truncate"
-  }, [_vm._v("\n        " + _vm._s(_vm.selectionLabel) + "\n      ")])]]], 2);
+  }, [_vm._v("\n        " + _vm._s(_vm.placeholder) + "\n      ")])] : [_c('div', {
+    staticClass: "flex"
+  }, [_c('div', {
+    ref: "selectionLabelRef",
+    staticClass: "truncate w-full",
+    on: {
+      "mouseenter": _vm.openTooltip,
+      "mouseleave": function ($event) {
+        _vm.tooltipRef && _vm.tooltipRef.close();
+      }
+    }
+  }, [_vm._v("\n          " + _vm._s(_vm.selectionLabel) + "\n        ")]), _vm._v(" "), _vm.isContentTruncated ? _c('OrTooltip', {
+    ref: "tooltipRef",
+    attrs: {
+      "content": _vm.selectionLabel,
+      "trigger": _vm.selectionLabelRef
+    }
+  }) : _vm._e()], 1)]]], 2);
 };
 var __vue_staticRenderFns__ = [];
 

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

@@ -34,8 +34,8 @@ export { _ as OrCombinedInputV3 } from '../OrCombinedInput-da2fc9f0.js';
 export { _ as OrConfirm } from '../OrConfirm-8f6d47e1.js';
 export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-e040da16.js';
 export { _ as OrContextMenuV3 } from '../OrContextMenu-a6fee3eb.js';
-export { _ as OrDataGridV3 } from '../OrDataGrid-e28e164f.js';
-export { D as DataGridVariant } from '../OrDataGridToolbar-114bcc93.js';
+export { _ as OrDataGridV3 } from '../OrDataGrid-e9889846.js';
+export { D as DataGridVariant } from '../OrDataGridToolbar-323cb335.js';
 export { _ as OrDateFormatV3 } from '../OrDateFormat-c81a6a00.js';
 export { _ as OrDatePickerV3 } from '../OrDatePicker-47a91168.js';
 export { _ as OrDateRangePickerV3 } from '../OrDateRangePicker-4c97e720.js';
@@ -112,7 +112,7 @@ export { _ as OrSearch } from '../OrSearch-9c4cd6ca.js';
 export { _ as OrSearchV3 } from '../OrSearch-c8fe6750.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-047e2414.js';
 export { _ as OrSelect } from '../OrSelect-1df35160.js';
-export { _ as OrSelectV3 } from '../OrSelect-a051d32b.js';
+export { _ as OrSelectV3 } from '../OrSelect-03b0b27f.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-054b26c6.js';
 export { _ as OrSidebarV3, S as SidebarPlacement } from '../props-dc3db737.js';
 export { _ as OrSkeletonCircle } from '../OrSkeletonCircle-c4bf0e34.js';
@@ -243,7 +243,7 @@ import '../OrSelectMultipleControl-63dbf79d.js';
 import '../isEqual-15f4b2f5.js';
 import '../OrSelectControlInput-31d24ab9.js';
 import '../OrSelectPlaceholder-a6caa9e0.js';
-import '../OrSelectSingleControl-5525edde.js';
+import '../OrSelectSingleControl-58b80fd4.js';
 import 'lodash/range';
 import '../useOverflow-5a08887e.js';
 import 'portal-vue/dist/portal-vue.esm.js';

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

@@ -1,5 +1,5 @@
-export { _ as OrDataGridV3 } from '../../OrDataGrid-e28e164f.js';
-export { D as DataGridVariant } from '../../OrDataGridToolbar-114bcc93.js';
+export { _ as OrDataGridV3 } from '../../OrDataGrid-e9889846.js';
+export { D as DataGridVariant } from '../../OrDataGridToolbar-323cb335.js';
 import 'vue-demi';
 import '../../OrCheckbox-f2dc364e.js';
 import '../../useIdAttribute-3a339b79.js';
@@ -63,7 +63,7 @@ import '../../formatTime-3f37a00f.js';
 import '../../getCurrentDate-e5a478c3.js';
 import '../../OrDateTimePicker-c16643e9.js';
 import '../../OrRating-7c968949.js';
-import '../../OrSelect-a051d32b.js';
+import '../../OrSelect-03b0b27f.js';
 import '../../isString-cf957a95.js';
 import '../../isNull-7ae26d1d.js';
 import '../../isObject-4d5300e9.js';
@@ -77,7 +77,7 @@ import '../../OrSelectMultipleControl-63dbf79d.js';
 import '../../isEqual-15f4b2f5.js';
 import '../../OrSelectControlInput-31d24ab9.js';
 import '../../OrSelectPlaceholder-a6caa9e0.js';
-import '../../OrSelectSingleControl-5525edde.js';
+import '../../OrSelectSingleControl-58b80fd4.js';
 import '../../OrSwitch-d9bb9ac5.js';
 import '../../OrTagInput-35d812e2.js';
 import '../../OrTimePicker-59f1941d.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrDataGridFooter, a as OrDataGridHeader, b as OrDataGridTable, c as OrDataGridTableContent, d as OrDataGridTableContentCell, e as OrDataGridTableContentRow, f as OrDataGridTableFooter, g as OrDataGridTableFooterCell, h as OrDataGridTableFooterRow, i as OrDataGridTableHeader, j as OrDataGridTableHeaderCell, k as OrDataGridTableHeaderRow, l as OrDataGridTablePlaceholder, m as OrDataGridToolbar } from '../../../OrDataGridToolbar-114bcc93.js';
+export { _ as OrDataGridFooter, a as OrDataGridHeader, b as OrDataGridTable, c as OrDataGridTableContent, d as OrDataGridTableContentCell, e as OrDataGridTableContentRow, f as OrDataGridTableFooter, g as OrDataGridTableFooterCell, h as OrDataGridTableFooterRow, i as OrDataGridTableHeader, j as OrDataGridTableHeaderCell, k as OrDataGridTableHeaderRow, l as OrDataGridTablePlaceholder, m as OrDataGridToolbar } from '../../../OrDataGridToolbar-323cb335.js';
 import 'vue-demi';
 import '../../../normalize-component-6e8e3d80.js';
 import '../../../TimeFormat-a7f5565b.js';
@@ -54,7 +54,7 @@ import '../../../OrDateTimePicker-c16643e9.js';
 import '../../../OrInput-1801c226.js';
 import '../../../useValidationAttributes-257954f3.js';
 import '../../../OrRating-7c968949.js';
-import '../../../OrSelect-a051d32b.js';
+import '../../../OrSelect-03b0b27f.js';
 import '../../../isString-cf957a95.js';
 import '../../../isNull-7ae26d1d.js';
 import '../../../isObject-4d5300e9.js';
@@ -74,7 +74,7 @@ import '../../../OrSelectMultipleControl-63dbf79d.js';
 import '../../../isEqual-15f4b2f5.js';
 import '../../../OrSelectControlInput-31d24ab9.js';
 import '../../../OrSelectPlaceholder-a6caa9e0.js';
-import '../../../OrSelectSingleControl-5525edde.js';
+import '../../../OrSelectSingleControl-58b80fd4.js';
 import '../../../OrSwitch-d9bb9ac5.js';
 import '../../../OrTagInput-35d812e2.js';
 import '../../../OrTimePicker-59f1941d.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-a051d32b.js';
+export { _ as OrSelectV3 } from '../../OrSelect-03b0b27f.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
 import '../../include-2a81e823.js';
@@ -62,4 +62,4 @@ import '../../OrSelectMultipleControl-63dbf79d.js';
 import '../../isEqual-15f4b2f5.js';
 import '../../OrSelectControlInput-31d24ab9.js';
 import '../../OrSelectPlaceholder-a6caa9e0.js';
-import '../../OrSelectSingleControl-5525edde.js';
+import '../../OrSelectSingleControl-58b80fd4.js';

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

@@ -1,5 +1,5 @@
 export { _ as OrSelectMultipleControl } from '../../../OrSelectMultipleControl-63dbf79d.js';
-export { _ as OrSelectSingleControl } from '../../../OrSelectSingleControl-5525edde.js';
+export { _ as OrSelectSingleControl } from '../../../OrSelectSingleControl-58b80fd4.js';
 export { _ as OrSelectPlaceholder } from '../../../OrSelectPlaceholder-a6caa9e0.js';
 import 'vue-demi';
 import '../../../TimeFormat-a7f5565b.js';

package/dist/esm/v2/components/or-select-v3/partials/or-select-single-control/OrSelectSingleControl.vue.d.ts

@@ -39,6 +39,11 @@ declare const _default: import("vue-demi").DefineComponent<{
     selectionLabel: import("vue-demi").ComputedRef<string | undefined>;
     focus: () => void;
     focused: import("vue-demi").ComputedRef<any>;
+    isContentTruncated: import("vue-demi").Ref<boolean>;
+    selectionLabelRef: import("vue-demi").Ref<HTMLDialogElement | undefined>;
+    tooltipRef: import("vue-demi").Ref<any>;
+    openTooltip: () => void;
+    closeTooltip: () => void;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;

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

@@ -1,4 +1,4 @@
-export { _ as OrSelectSingleControl } from '../../../../OrSelectSingleControl-5525edde.js';
+export { _ as OrSelectSingleControl } from '../../../../OrSelectSingleControl-58b80fd4.js';
 import 'vue-demi';
 import '../../../../TimeFormat-a7f5565b.js';
 import '../../../../dom-53c9635b.js';
@@ -17,3 +17,17 @@ import '@onereach/styles/tailwind.config.json';
 import '../../../../OrSelectControlInput-31d24ab9.js';
 import '../../../../normalize-component-6e8e3d80.js';
 import '../../../../OrSelectPlaceholder-a6caa9e0.js';
+import '../../../../OrTooltip-24e3f17d.js';
+import '../../../../usePopoverState-7267fa91.js';
+import '../../../../OrPopover-45e2dbce.js';
+import '@floating-ui/dom';
+import '../../../../useElevation-895bc28f.js';
+import '../../../../isVisible-d1e49905.js';
+import '../../../../useResponsive-491da8c6.js';
+import '../../../../OrBottomSheet-3bb9d8e9.js';
+import '../../../../OrOverlay-59e59078.js';
+import '../../../../OrTeleport.vue2-424c7f33.js';
+import 'portal-vue';
+import '../../../../useTheme-dc76b423.js';
+import '../../../../isPrevented-b1764210.js';
+import '../../../../isAncestor-2973d4f4.js';

package/dist/esm/v2/index.js

@@ -34,8 +34,8 @@ export { _ as OrCombinedInputV3 } from './OrCombinedInput-da2fc9f0.js';
 export { _ as OrConfirm } from './OrConfirm-8f6d47e1.js';
 export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-e040da16.js';
 export { _ as OrContextMenuV3 } from './OrContextMenu-a6fee3eb.js';
-export { _ as OrDataGridV3 } from './OrDataGrid-e28e164f.js';
-export { D as DataGridVariant } from './OrDataGridToolbar-114bcc93.js';
+export { _ as OrDataGridV3 } from './OrDataGrid-e9889846.js';
+export { D as DataGridVariant } from './OrDataGridToolbar-323cb335.js';
 export { _ as OrDateFormatV3 } from './OrDateFormat-c81a6a00.js';
 export { _ as OrDatePickerV3 } from './OrDatePicker-47a91168.js';
 export { _ as OrDateRangePickerV3 } from './OrDateRangePicker-4c97e720.js';
@@ -112,7 +112,7 @@ export { _ as OrSearch } from './OrSearch-9c4cd6ca.js';
 export { _ as OrSearchV3 } from './OrSearch-c8fe6750.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-047e2414.js';
 export { _ as OrSelect } from './OrSelect-1df35160.js';
-export { _ as OrSelectV3 } from './OrSelect-a051d32b.js';
+export { _ as OrSelectV3 } from './OrSelect-03b0b27f.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-054b26c6.js';
 export { _ as OrSidebarV3, S as SidebarPlacement } from './props-dc3db737.js';
 export { _ as OrSkeletonCircle } from './OrSkeletonCircle-c4bf0e34.js';
@@ -245,7 +245,7 @@ import 'lodash/keyBy';
 import './OrSelectMultipleControl-63dbf79d.js';
 import './OrSelectControlInput-31d24ab9.js';
 import './OrSelectPlaceholder-a6caa9e0.js';
-import './OrSelectSingleControl-5525edde.js';
+import './OrSelectSingleControl-58b80fd4.js';
 import 'lodash/range';
 import 'portal-vue/dist/portal-vue.esm.js';
 import 'portal-vue';

package/dist/esm/v3/{OrDataGrid-8bd1f5c6.js → OrDataGrid-1870ce18.js}

@@ -5,7 +5,7 @@ import { s as script$h } from './OrSearch-ca4ae6ee.js';
 import './OrSkeletonCircle-a3eb5f53.js';
 import './OrSkeletonRect-d0b8b2cf.js';
 import { s as script$i } from './OrSkeletonText-5e9579c1.js';
-import { s as script$2, a as script$3, b as script$4, c as script$5, d as script$6, e as script$7, f as script$8, g as script$9, h as script$a, i as script$b, j as script$c, k as script$d, l as script$e, m as script$f, D as DataGridVariant } from './OrDataGridToolbar-9e907457.js';
+import { s as script$2, a as script$3, b as script$4, c as script$5, d as script$6, e as script$7, f as script$8, g as script$9, h as script$a, i as script$b, j as script$c, k as script$d, l as script$e, m as script$f, D as DataGridVariant } from './OrDataGridToolbar-83dcd163.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, createSlots, withCtx, renderSlot, createVNode, createCommentVNode, normalizeStyle, Fragment, renderList, createTextVNode, toDisplayString } from 'vue';
 
 const DataGrid = [

package/dist/esm/v3/{OrDataGridToolbar-9e907457.js → OrDataGridToolbar-83dcd163.js}

@@ -12,7 +12,7 @@ import { s as script$g } from './OrDateTimePicker-4611aad8.js';
 import './OrDateTimePickerTimeSelect-aeef3ae9.js';
 import { s as script$h } from './OrInput-75918049.js';
 import { s as script$i } from './OrRating-7c2f8e4d.js';
-import { s as script$j } from './OrSelect-063355e7.js';
+import { s as script$j } from './OrSelect-73b527a1.js';
 import { s as script$k } from './OrSwitch-86583d97.js';
 import { s as script$l } from './OrTagInput-c0064822.js';
 import { s as script$m } from './OrTimePicker-220477a2.js';

package/dist/esm/v3/{OrSelect-063355e7.js → OrSelect-73b527a1.js}

@@ -26,7 +26,7 @@ import './OrSkeletonRect-d0b8b2cf.js';
 import { s as script$e } from './OrSkeletonText-5e9579c1.js';
 import { T as TagsOverflow } from './OrTags-b414ac51.js';
 import { s as script$c } from './OrSelectMultipleControl-938776f3.js';
-import { s as script$d } from './OrSelectSingleControl-70644f38.js';
+import { s as script$d } from './OrSelectSingleControl-624bbadc.js';
 import './OrSelectPlaceholder-81502228.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, withModifiers, createVNode, vShow, Fragment, renderList } from 'vue';
 

package/dist/esm/v3/{OrSelectSingleControl-70644f38.js → OrSelectSingleControl-624bbadc.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, toRefs, computed } from 'vue-demi';
+import { defineComponent, ref, toRefs, computed, watch, nextTick } from 'vue-demi';
 import './TimeFormat-a7f5565b.js';
 import './dom-53c9635b.js';
 import { i as isEmpty } from './isString-cf957a95.js';
@@ -9,7 +9,8 @@ import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
 import { s as script$2 } from './OrSelectControlInput-e0116b29.js';
 import { s as script$1 } from './OrSelectPlaceholder-81502228.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, Fragment, withCtx, createTextVNode, toDisplayString } from 'vue';
+import { s as script$3 } from './OrTooltip-77d97056.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, Fragment, withCtx, createTextVNode, toDisplayString, createElementVNode, createCommentVNode } from 'vue';
 
 const SelectSingleControlInput = [
 // Layout
@@ -19,7 +20,8 @@ var script = defineComponent({
   name: 'OrSelectSingleControl',
   components: {
     OrSelectPlaceholder: script$1,
-    OrSelectControlInput: script$2
+    OrSelectControlInput: script$2,
+    OrTooltip: script$3
   },
   model: {
     prop: 'modelValue',
@@ -61,6 +63,9 @@ var script = defineComponent({
     // Refs
     const root = ref();
     const searchControl = ref();
+    const selectionLabelRef = ref();
+    const tooltipRef = ref();
+    const isContentTruncated = ref(false);
     // Props
     const {
       modelValue,
@@ -79,10 +84,24 @@ var script = defineComponent({
       var _a;
       return (_a = selection.value) === null || _a === void 0 ? void 0 : _a.label;
     });
+    /* NOTE: using watch here due to async action.
+    Computed don't work since we need not just to track the data but to analyze UI after the re-render */
+    watch(model, async () => {
+      await nextTick();
+      if (selectionLabelRef.value) {
+        isContentTruncated.value = selectionLabelRef.value.scrollWidth > selectionLabelRef.value.clientWidth;
+      }
+    });
     const focused = computed(() => {
       var _a;
       return (_a = searchControl.value) === null || _a === void 0 ? void 0 : _a.focused;
     });
+    const openTooltip = () => {
+      if (tooltipRef.value) tooltipRef.value.open();
+    };
+    const closeTooltip = () => {
+      if (tooltipRef.value) tooltipRef.value.close();
+    };
     // Styles
     const rootStyles = computed(() => ['or-select-single-control-v3', ...SelectSingleControlInput]);
     // Methods
@@ -100,18 +119,24 @@ var script = defineComponent({
       selection,
       selectionLabel,
       focus,
-      focused
+      focused,
+      isContentTruncated,
+      selectionLabelRef,
+      tooltipRef,
+      openTooltip,
+      closeTooltip
     };
   }
 });
 
 const _hoisted_1 = {
   key: 1,
-  class: "truncate"
+  class: "flex"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrSelectControlInput = resolveComponent("OrSelectControlInput");
   const _component_OrSelectPlaceholder = resolveComponent("OrSelectPlaceholder");
+  const _component_OrTooltip = resolveComponent("OrTooltip");
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
@@ -129,7 +154,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)]),
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["disabled"])) : (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.selectionLabel), 1 /* TEXT */))], 64 /* STABLE_FRAGMENT */))], 2 /* CLASS */);
+  }, 8 /* PROPS */, ["disabled"])) : (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
+    ref: "selectionLabelRef",
+    class: "truncate w-full",
+    onMouseenter: _cache[1] || (_cache[1] = (...args) => _ctx.openTooltip && _ctx.openTooltip(...args)),
+    onMouseleave: _cache[2] || (_cache[2] = $event => _ctx.tooltipRef && _ctx.tooltipRef.close())
+  }, toDisplayString(_ctx.selectionLabel), 545 /* TEXT, NEED_HYDRATION, NEED_PATCH */), _ctx.isContentTruncated ? (openBlock(), createBlock(_component_OrTooltip, {
+    key: 0,
+    ref: "tooltipRef",
+    content: _ctx.selectionLabel,
+    trigger: _ctx.selectionLabelRef
+  }, null, 8 /* PROPS */, ["content", "trigger"])) : createCommentVNode("v-if", true)]))], 64 /* STABLE_FRAGMENT */))], 2 /* CLASS */);
 }
 
 script.render = render;

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

@@ -32,8 +32,8 @@ export { s as OrCombinedInputV3 } from '../OrCombinedInput-75b556fa.js';
 export { s as OrConfirm } from '../OrConfirm-05a78778.js';
 export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-2ec6233e.js';
 export { s as OrContextMenuV3 } from '../OrContextMenu-d8c71891.js';
-export { s as OrDataGridV3 } from '../OrDataGrid-8bd1f5c6.js';
-export { D as DataGridVariant } from '../OrDataGridToolbar-9e907457.js';
+export { s as OrDataGridV3 } from '../OrDataGrid-1870ce18.js';
+export { D as DataGridVariant } from '../OrDataGridToolbar-83dcd163.js';
 export { s as OrDateFormatV3 } from '../OrDateFormat-9faeb7d0.js';
 export { s as OrDatePickerV3 } from '../OrDatePicker-fff9b6b3.js';
 export { s as OrDateRangePickerV3 } from '../OrDateRangePicker-35babae1.js';
@@ -109,7 +109,7 @@ export { s as OrSearch } from '../OrSearch-4192737e.js';
 export { s as OrSearchV3 } from '../OrSearch-ca4ae6ee.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-5dd163fb.js';
 export { s as OrSelect } from '../OrSelect-2c033afb.js';
-export { s as OrSelectV3 } from '../OrSelect-063355e7.js';
+export { s as OrSelectV3 } from '../OrSelect-73b527a1.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-4ab42b93.js';
 export { s as OrSidebarV3, S as SidebarPlacement } from '../props-413bed7b.js';
 export { s as OrSkeletonCircle } from '../OrSkeletonCircle-66e175a0.js';
@@ -231,7 +231,7 @@ import '../OrSelectMultipleControl-938776f3.js';
 import '../isEqual-15f4b2f5.js';
 import '../OrSelectControlInput-e0116b29.js';
 import '../OrSelectPlaceholder-81502228.js';
-import '../OrSelectSingleControl-70644f38.js';
+import '../OrSelectSingleControl-624bbadc.js';
 import 'lodash/range';
 import '../styles-ed564e39.js';
 import '../useOverflow-5a08887e.js';

package/dist/esm/v3/components/or-data-grid-v3/index.js

@@ -1,5 +1,5 @@
-export { s as OrDataGridV3 } from '../../OrDataGrid-8bd1f5c6.js';
-export { D as DataGridVariant } from '../../OrDataGridToolbar-9e907457.js';
+export { s as OrDataGridV3 } from '../../OrDataGrid-1870ce18.js';
+export { D as DataGridVariant } from '../../OrDataGridToolbar-83dcd163.js';
 import 'vue-demi';
 import '../../OrCheckbox-e353ee89.js';
 import '../../useIdAttribute-3a339b79.js';
@@ -59,7 +59,7 @@ import '../../useTimeMask-a1c090c1.js';
 import '../../formatTime-3f37a00f.js';
 import '../../getCurrentDate-e5a478c3.js';
 import '../../OrRating-7c2f8e4d.js';
-import '../../OrSelect-063355e7.js';
+import '../../OrSelect-73b527a1.js';
 import '../../isString-cf957a95.js';
 import '../../isNull-7ae26d1d.js';
 import '../../isObject-4d5300e9.js';
@@ -73,7 +73,7 @@ import '../../OrSelectMultipleControl-938776f3.js';
 import '../../isEqual-15f4b2f5.js';
 import '../../OrSelectControlInput-e0116b29.js';
 import '../../OrSelectPlaceholder-81502228.js';
-import '../../OrSelectSingleControl-70644f38.js';
+import '../../OrSelectSingleControl-624bbadc.js';
 import '../../OrSwitch-86583d97.js';
 import '../../OrTagInput-c0064822.js';
 import '../../OrTimePicker-220477a2.js';

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

@@ -1,4 +1,4 @@
-export { s as OrDataGridFooter, a as OrDataGridHeader, b as OrDataGridTable, c as OrDataGridTableContent, d as OrDataGridTableContentCell, e as OrDataGridTableContentRow, f as OrDataGridTableFooter, g as OrDataGridTableFooterCell, h as OrDataGridTableFooterRow, i as OrDataGridTableHeader, j as OrDataGridTableHeaderCell, k as OrDataGridTableHeaderRow, l as OrDataGridTablePlaceholder, m as OrDataGridToolbar } from '../../../OrDataGridToolbar-9e907457.js';
+export { s as OrDataGridFooter, a as OrDataGridHeader, b as OrDataGridTable, c as OrDataGridTableContent, d as OrDataGridTableContentCell, e as OrDataGridTableContentRow, f as OrDataGridTableFooter, g as OrDataGridTableFooterCell, h as OrDataGridTableFooterRow, i as OrDataGridTableHeader, j as OrDataGridTableHeaderCell, k as OrDataGridTableHeaderRow, l as OrDataGridTablePlaceholder, m as OrDataGridToolbar } from '../../../OrDataGridToolbar-83dcd163.js';
 import 'vue-demi';
 import 'vue';
 import '../../../TimeFormat-a7f5565b.js';
@@ -50,7 +50,7 @@ import '../../../getCurrentDate-e5a478c3.js';
 import '../../../OrInput-75918049.js';
 import '../../../useValidationAttributes-257954f3.js';
 import '../../../OrRating-7c2f8e4d.js';
-import '../../../OrSelect-063355e7.js';
+import '../../../OrSelect-73b527a1.js';
 import '../../../isString-cf957a95.js';
 import '../../../isNull-7ae26d1d.js';
 import '../../../isObject-4d5300e9.js';
@@ -70,7 +70,7 @@ import '../../../OrSelectMultipleControl-938776f3.js';
 import '../../../isEqual-15f4b2f5.js';
 import '../../../OrSelectControlInput-e0116b29.js';
 import '../../../OrSelectPlaceholder-81502228.js';
-import '../../../OrSelectSingleControl-70644f38.js';
+import '../../../OrSelectSingleControl-624bbadc.js';
 import '../../../OrSwitch-86583d97.js';
 import '../../../OrTagInput-c0064822.js';
 import '../../../OrTimePicker-220477a2.js';

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

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-063355e7.js';
+export { s as OrSelectV3 } from '../../OrSelect-73b527a1.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
 import '../../include-2a81e823.js';
@@ -59,4 +59,4 @@ import '../../OrSelectMultipleControl-938776f3.js';
 import '../../isEqual-15f4b2f5.js';
 import '../../OrSelectControlInput-e0116b29.js';
 import '../../OrSelectPlaceholder-81502228.js';
-import '../../OrSelectSingleControl-70644f38.js';
+import '../../OrSelectSingleControl-624bbadc.js';

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

@@ -1,5 +1,5 @@
 export { s as OrSelectMultipleControl } from '../../../OrSelectMultipleControl-938776f3.js';
-export { s as OrSelectSingleControl } from '../../../OrSelectSingleControl-70644f38.js';
+export { s as OrSelectSingleControl } from '../../../OrSelectSingleControl-624bbadc.js';
 export { s as OrSelectPlaceholder } from '../../../OrSelectPlaceholder-81502228.js';
 import 'vue-demi';
 import '../../../TimeFormat-a7f5565b.js';

package/dist/esm/v3/components/or-select-v3/partials/or-select-single-control/OrSelectSingleControl.vue.d.ts

@@ -39,6 +39,11 @@ declare const _default: import("vue-demi").DefineComponent<{
     selectionLabel: import("vue-demi").ComputedRef<string | undefined>;
     focus: () => void;
     focused: import("vue-demi").ComputedRef<any>;
+    isContentTruncated: import("vue-demi").Ref<boolean>;
+    selectionLabelRef: import("vue-demi").Ref<HTMLDialogElement | undefined>;
+    tooltipRef: import("vue-demi").Ref<any>;
+    openTooltip: () => void;
+    closeTooltip: () => void;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;

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

@@ -1,4 +1,4 @@
-export { s as OrSelectSingleControl } from '../../../../OrSelectSingleControl-70644f38.js';
+export { s as OrSelectSingleControl } from '../../../../OrSelectSingleControl-624bbadc.js';
 import 'vue-demi';
 import '../../../../TimeFormat-a7f5565b.js';
 import '../../../../dom-53c9635b.js';
@@ -17,3 +17,16 @@ import '@onereach/styles/tailwind.config.json';
 import '../../../../OrSelectControlInput-e0116b29.js';
 import 'vue';
 import '../../../../OrSelectPlaceholder-81502228.js';
+import '../../../../OrTooltip-77d97056.js';
+import '../../../../usePopoverState-7267fa91.js';
+import '../../../../OrPopover-0daeba14.js';
+import '@floating-ui/dom';
+import '../../../../useElevation-895bc28f.js';
+import '../../../../isVisible-d1e49905.js';
+import '../../../../useResponsive-491da8c6.js';
+import '../../../../OrBottomSheet-a7a06f7f.js';
+import '../../../../OrOverlay-97c94f0b.js';
+import '../../../../OrTeleport.vue3-8099178c.js';
+import '../../../../useTheme-dc76b423.js';
+import '../../../../isPrevented-b1764210.js';
+import '../../../../isAncestor-2973d4f4.js';

package/dist/esm/v3/index.js

@@ -32,8 +32,8 @@ export { s as OrCombinedInputV3 } from './OrCombinedInput-75b556fa.js';
 export { s as OrConfirm } from './OrConfirm-05a78778.js';
 export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-2ec6233e.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-d8c71891.js';
-export { s as OrDataGridV3 } from './OrDataGrid-8bd1f5c6.js';
-export { D as DataGridVariant } from './OrDataGridToolbar-9e907457.js';
+export { s as OrDataGridV3 } from './OrDataGrid-1870ce18.js';
+export { D as DataGridVariant } from './OrDataGridToolbar-83dcd163.js';
 export { s as OrDateFormatV3 } from './OrDateFormat-9faeb7d0.js';
 export { s as OrDatePickerV3 } from './OrDatePicker-fff9b6b3.js';
 export { s as OrDateRangePickerV3 } from './OrDateRangePicker-35babae1.js';
@@ -109,7 +109,7 @@ export { s as OrSearch } from './OrSearch-4192737e.js';
 export { s as OrSearchV3 } from './OrSearch-ca4ae6ee.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-5dd163fb.js';
 export { s as OrSelect } from './OrSelect-2c033afb.js';
-export { s as OrSelectV3 } from './OrSelect-063355e7.js';
+export { s as OrSelectV3 } from './OrSelect-73b527a1.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-4ab42b93.js';
 export { s as OrSidebarV3, S as SidebarPlacement } from './props-413bed7b.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
@@ -233,7 +233,7 @@ import 'lodash/keyBy';
 import './OrSelectMultipleControl-938776f3.js';
 import './OrSelectControlInput-e0116b29.js';
 import './OrSelectPlaceholder-81502228.js';
-import './OrSelectSingleControl-70644f38.js';
+import './OrSelectSingleControl-624bbadc.js';
 import 'lodash/range';
 import './styles-ed564e39.js';
 import 'lodash/isNil';

package/package.json

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

package/src/components/or-select-v3/partials/or-select-single-control/OrSelectSingleControl.vue

@@ -19,21 +19,35 @@
       </template>
 
       <template v-else>
-        <span class="truncate">
-          {{ selectionLabel }}
-        </span>
+        <div class="flex">
+          <div
+            ref="selectionLabelRef"
+            class="truncate w-full"
+            @mouseenter="openTooltip"
+            @mouseleave="tooltipRef && tooltipRef.close()"
+          >
+            {{ selectionLabel }}
+          </div>
+          <OrTooltip
+            v-if="isContentTruncated"
+            ref="tooltipRef"
+            :content="selectionLabel"
+            :trigger="selectionLabelRef"
+          />
+        </div>
       </template>
     </template>
   </div>
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, ref, toRefs } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRefs, watch, nextTick } from 'vue-demi';
 import { useProxyModelValue } from '../../../../hooks';
 import { isEmpty, isEqual } from '../../../../utils';
 import { SelectItem, SelectModelValue } from '../../types';
 import OrSelectControlInput from '../or-select-control-input/OrSelectControlInput.vue';
 import OrSelectPlaceholder from '../or-select-placeholder/OrSelectPlaceholder.vue';
+import { OrTooltipV3 as OrTooltip } from '../../../or-tooltip-v3';
 import { SelectSingleControlInput } from './styles';
 
 export default defineComponent({
@@ -42,6 +56,7 @@ export default defineComponent({
   components: {
     OrSelectPlaceholder,
     OrSelectControlInput,
+    OrTooltip,
   },
 
   model: {
@@ -101,6 +116,9 @@ export default defineComponent({
     // Refs
     const root = ref<HTMLDivElement>();
     const searchControl = ref<InstanceType<typeof OrSelectControlInput>>();
+    const selectionLabelRef = ref<HTMLDialogElement>();
+    const tooltipRef = ref<InstanceType<typeof OrTooltip>>();
+    const isContentTruncated = ref(false);
 
     // Props
     const { modelValue, model, options } = toRefs(props);
@@ -120,10 +138,27 @@ export default defineComponent({
       return selection.value?.label;
     });
 
+    /* NOTE: using watch here due to async action.
+    Computed don't work since we need not just to track the data but to analyze UI after the re-render */
+    watch(model, async () => {
+      await nextTick();
+      if (selectionLabelRef.value) {
+        isContentTruncated.value = selectionLabelRef.value.scrollWidth > selectionLabelRef.value.clientWidth;
+      }
+    });
+
     const focused = computed(() => {
       return searchControl.value?.focused;
     });
 
+    const openTooltip = () => {
+      if (tooltipRef.value) tooltipRef.value.open();
+    };
+
+    const closeTooltip = () => {
+      if (tooltipRef.value) tooltipRef.value.close();
+    };
+
     // Styles
     const rootStyles = computed(() => ([
       'or-select-single-control-v3',
@@ -147,6 +182,11 @@ export default defineComponent({
       selectionLabel,
       focus,
       focused,
+      isContentTruncated,
+      selectionLabelRef,
+      tooltipRef,
+      openTooltip,
+      closeTooltip,
     };
   },
 });