@douyinfe/semi-foundation 2.14.0 → 2.15.1

package/tabs/foundation.ts

@@ -79,6 +79,7 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
     }
 
     handleKeyDown = (event: any, itemKey: string, closable: boolean) => {
+        const { preventScroll } = this.getProps();
         const tabs = [...event.target.parentNode.childNodes].filter(item => {
             return get(item, 'attributes.data-tabkey.value', '').includes('semiTab') && get(item, 'attributes.aria-disabled.value', '') !== "true";
         });
@@ -100,11 +101,11 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
                 this.handlePrevent(event);
                 break;
             case "Home":
-                tabs[0].focus(); // focus first tab
+                tabs[0].focus({ preventScroll }); // focus first tab
                 this.handlePrevent(event);
                 break;
             case "End":
-                tabs[tabs.length - 1].focus(); // focus last tab
+                tabs[tabs.length - 1].focus({ preventScroll }); // focus last tab
                 this.handlePrevent(event);
                 break;
         }
@@ -128,18 +129,20 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
     }
 
     handleDeleteKeyDown(event:any, tabs: HTMLElement[], itemKey: string, closable: boolean): void {
+        const { preventScroll } = this.getProps();
         if (closable) {
             this.handleTabDelete(itemKey);
             const index = tabs.indexOf(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();   
+                tabs[index + 1 >= tabs.length ? index - 1 : index + 1].focus({ preventScroll });
             }
         }
     }
 
     switchTabOnArrowPress(event: any, tabs: HTMLElement[]): void {
+        const { preventScroll } = this.getProps();
         const index = tabs.indexOf(event.target);
 
         const direction = {
@@ -152,11 +155,11 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
         if (direction[event.key]) {
             if (index !== undefined) {
                 if (tabs[index + direction[event.key]]) {
-                    tabs[index+ direction[event.key]].focus();
+                    tabs[index+ direction[event.key]].focus({ preventScroll });
                 } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-                    tabs[tabs.length - 1].focus(); // focus last tab
+                    tabs[tabs.length - 1].focus({ preventScroll }); // focus last tab
                 } else if (event.key ===  "ArrowRight" || event.key == "ArrowDown") {
-                    tabs[0].focus(); // focus first tab
+                    tabs[0].focus({ preventScroll }); // focus first tab
                 }
             }
         }

package/tooltip/foundation.ts

@@ -6,6 +6,7 @@ import { DOMRectLikeType } from '../utils/dom';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { ArrayElement } from '../utils/type';
 import { strings } from './constants';
+import { handlePrevent } from '../utils/a11y';
 
 const REGS = {
     TOP: /top/i,
@@ -862,6 +863,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         
         switch (event && event.key) {
             case "Escape":
+                handlePrevent(event);
                 closeOnEsc && this._handleEscKeyDown(event);
                 break;
             case "ArrowUp":
@@ -885,11 +887,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 });
             }
         }
     }
@@ -897,37 +899,43 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _handleEscKeyDown(event: any) {
         const { trigger } = this.getProps();
         if (trigger !== 'custom') {
-            this.hide();
+            // Move the focus into the trigger first and then close the pop-up layer 
+            // to avoid the problem of opening the pop-up layer again when the focus returns to the trigger in the case of hover and focus
             this._focusTrigger();
+            this.hide();
         }
         this._adapter.notifyEscKeydown(event);
     }
 
     _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/treeSelect/foundation.ts

@@ -429,13 +429,17 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
     handleClick(e: any) {
         const isDisabled = this._isDisabled();
-        const { isOpen } = this.getStates();
+        const { isOpen, inputValue } = this.getStates();
+        const { searchPosition } = this.getProps();
         if (isDisabled) {
             return;
         } else if (!isOpen) {
             this.open();
             this._notifyFocus(e);
         } else if (isOpen) {
+            if (searchPosition === 'trigger' && inputValue) {
+                return;
+            }
             this.close(e);
         }
     }

package/utils/FocusHandle.ts

@@ -7,6 +7,7 @@ type FocusRedirectListener = (element: HTMLElement) => boolean;
 interface HandleOptions {
     enable?: boolean
     onFocusRedirectListener?: FocusRedirectListener | FocusRedirectListener[]
+    preventScroll?: boolean;
 }
 
 /*
@@ -85,7 +86,8 @@ class FocusTrapHandle {
     }
 
     private focusElement = (element: HTMLElement, event: KeyboardEvent) => {
-        element?.focus();
+        const { preventScroll } = this.options;
+        element?.focus({ preventScroll });
         event.preventDefault(); // prevent browser default tab move behavior
     }
 

package/utils/a11y.ts

@@ -1,4 +1,109 @@
+import { get } from "lodash";
+
 export function handlePrevent(event: any)  {
     event.stopPropagation();
     event.preventDefault();
+}
+
+export function isPrintableCharacter(string: string): RegExpMatchArray {
+    return string.length === 1 && string.match(/\S/);
+}
+
+// set focus to the target item in item list
+export function setFocusToItem(itemNodes: HTMLElement[], targetItem: HTMLElement): void {
+    for (let i = 0; i < itemNodes.length; i++) { 
+        if (itemNodes[i] === targetItem) {
+            itemNodes[i].tabIndex = 0;
+            itemNodes[i].focus();
+        } else { 
+            itemNodes[i].tabIndex = -1;
+        }
+    }
+}
+
+// set focus to the first item in item list
+export function setFocusToFirstItem(itemNodes: HTMLElement[]): void {
+    itemNodes.length > 0 && setFocusToItem(itemNodes, itemNodes[0]);
+}
+
+// set focus to the last item in item list
+export function setFocusToLastItem(itemNodes: HTMLElement[]): void {
+    itemNodes.length > 0 && setFocusToItem(itemNodes, itemNodes[itemNodes.length-1]);
+}
+
+// set focus to the previous item in item list
+export function setFocusToPreviousMenuItem (itemNodes: HTMLElement[], currentItem: HTMLElement): void {
+    let newMenuItem: HTMLElement, index: number;
+
+    if (itemNodes.length > 0){
+        if (currentItem === itemNodes[0]) {
+            newMenuItem = itemNodes[itemNodes.length-1];
+        } else {
+            index = itemNodes.indexOf(currentItem);
+            newMenuItem = itemNodes[index - 1];
+        }
+        setFocusToItem(itemNodes, newMenuItem);
+    }
+}
+
+// set focus to the next item in item list
+export function  setFocusToNextMenuitem (itemNodes: HTMLElement[], currentItem: HTMLElement): void {
+    let newMenuItem: HTMLElement, index: number;
+
+    if (itemNodes.length > 0){
+        if (currentItem === itemNodes[itemNodes.length-1]) {
+            newMenuItem = itemNodes[0];
+        } else {
+            index = itemNodes.indexOf(currentItem);
+            newMenuItem = itemNodes[index + 1];
+        }
+        setFocusToItem(itemNodes, newMenuItem);
+    }
+}
+
+export function findIndexByCharacter(itemList: HTMLElement[], curItem: HTMLElement, firstCharList: string[], char: string): number {
+    let start: number, index: number;
+
+    if (!itemList || !firstCharList || !char || char.length > 1) {
+        return -1;
+    }
+
+    char = char.toLowerCase();
+
+    // Get start index for search based on position of currentItem
+    start = itemList.indexOf(curItem) + 1;
+    if (start >= itemList.length) {
+        start = 0;
+    }
+
+    // Check remaining menu items in the menu
+    index = firstCharList.indexOf(char, start);
+
+    // If not found in remaining menu items, check from beginning
+    if (index === -1) {
+        index = firstCharList.indexOf(char, 0);
+    }
+
+    return index >= 0 ? index : -1;
+}
+
+export function getAncestorNodeByRole(curElement: Element, role: string): Element { 
+    if (!curElement) {
+        return null;
+    }
+    while (curElement.parentElement && get(curElement.parentElement, 'attributes.role.value', '') !== role){
+        curElement = curElement.parentElement;
+    }
+    return curElement.parentElement;
+}
+
+// According to the Id, find the corresponding data-popupid element
+export function getMenuButton(focusableEle: NodeListOf<HTMLElement>, Id: string): HTMLElement{
+    for (let i = 0; i < focusableEle.length; i++){
+        const curAriDescribedby = focusableEle[i].attributes['data-popupid'];
+        if (curAriDescribedby && curAriDescribedby.value === Id){
+            return focusableEle[i];
+        }
+    }
+    return null;
 }