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

package/lib/es/datePicker/foundation.js

@@ -1,3 +1,4 @@
+import _isFunction from "lodash/isFunction";
 import _isEqual from "lodash/isEqual";
 import _isString from "lodash/isString";
 import _isObject from "lodash/isObject";
@@ -135,6 +136,27 @@ export default class DatePickerFoundation extends BaseFoundation {
     this._adapter.updateValue(result);
 
     this.resetCachedSelectedValue(result);
+    this.initRangeInputFocus(result);
+
+    if (this._adapter.needConfirm()) {
+      this._adapter.updateCachedSelectedValue(result);
+    }
+  }
+  /**
+   * 如果用户传了一个空的 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) {
+    const {
+      triggerRender
+    } = this.getProps();
+
+    if (this._isRangeType() && _isFunction(triggerRender) && result.length === 0) {
+      this._adapter.setRangeInputFocus('rangeStart');
+    }
   }
 
   parseWithTimezone(value, timeZone, prevTimeZone) {
@@ -1392,7 +1414,8 @@ export default class DatePickerFoundation extends BaseFoundation {
 
   handleTriggerWrapperClick(e) {
     const {
-      disabled
+      disabled,
+      triggerRender
     } = this._adapter.getProps();
 
     const {
@@ -1411,12 +1434,19 @@ export default class DatePickerFoundation extends BaseFoundation {
      */
 
 
-    if (this._isRangeType() && !rangeInputFocus && this._adapter.isEventTarget(e)) {
-      _setTimeout(() => {
-        // using setTimeout get correct state value 'rangeInputFocus'
-        this.handleInputFocus(e, 'rangeStart');
-        this.openPanel();
-      }, 0);
+    if (this._isRangeType() && !rangeInputFocus) {
+      if (this._adapter.isEventTarget(e)) {
+        _setTimeout(() => {
+          // using setTimeout get correct state value 'rangeInputFocus'
+          this.handleInputFocus(e, 'rangeStart');
+        }, 0);
+      } else if (_isFunction(triggerRender)) {
+        // 如果是 triggerRender 场景，因为没有 input，因此打开面板时默认 focus 在 rangeStart
+        // If it is a triggerRender scene, because there is no input, the default focus is rangeStart when the panel is opened
+        this._adapter.setRangeInputFocus('rangeStart');
+      }
+
+      this.openPanel();
     } else {
       this.openPanel();
     }

package/lib/es/datePicker/monthsGridFoundation.js

@@ -1,4 +1,3 @@
-import _isFunction from "lodash/isFunction";
 import _isEqual from "lodash/isEqual";
 import _isSet from "lodash/isSet";
 import _includes from "lodash/includes";
@@ -800,11 +799,10 @@ export default class MonthsGridFoundation extends BaseFoundation {
       /**
        * no need to check focus then
        *  - dateRange and isDateRangeAndHasOffset
-       *  - dateRange and triggerRender
        */
 
 
-      const needCheckFocusRecord = !(type === 'dateRange' && (isDateRangeAndHasOffset || _isFunction(triggerRender)));
+      const needCheckFocusRecord = !(type === 'dateRange' && isDateRangeAndHasOffset);
 
       this._adapter.notifySelectedChange(date, {
         needCheckFocusRecord

package/lib/es/dropdown/dropdown.css

@@ -53,6 +53,10 @@
 .semi-dropdown-item:not(.semi-dropdown-item-active):active {
   background-color: var(--semi-color-fill-1);
 }
+.semi-dropdown-item:focus-visible {
+  background-color: var(--semi-color-fill-0);
+  outline: 0;
+}
 .semi-dropdown-item-icon {
   display: inline-flex;
   align-items: center;

package/lib/es/dropdown/dropdown.scss

@@ -50,6 +50,10 @@ $module: #{$prefix}-dropdown;
         &:not(.#{$module}-item-active):active {
             background-color: $color-dropdown_item-bg-active;
         }
+        &:focus-visible {
+            background-color: $color-dropdown_item-bg-hover;
+            outline: 0;
+        }
         &-icon {
             display: inline-flex;
             align-items: center;

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

@@ -5,4 +5,8 @@ export interface DropdownAdapter extends Partial<DefaultAdapter> {
 }
 export default class DropdownFoundation extends BaseFoundation<DropdownAdapter> {
     handleVisibleChange(visible: boolean): void;
+    getMenuItemNodes(target: any): HTMLElement[];
+    setFocusToFirstMenuItem(target: any): void;
+    setFocusToLastMenuItem(target: any): void;
+    handleKeyDown(event: any): void;
 }

package/lib/es/dropdown/foundation.js

@@ -1,4 +1,7 @@
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import BaseFoundation from '../base/foundation';
+import { handlePrevent, setFocusToFirstItem, setFocusToLastItem } from '../utils/a11y';
 export default class DropdownFoundation extends BaseFoundation {
   handleVisibleChange(visible) {
     this._adapter.setPopVisible(visible);
@@ -6,4 +9,46 @@ export default class DropdownFoundation extends BaseFoundation {
     this._adapter.notifyVisibleChange(visible);
   }
 
+  getMenuItemNodes(target) {
+    var _context;
+
+    const id = target.attributes['data-popupId'].value;
+    const menuWrapper = document.getElementById(id); // if has dropdown item, the item must wrapped by li
+
+    return menuWrapper ? _filterInstanceProperty(_context = _Array$from(menuWrapper.getElementsByTagName('li'))).call(_context, item => item.ariaDisabled === "false") : null;
+  }
+
+  setFocusToFirstMenuItem(target) {
+    const menuItemNodes = this.getMenuItemNodes(target);
+    menuItemNodes && setFocusToFirstItem(menuItemNodes);
+  }
+
+  setFocusToLastMenuItem(target) {
+    const menuItemNodes = this.getMenuItemNodes(target);
+    menuItemNodes && setFocusToLastItem(menuItemNodes);
+  }
+
+  handleKeyDown(event) {
+    switch (event.key) {
+      case ' ':
+      case 'Enter':
+        event.target.click();
+        handlePrevent(event);
+        break;
+
+      case 'ArrowDown':
+        this.setFocusToFirstMenuItem(event.target);
+        handlePrevent(event);
+        break;
+
+      case 'ArrowUp':
+        this.setFocusToLastMenuItem(event.target);
+        handlePrevent(event);
+        break;
+
+      default:
+        break;
+    }
+  }
+
 }

package/lib/es/dropdown/menuFoundation.d.ts

@@ -0,0 +1,9 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export default class DropdownMenuFoundation extends BaseFoundation<Partial<DefaultAdapter>> {
+    menuItemNodes: HTMLElement[];
+    firstChars: string[];
+    autoFocus(ulElement: any): void;
+    handleEscape(menu: Element): void;
+    setFocusByFirstCharacter(curItem: any, char: string): void;
+    onMenuKeydown(event: any): void;
+}

package/lib/es/dropdown/menuFoundation.js

@@ -0,0 +1,99 @@
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import BaseFoundation from '../base/foundation';
+import { handlePrevent, isPrintableCharacter, findIndexByCharacter, getAncestorNodeByRole, getMenuButton, setFocusToFirstItem, setFocusToItem, setFocusToNextMenuitem, setFocusToPreviousMenuItem } from '../utils/a11y';
+export default class DropdownMenuFoundation extends BaseFoundation {
+  constructor() {
+    super(...arguments);
+    this.menuItemNodes = null;
+    this.firstChars = [];
+  } // if trigger is click, auto focus to the first menu item
+
+
+  autoFocus(ulElement) {
+    const trigger = this._adapter.getContext('trigger');
+
+    if (trigger === 'click') {
+      var _context;
+
+      // find all non-disabled li under this menu and set focus to the first menu
+      this.menuItemNodes = _filterInstanceProperty(_context = [...ulElement.getElementsByTagName('li')]).call(_context, item => item.ariaDisabled !== "true");
+      setFocusToFirstItem(this.menuItemNodes);
+    }
+  }
+
+  handleEscape(menu) {
+    const trigger = this._adapter.getContext('trigger');
+
+    if (trigger === 'custom') {
+      const menuButton = menu && getMenuButton(document.querySelectorAll("[data-popupId]"), menu.id);
+      menuButton.focus();
+    }
+  }
+
+  setFocusByFirstCharacter(curItem, char) {
+    const index = findIndexByCharacter(this.menuItemNodes, curItem, this.firstChars, char);
+
+    if (index >= 0) {
+      setFocusToItem(this.menuItemNodes, this.menuItemNodes[index]);
+    }
+  }
+
+  onMenuKeydown(event) {
+    var _context5;
+
+    const menu = getAncestorNodeByRole(event.target, 'tooltip');
+
+    if (!this.menuItemNodes) {
+      var _context2;
+
+      this.menuItemNodes = _filterInstanceProperty(_context2 = [...event.target.parentNode.getElementsByTagName('li')]).call(_context2, item => item.ariaDisabled !== "true");
+    }
+
+    if (this.firstChars.length === 0) {
+      var _context3;
+
+      _forEachInstanceProperty(_context3 = this.menuItemNodes).call(_context3, item => {
+        var _context4;
+
+        this.firstChars.push(_trimInstanceProperty(_context4 = item.textContent).call(_context4)[0].toLowerCase());
+      });
+    } // get the currently focused menu item
+
+
+    const curItem = _findInstanceProperty(_context5 = this.menuItemNodes).call(_context5, item => item.tabIndex === 0);
+
+    switch (event.key) {
+      case ' ':
+      case 'Enter':
+        event.target.click();
+        handlePrevent(event);
+        break;
+
+      case 'Escape':
+        this.handleEscape(menu);
+        break;
+
+      case 'ArrowUp':
+        setFocusToPreviousMenuItem(this.menuItemNodes, curItem);
+        handlePrevent(event);
+        break;
+
+      case 'ArrowDown':
+        setFocusToNextMenuitem(this.menuItemNodes, curItem);
+        handlePrevent(event);
+        break;
+
+      default:
+        if (isPrintableCharacter(event.key)) {
+          this.setFocusByFirstCharacter(curItem, event.key);
+          handlePrevent(event);
+        }
+
+        break;
+    }
+  }
+
+}

package/lib/es/list/list.css

@@ -15,7 +15,7 @@
   padding: 12px 24px;
 }
 .semi-list-empty {
-  padding: 12px;
+  padding: 12px 0px;
   color: var(--semi-color-text-2);
   width: 100%;
   text-align: center;

package/lib/es/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/lib/es/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/lib/es/modal/modalFoundation.d.ts

@@ -51,6 +51,7 @@ export interface ModalProps {
     keepDOM?: boolean;
     direction?: any;
     fullScreen?: boolean;
+    preventScroll?: boolean;
 }
 export interface ModalState {
     hidden: boolean;

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

@@ -8,6 +8,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> {
     constructor(adapter: RatingAdapter<P, S>);
@@ -25,4 +26,16 @@ export default class RatingFoundation<P = Record<string, any>, S = Record<string
     handleFocus(e: any): void;
     handleBlur(e: any): void;
     handleKeyDown(event: any, value: number): void;
+    changeFocusStar(value: number, event: any): void;
+    handleStarFocusVisible: (event: any) => void;
+    handleStarBlur: (event: React.FocusEvent) => void;
+}
+export interface RatingItemAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    setFirstStarFocus: (value: boolean) => void;
+    setSecondStarFocus: (value: boolean) => void;
+}
+export declare class RatingItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<RatingItemAdapter<P, S>, P, S> {
+    constructor(adapter: RatingItemAdapter<P, S>);
+    handleFocusVisible: (event: any, star: string) => void;
+    handleBlur: (event: React.FocusEvent, star: string) => void;
 }

package/lib/es/rating/foundation.js

@@ -1,14 +1,40 @@
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 
 /* eslint-disable no-param-reassign */
 import BaseFoundation from '../base/foundation';
-const KeyCode = {
-  LEFT: 37,
-  RIGHT: 39
-};
+import warning from '../utils/warning';
 export default class RatingFoundation extends BaseFoundation {
   constructor(adapter) {
     super(_Object$assign(_Object$assign({}, RatingFoundation.defaultAdapter), adapter));
+
+    this.handleStarFocusVisible = event => {
+      const {
+        target
+      } = event;
+      const {
+        count
+      } = this.getProps(); // when rating 0 is focus visible
+
+      try {
+        if (target.matches(':focus-visible')) {
+          this._adapter.setEmptyStarFocusVisible(true);
+        }
+      } catch (error) {
+        warning(true, 'Warning: [Semi Rating] The current browser does not support the focus-visible');
+      }
+    };
+
+    this.handleStarBlur = event => {
+      const {
+        emptyStarFocusVisible
+      } = this.getStates();
+
+      if (emptyStarFocusVisible) {
+        this._adapter.setEmptyStarFocusVisible(false);
+      }
+    };
   }
 
   init() {
@@ -138,8 +164,10 @@ export default class RatingFoundation extends BaseFoundation {
   }
 
   handleKeyDown(event, value) {
+    var _context;
+
     const {
-      keyCode
+      key
     } = event;
     const {
       count,
@@ -149,38 +177,94 @@ export default class RatingFoundation extends BaseFoundation {
     const direction = this._adapter.getContext('direction');
 
     const reverse = direction === 'rtl';
+    const step = allowHalf ? 0.5 : 1;
+    let tempValue;
+    let newValue;
+
+    if (key === 'ArrowRight' || key === 'ArrowUp') {
+      tempValue = value + (reverse ? -step : step);
+    } else if (key === 'ArrowLeft' || key === 'ArrowDown') {
+      tempValue = value + (reverse ? step : -step);
+    }
 
-    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;
-      }
-    } else if (keyCode === KeyCode.LEFT && value < count && reverse) {
-      if (allowHalf) {
-        value += 0.5;
-      } else {
-        value += 1;
-      }
+    if (tempValue > count) {
+      newValue = 0;
+    } else if (tempValue < 0) {
+      newValue = count;
+    } else {
+      newValue = tempValue;
+    }
+
+    if (_includesInstanceProperty(_context = ['ArrowRight', 'ArrowUp', 'ArrowLeft', 'ArrowDown']).call(_context, key)) {
+      this._adapter.notifyKeyDown(event);
+
+      this._adapter.updateValue(newValue);
+
+      this.changeFocusStar(newValue, event);
+      event.preventDefault();
+
+      this._adapter.notifyHoverChange(undefined, null);
     }
+  }
 
-    this._adapter.updateValue(value);
+  changeFocusStar(value, event) {
+    var _context2;
 
-    event.preventDefault();
+    const {
+      count,
+      allowHalf,
+      preventScroll
+    } = this.getProps();
+    const index = Math.ceil(value) - 1;
+
+    const starElement = _mapInstanceProperty(_context2 = [...event.currentTarget.childNodes]).call(_context2, item => item.childNodes[0].childNodes);
 
-    this._adapter.notifyKeyDown(event);
+    if (index < 0) {
+      starElement[count][0].focus({
+        preventScroll
+      });
+    } else {
+      starElement[index][allowHalf ? value * 10 % 10 === 5 ? 0 : 1 : 0].focus({
+        preventScroll
+      });
+    }
+  }
+
+}
+export class RatingItemFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(_Object$assign(_Object$assign({}, RatingItemFoundation.defaultAdapter), adapter));
+
+    this.handleFocusVisible = (event, star) => {
+      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');
+      }
+    };
+
+    this.handleBlur = (event, star) => {
+      const {
+        firstStarFocus,
+        secondStarFocus
+      } = this.getStates();
+
+      if (star === 'first') {
+        firstStarFocus && this._adapter.setFirstStarFocus(false);
+      } else {
+        secondStarFocus && this._adapter.setSecondStarFocus(false);
+      }
+    };
   }
 
 }

package/lib/es/rating/rating.css

@@ -6,10 +6,15 @@
   margin: 0px;
   padding: 0px;
   color: rgba(var(--semi-yellow-5), 1);
-  font-size: 20px;
-  line-height: unset;
   list-style: none;
   outline: none;
+  border-radius: 3px;
+}
+.semi-rating-focus {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
+.semi-rating-no-focus {
+  outline: none;
 }
 .semi-rating-disabled .semi-rating-star {
   cursor: default;
@@ -29,12 +34,12 @@
 .semi-rating-star:not(:last-child) {
   margin-right: 6px;
 }
-.semi-rating-star > div:focus {
-  outline: 0;
-}
 .semi-rating-star > div:hover, .semi-rating-star > div:focus {
   transform: scale(1.1);
 }
+.semi-rating-star > div.semi-rating-star-disabled {
+  transform: none;
+}
 .semi-rating-star-small {
   width: 16px;
   height: 16px;
@@ -47,6 +52,10 @@
 }
 .semi-rating-star-wrapper {
   position: relative;
+  overflow: hidden;
+  border-radius: 3px;
+  width: 100%;
+  height: 100%;
 }
 .semi-rating-star-first, .semi-rating-star-second {
   color: var(--semi-color-fill-0);

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