@type-dom/ui 0.1.0 → 0.1.2

package/src/components/feedback/td-popover/td-popover.interface.d.ts

@@ -0,0 +1,110 @@
+import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
+import { TooltipTriggerType } from '../td-tooltip/trigger/trigger.interface';
+import { Placement } from '@type-dom/popper';
+import { IStyle } from '@type-dom/css-type';
+import { Ref } from '@type-dom/signals';
+import { Measurable } from '../td-popper/td-popper.interface';
+import { TooltipContentProps } from '../td-tooltip/content/content.interface';
+export interface ITdPopover extends ITypeFragment {
+    className: 'TdPopover';
+}
+export interface PopoverProps extends TypeFragmentProps {
+    /**
+     * @description how the popover is triggered
+     */
+    trigger?: TooltipTriggerType | TooltipTriggerType[];
+    /**
+     * @description popover placement
+     * bottom
+     */
+    placement?: Placement;
+    /**
+     * @description whether Popover is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @description whether popover is visible
+     */
+    visible?: TooltipContentProps['visible'];
+    /**
+     * @description popover transition animation
+     */
+    transition?: string;
+    /**
+     * @description parameters for [popper.js](https://popper.js.org/docs/v2/)
+     */
+    popperOptions?: any;
+    /**
+     * @description [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover
+     */
+    tabindex?: string | number;
+    /**
+     * @description popover content, can be replaced with a default `slot`
+     */
+    content?: string;
+    /**
+     * @description custom style for popover
+     */
+    popperStyle?: IStyle;
+    /**
+     * @description custom class name for popover
+     */
+    popperClass?: TooltipContentProps['popperClass'];
+    /**
+     *  ...useTooltipContentProps.enterable,
+     default: true,
+     */
+    enterable?: TooltipContentProps['enterable'];
+    /**
+     * @description Tooltip theme, built-in theme: `dark` / `light`
+     *     default: 'light',
+     */
+    effect?: 'dark' | 'light';
+    /**
+     * @description whether popover dropdown is teleported to the body
+     * true
+     */
+    teleported?: boolean;
+    /**
+     * @description popover title
+     */
+    title?: string;
+    /**
+     * @description popover width
+     default: 150,
+     */
+    width?: string | number;
+    /**
+     * @description popover offset
+     default: undefined,
+     */
+    offset?: number;
+    /**
+     * @description delay of appearance, in millisecond
+     default: 0,
+     */
+    showAfter?: number;
+    /**
+     * @description delay of disappear, in millisecond
+     default: 200,
+     */
+    hideAfter?: number;
+    /**
+     * @description timeout in milliseconds to hide tooltip
+     default: 0,
+     */
+    autoClose?: number;
+    /**
+     * @description whether a tooltip arrow is displayed or not. For more info, please refer to [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper)
+     default: true,
+     */
+    showArrow?: boolean;
+    /**
+     * @description when popover inactive and `persistent` is `false` , popover will be destroyed
+     default: true,
+     */
+    persistent?: boolean;
+    'onUpdate:visible'?: (visible: boolean) => void;
+    virtualRef?: Ref<Measurable>;
+    virtualTriggering?: boolean;
+}

package/src/components/feedback/td-popover/td-popover.interface.js

@@ -1 +1,2 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/feedback/td-popover/td-popover.style.d.ts

@@ -0,0 +1,13 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $popover: {
+    bgColor: string;
+    fontSize: string;
+    borderColor: string;
+    padding: string;
+    paddingLarge: string;
+    titleFontSize: string;
+    titleTextColor: string;
+    borderRadius: string;
+};
+export declare const $popoverPopperStyle: IStyle;
+export declare const $popoverTitleStyle: IStyle;

package/src/components/feedback/td-popover/td-popover.style.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$popoverTitleStyle = exports.$popoverPopperStyle = exports.$popover = void 0;
+const var_1 = require("../../../styles/var");
+// Popover
+// css3 var in packages/theme-chalk/src/popover.scss
+exports.$popover = {
+    // bgColor': getCssVar('bg-color', 'overlay'),
+    bgColor: var_1.$bgColor.overlay,
+    // font-size': getCssVar('font-size-base'),
+    fontSize: var_1.$fontSizes.base,
+    // border-color': getCssVar('border-color-lighter'),
+    borderColor: var_1.$borderColor.lighter,
+    padding: '12px',
+    paddingLarge: '18px 20px',
+    titleFontSize: '16px',
+    // title-text-color': getCssVar('text-color-primary'),
+    titleTextColor: var_1.$textColor.primary,
+    borderRadius: '4px',
+};
+exports.$popoverPopperStyle = {
+    // background: getCssVar('popover-bg-color'),
+    background: exports.$popover.bgColor,
+    minWidth: '150px',
+    // borderRadius: getCssVar('popover-border-radius'),
+    borderRadius: exports.$popover.borderRadius,
+    // border: 1px solid getCssVar('popover-border-color'),
+    border: '1px solid ' + exports.$popover.borderColor,
+    // padding: getCssVar('popover-padding'),
+    padding: exports.$popover.padding,
+    // z-index: getCssVar('index-popper'),
+    zIndex: 1000,
+    // color: getCssVar('text-color', 'regular'),
+    color: var_1.$textColor.regular,
+    lineHeight: 1.4,
+    // font-size: getCssVar('popover-font-size'),
+    fontSize: exports.$popover.fontSize,
+    // box-shadow: getCssVar('box-shadow-light'),
+    boxShadow: var_1.$boxShadow.light,
+    overflowWrap: 'break-word',
+    boxSizing: 'border-box',
+};
+exports.$popoverTitleStyle = {
+    // color: getCssVar('popover-title-text-color'),
+    color: exports.$popover.titleTextColor,
+    // font-size: getCssVar('popover-title-font-size'),
+    fontSize: exports.$popover.titleFontSize,
+    lineHeight: 1,
+    marginBottom: '12px',
+};

package/src/components/feedback/td-popover/td-popper.const.d.ts

@@ -0,0 +1,9 @@
+import { PopoverProps } from './td-popover.interface';
+export declare const popoverProps: PopoverProps;
+export declare const popoverEmits: {
+    'update:visible': (value: boolean) => boolean;
+    'before-enter': () => boolean;
+    'before-leave': () => boolean;
+    'after-enter': () => boolean;
+    'after-leave': () => boolean;
+};

package/src/components/feedback/td-popover/td-popper.const.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popoverEmits = exports.popoverProps = void 0;
+const utils_1 = require("@type-dom/utils");
+exports.popoverProps = {
+    trigger: 'hover',
+    placement: 'bottom',
+    // visible: undefined,
+    tabindex: 9,
+    enterable: true,
+    effect: 'light',
+    teleported: true,
+    showAfter: 0,
+    hideAfter: 200,
+    autoClose: 0,
+    showArrow: true,
+    persistent: true,
+    // 'onUpdate:visible': {
+    //   type: Function as PropType<(visible: boolean) => void>,
+    // },
+};
+exports.popoverEmits = {
+    'update:visible': (value) => (0, utils_1.isBoolean)(value),
+    'before-enter': () => true,
+    'before-leave': () => true,
+    'after-enter': () => true,
+    'after-leave': () => true,
+};

package/src/components/feedback/td-popper/arrow/arrow.class.d.ts

@@ -1,13 +1,10 @@
 import { TypeSpan } from '@type-dom/framework';
-import { ITdPopperArrow, ITdPopperArrowConfig } from './arrow.interface';
+import { Ref } from '@type-dom/signals';
+import { ITdPopperArrow, PopperArrowProps } from './arrow.interface';
 export declare class TdPopperArrow extends TypeSpan implements ITdPopperArrow {
     className: 'TdPopperArrow';
-    props: ITdPopperArrowConfig;
-    private arrowOffset?;
-    arrowRef?: HTMLElement;
-    private arrowStyle?;
-    constructor(params?: ITdPopperArrowConfig);
+    props: PopperArrowProps;
+    arrowRef?: Ref<HTMLElement>;
+    constructor(params?: PopperArrowProps);
     setup(): void;
-    beforeDestroy(): void;
-    setArrowOffset(offset: number): void;
 }

package/src/components/feedback/td-popper/arrow/arrow.class.js

@@ -2,51 +2,43 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopperArrow = void 0;
 const framework_1 = require("@type-dom/framework");
-const var_1 = require("../../../../styles/var");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
 const constants_1 = require("../constants");
 class TdPopperArrow extends framework_1.TypeSpan {
     constructor(params = {}) {
         super();
-        // this.useTag('span');
         this.className = 'TdPopperArrow';
         this.attr.addName('td-popper-arrow');
-        this.style.addObj({
-            position: 'absolute',
-            width: '10px',
-            height: '10px',
-            zIndex: -1,
-            //   todo next is ::before style
-            //   &::before {
-            //   position: absolute;
-            //   width: 10px;
-            //   height: 10px;
-            //   z-index: -1;
-            content: ' ',
-            transform: 'rotate(45deg)',
-            // background: getCssVar('text-color', 'primary'),
-            backgroundColor: var_1.$textColor.primary,
-            boxSizing: 'border-box'
-            // }
-        });
-        this.assignProps({
-            arrowOffset: 5,
-        });
+        // this.assignProps(popperArrowProps);
         this.props = this.useParams(params);
     }
     setup() {
-        const { arrowOffset, arrowRef, arrowStyle } = this.inject(constants_1.POPPER_CONTENT_INJECTION_KEY, undefined);
-        this.arrowOffset = arrowOffset;
-        this.arrowRef = arrowRef;
-        this.arrowStyle = arrowStyle;
-    }
-    beforeDestroy() {
-        this.arrowRef = undefined;
-    }
-    setArrowOffset(offset) {
-        this.setProp('arrowOffset', offset);
-        if (offset) {
-            this.arrowOffset = offset;
-        }
+        // console.log('TdPopperArrow setup . ');
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('popper');
+        const { arrowOffset, arrowRef, arrowStyle } = (0, framework_1.inject)(constants_1.POPPER_CONTENT_INJECTION_KEY, undefined);
+        (0, signals_1.watch)(() => { var _a; return (_a = props.arrowOffset) === null || _a === void 0 ? void 0 : _a.get(); }, (val) => {
+            // console.warn('watch props.arrowOffset is ', val);
+            arrowOffset === null || arrowOffset === void 0 ? void 0 : arrowOffset.set(val);
+        });
+        (0, framework_1.onBeforeUnmount)(() => {
+            arrowRef === null || arrowRef === void 0 ? void 0 : arrowRef.set(undefined);
+        });
+        (0, framework_1.defineExpose)({
+            /**
+             * @description Arrow element
+             */
+            arrowRef,
+        });
+        this.assignProps({
+            refDom: arrowRef,
+        });
+        this.attr.addClass(ns.e('arrow'));
+        this.attr.addObj({
+            'data-popper-arrow': 'data-popper-arrow',
+        });
+        this.style.addObj(arrowStyle);
     }
 }
 exports.TdPopperArrow = TdPopperArrow;

package/src/components/feedback/td-popper/arrow/arrow.const.d.ts

@@ -1,3 +1,2 @@
-export declare const popperArrowProps: {
-    arrowOffset: number;
-};
+import { PopperArrowProps } from './arrow.interface';
+export declare const popperArrowProps: PopperArrowProps;

package/src/components/feedback/td-popper/arrow/arrow.const.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.popperArrowProps = void 0;
+const signals_1 = require("@type-dom/signals");
 exports.popperArrowProps = {
-    arrowOffset: 5,
+    arrowOffset: (0, signals_1.signal)(5),
 };

package/src/components/feedback/td-popper/arrow/arrow.interface.d.ts

@@ -1,10 +1,11 @@
-import { ITypeConfig, ITypeSpan } from '@type-dom/framework';
+import { ITypeSpan, TypeSpanProps } from '@type-dom/framework';
+import { Signal } from '@type-dom/signals';
 export interface ITdPopperArrow extends ITypeSpan {
     className: 'TdPopperArrow';
 }
-export interface ITdPopperArrowConfig extends ITypeConfig {
+export interface PopperArrowProps extends TypeSpanProps {
     /**
      *     default: 5,
      */
-    arrowOffset?: number;
+    arrowOffset?: Signal<number>;
 }

package/src/components/feedback/td-popper/composable/use-content-dom.d.ts

@@ -0,0 +1,36 @@
+import { IStyle } from '@type-dom/css-type';
+import { PopperContentProps } from '../content/content.interface';
+import { StyleValue } from '@type-dom/framework';
+export declare const usePopperContentDOM: (props: PopperContentProps, { styles, role, }: any) => {
+    ariaModal: import("@type-dom/signals").Computed<string | undefined>;
+    arrowStyle: import("@type-dom/signals").Computed<IStyle<string | 0, string>>;
+    contentClass: import("@type-dom/signals").Computed<((string | {
+        [x: string]: unknown;
+    } | ((string | {
+        [x: string]: unknown;
+    } | ((string | {
+        [x: string]: unknown;
+    } | ((string | {
+        [x: string]: unknown;
+    } | ((string | {
+        [x: string]: unknown;
+    } | ((string | {
+        [x: string]: unknown;
+    } | ((string | {
+        [x: string]: unknown;
+    } | ((string | {
+        [x: string]: unknown;
+    } | ((string | {
+        [x: string]: unknown;
+    } | ((string | {
+        [x: string]: unknown;
+    } | ((string | {
+        [x: string]: unknown;
+    } | ((string | {
+        [x: string]: unknown;
+    } | /*elided*/ any) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]) | undefined)[]>;
+    contentStyle: import("@type-dom/signals").Computed<StyleValue[]>;
+    contentZIndex: import("@type-dom/signals").Signal<number>;
+    updateZIndex: () => void;
+};
+export type UsePopperContentDOMReturn = ReturnType<typeof usePopperContentDOM>;

package/src/components/feedback/td-popper/composable/use-content-dom.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopperContentDOM = void 0;
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const use_z_index_1 = require("../../../../hooks/use-z-index");
+const usePopperContentDOM = (props, { 
+// attributes,
+styles, role, } //: Pick<UsePopperReturn, 'attributes' | 'styles'> &
+) => {
+    const { nextZIndex } = (0, use_z_index_1.useZIndex)();
+    const ns = (0, use_namespace_1.useNamespace)('popper');
+    // const contentAttrs = computed(() => unref(attributes).popper)
+    const contentZIndex = (0, signals_1.signal)((0, utils_1.isNumber)(props.zIndex) ? props.zIndex : nextZIndex());
+    const contentClass = (0, signals_1.computed)(() => [
+        ns.b(),
+        ns.is('pure', props.pure),
+        ns.is(props.effect || ''),
+        props.popperClass,
+    ]);
+    const contentStyle = (0, signals_1.computed)(() => {
+        // console.warn('props.popperStyle is ', props.popperStyle)
+        return [
+            { zIndex: (0, signals_1.unref)(contentZIndex) },
+            (0, signals_1.unref)(styles).popper,
+            props.popperStyle || {},
+        ];
+    });
+    const ariaModal = (0, signals_1.computed)(() => role === 'dialog' ? 'false' : undefined);
+    const arrowStyle = (0, signals_1.computed)(() => ((0, signals_1.unref)(styles).arrow || {}));
+    const updateZIndex = () => {
+        contentZIndex.set((0, utils_1.isNumber)(props.zIndex) ? props.zIndex : nextZIndex());
+    };
+    return {
+        ariaModal,
+        arrowStyle,
+        // contentAttrs,
+        contentClass,
+        contentStyle,
+        contentZIndex,
+        updateZIndex,
+    };
+};
+exports.usePopperContentDOM = usePopperContentDOM;

package/src/components/feedback/td-popper/composable/use-content.d.ts

@@ -0,0 +1,50 @@
+import { Computed } from '@type-dom/signals';
+import { Middleware } from '@type-dom/popper';
+import { PopperContentProps } from '../content/content.interface';
+export declare const usePopperContent: (props: PopperContentProps) => {
+    attributes: Computed<{
+        [key: string]: {
+            [key: string]: string | boolean;
+        };
+    }>;
+    arrowRef: import("@type-dom/signals").Signal<HTMLElement>;
+    contentRef: import("@type-dom/signals").Signal<HTMLElement | undefined>;
+    instanceRef: Computed<import("@type-dom/popper").Instance | undefined>;
+    state: Computed<{
+        elements?: {
+            reference: Element | import("@type-dom/popper").VirtualElement;
+            popper: HTMLElement;
+            arrow?: HTMLElement;
+        } | undefined;
+        options?: {
+            placement?: import("@type-dom/popper").Placement | undefined;
+            strategy?: import("@type-dom/popper").Strategy | undefined;
+            middleware?: Array<Middleware | null | undefined | false> | undefined;
+            platform?: import("@type-dom/popper").Platform | undefined;
+        } | undefined;
+        placement?: import("@type-dom/popper").Placement | undefined;
+        strategy?: import("@type-dom/popper").Strategy;
+        orderedMiddlewares?: {
+            options?: any;
+            name: string;
+            fn: (state: import("@type-dom/popper").MiddlewareState) => import("@type-dom/popper").MiddlewareReturn | Promise<import("@type-dom/popper").MiddlewareReturn>;
+        }[] | undefined;
+        scrollParents?: {
+            reference: Array<Element | Window | VisualViewport>;
+            popper: Array<Element | Window | VisualViewport>;
+        };
+        styles?: Record<string, import("dist/libs/css-type/src").IStyle<string | 0, string>> | undefined;
+        attributes?: {
+            [key: string]: {
+                [key: string]: string | boolean;
+            };
+        } | undefined;
+        middlewareData?: import("@type-dom/popper").MiddlewareData | undefined;
+        reset?: boolean;
+    }>;
+    styles: Computed<Record<string, import("dist/libs/css-type/src").IStyle<string | 0, string>>>;
+    role: Computed<import("../td-popper.interface").RoleTypes | undefined>;
+    forceUpdate: () => Promise<void> | undefined;
+    update: () => Promise<Partial<import("@type-dom/popper").State>> | undefined;
+};
+export type UsePopperContentReturn = ReturnType<typeof usePopperContent>;

package/src/components/feedback/td-popper/composable/use-content.js

@@ -0,0 +1,91 @@
+"use strict";
+// import { computed, inject, onMounted, ref, unref, watch } from 'vue'
+// import { isUndefined } from 'lodash-unified'
+// import { usePopper } from '@element-plus/hooks'
+// import { buildPopperOptions, unwrapMeasurableEl } from '../utils'
+// import type { Modifier } from '@popperjs/core'
+// import type { PartialOptions } from '@element-plus/hooks'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopperContent = void 0;
+const signals_1 = require("@type-dom/signals");
+const popper_1 = require("@type-dom/popper");
+const utils_1 = require("@type-dom/utils");
+const framework_1 = require("@type-dom/framework");
+const use_popper_1 = require("../../../../hooks/use-popper");
+const utils_2 = require("../utils");
+const constants_1 = require("../constants");
+const DEFAULT_ARROW_OFFSET = 0;
+const usePopperContent = (props) => {
+    const { popperInstanceRef, contentRef, triggerRef, role } = (0, framework_1.inject)(constants_1.POPPER_INJECTION_KEY, undefined);
+    const arrowRef = (0, signals_1.signal)();
+    const arrowOffset = (0, signals_1.signal)(5);
+    const eventListenerMiddleware = (0, signals_1.computed)(() => {
+        return {
+            name: 'eventListeners',
+            // enabled: !!props.visible,
+            fn: (state) => {
+                if ((0, signals_1.toRaw)(props.visible)) {
+                    // update();
+                }
+            },
+        };
+    });
+    // middleWare
+    const arrowMiddleware = (0, signals_1.computed)(() => {
+        var _a;
+        // console.log('arrowMiddleware', arrowRef, arrowOffset);
+        const arrowEl = (0, signals_1.unref)(arrowRef);
+        const offset = (_a = (0, signals_1.unref)(arrowOffset)) !== null && _a !== void 0 ? _a : DEFAULT_ARROW_OFFSET;
+        // Seems like the `phase` and `fn` is required by Modifier type
+        // But on its documentation they didn't specify that.
+        // Refer to https://popper.js.org/docs/v2/modifiers/arrow/
+        // return {
+        //   name: 'arrow',
+        //   enabled: !isUndefined(arrowEl),
+        //   options: {
+        //     element: arrowEl,
+        //     padding: offset,
+        //   },
+        // }
+        if (!(0, utils_1.isUndefined)(arrowEl)) {
+            if (state.get().elements) {
+                state.get().elements.arrow = arrowEl;
+            }
+        }
+        return (0, popper_1.arrow)({ element: arrowEl, padding: offset });
+    });
+    // 这个 options 对应的是 中间件 Middleware, 不包含其它的选项。
+    const options = (0, signals_1.computed)(() => {
+        // console.warn('useContent options computed . ');
+        return Object.assign({ onFirstUpdate: () => {
+                update();
+            } }, (0, utils_2.buildPopperOptions)(props, [
+            (0, signals_1.unref)(arrowMiddleware),
+            // unref(eventListenerModifier),
+        ]));
+    });
+    const computedReference = (0, signals_1.computed)(() => ((0, utils_2.unwrapMeasurableEl)(props.referenceEl) || (0, signals_1.unref)(triggerRef)));
+    const { attributes, state, styles, instanceRef, update, forceUpdate } = (0, use_popper_1.usePopper)(computedReference, contentRef, options);
+    (0, signals_1.watch)(instanceRef, (instance) => popperInstanceRef.set(instance));
+    (0, framework_1.onMounted)(() => {
+        (0, signals_1.watch)(() => {
+            var _a;
+            return (_a = (0, signals_1.unref)(computedReference)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        }, () => {
+            // virtual-trigger
+            update();
+        });
+    });
+    return {
+        attributes,
+        arrowRef,
+        contentRef,
+        instanceRef,
+        state,
+        styles,
+        role,
+        forceUpdate,
+        update,
+    };
+};
+exports.usePopperContent = usePopperContent;

package/src/components/feedback/td-popper/composable/use-focus-trap.d.ts

@@ -0,0 +1,11 @@
+import { PopperContentProps } from '../content/content.interface';
+export declare const usePopperContentFocusTrap: (props: PopperContentProps, emit: (evt: string) => void) => {
+    focusStartRef: import("@type-dom/signals").Signal<HTMLElement | "first" | "container">;
+    trapped: import("@type-dom/signals").Signal<boolean>;
+    onFocusAfterReleased: (event?: CustomEvent) => void;
+    onFocusAfterTrapped: () => void;
+    onFocusInTrap: (event?: FocusEvent) => void;
+    onFocusoutPrevented: (event?: CustomEvent) => void;
+    onReleaseRequested: () => void;
+};
+export type UsePopperContentFocusTrapReturn = ReturnType<typeof usePopperContentFocusTrap>;

package/src/components/feedback/td-popper/composable/use-focus-trap.js

@@ -1 +1,48 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopperContentFocusTrap = void 0;
+const signals_1 = require("@type-dom/signals");
+const usePopperContentFocusTrap = (props, emit) => {
+    const trapped = (0, signals_1.signal)(false);
+    const focusStartRef = (0, signals_1.signal)();
+    const onFocusAfterTrapped = () => {
+        emit('focus');
+    };
+    const onFocusAfterReleased = (event) => {
+        var _a;
+        if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.focusReason) !== 'pointer') {
+            focusStartRef.set('first');
+            emit('blur');
+        }
+    };
+    const onFocusInTrap = (event) => {
+        if ((0, signals_1.unref)(props.visible) && !trapped.get()) {
+            if (event === null || event === void 0 ? void 0 : event.target) {
+                focusStartRef.set(event.target);
+            }
+            trapped.set(true);
+        }
+    };
+    const onFocusoutPrevented = (event) => {
+        if (!props.trapping) {
+            if ((event === null || event === void 0 ? void 0 : event.detail.focusReason) === 'pointer') {
+                event.preventDefault();
+            }
+            trapped.set(false);
+        }
+    };
+    const onReleaseRequested = () => {
+        trapped.set(false);
+        emit('close');
+    };
+    return {
+        focusStartRef,
+        trapped,
+        onFocusAfterReleased,
+        onFocusAfterTrapped,
+        onFocusInTrap,
+        onFocusoutPrevented,
+        onReleaseRequested,
+    };
+};
+exports.usePopperContentFocusTrap = usePopperContentFocusTrap;

package/src/components/feedback/td-popper/constants.d.ts

@@ -1,25 +1,4 @@
-import { IStyle } from '@type-dom/css-type';
 import { InjectionKey } from '@type-dom/framework';
-import { TdPopper } from './td-popper.class';
-export type Measurable = {
-    getBoundingClientRect: () => DOMRect;
-};
-/**
- * triggerRef indicates the element that triggers popper
- * contentRef indicates the element of popper content
- * referenceRef indicates the element that popper content relative with
- */
-export type TdPopperInjectionContext = {
-    triggerRef: Measurable | undefined;
-    contentRef: HTMLElement | undefined;
-    popperInstanceRef: TdPopper | undefined;
-    referenceRef: Measurable | undefined;
-    role: string;
-};
-export type TdPopperContentInjectionContext = {
-    arrowRef: HTMLElement | undefined;
-    arrowOffset: number | undefined;
-    arrowStyle: IStyle;
-};
+import { TdPopperContentInjectionContext, TdPopperInjectionContext } from './td-popper.interface';
 export declare const POPPER_INJECTION_KEY: InjectionKey<TdPopperInjectionContext>;
 export declare const POPPER_CONTENT_INJECTION_KEY: InjectionKey<TdPopperContentInjectionContext>;