@onereach/ui-components 4.7.0-beta.2809.0 → 4.7.0

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

@@ -8,11 +8,12 @@ import '../../floating-ui.dom.esm-83eba816.js';
 import '../OrTeleport/OrTeleport.js';
 import 'vue';
 import '../OrTeleport/constants.js';
-import '../../dom-700444b4.js';
-import '../../isObject-fe8b81fd.js';
-import '../../get-ab1b7d93.js';
-import '../../toString-f3196832.js';
-import '../../eq-95cd2573.js';
+import '../../dom-571739a2.js';
+import '../../isObject-3a5b854d.js';
+import '../../_commonjsHelpers-48a9cab9.js';
+import '../../get-73ac2f59.js';
+import '../../toString-47fa81b4.js';
+import '../../eq-fa566495.js';
 
 /**
  * Checks if `value` is `null` or `undefined`.

package/dist/bundled/v2/components/OrTooltip/OrTooltip.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
 import { OrFloatingPlacements } from '../or-floating';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<{
     trigger: import("@vue/composition-api").Ref<HTMLElement | undefined>;
 }> & {
     isShown: boolean;
@@ -59,7 +59,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: false;
         default: boolean;
     };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+}>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: boolean;
     isVisible: boolean;
     placement: OrFloatingPlacements;

package/dist/bundled/v2/components/OrTooltip/index.js

@@ -8,9 +8,10 @@ import 'vue';
 import '../OrTeleport/constants.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../OrFloating/constants.js';
-import '../../dom-700444b4.js';
-import '../../isObject-fe8b81fd.js';
-import '../../get-ab1b7d93.js';
-import '../../toString-f3196832.js';
-import '../../eq-95cd2573.js';
+import '../../dom-571739a2.js';
+import '../../isObject-3a5b854d.js';
+import '../../_commonjsHelpers-48a9cab9.js';
+import '../../get-73ac2f59.js';
+import '../../toString-47fa81b4.js';
+import '../../eq-fa566495.js';
 import '../../style-inject.es-4c6f2515.js';

package/dist/bundled/v2/components/OrTooltipV3/OrTooltip.js

@@ -1,11 +1,12 @@
-import { a as useElementHover } from '../../index-2ae26715.js';
-import { defineComponent, ref, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
 import { TooltipRoot, TooltipBody, TooltipBodyPlacements } from './styles.js';
 import __vue_component__$1 from '../OrPopoverV3/OrPopover.js';
 import { PopoverPlacement } from '../OrPopoverV3/props.js';
-import { b as useDebounceFn } from '../../index-cbe0a12b.js';
+import { usePopoverState } from '../../hooks/usePopoverState.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../../floating-ui.dom.esm-83eba816.js';
+import '../../index-c92e2839.js';
+import '../../index-ec92055d.js';
 import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheet.js';
 import '../OrBottomSheetV3/props.js';
@@ -24,6 +25,10 @@ var script = defineComponent({
     OrPopover: __vue_component__$1
   },
   props: {
+    isOpen: {
+      type: Boolean,
+      default: false
+    },
     text: {
       type: String,
       default: undefined
@@ -33,51 +38,31 @@ var script = defineComponent({
       default: PopoverPlacement.Bottom
     }
   },
-  emits: ['update:state'],
-  expose: ['root', 'open', 'close'],
-  setup(props) {
+  emits: ['update:state', 'open', 'close'],
+  expose: ['root', 'state', 'open', 'close', 'toggle'],
+  setup(props, context) {
     // Refs
     const root = ref();
-    const popover = ref();
-    const popoverRoot = computed(() => {
-      var _a;
-      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
     // Styles
     const rootStyles = computed(() => ['or-tooltip-v3', ...TooltipRoot]);
     const bodyStyles = computed(() => [...TooltipBody, ...TooltipBodyPlacements[props.placement]]);
-    // Methods
-    const open = useDebounceFn(() => {
-      if (hover.value) {
-        const popoverInstance = popover.value;
-        if (popoverInstance) {
-          popoverInstance.open();
-        }
-      }
-    }, 250);
-    const close = useDebounceFn(() => {
-      if (!hover.value) {
-        const popoverInstance = popover.value;
-        if (popoverInstance) {
-          popoverInstance.close();
-        }
-      }
-    }, 250);
-    // Effects
-    // #region Hover
-    const hover = useElementHover(root);
-    watch(hover, value => {
-      value ? open() : close();
+    // State
+    const {
+      state,
+      open,
+      close,
+      toggle
+    } = usePopoverState(toRef(props, 'isOpen'), context, {
+      debounce: 250
     });
-    // #endregion
     return {
       root,
-      popover,
-      popoverRoot,
       rootStyles,
       bodyStyles,
+      state,
       open,
-      close
+      close,
+      toggle
     };
   }
 });
@@ -92,10 +77,18 @@ var __vue_render__ = function () {
   var _c = _vm._self._c || _h;
   return _c('div', {
     ref: "root",
-    class: _vm.rootStyles
+    class: _vm.rootStyles,
+    on: {
+      "mouseenter": function ($event) {
+        return _vm.open();
+      },
+      "mouseleave": function ($event) {
+        return _vm.close();
+      }
+    }
   }, [_vm._t("default"), _vm._v(" "), _vm.text ? [_c('OrPopover', {
-    ref: "popover",
     attrs: {
+      "is-open": _vm.state === 'open',
       "variant": 'popover',
       "trigger": _vm.root,
       "placement": _vm.placement,
@@ -104,7 +97,7 @@ var __vue_render__ = function () {
     },
     on: {
       "update:state": function ($event) {
-        return _vm.$emit('update:state', $event);
+        _vm.state = $event;
       }
     }
   }, [_c('div', {

package/dist/bundled/v2/components/OrTooltipV3/OrTooltip.vue.d.ts

@@ -1,59 +1,62 @@
 import { PropType } from 'vue-demi';
 import { TooltipPlacement } from './props';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
-        [x: string]: ((...args: any[]) => any) | null;
-    } | string[], {} & {}, {
-        [x: number]: string;
-    } | {}, true> | undefined>;
-    popoverRoot: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     bodyStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    state: import("@vue/composition-api").Ref<"open" | "closed">;
     open: () => void;
     close: () => void;
+    toggle: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     text: {
         type: StringConstructor;
         default: undefined;
     };
     placement: {
-        type: PropType<"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end">;
+        type: PropType<TooltipPlacement>;
         default: TooltipPlacement;
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     text: {
         type: StringConstructor;
         default: undefined;
     };
     placement: {
-        type: PropType<"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end">;
+        type: PropType<TooltipPlacement>;
         default: TooltipPlacement;
     };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+}>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    isOpen: boolean;
     text: string;
-    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+    placement: TooltipPlacement;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
-        [x: string]: ((...args: any[]) => any) | null;
-    } | string[], {} & {}, {
-        [x: number]: string;
-    } | {}, true> | undefined>;
-    popoverRoot: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     bodyStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    state: import("@vue/composition-api").Ref<"open" | "closed">;
     open: () => void;
     close: () => void;
+    toggle: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+    isOpen: boolean;
     text: string;
-    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+    placement: TooltipPlacement;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
+    isOpen: boolean;
     text: string;
-    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+    placement: TooltipPlacement;
 }, true>);
 export default _default;

package/dist/bundled/v2/components/OrTooltipV3/index.js

@@ -1,11 +1,11 @@
 export { default as OrTooltipV3 } from './OrTooltip.js';
 export { PopoverPlacement as TooltipPlacement } from '../OrPopoverV3/props.js';
-import '../../index-2ae26715.js';
-import '../../index-cbe0a12b.js';
 import 'vue-demi';
 import './styles.js';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
+import '../../index-c92e2839.js';
+import '../../index-ec92055d.js';
 import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheet.js';
 import '../OrBottomSheetV3/props.js';
@@ -17,4 +17,5 @@ import 'vue';
 import '../../normalize-component-6e8e3d80.js';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';

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

@@ -169,20 +169,22 @@ import '../utils/functions/px-to-rem.js';
 import '../floating-ui.dom.esm-83eba816.js';
 import 'vue';
 import './OrTeleport/constants.js';
-import '../dom-700444b4.js';
-import '../isObject-fe8b81fd.js';
-import '../get-ab1b7d93.js';
-import '../toString-f3196832.js';
-import '../eq-95cd2573.js';
+import '../dom-571739a2.js';
+import '../isObject-3a5b854d.js';
+import '../_commonjsHelpers-48a9cab9.js';
+import '../get-73ac2f59.js';
+import '../toString-47fa81b4.js';
+import '../eq-fa566495.js';
 import '../utils/functions/color.js';
 import '../utils/constants/regex.js';
 import '../utils/functions/hash.js';
 import '../utils/constants/color.js';
 import './OrAvatarV3/styles.js';
 import './OrIconV3/styles.js';
-import '../index-2ae26715.js';
-import '../index-cbe0a12b.js';
+import '../index-c92e2839.js';
+import '../index-ec92055d.js';
 import './OrBottomSheetV3/styles.js';
+import '../hooks/usePopoverState.js';
 import './OrOverlayV3/styles.js';
 import '../hooks/useElevation.js';
 import '../utils/isVisible.js';
@@ -217,19 +219,19 @@ import '../lang-0fb8f78b.js';
 import './OrCode/theme.js';
 import './OrColorPicker/utils/defultPalette.js';
 import './OrCombinedInputV3/styles.js';
-import '../index-b46f18ed.js';
+import '../index-15e8c1f3.js';
 import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../OrDateTimePickerMonthSelect-d4ab2179.js';
+import '../OrDateTimePickerMonthSelect-e29d43d0.js';
 import './OrDateTimePickerV3/hooks/useDatePlaceholder.js';
-import '../OrDateTimePickerPopoverHeader-1b577856.js';
+import '../OrDateTimePickerPopoverHeader-6f78e8e7.js';
 import './OrDatePickerV3/styles.js';
 import '../directives/dropdown-close.js';
 import '../directives/dropdown-open.js';
 import '../_baseProperty-a52739e9.js';
-import '../toInteger-2fd112a9.js';
-import '../toFinite-74227610.js';
-import '../OrDateTimePickerTimeSelect-82ededab.js';
+import '../toInteger-db8a475d.js';
+import '../toFinite-021b0c50.js';
+import '../OrDateTimePickerTimeSelect-78f775d8.js';
 import './OrDateTimePickerV3/hooks/useTimePlaceholder.js';
 import './OrDateTimePickerV3/styles.js';
 import './OrEmptyStateV3/styles.js';
@@ -240,16 +242,16 @@ import './OrInlineInputBoxV3/styles.js';
 import './OrInlineInputV3/styles.js';
 import './OrInlineTextareaV3/styles.js';
 import './OrLinkV3/styles.js';
-import '../_baseIsEqual-a1cc156c.js';
-import '../isArrayLike-e46b8eac.js';
-import '../_baseAssignValue-22e630c1.js';
-import '../isEqual-44382965.js';
+import '../_baseIsEqual-82d7a339.js';
+import '../isArrayLike-acf249e3.js';
+import '../_baseAssignValue-0c6c3bcc.js';
+import '../isEqual-881b7bb5.js';
 import '../v4-cf8987a3.js';
 import './OrModalV3/styles.js';
 import './OrNotificationV3/styles.js';
 import './OrPaginationV3/styles.js';
 import '../hooks/useToggle.js';
-import '../round-f34440f4.js';
+import '../round-136c7e43.js';
 import './OrProgressV3/styles.js';
 import './OrRadioV3/styles.js';
 import './OrSegmentedControlV3/styles.js';
@@ -258,7 +260,7 @@ import './OrSelectV3/styles.js';
 import '../hooks/useOverflow.js';
 import './OrTagV3/styles.js';
 import './OrSidebarV3/styles.js';
-import '../range-6f26eda4.js';
+import '../range-c87289f7.js';
 import './OrSkeletonV3/styles.js';
 import './OrSortHeaderV3/styles.js';
 import './OrSwitchV3/styles.js';

package/dist/bundled/{v3/dom-700444b4.js → v2/dom-571739a2.js}

@@ -1,5 +1,5 @@
-import { c as _baseGetTag, b as isObjectLike_1 } from './isObject-fe8b81fd.js';
-import { d as _overArg, g as get_1 } from './get-ab1b7d93.js';
+import { c as _baseGetTag, b as isObjectLike_1 } from './isObject-3a5b854d.js';
+import { d as _overArg, g as get_1 } from './get-73ac2f59.js';
 
 var overArg = _overArg;
 

package/dist/bundled/v2/{eq-95cd2573.js → eq-fa566495.js}

@@ -1,4 +1,4 @@
-import { c as _baseGetTag, i as isObject_1 } from './isObject-fe8b81fd.js';
+import { c as _baseGetTag, i as isObject_1 } from './isObject-3a5b854d.js';
 
 var baseGetTag = _baseGetTag,
   isObject = isObject_1;

package/dist/bundled/{v3/get-ab1b7d93.js → v2/get-73ac2f59.js}

@@ -1,6 +1,6 @@
-import { i as isArray_1, t as toString_1 } from './toString-f3196832.js';
-import { d as isSymbol_1, _ as _root, i as isObject_1 } from './isObject-fe8b81fd.js';
-import { i as isFunction_1, e as eq_1 } from './eq-95cd2573.js';
+import { i as isArray_1, t as toString_1 } from './toString-47fa81b4.js';
+import { d as isSymbol_1, _ as _root, i as isObject_1 } from './isObject-3a5b854d.js';
+import { i as isFunction_1, e as eq_1 } from './eq-fa566495.js';
 
 /**
  * Creates a unary function that invokes `func` with its argument transformed.

package/dist/bundled/v2/hooks/index.d.ts

@@ -2,6 +2,8 @@ export { useControlAttributes } from './useControlAttributes';
 export { useElevation } from './useElevation';
 export { useIdAttribute } from './useIdAttribute';
 export { useOverflow } from './useOverflow';
+export { usePopoverState } from './usePopoverState';
 export { useResponsive } from './useResponsive';
+export { useTheme } from './useTheme';
 export { default as useToggle } from './useToggle';
 export { useValidationAttributes } from './useValidationAttributes';

package/dist/bundled/v2/hooks/index.js

@@ -2,10 +2,15 @@ export { useControlAttributes } from './useControlAttributes.js';
 export { useElevation } from './useElevation.js';
 export { useIdAttribute } from './useIdAttribute.js';
 export { useOverflow } from './useOverflow.js';
+export { usePopoverState } from './usePopoverState.js';
+export { useTheme } from './useTheme.js';
 export { default as useToggle } from './useToggle.js';
 export { useValidationAttributes } from './useValidationAttributes.js';
 export { default as useResponsive } from './useResponsive/useResponsive.js';
 import 'vue-demi';
 import '../utils/isVisible.js';
-import '../index-2ae26715.js';
-import '../index-cbe0a12b.js';
+import '../index-c92e2839.js';
+import '../index-ec92055d.js';
+import '../_commonjsHelpers-48a9cab9.js';
+import 'node:tty';
+import 'node:util';

package/dist/bundled/v2/hooks/useControlAttributes.d.ts

@@ -1,8 +1,7 @@
 import { ComputedRef } from 'vue-demi';
-interface ControlAttributes {
+export interface ControlAttributes {
     readonly: ComputedRef<boolean | undefined>;
     disabled: ComputedRef<boolean | undefined>;
     'force-state': ComputedRef<string | undefined>;
 }
 export declare function useControlAttributes(): ControlAttributes;
-export {};

package/dist/bundled/v2/hooks/useElevation.js

@@ -14,7 +14,9 @@ function useElevation(element, trigger) {
   // Effects
   watch([elementRef, triggerRef], _ref => {
     let [element] = _ref;
-    if (element) setElementElevation(element);
+    if (element) {
+      setElementElevation(element);
+    }
   }, {
     immediate: true
   });

package/dist/bundled/v2/hooks/useOverflow.d.ts

@@ -1,7 +1,7 @@
 import { MaybeElementRef } from '@vueuse/core';
 import { Ref } from 'vue-demi';
-export interface UseOverflowReturn {
+export interface Overflow {
     innerItems: Ref<HTMLElement[]>;
     outerItems: Ref<HTMLElement[]>;
 }
-export declare function useOverflow(container: MaybeElementRef<HTMLElement | undefined>): UseOverflowReturn;
+export declare function useOverflow(container: MaybeElementRef<HTMLElement | undefined>): Overflow;

package/dist/bundled/v2/hooks/useOverflow.js

@@ -1,6 +1,6 @@
-import { k as useMutationObserver, f as useResizeObserver } from '../index-2ae26715.js';
+import { k as useMutationObserver, f as useResizeObserver } from '../index-c92e2839.js';
 import { isRef, ref, watch } from 'vue-demi';
-import '../index-cbe0a12b.js';
+import '../index-ec92055d.js';
 
 function useOverflow(container) {
   const containerRef = isRef(container) ? container : ref(container);

package/dist/bundled/v2/hooks/usePopoverState.d.ts

@@ -0,0 +1,11 @@
+import { Ref, SetupContext } from 'vue-demi';
+export interface PopoverState {
+    state: Ref<'open' | 'closed'>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+export interface PopoverStateOptions {
+    debounce?: number;
+}
+export declare function usePopoverState(isOpen: Ref<boolean>, context: SetupContext<('update:state' | 'open' | 'close' | any)[]>, options?: PopoverStateOptions): PopoverState;

package/dist/bundled/v2/hooks/usePopoverState.js

@@ -0,0 +1,42 @@
+import { ref, watch } from 'vue-demi';
+import { r as refDebounced } from '../index-ec92055d.js';
+
+// TODO: Remove type `any` (https://github.com/microsoft/TypeScript/issues/27808)
+// TODO: Use `defineEmits` after migration to Vue 3
+function usePopoverState(isOpen, context, options) {
+  // State
+  const state = ref(isOpen.value ? 'open' : 'closed');
+  watch(isOpen, value => {
+    state.value = value ? 'open' : 'closed';
+  });
+  const debouncedState = (options === null || options === void 0 ? void 0 : options.debounce) ? refDebounced(state, options.debounce) : state;
+  watch(debouncedState, value => {
+    context.emit('update:state', value);
+    switch (value) {
+      case 'open':
+        context.emit('open');
+        break;
+      case 'closed':
+        context.emit('close');
+        break;
+    }
+  });
+  // Methods
+  function open() {
+    state.value = 'open';
+  }
+  function close() {
+    state.value = 'closed';
+  }
+  function toggle() {
+    state.value = state.value === 'open' ? 'closed' : 'open';
+  }
+  return {
+    state: debouncedState,
+    open,
+    close,
+    toggle
+  };
+}
+
+export { usePopoverState };

package/dist/bundled/v2/hooks/useResponsive/index.js

@@ -1,4 +1,4 @@
 export { default as useResponsive } from './useResponsive.js';
-import '../../index-2ae26715.js';
-import '../../index-cbe0a12b.js';
+import '../../index-c92e2839.js';
+import '../../index-ec92055d.js';
 import 'vue-demi';

package/dist/bundled/v2/hooks/useResponsive/useResponsive.js

@@ -1,6 +1,6 @@
-import { l as useMediaQuery } from '../../index-2ae26715.js';
+import { l as useMediaQuery } from '../../index-c92e2839.js';
 import { ref } from 'vue-demi';
-import '../../index-cbe0a12b.js';
+import '../../index-ec92055d.js';
 
 function useResponsive() {
   const isMobile = ref(useMediaQuery('(max-width: 767px)'));

package/dist/bundled/v2/hooks/useTheme.d.ts

@@ -0,0 +1,2 @@
+import { Config } from 'tailwindcss';
+export declare function useTheme(config?: Config): Config['theme'];