@type-dom/ui 0.0.10 → 0.1.1

package/src/hooks/use-floating/index.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.arrowMiddleware = exports.useFloating = exports.getPositionDataWithUnit = exports.useFloatingProps = void 0;
+const tslib_1 = require("tslib");
+// import { isRef, onMounted, ref, unref, watchEffect } from 'vue'
+// import { unrefElement } from '@vueuse/core'
+// import { isNil } from 'lodash-unified'
+// import { arrow as arrowCore, computePosition } from '@floating-ui/dom'
+// import { buildProps, isClient, keysOf } from '@element-plus/utils'
+//
+// import type { Ref, ToRefs } from 'vue'
+const popper_1 = require("@type-dom/popper");
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+exports.useFloatingProps = {};
+const unrefReference = (elRef) => {
+    if (!utils_1.isClient)
+        return;
+    if (!elRef)
+        return elRef;
+    const unrefEl = (0, framework_1.unrefElement)(elRef);
+    if (unrefEl)
+        return unrefEl;
+    return (0, signals_1.isRef)(elRef) ? unrefEl : elRef;
+};
+const getPositionDataWithUnit = (record, key) => {
+    const value = record === null || record === void 0 ? void 0 : record[key];
+    return (0, utils_1.isNil)(value) ? '' : `${value}px`;
+};
+exports.getPositionDataWithUnit = getPositionDataWithUnit;
+const useFloating = ({ middleware, placement, strategy, }) => {
+    const referenceRef = (0, signals_1.signal)();
+    const contentRef = (0, signals_1.signal)();
+    const x = (0, signals_1.signal)();
+    const y = (0, signals_1.signal)();
+    const middlewareData = (0, signals_1.signal)({});
+    const states = {
+        x,
+        y,
+        placement,
+        strategy,
+        middlewareData,
+    };
+    const update = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        if (!utils_1.isClient)
+            return;
+        const referenceEl = unrefReference(referenceRef);
+        const contentEl = (0, framework_1.unrefElement)(contentRef);
+        if (!referenceEl || !contentEl)
+            return;
+        const data = yield (0, popper_1.computePosition)(referenceEl, contentEl, {
+            placement: (0, signals_1.unref)(placement),
+            strategy: (0, signals_1.unref)(strategy),
+            middleware: (0, signals_1.unref)(middleware),
+        });
+        (0, utils_1.keysOf)(states).forEach((key) => {
+            states[key].set(data[key]);
+        });
+    });
+    (0, framework_1.onMounted)(() => {
+        (0, signals_1.effect)(() => {
+            // watchEffect
+            update();
+        });
+    });
+    return Object.assign(Object.assign({}, states), { update,
+        referenceRef,
+        contentRef });
+};
+exports.useFloating = useFloating;
+const arrowMiddleware = ({ arrowRef, padding, }) => {
+    return {
+        name: 'arrow',
+        options: {
+            element: arrowRef,
+            padding,
+        },
+        fn(args) {
+            const arrowEl = (0, signals_1.unref)(arrowRef);
+            if (!arrowEl)
+                return {};
+            return (0, popper_1.arrow)({
+                element: arrowEl,
+                padding,
+            }).fn(args);
+        },
+    };
+};
+exports.arrowMiddleware = arrowMiddleware;

package/src/hooks/use-focus-controller/index.d.ts

@@ -0,0 +1,25 @@
+import { Computed, Signal } from '@type-dom/signals';
+interface UseFocusControllerOptions {
+    /**
+     * return true to cancel focus
+     * @param event FocusEvent
+     */
+    beforeFocus?: (event?: FocusEvent) => boolean | undefined;
+    afterFocus?: () => void;
+    /**
+     * return true to cancel blur
+     * @param event FocusEvent
+     */
+    beforeBlur?: (event?: FocusEvent) => boolean | undefined;
+    afterBlur?: () => void;
+}
+export declare function useFocusController<T extends {
+    focus: () => void;
+}>(target: Signal<T | undefined> | Computed<T | undefined>, { beforeFocus, afterFocus, beforeBlur, afterBlur, }?: UseFocusControllerOptions): {
+    isFocused: Signal<boolean>;
+    /** Avoid using wrapperRef and handleFocus/handleBlur together */
+    wrapperRef: Signal<HTMLElement | undefined>;
+    handleFocus: (event?: FocusEvent) => void;
+    handleBlur: (event?: FocusEvent) => void;
+};
+export {};

package/src/hooks/use-focus-controller/index.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusController = useFocusController;
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+function useFocusController(target, { beforeFocus, afterFocus, beforeBlur, afterBlur, } = {}) {
+    const instance = (0, framework_1.getCurrentInstance)();
+    const { emit } = instance;
+    const wrapperRef = (0, signals_1.signal)();
+    const isFocused = (0, signals_1.signal)(false);
+    const handleFocus = (event) => {
+        // console.log('handleFocus . ');
+        const cancelFocus = (0, utils_1.isFunction)(beforeFocus) ? beforeFocus(event) : false;
+        if (cancelFocus || isFocused.get())
+            return;
+        isFocused.set(true);
+        emit('focus', event);
+        afterFocus === null || afterFocus === void 0 ? void 0 : afterFocus();
+    };
+    const handleBlur = (event) => {
+        var _a;
+        const cancelBlur = (0, utils_1.isFunction)(beforeBlur) ? beforeBlur(event) : false;
+        if (cancelBlur ||
+            ((event === null || event === void 0 ? void 0 : event.relatedTarget) &&
+                ((_a = wrapperRef.get()) === null || _a === void 0 ? void 0 : _a.contains(event === null || event === void 0 ? void 0 : event.relatedTarget))))
+            return;
+        isFocused.set(false);
+        emit('blur', event);
+        afterBlur === null || afterBlur === void 0 ? void 0 : afterBlur();
+    };
+    const handleClick = () => {
+        var _a, _b;
+        if (((_a = wrapperRef.get()) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) &&
+            wrapperRef.get() !== document.activeElement) {
+            return;
+        }
+        if (target.get() instanceof framework_1.TypeElement) {
+            target.get().dom.focus();
+        }
+        else {
+            (_b = target.get()) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    // todo
+    (0, signals_1.watch)(wrapperRef, (el) => {
+        if (el) {
+            el.setAttribute('tabindex', '-1');
+        }
+    });
+    // console.log('then listen wrapperRef ', wrapperRef.get());
+    (0, framework_1.useEventListener)(wrapperRef, 'focus', handleFocus, true);
+    (0, framework_1.useEventListener)(wrapperRef, 'blur', handleBlur, true);
+    (0, framework_1.useEventListener)(wrapperRef, 'click', handleClick, true);
+    // only for test
+    if (process.env.NODE_ENV === 'test') {
+        (0, framework_1.onMounted)(() => {
+            const targetEl = (0, utils_1.isElement)(target.get())
+                ? target.get()
+                : document.querySelector('input,textarea');
+            if (targetEl) {
+                (0, framework_1.useEventListener)(targetEl, 'focus', handleFocus, true);
+                (0, framework_1.useEventListener)(targetEl, 'blur', handleBlur, true);
+            }
+        });
+    }
+    return {
+        isFocused,
+        /** Avoid using wrapperRef and handleFocus/handleBlur together */
+        wrapperRef,
+        handleFocus,
+        handleBlur,
+    };
+}

package/src/hooks/{use-forward-ref.d.ts → use-forward-ref/index.d.ts}

@@ -1,10 +1,11 @@
 import { InjectionKey } from '@type-dom/framework';
-type ForwardRefSetter = (el?: HTMLElement) => void;
+import { Ref } from '@type-dom/signals';
+type ForwardRefSetter = <T>(el: T) => void;
 export type ForwardRefInjectionContext = {
     setForwardRef: ForwardRefSetter;
 };
 export declare const FORWARD_REF_INJECTION_KEY: InjectionKey<ForwardRefInjectionContext>;
-export declare const useForwardRef: (provide: (key: string | symbol, value: any) => void, forwardRef?: HTMLElement) => void;
+export declare const useForwardRef: <T>(forwardRef?: Ref<T | undefined>) => void;
 export declare const useForwardRefDirective: (setForwardRef: ForwardRefSetter) => {
     mounted(el: HTMLElement): void;
     updated(el: HTMLElement): void;

package/src/hooks/{use-forward-ref.js → use-forward-ref/index.js}

@@ -1,12 +1,16 @@
 "use strict";
+// import { provide } from 'vue'
+//
+// import type { InjectionKey, ObjectDirective, Ref } from 'vue'
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useForwardRefDirective = exports.useForwardRef = exports.FORWARD_REF_INJECTION_KEY = void 0;
-exports.FORWARD_REF_INJECTION_KEY = Symbol('tdForwardRef');
-const useForwardRef = (provide, forwardRef) => {
+const framework_1 = require("@type-dom/framework");
+exports.FORWARD_REF_INJECTION_KEY = Symbol('elForwardRef');
+const useForwardRef = (forwardRef) => {
     const setForwardRef = (el) => {
-        forwardRef = el;
+        forwardRef === null || forwardRef === void 0 ? void 0 : forwardRef.set(el); // el type todo check
     };
-    provide(exports.FORWARD_REF_INJECTION_KEY, {
+    (0, framework_1.provide)(exports.FORWARD_REF_INJECTION_KEY, {
         setForwardRef,
     });
 };
@@ -20,7 +24,7 @@ const useForwardRefDirective = (setForwardRef) => {
             setForwardRef(el);
         },
         unmounted() {
-            setForwardRef(undefined);
+            setForwardRef(null);
         },
     };
 };

package/src/hooks/use-id/index.d.ts

@@ -0,0 +1,9 @@
+import { InjectionKey } from '@type-dom/framework';
+import { Computed, MaybeRef } from '@type-dom/signals';
+export type TdIdInjectionContext = {
+    prefix: number;
+    current: number;
+};
+export declare const ID_INJECTION_KEY: InjectionKey<TdIdInjectionContext>;
+export declare const useIdInjection: () => TdIdInjectionContext;
+export declare const useId: (deterministicId?: MaybeRef<string>) => Computed<string>;

package/src/hooks/use-id/index.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useId = exports.useIdInjection = exports.ID_INJECTION_KEY = void 0;
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const defaultIdInjection = {
+    prefix: Math.floor(Math.random() * 10000),
+    current: 0,
+};
+exports.ID_INJECTION_KEY = Symbol('tdIdInjection');
+const useIdInjection = () => {
+    return (0, framework_1.getCurrentInstance)()
+        ? (0, framework_1.inject)(exports.ID_INJECTION_KEY, defaultIdInjection)
+        : defaultIdInjection;
+};
+exports.useIdInjection = useIdInjection;
+const useId = (deterministicId) => {
+    // const idInjection = defaultIdInjection;
+    const idInjection = (0, exports.useIdInjection)();
+    if (!utils_1.isClient && idInjection === defaultIdInjection) {
+        console.warn('IdInjection', `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
+usage: app.provide(ID_INJECTION_KEY, {
+  prefix: number,
+  current: number,
+})`);
+    }
+    // NOTE: Here we use `computedEager` to calculate the id value immediately, avoiding inconsistent id generation due to the lazy feature of `computed` when server rendering.
+    return (0, signals_1.computed)(() => (0, signals_1.unref)(deterministicId) ||
+        `td-id-${idInjection.prefix}-${idInjection.current++}`);
+};
+exports.useId = useId;

package/src/hooks/use-intermediate-render/index.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from '@type-dom/signals';
+export type UseDelayedRenderProps = {
+    indicator: Ref<boolean>;
+    intermediateIndicator: Ref<boolean>;
+    shouldSetIntermediate?: (step: 'show' | 'hide') => boolean;
+    beforeShow?: () => void;
+    beforeHide?: () => void;
+    afterShow?: () => void;
+    afterHide?: () => void;
+};
+export declare const useDelayedRender: ({ indicator, intermediateIndicator, shouldSetIntermediate, beforeShow, afterShow, afterHide, beforeHide, }: UseDelayedRenderProps) => void;

package/src/hooks/use-intermediate-render/index.js

@@ -0,0 +1,43 @@
+"use strict";
+// import { nextTick, unref, watch } from 'vue'
+//
+// import type { Ref } from 'vue'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDelayedRender = void 0;
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const useDelayedRender = ({ indicator, intermediateIndicator, shouldSetIntermediate = () => true, beforeShow, afterShow, afterHide, beforeHide, }) => {
+    (0, signals_1.watch)(() => (0, signals_1.unref)(indicator), (val) => {
+        if (val) {
+            beforeShow === null || beforeShow === void 0 ? void 0 : beforeShow();
+            (0, framework_1.nextTick)(() => {
+                if (!(0, signals_1.unref)(indicator))
+                    return;
+                if (shouldSetIntermediate('show')) {
+                    intermediateIndicator.set(true);
+                }
+            });
+        }
+        else {
+            beforeHide === null || beforeHide === void 0 ? void 0 : beforeHide();
+            (0, framework_1.nextTick)(() => {
+                if ((0, signals_1.unref)(indicator))
+                    return;
+                if (shouldSetIntermediate('hide')) {
+                    intermediateIndicator.set(false);
+                }
+            });
+        }
+    });
+    // because we don't always set the value ourselves, so that we
+    // simply watch the value's state, then invoke the corresponding hook.
+    (0, signals_1.watch)(() => intermediateIndicator.get(), (val) => {
+        if (val) {
+            afterShow === null || afterShow === void 0 ? void 0 : afterShow();
+        }
+        else {
+            afterHide === null || afterHide === void 0 ? void 0 : afterHide();
+        }
+    });
+};
+exports.useDelayedRender = useDelayedRender;

package/src/hooks/use-locale/index.d.ts

@@ -0,0 +1,15 @@
+import { Ref, MaybeRef } from '@type-dom/signals';
+import { InjectionKey } from '@type-dom/framework';
+import { Language } from '../../locale';
+export type TranslatorOption = Record<string, string | number>;
+export type Translator = (path: string, option?: TranslatorOption) => string;
+export type LocaleContext = {
+    locale: Ref<Language>;
+    lang: Ref<string>;
+    t: Translator;
+};
+export declare const buildTranslator: (locale: MaybeRef<Language>) => Translator;
+export declare const translate: (path: string, option: undefined | TranslatorOption, locale: Language) => string;
+export declare const buildLocaleContext: (locale: MaybeRef<Language>) => LocaleContext;
+export declare const localeContextKey: InjectionKey<Ref<Language | undefined>>;
+export declare const useLocale: (localeOverrides?: Ref<Language | undefined>) => LocaleContext;

package/src/hooks/use-locale/index.js

@@ -0,0 +1,34 @@
+"use strict";
+// import { computed, inject, isRef, ref, unref } from 'vue'
+// import { get } from 'lodash-unified'
+// import English from '@element-plus/locale/lang/en'
+//
+// import type { MaybeRef } from '@vueuse/core'
+// import type { InjectionKey, Ref } from 'vue'
+// import type { Language } from '@element-plus/locale'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocale = exports.localeContextKey = exports.buildLocaleContext = exports.translate = exports.buildTranslator = void 0;
+const lodash_1 = require("lodash");
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const en_1 = require("../../locale/lang/en");
+const buildTranslator = (locale) => (path, option) => (0, exports.translate)(path, option, (0, signals_1.unref)(locale));
+exports.buildTranslator = buildTranslator;
+const translate = (path, option, locale) => (0, lodash_1.get)(locale, path, path).replace(/\{(\w+)\}/g, (_, key) => { var _a; return `${(_a = option === null || option === void 0 ? void 0 : option[key]) !== null && _a !== void 0 ? _a : `{${key}}`}`; });
+exports.translate = translate;
+const buildLocaleContext = (locale) => {
+    const lang = (0, signals_1.computed)(() => (0, signals_1.unref)(locale).name);
+    const localeRef = (0, signals_1.isRef)(locale) ? locale : (0, signals_1.signal)(locale);
+    return {
+        lang,
+        locale: localeRef,
+        t: (0, exports.buildTranslator)(locale),
+    };
+};
+exports.buildLocaleContext = buildLocaleContext;
+exports.localeContextKey = Symbol('localeContextKey');
+const useLocale = (localeOverrides) => {
+    const locale = localeOverrides || (0, framework_1.inject)(exports.localeContextKey, (0, signals_1.signal)());
+    return (0, exports.buildLocaleContext)((0, signals_1.computed)(() => locale.get() || en_1.default));
+};
+exports.useLocale = useLocale;

package/src/hooks/use-lockscreen/index.d.ts

@@ -0,0 +1,11 @@
+import type { UseNamespaceReturn } from '../use-namespace';
+import { Ref } from '@type-dom/signals';
+export type UseLockScreenOptions = {
+    ns?: UseNamespaceReturn;
+};
+/**
+ * Hook that monitoring the ref value to lock or unlock the screen.
+ * When the trigger became true, it assumes modal is now opened and vice versa.
+ * @param trigger {Ref<boolean>}
+ */
+export declare const useLockscreen: (trigger: Ref<boolean>, options?: UseLockScreenOptions) => void;

package/src/hooks/use-lockscreen/index.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLockscreen = void 0;
+// import { computed, isRef, onScopeDispose, watch } from 'vue'
+// import {
+//   addClass,
+//   getScrollBarWidth,
+//   getStyle,
+//   hasClass,
+//   isClient,
+//   removeClass,
+//   throwError,
+// } from '@element-plus/utils'
+const use_namespace_1 = require("../use-namespace");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+/**
+ * Hook that monitoring the ref value to lock or unlock the screen.
+ * When the trigger became true, it assumes modal is now opened and vice versa.
+ * @param trigger {Ref<boolean>}
+ */
+const useLockscreen = (trigger, options = {}) => {
+    if (!(0, signals_1.isRef)(trigger)) {
+        (0, utils_1.throwError)('[useLockscreen]', 'You need to pass a ref param to this function');
+    }
+    const ns = options.ns || (0, use_namespace_1.useNamespace)('popup');
+    const hiddenCls = (0, signals_1.computed)(() => ns.bm('parent', 'hidden'));
+    if (!utils_1.isClient || (0, utils_1.hasClass)(document.body, hiddenCls.get())) {
+        return;
+    }
+    let scrollBarWidth = 0;
+    let withoutHiddenClass = false;
+    let bodyWidth = '0';
+    const cleanup = () => {
+        setTimeout(() => {
+            // When the test case is running, the context environment simulated by jsdom may have been destroyed,
+            // and the document does not exist at this time.
+            if (typeof document === 'undefined')
+                return;
+            (0, utils_1.removeClass)(document === null || document === void 0 ? void 0 : document.body, hiddenCls.get());
+            if (withoutHiddenClass && document) {
+                document.body.style.width = bodyWidth;
+            }
+        }, 200);
+    };
+    (0, signals_1.watch)(trigger, (val) => {
+        if (!val) {
+            cleanup();
+            return;
+        }
+        withoutHiddenClass = !(0, utils_1.hasClass)(document.body, hiddenCls.get());
+        if (withoutHiddenClass) {
+            bodyWidth = document.body.style.width;
+        }
+        scrollBarWidth = (0, utils_1.getScrollBarWidth)(ns.namespace.get());
+        const bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
+        const bodyOverflowY = (0, utils_1.getStyle)(document.body, 'overflowY');
+        if (scrollBarWidth > 0 &&
+            (bodyHasOverflow || bodyOverflowY === 'scroll') &&
+            withoutHiddenClass) {
+            document.body.style.width = `calc(100% - ${scrollBarWidth}px)`;
+        }
+        (0, utils_1.addClass)(document.body, hiddenCls.get());
+    });
+    (0, signals_1.onScopeDispose)(() => cleanup());
+};
+exports.useLockscreen = useLockscreen;

package/src/hooks/use-modal/index.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from '@type-dom/signals';
+type ModalInstance = {
+    handleClose: () => void;
+};
+export declare const useModal: (instance: ModalInstance, visibleRef: Ref<boolean>) => void;
+export {};

package/src/hooks/use-modal/index.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModal = void 0;
+// import { watch } from 'vue'
+// import { isClient, useEventListener } from '@vueuse/core'
+// import { EVENT_CODE } from '@element-plus/constants'
+//
+// import type { Ref } from 'vue'
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const aria_1 = require("../../constants/aria");
+const modalStack = [];
+const closeModal = (e) => {
+    if (modalStack.length === 0)
+        return;
+    if (e.code === aria_1.EVENT_CODE.esc) {
+        e.stopPropagation();
+        const topModal = modalStack[modalStack.length - 1];
+        topModal.handleClose();
+    }
+};
+const useModal = (instance, visibleRef) => {
+    (0, signals_1.watch)(visibleRef, (val) => {
+        if (val) {
+            modalStack.push(instance);
+        }
+        else {
+            modalStack.splice(modalStack.indexOf(instance), 1);
+        }
+    });
+};
+exports.useModal = useModal;
+if (utils_1.isClient)
+    (0, framework_1.useEventListener)(document, 'keydown', closeModal);

package/src/hooks/use-model-toggle/index.d.ts

@@ -0,0 +1,39 @@
+import { Ref } from '@type-dom/signals';
+declare const _prop: boolean | null;
+declare const _event: (val: boolean) => void;
+export type UseModelTogglePropsRaw<T extends string> = {
+    [K in T]: typeof _prop;
+} & {
+    [K in `onUpdate:${T}`]: typeof _event;
+};
+export type UseModelTogglePropsGeneric<T extends string> = {
+    [K in T]: typeof _prop;
+} & {
+    [K in `onUpdate:${T}`]: typeof _event;
+};
+export declare const createModelToggleComposable: <T extends string>(name: T) => {
+    useModelToggle: ({ indicator, toggleReason, shouldHideWhenRouteChanges, shouldProceed, onShow, onHide, }: ModelToggleParams) => {
+        hide: (event?: Event) => void;
+        show: (event?: Event) => void;
+        toggle: () => void;
+        hasUpdateHandler: import("@type-dom/signals").Computed<boolean>;
+    };
+    useModelToggleProps: UseModelTogglePropsRaw<T>;
+    useModelToggleEmits: `update:${T}`[];
+};
+declare const useModelToggle: ({ indicator, toggleReason, shouldHideWhenRouteChanges, shouldProceed, onShow, onHide, }: ModelToggleParams) => {
+    hide: (event?: Event) => void;
+    show: (event?: Event) => void;
+    toggle: () => void;
+    hasUpdateHandler: import("@type-dom/signals").Computed<boolean>;
+}, useModelToggleProps: UseModelTogglePropsRaw<"modelValue">, useModelToggleEmits: "update:modelValue"[];
+export { useModelToggle, useModelToggleEmits, useModelToggleProps };
+export type UseModelToggleProps = typeof useModelToggleProps;
+export type ModelToggleParams = {
+    indicator: Ref<boolean>;
+    toggleReason?: Ref<Event | undefined>;
+    shouldHideWhenRouteChanges?: Ref<boolean>;
+    shouldProceed?: () => boolean;
+    onShow?: (event?: Event) => void;
+    onHide?: (event?: Event) => void;
+};