@onereach/ui-components 4.7.0-beta.2802.0 → 4.7.0-beta.2811.0

package/dist/bundled/v2/components/OrTabsV3/OrTabs.js

@@ -1,4 +1,4 @@
-import { f as useResizeObserver } from '../../index-2ae26715.js';
+import { f as useResizeObserver } from '../../index-6d94f832.js';
 import { defineComponent, ref, computed, reactive, watch, nextTick, onMounted } from 'vue-demi';
 import { TabsVariant } from './props.js';
 import { TabsRoot, TabsRootVariants, TabsContainer } from './styles.js';
@@ -7,7 +7,7 @@ import __vue_component__$2 from '../OrMenuV3/OrMenu.js';
 import __vue_component__$3 from '../OrMenuItemV3/OrMenuItem.js';
 import __vue_component__$4 from '../OrTabV3/OrTab.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-import '../../index-cbe0a12b.js';
+import '../../index-8a1b5b9c.js';
 import '../OrIconV3/props.js';
 import '../OrIconV3/styles.js';
 import '../OrMenuV3/styles.js';
@@ -24,6 +24,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrMenuItemV3/styles.js';
 import '../OrTabV3/styles.js';

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

@@ -1,7 +1,7 @@
 export { default as OrTabsV3 } from './OrTabs.js';
 export { TabsVariant } from './props.js';
-import '../../index-2ae26715.js';
-import '../../index-cbe0a12b.js';
+import '../../index-6d94f832.js';
+import '../../index-8a1b5b9c.js';
 import 'vue-demi';
 import './styles.js';
 import '../OrIconV3/OrIcon.js';
@@ -23,6 +23,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../OrMenuItemV3/styles.js';

package/dist/bundled/v2/components/OrTagV3/OrTag.js

@@ -9,11 +9,11 @@ import '../OrIconButtonV3/styles.js';
 import '../OrIconV3/OrIcon.js';
 import '../OrIconV3/styles.js';
 import '../OrTooltipV3/OrTooltip.js';
-import '../../index-2ae26715.js';
-import '../../index-cbe0a12b.js';
 import '../OrTooltipV3/styles.js';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
+import '../../index-6d94f832.js';
+import '../../index-8a1b5b9c.js';
 import '../OrPopoverV3/props.js';
 import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheet.js';
@@ -25,6 +25,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 
 var script = defineComponent({

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

@@ -10,11 +10,11 @@ import '../OrIconV3/OrIcon.js';
 import '../OrIconV3/styles.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../OrTooltipV3/OrTooltip.js';
-import '../../index-2ae26715.js';
-import '../../index-cbe0a12b.js';
 import '../OrTooltipV3/styles.js';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
+import '../../index-6d94f832.js';
+import '../../index-8a1b5b9c.js';
 import '../OrPopoverV3/props.js';
 import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheet.js';
@@ -26,4 +26,5 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';

package/dist/bundled/v2/components/OrTagsV3/OrTags.js

@@ -8,8 +8,8 @@ import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
 import '../OrLoaderV3/OrLoader.js';
-import '../../index-2ae26715.js';
-import '../../index-cbe0a12b.js';
+import '../../index-6d94f832.js';
+import '../../index-8a1b5b9c.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
 import '../../floating-ui.dom.esm-83eba816.js';
@@ -24,6 +24,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrTagV3/props.js';
 import '../OrTagV3/styles.js';

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

@@ -5,8 +5,8 @@ import '../OrButtonV3/OrButton.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
 import '../OrLoaderV3/OrLoader.js';
-import '../../index-2ae26715.js';
-import '../../index-cbe0a12b.js';
+import '../../index-6d94f832.js';
+import '../../index-8a1b5b9c.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
 import '../../normalize-component-6e8e3d80.js';
@@ -23,6 +23,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrTagV3/OrTag.js';
 import '../OrTagV3/props.js';

package/dist/bundled/v2/components/OrTimePickerV3/OrTimePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-1b577856.js';
-import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-82ededab.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-bc0df38f.js';
+import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-e284797b.js';
 import { TimePicker, TimePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
@@ -18,8 +18,8 @@ import '../OrButtonV3/OrButton.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
 import '../OrLoaderV3/OrLoader.js';
-import '../../index-2ae26715.js';
-import '../../index-cbe0a12b.js';
+import '../../index-6d94f832.js';
+import '../../index-8a1b5b9c.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
 import '../OrDateTimePickerV3/hooks/useTimePlaceholder.js';
@@ -32,6 +32,7 @@ import '../OrIconButtonV3/styles.js';
 import '../OrTooltipV3/OrTooltip.js';
 import '../OrTooltipV3/styles.js';
 import '../OrPopoverV3/props.js';
+import '../../hooks/usePopoverState.js';
 import '../OrInputBoxV3/styles.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
@@ -307,7 +308,7 @@ var __vue_render__ = function () {
       "placement": 'bottom-start'
     },
     on: {
-      "update:state:closed-automatically": function ($event) {
+      "close": function ($event) {
         return _vm.reset();
       }
     }

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

@@ -2,7 +2,7 @@ export { default as OrTimePickerV3 } from './OrTimePicker.js';
 export { InputBoxSize as TimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../../OrDateTimePickerPopoverHeader-1b577856.js';
+import '../../OrDateTimePickerPopoverHeader-bc0df38f.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
@@ -11,11 +11,11 @@ import '../OrButtonV3/OrButton.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
 import '../OrLoaderV3/OrLoader.js';
-import '../../index-2ae26715.js';
-import '../../index-cbe0a12b.js';
+import '../../index-6d94f832.js';
+import '../../index-8a1b5b9c.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
-import '../../OrDateTimePickerTimeSelect-82ededab.js';
+import '../../OrDateTimePickerTimeSelect-e284797b.js';
 import '../OrDateTimePickerV3/hooks/useTimePlaceholder.js';
 import './styles.js';
 import '../OrErrorV3/OrError.js';
@@ -43,6 +43,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrInputBoxV3/OrInputBox.js';
 import '../OrInputBoxV3/styles.js';

package/dist/bundled/v2/components/OrToast/Timer.js

@@ -1,4 +1,4 @@
-import { n as noop } from '../../index-cbe0a12b.js';
+import { n as noop } from '../../index-8a1b5b9c.js';
 import 'vue-demi';
 
 class Timer {

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

@@ -1,8 +1,8 @@
 export { default as useToast } from './useToast.js';
 export { default as useQueue } from './useQueue.js';
 import '../Timer.js';
-import '../../../index-cbe0a12b.js';
+import '../../../index-8a1b5b9c.js';
 import 'vue-demi';
 import './useToastEventBus.js';
-import '../../../index-2ae26715.js';
+import '../../../index-6d94f832.js';
 import '../constants.js';

package/dist/bundled/v2/components/OrToast/composable/useToast.js

@@ -1,9 +1,9 @@
 import Timer from '../Timer.js';
 import useToastEventBus from './useToastEventBus.js';
 import { ToastType } from '../constants.js';
-import '../../../index-cbe0a12b.js';
+import '../../../index-8a1b5b9c.js';
 import 'vue-demi';
-import '../../../index-2ae26715.js';
+import '../../../index-6d94f832.js';
 
 function useToast() {
   let globalToastProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/dist/bundled/v2/components/OrToast/composable/useToastEventBus.js

@@ -1,5 +1,5 @@
-import { m as useEventBus } from '../../../index-2ae26715.js';
-import { c as createSharedComposable } from '../../../index-cbe0a12b.js';
+import { m as useEventBus } from '../../../index-6d94f832.js';
+import { c as createSharedComposable } from '../../../index-8a1b5b9c.js';
 import 'vue-demi';
 
 const useToastEventBus = () => {

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

@@ -33,6 +33,6 @@ import '../OrLoader/OrLoader.js';
 import '../../utils/isEmpty.js';
 import '../OrLoader/constants.js';
 import './composable/useToastEventBus.js';
-import '../../index-2ae26715.js';
-import '../../index-cbe0a12b.js';
+import '../../index-6d94f832.js';
+import '../../index-8a1b5b9c.js';
 import './Timer.js';

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

@@ -4,7 +4,7 @@ import { defineComponent, nextTick } from 'vue-demi';
 import useQueue from '../OrToast/composable/useQueue.js';
 import useToastEventBus from '../OrToast/composable/useToastEventBus.js';
 import { PositionsX, PositionsY, TransitionType } from '../OrToast/constants.js';
-import { u as useToggle } from '../../index-cbe0a12b.js';
+import { u as useToggle } from '../../index-8a1b5b9c.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrProgress/OrProgress.js';
@@ -32,7 +32,7 @@ import '../../utils/isEmpty.js';
 import '../OrLoader/constants.js';
 import 'vue';
 import '../OrTeleport/constants.js';
-import '../../index-2ae26715.js';
+import '../../index-6d94f832.js';
 
 var script = defineComponent({
   name: 'OrToastContainer',

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

@@ -33,6 +33,6 @@ import '../OrLoader/OrLoader.js';
 import '../../utils/isEmpty.js';
 import '../OrLoader/constants.js';
 import '../OrToast/composable/useToastEventBus.js';
-import '../../index-2ae26715.js';
-import '../../index-cbe0a12b.js';
+import '../../index-6d94f832.js';
+import '../../index-8a1b5b9c.js';
 import '../OrToast/Timer.js';

package/dist/bundled/v2/components/OrToastContainerV3/OrToastContainer.js

@@ -6,10 +6,10 @@ import { P as PositionsX, a as PositionsY, T as TransitionType } from '../../pro
 import { ToastContainer, ToastContainerPositions } from '../OrToastV3/styles.js';
 import __vue_component__$1 from '../OrTeleportV3/OrTeleport.js';
 import { useElevation } from '../../hooks/useElevation.js';
-import { u as useToggle } from '../../index-cbe0a12b.js';
+import { u as useToggle } from '../../index-8a1b5b9c.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-import '../../index-2ae26715.js';
+import '../../index-6d94f832.js';
 import '../OrIconButtonV3/OrIconButton.js';
 import '../OrIconButtonV3/props.js';
 import '../OrIconV3/props.js';
@@ -27,6 +27,7 @@ import '../OrBottomSheetV3/props.js';
 import '../OrBottomSheetV3/styles.js';
 import '../OrOverlayV3/OrOverlay.js';
 import '../OrOverlayV3/styles.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrLoaderV3/OrLoader.js';
 import '../OrLoaderV3/props.js';

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

@@ -5,8 +5,8 @@ export { default as useToastV3 } from '../OrToastV3/composable/useToast.js';
 export { default as useQueueV3 } from '../OrToastV3/composable/useQueue.js';
 import 'vue-demi';
 import '../OrToastV3/composable/useToastEventBus.js';
-import '../../index-2ae26715.js';
-import '../../index-cbe0a12b.js';
+import '../../index-6d94f832.js';
+import '../../index-8a1b5b9c.js';
 import '../OrToastV3/OrToast.js';
 import '../OrToastV3/styles.js';
 import '../OrIconButtonV3/OrIconButton.js';
@@ -31,6 +31,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrLoaderV3/OrLoader.js';
 import '../OrLoaderV3/props.js';

package/dist/bundled/v2/components/OrToastV3/OrToast.js

@@ -11,11 +11,11 @@ import '../OrIconButtonV3/styles.js';
 import '../OrIconV3/OrIcon.js';
 import '../OrIconV3/styles.js';
 import '../OrTooltipV3/OrTooltip.js';
-import '../../index-2ae26715.js';
-import '../../index-cbe0a12b.js';
 import '../OrTooltipV3/styles.js';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
+import '../../index-6d94f832.js';
+import '../../index-8a1b5b9c.js';
 import '../OrPopoverV3/props.js';
 import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheet.js';
@@ -27,6 +27,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';

package/dist/bundled/v2/components/OrToastV3/Timer.js

@@ -1,4 +1,4 @@
-import { n as noop } from '../../index-cbe0a12b.js';
+import { n as noop } from '../../index-8a1b5b9c.js';
 import 'vue-demi';
 
 class Timer {

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

@@ -2,7 +2,7 @@ export { default as useToastV3 } from './useToast.js';
 export { default as useQueueV3 } from './useQueue.js';
 import '../../../props-7be029c7.js';
 import '../Timer.js';
-import '../../../index-cbe0a12b.js';
+import '../../../index-8a1b5b9c.js';
 import 'vue-demi';
 import './useToastEventBus.js';
-import '../../../index-2ae26715.js';
+import '../../../index-6d94f832.js';

package/dist/bundled/v2/components/OrToastV3/composable/useToast.js

@@ -1,9 +1,9 @@
 import { b as ToastType } from '../../../props-7be029c7.js';
 import Timer from '../Timer.js';
 import useToastEventBus from './useToastEventBus.js';
-import '../../../index-cbe0a12b.js';
+import '../../../index-8a1b5b9c.js';
 import 'vue-demi';
-import '../../../index-2ae26715.js';
+import '../../../index-6d94f832.js';
 
 function useToast() {
   let globalToastProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/dist/bundled/v2/components/OrToastV3/composable/useToastEventBus.js

@@ -1,5 +1,5 @@
-import { m as useEventBus } from '../../../index-2ae26715.js';
-import { c as createSharedComposable } from '../../../index-cbe0a12b.js';
+import { m as useEventBus } from '../../../index-6d94f832.js';
+import { c as createSharedComposable } from '../../../index-8a1b5b9c.js';
 import 'vue-demi';
 
 const useToastEventBus = () => {

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

@@ -14,11 +14,11 @@ import '../OrIconV3/OrIcon.js';
 import '../OrIconV3/styles.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../OrTooltipV3/OrTooltip.js';
-import '../../index-2ae26715.js';
-import '../../index-cbe0a12b.js';
 import '../OrTooltipV3/styles.js';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
+import '../../index-6d94f832.js';
+import '../../index-8a1b5b9c.js';
 import '../OrPopoverV3/props.js';
 import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheet.js';
@@ -30,6 +30,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrLoaderV3/OrLoader.js';
 import '../OrLoaderV3/props.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-6d94f832.js';
+import '../../index-8a1b5b9c.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

@@ -2,58 +2,61 @@ import { PropType } from 'vue-demi';
 import { TooltipPlacement } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").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<{
+    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-6d94f832.js';
+import '../../index-8a1b5b9c.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';