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

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-31a5687d.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-ac5c91e5.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-31a5687d.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-ac5c91e5.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.esm-83eba816.js';
+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 __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 { 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 offset, s as shift, f as flip, h as hide, b as size, a as autoUpdate } from '../../floating-ui.dom-d9ef0d1f.js';
 import { o as onClickOutside } from '../../index-509d77a1.js';
-import { defineComponent, ref, computed, toRef, watchPostEffect, unref } from 'vue-demi';
-import { r as requestAF } from '../../dom-bb55b42a.js';
+import { defineComponent, ref, computed, toRefs, toRef } from 'vue-demi';
 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,9 +66,15 @@ 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[props.placement]]);
+    const bodyStyles = computed(() => [...PopoverBody, ...PopoverBodyPlacements[placement.value]]);
     // State
     const {
       state,
@@ -76,62 +82,53 @@ var script = defineComponent({
       close,
       toggle
     } = usePopoverState(toRef(props, 'isOpen'), context.emit);
-    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);
+      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);
+    });
+    // Helpers
+    const {
+      isDesktop,
+      isMobile
+    } = useResponsive(containerRoot);
     // #region Elevation
     useElevation(root, state);
     // #endregion
     // #region Click Outside
-    const trigger = toRef(props, 'trigger');
     onClickOutside(root, event => {
       const path = event.composedPath();
-      if (!path.some(_ref => {
+      if (!path.some(_ref2 => {
         let {
           classList
-        } = _ref;
+        } = _ref2;
         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();
@@ -147,6 +144,7 @@ var script = defineComponent({
       bottomSheetRoot,
       rootStyles,
       bodyStyles,
+      floatingStyles,
       state,
       isFlipped,
       isHidden,
@@ -178,7 +176,8 @@ var __vue_render__ = function () {
     class: ['contents']
   }, [_vm.isDesktop && _vm.variant === 'auto' || _vm.variant === 'popover' ? [_c('div', _vm._b({
     ref: "root",
-    class: _vm.rootStyles
+    class: _vm.rootStyles,
+    style: _vm.floatingStyles
   }, '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,9 +12,16 @@ 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").Ref<boolean>;
-    isHidden: import("@vue/composition-api").Ref<boolean>;
+    isFlipped: import("@vue/composition-api").ComputedRef<boolean>;
+    isHidden: import("@vue/composition-api").ComputedRef<boolean>;
     isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
     isMobile: import("@vue/composition-api").ComputedRef<boolean>;
     open: () => void;
@@ -123,9 +130,16 @@ 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").Ref<boolean>;
-    isHidden: import("@vue/composition-api").Ref<boolean>;
+    isFlipped: import("@vue/composition-api").ComputedRef<boolean>;
+    isHidden: import("@vue/composition-api").ComputedRef<boolean>;
     isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
     isMobile: import("@vue/composition-api").ComputedRef<boolean>;
     open: () => void;

package/dist/bundled/v2/components/OrPopoverV3/hooks/types.d.ts

@@ -0,0 +1,77 @@
+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/dist/bundled/v2/components/OrPopoverV3/hooks/types.js

@@ -0,0 +1 @@
+

package/dist/bundled/v2/components/OrPopoverV3/hooks/useFloating.d.ts

@@ -0,0 +1,4 @@
+import type { FloatingElement, ReferenceElement } from '@floating-ui/dom';
+import { Ref } from 'vue-demi';
+import type { UseFloatingOptions, UseFloatingReturn, MaybeElement } from './types';
+export declare function useFloating<T extends ReferenceElement = ReferenceElement>(reference: Readonly<Ref<MaybeElement<T>>>, floating: Readonly<Ref<MaybeElement<FloatingElement>>>, options?: UseFloatingOptions<T>): UseFloatingReturn;

package/dist/bundled/v2/components/OrPopoverV3/hooks/useFloating.js

@@ -0,0 +1,137 @@
+import { c as computePosition } from '../../../floating-ui.dom-d9ef0d1f.js';
+import { computed, unref, ref, shallowRef, watch, getCurrentScope, onScopeDispose, shallowReadonly } from 'vue-demi';
+
+function roundByDPR(element, value) {
+  const dpr = getDPR(element);
+  return Math.round(value * dpr) / dpr;
+}
+function getDPR(element) {
+  if (typeof window === 'undefined') {
+    return 1;
+  }
+  const win = element.ownerDocument.defaultView || window;
+  return win.devicePixelRatio || 1;
+}
+function unwrapElement(element) {
+  var _a;
+  return (_a = element === null || element === void 0 ? void 0 : element.$el) !== null && _a !== void 0 ? _a : element;
+}
+function useFloating(reference, floating) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const whileElementsMountedOption = options.whileElementsMounted;
+  const openOption = computed(() => {
+    var _a;
+    return (_a = unref(options.open)) !== null && _a !== void 0 ? _a : true;
+  });
+  const middlewareOption = computed(() => unref(options.middleware));
+  const placementOption = computed(() => {
+    var _a;
+    return (_a = unref(options.placement)) !== null && _a !== void 0 ? _a : 'bottom';
+  });
+  const strategyOption = computed(() => {
+    var _a;
+    return (_a = unref(options.strategy)) !== null && _a !== void 0 ? _a : 'absolute';
+  });
+  const transformOption = computed(() => {
+    var _a;
+    return (_a = unref(options.transform)) !== null && _a !== void 0 ? _a : 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({});
+  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;
+  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
+  };
+}
+
+export { useFloating };

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

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