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

package/dist/esm/v2/components/or-popover-v3/hooks/types.d.ts

@@ -1,77 +0,0 @@
-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/esm/v2/components/or-popover-v3/hooks/useFloating.d.ts

@@ -1,4 +0,0 @@
-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/esm/v3/components/or-popover-v3/hooks/types.d.ts

@@ -1,77 +0,0 @@
-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/esm/v3/components/or-popover-v3/hooks/useFloating.d.ts

@@ -1,4 +0,0 @@
-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/src/components/or-popover-v3/hooks/types.ts

@@ -1,97 +0,0 @@
-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

@@ -1,159 +0,0 @@
-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,
-  };
-}

package/dist/esm/v2/{OrTextbox-9fd845dc.js → OrTextbox-866f0a9a.js}

@@ -1,10 +1,10 @@
 import { defineComponent, ref, computed, getCurrentInstance } from 'vue-demi';
 import '@vueuse/core';
+import { o as setStyle, r as requestAF, u as getCS, b as reflow, c as cancelAF } from './dom-aecadd9a.js';
+import { p as pxToRem } from './px-to-rem-0b26b83e.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { u as useToggle } from './useToggle-c04fc920.js';
-import { p as pxToRem } from './px-to-rem-0b26b83e.js';
-import { o as setStyle, r as requestAF, u as getCS, b as reflow, c as cancelAF } from './dom-aecadd9a.js';
 import { _ as __vue_component__$1 } from './OrLabel-fcceec1b.js';
 import './OrButton.vue_rollup-plugin-vue_styles.0-6f0a9dd4.js';
 import { _ as __vue_component__$2 } from './OrIconButton-257b38f2.js';

package/dist/esm/v3/{OrTextbox-c5ba816b.js → OrTextbox-cb6762c8.js}

@@ -1,10 +1,10 @@
 import { defineComponent, ref, computed, getCurrentInstance } from 'vue-demi';
 import '@vueuse/core';
+import { o as setStyle, r as requestAF, u as getCS, b as reflow, c as cancelAF } from './dom-aecadd9a.js';
+import { p as pxToRem } from './px-to-rem-0b26b83e.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { u as useToggle } from './useToggle-c04fc920.js';
-import { p as pxToRem } from './px-to-rem-0b26b83e.js';
-import { o as setStyle, r as requestAF, u as getCS, b as reflow, c as cancelAF } from './dom-aecadd9a.js';
 import { s as script$1 } from './OrLabel-a7d99df4.js';
 import './OrButton-130ad8d9.js';
 import { s as script$2 } from './OrIconButton-287bb86a.js';