@onereach/ui-components 16.3.0-beta.4761.0 → 16.3.0-beta.4779.0

package/dist/esm/v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrAutocompleteV3 } from './OrAutocomplete-4ebb9e1d.js';
+export { s as OrAutocompleteV3 } from './OrAutocomplete-b304c7eb.js';
 export { O as OR_AVATAR_SIZE, s as OrAvatar } from './OrAvatar-dbec7020.js';
 export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from './OrAvatar-cab88a78.js';
 export { B as BottomSheetVariant, s as OrBottomSheetV3 } from './OrBottomSheet-a7a06f7f.js';
@@ -9,7 +9,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-e997c224.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-6559e6fa.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-254be627.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-2f47ab33.js';
 export { C as CardPadding, s as OrCardV3 } from './OrCard-999571e5.js';
 export { s as OrCheckbox } from './OrCheckbox-9d30d1d2.js';
 export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-a506ccd5.js';
@@ -32,22 +32,22 @@ 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-aa2ea8b3.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-d8c71891.js';
-export { s as OrDataGridV3 } from './OrDataGrid-f6b030e2.js';
-export { D as DataGridVariant } from './OrDataGridToolbar-df02d90e.js';
-export { s as OrDateFormatV3 } from './OrDateFormat-a7f36236.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-3f64e170.js';
-export { s as OrDateRangePickerV3 } from './OrDateRangePicker-d5cd11d1.js';
-export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-929ff4a6.js';
+export { s as OrDataGridV3 } from './OrDataGrid-2425e8c1.js';
+export { D as DataGridVariant } from './OrDataGridToolbar-5766a646.js';
+export { s as OrDateFormatV3 } from './OrDateFormat-64d2a519.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-7688c1f1.js';
+export { s as OrDateRangePickerV3 } from './OrDateRangePicker-135192c1.js';
+export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-7eb9cf90.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-5bae57ec.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-c90953ea.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-149ec6c0.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-b99a4719.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-712526c1.js';
 export { f as formatDate, a as formatTime } from './formatTime-3f37a00f.js';
 export { f as formatMobileDate, a as formatMobileTime, g as getCurrentDate } from './getCurrentDate-e5a478c3.js';
 export { g as getNextMonthDate } from './getNextMonthDate-8ec29631.js';
 export { D as DrawerPlacement, s as OrDrawerV3 } from './OrDrawer-f12faf1a.js';
 export { D as DropAreaSize, s as OrDropAreaV3 } from './OrDropArea-24fe94e7.js';
 export { a as approximateFileSize } from './approximateFileSize-a48b356b.js';
-export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from './OrEditorTabs-aeeb8afc.js';
+export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from './OrEditorTabs-fe29772c.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-47f9d910.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-94f074a2.js';
@@ -80,7 +80,7 @@ export { s as OrListV3 } from './OrList-14d8cf31.js';
 export { s as OrListItem } from './OrListItem-12fa8abd.js';
 export { L as LoaderViews, s as OrLoader } from './OrLoader-d5a5b426.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-5e2f359b.js';
-export { s as OrMenuItemV3 } from './OrMenuItem-6caf8844.js';
+export { s as OrMenuItemV3 } from './OrMenuItem-5612d2a8.js';
 export { s as OrMenuV3 } from './OrMenu-95509740.js';
 export { s as OrModal, O as OrModalSizes } from './OrModal-6060ddf4.js';
 export { M as ModalSize, s as OrModalV3 } from './OrModal-4da45f04.js';
@@ -90,7 +90,7 @@ export { s as OrNumberInput } from './OrNumberInput-daa7b3f0.js';
 export { s as OrOverflowMenu } from './OrOverflowMenu-e19fb6c8.js';
 export { s as OrOverlay } from './OrOverlay-451dce49.js';
 export { s as OrOverlayV3 } from './OrOverlay-97c94f0b.js';
-export { s as OrPaginationV3 } from './OrPagination-544f2d50.js';
+export { s as OrPaginationV3 } from './OrPagination-59620bf1.js';
 export { s as OrPassword } from './OrPassword-352677d0.js';
 export { s as OrPopoverV3, a as PopoverPlacement, P as PopoverVariant } from './OrPopover-0daeba14.js';
 export { i as isPrevented } from './isPrevented-b1764210.js';
@@ -103,13 +103,13 @@ export { s as OrRadioV3 } from './OrRadio-8677bac3.js';
 export { s as OrRangeSliderV3 } from './OrRangeSlider-c1ed0ba5.js';
 export { s as OrRatingV3, R as RatingVariant } from './OrRating-7c2f8e4d.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './OrResizeablePanel-1d0c171b.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-4ec30209.js';
+export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-bee899e4.js';
 export { s as OrRichTooltipV3, R as RichTooltipBehavior } from './OrRichTooltip-160af591.js';
 export { s as OrSearch } from './OrSearch-4192737e.js';
 export { s as OrSearchV3 } from './OrSearch-b7a558ef.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-e3db7652.js';
+export { s as OrSelectV3 } from './OrSelect-81d52826.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-4ab42b93.js';
 export { s as OrSidebarV3, S as SidebarPlacement } from './props-339b3fd2.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
@@ -121,7 +121,7 @@ export { s as OrSkeletonRectV3 } from './OrSkeletonRect-d0b8b2cf.js';
 export { s as OrSkeletonTextV3 } from './OrSkeletonText-5e9579c1.js';
 export { s as OrSlider } from './OrSlider-d6f94501.js';
 export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from './OrSlider-5c665987.js';
-export { s as OrSortingV3 } from './OrSorting-c946c7a3.js';
+export { s as OrSortingV3 } from './OrSorting-c26172b2.js';
 export { s as OrStatusV3, a as StatusSize, S as StatusVariant } from './OrStatus-29df22e1.js';
 export { s as OrStepper } from './OrStepper-8722709f.js';
 export { s as OrSwitch } from './OrSwitch-043fb0ba.js';
@@ -130,7 +130,7 @@ export { s as OrTab } from './OrTab-d8d4e871.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-38593e90.js';
 export { s as OrTabV3 } from './OrTab-5f903429.js';
 export { s as OrTabs } from './OrTabs-bc8c8be5.js';
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-66729e19.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-9a88aacd.js';
 export { s as OrTag } from './OrTag-68b92040.js';
 export { s as OrTagInputV3 } from './OrTagInput-e3686f04.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-f048f982.js';
@@ -141,9 +141,9 @@ export { s as OrTextV3 } from './OrText-ea114c19.js';
 export { s as OrTextarea } from './OrTextarea-b16e1a72.js';
 export { s as OrTextareaV3 } from './OrTextarea-f9cbc1c3.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-20cc3bac.js';
-export { s as OrTimeFormatV3 } from './OrTimeFormat-a9fb9afb.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-54206397.js';
-export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-8396e1ad.js';
+export { s as OrTimeFormatV3 } from './OrTimeFormat-f478f266.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-f66961ff.js';
+export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-554fe615.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-cea387eb.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-a1f907bc.js';
 export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-0f27194b.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "16.3.0-beta.4761.0",
+  "version": "16.3.0-beta.4779.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -40,7 +40,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.5.3",
-    "@onereach/styles": "^16.2.0",
+    "@onereach/styles": "^16.2.1",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",

package/src/components/or-menu-item-v3/OrMenuItem.vue

@@ -13,10 +13,19 @@
       <OrIcon v-bind="typeof icon === 'string' ? { icon } : icon" />
     </template>
 
-    <div :class="['truncate', 'w-full']">
-      <slot />
+    <div class="relative w-full">
+      <OrToolip
+        v-if="showTooltip"
+        class="absolute w-full h-full"
+        :content="textContent"
+      />
+      <div
+        ref="content"
+        :class="['truncate', 'w-full']"
+      >
+        <slot />
+      </div>
     </div>
-
     <template v-if="closeButton">
       <div :class="['grow']" />
 
@@ -33,6 +42,7 @@
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import { OrTooltipV3 as OrToolip } from '../or-tooltip-v3';
 import { MenuItem } from './styles';
 
 export default defineComponent({
@@ -41,6 +51,7 @@ export default defineComponent({
   components: {
     OrIcon,
     OrIconButton,
+    OrToolip,
   },
 
   props: {
@@ -63,6 +74,11 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+
+    open: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [
@@ -80,6 +96,7 @@ export default defineComponent({
   setup() {
     // Refs
     const root = ref<HTMLElement>();
+    const content = ref<HTMLDivElement>();
 
     // Styles
     const rootStyles = computed(() => [
@@ -88,9 +105,26 @@ export default defineComponent({
     ]);
 
     return {
+      content,
       root,
       rootStyles,
     };
   },
+
+  computed: {
+    textContent(): string {
+      if (this.open) {
+        return this.content?.innerText ?? '';
+      }
+      return '';
+    },
+
+    showTooltip(): boolean {
+      if (this.open) {
+        return this.content !== undefined && this.content.clientWidth < this.content.scrollWidth;
+      }
+      return false;
+    },
+  },
 });
 </script>

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

@@ -145,6 +145,7 @@
                 <OrMenuItem
                   v-for="(option, i) in group"
                   :key="i"
+                  :open="popoverState === 'open'"
                   :selected="proxyModelValue && proxyModelValue.includes(option.value)"
                   :disabled="option.disabled"
                 >
@@ -169,6 +170,7 @@
                   v-for="(option, i) in group"
                   :key="i"
                   :class="dropdownItemStyles"
+                  :open="popoverState === 'open'"
                   :selected="proxyModelValue === option.value"
                   :disabled="option.disabled"
                   @click.stop="selectOption(option.value)"
@@ -190,6 +192,7 @@
               <OrMenuItem
                 v-for="(option, i) in resolvedSearchOptions"
                 :key="i"
+                :open="popoverState === 'open'"
                 :selected="proxyModelValue && proxyModelValue.includes(option.value)"
                 :disabled="option.disabled"
                 @click.stop="!option.disabled && toggleOption(option.value)"
@@ -220,6 +223,7 @@
                 :class="dropdownItemStyles"
                 :selected="proxyModelValue === option.value"
                 :disabled="option.disabled"
+                :open="popoverState === 'open'"
                 @click.stop="selectOption(option.value); close()"
               >
                 <slot