@douyinfe/semi-foundation 2.11.2 → 2.12.0-beta.1

package/lib/es/inputNumber/foundation.js

@@ -296,7 +296,11 @@ class InputNumberFoundation extends BaseFoundation {
   }
 
   handleUpClick(event) {
-    if (!this._isMouseButtonLeft(event)) {
+    const {
+      readonly
+    } = this.getProps();
+
+    if (!this._isMouseButtonLeft(event) || readonly) {
       return;
     }
 
@@ -319,7 +323,11 @@ class InputNumberFoundation extends BaseFoundation {
   }
 
   handleDownClick(event) {
-    if (!this._isMouseButtonLeft(event)) {
+    const {
+      readonly
+    } = this.getProps();
+
+    if (!this._isMouseButtonLeft(event) || readonly) {
       return;
     }
 

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

@@ -19,5 +19,10 @@ declare class TabsFoundation<P = Record<string, any>, S = Record<string, any>> e
     handleTabListChange(): void;
     handleTabPanesChange(): void;
     handleTabDelete(tabKey: string): void;
+    handlePrevent: (event: any) => void;
+    handleKeyDown: (event: any, itemKey: string, closable: boolean) => void;
+    determineOrientation(event: any, tabs: HTMLElement[]): void;
+    handleDeleteKeyDown(event: any, tabs: HTMLElement[], itemKey: string, closable: boolean): void;
+    switchTabOnArrowPress(event: any, tabs: HTMLElement[]): void;
 }
 export default TabsFoundation;

package/lib/es/tabs/foundation.js

@@ -1,11 +1,62 @@
 import _noop from "lodash/noop";
+import _get from "lodash/get";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import BaseFoundation from '../base/foundation';
 
 class TabsFoundation extends BaseFoundation {
   constructor(adapter) {
     super(_Object$assign({}, adapter));
     this.destroy = _noop;
+
+    this.handlePrevent = event => {
+      event.stopPropagation();
+      event.preventDefault();
+    };
+
+    this.handleKeyDown = (event, itemKey, closable) => {
+      var _context;
+
+      const tabs = _filterInstanceProperty(_context = [...event.target.parentNode.childNodes]).call(_context, item => {
+        var _context2;
+
+        return _includesInstanceProperty(_context2 = _get(item, 'attributes.data-tabkey.value', '')).call(_context2, 'semiTab') && item.ariaDisabled !== "true";
+      });
+
+      switch (event.key) {
+        case "ArrowLeft":
+        case "ArrowRight":
+        case "ArrowUp":
+        case "ArrowDown":
+          this.determineOrientation(event, tabs);
+          break;
+
+        case "Backspace":
+        case "Delete":
+          this.handleDeleteKeyDown(event, tabs, itemKey, closable);
+          break;
+
+        case "Enter":
+        case " ":
+          this.handleTabClick(itemKey, event);
+          this.handlePrevent(event);
+          break;
+
+        case "Home":
+          tabs[0].focus(); // focus first tab
+
+          this.handlePrevent(event);
+          break;
+
+        case "End":
+          tabs[tabs.length - 1].focus(); // focus last tab
+
+          this.handlePrevent(event);
+          break;
+      }
+    };
   }
 
   init() {
@@ -75,6 +126,62 @@ class TabsFoundation extends BaseFoundation {
     this._adapter.notifyTabDelete(tabKey);
   }
 
+  determineOrientation(event, tabs) {
+    const {
+      tabPosition
+    } = this.getProps();
+    const isVertical = tabPosition === 'left';
+
+    if (isVertical) {
+      if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+        this.switchTabOnArrowPress(event, tabs);
+        this.handlePrevent(event);
+      }
+    } else {
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        this.switchTabOnArrowPress(event, tabs);
+        this.handlePrevent(event);
+      }
+    }
+  }
+
+  handleDeleteKeyDown(event, tabs, itemKey, closable) {
+    if (closable) {
+      this.handleTabDelete(itemKey);
+
+      const index = _indexOfInstanceProperty(tabs).call(tabs, event.target); // Move focus to next element after deletion
+      // If the element is the last removable tab, focus to its previous tab
+
+
+      if (tabs.length !== 1) {
+        tabs[index + 1 >= tabs.length ? index - 1 : index + 1].focus();
+      }
+    }
+  }
+
+  switchTabOnArrowPress(event, tabs) {
+    const index = _indexOfInstanceProperty(tabs).call(tabs, event.target);
+
+    const direction = {
+      "ArrowLeft": -1,
+      "ArrowUp": -1,
+      "ArrowRight": 1,
+      "ArrowDown": 1
+    };
+
+    if (direction[event.key]) {
+      if (index !== undefined) {
+        if (tabs[index + direction[event.key]]) {
+          tabs[index + direction[event.key]].focus();
+        } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+          tabs[tabs.length - 1].focus(); // focus last tab
+        } else if (event.key === "ArrowRight" || event.key == "ArrowDown") {
+          tabs[0].focus(); // focus first tab
+        }
+      }
+    }
+  }
+
 }
 
 export default TabsFoundation;

package/lib/es/tabs/tabs.css

@@ -101,6 +101,10 @@
   width: 0;
   height: 0;
 }
+.semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
 .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
   margin-right: 4px;
 }
@@ -130,6 +134,10 @@
 .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:hover {
   border-bottom: 2px solid var(--semi-color-fill-0);
 }
+.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -1px;
+}
 .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:active {
   border-bottom: 2px solid var(--semi-color-fill-1);
 }
@@ -156,6 +164,10 @@
   border-left: 2px solid var(--semi-color-fill-0);
   background-color: var(--semi-color-fill-0);
 }
+.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
 .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active {
   border-left: 2px solid var(--semi-color-fill-1);
   background-color: var(--semi-color-fill-1);
@@ -241,6 +253,10 @@
 .semi-tabs-bar-card .semi-tabs-tab:hover {
   background: var(--semi-color-fill-0);
 }
+.semi-tabs-bar-card .semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
 .semi-tabs-bar-card .semi-tabs-tab:active {
   background: var(--semi-color-fill-1);
 }
@@ -263,6 +279,10 @@
   border: none;
   background-color: var(--semi-color-fill-0);
 }
+.semi-tabs-bar-button .semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
 .semi-tabs-bar-button .semi-tabs-tab:active {
   background-color: var(--semi-color-fill-1);
 }
@@ -283,6 +303,9 @@
   width: 100%;
   overflow: hidden;
 }
+.semi-tabs-pane:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-tabs-pane-inactive, .semi-tabs-content-no-animated .semi-tabs-pane-inactive {
   display: none;
 }

package/lib/es/tabs/tabs.scss

@@ -124,6 +124,11 @@ $module: #{$prefix}-tabs;
                     width: 0;
                     height: 0;
                 }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs-outline-offset;
+                }
             }
         }
         
@@ -164,6 +169,11 @@ $module: #{$prefix}-tabs;
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                 }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs_bar_line-outline-offset;
+                }
                 
                 &:active {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
@@ -202,6 +212,11 @@ $module: #{$prefix}-tabs;
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                     background-color: $color-tabs_tab_line_vertical-bg-hover;
                 }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs-outline-offset;
+                }
                 
                 &:active {
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
@@ -327,6 +342,11 @@ $module: #{$prefix}-tabs;
             &:hover {
                 background: $color-tabs_tab_card-bg-hover;
             }
+
+            &:focus-visible {
+                outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                outline-offset: $width-tabs-outline-offset;
+            }
             
             &:active {
                 background: $color-tabs_tab_card-bg-active;
@@ -365,6 +385,11 @@ $module: #{$prefix}-tabs;
                 border: none;
                 background-color: $color-tabs_tab_button-bg-hover;
             }
+
+            &:focus-visible {
+                outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                outline-offset: $width-tabs-outline-offset;
+            }
             
             &:active {
                 background-color: $color-tabs_tab_button-bg-active;
@@ -393,13 +418,17 @@ $module: #{$prefix}-tabs;
         height: 100%;
         padding: $spacing-tabs_content_left-paddingY $spacing-tabs_content_left-paddingX;
     }
-    
+
     &-pane {
         width: 100%;
         overflow: hidden;
         // position: absolute;
         // flex-shrink: 0;
         // position: absolute;
+
+        &:focus-visible {
+            outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+        }
     }
     
     &-pane-inactive,

package/lib/es/tabs/variables.scss

@@ -44,6 +44,8 @@ $color-tabs_tab-icon-hover: var(--semi-color-text-0); // 页签图标颜色 -
 $color-tabs_tab-icon-active: var(--semi-color-text-0); // 页签图标颜色 - 按下
 $color-tabs_tab_selected-icon-default: var(--semi-color-primary); // 页签图标颜色 - 选中
 
+$color-tabs_tab-outline-focus: var(--semi-color-primary-light-active); // 页签轮廓 - 聚焦
+
 
 $font-tabs_tab-fontWeight: $font-weight-regular; // 页签文本字重 - 默认
 $font-tabs_tab_active-fontWeight: $font-weight-bold; // 页签文本字重 - 选中
@@ -54,6 +56,9 @@ $width-tabs_bar_line-border: $border-thickness-control; // 线条式页签底部
 $width-tabs_bar_line_tab-border: 2px; // 页签标示线宽度
 
 $width-tabs_bar_card-border: $border-thickness-control; // 卡片式页签底部分割线宽度
+$width-tabs-outline: 2px; // 聚焦轮廓宽度
+$width-tabs-outline-offset: -2px; // 聚焦轮廓偏移宽度
+$width-tabs_bar_line-outline-offset: -1px; // 线条式页签聚焦轮廓偏移宽度
 
 $height-tabs_bar_extra_large: 50px; // 大尺寸页签高度
 $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺寸页签文字行高

package/lib/es/tag/tag.css

@@ -19,6 +19,9 @@
   height: 20px;
   padding: 2px 8px;
 }
+.semi-tag-default:focus-visible, .semi-tag-small:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-tag-large {
   font-size: 12px;
   line-height: 16px;
@@ -26,6 +29,9 @@
   padding: 4px 8px;
   height: 24px;
 }
+.semi-tag-large:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-tag-invisible {
   display: none;
 }
@@ -392,6 +398,10 @@
   color: var(--semi-color-text-0);
 }
 
+.semi-tag-solid .semi-tag-close {
+  color: var(--semi-color-white);
+}
+
 .semi-rtl .semi-tag,
 .semi-portal-rtl .semi-tag {
   direction: rtl;

package/lib/es/tag/tag.scss

@@ -25,12 +25,18 @@ $types: "ghost", "solid", "light";
         @include font-size-small;
         height: $height-tag_small;
         padding: $spacing-tag_small-paddingY $spacing-tag_small-paddingX;
+        &:focus-visible {
+            outline: $width-tag-outline solid $color-tag-outline-focus;
+        }
     }
 
     &-large {
         @include font-size-small;
         padding: $spacing-tag_large-paddingY $spacing-tag_large-paddingX;
         height: $height-tag_large;
+        &:focus-visible {
+            outline: $width-tag-outline solid $color-tag-outline-focus;
+        }
     }
 
     &-invisible {
@@ -46,12 +52,13 @@ $types: "ghost", "solid", "light";
     &-close {
         @include all-center;
         color: $color-tag_close-icon-default;
-        padding-left: $spacing-tag_close-paddingLeft; 
+        padding-left: $spacing-tag_close-paddingLeft;
         cursor: pointer;
     }
 
     &-closable {
-        padding: $spacing-tag_closable-paddingTop $spacing-tag_closable-paddingRight $spacing-tag_closable-paddingBottom $spacing-tag_closable-paddingLeft;
+        padding: $spacing-tag_closable-paddingTop $spacing-tag_closable-paddingRight $spacing-tag_closable-paddingBottom
+            $spacing-tag_closable-paddingLeft;
     }
 
     &-avatar-square,
@@ -62,10 +69,10 @@ $types: "ghost", "solid", "light";
     }
 
     &-avatar-square {
-        padding: $spacing-tag_avatar_square-paddingTop $spacing-tag_avatar_square-paddingRight $spacing-tag_avatar_square-paddingBottom $spacing-tag_avatar_square-paddingLeft;
+        padding: $spacing-tag_avatar_square-paddingTop $spacing-tag_avatar_square-paddingRight
+            $spacing-tag_avatar_square-paddingBottom $spacing-tag_avatar_square-paddingLeft;
 
         .#{$prefix}-avatar {
-
             & > img {
                 background-color: $color-tag_avatar_square_img-bg-default;
             }
@@ -73,10 +80,12 @@ $types: "ghost", "solid", "light";
     }
 
     &-avatar-circle {
-        padding: $spacing-tag_avatar_circle-paddingTop $spacing-tag_avatar_circle-paddingRight $spacing-tag_avatar_circle-paddingBottom $spacing-tag_avatar_circle-paddingLeft;
+        padding: $spacing-tag_avatar_circle-paddingTop $spacing-tag_avatar_circle-paddingRight
+            $spacing-tag_avatar_circle-paddingBottom $spacing-tag_avatar_circle-paddingLeft;
     }
 
-    &-avatar-square.#{$module}-default, &-avatar-square.#{$module}-small {
+    &-avatar-square.#{$module}-default,
+    &-avatar-square.#{$module}-small {
         .#{$prefix}-avatar {
             width: $height-tag_small;
             height: $height-tag_small;
@@ -179,4 +188,10 @@ $types: "ghost", "solid", "light";
     color: $color-tag_avatar-text-default;
 }
 
-@import "./rtl.scss";
+.#{$module}-solid {
+    .#{$module}-close {
+        color: $color-tag_close-icon_deep-default;
+    }
+}
+
+@import './rtl.scss';

package/lib/es/tag/variables.scss

@@ -7,12 +7,16 @@ $color-tag_white-border-default: rgba(var(--semi-grey-2), 0.7); // 白色标签
 $color-tag_white-text-default: var(--semi-color-text-0); // 白色标签文字颜色 - 默认
 $color-tag_white-icon-default: var(--semi-color-text-2); // 白色标签图标颜色 - 默认
 
+$color-tag-outline-focus: var(--semi-color-primary-light-active); // 标签轮廓 - 聚焦
+
 $width-tag_avatar_circle_small: 16px; // 头像标签圆角 - 小尺寸
 $width-tag_avatar_circle_large: 20px; // 头像标签圆角 - 大尺寸
 
 $width-tag-border: 1px; // 标签描边宽度
 $width-tag_avatar-border: $width-tag-border; // 头像标签描边宽度
 
+$width-tag-outline: 2px; // 标签轮廓宽度
+
 $height-tag_small: 20px; // 小尺寸标签高度
 $height-tag_large: 24px; // 大尺寸标签高度
 $radius-tag: var(--semi-border-radius-small); // 标签圆角大小
@@ -24,6 +28,7 @@ $spacing-tag_large-paddingY: 4px; // 大尺寸标签垂直方向内边距
 $spacing-tag_large-paddingX: $spacing-tight; // 大尺寸标签水平方向内边距
 
 $color-tag_close-icon-default: var(--semi-color-text-2); // 可删除的标签删除按钮颜色
+$color-tag_close-icon_deep-default: var(--semi-color-white); // 深色模式下可删除的标签删除按钮颜色
 $spacing-tag_close-paddingLeft: $spacing-extra-tight; // 可删除的标签删除按钮左侧内边距
 $spacing-tag_closable-paddingTop: $spacing-extra-tight; // 可删除的标签删除按钮顶部内边距
 $spacing-tag_closable-paddingRight: $spacing-extra-tight; // 可删除的标签删除按钮右侧内边距

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-es/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/lib/es/utils/a11y.d.ts

@@ -0,0 +1 @@
+export declare function handlePrevent(event: any): void;

package/lib/es/utils/a11y.js

@@ -0,0 +1,4 @@
+export function handlePrevent(event) {
+  event.stopPropagation();
+  event.preventDefault();
+}

package/package.json

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