@douyinfe/semi-foundation 2.11.1 → 2.12.0-beta.0

package/inputNumber/foundation.ts

@@ -294,7 +294,8 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     }
 
     handleUpClick(event: any) {
-        if (!this._isMouseButtonLeft(event)) {
+        const { readonly } = this.getProps();
+        if (!this._isMouseButtonLeft(event) || readonly) {
             return;
         }
         this._adapter.setClickUpOrDown(true);
@@ -314,7 +315,8 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     }
 
     handleDownClick(event: any) {
-        if (!this._isMouseButtonLeft(event)) {
+        const { readonly } = this.getProps();
+        if (!this._isMouseButtonLeft(event) || readonly) {
             return;
         }
         this._adapter.setClickUpOrDown(true);

package/lib/cjs/inputNumber/foundation.js

@@ -321,7 +321,11 @@ class InputNumberFoundation extends _foundation.default {
   }
 
   handleUpClick(event) {
-    if (!this._isMouseButtonLeft(event)) {
+    const {
+      readonly
+    } = this.getProps();
+
+    if (!this._isMouseButtonLeft(event) || readonly) {
       return;
     }
 
@@ -344,7 +348,11 @@ class InputNumberFoundation extends _foundation.default {
   }
 
   handleDownClick(event) {
-    if (!this._isMouseButtonLeft(event)) {
+    const {
+      readonly
+    } = this.getProps();
+
+    if (!this._isMouseButtonLeft(event) || readonly) {
       return;
     }
 

package/lib/cjs/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/cjs/tabs/foundation.js

@@ -12,14 +12,69 @@ exports.default = void 0;
 
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
 
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
 class TabsFoundation extends _foundation.default {
   constructor(adapter) {
     super((0, _assign.default)({}, adapter));
     this.destroy = _noop2.default;
+
+    this.handlePrevent = event => {
+      event.stopPropagation();
+      event.preventDefault();
+    };
+
+    this.handleKeyDown = (event, itemKey, closable) => {
+      var _context;
+
+      const tabs = (0, _filter.default)(_context = [...event.target.parentNode.childNodes]).call(_context, item => {
+        var _context2;
+
+        return (0, _includes.default)(_context2 = (0, _get2.default)(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() {
@@ -89,6 +144,59 @@ class TabsFoundation extends _foundation.default {
     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 = (0, _indexOf.default)(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 = (0, _indexOf.default)(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
+        }
+      }
+    }
+  }
+
 }
 
 var _default = TabsFoundation;

package/lib/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/utils/FocusHandle.d.ts

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

package/lib/cjs/utils/FocusHandle.js

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

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

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

package/lib/cjs/utils/a11y.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.handlePrevent = handlePrevent;
+
+function handlePrevent(event) {
+  event.stopPropagation();
+  event.preventDefault();
+}