@onereach/ui-components 4.6.0 → 4.6.1-beta.2760.0

package/dist/bundled/v2/components/OrConfirmV3/OrConfirm.vue.d.ts

@@ -18,7 +18,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     isInvalid: import("@vue/composition-api").ComputedRef<boolean>;
     isConfirmationButtonDisabled: import("@vue/composition-api").ComputedRef<boolean>;
     touched: import("@vue/composition-api").Ref<boolean>;
-    isActive: import("@vue/composition-api").Ref<boolean>;
+    state: import("@vue/composition-api").Ref<"open" | "closed">;
     isInputActive: import("@vue/composition-api").Ref<boolean>;
     escape: import("@vue/composition-api").ComputedRef<boolean>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -32,6 +32,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     onInputFocus: () => void;
     onInputBlur: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     titleText: {
         type: StringConstructor;
         required: false;
@@ -39,22 +43,18 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     confirmButtonText: {
         type: StringConstructor;
-        required: false;
         default: string;
     };
     cancelButtonText: {
         type: StringConstructor;
-        required: false;
         default: string;
     };
     confirmType: {
         type: PropType<ConfirmType>;
-        required: false;
         default: ConfirmType;
     };
     loading: {
         type: BooleanConstructor;
-        required: false;
         default: boolean;
     };
     disabled: {
@@ -64,30 +64,25 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     confirmationText: {
         type: StringConstructor;
-        required: false;
-        default: null;
+        default: undefined;
     };
     textConfirmationLabel: {
         type: StringConstructor;
-        required: false;
-        default: null;
+        default: undefined;
     };
     textConfirmationPlaceholder: {
         type: StringConstructor;
-        required: false;
-        default: null;
+        default: undefined;
     };
     textConfirmationError: {
         type: StringConstructor;
-        required: false;
-        default: null;
+        default: undefined;
     };
+}, import("@vue/composition-api").ExtractPropTypes<{
     isOpen: {
         type: BooleanConstructor;
-        required: false;
-        default: undefined;
+        default: boolean;
     };
-}, import("@vue/composition-api").ExtractPropTypes<{
     titleText: {
         type: StringConstructor;
         required: false;
@@ -95,22 +90,18 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     confirmButtonText: {
         type: StringConstructor;
-        required: false;
         default: string;
     };
     cancelButtonText: {
         type: StringConstructor;
-        required: false;
         default: string;
     };
     confirmType: {
         type: PropType<ConfirmType>;
-        required: false;
         default: ConfirmType;
     };
     loading: {
         type: BooleanConstructor;
-        required: false;
         default: boolean;
     };
     disabled: {
@@ -120,30 +111,22 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     confirmationText: {
         type: StringConstructor;
-        required: false;
-        default: null;
+        default: undefined;
     };
     textConfirmationLabel: {
         type: StringConstructor;
-        required: false;
-        default: null;
+        default: undefined;
     };
     textConfirmationPlaceholder: {
         type: StringConstructor;
-        required: false;
-        default: null;
+        default: undefined;
     };
     textConfirmationError: {
         type: StringConstructor;
-        required: false;
-        default: null;
-    };
-    isOpen: {
-        type: BooleanConstructor;
-        required: false;
         default: undefined;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    isOpen: boolean;
     titleText: string;
     confirmButtonText: string;
     cancelButtonText: string;
@@ -154,7 +137,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
     textConfirmationError: string;
-    isOpen: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -174,7 +156,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     isInvalid: import("@vue/composition-api").ComputedRef<boolean>;
     isConfirmationButtonDisabled: import("@vue/composition-api").ComputedRef<boolean>;
     touched: import("@vue/composition-api").Ref<boolean>;
-    isActive: import("@vue/composition-api").Ref<boolean>;
+    state: import("@vue/composition-api").Ref<"open" | "closed">;
     isInputActive: import("@vue/composition-api").Ref<boolean>;
     escape: import("@vue/composition-api").ComputedRef<boolean>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -188,6 +170,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     onInputFocus: () => void;
     onInputBlur: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+    isOpen: boolean;
     titleText: string;
     confirmButtonText: string;
     cancelButtonText: string;
@@ -198,10 +181,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
     textConfirmationError: string;
-    isOpen: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
+    isOpen: boolean;
     titleText: string;
     confirmButtonText: string;
     cancelButtonText: string;
@@ -212,6 +195,5 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
     textConfirmationError: string;
-    isOpen: boolean;
 }, true>);
 export default _default;

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

@@ -40,6 +40,7 @@ import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheet.js';
 import '../OrBottomSheetV3/props.js';
 import '../OrBottomSheetV3/styles.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrInputBoxV3/OrInputBox.js';
 import '../OrInputBoxV3/styles.js';

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-75089f80.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-7c87f38a.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-0072ef90.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-aab75fad.js';
 import { DatePicker, DatePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
@@ -24,6 +24,7 @@ import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
 import '../OrMenuV3/OrMenu.js';
 import '../OrMenuV3/styles.js';
+import '../../hooks/usePopoverState.js';
 import '../OrPopoverV3/props.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../OrMenuItemV3/styles.js';
@@ -291,7 +292,7 @@ var __vue_render__ = function () {
       "placement": 'bottom-start'
     },
     on: {
-      "update:state:closed-automatically": function ($event) {
+      "close": function ($event) {
         return _vm.reset();
       }
     }
@@ -347,7 +348,6 @@ var __vue_render__ = function () {
     },
     on: {
       "click": function ($event) {
-        $event.stopPropagation();
         return _vm.$emit('update:modelValue', undefined);
       }
     }

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

@@ -2,7 +2,7 @@ export { default as OrDatePickerV3 } from './OrDatePicker.js';
 export { InputBoxSize as DatePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-75089f80.js';
+import '../../OrDateTimePickerMonthSelect-0072ef90.js';
 import '../OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../OrButtonV3/OrButton.js';
@@ -33,12 +33,13 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'portal-vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrMenuV3/OrMenu.js';
 import '../OrMenuV3/styles.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../OrMenuItemV3/styles.js';
-import '../../OrDateTimePickerPopoverHeader-7c87f38a.js';
+import '../../OrDateTimePickerPopoverHeader-aab75fad.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,8 +1,8 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useCurrentDate } from './hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-75089f80.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-7c87f38a.js';
-import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-3d0ef650.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-0072ef90.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-aab75fad.js';
+import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-7ce94b9a.js';
 import { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
@@ -25,6 +25,7 @@ import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
 import '../OrMenuV3/OrMenu.js';
 import '../OrMenuV3/styles.js';
+import '../../hooks/usePopoverState.js';
 import '../OrPopoverV3/props.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../OrMenuItemV3/styles.js';
@@ -366,7 +367,7 @@ var __vue_render__ = function () {
       "placement": 'bottom-start'
     },
     on: {
-      "update:state:closed-automatically": function ($event) {
+      "close": function ($event) {
         return _vm.reset();
       }
     }
@@ -426,7 +427,7 @@ var __vue_render__ = function () {
       "placement": 'bottom-start'
     },
     on: {
-      "update:state:closed-automatically": function ($event) {
+      "close": function ($event) {
         return _vm.reset();
       }
     }
@@ -474,7 +475,6 @@ var __vue_render__ = function () {
     },
     on: {
       "click": function ($event) {
-        $event.stopPropagation();
         return _vm.$emit('update:modelValue', undefined);
       }
     }

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

@@ -2,7 +2,7 @@ export { default as OrDateTimePickerV3 } from './OrDateTimePicker.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import './hooks/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-75089f80.js';
+import '../../OrDateTimePickerMonthSelect-0072ef90.js';
 import './hooks/useDatePlaceholder.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../OrButtonV3/OrButton.js';
@@ -33,16 +33,17 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'portal-vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrMenuV3/OrMenu.js';
 import '../OrMenuV3/styles.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../OrMenuItemV3/styles.js';
-import '../../OrDateTimePickerPopoverHeader-7c87f38a.js';
+import '../../OrDateTimePickerPopoverHeader-aab75fad.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
-import '../../OrDateTimePickerTimeSelect-3d0ef650.js';
+import '../../OrDateTimePickerTimeSelect-7ce94b9a.js';
 import './hooks/useTimePlaceholder.js';
 import './styles.js';
 import '../OrErrorV3/OrError.js';

package/dist/bundled/v2/components/OrIconButtonV3/OrIconButton.js

@@ -6,8 +6,8 @@ import __vue_component__$2 from '../OrTooltipV3/OrTooltip.js';
 import { IconSize } from '../OrIconV3/props.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrIconV3/styles.js';
-import '@vueuse/core';
 import '../OrTooltipV3/styles.js';
+import '@vueuse/core';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
 import '../OrPopoverV3/props.js';
@@ -21,6 +21,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'portal-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/OrIconButtonV3/index.js

@@ -7,8 +7,8 @@ import '../OrIconV3/OrIcon.js';
 import '../OrIconV3/styles.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../OrTooltipV3/OrTooltip.js';
-import '@vueuse/core';
 import '../OrTooltipV3/styles.js';
+import '@vueuse/core';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
 import '../OrPopoverV3/props.js';
@@ -22,4 +22,5 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'portal-vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';

package/dist/bundled/v2/components/OrInlineInputV3/OrInlineInput.js

@@ -19,8 +19,8 @@ import '../OrIconButtonV3/styles.js';
 import '../OrIconV3/OrIcon.js';
 import '../OrIconV3/styles.js';
 import '../OrTooltipV3/OrTooltip.js';
-import '@vueuse/core';
 import '../OrTooltipV3/styles.js';
+import '@vueuse/core';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
 import '../OrPopoverV3/props.js';
@@ -34,6 +34,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'portal-vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrInlineInputBoxV3/styles.js';
 

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

@@ -15,8 +15,8 @@ import '../OrIconButtonV3/styles.js';
 import '../OrIconV3/OrIcon.js';
 import '../OrIconV3/styles.js';
 import '../OrTooltipV3/OrTooltip.js';
-import '@vueuse/core';
 import '../OrTooltipV3/styles.js';
+import '@vueuse/core';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
 import '../OrPopoverV3/props.js';
@@ -30,6 +30,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'portal-vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrInlineInputBoxV3/OrInlineInputBox.js';
 import '../OrInlineInputBoxV3/styles.js';

package/dist/bundled/v2/components/OrInlineTextareaV3/OrInlineTextarea.js

@@ -17,8 +17,8 @@ import '../OrIconButtonV3/styles.js';
 import '../OrIconV3/OrIcon.js';
 import '../OrIconV3/styles.js';
 import '../OrTooltipV3/OrTooltip.js';
-import '@vueuse/core';
 import '../OrTooltipV3/styles.js';
+import '@vueuse/core';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
 import '../OrPopoverV3/props.js';
@@ -32,6 +32,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'portal-vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrInlineInputBoxV3/props.js';
 import '../OrInlineInputBoxV3/styles.js';

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

@@ -13,8 +13,8 @@ import '../OrIconButtonV3/styles.js';
 import '../OrIconV3/OrIcon.js';
 import '../OrIconV3/styles.js';
 import '../OrTooltipV3/OrTooltip.js';
-import '@vueuse/core';
 import '../OrTooltipV3/styles.js';
+import '@vueuse/core';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
 import '../OrPopoverV3/props.js';
@@ -28,6 +28,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'portal-vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrInlineInputBoxV3/OrInlineInputBox.js';
 import '../OrInlineInputBoxV3/props.js';

package/dist/bundled/v2/components/OrInputV3/OrInput.js

@@ -22,8 +22,8 @@ import '../OrIconV3/styles.js';
 import '../OrIconButtonV3/props.js';
 import '../OrIconButtonV3/styles.js';
 import '../OrTooltipV3/OrTooltip.js';
-import '@vueuse/core';
 import '../OrTooltipV3/styles.js';
+import '@vueuse/core';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
 import '../OrPopoverV3/props.js';
@@ -37,6 +37,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'portal-vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../OrInputBoxV3/styles.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';

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

@@ -15,8 +15,8 @@ import '../OrIconButtonV3/OrIconButton.js';
 import '../OrIconButtonV3/props.js';
 import '../OrIconButtonV3/styles.js';
 import '../OrTooltipV3/OrTooltip.js';
-import '@vueuse/core';
 import '../OrTooltipV3/styles.js';
+import '@vueuse/core';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
 import '../OrPopoverV3/props.js';
@@ -30,6 +30,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'portal-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/OrMenuV3/OrMenu.js

@@ -1,6 +1,7 @@
-import { defineComponent, ref, computed } from 'vue-demi';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
 import { MenuRoot } from './styles.js';
 import __vue_component__$1 from '../OrPopoverV3/OrPopover.js';
+import { usePopoverState } from '../../hooks/usePopoverState.js';
 import { PopoverPlacement } from '../OrPopoverV3/props.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../../floating-ui.dom.esm-83eba816.js';
@@ -24,6 +25,10 @@ var script = defineComponent({
   },
   inheritAttrs: false,
   props: {
+    isOpen: {
+      type: Boolean,
+      default: false
+    },
     trigger: {
       type: HTMLElement,
       default: undefined
@@ -33,68 +38,36 @@ var script = defineComponent({
       default: PopoverPlacement.Bottom
     }
   },
-  emits: ['update:state'],
-  expose: ['root', 'state', 'isOpen', 'open', 'close', 'toggle'],
-  setup() {
+  emits: ['open', 'close'],
+  expose: ['root', '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;
-    });
-    const popoverState = computed(() => {
-      var _a;
-      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
-    });
     // Styles
     const rootStyles = computed(() => ['or-menu-v3', ...MenuRoot]);
     // State
-    const isOpen = computed(() => {
-      var _a;
-      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.isOpen;
-    });
-    // Methods
-    function open() {
-      const popoverInstance = popover.value;
-      if (popoverInstance) {
-        popoverInstance.open();
-      }
-    }
-    function close() {
-      const popoverInstance = popover.value;
-      if (popoverInstance) {
-        popoverInstance.close();
-      }
-    }
-    function toggle() {
-      isOpen.value ? close() : open();
-    }
+    const {
+      state,
+      open,
+      close,
+      toggle
+    } = usePopoverState(toRef(props, 'isOpen'), context);
     // Handlers
     function onClick(event) {
       const path = event.composedPath();
-      const classLists = path.filter(_ref => {
+      if (path.some(_ref => {
         let {
           classList
         } = _ref;
-        return !!classList;
-      }).map(_ref2 => {
-        let {
-          classList
-        } = _ref2;
-        return classList;
-      });
-      if (classLists.some(classList => classList.contains('or-menu-item-v3'))) {
+        return classList === null || classList === void 0 ? void 0 : classList.contains('or-menu-item-v3');
+      })) {
         close();
       }
     }
     return {
       root,
-      popover,
-      popoverRoot,
-      state: popoverState,
       rootStyles,
-      isOpen,
+      state,
       open,
       close,
       toggle,
@@ -112,8 +85,8 @@ var __vue_render__ = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c('OrPopover', {
-    ref: "popover",
     attrs: {
+      "is-open": _vm.state === 'open',
       "variant": 'auto',
       "trigger": _vm.trigger,
       "placement": _vm.placement,
@@ -121,18 +94,18 @@ var __vue_render__ = function () {
       "disable-default-styles": false
     },
     on: {
-      "update:state": function ($event) {
-        return _vm.$emit('update:state', $event);
+      "open": function ($event) {
+        return _vm.open();
+      },
+      "close": function ($event) {
+        return _vm.close();
       }
     }
   }, [_c('div', _vm._b({
     ref: "root",
     class: _vm.rootStyles,
     on: {
-      "click": function ($event) {
-        $event.stopPropagation();
-        return _vm.onClick.apply(null, arguments);
-      }
+      "click": _vm.onClick
     }
   }, 'div', _vm.$attrs, false), [_vm._t("default")], 2)]);
 };