@douyinfe/semi-foundation 2.12.0-alpha.0 → 2.12.0-beta.2

package/lib/cjs/utils/FocusHandle.d.ts

@@ -0,0 +1,25 @@
+declare type FocusRedirectListener = (element: HTMLElement) => boolean;
+interface HandleOptions {
+    enable?: boolean;
+    onFocusRedirectListener?: FocusRedirectListener | FocusRedirectListener[];
+}
+declare class FocusTrapHandle {
+    container: HTMLElement;
+    private options;
+    private focusRedirectListenerList;
+    private _enable;
+    constructor(container: HTMLElement, options?: HandleOptions);
+    addFocusRedirectListener: (listener: FocusRedirectListener) => () => void;
+    removeFocusRedirectListener: (listener: FocusRedirectListener) => void;
+    get enable(): boolean;
+    set enable(value: boolean);
+    destroy: () => void;
+    private shouldFocusRedirect;
+    private focusElement;
+    private onKeyPress;
+    private handleContainerTabKeyDown;
+    private handleContainerShiftTabKeyDown;
+    static getFocusableElements(node: HTMLElement): HTMLElement[];
+    static getActiveElement(): HTMLElement | null;
+}
+export default FocusTrapHandle;

package/lib/cjs/utils/FocusHandle.js

@@ -0,0 +1,161 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _freeze = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/freeze"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _without2 = _interopRequireDefault(require("lodash/without"));
+
+var _dom = require("@douyinfe/semi-foundation/utils/dom");
+
+/*
+* Usage:
+*   // Eg1: Pass a dom as the tab tarp container.
+*  const handle = new FocusTrapHandle(container, { enable: true });
+*
+*   // Eg2: The focus redirect listener will be triggered when user pressed tab whiling last focusable dom is focusing in trap dom, return false to cancel redirect and use the browser normal tab focus index.
+*   handle.addFocusRedirectListener((e)=>{
+*       return true; // return false to prevent redirect on target DOM;
+*   });
+*
+*   // Eg3: Set it to false in order to disable tab tarp at any moment;
+*   handle.enable = true;
+*
+*   // Eg4: Destroy instance when component is unmounting for saving resource;
+*   handle.destroy();
+*
+* */
+class FocusTrapHandle {
+  constructor(container, options) {
+    var _a;
+
+    this.addFocusRedirectListener = listener => {
+      this.focusRedirectListenerList.push(listener);
+      return () => this.removeFocusRedirectListener(listener);
+    };
+
+    this.removeFocusRedirectListener = listener => {
+      this.focusRedirectListenerList = (0, _without2.default)(this.focusRedirectListenerList, listener);
+    };
+
+    this.destroy = () => {
+      var _a;
+
+      (_a = this.container) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.onKeyPress);
+    }; // ---- private func ----
+
+
+    this.shouldFocusRedirect = element => {
+      if (!this.enable) {
+        return false;
+      }
+
+      for (const listener of this.focusRedirectListenerList) {
+        const should = listener(element);
+
+        if (!should) {
+          return false;
+        }
+      }
+
+      return true;
+    };
+
+    this.focusElement = (element, event) => {
+      element === null || element === void 0 ? void 0 : element.focus();
+      event.preventDefault(); // prevent browser default tab move behavior
+    };
+
+    this.onKeyPress = event => {
+      if (event && event.key === 'Tab') {
+        const focusableElements = FocusTrapHandle.getFocusableElements(this.container);
+        const focusableNum = focusableElements.length;
+
+        if (focusableNum) {
+          // Shift + Tab will move focus backward
+          if (event.shiftKey) {
+            this.handleContainerShiftTabKeyDown(focusableElements, event);
+          } else {
+            this.handleContainerTabKeyDown(focusableElements, event);
+          }
+        }
+      }
+    };
+
+    this.handleContainerTabKeyDown = (focusableElements, event) => {
+      const activeElement = FocusTrapHandle.getActiveElement();
+      const isLastCurrentFocus = focusableElements[focusableElements.length - 1] === activeElement;
+      const redirectForcingElement = focusableElements[0];
+
+      if (isLastCurrentFocus && this.shouldFocusRedirect(redirectForcingElement)) {
+        this.focusElement(redirectForcingElement, event);
+      }
+    };
+
+    this.handleContainerShiftTabKeyDown = (focusableElements, event) => {
+      const activeElement = FocusTrapHandle.getActiveElement();
+      const isFirstCurrentFocus = focusableElements[0] === activeElement;
+      const redirectForcingElement = focusableElements[focusableElements.length - 1];
+
+      if (isFirstCurrentFocus && this.shouldFocusRedirect(redirectForcingElement)) {
+        this.focusElement(redirectForcingElement, event);
+      }
+    };
+
+    (0, _freeze.default)(options); // prevent user to change options after init;
+
+    this.container = container;
+    this.options = options;
+    this.enable = (_a = options === null || options === void 0 ? void 0 : options.enable) !== null && _a !== void 0 ? _a : true;
+
+    this.focusRedirectListenerList = (() => {
+      if (options === null || options === void 0 ? void 0 : options.onFocusRedirectListener) {
+        return (0, _isArray.default)(options.onFocusRedirectListener) ? [...options.onFocusRedirectListener] : [options.onFocusRedirectListener];
+      } else {
+        return [];
+      }
+    })();
+
+    this.container.addEventListener('keydown', this.onKeyPress);
+  }
+
+  get enable() {
+    return this._enable;
+  }
+
+  set enable(value) {
+    this._enable = value;
+  } // ---- static func ----
+
+
+  static getFocusableElements(node) {
+    if (!(0, _dom.isHTMLElement)(node)) {
+      return [];
+    }
+
+    const focusableSelectorsList = ["input:not([disabled]):not([tabindex='-1'])", "textarea:not([disabled]):not([tabindex='-1'])", "button:not([disabled]):not([tabindex='-1'])", "a[href]:not([tabindex='-1'])", "select:not([disabled]):not([tabindex='-1'])", "area[href]:not([tabindex='-1'])", "iframe:not([tabindex='-1'])", "object:not([tabindex='-1'])", "*[tabindex]:not([tabindex='-1'])", "*[contenteditable]:not([tabindex='-1'])"];
+    const focusableSelectorsStr = focusableSelectorsList.join(','); // we are not filtered elements which are invisible
+
+    return (0, _from.default)(node.querySelectorAll(focusableSelectorsStr));
+  }
+
+  static getActiveElement() {
+    return document ? document.activeElement : null;
+  }
+
+}
+
+var _default = FocusTrapHandle;
+exports.default = _default;

package/lib/es/utils/FocusHandle.d.ts

@@ -0,0 +1,25 @@
+declare type FocusRedirectListener = (element: HTMLElement) => boolean;
+interface HandleOptions {
+    enable?: boolean;
+    onFocusRedirectListener?: FocusRedirectListener | FocusRedirectListener[];
+}
+declare class FocusTrapHandle {
+    container: HTMLElement;
+    private options;
+    private focusRedirectListenerList;
+    private _enable;
+    constructor(container: HTMLElement, options?: HandleOptions);
+    addFocusRedirectListener: (listener: FocusRedirectListener) => () => void;
+    removeFocusRedirectListener: (listener: FocusRedirectListener) => void;
+    get enable(): boolean;
+    set enable(value: boolean);
+    destroy: () => void;
+    private shouldFocusRedirect;
+    private focusElement;
+    private onKeyPress;
+    private handleContainerTabKeyDown;
+    private handleContainerShiftTabKeyDown;
+    static getFocusableElements(node: HTMLElement): HTMLElement[];
+    static getActiveElement(): HTMLElement | null;
+}
+export default FocusTrapHandle;

package/lib/es/utils/FocusHandle.js

@@ -0,0 +1,145 @@
+import _without from "lodash/without";
+import _Object$freeze from "@babel/runtime-corejs3/core-js-stable/object/freeze";
+import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import { isHTMLElement } from "@douyinfe/semi-foundation/utils/dom";
+
+/*
+* Usage:
+*   // Eg1: Pass a dom as the tab tarp container.
+*  const handle = new FocusTrapHandle(container, { enable: true });
+*
+*   // Eg2: The focus redirect listener will be triggered when user pressed tab whiling last focusable dom is focusing in trap dom, return false to cancel redirect and use the browser normal tab focus index.
+*   handle.addFocusRedirectListener((e)=>{
+*       return true; // return false to prevent redirect on target DOM;
+*   });
+*
+*   // Eg3: Set it to false in order to disable tab tarp at any moment;
+*   handle.enable = true;
+*
+*   // Eg4: Destroy instance when component is unmounting for saving resource;
+*   handle.destroy();
+*
+* */
+class FocusTrapHandle {
+  constructor(container, options) {
+    var _a;
+
+    this.addFocusRedirectListener = listener => {
+      this.focusRedirectListenerList.push(listener);
+      return () => this.removeFocusRedirectListener(listener);
+    };
+
+    this.removeFocusRedirectListener = listener => {
+      this.focusRedirectListenerList = _without(this.focusRedirectListenerList, listener);
+    };
+
+    this.destroy = () => {
+      var _a;
+
+      (_a = this.container) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.onKeyPress);
+    }; // ---- private func ----
+
+
+    this.shouldFocusRedirect = element => {
+      if (!this.enable) {
+        return false;
+      }
+
+      for (const listener of this.focusRedirectListenerList) {
+        const should = listener(element);
+
+        if (!should) {
+          return false;
+        }
+      }
+
+      return true;
+    };
+
+    this.focusElement = (element, event) => {
+      element === null || element === void 0 ? void 0 : element.focus();
+      event.preventDefault(); // prevent browser default tab move behavior
+    };
+
+    this.onKeyPress = event => {
+      if (event && event.key === 'Tab') {
+        const focusableElements = FocusTrapHandle.getFocusableElements(this.container);
+        const focusableNum = focusableElements.length;
+
+        if (focusableNum) {
+          // Shift + Tab will move focus backward
+          if (event.shiftKey) {
+            this.handleContainerShiftTabKeyDown(focusableElements, event);
+          } else {
+            this.handleContainerTabKeyDown(focusableElements, event);
+          }
+        }
+      }
+    };
+
+    this.handleContainerTabKeyDown = (focusableElements, event) => {
+      const activeElement = FocusTrapHandle.getActiveElement();
+      const isLastCurrentFocus = focusableElements[focusableElements.length - 1] === activeElement;
+      const redirectForcingElement = focusableElements[0];
+
+      if (isLastCurrentFocus && this.shouldFocusRedirect(redirectForcingElement)) {
+        this.focusElement(redirectForcingElement, event);
+      }
+    };
+
+    this.handleContainerShiftTabKeyDown = (focusableElements, event) => {
+      const activeElement = FocusTrapHandle.getActiveElement();
+      const isFirstCurrentFocus = focusableElements[0] === activeElement;
+      const redirectForcingElement = focusableElements[focusableElements.length - 1];
+
+      if (isFirstCurrentFocus && this.shouldFocusRedirect(redirectForcingElement)) {
+        this.focusElement(redirectForcingElement, event);
+      }
+    };
+
+    _Object$freeze(options); // prevent user to change options after init;
+
+
+    this.container = container;
+    this.options = options;
+    this.enable = (_a = options === null || options === void 0 ? void 0 : options.enable) !== null && _a !== void 0 ? _a : true;
+
+    this.focusRedirectListenerList = (() => {
+      if (options === null || options === void 0 ? void 0 : options.onFocusRedirectListener) {
+        return _Array$isArray(options.onFocusRedirectListener) ? [...options.onFocusRedirectListener] : [options.onFocusRedirectListener];
+      } else {
+        return [];
+      }
+    })();
+
+    this.container.addEventListener('keydown', this.onKeyPress);
+  }
+
+  get enable() {
+    return this._enable;
+  }
+
+  set enable(value) {
+    this._enable = value;
+  } // ---- static func ----
+
+
+  static getFocusableElements(node) {
+    if (!isHTMLElement(node)) {
+      return [];
+    }
+
+    const focusableSelectorsList = ["input:not([disabled]):not([tabindex='-1'])", "textarea:not([disabled]):not([tabindex='-1'])", "button:not([disabled]):not([tabindex='-1'])", "a[href]:not([tabindex='-1'])", "select:not([disabled]):not([tabindex='-1'])", "area[href]:not([tabindex='-1'])", "iframe:not([tabindex='-1'])", "object:not([tabindex='-1'])", "*[tabindex]:not([tabindex='-1'])", "*[contenteditable]:not([tabindex='-1'])"];
+    const focusableSelectorsStr = focusableSelectorsList.join(','); // we are not filtered elements which are invisible
+
+    return _Array$from(node.querySelectorAll(focusableSelectorsStr));
+  }
+
+  static getActiveElement() {
+    return document ? document.activeElement : null;
+  }
+
+}
+
+export default FocusTrapHandle;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.12.0-alpha.0",
+    "version": "2.12.0-beta.2",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "^2.12.0-alpha.0",
+        "@douyinfe/semi-animation": "2.12.0-beta.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "2a4f34115b9dd03fc3c40b1edcc421bf64a3024b",
+    "gitHead": "d594b54331194b982f24ef179147622642073c3d",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/utils/FocusHandle.ts

@@ -0,0 +1,159 @@
+import { isHTMLElement } from "@douyinfe/semi-foundation/utils/dom";
+import { without } from "lodash";
+
+
+type FocusRedirectListener = (element: HTMLElement) => boolean;
+
+interface HandleOptions {
+    enable?: boolean
+    onFocusRedirectListener?: FocusRedirectListener | FocusRedirectListener[]
+}
+
+/*
+* Usage:
+*   // Eg1: Pass a dom as the tab tarp container.
+*  const handle = new FocusTrapHandle(container, { enable: true });
+*
+*   // Eg2: The focus redirect listener will be triggered when user pressed tab whiling last focusable dom is focusing in trap dom, return false to cancel redirect and use the browser normal tab focus index.
+*   handle.addFocusRedirectListener((e)=>{
+*       return true; // return false to prevent redirect on target DOM;
+*   });
+*
+*   // Eg3: Set it to false in order to disable tab tarp at any moment;
+*   handle.enable = true;
+*
+*   // Eg4: Destroy instance when component is unmounting for saving resource;
+*   handle.destroy();
+*
+* */
+
+class FocusTrapHandle {
+    public container: HTMLElement;
+    private options: HandleOptions;
+    private focusRedirectListenerList: FocusRedirectListener[];
+    private _enable: boolean;
+
+    constructor(container: HTMLElement, options?: HandleOptions) {
+        Object.freeze(options); // prevent user to change options after init;
+        this.container = container;
+        this.options = options;
+        this.enable = options?.enable ?? true;
+        this.focusRedirectListenerList = (() => {
+            if (options?.onFocusRedirectListener) {
+                return Array.isArray(options.onFocusRedirectListener) ? [...options.onFocusRedirectListener] : [options.onFocusRedirectListener];
+            } else {
+                return [];
+            }
+        })();
+        this.container.addEventListener('keydown', this.onKeyPress);
+    }
+
+    public addFocusRedirectListener = (listener: FocusRedirectListener) => {
+        this.focusRedirectListenerList.push(listener);
+        return () => this.removeFocusRedirectListener(listener);
+    }
+
+    public removeFocusRedirectListener = (listener: FocusRedirectListener) => {
+        this.focusRedirectListenerList = without(this.focusRedirectListenerList, listener);
+    }
+
+    public get enable() {
+        return this._enable;
+    }
+
+    public set enable(value) {
+        this._enable = value;
+    }
+
+    public destroy = () => {
+        this.container?.removeEventListener('keydown', this.onKeyPress);
+    }
+
+    // ---- private func ----
+
+    private shouldFocusRedirect = (element: HTMLElement) => {
+        if (!this.enable) {
+            return false;
+        }
+        for (const listener of this.focusRedirectListenerList) {
+            const should = listener(element);
+            if (!should) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    private focusElement = (element: HTMLElement, event: KeyboardEvent) => {
+        element?.focus();
+        event.preventDefault(); // prevent browser default tab move behavior
+    }
+
+
+    private onKeyPress = (event: KeyboardEvent) => {
+        if (event && event.key === 'Tab') {
+            const focusableElements = FocusTrapHandle.getFocusableElements(this.container);
+            const focusableNum = focusableElements.length;
+            if (focusableNum) {
+                // Shift + Tab will move focus backward
+                if (event.shiftKey) {
+                    this.handleContainerShiftTabKeyDown(focusableElements, event);
+                } else {
+                    this.handleContainerTabKeyDown(focusableElements, event);
+                }
+            }
+        }
+    }
+
+    private handleContainerTabKeyDown = (focusableElements: any[], event: any) => {
+        const activeElement = FocusTrapHandle.getActiveElement();
+        const isLastCurrentFocus = focusableElements[focusableElements.length - 1] === activeElement;
+
+        const redirectForcingElement = focusableElements[0];
+        if (isLastCurrentFocus && this.shouldFocusRedirect(redirectForcingElement)) {
+            this.focusElement(redirectForcingElement, event);
+        }
+    };
+
+
+    private handleContainerShiftTabKeyDown = (focusableElements: any[], event: KeyboardEvent) => {
+        const activeElement = FocusTrapHandle.getActiveElement();
+        const isFirstCurrentFocus = focusableElements[0] === activeElement;
+        const redirectForcingElement = focusableElements[focusableElements.length - 1];
+        if (isFirstCurrentFocus && this.shouldFocusRedirect(redirectForcingElement)) {
+            this.focusElement(redirectForcingElement, event);
+        }
+    };
+
+
+    // ---- static func ----
+
+    static getFocusableElements(node: HTMLElement) {
+        if (!isHTMLElement(node)) {
+            return [];
+        }
+        const focusableSelectorsList = [
+            "input:not([disabled]):not([tabindex='-1'])",
+            "textarea:not([disabled]):not([tabindex='-1'])",
+            "button:not([disabled]):not([tabindex='-1'])",
+            "a[href]:not([tabindex='-1'])",
+            "select:not([disabled]):not([tabindex='-1'])",
+            "area[href]:not([tabindex='-1'])",
+            "iframe:not([tabindex='-1'])",
+            "object:not([tabindex='-1'])",
+            "*[tabindex]:not([tabindex='-1'])",
+            "*[contenteditable]:not([tabindex='-1'])",
+        ];
+        const focusableSelectorsStr = focusableSelectorsList.join(',');
+        // we are not filtered elements which are invisible
+        return Array.from(node.querySelectorAll<HTMLElement>(focusableSelectorsStr));
+    }
+
+    static getActiveElement(): HTMLElement | null {
+        return document ? document.activeElement as HTMLElement : null;
+    }
+
+
+}
+
+export default FocusTrapHandle;