@onereach/ui-components 4.6.3-beta.2791.0 → 4.6.3

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

@@ -1,11 +1,10 @@
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import { useDebounceFn, useElementHover } from '@vueuse/core';
+import { defineComponent, ref, computed, watch } 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 { usePopoverState } from '../../hooks/usePopoverState.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../../floating-ui.dom.esm-83eba816.js';
-import '@vueuse/core';
 import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheet.js';
 import '../OrBottomSheetV3/props.js';
@@ -24,10 +23,6 @@ var script = defineComponent({
     OrPopover: __vue_component__$1
   },
   props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
     text: {
       type: String,
       default: undefined
@@ -37,31 +32,51 @@ var script = defineComponent({
       default: PopoverPlacement.Bottom
     }
   },
-  emits: ['update:state', 'open', 'close'],
-  expose: ['root', 'state', 'open', 'close', 'toggle'],
-  setup(props, context) {
+  emits: ['update:state'],
+  expose: ['root', 'open', 'close'],
+  setup(props) {
     // 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]]);
-    // State
-    const {
-      state,
-      open,
-      close,
-      toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context, {
-      debounce: 250
+    // 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();
     });
+    // #endregion
     return {
       root,
+      popover,
+      popoverRoot,
       rootStyles,
       bodyStyles,
-      state,
       open,
-      close,
-      toggle
+      close
     };
   }
 });
@@ -76,18 +91,10 @@ var __vue_render__ = function () {
   var _c = _vm._self._c || _h;
   return _c('div', {
     ref: "root",
-    class: _vm.rootStyles,
-    on: {
-      "mouseenter": function ($event) {
-        return _vm.open();
-      },
-      "mouseleave": function ($event) {
-        return _vm.close();
-      }
-    }
+    class: _vm.rootStyles
   }, [_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,
@@ -96,7 +103,7 @@ var __vue_render__ = function () {
     },
     on: {
       "update:state": function ($event) {
-        _vm.state = $event;
+        return _vm.$emit('update:state', $event);
       }
     }
   }, [_c('div', {

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

@@ -2,61 +2,58 @@ import { PropType } from 'vue-demi';
 import { TooltipPlacement } from './props';
 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<TooltipPlacement>;
+        type: PropType<"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end">;
         default: TooltipPlacement;
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
-    isOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     text: {
         type: StringConstructor;
         default: undefined;
     };
     placement: {
-        type: PropType<TooltipPlacement>;
+        type: PropType<"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end">;
         default: TooltipPlacement;
     };
 }>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    isOpen: boolean;
     text: string;
-    placement: TooltipPlacement;
+    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
 } & {} & {
     [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: TooltipPlacement;
+    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    isOpen: boolean;
     text: string;
-    placement: TooltipPlacement;
+    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
 }, true>);
 export default _default;

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

@@ -1,10 +1,10 @@
 export { default as OrTooltipV3 } from './OrTooltip.js';
 export { PopoverPlacement as TooltipPlacement } from '../OrPopoverV3/props.js';
+import '@vueuse/core';
 import 'vue-demi';
 import './styles.js';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
-import '@vueuse/core';
 import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheet.js';
 import '../OrBottomSheetV3/props.js';
@@ -16,5 +16,4 @@ import 'portal-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

@@ -180,7 +180,6 @@ import './OrAvatarV3/styles.js';
 import './OrIconV3/styles.js';
 import '@vueuse/core';
 import './OrBottomSheetV3/styles.js';
-import '../hooks/usePopoverState.js';
 import './OrOverlayV3/styles.js';
 import 'portal-vue';
 import '../hooks/useElevation.js';
@@ -220,14 +219,14 @@ import './OrCombinedInputV3/styles.js';
 import '../index-968c331a.js';
 import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../OrDateTimePickerMonthSelect-0bae9283.js';
+import '../OrDateTimePickerMonthSelect-30f79990.js';
 import './OrDateTimePickerV3/hooks/useDatePlaceholder.js';
-import '../OrDateTimePickerPopoverHeader-7c87f38a.js';
+import '../OrDateTimePickerPopoverHeader-61faaa61.js';
 import './OrDatePickerV3/styles.js';
 import '../directives/dropdown-close.js';
 import '../directives/dropdown-open.js';
 import 'lodash/padStart';
-import '../OrDateTimePickerTimeSelect-3d0ef650.js';
+import '../OrDateTimePickerTimeSelect-2a5772a9.js';
 import './OrDateTimePickerV3/hooks/useTimePlaceholder.js';
 import './OrDateTimePickerV3/styles.js';
 import './OrEmptyStateV3/styles.js';

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

@@ -2,7 +2,6 @@ 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 { default as useToggle } from './useToggle';
 export { useValidationAttributes } from './useValidationAttributes';

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

@@ -2,7 +2,6 @@ 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 { default as useToggle } from './useToggle.js';
 export { useValidationAttributes } from './useValidationAttributes.js';
 export { default as useResponsive } from './useResponsive/useResponsive.js';

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

@@ -1,7 +1,8 @@
 import { ComputedRef } from 'vue-demi';
-export interface ControlAttributes {
+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,9 +14,7 @@ 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/useValidationAttributes.d.ts

@@ -1,5 +1,5 @@
 import { ComputedRef } from 'vue-demi';
-export interface ValidationAttributes {
+interface ValidationAttributes {
     required: ComputedRef<boolean | undefined>;
     minlength: ComputedRef<number | undefined>;
     maxlength: ComputedRef<number | undefined>;
@@ -9,3 +9,4 @@ export interface ValidationAttributes {
     step: ComputedRef<number | undefined>;
 }
 export declare function useValidationAttributes(): ValidationAttributes;
+export {};