@douyinfe/semi-foundation 2.14.0-beta.2 → 2.15.0

package/lib/es/tabs/foundation.js

@@ -19,6 +19,10 @@ class TabsFoundation extends BaseFoundation {
     this.handleKeyDown = (event, itemKey, closable) => {
       var _context;
 
+      const {
+        preventScroll
+      } = this.getProps();
+
       const tabs = _filterInstanceProperty(_context = [...event.target.parentNode.childNodes]).call(_context, item => {
         var _context2;
 
@@ -45,13 +49,17 @@ class TabsFoundation extends BaseFoundation {
           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;
@@ -146,6 +154,10 @@ class TabsFoundation extends BaseFoundation {
   }
 
   handleDeleteKeyDown(event, tabs, itemKey, closable) {
+    const {
+      preventScroll
+    } = this.getProps();
+
     if (closable) {
       this.handleTabDelete(itemKey);
 
@@ -154,12 +166,18 @@ class TabsFoundation extends BaseFoundation {
 
 
       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, tabs) {
+    const {
+      preventScroll
+    } = this.getProps();
+
     const index = _indexOfInstanceProperty(tabs).call(tabs, event.target);
 
     const direction = {
@@ -172,11 +190,17 @@ class TabsFoundation extends BaseFoundation {
     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/lib/es/tooltip/foundation.js

@@ -7,6 +7,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import BaseFoundation from '../base/foundation';
+import { handlePrevent } from '../utils/a11y';
 const REGS = {
   TOP: /top/i,
   RIGHT: /right/i,
@@ -936,6 +937,7 @@ export default class Tooltip extends BaseFoundation {
 
     switch (event && event.key) {
       case "Escape":
+        handlePrevent(event);
         closeOnEsc && this._handleEscKeyDown(event);
         break;
 
@@ -965,14 +967,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
+        });
       }
     }
   }
@@ -983,43 +988,67 @@ export default class Tooltip extends BaseFoundation {
     } = 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, 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/treeSelect/foundation.js

@@ -318,8 +318,12 @@ export default class TreeSelectFoundation extends BaseFoundation {
     const isDisabled = this._isDisabled();
 
     const {
-      isOpen
+      isOpen,
+      inputValue
     } = this.getStates();
+    const {
+      searchPosition
+    } = this.getProps();
 
     if (isDisabled) {
       return;
@@ -328,6 +332,10 @@ export default class TreeSelectFoundation extends BaseFoundation {
 
       this._notifyFocus(e);
     } else if (isOpen) {
+      if (searchPosition === 'trigger' && inputValue) {
+        return;
+      }
+
       this.close(e);
     }
   }

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

@@ -2,6 +2,7 @@ declare type FocusRedirectListener = (element: HTMLElement) => boolean;
 interface HandleOptions {
     enable?: boolean;
     onFocusRedirectListener?: FocusRedirectListener | FocusRedirectListener[];
+    preventScroll?: boolean;
 }
 declare class FocusTrapHandle {
     container: HTMLElement;

package/lib/es/utils/FocusHandle.js

@@ -58,7 +58,12 @@ class FocusTrapHandle {
     };
 
     this.focusElement = (element, event) => {
-      element === null || element === void 0 ? void 0 : element.focus();
+      const {
+        preventScroll
+      } = this.options;
+      element === null || element === void 0 ? void 0 : element.focus({
+        preventScroll
+      });
       event.preventDefault(); // prevent browser default tab move behavior
     };
 

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

@@ -1 +1,10 @@
 export declare function handlePrevent(event: any): void;
+export declare function isPrintableCharacter(string: string): RegExpMatchArray;
+export declare function setFocusToItem(itemNodes: HTMLElement[], targetItem: HTMLElement): void;
+export declare function setFocusToFirstItem(itemNodes: HTMLElement[]): void;
+export declare function setFocusToLastItem(itemNodes: HTMLElement[]): void;
+export declare function setFocusToPreviousMenuItem(itemNodes: HTMLElement[], currentItem: HTMLElement): void;
+export declare function setFocusToNextMenuitem(itemNodes: HTMLElement[], currentItem: HTMLElement): void;
+export declare function findIndexByCharacter(itemList: HTMLElement[], curItem: HTMLElement, firstCharList: string[], char: string): number;
+export declare function getAncestorNodeByRole(curElement: Element, role: string): Element;
+export declare function getMenuButton(focusableEle: NodeListOf<HTMLElement>, Id: string): HTMLElement;

package/lib/es/utils/a11y.js

@@ -1,4 +1,105 @@
+import _get from "lodash/get";
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 export function handlePrevent(event) {
   event.stopPropagation();
   event.preventDefault();
+}
+export function isPrintableCharacter(string) {
+  return string.length === 1 && string.match(/\S/);
+} // set focus to the target item in item list
+
+export function setFocusToItem(itemNodes, targetItem) {
+  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) {
+  itemNodes.length > 0 && setFocusToItem(itemNodes, itemNodes[0]);
+} // set focus to the last item in item list
+
+export function setFocusToLastItem(itemNodes) {
+  itemNodes.length > 0 && setFocusToItem(itemNodes, itemNodes[itemNodes.length - 1]);
+} // set focus to the previous item in item list
+
+export function setFocusToPreviousMenuItem(itemNodes, currentItem) {
+  let newMenuItem, index;
+
+  if (itemNodes.length > 0) {
+    if (currentItem === itemNodes[0]) {
+      newMenuItem = itemNodes[itemNodes.length - 1];
+    } else {
+      index = _indexOfInstanceProperty(itemNodes).call(itemNodes, currentItem);
+      newMenuItem = itemNodes[index - 1];
+    }
+
+    setFocusToItem(itemNodes, newMenuItem);
+  }
+} // set focus to the next item in item list
+
+export function setFocusToNextMenuitem(itemNodes, currentItem) {
+  let newMenuItem, index;
+
+  if (itemNodes.length > 0) {
+    if (currentItem === itemNodes[itemNodes.length - 1]) {
+      newMenuItem = itemNodes[0];
+    } else {
+      index = _indexOfInstanceProperty(itemNodes).call(itemNodes, currentItem);
+      newMenuItem = itemNodes[index + 1];
+    }
+
+    setFocusToItem(itemNodes, newMenuItem);
+  }
+}
+export function findIndexByCharacter(itemList, curItem, firstCharList, char) {
+  let start, index;
+
+  if (!itemList || !firstCharList || !char || char.length > 1) {
+    return -1;
+  }
+
+  char = char.toLowerCase(); // Get start index for search based on position of currentItem
+
+  start = _indexOfInstanceProperty(itemList).call(itemList, curItem) + 1;
+
+  if (start >= itemList.length) {
+    start = 0;
+  } // Check remaining menu items in the menu
+
+
+  index = _indexOfInstanceProperty(firstCharList).call(firstCharList, char, start); // If not found in remaining menu items, check from beginning
+
+  if (index === -1) {
+    index = _indexOfInstanceProperty(firstCharList).call(firstCharList, char, 0);
+  }
+
+  return index >= 0 ? index : -1;
+}
+export function getAncestorNodeByRole(curElement, role) {
+  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, Id) {
+  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;
 }

package/list/list.scss

@@ -17,7 +17,7 @@ $module: #{$prefix}-list;
     }
 
     &-empty {
-        padding: $spacing-list_empty-padding;
+        padding: $spacing-list_empty-paddingY $spacing-list_empty-paddingX;
         color: $color-list_empty-text-default;
         width: 100%;
         text-align: center;

package/list/variables.scss

@@ -1,7 +1,8 @@
 $color-list_default-border-default: var(--semi-color-border); // 列表描边颜色
 $color-list_empty-text-default: var(--semi-color-text-2); // 空状态下列表文字颜色
 
-$spacing-list_empty-padding: $spacing-base-tight; // 空状态列表内边距
+$spacing-list_empty-paddingX: 0px; // 空状态列表水平内边距
+$spacing-list_empty-paddingY: $spacing-base-tight; // 空状态列表垂直内边距
 $spacing-list_footer-paddingX: $spacing-base-tight; // 列表 footer 水平内边距
 $spacing-list_footer-paddingY: $spacing-loose; // 列表 footer 垂直内边距
 $spacing-list_item-paddingX: $spacing-base-tight; // 列表 item 水平内边距 - 默认尺寸

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.14.0-beta.2",
+    "version": "2.15.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "b95b9eb9d6ded3aac3dc53afc48534d4e748a2e6",
+    "gitHead": "236be8e52864297171e3b08da20475139dadd633",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/rating/foundation.ts

@@ -1,10 +1,6 @@
 /* eslint-disable no-param-reassign */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-
-const KeyCode = {
-    LEFT: 37,
-    RIGHT: 39
-};
+import warning from '../utils/warning';
 
 export interface RatingAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     focus: () => void;
@@ -15,6 +11,7 @@ export interface RatingAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyFocus: (e: any) => void;
     notifyBlur: (e: any) => void;
     notifyKeyDown: (e: any) => void;
+    setEmptyStarFocusVisible: (focusVisible: boolean) => void;
 }
 
 export default class RatingFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<RatingAdapter<P, S>, P, S> {
@@ -121,37 +118,99 @@ export default class RatingFoundation<P = Record<string, any>, S = Record<string
     }
 
     handleKeyDown(event: any, value: number) {
-        const { keyCode } = event;
+        const { key } = event;
         const { count, allowHalf } = this.getProps();
         const direction = this._adapter.getContext('direction');
         const reverse = direction === 'rtl';
-        if (keyCode === KeyCode.RIGHT && value < count && !reverse) {
-            if (allowHalf) {
-                value += 0.5;
-            } else {
-                value += 1;
-            }
-        } else if (keyCode === KeyCode.LEFT && value > 0 && !reverse) {
-            if (allowHalf) {
-                value -= 0.5;
-            } else {
-                value -= 1;
-            }
-        } else if (keyCode === KeyCode.RIGHT && value > 0 && reverse) {
-            if (allowHalf) {
-                value -= 0.5;
-            } else {
-                value -= 1;
+        const step = allowHalf ? 0.5 : 1;
+        let tempValue: number;
+        let newValue: number;
+        if (key === 'ArrowRight' || key === 'ArrowUp') {
+            tempValue = value + (reverse ?  - step : step);
+        } else if (key === 'ArrowLeft' || key === 'ArrowDown') {
+            tempValue = value + (reverse ? step : - step);
+        }
+        if (tempValue > count) {
+            newValue = 0;
+        } else if (tempValue < 0) {
+            newValue = count;
+        } else {
+            newValue = tempValue;
+        }
+        if (['ArrowRight', 'ArrowUp', 'ArrowLeft', 'ArrowDown'].includes(key)) {
+            this._adapter.notifyKeyDown(event);
+            this._adapter.updateValue(newValue);
+            this.changeFocusStar(newValue, event);
+            event.preventDefault();
+            this._adapter.notifyHoverChange(undefined, null);
+        }
+    }
+
+    changeFocusStar(value: number, event: any) {
+        const { count, allowHalf, preventScroll } = this.getProps();
+        const index = Math.ceil(value) - 1;
+        const starElement = [...event.currentTarget.childNodes].map(item => item.childNodes[0].childNodes);
+        if (index < 0) {
+            starElement[count][0].focus({ preventScroll });
+        } else {
+            starElement[index][allowHalf ? (value * 10 % 10 === 5 ? 0 : 1) : 0].focus({ preventScroll });
+        }
+    }
+
+    handleStarFocusVisible = (event: any) => {
+        const { target } = event;
+        const { count } = this.getProps();
+        // when rating 0 is focus visible
+        try {
+            if (target.matches(':focus-visible')) {
+                this._adapter.setEmptyStarFocusVisible(true);
             }
-        } else if (keyCode === KeyCode.LEFT && value < count && reverse) {
-            if (allowHalf) {
-                value += 0.5;
-            } else {
-                value += 1;
+        } catch (error) {
+            warning(true, 'Warning: [Semi Rating] The current browser does not support the focus-visible'); 
+        }
+    }
+
+    handleStarBlur = (event: React.FocusEvent) => {
+        const { emptyStarFocusVisible } = this.getStates();
+        if (emptyStarFocusVisible) {
+            this._adapter.setEmptyStarFocusVisible(false);
+        } 
+    }
+}
+
+export interface RatingItemAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    setFirstStarFocus: (value: boolean) => void;
+    setSecondStarFocus: (value: boolean) => void;
+}
+
+export class RatingItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<RatingItemAdapter<P, S>, P, S> {
+
+    constructor(adapter: RatingItemAdapter<P, S>) {
+        super({ ...RatingItemFoundation.defaultAdapter, ...adapter });
+    }
+
+    handleFocusVisible = (event: any, star: string) => {
+        const { target } = event;
+        // when rating 0 is focus visible
+        try {
+            if (target.matches(':focus-visible')) {
+                if (star === 'first') {
+                    this._adapter.setFirstStarFocus(true);
+                } else {
+                    this._adapter.setSecondStarFocus(true);
+                }
             }
+        } catch (error) {
+            warning(true, 'Warning: [Semi Rating] The current browser does not support the focus-visible'); 
+        }
+    }
+
+    handleBlur = (event: React.FocusEvent, star: string) => {
+        const { firstStarFocus, secondStarFocus } = this.getStates();
+        if (star === 'first') {
+            firstStarFocus && this._adapter.setFirstStarFocus(false);
+        } else {
+            secondStarFocus && this._adapter.setSecondStarFocus(false);
         }
-        this._adapter.updateValue(value);
-        event.preventDefault();
-        this._adapter.notifyKeyDown(event);
     }
 }

package/rating/rating.scss

@@ -1,4 +1,4 @@
-@import "./variables.scss";
+@import './variables.scss';
 
 $module: #{$prefix}-rating;
 
@@ -7,10 +7,19 @@ $module: #{$prefix}-rating;
     margin: $spacing-rating-margin;
     padding: $spacing-rating-padding;
     color: $color-rating-icon-default;
-    font-size: $font-rating-fontSize;
-    line-height: unset;
+    // font-size: $font-rating-fontSize;
+    // line-height: unset;
     list-style: none;
     outline: none;
+    border-radius: 3px;
+
+    &-focus {
+        outline: $width-rating-outline-focus solid $color-rating-outline-focus;
+    }
+
+    &-no-focus {
+        outline: none;
+    }
 
     &-disabled &-star {
         cursor: default;
@@ -34,14 +43,14 @@ $module: #{$prefix}-rating;
         }
 
         & > div {
-            &:focus {
-                outline: 0;
-            }
-
             &:hover,
             &:focus {
                 transform: scale(1.1);
             }
+
+            &.#{$module}-star-disabled {
+                transform: none;
+            }
         }
 
         &-small {
@@ -58,6 +67,10 @@ $module: #{$prefix}-rating;
 
         &-wrapper {
             position: relative;
+            overflow: hidden;
+            border-radius: 3px;
+            width: 100%;
+            height: 100%;
         }
 
         &-first,
@@ -88,4 +101,4 @@ $module: #{$prefix}-rating;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/rating/variables.scss

@@ -1,6 +1,8 @@
 $color-rating-icon-default: rgba(var(--semi-yellow-5), 1); // 评分图标按钮颜色 - 已填
 $color-rating-bg-default: var(--semi-color-fill-0); // 评分图标按钮颜色 - 未填
 
+$color-rating-outline-focus: var(--semi-color-primary-light-active); // 聚焦轮廓颜色
+
 $font-rating-fontSize: 20px; // 评分文本字体大小
 
 $spacing-rating-margin: 0px; // 整体外边距
@@ -12,3 +14,5 @@ $font-rating_item_small-fontSize: $width-rating_item_small; // 小尺寸评分
 
 $width-rating_item_default: 24px; // 评分项宽度
 $font-rating_item_default-fontSize: $width-rating_item_default; // 评分项文本字体大小
+
+$width-rating-outline-focus: 2px; // 聚焦轮廓宽度