@type-dom/ui 0.0.8 → 0.0.10

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

@@ -1,18 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdFocusTrap = void 0;
+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 aria_1 = require("../../../aria");
-const utils_1 = require("./utils");
+const utils_2 = require("./utils");
+const tokens_1 = require("./tokens");
 class TdFocusTrap extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdFocusTrap';
         this.inheritAttrs = false;
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
-    initEvents() {
-        const focusLayer = {
+    setup() {
+        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);
+            }
+        });
+        this.focusLayer = {
             paused: false,
             pause() {
                 this.paused = true;
@@ -21,61 +33,224 @@ class TdFocusTrap extends ui_abstract_1.UI {
                 this.paused = false;
             }
         };
-        const { focusReason } = (0, utils_1.useFocusReason)();
-        const onKeydown = (e) => {
-            if (!this.props.loop && !this.props.trapped)
-                return;
-            if (focusLayer.paused)
-                return;
-            const { key, altKey, ctrlKey, metaKey, currentTarget, shiftKey } = e;
-            const { loop } = this.props;
-            const isTabbing = key === aria_1.EVENT_CODE.tab && !altKey && !ctrlKey && !metaKey;
-            const currentFocusingEl = document.activeElement;
-            if (isTabbing && currentFocusingEl) {
-                const container = currentTarget;
-                const [first, last] = (0, utils_1.getEdges)(container);
-                const isTabbable = first && last;
-                if (!isTabbable) {
-                    if (currentFocusingEl === container) {
-                        const focusoutPreventedEvent = (0, utils_1.createFocusOutPreventedEvent)({
-                            focusReason: focusReason.value
-                        });
-                        // emit('focusout-prevented', focusoutPreventedEvent);
-                        if (!focusoutPreventedEvent.defaultPrevented) {
-                            e.preventDefault();
+        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);
                         }
                     }
                 }
-                else {
-                    if (!shiftKey && currentFocusingEl === last) {
-                        const focusoutPreventedEvent = (0, utils_1.createFocusOutPreventedEvent)({
-                            focusReason: focusReason.value
-                        });
-                        // emit('focusout-prevented', focusoutPreventedEvent);
-                        if (!focusoutPreventedEvent.defaultPrevented) {
-                            e.preventDefault();
-                            if (loop)
-                                (0, utils_1.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 (shiftKey &&
-                        [first, container].includes(currentFocusingEl)) {
-                        const focusoutPreventedEvent = (0, utils_1.createFocusOutPreventedEvent)({
-                            focusReason: focusReason.value
+                }
+            }
+            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;
+            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) {
+            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
                         });
-                        // emit('focusout-prevented', focusoutPreventedEvent);
+                        this.emit('focusout-prevented', focusoutPreventedEvent);
                         if (!focusoutPreventedEvent.defaultPrevented) {
-                            e.preventDefault();
-                            if (loop)
-                                (0, utils_1.tryFocus)(last, true);
+                            (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
+            yield (0, framework_1.nextTick)();
+            const trapContainer = this.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);
+                            }
+                        });
+                    }
                 }
             }
-        };
-        this.addEvents({
-            keydown: (evt) => onKeydown(evt)
         });
     }
+    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);
+            }
+            trapContainer.removeEventListener(tokens_1.FOCUS_AFTER_RELEASED, this.releaseOnFocus);
+            utils_2.focusableStack.remove(this.focusLayer);
+        }
+    }
 }
 exports.TdFocusTrap = TdFocusTrap;

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

@@ -1,3 +1,4 @@
+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";
 export declare const FOCUSOUT_PREVENTED = "focus-trap.focusout-prevented";
@@ -9,4 +10,4 @@ export type FocusTrapInjectionContext = {
     focusTrapRef: HTMLElement | undefined;
     onKeydown: (e: KeyboardEvent) => void;
 };
-export declare const FOCUS_TRAP_INJECTION_KEY: unique symbol;
+export declare const FOCUS_TRAP_INJECTION_KEY: InjectionKey<FocusTrapInjectionContext>;

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

@@ -1,4 +1,4 @@
-declare const focusReason: import("@type-dom/framework").Ref<"pointer" | "keyboard" | undefined>;
+declare let focusReason: 'pointer' | 'keyboard';
 export type FocusLayer = {
     paused: boolean;
     pause: () => void;

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

@@ -2,12 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createFocusOutPreventedEvent = exports.useFocusReason = exports.isFocusCausedByUserEvent = exports.focusableStack = exports.focusFirstDescendant = exports.tryFocus = exports.getEdges = exports.isHidden = exports.getVisibleElement = exports.obtainAllFocusableElements = void 0;
 // import { onBeforeUnmount, onMounted, ref } from 'vue'
-const framework_1 = require("@type-dom/framework");
 const tokens_1 = require("./tokens");
-const focusReason = (0, framework_1.ref)();
-const lastUserFocusTimestamp = (0, framework_1.ref)(0);
-const lastAutomatedFocusTimestamp = (0, framework_1.ref)(0);
-let focusReasonUserCount = 0;
+let focusReason;
+let lastUserFocusTimestamp = 0;
+let lastAutomatedFocusTimestamp = 0;
 const obtainAllFocusableElements = (element) => {
     const nodes = [];
     const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT, {
@@ -63,7 +61,7 @@ const tryFocus = (element, shouldSelect) => {
     if (element && element.focus) {
         const prevFocusedElement = document.activeElement;
         element.focus({ preventScroll: true });
-        lastAutomatedFocusTimestamp.value = window.performance.now();
+        lastAutomatedFocusTimestamp = window.performance.now();
         if (element !== prevFocusedElement &&
             isSelectable(element) &&
             shouldSelect) {
@@ -111,16 +109,16 @@ const focusFirstDescendant = (elements, shouldSelect = false) => {
 exports.focusFirstDescendant = focusFirstDescendant;
 exports.focusableStack = createFocusableStack();
 const isFocusCausedByUserEvent = () => {
-    return lastUserFocusTimestamp.value > lastAutomatedFocusTimestamp.value;
+    return lastUserFocusTimestamp > lastAutomatedFocusTimestamp;
 };
 exports.isFocusCausedByUserEvent = isFocusCausedByUserEvent;
 const notifyFocusReasonPointer = () => {
-    focusReason.value = 'pointer';
-    lastUserFocusTimestamp.value = window.performance.now();
+    focusReason = 'pointer';
+    lastUserFocusTimestamp = window.performance.now();
 };
 const notifyFocusReasonKeydown = () => {
-    focusReason.value = 'keyboard';
-    lastUserFocusTimestamp.value = window.performance.now();
+    focusReason = 'keyboard';
+    lastUserFocusTimestamp = window.performance.now();
 };
 const useFocusReason = () => {
     // onMounted(() => {

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

@@ -9,4 +9,6 @@ export declare class TdLoading extends UI<undefined> implements ITdLoading {
     private spinner;
     private spinnerText?;
     constructor(params?: ITdLoadingConfig);
+    static service(params: ITdLoadingConfig): TdLoading;
+    close(): void;
 }

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

@@ -59,7 +59,13 @@ class TdLoading extends ui_abstract_1.UI {
         });
         this.transition.addChild(this.mask);
         this.addChild(this.transition);
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
+    }
+    static service(params) {
+        return new TdLoading(params);
+    }
+    close() {
+        //   todo close
     }
 }
 exports.TdLoading = TdLoading;

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

@@ -1,3 +1,4 @@
+import { TypeNode } from '@type-dom/framework';
 import { UI } from '../../../ui/ui.abstract';
 import { ITdMessage, ITdMessageConfig } from './td-message.interface';
 export declare class TdMessage extends UI<undefined> implements ITdMessage {
@@ -12,8 +13,8 @@ export declare class TdMessage extends UI<undefined> implements ITdMessage {
     private repeatNum?;
     private badge?;
     constructor(option?: string | ITdMessageConfig);
-    initEvents(): void;
     mounted(): void;
+    destroy(root?: TypeNode): void;
     static success(message: string): void;
     static warning(message: string): void;
     static error(message: string): void;
@@ -21,5 +22,5 @@ export declare class TdMessage extends UI<undefined> implements ITdMessage {
     startTimer(): void;
     clearTimer(): void;
     close(): void;
-    keydown({ code }: KeyboardEvent): void;
+    keydown: ({ code }: KeyboardEvent) => void;
 }

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdMessage = void 0;
+const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
-const aria_1 = require("../../../aria");
 const td_badge_class_1 = require("../../data/td-badge/td-badge.class");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_message_interface_1 = require("./td-message.interface");
@@ -20,6 +20,12 @@ class TdMessage extends ui_abstract_1.UI {
             params = option || {};
         }
         super(params, 'fragment');
+        this.keydown = ({ code }) => {
+            if (code === utils_1.EVENT_CODE.esc) {
+                // press esc to close the message
+                this.close();
+            }
+        };
         this.className = 'TdMessage';
         this.visible = false;
         this.stopTimer = undefined;
@@ -58,7 +64,7 @@ class TdMessage extends ui_abstract_1.UI {
                 }
             }
         });
-        // this.message.ctrl.hide();
+        // this.message.style.hide();
         // this.transition.setSlot(this.message);
         this.transition.addChild(this.message);
         const type = (params === null || params === void 0 ? void 0 : params.type) || 'info';
@@ -124,9 +130,9 @@ class TdMessage extends ui_abstract_1.UI {
                 }
             }));
         }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
         const offset = (TdMessage.msgId * 60 + 20) + 'px';
-        this.message.ctrl.addStyleObj({
+        this.message.style.addObj({
             top: offset
         });
         if (params.grouping) {
@@ -168,11 +174,6 @@ class TdMessage extends ui_abstract_1.UI {
             this.mount(this.to);
         }
     }
-    initEvents() {
-        this.addEvent('keydown', document, evt => {
-            this.keydown(evt);
-        });
-    }
     mounted() {
         if ((this === null || this === void 0 ? void 0 : this.repeatNum) && (this === null || this === void 0 ? void 0 : this.repeatNum) > 1) {
             return;
@@ -180,7 +181,12 @@ class TdMessage extends ui_abstract_1.UI {
         this.startTimer();
         // nextZIndex()
         this.visible = true;
-        this.message.ctrl.show('flex');
+        this.message.style.show('flex');
+        document.addEventListener('keydown', this.keydown);
+    }
+    destroy(root) {
+        document.removeEventListener('keydown', this.keydown);
+        super.destroy(root);
     }
     static success(message) {
         new TdMessage({
@@ -220,7 +226,7 @@ class TdMessage extends ui_abstract_1.UI {
     close() {
         console.log('close . ');
         this.visible = false;
-        this.message.ctrl.hide();
+        this.message.style.hide();
         this.clearTimer();
         TdMessage.msgId = (TdMessage.msgId || 1) - 1;
         TdMessage.msgList = TdMessage.msgList.filter(item => item !== this);
@@ -230,16 +236,10 @@ class TdMessage extends ui_abstract_1.UI {
             const customStyle = {
                 top: offset
             };
-            msg.message.ctrl.setStyleObj(customStyle);
+            msg.message.style.setObj(customStyle);
         });
         this.destroy();
     }
-    keydown({ code }) {
-        if (code === aria_1.EVENT_CODE.esc) {
-            // press esc to close the message
-            this.close();
-        }
-    }
 }
 exports.TdMessage = TdMessage;
 TdMessage.msgId = 0;

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

@@ -40,7 +40,8 @@ exports.$messageStyle = {
     padding: exports.$message.padding,
     display: 'flex',
     alignItems: 'center',
-    gap: '8px'
+    gap: '8px',
+    zIndex: 9999,
 };
 exports.$messageContentStyle = {
     padding: 0,

package/src/components/feedback/td-message-box/td-message-box.class.d.ts

@@ -1,4 +1,5 @@
 import { UI } from '../../../ui/ui.abstract';
+import { TdInput } from '../../form/td-input/td-input.class';
 import { ITdMessageBox, ITdMessageBoxConfig, IAction, IMessageBoxInputData } from './td-message-box.interface';
 export declare class TdMessageBox extends UI<undefined> implements ITdMessageBox {
     className: 'TdMessageBox';
@@ -26,10 +27,11 @@ export declare class TdMessageBox extends UI<undefined> implements ITdMessageBox
     constructor(params?: ITdMessageBoxConfig);
     mounted(): void;
     beforeDestroy(): void;
+    static show(params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData>;
     static alert(message: string, title?: string, params?: ITdMessageBoxConfig): void;
-    static confirm(message: string, title?: string, params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData | undefined>;
-    static prompt(message: string, title?: string, params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData | undefined>;
-    promise(value?: string): Promise<IMessageBoxInputData | undefined>;
+    static confirm(message: string, title?: string, params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData>;
+    static prompt(message: string, title?: string, params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData>;
+    promise(input?: TdInput): Promise<IMessageBoxInputData>;
     doClose(): void;
     handleWrapperClick(): void;
     handleInputEnter: (e: KeyboardEvent) => void;