@douyinfe/semi-foundation 2.14.0 → 2.15.1

package/lib/cjs/datePicker/foundation.js

@@ -40,6 +40,8 @@ var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 
 var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
 
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
 
 var _isString2 = _interopRequireDefault(require("lodash/isString"));
@@ -176,6 +178,27 @@ class DatePickerFoundation extends _foundation.default {
     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() && (0, _isFunction2.default)(triggerRender) && result.length === 0) {
+      this._adapter.setRangeInputFocus('rangeStart');
+    }
   }
 
   parseWithTimezone(value, timeZone, prevTimeZone) {
@@ -1424,7 +1447,8 @@ class DatePickerFoundation extends _foundation.default {
 
   handleTriggerWrapperClick(e) {
     const {
-      disabled
+      disabled,
+      triggerRender
     } = this._adapter.getProps();
 
     const {
@@ -1443,12 +1467,19 @@ class DatePickerFoundation extends _foundation.default {
      */
 
 
-    if (this._isRangeType() && !rangeInputFocus && this._adapter.isEventTarget(e)) {
-      (0, _setTimeout2.default)(() => {
-        // using setTimeout get correct state value 'rangeInputFocus'
-        this.handleInputFocus(e, 'rangeStart');
-        this.openPanel();
-      }, 0);
+    if (this._isRangeType() && !rangeInputFocus) {
+      if (this._adapter.isEventTarget(e)) {
+        (0, _setTimeout2.default)(() => {
+          // using setTimeout get correct state value 'rangeInputFocus'
+          this.handleInputFocus(e, 'rangeStart');
+        }, 0);
+      } else if ((0, _isFunction2.default)(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/cjs/datePicker/monthsGridFoundation.js

@@ -28,8 +28,6 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
 
-var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
-
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
 
 var _isSet2 = _interopRequireDefault(require("lodash/isSet"));
@@ -828,11 +826,10 @@ class MonthsGridFoundation extends _foundation.default {
       /**
        * no need to check focus then
        *  - dateRange and isDateRangeAndHasOffset
-       *  - dateRange and triggerRender
        */
 
 
-      const needCheckFocusRecord = !(type === 'dateRange' && (isDateRangeAndHasOffset || (0, _isFunction2.default)(triggerRender)));
+      const needCheckFocusRecord = !(type === 'dateRange' && isDateRangeAndHasOffset);
 
       this._adapter.notifySelectedChange(date, {
         needCheckFocusRecord

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

@@ -10,8 +10,14 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports.default = void 0;
 
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
+var _a11y = require("../utils/a11y");
+
 class DropdownFoundation extends _foundation.default {
   handleVisibleChange(visible) {
     this._adapter.setPopVisible(visible);
@@ -19,6 +25,48 @@ class DropdownFoundation extends _foundation.default {
     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 ? (0, _filter.default)(_context = (0, _from.default)(menuWrapper.getElementsByTagName('li'))).call(_context, item => item.ariaDisabled === "false") : null;
+  }
+
+  setFocusToFirstMenuItem(target) {
+    const menuItemNodes = this.getMenuItemNodes(target);
+    menuItemNodes && (0, _a11y.setFocusToFirstItem)(menuItemNodes);
+  }
+
+  setFocusToLastMenuItem(target) {
+    const menuItemNodes = this.getMenuItemNodes(target);
+    menuItemNodes && (0, _a11y.setFocusToLastItem)(menuItemNodes);
+  }
+
+  handleKeyDown(event) {
+    switch (event.key) {
+      case ' ':
+      case 'Enter':
+        event.target.click();
+        (0, _a11y.handlePrevent)(event);
+        break;
+
+      case 'ArrowDown':
+        this.setFocusToFirstMenuItem(event.target);
+        (0, _a11y.handlePrevent)(event);
+        break;
+
+      case 'ArrowUp':
+        this.setFocusToLastMenuItem(event.target);
+        (0, _a11y.handlePrevent)(event);
+        break;
+
+      default:
+        break;
+    }
+  }
+
 }
 
 exports.default = DropdownFoundation;

package/lib/cjs/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/cjs/dropdown/menuFoundation.js

@@ -0,0 +1,119 @@
+"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 _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _a11y = require("../utils/a11y");
+
+class DropdownMenuFoundation extends _foundation.default {
+  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 = (0, _filter.default)(_context = [...ulElement.getElementsByTagName('li')]).call(_context, item => item.ariaDisabled !== "true");
+      (0, _a11y.setFocusToFirstItem)(this.menuItemNodes);
+    }
+  }
+
+  handleEscape(menu) {
+    const trigger = this._adapter.getContext('trigger');
+
+    if (trigger === 'custom') {
+      const menuButton = menu && (0, _a11y.getMenuButton)(document.querySelectorAll("[data-popupid]"), menu.id);
+      menuButton.focus();
+    }
+  }
+
+  setFocusByFirstCharacter(curItem, char) {
+    const index = (0, _a11y.findIndexByCharacter)(this.menuItemNodes, curItem, this.firstChars, char);
+
+    if (index >= 0) {
+      (0, _a11y.setFocusToItem)(this.menuItemNodes, this.menuItemNodes[index]);
+    }
+  }
+
+  onMenuKeydown(event) {
+    var _context5;
+
+    const menu = (0, _a11y.getAncestorNodeByRole)(event.target, 'tooltip');
+
+    if (!this.menuItemNodes) {
+      var _context2;
+
+      this.menuItemNodes = (0, _filter.default)(_context2 = [...event.target.parentNode.getElementsByTagName('li')]).call(_context2, item => item.ariaDisabled !== "true");
+    }
+
+    if (this.firstChars.length === 0) {
+      var _context3;
+
+      (0, _forEach.default)(_context3 = this.menuItemNodes).call(_context3, item => {
+        var _context4;
+
+        this.firstChars.push((0, _trim.default)(_context4 = item.textContent).call(_context4)[0].toLowerCase());
+      });
+    } // get the currently focused menu item
+
+
+    const curItem = (0, _find.default)(_context5 = this.menuItemNodes).call(_context5, item => item.tabIndex === 0);
+
+    switch (event.key) {
+      case ' ':
+      case 'Enter':
+        event.target.click();
+        (0, _a11y.handlePrevent)(event);
+        break;
+
+      case 'Escape':
+        this.handleEscape(menu);
+        break;
+
+      case 'ArrowUp':
+        (0, _a11y.setFocusToPreviousMenuItem)(this.menuItemNodes, curItem);
+        (0, _a11y.handlePrevent)(event);
+        break;
+
+      case 'ArrowDown':
+        (0, _a11y.setFocusToNextMenuitem)(this.menuItemNodes, curItem);
+        (0, _a11y.handlePrevent)(event);
+        break;
+
+      default:
+        if ((0, _a11y.isPrintableCharacter)(event.key)) {
+          this.setFocusByFirstCharacter(curItem, event.key);
+          (0, _a11y.handlePrevent)(event);
+        }
+
+        break;
+    }
+  }
+
+}
+
+exports.default = DropdownMenuFoundation;

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

@@ -8,21 +8,49 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.default = void 0;
+exports.default = exports.RatingItemFoundation = void 0;
 
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
 
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
-/* eslint-disable no-param-reassign */
-const KeyCode = {
-  LEFT: 37,
-  RIGHT: 39
-};
+var _warning = _interopRequireDefault(require("../utils/warning"));
 
+/* eslint-disable no-param-reassign */
 class RatingFoundation extends _foundation.default {
   constructor(adapter) {
     super((0, _assign.default)((0, _assign.default)({}, 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) {
+        (0, _warning.default)(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() {
@@ -152,8 +180,10 @@ class RatingFoundation extends _foundation.default {
   }
 
   handleKeyDown(event, value) {
+    var _context;
+
     const {
-      keyCode
+      key
     } = event;
     const {
       count,
@@ -163,40 +193,98 @@ class RatingFoundation extends _foundation.default {
     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;
     }
 
-    this._adapter.updateValue(value);
+    if ((0, _includes.default)(_context = ['ArrowRight', 'ArrowUp', 'ArrowLeft', 'ArrowDown']).call(_context, key)) {
+      this._adapter.notifyKeyDown(event);
 
-    event.preventDefault();
+      this._adapter.updateValue(newValue);
 
-    this._adapter.notifyKeyDown(event);
+      this.changeFocusStar(newValue, event);
+      event.preventDefault();
+
+      this._adapter.notifyHoverChange(undefined, null);
+    }
+  }
+
+  changeFocusStar(value, event) {
+    var _context2;
+
+    const {
+      count,
+      allowHalf,
+      preventScroll
+    } = this.getProps();
+    const index = Math.ceil(value) - 1;
+    const starElement = (0, _map.default)(_context2 = [...event.currentTarget.childNodes]).call(_context2, 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
+      });
+    }
+  }
+
+}
+
+exports.default = RatingFoundation;
+
+class RatingItemFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)((0, _assign.default)({}, 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) {
+        (0, _warning.default)(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);
+      }
+    };
   }
 
 }
 
-exports.default = RatingFoundation;
+exports.RatingItemFoundation = RatingItemFoundation;

package/lib/cjs/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/cjs/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';