@type-dom/ui 0.0.10 → 0.1.1

package/src/components/feedback/td-focus-trap/focus-trap.js

@@ -0,0 +1,71 @@
+"use strict";
+// 原生焦点捕获
+class FocusTrap {
+    constructor(container) {
+        this.handleTab = (event) => {
+            var _a, _b;
+            if (event.key === 'Tab') {
+                const { shiftKey } = event;
+                const isTabbingForward = !shiftKey;
+                const focusedElement = document.activeElement;
+                if ((isTabbingForward && focusedElement === this.lastTabbableElement) ||
+                    (!isTabbingForward && focusedElement === this.firstTabbableElement)) {
+                    event.preventDefault();
+                    isTabbingForward ?
+                        (_a = this.firstTabbableElement) === null || _a === void 0 ? void 0 : _a.focus() :
+                        (_b = this.lastTabbableElement) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+            }
+        };
+        this.handleFocusIn = (event) => {
+            var _a;
+            const focusedElement = event.target;
+            if (focusedElement && !this.container.contains(focusedElement)) {
+                event.stopPropagation();
+                (_a = this.firstTabbableElement) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        this.container = container;
+        this.focusableElements = this.getTabbableElements();
+        this.firstTabbableElement = this.getFirstTabbableElement();
+        this.lastTabbableElement = this.getLastTabbableElement();
+        this.previousFocus = document.activeElement;
+    }
+    enable() {
+        if (this.container) {
+            this.previousFocus = document.activeElement;
+            this.container.setAttribute('tabindex', '0');
+            this.container.focus();
+            window.addEventListener('keydown', this.handleTab);
+            window.addEventListener('focusin', this.handleFocusIn);
+        }
+    }
+    disable() {
+        if (this.container) {
+            this.container.removeAttribute('tabindex');
+            if (this.previousFocus) {
+                this.previousFocus.focus();
+            }
+            window.removeEventListener('keydown', this.handleTab);
+            window.removeEventListener('focusin', this.handleFocusIn);
+        }
+    }
+    getTabbableElements() {
+        return this.container.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]');
+    }
+    getFirstTabbableElement() {
+        const elements = Array.from(this.focusableElements);
+        return elements.length > 0 ? elements[0] : null;
+    }
+    getLastTabbableElement() {
+        const elements = Array.from(this.focusableElements);
+        return elements.length > 0 ? elements[elements.length - 1] : null;
+    }
+}
+//
+// // 使用示例
+// const modal = document.getElementById('modal');
+// const focusTrap = new FocusTrap(modal);
+// focusTrap.enable(); // 启用 focus trap
+// // 在需要的地方禁用 focus trap
+// focusTrap.disable();

package/src/components/feedback/td-focus-trap/td-focus-trap.class.d.ts

@@ -1,27 +1,8 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdFocusTrap, ITdFocusTrapConfig } from './td-focus-trap.interface';
-export declare class TdFocusTrap extends UI<undefined> implements ITdFocusTrap {
+import { TypeFragment } from '@type-dom/framework';
+import { ITdFocusTrap, FocusTrapProps } from './td-focus-trap.interface';
+export declare class TdFocusTrap extends TypeFragment implements ITdFocusTrap {
     className: 'TdFocusTrap';
-    props: ITdFocusTrapConfig;
-    inheritAttrs: boolean;
-    forwardRef?: HTMLElement;
-    lastFocusBeforeTrapped?: HTMLElement;
-    lastFocusAfterTrapped?: HTMLElement;
-    handelKeydown?: (e: KeyboardEvent) => void;
-    private escapeKeydown?;
-    private focusLayer?;
-    private focusReason?;
-    constructor(params?: ITdFocusTrapConfig);
+    props: FocusTrapProps;
+    constructor(params?: FocusTrapProps);
     setup(): void;
-    mounted(): void;
-    beforeDestroy(): void;
-    onKeydown(e: KeyboardEvent): void;
-    setFocusTrapEl(el: HTMLElement): void;
-    setForwardRef(newEl: HTMLElement, oldEl: HTMLElement): void;
-    trapOnFocus(e: Event): void;
-    releaseOnFocus(e: Event): void;
-    onFocusIn(e: FocusEvent): void;
-    onFocusOut(e: Event): void;
-    startTrap(): Promise<void>;
-    stopTrap(): void;
 }

package/src/components/feedback/td-focus-trap/td-focus-trap.class.js

@@ -4,253 +4,264 @@ exports.TdFocusTrap = void 0;
 const tslib_1 = require("tslib");
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
 const use_escape_keydown_1 = require("../../../hooks/use-escape-keydown");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const aria_1 = require("../../../constants/aria");
 const utils_2 = require("./utils");
 const tokens_1 = require("./tokens");
-class TdFocusTrap extends ui_abstract_1.UI {
+class TdFocusTrap extends framework_1.TypeFragment {
     constructor(params = {}) {
-        super(params, 'fragment');
+        super();
         this.className = 'TdFocusTrap';
-        this.inheritAttrs = false;
+        this.assignProps({ focusStartEl: 'first' });
         this.props = this.useParams(params);
     }
     setup() {
+        var _a;
+        const props = this.props;
+        const emit = this.emit;
+        const forwardRef = (0, signals_1.signal)();
+        let lastFocusBeforeTrapped;
+        let lastFocusAfterTrapped;
         const { focusReason } = (0, utils_2.useFocusReason)();
-        this.focusReason = focusReason;
-        this.escapeKeydown = (0, use_escape_keydown_1.useEscapeKeydown)((event) => {
-            var _a;
-            if (this.props.trapped && !((_a = this.focusLayer) === null || _a === void 0 ? void 0 : _a.paused)) {
-                this.emit('release-requested', event);
+        (0, use_escape_keydown_1.useEscapeKeydown)((event) => {
+            if (props.trapped && !focusLayer.paused) {
+                emit('releaseRequested', event);
             }
         });
-        this.focusLayer = {
+        const focusLayer = {
             paused: false,
             pause() {
                 this.paused = true;
             },
             resume() {
                 this.paused = false;
-            }
+            },
         };
-        this.handelKeydown = this.onKeydown;
-        this.provide(tokens_1.FOCUS_TRAP_INJECTION_KEY, {
-            focusTrapRef: this.forwardRef,
-            onKeydown: this.onKeydown
-        });
-    }
-    mounted() {
-        var _a;
-        (_a = this.escapeKeydown) === null || _a === void 0 ? void 0 : _a.mounted();
-        if (this.props.trapped) {
-            this.startTrap();
-        }
-    }
-    beforeDestroy() {
-        var _a;
-        (_a = this.escapeKeydown) === null || _a === void 0 ? void 0 : _a.beforeDestroy();
-    }
-    onKeydown(e) {
-        var _a;
-        if (!this.props.loop && !this.props.trapped) {
-            return;
-        }
-        if ((_a = this.focusLayer) === null || _a === void 0 ? void 0 : _a.paused) {
-            return;
-        }
-        const { key, altKey, ctrlKey, metaKey, currentTarget, shiftKey } = e;
-        const { loop } = this.props;
-        const isTabbing = key === utils_1.EVENT_CODE.tab && !altKey && !ctrlKey && !metaKey;
-        const currentFocusingEl = document.activeElement;
-        if (isTabbing && currentFocusingEl) {
-            const container = currentTarget;
-            const [first, last] = (0, utils_2.getEdges)(container);
-            const isTabbable = first && last;
-            if (isTabbable) {
-                if (!shiftKey && currentFocusingEl === last) {
-                    const focusoutPreventedEvent = (0, utils_2.createFocusOutPreventedEvent)({
-                        focusReason: this.focusReason
-                    });
-                    // emit('focusout-prevented', focusoutPreventedEvent);
-                    if (!focusoutPreventedEvent.defaultPrevented) {
-                        e.preventDefault();
-                        if (loop) {
-                            (0, utils_2.tryFocus)(first, true);
+        const onKeydown = (e) => {
+            if (!props.loop && !props.trapped)
+                return;
+            if (focusLayer.paused)
+                return;
+            const { code, altKey, ctrlKey, metaKey, currentTarget, shiftKey } = e;
+            const { loop } = props;
+            const isTabbing = code === aria_1.EVENT_CODE.tab && !altKey && !ctrlKey && !metaKey;
+            const currentFocusingEl = document.activeElement;
+            if (isTabbing && currentFocusingEl) {
+                const container = currentTarget;
+                const [first, last] = (0, utils_2.getEdges)(container);
+                const isTabbable = first && last;
+                if (!isTabbable) {
+                    if (currentFocusingEl === container) {
+                        const focusoutPreventedEvent = (0, utils_2.createFocusOutPreventedEvent)({
+                            focusReason: focusReason.get(),
+                        });
+                        emit('focusoutPrevented', focusoutPreventedEvent);
+                        if (!focusoutPreventedEvent.defaultPrevented) {
+                            e.preventDefault();
                         }
                     }
                 }
-                else if (shiftKey &&
-                    [first, container].includes(currentFocusingEl)) {
-                    const focusoutPreventedEvent = (0, utils_2.createFocusOutPreventedEvent)({
-                        focusReason: this.focusReason
-                    });
-                    // emit('focusout-prevented', focusoutPreventedEvent);
-                    if (!focusoutPreventedEvent.defaultPrevented) {
-                        e.preventDefault();
-                        if (loop) {
-                            (0, utils_2.tryFocus)(last, true);
+                else {
+                    if (!shiftKey && currentFocusingEl === last) {
+                        const focusoutPreventedEvent = (0, utils_2.createFocusOutPreventedEvent)({
+                            focusReason: focusReason.get(),
+                        });
+                        emit('focusoutPrevented', focusoutPreventedEvent);
+                        if (!focusoutPreventedEvent.defaultPrevented) {
+                            e.preventDefault();
+                            if (loop)
+                                (0, utils_2.tryFocus)(first, true);
+                        }
+                    }
+                    else if (shiftKey &&
+                        [first, container].includes(currentFocusingEl)) {
+                        const focusoutPreventedEvent = (0, utils_2.createFocusOutPreventedEvent)({
+                            focusReason: focusReason.get(),
+                        });
+                        emit('focusoutPrevented', focusoutPreventedEvent);
+                        if (!focusoutPreventedEvent.defaultPrevented) {
+                            e.preventDefault();
+                            if (loop)
+                                (0, utils_2.tryFocus)(last, true);
                         }
                     }
                 }
             }
-            else {
-                if (currentFocusingEl === container) {
-                    const focusoutPreventedEvent = (0, utils_2.createFocusOutPreventedEvent)({
-                        focusReason: this.focusReason
-                    });
-                    // emit('focusout-prevented', focusoutPreventedEvent);
-                    if (!focusoutPreventedEvent.defaultPrevented) {
-                        e.preventDefault();
-                    }
+        };
+        (0, framework_1.provide)(tokens_1.FOCUS_TRAP_INJECTION_KEY, {
+            focusTrapRef: forwardRef,
+            onKeydown,
+        });
+        const trapOnFocus = (e) => {
+            emit(tokens_1.ON_TRAP_FOCUS_EVT, e);
+        };
+        const releaseOnFocus = (e) => emit(tokens_1.ON_RELEASE_FOCUS_EVT, e);
+        const onFocusIn = (e) => {
+            const trapContainer = (0, signals_1.unref)(forwardRef);
+            if (!trapContainer)
+                return;
+            const target = e.target;
+            const relatedTarget = e.relatedTarget;
+            const isFocusedInTrap = target && trapContainer.contains(target);
+            if (!props.trapped) {
+                const isPrevFocusedInTrap = relatedTarget && trapContainer.contains(relatedTarget);
+                if (!isPrevFocusedInTrap) {
+                    lastFocusBeforeTrapped = relatedTarget;
                 }
             }
-        }
-    }
-    setFocusTrapEl(el) {
-        if (el) {
-            this.props.focusTrapEl = el;
-            this.forwardRef = el;
-        }
-    }
-    setForwardRef(newEl, oldEl) {
-        if (newEl) {
-            newEl.addEventListener('keydown', this.onKeydown);
-            newEl.addEventListener('focusin', this.onFocusIn);
-            newEl.addEventListener('focusout', this.onFocusOut);
-        }
-        if (oldEl) {
-            oldEl.removeEventListener('keydown', this.onKeydown);
-            oldEl.removeEventListener('focusin', this.onFocusIn);
-            oldEl.removeEventListener('focusout', this.onFocusOut);
-        }
-    }
-    trapOnFocus(e) {
-        this.emit(tokens_1.ON_TRAP_FOCUS_EVT, e);
-    }
-    releaseOnFocus(e) {
-        this.emit(tokens_1.ON_RELEASE_FOCUS_EVT, e);
-    }
-    onFocusIn(e) {
-        var _a;
-        const trapContainer = this.forwardRef;
-        if (!trapContainer) {
-            return;
-        }
-        const target = e.target;
-        const relatedTarget = e.relatedTarget;
-        const isFocusedInTrap = target && trapContainer.contains(target);
-        if (!this.props.trapped) {
-            const isPrevFocusedInTrap = relatedTarget && trapContainer.contains(relatedTarget);
-            if (!isPrevFocusedInTrap) {
-                this.lastFocusBeforeTrapped = relatedTarget;
+            if (isFocusedInTrap)
+                emit('focusin', e);
+            if (focusLayer.paused)
+                return;
+            if (props.trapped) {
+                if (isFocusedInTrap) {
+                    lastFocusAfterTrapped = target;
+                }
+                else {
+                    (0, utils_2.tryFocus)(lastFocusAfterTrapped, true);
+                }
             }
-        }
-        if (isFocusedInTrap) {
-            this.emit('focusin', e);
-        }
-        if ((_a = this.focusLayer) === null || _a === void 0 ? void 0 : _a.paused) {
-            return;
-        }
-        if (this.props.trapped) {
-            if (isFocusedInTrap) {
-                this.lastFocusAfterTrapped = target;
+        };
+        const onFocusOut = (e) => {
+            const trapContainer = (0, signals_1.unref)(forwardRef);
+            if (focusLayer.paused || !trapContainer)
+                return;
+            if (props.trapped) {
+                const relatedTarget = e
+                    .relatedTarget;
+                if (!(0, utils_1.isNil)(relatedTarget) && !trapContainer.contains(relatedTarget)) {
+                    // Give embedded focus layer time to pause this layer before reclaiming focus
+                    // And only reclaim focus if it should currently be trapping
+                    setTimeout(() => {
+                        if (!focusLayer.paused && props.trapped) {
+                            const focusoutPreventedEvent = (0, utils_2.createFocusOutPreventedEvent)({
+                                focusReason: focusReason.get(),
+                            });
+                            emit('focusoutPrevented', focusoutPreventedEvent);
+                            if (!focusoutPreventedEvent.defaultPrevented) {
+                                (0, utils_2.tryFocus)(lastFocusAfterTrapped, true);
+                            }
+                        }
+                    }, 0);
+                }
             }
             else {
-                (0, utils_2.tryFocus)(this.lastFocusAfterTrapped, true);
+                const target = e.target;
+                const isFocusedInTrap = target && trapContainer.contains(target);
+                if (!isFocusedInTrap)
+                    emit('focusout', e);
             }
-        }
-    }
-    ;
-    onFocusOut(e) {
-        var _a;
-        const trapContainer = this.forwardRef;
-        if (((_a = this.focusLayer) === null || _a === void 0 ? void 0 : _a.paused) || !trapContainer) {
-            return;
-        }
-        if (this.props.trapped) {
-            const relatedTarget = e
-                .relatedTarget;
-            if (!(0, utils_1.isNil)(relatedTarget) && !trapContainer.contains(relatedTarget)) {
-                // Give embedded focus layer time to pause this layer before reclaiming focus
-                // And only reclaim focus if it should currently be trapping
-                setTimeout(() => {
-                    var _a;
-                    if (!((_a = this.focusLayer) === null || _a === void 0 ? void 0 : _a.paused) && this.props.trapped) {
-                        const focusoutPreventedEvent = (0, utils_2.createFocusOutPreventedEvent)({
-                            focusReason: this.focusReason
-                        });
-                        this.emit('focusout-prevented', focusoutPreventedEvent);
-                        if (!focusoutPreventedEvent.defaultPrevented) {
-                            (0, utils_2.tryFocus)(this.lastFocusAfterTrapped, true);
+        };
+        function startTrap() {
+            return tslib_1.__awaiter(this, void 0, void 0, function* () {
+                // Wait for forwardRef to resolve
+                yield (0, framework_1.nextTick)();
+                const trapContainer = (0, signals_1.unref)(forwardRef);
+                if (trapContainer) {
+                    utils_2.focusableStack.push(focusLayer);
+                    const prevFocusedElement = trapContainer.contains(document.activeElement)
+                        ? lastFocusBeforeTrapped
+                        : document.activeElement;
+                    lastFocusBeforeTrapped = prevFocusedElement;
+                    const isPrevFocusContained = trapContainer.contains(prevFocusedElement);
+                    if (!isPrevFocusContained) {
+                        const focusEvent = new Event(tokens_1.FOCUS_AFTER_TRAPPED, tokens_1.FOCUS_AFTER_TRAPPED_OPTS);
+                        trapContainer.addEventListener(tokens_1.FOCUS_AFTER_TRAPPED, trapOnFocus);
+                        trapContainer.dispatchEvent(focusEvent);
+                        if (!focusEvent.defaultPrevented) {
+                            (0, framework_1.nextTick)(() => {
+                                let focusStartEl = props.focusStartEl;
+                                if (!(0, utils_1.isString)(focusStartEl)) {
+                                    (0, utils_2.tryFocus)((0, signals_1.toRaw)(focusStartEl));
+                                    if (document.activeElement !== focusStartEl) {
+                                        focusStartEl = 'first';
+                                    }
+                                }
+                                if (focusStartEl === 'first') {
+                                    (0, utils_2.focusFirstDescendant)((0, utils_2.obtainAllFocusableElements)(trapContainer), true);
+                                }
+                                if (document.activeElement === prevFocusedElement ||
+                                    focusStartEl === 'container') {
+                                    (0, utils_2.tryFocus)(trapContainer);
+                                }
+                            });
                         }
                     }
-                }, 0);
-            }
-        }
-        else {
-            const target = e.target;
-            const isFocusedInTrap = target && trapContainer.contains(target);
-            if (!isFocusedInTrap)
-                this.emit('focusout', e);
+                }
+            });
         }
-    }
-    startTrap() {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            // Wait for forwardRef to resolve
-            yield (0, framework_1.nextTick)();
-            const trapContainer = this.forwardRef;
+        function stopTrap() {
+            const trapContainer = (0, signals_1.unref)(forwardRef);
             if (trapContainer) {
-                utils_2.focusableStack.push(this.focusLayer);
-                const prevFocusedElement = trapContainer.contains(document.activeElement)
-                    ? this.lastFocusBeforeTrapped
-                    : document.activeElement;
-                this.lastFocusBeforeTrapped = prevFocusedElement;
-                const isPrevFocusContained = trapContainer.contains(prevFocusedElement);
-                if (!isPrevFocusContained) {
-                    const focusEvent = new Event(tokens_1.FOCUS_AFTER_TRAPPED, tokens_1.FOCUS_AFTER_TRAPPED_OPTS);
-                    trapContainer.addEventListener(tokens_1.FOCUS_AFTER_TRAPPED, this.trapOnFocus);
-                    trapContainer.dispatchEvent(focusEvent);
-                    if (!focusEvent.defaultPrevented) {
-                        (0, framework_1.nextTick)(() => {
-                            let focusStartEl = this.props.focusStartEl;
-                            if (!(0, utils_1.isString)(focusStartEl)) {
-                                (0, utils_2.tryFocus)(focusStartEl);
-                                if (document.activeElement !== focusStartEl) {
-                                    focusStartEl = 'first';
-                                }
-                            }
-                            if (focusStartEl === 'first') {
-                                (0, utils_2.focusFirstDescendant)((0, utils_2.obtainAllFocusableElements)(trapContainer), true);
-                            }
-                            if (document.activeElement === prevFocusedElement ||
-                                focusStartEl === 'container') {
-                                (0, utils_2.tryFocus)(trapContainer);
-                            }
-                        });
-                    }
+                trapContainer.removeEventListener(tokens_1.FOCUS_AFTER_TRAPPED, trapOnFocus);
+                const releasedEvent = new CustomEvent(tokens_1.FOCUS_AFTER_RELEASED, Object.assign(Object.assign({}, tokens_1.FOCUS_AFTER_TRAPPED_OPTS), { detail: {
+                        focusReason: focusReason.get(),
+                    } }));
+                trapContainer.addEventListener(tokens_1.FOCUS_AFTER_RELEASED, releaseOnFocus);
+                trapContainer.dispatchEvent(releasedEvent);
+                if (!releasedEvent.defaultPrevented &&
+                    (focusReason.get() == 'keyboard' ||
+                        !(0, utils_2.isFocusCausedByUserEvent)() ||
+                        trapContainer.contains(document.activeElement))) {
+                    (0, utils_2.tryFocus)(lastFocusBeforeTrapped !== null && lastFocusBeforeTrapped !== void 0 ? lastFocusBeforeTrapped : document.body);
                 }
+                trapContainer.removeEventListener(tokens_1.FOCUS_AFTER_RELEASED, releaseOnFocus);
+                utils_2.focusableStack.remove(focusLayer);
+            }
+        }
+        (0, signals_1.watch)(() => (0, signals_1.unref)(props.focusTrapEl), (focusTrapEl) => {
+            if (focusTrapEl) {
+                forwardRef.set(focusTrapEl);
+            }
+        }, { immediate: true });
+        (0, signals_1.watch)(() => forwardRef.get(), (forwardRef, oldForwardRef) => {
+            if (forwardRef) {
+                forwardRef.addEventListener('keydown', onKeydown);
+                forwardRef.addEventListener('focusin', onFocusIn);
+                forwardRef.addEventListener('focusout', onFocusOut);
+            }
+            if (oldForwardRef) {
+                oldForwardRef.removeEventListener('keydown', onKeydown);
+                oldForwardRef.removeEventListener('focusin', onFocusIn);
+                oldForwardRef.removeEventListener('focusout', onFocusOut);
             }
         });
-    }
-    stopTrap() {
-        var _a;
-        const trapContainer = this.forwardRef;
-        if (trapContainer) {
-            trapContainer.removeEventListener(tokens_1.FOCUS_AFTER_TRAPPED, this.trapOnFocus);
-            const releasedEvent = new CustomEvent(tokens_1.FOCUS_AFTER_RELEASED, Object.assign(Object.assign({}, tokens_1.FOCUS_AFTER_TRAPPED_OPTS), { detail: {
-                    focusReason: this.focusReason
-                } }));
-            trapContainer.addEventListener(tokens_1.FOCUS_AFTER_RELEASED, this.releaseOnFocus);
-            trapContainer.dispatchEvent(releasedEvent);
-            if (!releasedEvent.defaultPrevented &&
-                (this.focusReason == 'keyboard' ||
-                    !(0, utils_2.isFocusCausedByUserEvent)() ||
-                    trapContainer.contains(document.activeElement))) {
-                (0, utils_2.tryFocus)((_a = this.lastFocusBeforeTrapped) !== null && _a !== void 0 ? _a : document.body);
+        (0, framework_1.onMounted)(() => {
+            if (props.trapped) {
+                startTrap();
             }
-            trapContainer.removeEventListener(tokens_1.FOCUS_AFTER_RELEASED, this.releaseOnFocus);
-            utils_2.focusableStack.remove(this.focusLayer);
-        }
+            (0, signals_1.watch)(() => (0, signals_1.unref)(props.trapped), (trapped) => {
+                if (trapped) {
+                    startTrap();
+                }
+                else {
+                    stopTrap();
+                }
+            });
+        });
+        (0, framework_1.onBeforeUnmount)(() => {
+            var _a, _b, _c;
+            if (props.trapped) {
+                stopTrap();
+            }
+            if (forwardRef.get()) {
+                (_a = forwardRef.get()) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', onKeydown);
+                (_b = forwardRef.get()) === null || _b === void 0 ? void 0 : _b.removeEventListener('focusin', onFocusIn);
+                (_c = forwardRef.get()) === null || _c === void 0 ? void 0 : _c.removeEventListener('focusout', onFocusOut);
+                forwardRef.set(undefined);
+            }
+        });
+        // return {
+        //   onKeydown,
+        // }
+        this.addEmits({
+            // todo
+            handleKeydown: onKeydown,
+        });
+        this.slotChildren((_a = props.slot) === null || _a === void 0 ? void 0 : _a.call(props, {
+            handleKeydown: onKeydown,
+        }));
     }
 }
 exports.TdFocusTrap = TdFocusTrap;

package/src/components/feedback/td-focus-trap/td-focus-trap.interface.d.ts

@@ -1,13 +1,16 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeFragment, TypeFragmentProps, ISlotRaw } from '@type-dom/framework';
 import { ON_RELEASE_FOCUS_EVT, ON_TRAP_FOCUS_EVT } from './tokens';
-export interface ITdFocusTrap extends IUI {
+import { MaybeRef } from '@type-dom/signals';
+export interface ITdFocusTrap extends ITypeFragment {
     className: 'TdFocusTrap';
 }
-export interface ITdFocusTrapConfig extends IUIConfig {
+export interface FocusTrapProps extends TypeFragmentProps {
     loop?: boolean;
-    trapped?: boolean;
-    focusTrapEl?: HTMLElement;
-    focusStartEl?: 'container' | 'first' | HTMLElement;
+    trapped?: MaybeRef<boolean>;
+    trapOnFocusIn?: boolean;
+    focusTrapEl?: MaybeRef<HTMLElement | undefined>;
+    focusStartEl?: MaybeRef<'container' | 'first' | HTMLElement | undefined>;
+    slot?: (arg?: any) => ISlotRaw | ISlotRaw[];
     emits?: {
         [ON_TRAP_FOCUS_EVT]?: () => void;
         [ON_RELEASE_FOCUS_EVT]?: () => void;

package/src/components/feedback/td-focus-trap/tokens.d.ts

@@ -1,3 +1,4 @@
+import { Ref } from '@type-dom/signals';
 import { InjectionKey } from '@type-dom/framework';
 export declare const FOCUS_AFTER_TRAPPED = "focus-trap.focus-after-trapped";
 export declare const FOCUS_AFTER_RELEASED = "focus-trap.focus-after-released";
@@ -7,7 +8,7 @@ export declare const FOCUSOUT_PREVENTED_OPTS: EventInit;
 export declare const ON_TRAP_FOCUS_EVT = "focusAfterTrapped";
 export declare const ON_RELEASE_FOCUS_EVT = "focusAfterReleased";
 export type FocusTrapInjectionContext = {
-    focusTrapRef: HTMLElement | undefined;
+    focusTrapRef: Ref<HTMLElement | undefined>;
     onKeydown: (e: KeyboardEvent) => void;
 };
 export declare const FOCUS_TRAP_INJECTION_KEY: InjectionKey<FocusTrapInjectionContext>;

package/src/components/feedback/td-focus-trap/tokens.js

@@ -6,11 +6,11 @@ exports.FOCUS_AFTER_RELEASED = 'focus-trap.focus-after-released';
 exports.FOCUSOUT_PREVENTED = 'focus-trap.focusout-prevented';
 exports.FOCUS_AFTER_TRAPPED_OPTS = {
     cancelable: true,
-    bubbles: false
+    bubbles: false,
 };
 exports.FOCUSOUT_PREVENTED_OPTS = {
     cancelable: true,
-    bubbles: false
+    bubbles: false,
 };
 exports.ON_TRAP_FOCUS_EVT = 'focusAfterTrapped';
 exports.ON_RELEASE_FOCUS_EVT = 'focusAfterReleased';

package/src/components/feedback/td-focus-trap/utils.d.ts

@@ -1,4 +1,6 @@
-declare let focusReason: 'pointer' | 'keyboard';
+declare const focusReason: import("@type-dom/signals").Signal<"pointer" | "keyboard" | undefined>;
+declare const lastUserFocusTimestamp: import("@type-dom/signals").Signal<number>;
+declare const lastAutomatedFocusTimestamp: import("@type-dom/signals").Signal<number>;
 export type FocusLayer = {
     paused: boolean;
     pause: () => void;
@@ -20,6 +22,8 @@ export declare const focusableStack: {
 export declare const isFocusCausedByUserEvent: () => boolean;
 export declare const useFocusReason: () => {
     focusReason: typeof focusReason;
+    lastUserFocusTimestamp: typeof lastUserFocusTimestamp;
+    lastAutomatedFocusTimestamp: typeof lastAutomatedFocusTimestamp;
 };
 export declare const createFocusOutPreventedEvent: (detail: CustomEventInit["detail"]) => CustomEvent<any>;
 export {};