@onereach/ui-components 6.1.3-beta.3263.0 → 6.1.3

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-ac5c91e5.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-31a5687d.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-2c7e113b.js';
 import { DatePicker, DatePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from './hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-ac5c91e5.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-31a5687d.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-2c7e113b.js';
 import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-7fd83e23.js';
 import { DateTimePickerTimeFormat } from './props.js';

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

@@ -1,5 +1,5 @@
 import { defineComponent, ref, nextTick } from 'vue-demi';
-import { a as autoUpdate, c as computePosition, o as offset, h as hide, f as flip, s as shift } from '../../floating-ui.dom-d9ef0d1f.js';
+import { a as autoUpdate, c as computePosition, o as offset, h as hide, f as flip, s as shift } from '../../floating-ui.dom.esm-83eba816.js';
 import __vue_component__$1 from '../OrTeleport/OrTeleport.js';
 import { OrFloatingPlacements, OrFloatingHideStrategy } from './constants.js';
 import { x as getMaxZIndex, u as getCS } from '../../dom-bb55b42a.js';

package/dist/bundled/v2/components/OrPopoverV3/OrPopover.js

@@ -1,9 +1,9 @@
-import { o as offset, s as shift, f as flip, h as hide, b as size, a as autoUpdate } from '../../floating-ui.dom-d9ef0d1f.js';
+import { a as autoUpdate, c as computePosition, o as offset, s as shift, f as flip, h as hide } from '../../floating-ui.dom.esm-83eba816.js';
 import { o as onClickOutside } from '../../index-509d77a1.js';
-import { defineComponent, ref, computed, toRefs, toRef } from 'vue-demi';
+import { defineComponent, ref, computed, toRef, watchPostEffect, unref } from 'vue-demi';
+import { r as requestAF } from '../../dom-bb55b42a.js';
 import { PopoverVariant, PopoverPlacement } from './props.js';
 import { Popover, PopoverBody, PopoverBodyPlacements } from './styles.js';
-import { useFloating } from './hooks/useFloating.js';
 import __vue_component__$1 from '../OrBottomSheetV3/OrBottomSheet.js';
 import __vue_component__$2 from '../OrTeleportV3/OrTeleport.js';
 import useResponsive from '../../hooks/useResponsive/useResponsive.js';
@@ -66,15 +66,9 @@ var script = defineComponent({
       var _a;
       return (_a = bottomSheet.value) === null || _a === void 0 ? void 0 : _a.root;
     });
-    const {
-      trigger,
-      placement,
-      offset: offset$1,
-      fullWidth
-    } = toRefs(props);
     // Styles
     const rootStyles = computed(() => ['or-popover-v3', ...Popover, ...props.customStyles]);
-    const bodyStyles = computed(() => [...PopoverBody, ...PopoverBodyPlacements[placement.value]]);
+    const bodyStyles = computed(() => [...PopoverBody, ...PopoverBodyPlacements[props.placement]]);
     // State
     const {
       state,
@@ -82,53 +76,62 @@ var script = defineComponent({
       close,
       toggle
     } = usePopoverState(toRef(props, 'isOpen'), context.emit);
-    const {
-      floatingStyles,
-      middlewareData
-    } = useFloating(trigger, root, {
-      placement,
-      middleware: [offset(offset$1.value), shift(), flip(), hide(), size({
-        apply(_ref) {
-          let {
-            rects
-          } = _ref;
-          if (fullWidth.value && root.value) Object.assign(root.value.style, {
-            width: `${rects.reference.width}px`
-          });
-        }
-      })],
-      whileElementsMounted() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-        return autoUpdate(...args, {
-          animationFrame: true
-        });
-      }
-    });
-    const isFlipped = computed(() => {
-      var _a;
-      return Boolean((_a = middlewareData.value.flip) === null || _a === void 0 ? void 0 : _a.index);
-    });
-    const isHidden = computed(() => {
-      var _a;
-      return Boolean((_a = middlewareData.value.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden);
-    });
+    const isFlipped = ref(false);
+    const isHidden = ref(false);
     // Helpers
     const {
       isDesktop,
       isMobile
     } = useResponsive(containerRoot);
+    // Effects
+    watchPostEffect(() => {
+      const rootElement = unref(root);
+      if (rootElement) {
+        const {
+          trigger,
+          placement
+        } = props;
+        if (trigger) {
+          autoUpdate(trigger, rootElement, async () => {
+            var _a, _b;
+            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((_a = middlewareData.flip) === null || _a === void 0 ? void 0 : _a.index);
+            isHidden.value = Boolean((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden);
+          });
+        }
+      }
+    });
     // #region Elevation
     useElevation(root, state);
     // #endregion
     // #region Click Outside
+    const trigger = toRef(props, 'trigger');
     onClickOutside(root, event => {
       const path = event.composedPath();
-      if (!path.some(_ref2 => {
+      if (!path.some(_ref => {
         let {
           classList
-        } = _ref2;
+        } = _ref;
         return (classList === null || classList === void 0 ? void 0 : classList.contains('or-popover-v3')) || (classList === null || classList === void 0 ? void 0 : classList.contains('or-bottom-sheet-v3'));
       })) {
         close();
@@ -144,7 +147,6 @@ var script = defineComponent({
       bottomSheetRoot,
       rootStyles,
       bodyStyles,
-      floatingStyles,
       state,
       isFlipped,
       isHidden,
@@ -176,8 +178,7 @@ var __vue_render__ = function () {
     class: ['contents']
   }, [_vm.isDesktop && _vm.variant === 'auto' || _vm.variant === 'popover' ? [_c('div', _vm._b({
     ref: "root",
-    class: _vm.rootStyles,
-    style: _vm.floatingStyles
+    class: _vm.rootStyles
   }, 'div', _vm.$attrs, false), [_vm.disableDefaultStyles ? [_vm._t("default")] : [_c('div', {
     class: _vm.bodyStyles
   }, [_vm._t("default")], 2)]], 2)] : _vm._e(), _vm._v(" "), _vm.isMobile && _vm.variant === 'auto' || _vm.variant === 'bottom-sheet' ? [_c('OrBottomSheet', _vm._b({

package/dist/bundled/v2/components/OrPopoverV3/OrPopover.vue.d.ts

@@ -12,16 +12,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     bottomSheetRoot: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     bodyStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    floatingStyles: Readonly<import("@vue/composition-api").Ref<{
-        position: import("@floating-ui/dom").Strategy;
-        top: string;
-        left: string;
-        transform?: string | undefined;
-        willChange?: string | undefined;
-    }>>;
     state: import("@vue/composition-api").Ref<"open" | "closed">;
-    isFlipped: import("@vue/composition-api").ComputedRef<boolean>;
-    isHidden: import("@vue/composition-api").ComputedRef<boolean>;
+    isFlipped: import("@vue/composition-api").Ref<boolean>;
+    isHidden: import("@vue/composition-api").Ref<boolean>;
     isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
     isMobile: import("@vue/composition-api").ComputedRef<boolean>;
     open: () => void;
@@ -130,16 +123,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     bottomSheetRoot: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     bodyStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    floatingStyles: Readonly<import("@vue/composition-api").Ref<{
-        position: import("@floating-ui/dom").Strategy;
-        top: string;
-        left: string;
-        transform?: string | undefined;
-        willChange?: string | undefined;
-    }>>;
     state: import("@vue/composition-api").Ref<"open" | "closed">;
-    isFlipped: import("@vue/composition-api").ComputedRef<boolean>;
-    isHidden: import("@vue/composition-api").ComputedRef<boolean>;
+    isFlipped: import("@vue/composition-api").Ref<boolean>;
+    isHidden: import("@vue/composition-api").Ref<boolean>;
     isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
     isMobile: import("@vue/composition-api").ComputedRef<boolean>;
     open: () => void;

package/dist/bundled/v2/components/OrSortingV3/OrSorting.js

@@ -92,11 +92,7 @@ var __vue_render__ = function () {
     ref: "sortMenu",
     attrs: {
       "trigger": _vm.sortButton && _vm.sortButton.root,
-      "placement": "bottom-start",
-      "offset": {
-        mainAxis: 0,
-        crossAxis: -8
-      }
+      "placement": "bottom-start"
     }
   }, _vm._l(_vm.options, function (item) {
     return _c('OrMenuItem', {