@douyinfe/semi-foundation 2.10.4 → 2.10.5

package/cascader/foundation.ts

@@ -145,6 +145,7 @@ export interface BasicCascaderProps {
     disableStrictly?: boolean;
     leafOnly?: boolean;
     enableLeafClick?: boolean;
+    preventScroll?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;

package/checkbox/checkboxFoundation.ts

@@ -130,6 +130,7 @@ export interface BaseCheckboxProps {
     extra?: any;
     addonId?: string;
     extraId?: string;
+    preventScroll?: boolean;
 }
 
 export default CheckboxFoundation;

package/datePicker/foundation.ts

@@ -162,6 +162,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     localeCode?: string;
     rangeSeparator?: string;
     insetInput?: boolean;
+    preventScroll?: boolean;
 }
 
 export interface DatePickerFoundationState {

package/lib/cjs/cascader/foundation.d.ts

@@ -99,6 +99,7 @@ export interface BasicCascaderProps {
     disableStrictly?: boolean;
     leafOnly?: boolean;
     enableLeafClick?: boolean;
+    preventScroll?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -205,6 +206,14 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     handleSingleSelect(e: any, item: BasicEntity | BasicData): void;
     _handleMultipleSelect(item: BasicEntity | BasicData): void;
     calcNonDisabledCheckedKeys(eventKey: string, targetStatus: boolean): {
+        checkedKeys: Set<string>; /**
+         * 典型的场景是: 假设我们选中了 0-0 这个节点，此时 selectedKeys=Set('0-0')，
+         * 输入框会显示 0-0 的 label。当 treeData 发生更新，假设此时 0-0 在 treeData
+         * 中不存在，则 selectedKeys=Set('not-exist-0-0')，此时输入框显示的是 0-0，
+         * 也就是显示 not-exist- 后的内容。当treeData再次更新，假设此时 0-0 在 treeData
+         * 中存在，则 selectedKeys=Set('0-0')，此时输入框显示 0-0 的 label。 这个地
+         * 方做的操作就是，为了例子中第二次更新后 0-0 label 能够正常显示。
+         */
         /**
          * The typical scenario is: suppose we select the 0-0 node, at this time
          *  selectedKeys=Set('0-0'), the input box will display a 0-0 label. When
@@ -216,7 +225,6 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
          *  0-0 at this time. The operation done here is for the 0-0 label to be
          *  displayed normally after the second update in the example.
          */
-        checkedKeys: Set<string>;
         halfCheckedKeys: Set<any>;
     };
     calcCheckedStatus(targetStatus: boolean, eventKey: string): boolean;

package/lib/cjs/checkbox/checkboxFoundation.d.ts

@@ -55,5 +55,6 @@ export interface BaseCheckboxProps {
     extra?: any;
     addonId?: string;
     extraId?: string;
+    preventScroll?: boolean;
 }
 export default CheckboxFoundation;

package/lib/cjs/datePicker/foundation.d.ts

@@ -132,6 +132,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     localeCode?: string;
     rangeSeparator?: string;
     insetInput?: boolean;
+    preventScroll?: boolean;
 }
 export interface DatePickerFoundationState {
     panelShow: boolean;

package/lib/cjs/modal/modalFoundation.d.ts

@@ -51,6 +51,7 @@ export interface ModalProps {
     keepDOM?: boolean;
     direction?: any;
     fullScreen?: boolean;
+    preventScroll?: boolean;
 }
 export interface ModalState {
     hidden: boolean;

package/lib/cjs/tooltip/foundation.js

@@ -974,14 +974,17 @@ class Tooltip extends _foundation.default {
   _focusTrigger() {
     const {
       trigger,
-      returnFocusOnClose
+      returnFocusOnClose,
+      preventScroll
     } = this.getProps();
 
-    if (returnFocusOnClose && trigger === 'click') {
+    if (returnFocusOnClose && trigger !== 'custom') {
       const triggerNode = this._adapter.getTriggerNode();
 
       if (triggerNode && 'focus' in triggerNode) {
-        triggerNode.focus();
+        triggerNode.focus({
+          preventScroll
+        });
       }
     }
   }
@@ -1001,34 +1004,56 @@ class Tooltip extends _foundation.default {
   }
 
   _handleContainerTabKeyDown(focusableElements, event) {
+    const {
+      preventScroll
+    } = this.getProps();
+
     const activeElement = this._adapter.getActiveElement();
 
     const isLastCurrentFocus = focusableElements[focusableElements.length - 1] === activeElement;
 
     if (isLastCurrentFocus) {
-      focusableElements[0].focus();
+      focusableElements[0].focus({
+        preventScroll
+      });
       event.preventDefault(); // prevent browser default tab move behavior
     }
   }
 
   _handleContainerShiftTabKeyDown(focusableElements, event) {
+    const {
+      preventScroll
+    } = this.getProps();
+
     const activeElement = this._adapter.getActiveElement();
 
     const isFirstCurrentFocus = focusableElements[0] === activeElement;
 
     if (isFirstCurrentFocus) {
-      focusableElements[focusableElements.length - 1].focus();
+      focusableElements[focusableElements.length - 1].focus({
+        preventScroll
+      });
       event.preventDefault(); // prevent browser default tab move behavior
     }
   }
 
   _handleTriggerArrowDownKeydown(focusableElements, event) {
-    focusableElements[0].focus();
+    const {
+      preventScroll
+    } = this.getProps();
+    focusableElements[0].focus({
+      preventScroll
+    });
     event.preventDefault(); // prevent browser default scroll behavior
   }
 
   _handleTriggerArrowUpKeydown(focusableElements, event) {
-    focusableElements[focusableElements.length - 1].focus();
+    const {
+      preventScroll
+    } = this.getProps();
+    focusableElements[focusableElements.length - 1].focus({
+      preventScroll
+    });
     event.preventDefault(); // prevent browser default scroll behavior
   }
 

package/lib/cjs/tree/foundation.d.ts

@@ -168,6 +168,7 @@ export interface BasicTreeProps {
     onContextMenu?: (e: any, node: BasicTreeNodeData) => void;
     onSearch?: (sunInput: string) => void;
     onSelect?: (selectedKeys: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
+    preventScroll?: boolean;
     renderDraggingNode?: (nodeInstance: HTMLElement, node: BasicTreeNodeData) => HTMLElement;
     renderFullLabel?: (renderFullLabelProps: BasicRenderFullLabelProps) => any;
     renderLabel?: (label?: any, treeNode?: BasicTreeNodeData) => any;

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

@@ -0,0 +1,26 @@
+declare type FocusRedirectListener = (element: HTMLElement) => boolean;
+interface HandleOptions {
+    enable?: boolean;
+    onFocusRedirectListener?: FocusRedirectListener | FocusRedirectListener[];
+    preventScroll?: boolean;
+}
+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,166 @@
+"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("./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) => {
+      const {
+        preventScroll
+      } = this.options;
+      element === null || element === void 0 ? void 0 : element.focus({
+        preventScroll
+      });
+      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/cascader/foundation.d.ts

@@ -99,6 +99,7 @@ export interface BasicCascaderProps {
     disableStrictly?: boolean;
     leafOnly?: boolean;
     enableLeafClick?: boolean;
+    preventScroll?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -205,6 +206,14 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     handleSingleSelect(e: any, item: BasicEntity | BasicData): void;
     _handleMultipleSelect(item: BasicEntity | BasicData): void;
     calcNonDisabledCheckedKeys(eventKey: string, targetStatus: boolean): {
+        checkedKeys: Set<string>; /**
+         * 典型的场景是: 假设我们选中了 0-0 这个节点，此时 selectedKeys=Set('0-0')，
+         * 输入框会显示 0-0 的 label。当 treeData 发生更新，假设此时 0-0 在 treeData
+         * 中不存在，则 selectedKeys=Set('not-exist-0-0')，此时输入框显示的是 0-0，
+         * 也就是显示 not-exist- 后的内容。当treeData再次更新，假设此时 0-0 在 treeData
+         * 中存在，则 selectedKeys=Set('0-0')，此时输入框显示 0-0 的 label。 这个地
+         * 方做的操作就是，为了例子中第二次更新后 0-0 label 能够正常显示。
+         */
         /**
          * The typical scenario is: suppose we select the 0-0 node, at this time
          *  selectedKeys=Set('0-0'), the input box will display a 0-0 label. When
@@ -216,7 +225,6 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
          *  0-0 at this time. The operation done here is for the 0-0 label to be
          *  displayed normally after the second update in the example.
          */
-        checkedKeys: Set<string>;
         halfCheckedKeys: Set<any>;
     };
     calcCheckedStatus(targetStatus: boolean, eventKey: string): boolean;

package/lib/es/checkbox/checkboxFoundation.d.ts

@@ -55,5 +55,6 @@ export interface BaseCheckboxProps {
     extra?: any;
     addonId?: string;
     extraId?: string;
+    preventScroll?: boolean;
 }
 export default CheckboxFoundation;

package/lib/es/datePicker/foundation.d.ts

@@ -132,6 +132,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     localeCode?: string;
     rangeSeparator?: string;
     insetInput?: boolean;
+    preventScroll?: boolean;
 }
 export interface DatePickerFoundationState {
     panelShow: boolean;

package/lib/es/modal/modalFoundation.d.ts

@@ -51,6 +51,7 @@ export interface ModalProps {
     keepDOM?: boolean;
     direction?: any;
     fullScreen?: boolean;
+    preventScroll?: boolean;
 }
 export interface ModalState {
     hidden: boolean;

package/lib/es/tooltip/foundation.js

@@ -958,14 +958,17 @@ export default class Tooltip extends BaseFoundation {
   _focusTrigger() {
     const {
       trigger,
-      returnFocusOnClose
+      returnFocusOnClose,
+      preventScroll
     } = this.getProps();
 
-    if (returnFocusOnClose && trigger === 'click') {
+    if (returnFocusOnClose && trigger !== 'custom') {
       const triggerNode = this._adapter.getTriggerNode();
 
       if (triggerNode && 'focus' in triggerNode) {
-        triggerNode.focus();
+        triggerNode.focus({
+          preventScroll
+        });
       }
     }
   }
@@ -985,34 +988,56 @@ export default class Tooltip extends BaseFoundation {
   }
 
   _handleContainerTabKeyDown(focusableElements, event) {
+    const {
+      preventScroll
+    } = this.getProps();
+
     const activeElement = this._adapter.getActiveElement();
 
     const isLastCurrentFocus = focusableElements[focusableElements.length - 1] === activeElement;
 
     if (isLastCurrentFocus) {
-      focusableElements[0].focus();
+      focusableElements[0].focus({
+        preventScroll
+      });
       event.preventDefault(); // prevent browser default tab move behavior
     }
   }
 
   _handleContainerShiftTabKeyDown(focusableElements, event) {
+    const {
+      preventScroll
+    } = this.getProps();
+
     const activeElement = this._adapter.getActiveElement();
 
     const isFirstCurrentFocus = focusableElements[0] === activeElement;
 
     if (isFirstCurrentFocus) {
-      focusableElements[focusableElements.length - 1].focus();
+      focusableElements[focusableElements.length - 1].focus({
+        preventScroll
+      });
       event.preventDefault(); // prevent browser default tab move behavior
     }
   }
 
   _handleTriggerArrowDownKeydown(focusableElements, event) {
-    focusableElements[0].focus();
+    const {
+      preventScroll
+    } = this.getProps();
+    focusableElements[0].focus({
+      preventScroll
+    });
     event.preventDefault(); // prevent browser default scroll behavior
   }
 
   _handleTriggerArrowUpKeydown(focusableElements, event) {
-    focusableElements[focusableElements.length - 1].focus();
+    const {
+      preventScroll
+    } = this.getProps();
+    focusableElements[focusableElements.length - 1].focus({
+      preventScroll
+    });
     event.preventDefault(); // prevent browser default scroll behavior
   }
 

package/lib/es/tree/foundation.d.ts

@@ -168,6 +168,7 @@ export interface BasicTreeProps {
     onContextMenu?: (e: any, node: BasicTreeNodeData) => void;
     onSearch?: (sunInput: string) => void;
     onSelect?: (selectedKeys: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
+    preventScroll?: boolean;
     renderDraggingNode?: (nodeInstance: HTMLElement, node: BasicTreeNodeData) => HTMLElement;
     renderFullLabel?: (renderFullLabelProps: BasicRenderFullLabelProps) => any;
     renderLabel?: (label?: any, treeNode?: BasicTreeNodeData) => any;

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

@@ -0,0 +1,26 @@
+declare type FocusRedirectListener = (element: HTMLElement) => boolean;
+interface HandleOptions {
+    enable?: boolean;
+    onFocusRedirectListener?: FocusRedirectListener | FocusRedirectListener[];
+    preventScroll?: boolean;
+}
+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,150 @@
+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 "./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) => {
+      const {
+        preventScroll
+      } = this.options;
+      element === null || element === void 0 ? void 0 : element.focus({
+        preventScroll
+      });
+      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/modal/modalFoundation.ts

@@ -54,6 +54,7 @@ export interface ModalProps {
     keepDOM?: boolean;
     direction?: any;
     fullScreen?: boolean;
+    preventScroll?: boolean;
 }
 
 export interface ModalState {

package/package.json

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

package/tooltip/foundation.ts

@@ -880,11 +880,11 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
      * 因此 returnFocusOnClose 只支持 click trigger
      */
     _focusTrigger() {
-        const { trigger, returnFocusOnClose } = this.getProps();
-        if (returnFocusOnClose && trigger === 'click') {
+        const { trigger, returnFocusOnClose, preventScroll } = this.getProps();
+        if (returnFocusOnClose && trigger !== 'custom') {
             const triggerNode = this._adapter.getTriggerNode();
             if (triggerNode && 'focus' in triggerNode) {
-                triggerNode.focus();
+                triggerNode.focus({ preventScroll });
             }
         }
     }
@@ -899,30 +899,34 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     }
 
     _handleContainerTabKeyDown(focusableElements: any[], event: any) {
+        const { preventScroll } = this.getProps();
         const activeElement = this._adapter.getActiveElement();
         const isLastCurrentFocus = focusableElements[focusableElements.length - 1] === activeElement;
         if (isLastCurrentFocus) {
-            focusableElements[0].focus();
+            focusableElements[0].focus({ preventScroll });
             event.preventDefault(); // prevent browser default tab move behavior
         }
     }
 
     _handleContainerShiftTabKeyDown(focusableElements: any[], event: any) {
+        const { preventScroll } = this.getProps();
         const activeElement = this._adapter.getActiveElement();
         const isFirstCurrentFocus = focusableElements[0] === activeElement;
         if (isFirstCurrentFocus) {
-            focusableElements[focusableElements.length - 1].focus();
+            focusableElements[focusableElements.length - 1].focus({ preventScroll });
             event.preventDefault(); // prevent browser default tab move behavior
         }
     }
 
     _handleTriggerArrowDownKeydown(focusableElements: any[], event: any) {
-        focusableElements[0].focus();
+        const { preventScroll } = this.getProps();
+        focusableElements[0].focus({ preventScroll });
         event.preventDefault(); // prevent browser default scroll behavior
     }
 
     _handleTriggerArrowUpKeydown(focusableElements: any[], event: any) {
-        focusableElements[focusableElements.length - 1].focus();
+        const { preventScroll } = this.getProps();
+        focusableElements[focusableElements.length - 1].focus({ preventScroll });
         event.preventDefault(); // prevent browser default scroll behavior
     }
 }

package/tree/foundation.ts

@@ -219,6 +219,7 @@ export interface BasicTreeProps {
     onContextMenu?: (e: any, node: BasicTreeNodeData) => void;
     onSearch?: (sunInput: string) => void;
     onSelect?: (selectedKeys: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
+    preventScroll?: boolean;
     renderDraggingNode?: (nodeInstance: HTMLElement, node: BasicTreeNodeData) => HTMLElement;
     renderFullLabel?: (renderFullLabelProps: BasicRenderFullLabelProps) => any;
     renderLabel?: (label?: any, treeNode?: BasicTreeNodeData) => any;

package/utils/FocusHandle.ts

@@ -0,0 +1,161 @@
+import { isHTMLElement } from "./dom";
+import { without } from "lodash";
+
+
+type FocusRedirectListener = (element: HTMLElement) => boolean;
+
+interface HandleOptions {
+    enable?: boolean
+    onFocusRedirectListener?: FocusRedirectListener | FocusRedirectListener[]
+    preventScroll?: boolean;
+}
+
+/*
+* 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) => {
+        const { preventScroll } = this.options;
+        element?.focus({ preventScroll });
+        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;