@onereach/ui-components 6.1.3 → 6.1.4

package/dist/esm/v3/components/or-time-picker-v3/index.js

@@ -1,5 +1,5 @@
-export { s as OrTimePickerV3 } from '../../OrTimePicker-839da564.js';
-export { D as TimePickerFormat } from '../../OrDateTimePicker-24be33b0.js';
+export { s as OrTimePickerV3 } from '../../OrTimePicker-a3870a62.js';
+export { D as TimePickerFormat } from '../../OrDateTimePicker-738f9cd3.js';
 export { I as TimePickerSize } from '../../OrInputBox-912a6254.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
@@ -10,16 +10,16 @@ import 'lodash/get';
 import '../../useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import '../../OrDateTimePickerPopoverHeader-f2890500.js';
+import '../../OrDateTimePickerPopoverHeader-03ae7d09.js';
 import 'vue';
 import '../../OrButton-4a3c3e7b.js';
 import '../../OrLoader-b79022da.js';
 import '../../OrLabel-d4c46bb6.js';
-import '../../OrIconButton-5c4371dd.js';
+import '../../OrIconButton-a69c7775.js';
 import '../../OrIcon-62793572.js';
-import '../../OrTooltip-af24ca57.js';
+import '../../OrTooltip-5bf6890a.js';
 import '../../usePopoverState-b92c698b.js';
-import '../../OrPopover-972d594f.js';
+import '../../OrPopover-7b2af064.js';
 import '@floating-ui/dom';
 import '../../useElevation-a50ec347.js';
 import '../../useResponsive-5c8291da.js';
@@ -28,6 +28,6 @@ import '../../OrOverlay-6269c33a.js';
 import '../../OrTeleport.vue3-8099178c.js';
 import '../../useTheme-0ef25778.js';
 import '../../OrMenuItem-54062d59.js';
-import '../../OrMenu-ff970bcb.js';
+import '../../OrMenu-9a82f18f.js';
 import '../../OrError-c01d0c29.js';
 import '../../OrHint-06ab89d7.js';

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

@@ -1,4 +1,4 @@
-export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../../types-c59b23d8.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../../types-c4c1e2cc.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../../useToast-5aa9dc05.js';
 import '@vueuse/core';
 import 'vue-demi';
@@ -10,11 +10,11 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import '../../OrTeleport.vue3-8099178c.js';
 import 'vue';
-import '../../OrIconButton-5c4371dd.js';
+import '../../OrIconButton-a69c7775.js';
 import '../../OrIcon-62793572.js';
-import '../../OrTooltip-af24ca57.js';
+import '../../OrTooltip-5bf6890a.js';
 import '../../usePopoverState-b92c698b.js';
-import '../../OrPopover-972d594f.js';
+import '../../OrPopover-7b2af064.js';
 import '@floating-ui/dom';
 import '../../useResponsive-5c8291da.js';
 import '../../OrBottomSheet-efcae28c.js';

package/dist/esm/v3/components/or-toast-v3/or-toast-container-v3/index.js

@@ -1,4 +1,4 @@
-export { a as OrToastContainerV3, t as TypesV3 } from '../../../types-c59b23d8.js';
+export { a as OrToastContainerV3, t as TypesV3 } from '../../../types-c4c1e2cc.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../../../useToast-5aa9dc05.js';
 import '@vueuse/core';
 import 'vue-demi';
@@ -10,11 +10,11 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import '../../../OrTeleport.vue3-8099178c.js';
 import 'vue';
-import '../../../OrIconButton-5c4371dd.js';
+import '../../../OrIconButton-a69c7775.js';
 import '../../../OrIcon-62793572.js';
-import '../../../OrTooltip-af24ca57.js';
+import '../../../OrTooltip-5bf6890a.js';
 import '../../../usePopoverState-b92c698b.js';
-import '../../../OrPopover-972d594f.js';
+import '../../../OrPopover-7b2af064.js';
 import '@floating-ui/dom';
 import '../../../useResponsive-5c8291da.js';
 import '../../../OrBottomSheet-efcae28c.js';

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

@@ -1,5 +1,5 @@
-export { s as OrTooltipV3 } from '../../OrTooltip-af24ca57.js';
-export { P as TooltipPlacement } from '../../OrPopover-972d594f.js';
+export { s as OrTooltipV3 } from '../../OrTooltip-5bf6890a.js';
+export { P as TooltipPlacement } from '../../OrPopover-7b2af064.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../dom-aecadd9a.js';

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-9791a2b5.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-bddf72ef.js';
 export { s as OrCardV3 } from './OrCard-cc82902c.js';
 export { s as OrCheckbox } from './OrCheckbox-5666c954.js';
 export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-f80d8bc0.js';
@@ -21,19 +21,19 @@ 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-abc9471e.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-a63c3a7b.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 OrConfirm } from './OrConfirm-97ab80b9.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-19e7c8e8.js';
-export { s as OrContextMenuV3 } from './OrContextMenu-716dc892.js';
-export { s as OrMenuV3 } from './OrMenu-ff970bcb.js';
-export { P as ContextMenuPlacement, P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-972d594f.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-ebeb9f68.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-d304e9a4.js';
+export { s as OrContextMenuV3 } from './OrContextMenu-bf1e07ae.js';
+export { s as OrMenuV3 } from './OrMenu-9a82f18f.js';
+export { P as ContextMenuPlacement, P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-7b2af064.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-87aef206.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-4bfefbcd.js';
-export { D as DateTimePickerTimeFormat, s as OrDateTimePickerV3, D as TimePickerFormat } from './OrDateTimePicker-24be33b0.js';
+export { D as DateTimePickerTimeFormat, s as OrDateTimePickerV3, D as TimePickerFormat } from './OrDateTimePicker-738f9cd3.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f9.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-ade9192b.js';
@@ -45,14 +45,14 @@ export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-37f2b
 export { s as OrHint } from './OrHint-8822005b.js';
 export { s as OrHintV3 } from './OrHint-06ab89d7.js';
 export { s as OrIcon, O as OrIconColors, a as OrIconType } from './OrIcon-f7130a5c.js';
-export { I as IconButtonColor, s as OrIconButtonV3 } from './OrIconButton-5c4371dd.js';
+export { I as IconButtonColor, s as OrIconButtonV3 } from './OrIconButton-a69c7775.js';
 export { I as IconButtonSize, I as IconSize, a as IconVariant, s as OrIconV3 } from './OrIcon-62793572.js';
 export { I as InlineInputBoxSize, I as InlineInputSize, s as OrInlineInputBoxV3 } from './OrInlineInputBox-01fb2cb2.js';
-export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-bea03180.js';
+export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-246d88ca.js';
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-a3c4c7dc.js';
-export { s as OrInlineTextareaV3 } from './OrInlineTextarea-df7b8b6a.js';
+export { s as OrInlineTextareaV3 } from './OrInlineTextarea-c9febb84.js';
 export { s as OrInput } from './OrInput-2c3111c2.js';
-export { I as InputType, s as OrInputV3 } from './OrInput-1eb88296.js';
+export { I as InputType, s as OrInputV3 } from './OrInput-e12b0489.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';
@@ -62,14 +62,14 @@ export { L as LoaderViews, s as OrLoader } from './OrLoader-d28a8ebf.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-b79022da.js';
 export { s as OrMenuItemV3 } from './OrMenuItem-54062d59.js';
 export { s as OrModal, O as OrModalSizes } from './OrModal-b2060770.js';
-export { M as ModalSize, s as OrModalV3 } from './OrModal-1b83e7d3.js';
+export { M as ModalSize, s as OrModalV3 } from './OrModal-fc3bb76e.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from './OrNotification-1b28dd4a.js';
-export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotification-873d8c57.js';
+export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotification-c8cd9f3d.js';
 export { s as OrNumberInput } from './OrNumberInput-e9dcdcbd.js';
 export { s as OrOverflowMenu } from './OrOverflowMenu-440ddf3e.js';
 export { s as OrOverlay } from './OrOverlay-451dce49.js';
 export { s as OrOverlayV3 } from './OrOverlay-6269c33a.js';
-export { s as OrPaginationV3 } from './OrPagination-3f37f40e.js';
+export { s as OrPaginationV3 } from './OrPagination-cc0b041a.js';
 export { s as OrPassword } from './OrPassword-4494ac89.js';
 export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './OrProgress-aa2ea84b.js';
 export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-73b41ba4.js';
@@ -78,13 +78,13 @@ 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 { s as OrSearch } from './OrSearch-2800e9bf.js';
-export { s as OrSearchV3 } from './OrSearch-e68d4be3.js';
+export { s as OrSearchV3 } from './OrSearch-bc259374.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-bb5ca541.js';
+export { s as OrSelectV3 } from './OrSelect-a7d3c84d.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
-export { s as OrSidebarV3 } from './OrSidebar-4db54e71.js';
-export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-493b4fb0.js';
+export { s as OrSidebarV3 } from './OrSidebar-8837a93e.js';
+export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-f44951ac.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
 export { s as OrSkeletonRect } from './OrSkeletonRect-c694574e.js';
 export { s as OrSkeletonText } from './OrSkeletonText-9a800de4.js';
@@ -93,7 +93,7 @@ export { s as OrSkeletonCircleV3 } from './OrSkeletonCircle-1eae069b.js';
 export { s as OrSkeletonRectV3 } from './OrSkeletonRect-ba5df861.js';
 export { s as OrSkeletonTextV3 } from './OrSkeletonText-3c3207d0.js';
 export { s as OrSlider } from './OrSlider-b7bd588e.js';
-export { s as OrSortingV3 } from './OrSorting-852633b5.js';
+export { s as OrSortingV3 } from './OrSorting-6baec1ab.js';
 export { s as OrStepper } from './OrStepper-4943002c.js';
 export { s as OrSwitch } from './OrSwitch-fb864132.js';
 export { s as OrSwitchV3 } from './OrSwitch-1ac1bfcd.js';
@@ -101,25 +101,25 @@ export { s as OrTab } from './OrTab-d8d4e871.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-c2af7ca3.js';
 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-60e18180.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-2ab1aefa.js';
 export { s as OrTag } from './OrTag-1b3b1296.js';
-export { s as OrTagInputV3 } from './OrTagInput-6decbf5e.js';
-export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-91a545db.js';
-export { s as OrTagsV3, T as TagsOverflow } from './OrTags-641804a0.js';
+export { s as OrTagInputV3 } from './OrTagInput-ccb72239.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-2a3d7293.js';
+export { s as OrTagsV3, T as TagsOverflow } from './OrTags-69e90412.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 OrTextbox, T as TextboxTypes } from './OrTextbox-cb6762c8.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-839da564.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-a3870a62.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-c59b23d8.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-c4c1e2cc.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-5aa9dc05.js';
 export { s as OrTooltip } from './OrTooltip-7ac03028.js';
 export { s as OrTooltipContent } from './OrTooltipContent-c0042844.js';
-export { s as OrTooltipV3 } from './OrTooltip-af24ca57.js';
+export { s as OrTooltipV3 } from './OrTooltip-5bf6890a.js';
 export { s as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-a0e57f4e.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
@@ -152,7 +152,7 @@ import '@codemirror/language';
 import '@lezer/highlight';
 import '@vueuse/math';
 import '@floating-ui/dom';
-import './OrDateTimePickerPopoverHeader-f2890500.js';
+import './OrDateTimePickerPopoverHeader-03ae7d09.js';
 import 'lodash/padStart';
 import 'lodash/cloneDeep';
 import 'lodash/isEqual';

package/dist/esm/v3/{types-c59b23d8.js → types-c4c1e2cc.js}

@@ -6,7 +6,7 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { s as script$4 } from './OrTeleport.vue3-8099178c.js';
 import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-5aa9dc05.js';
-import { s as script$2 } from './OrIconButton-5c4371dd.js';
+import { s as script$2 } from './OrIconButton-a69c7775.js';
 import { s as script$3 } from './OrLoader-b79022da.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, createElementVNode, toDisplayString, createBlock, withModifiers, withCtx, TransitionGroup, Fragment, renderList, mergeProps } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "6.1.3",
+  "version": "6.1.4",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -38,7 +38,7 @@
     "@codemirror/lang-javascript": "6.1.8",
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
-    "@floating-ui/dom": "0.3.1",
+    "@floating-ui/dom": "1.4.2",
     "@onereach/styles": "^4.0.0",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",
@@ -157,5 +157,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "2164ddd09eaac447fa6f6efb9d442e6b7e28af5c"
+  "gitHead": "01a78f3689604f2071254d6207404ea28d89c1d6"
 }

package/src/components/or-popover-v3/OrPopover.vue

@@ -9,6 +9,7 @@
         <div
           ref="root"
           v-bind="$attrs"
+          :style="floatingStyles"
           :class="rootStyles"
         >
           <template v-if="disableDefaultStyles">
@@ -38,15 +39,15 @@
 </template>
 
 <script lang="ts">
-import { ReferenceElement, autoUpdate, computePosition, flip, hide, offset, shift } from '@floating-ui/dom';
+import { ReferenceElement, autoUpdate, size, flip, hide, offset as offsetMiddleware, shift } from '@floating-ui/dom';
 import { MaybeElementRef, onClickOutside } from '@vueuse/core';
-import { PropType, computed, defineComponent, ref, toRef, unref, watchPostEffect } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRef, toRefs } from 'vue-demi';
 import { useElevation, usePopoverState, useResponsive } from '../../hooks';
-import { requestAF } from '../../utils/functions/dom';
 import { OrBottomSheetV3 as OrBottomSheet } from '../or-bottom-sheet-v3';
 import { OrTeleportV3 as OrTeleport } from '../or-teleport-v3';
 import { PopoverOffset, PopoverPlacement, PopoverVariant } from './props';
 import { Popover, PopoverBody, PopoverBodyPlacements } from './styles';
+import { useFloating } from './hooks/useFloating';
 
 export default defineComponent({
   components: {
@@ -131,6 +132,8 @@ export default defineComponent({
     const bottomSheet = ref<InstanceType<typeof OrBottomSheet>>();
     const bottomSheetRoot = computed(() => bottomSheet.value?.root);
 
+    const { trigger, placement, offset, fullWidth } = toRefs(props);
+
     // Styles
     const rootStyles = computed(() => [
       'or-popover-v3',
@@ -140,64 +143,44 @@ export default defineComponent({
 
     const bodyStyles = computed(() => [
       ...PopoverBody,
-      ...PopoverBodyPlacements[props.placement],
+      ...PopoverBodyPlacements[placement.value],
     ]);
 
     // State
     const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);
 
-    const isFlipped = ref<boolean>(false);
-    const isHidden = ref<boolean>(false);
+    const { floatingStyles, middlewareData } = useFloating(trigger, root, {
+      placement,
+      middleware: [
+        offsetMiddleware(offset.value),
+        shift(),
+        flip(),
+        hide(),
+        size({
+          apply({ rects }) {
+            if (fullWidth.value && root.value)
+              Object.assign(root.value.style, {
+                width: `${rects.reference.width}px`,
+              });
+          },
+        }),
+      ],
+      whileElementsMounted(...args) {
+        return autoUpdate(...args, { animationFrame: true });
+      },
+    });
+
+    const isFlipped = computed(() => Boolean(middlewareData.value.flip?.index));
+    const isHidden = computed(() => Boolean(middlewareData.value.hide?.referenceHidden));
 
     // Helpers
     const { isDesktop, isMobile } = useResponsive(containerRoot);
 
-    // Effects
-    watchPostEffect(() => {
-      const rootElement = unref(root);
-
-      if (rootElement) {
-        const { trigger, placement } = props;
-
-        if (trigger) {
-          autoUpdate(trigger, rootElement, async () => {
-            const { x, y, middlewareData } = await computePosition(trigger, rootElement, {
-              placement,
-
-              middleware: [
-                offset(props.offset),
-                shift(),
-                flip(),
-                hide(),
-              ],
-            });
-
-            const { width: triggerWidth } = trigger.getBoundingClientRect();
-
-            // this hack fixes the issue when popover triggers 'ResizeObserver loop limit exceeded' runtime error
-            // https://github.com/floating-ui/floating-ui/issues/1740#issuecomment-1563544849
-            requestAF(() => {
-              Object.assign(rootElement.style, {
-                left: `${x}px`,
-                top: `${y}px`,
-                visibility: middlewareData.hide!.referenceHidden ? 'hidden' : 'visible',
-                width: props.fullWidth ? `${triggerWidth}px` : '',
-              });
-            });
-            isFlipped.value = Boolean(middlewareData.flip?.index);
-            isHidden.value = Boolean(middlewareData.hide?.referenceHidden);
-          });
-        }
-      }
-    });
-
     // #region Elevation
     useElevation(root, state);
     // #endregion
 
     // #region Click Outside
-    const trigger = toRef(props, 'trigger') as MaybeElementRef;
-
     onClickOutside(root, (event) => {
       const path = event.composedPath() as Element[];
 
@@ -205,7 +188,7 @@ export default defineComponent({
         close();
       }
     }, {
-      ignore: [trigger],
+      ignore: [(trigger as MaybeElementRef)],
     });
     // #endregion
 
@@ -216,6 +199,7 @@ export default defineComponent({
       bottomSheetRoot,
       rootStyles,
       bodyStyles,
+      floatingStyles,
       state,
       isFlipped,
       isHidden,

package/src/components/or-popover-v3/hooks/types.ts

@@ -0,0 +1,97 @@
+import type {
+  FloatingElement,
+  Middleware,
+  MiddlewareData,
+  Placement,
+  ReferenceElement,
+  Strategy,
+} from '@floating-ui/dom';
+import type { ComponentPublicInstance, Ref } from 'vue-demi';
+
+export type MaybeReadonlyRef<T> = T | Readonly<Ref<T>>;
+
+export type MaybeElement<T> = T | ComponentPublicInstance | null | undefined;
+
+export type UseFloatingOptions<T extends ReferenceElement = ReferenceElement> =
+  {
+    /**
+     * Represents the open/close state of the floating element.
+     * @default true
+     */
+    open?: MaybeReadonlyRef<boolean | undefined>;
+    /**
+     * Where to place the floating element relative to its reference element.
+     * @default 'bottom'
+     */
+    placement?: MaybeReadonlyRef<Placement | undefined>;
+    /**
+     * The type of CSS position property to use.
+     * @default 'absolute'
+     */
+    strategy?: MaybeReadonlyRef<Strategy | undefined>;
+    /**
+     * These are plain objects that modify the positioning coordinates in some fashion, or provide useful data for the consumer to use.
+     * @default undefined
+     */
+    middleware?: MaybeReadonlyRef<Middleware[] | undefined>;
+    /**
+     * Whether to use `transform` instead of `top` and `left` styles to
+     * position the floating element (`floatingStyles`).
+     * @default true
+     */
+    transform?: MaybeReadonlyRef<boolean | undefined>;
+    /**
+     * Callback to handle mounting/unmounting of the elements.
+     * @default undefined
+     */
+    whileElementsMounted?: (
+      reference: T,
+      floating: FloatingElement,
+      update: () => void
+    ) => () => void;
+  };
+
+export type UseFloatingReturn = {
+  /**
+   * The x-coord of the floating element.
+   */
+  x: Readonly<Ref<number>>;
+  /**
+   * The y-coord of the floating element.
+   */
+  y: Readonly<Ref<number>>;
+  /**
+   * The stateful placement, which can be different from the initial `placement` passed as options.
+   */
+  placement: Readonly<Ref<Placement>>;
+  /**
+   * The type of CSS position property to use.
+   */
+  strategy: Readonly<Ref<Strategy>>;
+  /**
+   * Additional data from middleware.
+   */
+  middlewareData: Readonly<Ref<MiddlewareData>>;
+  /**
+   * The boolean that let you know if the floating element has been positioned.
+   */
+  isPositioned: Readonly<Ref<boolean>>;
+  /**
+   * CSS styles to apply to the floating element to position it.
+   */
+  floatingStyles: Readonly<
+  Ref<{
+    position: Strategy;
+    top: string;
+    left: string;
+    transform?: string;
+    willChange?: string;
+  }>
+  >;
+  /**
+   * The function to update floating position manually.
+   */
+  update: () => void;
+};
+
+

package/src/components/or-popover-v3/hooks/useFloating.ts

@@ -0,0 +1,159 @@
+import type { FloatingElement, MiddlewareData, ReferenceElement } from '@floating-ui/dom';
+import { computePosition } from '@floating-ui/dom';
+import { Ref, computed, getCurrentScope, onScopeDispose, ref, shallowReadonly, shallowRef, unref, watch } from 'vue-demi';
+
+import type {
+  UseFloatingOptions,
+  UseFloatingReturn,
+  MaybeElement,
+} from './types';
+
+// https://github.com/floating-ui/floating-ui/blob/master/packages/vue/src/useFloating.ts
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element next to a reference element when it is given a certain CSS positioning strategy.
+ * @param reference The reference template ref.
+ * @param floating The floating template ref.
+ * @param options The floating options.
+ * @see https://floating-ui.com/docs/vue
+ */
+
+import type { ComponentPublicInstance } from 'vue-demi';
+
+function roundByDPR(element: Element, value: number) {
+  const dpr = getDPR(element);
+  return Math.round(value * dpr) / dpr;
+}
+function getDPR(element: Element): number {
+  if (typeof window === 'undefined') {
+    return 1;
+  }
+  const win = element.ownerDocument.defaultView || window;
+  return win.devicePixelRatio || 1;
+}
+function unwrapElement<T>(element: MaybeElement<T>) {
+  return ((element as Exclude<MaybeElement<T>, T>)?.$el ?? element) as Exclude<
+  MaybeElement<T>,
+  ComponentPublicInstance
+  >;
+}
+export function useFloating<T extends ReferenceElement = ReferenceElement>(
+  reference: Readonly<Ref<MaybeElement<T>>>,
+  floating: Readonly<Ref<MaybeElement<FloatingElement>>>,
+  options: UseFloatingOptions<T> = {}
+): UseFloatingReturn {
+  const whileElementsMountedOption = options.whileElementsMounted;
+  const openOption = computed(() => unref(options.open) ?? true);
+  const middlewareOption = computed(() => unref(options.middleware));
+  const placementOption = computed(() => unref(options.placement) ?? 'bottom');
+  const strategyOption = computed(() => unref(options.strategy) ?? 'absolute');
+  const transformOption = computed(() => unref(options.transform) ?? true);
+  const referenceElement = computed(() => unwrapElement(reference.value));
+  const floatingElement = computed(() => unwrapElement(floating.value));
+  const x = ref(0);
+  const y = ref(0);
+  const strategy = ref(strategyOption.value);
+  const placement = ref(placementOption.value);
+  const middlewareData = shallowRef<MiddlewareData>({});
+  const isPositioned = ref(false);
+  const floatingStyles = computed(() => {
+    const initialStyles = {
+      position: strategy.value,
+      left: '0',
+      top: '0',
+    };
+
+    if (!floatingElement.value) {
+      return initialStyles;
+    }
+
+    const xVal = roundByDPR(floatingElement.value, x.value);
+    const yVal = roundByDPR(floatingElement.value, y.value);
+
+    if (transformOption.value) {
+      return {
+        ...initialStyles,
+        transform: `translate(${xVal}px, ${yVal}px)`,
+        ...(getDPR(floatingElement.value) >= 1.5 && { willChange: 'transform' }),
+      };
+    }
+
+    return {
+      position: strategy.value,
+      left: `${xVal}px`,
+      top: `${yVal}px`,
+    };
+  });
+
+  let whileElementsMountedCleanup: (() => void) | undefined;
+
+  function update() {
+    if (referenceElement.value == null || floatingElement.value == null) {
+      return;
+    }
+
+    computePosition(referenceElement.value, floatingElement.value, {
+      middleware: middlewareOption.value,
+      placement: placementOption.value,
+      strategy: strategyOption.value,
+    }).then((position) => {
+      x.value = position.x;
+      y.value = position.y;
+      strategy.value = position.strategy;
+      placement.value = position.placement;
+      middlewareData.value = position.middlewareData;
+      isPositioned.value = true;
+    });
+  }
+
+  function cleanup() {
+    if (typeof whileElementsMountedCleanup === 'function') {
+      whileElementsMountedCleanup();
+      whileElementsMountedCleanup = undefined;
+    }
+  }
+
+  function attach() {
+    cleanup();
+
+    if (whileElementsMountedOption === undefined) {
+      update();
+      return;
+    }
+
+    if (referenceElement.value != null && floatingElement.value != null) {
+      whileElementsMountedCleanup = whileElementsMountedOption(
+        referenceElement.value,
+        floatingElement.value,
+        update
+      );
+      return;
+    }
+  }
+
+  function reset() {
+    if (!openOption.value) {
+      isPositioned.value = false;
+    }
+  }
+
+  watch([middlewareOption, placementOption, strategyOption], update, {
+    flush: 'sync',
+  });
+  watch([referenceElement, floatingElement], attach, { flush: 'sync' });
+  watch(openOption, reset, { flush: 'sync' });
+
+  if (getCurrentScope()) {
+    onScopeDispose(cleanup);
+  }
+
+  return {
+    x: shallowReadonly(x),
+    y: shallowReadonly(y),
+    strategy: shallowReadonly(strategy),
+    placement: shallowReadonly(placement),
+    middlewareData: shallowReadonly(middlewareData),
+    isPositioned: shallowReadonly(isPositioned),
+    floatingStyles,
+    update,
+  };
+}