@douyinfe/semi-foundation 2.10.1 → 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

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable max-len, max-depth,  */
 import { format, isValid, isSameSecond, isEqual as isDateEqual, isDate } from 'date-fns';
-import { get, isObject, isString, isEqual } from 'lodash';
+import { get, isObject, isString, isEqual, isFunction } from 'lodash';
 
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { isValidDate, isTimestamp } from './_utils/index';
@@ -162,6 +162,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     localeCode?: string;
     rangeSeparator?: string;
     insetInput?: boolean;
+    preventScroll?: boolean;
 }
 
 export interface DatePickerFoundationState {
@@ -244,12 +245,25 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         this._adapter.updatePrevTimezone(prevTimeZone);
         this._adapter.updateInputValue(null);
         this._adapter.updateValue(result);
+        this.initRangeInputFocus(result);
 
         if (this._adapter.needConfirm()) {
             this._adapter.updateCachedSelectedValue(result);
         }
     }
 
+    /**
+     * 如果用户传了一个空的 value，需要把 range input focus 设置为 rangeStart，这样用户可以清除完之后继续从开始选择
+     * 
+     * If the user passes an empty value, you need to set the range input focus to rangeStart, so that the user can continue to select from the beginning after clearing
+     */
+    initRangeInputFocus(result: Date[]) {
+        const { triggerRender } = this.getProps();
+        if (this._isRangeType() && isFunction(triggerRender) && result.length === 0) {
+            this._adapter.setRangeInputFocus('rangeStart');
+        }
+    }
+
     parseWithTimezone(value: ValueType, timeZone: string | number, prevTimeZone: string | number) {
         const result: Date[] = [];
         if (Array.isArray(value) && value.length) {
@@ -1161,7 +1175,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @returns
      */
     handleTriggerWrapperClick(e: any) {
-        const { disabled } = this._adapter.getProps();
+        const { disabled, triggerRender } = this._adapter.getProps();
         const { rangeInputFocus } = this._adapter.getStates();
         if (disabled) {
             return;
@@ -1173,12 +1187,18 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
          * - When type is not range type, Input component will automatically focus in the same case
          * - isEventTarget is used to judge whether the event is a bubbling event
          */
-        if (this._isRangeType() && !rangeInputFocus && this._adapter.isEventTarget(e)) {
-            setTimeout(() => {
-                // using setTimeout get correct state value 'rangeInputFocus'
-                this.handleInputFocus(e, 'rangeStart');
-                this.openPanel();
-            }, 0);
+        if (this._isRangeType() && !rangeInputFocus) {
+            if (this._adapter.isEventTarget(e)) {
+                setTimeout(() => {
+                    // using setTimeout get correct state value 'rangeInputFocus'
+                    this.handleInputFocus(e, 'rangeStart');
+                }, 0);
+            } else if (isFunction(triggerRender)) {
+                // 如果是 triggerRender 场景，因为没有 input，因此打开面板时默认 focus 在 rangeStart
+                // If it is a triggerRender scene, because there is no input, the default focus is rangeStart when the panel is opened
+                this._adapter.setRangeInputFocus('rangeStart');
+            }
+            this.openPanel();
         } else {
             this.openPanel();
         }

package/datePicker/monthsGridFoundation.ts

@@ -720,9 +720,8 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
             /**
              * no need to check focus then
              *  - dateRange and isDateRangeAndHasOffset
-             *  - dateRange and triggerRender
              */
-            const needCheckFocusRecord = !(type === 'dateRange' && (isDateRangeAndHasOffset || isFunction(triggerRender)));
+            const needCheckFocusRecord = !(type === 'dateRange' && isDateRangeAndHasOffset);
             this._adapter.notifySelectedChange(date, { needCheckFocusRecord });
         }
     }

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;
@@ -185,6 +186,12 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     initFromProps({ value, timeZone, prevTimeZone }: Pick<DatePickerFoundationProps, 'value' | 'timeZone'> & {
         prevTimeZone?: string | number;
     }): void;
+    /**
+     * 如果用户传了一个空的 value，需要把 range input focus 设置为 rangeStart，这样用户可以清除完之后继续从开始选择
+     *
+     * If the user passes an empty value, you need to set the range input focus to rangeStart, so that the user can continue to select from the beginning after clearing
+     */
+    initRangeInputFocus(result: Date[]): void;
     parseWithTimezone(value: ValueType, timeZone: string | number, prevTimeZone: string | number): Date[];
     _isMultiple(): boolean;
     /**

package/lib/cjs/datePicker/foundation.js

@@ -38,6 +38,8 @@ var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 
 var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
 
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
 
 var _isString2 = _interopRequireDefault(require("lodash/isString"));
@@ -173,10 +175,28 @@ class DatePickerFoundation extends _foundation.default {
 
     this._adapter.updateValue(result);
 
+    this.initRangeInputFocus(result);
+
     if (this._adapter.needConfirm()) {
       this._adapter.updateCachedSelectedValue(result);
     }
   }
+  /**
+   * 如果用户传了一个空的 value，需要把 range input focus 设置为 rangeStart，这样用户可以清除完之后继续从开始选择
+   *
+   * If the user passes an empty value, you need to set the range input focus to rangeStart, so that the user can continue to select from the beginning after clearing
+   */
+
+
+  initRangeInputFocus(result) {
+    const {
+      triggerRender
+    } = this.getProps();
+
+    if (this._isRangeType() && (0, _isFunction2.default)(triggerRender) && result.length === 0) {
+      this._adapter.setRangeInputFocus('rangeStart');
+    }
+  }
 
   parseWithTimezone(value, timeZone, prevTimeZone) {
     const result = [];
@@ -1270,7 +1290,8 @@ class DatePickerFoundation extends _foundation.default {
 
   handleTriggerWrapperClick(e) {
     const {
-      disabled
+      disabled,
+      triggerRender
     } = this._adapter.getProps();
 
     const {
@@ -1289,12 +1310,19 @@ class DatePickerFoundation extends _foundation.default {
      */
 
 
-    if (this._isRangeType() && !rangeInputFocus && this._adapter.isEventTarget(e)) {
-      (0, _setTimeout2.default)(() => {
-        // using setTimeout get correct state value 'rangeInputFocus'
-        this.handleInputFocus(e, 'rangeStart');
-        this.openPanel();
-      }, 0);
+    if (this._isRangeType() && !rangeInputFocus) {
+      if (this._adapter.isEventTarget(e)) {
+        (0, _setTimeout2.default)(() => {
+          // using setTimeout get correct state value 'rangeInputFocus'
+          this.handleInputFocus(e, 'rangeStart');
+        }, 0);
+      } else if ((0, _isFunction2.default)(triggerRender)) {
+        // 如果是 triggerRender 场景，因为没有 input，因此打开面板时默认 focus 在 rangeStart
+        // If it is a triggerRender scene, because there is no input, the default focus is rangeStart when the panel is opened
+        this._adapter.setRangeInputFocus('rangeStart');
+      }
+
+      this.openPanel();
     } else {
       this.openPanel();
     }

package/lib/cjs/datePicker/monthsGridFoundation.js

@@ -28,8 +28,6 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
 
-var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
-
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
 
 var _isSet2 = _interopRequireDefault(require("lodash/isSet"));
@@ -828,11 +826,10 @@ class MonthsGridFoundation extends _foundation.default {
       /**
        * no need to check focus then
        *  - dateRange and isDateRangeAndHasOffset
-       *  - dateRange and triggerRender
        */
 
 
-      const needCheckFocusRecord = !(type === 'dateRange' && (isDateRangeAndHasOffset || (0, _isFunction2.default)(triggerRender)));
+      const needCheckFocusRecord = !(type === 'dateRange' && isDateRangeAndHasOffset);
 
       this._adapter.notifySelectedChange(date, {
         needCheckFocusRecord

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/upload/foundation.js

@@ -1092,6 +1092,7 @@ class UploadFoundation extends _foundation.default {
     if (!disabled) {
       if (directory) {
         this.handleDirectoryDrop(e);
+        return;
       }
 
       const files = (0, _from.default)(e.dataTransfer.files);

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;
@@ -185,6 +186,12 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     initFromProps({ value, timeZone, prevTimeZone }: Pick<DatePickerFoundationProps, 'value' | 'timeZone'> & {
         prevTimeZone?: string | number;
     }): void;
+    /**
+     * 如果用户传了一个空的 value，需要把 range input focus 设置为 rangeStart，这样用户可以清除完之后继续从开始选择
+     *
+     * If the user passes an empty value, you need to set the range input focus to rangeStart, so that the user can continue to select from the beginning after clearing
+     */
+    initRangeInputFocus(result: Date[]): void;
     parseWithTimezone(value: ValueType, timeZone: string | number, prevTimeZone: string | number): Date[];
     _isMultiple(): boolean;
     /**

package/lib/es/datePicker/foundation.js

@@ -1,3 +1,4 @@
+import _isFunction from "lodash/isFunction";
 import _isEqual from "lodash/isEqual";
 import _isString from "lodash/isString";
 import _isObject from "lodash/isObject";
@@ -133,10 +134,28 @@ export default class DatePickerFoundation extends BaseFoundation {
 
     this._adapter.updateValue(result);
 
+    this.initRangeInputFocus(result);
+
     if (this._adapter.needConfirm()) {
       this._adapter.updateCachedSelectedValue(result);
     }
   }
+  /**
+   * 如果用户传了一个空的 value，需要把 range input focus 设置为 rangeStart，这样用户可以清除完之后继续从开始选择
+   *
+   * If the user passes an empty value, you need to set the range input focus to rangeStart, so that the user can continue to select from the beginning after clearing
+   */
+
+
+  initRangeInputFocus(result) {
+    const {
+      triggerRender
+    } = this.getProps();
+
+    if (this._isRangeType() && _isFunction(triggerRender) && result.length === 0) {
+      this._adapter.setRangeInputFocus('rangeStart');
+    }
+  }
 
   parseWithTimezone(value, timeZone, prevTimeZone) {
     const result = [];
@@ -1238,7 +1257,8 @@ export default class DatePickerFoundation extends BaseFoundation {
 
   handleTriggerWrapperClick(e) {
     const {
-      disabled
+      disabled,
+      triggerRender
     } = this._adapter.getProps();
 
     const {
@@ -1257,12 +1277,19 @@ export default class DatePickerFoundation extends BaseFoundation {
      */
 
 
-    if (this._isRangeType() && !rangeInputFocus && this._adapter.isEventTarget(e)) {
-      _setTimeout(() => {
-        // using setTimeout get correct state value 'rangeInputFocus'
-        this.handleInputFocus(e, 'rangeStart');
-        this.openPanel();
-      }, 0);
+    if (this._isRangeType() && !rangeInputFocus) {
+      if (this._adapter.isEventTarget(e)) {
+        _setTimeout(() => {
+          // using setTimeout get correct state value 'rangeInputFocus'
+          this.handleInputFocus(e, 'rangeStart');
+        }, 0);
+      } else if (_isFunction(triggerRender)) {
+        // 如果是 triggerRender 场景，因为没有 input，因此打开面板时默认 focus 在 rangeStart
+        // If it is a triggerRender scene, because there is no input, the default focus is rangeStart when the panel is opened
+        this._adapter.setRangeInputFocus('rangeStart');
+      }
+
+      this.openPanel();
     } else {
       this.openPanel();
     }

package/lib/es/datePicker/monthsGridFoundation.js

@@ -1,4 +1,3 @@
-import _isFunction from "lodash/isFunction";
 import _isEqual from "lodash/isEqual";
 import _isSet from "lodash/isSet";
 import _includes from "lodash/includes";
@@ -800,11 +799,10 @@ export default class MonthsGridFoundation extends BaseFoundation {
       /**
        * no need to check focus then
        *  - dateRange and isDateRangeAndHasOffset
-       *  - dateRange and triggerRender
        */
 
 
-      const needCheckFocusRecord = !(type === 'dateRange' && (isDateRangeAndHasOffset || _isFunction(triggerRender)));
+      const needCheckFocusRecord = !(type === 'dateRange' && isDateRangeAndHasOffset);
 
       this._adapter.notifySelectedChange(date, {
         needCheckFocusRecord

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/upload/foundation.js

@@ -1086,6 +1086,7 @@ class UploadFoundation extends BaseFoundation {
     if (!disabled) {
       if (directory) {
         this.handleDirectoryDrop(e);
+        return;
       }
 
       const files = _Array$from(e.dataTransfer.files);

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.1",
+    "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.1",
+        "@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": "1c84b585ff43db35b286e8c24f8333e4170d015c",
+    "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/upload/foundation.ts

@@ -773,6 +773,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         if (!disabled) {
             if (directory) {
                 this.handleDirectoryDrop(e);
+                return;
             }
             const files: File[] = Array.from(e.dataTransfer.files);
             this.handleChange(files);

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;