@type-dom/ui 0.0.10 → 0.1.0

package/src/components/feedback/td-dialog/td-dialog.class.js

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdDialog = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-const td_dialog_content_class_1 = require("../td-dialog-content/td-dialog-content.class");
-const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
 const event_1 = require("../../../constants/event");
-class TdDialog extends ui_abstract_1.UI {
+const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
+const td_dialog_content_class_1 = require("../td-dialog-content/td-dialog-content.class");
+// todo 最外层是 Teleport
+class TdDialog extends framework_1.TypeFragment {
     constructor(params = {}) {
-        super(params, 'fragment');
+        super();
+        // this.useTag('fragment');
         console.log('TdDialog . ');
         this.className = 'TdDialog';
         const appendTo = (params === null || params === void 0 ? void 0 : params.appendToBody) ? document.body : params === null || params === void 0 ? void 0 : params.appendTo;
@@ -25,31 +26,26 @@ class TdDialog extends ui_abstract_1.UI {
                 zIndex: td_overlay_class_1.overlayZIndex + 1000,
             });
         }
-        this.teleport = new framework_1.Teleport({
-            // disabled: appendTo !== document.body ? false : false,
-            to: appendTo,
-            childNodes: [
-                new framework_1.Transition({
-                    name: 'dialog-fade',
-                    emits: {
-                        afterEnter: () => {
-                            console.log('afterEnter . ');
-                            this.afterEnter();
-                        },
-                        afterLeave: () => {
-                            console.log('afterLeave . ');
-                            this.afterLeave();
-                        },
-                        beforeLeave: () => {
-                            console.log('beforeLeave . ');
-                            this.beforeLeave();
-                        }
-                    },
-                    slot: this.overlay,
-                }),
-            ]
+        // todo error  Teleport import
+        this.content = new framework_1.Transition({
+            name: 'dialog-fade',
+            emits: {
+                afterEnter: () => {
+                    console.log('afterEnter . ');
+                    this.afterEnter();
+                },
+                afterLeave: () => {
+                    console.log('afterLeave . ');
+                    this.afterLeave();
+                },
+                beforeLeave: () => {
+                    console.log('beforeLeave . ');
+                    this.beforeLeave();
+                }
+            },
+            slot: this.overlay,
         });
-        this.addChild(this.teleport);
+        this.addChild(this.content);
         this.props = this.useParams(params);
     }
     show() {

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

@@ -1,7 +1,7 @@
-import { IUI } from '../../../ui/ui.interface';
-import { ITdDialogContentConfig } from '../td-dialog-content/td-dialog-content.interface';
+import { ITypeElement } from '@type-dom/framework';
 import { UPDATE_MODEL_EVENT } from '../../../constants/event';
-export interface ITdDialog extends IUI {
+import { ITdDialogContentConfig } from '../td-dialog-content/td-dialog-content.interface';
+export interface ITdDialog extends ITypeElement {
     className: 'TdDialog';
 }
 export interface ITdDialogConfig extends ITdDialogContentConfig {

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dialogEmits = void 0;
-const event_1 = require("../../../constants/event");
 const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
 exports.dialogEmits = {
     open: () => true,
     opened: () => true,

package/src/components/feedback/td-dialog-content/td-dialog-content.class.d.ts

@@ -1,8 +1,7 @@
-import { Div, Footer, Header } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Div, Footer, Header, TypeDiv } from '@type-dom/framework';
 import { ITdDialogConfig } from '../td-dialog/td-dialog.interface';
 import { ITdDialogContent } from './td-dialog-content.interface';
-export declare class TdDialogContent extends UI implements ITdDialogContent {
+export declare class TdDialogContent extends TypeDiv implements ITdDialogContent {
     className: 'TdDialogContent';
     props: ITdDialogConfig;
     header?: Header;

package/src/components/feedback/td-dialog-content/td-dialog-content.class.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdDialogContent = void 0;
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_dialog_style_1 = require("../td-dialog/td-dialog.style");
-class TdDialogContent extends ui_abstract_1.UI {
+class TdDialogContent extends framework_1.TypeDiv {
     constructor(params = {}) {
         var _a, _b, _c;
-        super(params);
+        super();
         this.className = 'TdDialogContent';
+        // this.useTag('div');
         this.style.addObj(td_dialog_style_1.$dialogStyle);
         this.header = new framework_1.Header({
             className: 'td-dialog-content',
@@ -21,8 +21,9 @@ class TdDialogContent extends ui_abstract_1.UI {
                 width: params.width,
             });
         }
-        this.header.addChild(this.getSlotNode('header'));
+        // this.header.addChild(this.getSlotNode('header'));
         if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.header) {
+            this.header.slotChild(params.slots.header);
         }
         else {
             const header = new framework_1.Span({
@@ -32,7 +33,8 @@ class TdDialogContent extends ui_abstract_1.UI {
                 },
                 styleObj: td_dialog_style_1.$dialogTitleStyle,
             });
-            this.getSlotNode('header').addSlot(header);
+            this.header.addChild(header);
+            // this.getSlotNode('header').addSlot(header);
         }
         const showClose = (_b = params === null || params === void 0 ? void 0 : params.showClose) !== null && _b !== void 0 ? _b : true;
         const closeIcon = (params === null || params === void 0 ? void 0 : params.closeIcon) ? params.closeIcon : new td_icon_class_1.TdIcon({
@@ -63,14 +65,15 @@ class TdDialogContent extends ui_abstract_1.UI {
             name: 'td-dialog-body',
             styleObj: td_dialog_style_1.$dialogBodyStyle
         });
-        this.body.addChild(this.getSlotNode());
+        this.body.slotChild(params.slot);
         this.addChildren(this.header, this.body);
         if ((_c = params === null || params === void 0 ? void 0 : params.slots) === null || _c === void 0 ? void 0 : _c.footer) {
             this.footer = new framework_1.Footer({
                 name: 'td-dialog-footer',
                 styleObj: td_dialog_style_1.$dialogFooterStyle,
             });
-            this.footer.addChild(this.getSlotNode('footer'));
+            // this.footer.addChild(this.getSlotNode('footer'));
+            this.footer.slotChild(params.slots.footer);
             this.addChild(this.footer);
         }
         this.props = this.useParams(params);

package/src/components/feedback/td-dialog-content/td-dialog-content.interface.d.ts

@@ -1,10 +1,9 @@
-import { TypeHtml } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeDiv, TypeHtml } from '@type-dom/framework';
 import { TdIcon } from '../../basic/td-icon/td-icon.class';
-export interface ITdDialogContent extends IUI {
+export interface ITdDialogContent extends ITypeDiv {
     className: 'TdDialogContent';
 }
-export interface ITdDialogContentConfig extends IUIConfig {
+export interface ITdDialogContentConfig extends ITypeConfig {
     /**
      * @description whether to align the header and footer in center
      */

package/src/components/feedback/td-drawer/td-drawer.class.d.ts

@@ -1,8 +1,8 @@
-import { UI } from '../../../ui/ui.abstract';
+import { Transition, TypeFragment } from '@type-dom/framework';
 import { ITdDrawer, ITdDrawerConfig } from './td-drawer.interface';
-export declare class TdDrawer extends UI<undefined> implements ITdDrawer {
+export declare class TdDrawer extends TypeFragment implements ITdDrawer {
     className: 'TdDrawer';
+    content: Transition;
     props: ITdDrawerConfig;
-    private transition;
     constructor(params?: ITdDrawerConfig);
 }

package/src/components/feedback/td-drawer/td-drawer.class.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdDrawer = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
-class TdDrawer extends ui_abstract_1.UI {
+class TdDrawer extends framework_1.TypeFragment {
     constructor(params = {}) {
-        super(params, 'fragment');
+        super();
+        // this.useTag('fragment');
         this.className = 'TdDrawer';
-        this.transition = new framework_1.Transition({
+        this.content = new framework_1.Transition({
             name: 'fade',
             emits: {
                 afterEnter: () => {
@@ -32,7 +32,7 @@ class TdDrawer extends ui_abstract_1.UI {
                 }
             })
         });
-        this.addChild(this.transition);
+        this.addChild(this.content);
         this.props = this.useParams(params);
     }
 }

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

@@ -1,6 +1,6 @@
-import { IUI } from '../../../ui/ui.interface';
+import { ITypeElement } from '@type-dom/framework';
 import { ITdDialogConfig } from '../td-dialog/td-dialog.interface';
-export interface ITdDrawer extends IUI {
+export interface ITdDrawer extends ITypeElement {
     className: 'TdDrawer';
 }
 export interface ITdDrawerConfig extends ITdDialogConfig {

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

@@ -0,0 +1,15 @@
+declare class FocusTrap {
+    private container;
+    private focusableElements;
+    private firstTabbableElement;
+    private lastTabbableElement;
+    private previousFocus;
+    constructor(container: HTMLElement);
+    enable(): void;
+    disable(): void;
+    private handleTab;
+    private handleFocusIn;
+    private getTabbableElements;
+    private getFirstTabbableElement;
+    private getLastTabbableElement;
+}

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,7 +1,8 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeElement, TypeFragment } from '@type-dom/framework';
 import { ITdFocusTrap, ITdFocusTrapConfig } from './td-focus-trap.interface';
-export declare class TdFocusTrap extends UI<undefined> implements ITdFocusTrap {
+export declare class TdFocusTrap extends TypeFragment implements ITdFocusTrap {
     className: 'TdFocusTrap';
+    content: TypeElement;
     props: ITdFocusTrapConfig;
     inheritAttrs: boolean;
     forwardRef?: HTMLElement;
@@ -15,13 +16,13 @@ export declare class TdFocusTrap extends UI<undefined> implements ITdFocusTrap {
     setup(): void;
     mounted(): void;
     beforeDestroy(): void;
-    onKeydown(e: KeyboardEvent): 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;
+    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

@@ -5,13 +5,139 @@ const tslib_1 = require("tslib");
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
 const use_escape_keydown_1 = require("../../../hooks/use-escape-keydown");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 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.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
+                        });
+                        this.emit('focusout-prevented', 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: this.focusReason
+                        });
+                        // emit('focusout-prevented', 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();
+                        }
+                    }
+                }
+            }
+        };
+        this.trapOnFocus = (e) => {
+            this.emit(tokens_1.ON_TRAP_FOCUS_EVT, e);
+        };
+        this.releaseOnFocus = (e) => {
+            this.emit(tokens_1.ON_RELEASE_FOCUS_EVT, e);
+        };
+        this.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) {
+                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;
+                }
+                else {
+                    (0, utils_2.tryFocus)(this.lastFocusAfterTrapped, true);
+                }
+            }
+        };
+        this.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);
+                            }
+                        }
+                    }, 0);
+                }
+            }
+            else {
+                const target = e.target;
+                const isFocusedInTrap = target && trapContainer.contains(target);
+                if (!isFocusedInTrap)
+                    this.emit('focusout', e);
+            }
+        };
+        // this.useTag('fragment');
         this.className = 'TdFocusTrap';
+        this.content = params.slot;
         this.inheritAttrs = false;
         this.props = this.useParams(params);
     }
@@ -50,62 +176,6 @@ class TdFocusTrap extends ui_abstract_1.UI {
         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);
-                        }
-                    }
-                }
-                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 (currentFocusingEl === container) {
-                    const focusoutPreventedEvent = (0, utils_2.createFocusOutPreventedEvent)({
-                        focusReason: this.focusReason
-                    });
-                    // emit('focusout-prevented', focusoutPreventedEvent);
-                    if (!focusoutPreventedEvent.defaultPrevented) {
-                        e.preventDefault();
-                    }
-                }
-            }
-        }
-    }
     setFocusTrapEl(el) {
         if (el) {
             this.props.focusTrapEl = el;
@@ -124,76 +194,6 @@ class TdFocusTrap extends ui_abstract_1.UI {
             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) {
-            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;
-            }
-            else {
-                (0, utils_2.tryFocus)(this.lastFocusAfterTrapped, true);
-            }
-        }
-    }
-    ;
-    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);
-                        }
-                    }
-                }, 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

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

@@ -1,9 +1,9 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeElement } from '@type-dom/framework';
 import { ON_RELEASE_FOCUS_EVT, ON_TRAP_FOCUS_EVT } from './tokens';
-export interface ITdFocusTrap extends IUI {
+export interface ITdFocusTrap extends ITypeElement {
     className: 'TdFocusTrap';
 }
-export interface ITdFocusTrapConfig extends IUIConfig {
+export interface ITdFocusTrapConfig extends ITypeConfig {
     loop?: boolean;
     trapped?: boolean;
     focusTrapEl?: HTMLElement;

package/src/components/feedback/td-loading/td-loading.class.d.ts

@@ -1,9 +1,8 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeTransition } from '@type-dom/framework';
 import { ITdLoading, ITdLoadingConfig } from './td-loading.interface';
-export declare class TdLoading extends UI<undefined> implements ITdLoading {
+export declare class TdLoading extends TypeTransition implements ITdLoading {
     className: 'TdLoading';
     props: ITdLoadingConfig;
-    private transition;
     private mask;
     private svg;
     private spinner;