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

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("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: Readonly<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("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: Readonly<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,8 +1,8 @@
 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 '@vueuse/core';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
 import '../OrPopoverV3/styles.js';
@@ -16,4 +16,5 @@ 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

@@ -179,6 +179,7 @@ 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';
@@ -215,13 +216,13 @@ import './OrCombinedInputV3/styles.js';
 import '../index-968c331a.js';
 import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../OrDateTimePickerMonthSelect-75089f80.js';
+import '../OrDateTimePickerMonthSelect-0072ef90.js';
 import './OrDateTimePickerV3/hooks/useDatePlaceholder.js';
-import '../OrDateTimePickerPopoverHeader-7c87f38a.js';
+import '../OrDateTimePickerPopoverHeader-aab75fad.js';
 import './OrDatePickerV3/styles.js';
 import '../directives/dropdown-close.js';
 import '../directives/dropdown-open.js';
-import '../OrDateTimePickerTimeSelect-3d0ef650.js';
+import '../OrDateTimePickerTimeSelect-7ce94b9a.js';
 import './OrDateTimePickerV3/hooks/useTimePlaceholder.js';
 import './OrDateTimePickerV3/styles.js';
 import './OrEmptyStateV3/styles.js';

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

@@ -2,6 +2,7 @@ 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,6 +2,7 @@ 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/usePopoverState.d.ts

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

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

@@ -0,0 +1,37 @@
+import { ref, watch } from 'vue-demi';
+
+// TODO: Remove type `any` (https://github.com/microsoft/TypeScript/issues/27808)
+// TODO: Use `defineEmits` after migration to Vue 3
+function usePopoverState(isOpen, context) {
+  // State
+  const state = ref(isOpen.value ? 'open' : 'closed');
+  watch(isOpen, value => {
+    state.value = value ? 'open' : 'closed';
+  });
+  watch(state, value => {
+    switch (value) {
+      case 'open':
+        return context.emit('open');
+      case 'closed':
+        return context.emit('close');
+    }
+  });
+  // Methods
+  function open() {
+    state.value = 'open';
+  }
+  function close() {
+    state.value = 'closed';
+  }
+  function toggle() {
+    state.value = state.value === 'open' ? 'closed' : 'open';
+  }
+  return {
+    state,
+    open,
+    close,
+    toggle
+  };
+}
+
+export { usePopoverState };