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

package/lib/cjs/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; // 聚焦轮廓宽度

package/lib/cjs/tabs/foundation.js

@@ -37,6 +37,9 @@ class TabsFoundation extends _foundation.default {
     this.handleKeyDown = (event, itemKey, closable) => {
       var _context;
 
+      const {
+        preventScroll
+      } = this.getProps();
       const tabs = (0, _filter.default)(_context = [...event.target.parentNode.childNodes]).call(_context, item => {
         var _context2;
 
@@ -63,13 +66,17 @@ class TabsFoundation extends _foundation.default {
           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;
@@ -164,18 +171,27 @@ class TabsFoundation extends _foundation.default {
   }
 
   handleDeleteKeyDown(event, tabs, itemKey, closable) {
+    const {
+      preventScroll
+    } = this.getProps();
+
     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();
+        tabs[index + 1 >= tabs.length ? index - 1 : index + 1].focus({
+          preventScroll
+        });
       }
     }
   }
 
   switchTabOnArrowPress(event, tabs) {
+    const {
+      preventScroll
+    } = this.getProps();
     const index = (0, _indexOf.default)(tabs).call(tabs, event.target);
     const direction = {
       "ArrowLeft": -1,
@@ -187,11 +203,17 @@ class TabsFoundation extends _foundation.default {
     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/cjs/tooltip/foundation.js

@@ -28,6 +28,8 @@ var _get2 = _interopRequireDefault(require("lodash/get"));
 
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
+var _a11y = require("../utils/a11y");
+
 const REGS = {
   TOP: /top/i,
   RIGHT: /right/i,
@@ -952,6 +954,7 @@ class Tooltip extends _foundation.default {
 
     switch (event && event.key) {
       case "Escape":
+        (0, _a11y.handlePrevent)(event);
         closeOnEsc && this._handleEscKeyDown(event);
         break;
 
@@ -981,14 +984,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
+        });
       }
     }
   }
@@ -999,43 +1005,67 @@ class Tooltip extends _foundation.default {
     } = 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/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/treeSelect/foundation.js

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

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

@@ -74,7 +74,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/cjs/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/cjs/utils/a11y.js

@@ -2,13 +2,136 @@
 
 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.findIndexByCharacter = findIndexByCharacter;
+exports.getAncestorNodeByRole = getAncestorNodeByRole;
+exports.getMenuButton = getMenuButton;
 exports.handlePrevent = handlePrevent;
+exports.isPrintableCharacter = isPrintableCharacter;
+exports.setFocusToFirstItem = setFocusToFirstItem;
+exports.setFocusToItem = setFocusToItem;
+exports.setFocusToLastItem = setFocusToLastItem;
+exports.setFocusToNextMenuitem = setFocusToNextMenuitem;
+exports.setFocusToPreviousMenuItem = setFocusToPreviousMenuItem;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
 
 function handlePrevent(event) {
   event.stopPropagation();
   event.preventDefault();
+}
+
+function isPrintableCharacter(string) {
+  return string.length === 1 && string.match(/\S/);
+} // set focus to the target item in item list
+
+
+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
+
+
+function setFocusToFirstItem(itemNodes) {
+  itemNodes.length > 0 && setFocusToItem(itemNodes, itemNodes[0]);
+} // set focus to the last item in item list
+
+
+function setFocusToLastItem(itemNodes) {
+  itemNodes.length > 0 && setFocusToItem(itemNodes, itemNodes[itemNodes.length - 1]);
+} // set focus to the previous item in item list
+
+
+function setFocusToPreviousMenuItem(itemNodes, currentItem) {
+  let newMenuItem, index;
+
+  if (itemNodes.length > 0) {
+    if (currentItem === itemNodes[0]) {
+      newMenuItem = itemNodes[itemNodes.length - 1];
+    } else {
+      index = (0, _indexOf.default)(itemNodes).call(itemNodes, currentItem);
+      newMenuItem = itemNodes[index - 1];
+    }
+
+    setFocusToItem(itemNodes, newMenuItem);
+  }
+} // set focus to the next item in item list
+
+
+function setFocusToNextMenuitem(itemNodes, currentItem) {
+  let newMenuItem, index;
+
+  if (itemNodes.length > 0) {
+    if (currentItem === itemNodes[itemNodes.length - 1]) {
+      newMenuItem = itemNodes[0];
+    } else {
+      index = (0, _indexOf.default)(itemNodes).call(itemNodes, currentItem);
+      newMenuItem = itemNodes[index + 1];
+    }
+
+    setFocusToItem(itemNodes, newMenuItem);
+  }
+}
+
+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 = (0, _indexOf.default)(itemList).call(itemList, curItem) + 1;
+
+  if (start >= itemList.length) {
+    start = 0;
+  } // Check remaining menu items in the menu
+
+
+  index = (0, _indexOf.default)(firstCharList).call(firstCharList, char, start); // If not found in remaining menu items, check from beginning
+
+  if (index === -1) {
+    index = (0, _indexOf.default)(firstCharList).call(firstCharList, char, 0);
+  }
+
+  return index >= 0 ? index : -1;
+}
+
+function getAncestorNodeByRole(curElement, role) {
+  if (!curElement) {
+    return null;
+  }
+
+  while (curElement.parentElement && (0, _get2.default)(curElement.parentElement, 'attributes.role.value', '') !== role) {
+    curElement = curElement.parentElement;
+  }
+
+  return curElement.parentElement;
+} // According to the Id, find the corresponding data-popupId element
+
+
+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/lib/es/cascader/cascader.css

@@ -149,6 +149,12 @@
 .semi-cascader-selection .semi-tagInput .semi-input-wrapper-large {
   height: 38px;
 }
+.semi-cascader-selection-text-inactive {
+  color: var(--semi-color-text-2);
+}
+.semi-cascader-selection-text-hide {
+  display: none;
+}
 .semi-cascader-arrow, .semi-cascader-clearbtn {
   display: inline-flex;
   align-items: center;
@@ -242,8 +248,17 @@
 }
 .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper {
   width: 100%;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  position: relative;
 }
 .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  background-color: transparent;
   height: 100%;
   width: 100%;
   border: none;

package/lib/es/cascader/cascader.scss

@@ -175,6 +175,17 @@ $module: #{$prefix}-cascader;
                 height: $height-cascader_selection_tagInput_input_large;
             }
         }
+
+        &-text {
+
+            &-inactive {
+                color: $color-cascader_selection_text_inactive;
+            }
+
+            &-hide {
+                display: none;
+            }
+        }
     }
 
     &-arrow,
@@ -294,8 +305,17 @@ $module: #{$prefix}-cascader;
     .#{$module}-selection {
         .#{$module}-search-wrapper {
             width: 100%;
+            height: $height-cascader_selection_wrapper;
+            display: flex;
+            align-items: center;
+            position: relative;
 
             .#{$prefix}-input-wrapper {
+                position: absolute;
+                top: 0;
+                left: 0;
+                border: none;
+                background-color: transparent;
                 height: 100%;
                 width: 100%;
                 border: $color-cascader_input-border-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;
@@ -136,6 +137,7 @@ export interface BasicCascaderInnerData {
     isFocus?: boolean;
     isInput?: boolean;
     disabledKeys?: Set<string>;
+    showInput?: boolean;
 }
 export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, BasicCascaderInnerData> {
     notifyClear?: () => void;
@@ -160,6 +162,8 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     notifyOnLoad: (newLoadedKeys: Set<string>, data: BasicCascaderData) => void;
     notifyListScroll: (e: any, panel: BasicScrollPanelProps) => void;
     notifyOnExceed: (data: BasicEntity[]) => void;
+    toggleInputShow: (show: boolean, cb: () => void) => void;
+    updateFocusState: (focus: boolean) => void;
 }
 export default class CascaderFoundation extends BaseFoundation<CascaderAdapter, BasicCascaderProps, BasicCascaderInnerData> {
     constructor(adapter: CascaderAdapter);
@@ -187,6 +191,8 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     open(): void;
     reCalcActiveKeys(): void;
     close(e: any, key?: string): void;
+    toggle2SearchInput(isShow: boolean): void;
+    focusInput(): void;
     getMergedMotion: () => any;
     handleItemClick(e: any, item: BasicEntity | BasicData): void;
     handleItemHover(e: any, item: BasicEntity): void;

package/lib/es/cascader/foundation.js

@@ -388,10 +388,16 @@ export default class CascaderFoundation extends BaseFoundation {
   open() {
     const filterable = this._isFilterable();
 
+    const {
+      multiple
+    } = this.getProps();
+
     this._adapter.openMenu();
 
     if (filterable) {
       this._clearInput();
+
+      !multiple && this.toggle2SearchInput(true);
     }
 
     if (this._isControlledComponent()) {
@@ -451,11 +457,28 @@ export default class CascaderFoundation extends BaseFoundation {
       this._adapter.updateStates({
         inputValue
       });
+
+      !multiple && this.toggle2SearchInput(false);
+      !multiple && this._adapter.updateFocusState(false);
     }
 
     this._notifyBlur(e);
   }
 
+  toggle2SearchInput(isShow) {
+    if (isShow) {
+      this._adapter.toggleInputShow(isShow, () => this.focusInput());
+    } else {
+      this._adapter.toggleInputShow(isShow, () => undefined);
+    }
+  }
+
+  focusInput() {
+    this._adapter.focusInput();
+
+    this._adapter.updateFocusState(true);
+  }
+
   handleItemClick(e, item) {
     const isDisabled = this._isDisabled();
 

package/lib/es/cascader/variables.scss

@@ -54,6 +54,7 @@ $spacing-cascader_clearBtn-marginRight: 12px; // 级联选择触发器清空按
 
 $color-cascader_selection_n-text-default: var(--semi-color-text-0); // 超出 maxTagCount 后，+n 的文字默认颜色
 $color-cascader_selection_n-text-disabled: var(--semi-color-disabled-text); // 超出 maxTagCount 后，+n 的文字disabled颜色
+$color-cascader_selection_text_inactive: var(--semi-color-text-2); // 级联选择单选inpu输入框和text并存时，text颜色
 $color-cascader_selection-text-default: var(--semi-color-text-0); // 级联选择选中项文字颜色
 $color-cascader_placeholder-text-default: var(--semi-color-text-2); // 级联选择未选中项文字颜色
 $color-cascader-icon-default: var(--semi-color-text-2); // 级联选择图标颜色 - 默认
@@ -94,6 +95,7 @@ $height-cascader_option_list: 180px; // 级联选择菜单高度
 $height-cascader_selection_tagInput_input_small: 22px;
 $height-cascader_selection_tagInput_input_default: 30px;
 $height-cascader_selection_tagInput_input_large: 38px;
+$height-cascader_selection_wrapper: 30px;
 
 $spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距
 $spacing-cascader_icon-marginX: $spacing-tight; // 级联选择 prefix/suffix 图标水平内间距

package/lib/es/checkbox/checkbox.css

@@ -75,11 +75,6 @@
 .semi-checkbox-inner-display .semi-icon {
   font-size: 16px;
 }
-.semi-checkbox-inner-pureCardType {
-  opacity: 0;
-  width: 0;
-  margin-right: 0 !important;
-}
 .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary);
   color: var(--semi-color-white);
@@ -138,6 +133,11 @@
 .semi-checkbox-cardType .semi-checkbox-inner-display {
   background: var(--semi-color-white);
 }
+.semi-checkbox-cardType .semi-checkbox-inner-pureCardType {
+  opacity: 0;
+  width: 0;
+  margin-right: 0;
+}
 .semi-checkbox-cardType .semi-checkbox-addon {
   font-weight: 600;
   font-size: 14px;

package/lib/es/checkbox/checkbox.scss

@@ -101,15 +101,6 @@ $module: #{$prefix}-checkbox;
                 font-size: 16px;
             }
         }
-
-        &-pureCardType {
-            // Reasons to use opacity:0 & width: 0 instead of display: none
-            // The a11y keyboard focus event of the checkbox depends on the implementation of the input focus/blur event
-            // input focus/blur cannot take effect when display: none
-            opacity: 0;
-            width: 0;
-            margin-right: 0 !important;
-        }
     }
 
     &-inner-checked {
@@ -196,6 +187,15 @@ $module: #{$prefix}-checkbox;
             flex-shrink: 0;
         }
 
+        .#{$module}-inner-pureCardType {
+            // Reasons to use opacity:0 & width: 0 instead of display: none
+            // The a11y keyboard focus event of the checkbox depends on the implementation of the input focus/blur event
+            // input focus/blur cannot take effect when display: none
+            opacity: 0;
+            width: 0;
+            margin-right: 0;
+        }
+
         .#{$module}-addon {
             font-weight: $font-checkbox_cardType_addon-fontWeight;
             font-size: $font-checkbox_cardType_addon-size;

package/lib/es/checkbox/checkboxFoundation.d.ts

@@ -62,5 +62,6 @@ export interface BaseCheckboxProps {
     extra?: any;
     addonId?: string;
     extraId?: string;
+    preventScroll?: boolean;
 }
 export default CheckboxFoundation;

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

@@ -131,6 +131,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     localeCode?: string;
     rangeSeparator?: string;
     insetInput?: boolean;
+    preventScroll?: boolean;
 }
 export interface DatePickerFoundationState {
     panelShow: boolean;
@@ -184,6 +185,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;
     /**