@douyinfe/semi-foundation 2.29.0 → 2.30.0-beta.0

package/datePicker/monthsGridFoundation.ts

@@ -228,12 +228,13 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     }
 
     _initDatePickerFromValue(values: Date[], refreshPicker = true) {
-        const monthLeft = this.getState('monthLeft');
+        const { monthLeft } = this._adapter.getStates();
         const newMonthLeft = { ...monthLeft };
         // REMOVE:
         this._adapter.updateMonthOnLeft(newMonthLeft);
         const newSelected = new Set<string>();
-        if (!this._isMultiple()) {
+        const isMultiple = this._isMultiple();
+        if (!isMultiple) {
             values[0] && newSelected.add(format(values[0] as Date, strings.FORMAT_FULL_DATE));
         } else {
             values.forEach(date => {
@@ -241,7 +242,12 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
             });
         }
         if (refreshPicker) {
-            this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
+            if (isMultiple) {
+                const leftPickerDateInSelected = values?.some(item => item && differenceInCalendarMonths(item, monthLeft.pickerDate) === 0);
+                !leftPickerDateInSelected && this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
+            } else {
+                this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
+            }
         } else {
             // FIXME:
             this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, newMonthLeft.pickerDate);

package/lib/cjs/datePicker/monthsGridFoundation.js

@@ -154,14 +154,20 @@ class MonthsGridFoundation extends _foundation.default {
 
   _initDatePickerFromValue(values) {
     let refreshPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    const monthLeft = this.getState('monthLeft');
+
+    const {
+      monthLeft
+    } = this._adapter.getStates();
+
     const newMonthLeft = Object.assign({}, monthLeft); // REMOVE:
 
     this._adapter.updateMonthOnLeft(newMonthLeft);
 
     const newSelected = new Set();
 
-    if (!this._isMultiple()) {
+    const isMultiple = this._isMultiple();
+
+    if (!isMultiple) {
       values[0] && newSelected.add((0, _dateFns.format)(values[0], _constants.strings.FORMAT_FULL_DATE));
     } else {
       values.forEach(date => {
@@ -170,7 +176,12 @@ class MonthsGridFoundation extends _foundation.default {
     }
 
     if (refreshPicker) {
-      this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
+      if (isMultiple) {
+        const leftPickerDateInSelected = values === null || values === void 0 ? void 0 : values.some(item => item && (0, _dateFns.differenceInCalendarMonths)(item, monthLeft.pickerDate) === 0);
+        !leftPickerDateInSelected && this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
+      } else {
+        this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
+      }
     } else {
       // FIXME:
       this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, newMonthLeft.pickerDate);

package/lib/cjs/popconfirm/popconfirmFoundation.d.ts

@@ -7,6 +7,9 @@ export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, a
     notifyCancel: (e: any) => Promise<any> | void;
     notifyVisibleChange: (visible: boolean) => void;
     notifyClickOutSide: (e: any) => void;
+    focusCancelButton: () => void;
+    focusOkButton: () => void;
+    focusPrevFocusElement: () => void;
 }
 export default class PopConfirmFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PopconfirmAdapter<P, S>, P, S> {
     init(): void;
@@ -15,4 +18,5 @@ export default class PopConfirmFoundation<P = Record<string, any>, S = Record<st
     handleConfirm(e: any): void;
     handleClickOutSide(e: any): void;
     handleVisibleChange(visible: boolean): void;
+    handleFocusOperateButton(): void;
 }

package/lib/cjs/popconfirm/popconfirmFoundation.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
 var _isPromise = _interopRequireDefault(require("../utils/isPromise"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* eslint-disable @typescript-eslint/no-empty-function */
 class PopConfirmFoundation extends _foundation.default {
   init() {}
 
@@ -62,9 +63,28 @@ class PopConfirmFoundation extends _foundation.default {
       this._adapter.setVisible(visible);
     }
 
+    if (visible) {
+      this.handleFocusOperateButton();
+    } else {
+      this._adapter.focusPrevFocusElement();
+    }
+
     this._adapter.notifyVisibleChange(visible);
   }
 
+  handleFocusOperateButton() {
+    const {
+      cancelButtonProps,
+      okButtonProps
+    } = this._adapter.getProps();
+
+    if ((0, _get2.default)(cancelButtonProps, 'autoFocus') && !(0, _get2.default)(cancelButtonProps, 'disabled')) {
+      this._adapter.focusCancelButton();
+    } else if ((0, _get2.default)(okButtonProps, 'autoFocus') && !(0, _get2.default)(okButtonProps, 'disabled')) {
+      this._adapter.focusOkButton();
+    }
+  }
+
 }
 
 exports.default = PopConfirmFoundation;

package/lib/cjs/tag/tag.css

@@ -58,10 +58,10 @@
   padding-left: 4px;
   cursor: pointer;
 }
-.semi-tag-close :hover {
+.semi-tag-close:hover {
   color: var(--semi-color-text-1);
 }
-.semi-tag-close :active {
+.semi-tag-close:active {
   color: var(--semi-color-text-0);
 }
 .semi-tag-closable {
@@ -414,6 +414,13 @@
 
 .semi-tag-solid .semi-tag-close {
   color: var(--semi-color-white);
+  opacity: 0.8;
+}
+.semi-tag-solid .semi-tag-close:hover {
+  opacity: 1;
+}
+.semi-tag-solid .semi-tag-close:active {
+  opacity: 0.9;
 }
 
 .semi-rtl .semi-tag,

package/lib/cjs/tag/tag.scss

@@ -64,12 +64,12 @@ $types: "ghost", "solid", "light";
         padding-left: $spacing-tag_close-paddingLeft;
         cursor: pointer;
 
-        :hover {
-            color: $color-tag_close-icon-hover
+        &:hover {
+            color: $color-tag_close-icon-hover;
         }
 
-        :active {
-            color: $color-tag_close-icon-active
+        &:active {
+            color: $color-tag_close-icon-active;
         }
     }
 
@@ -208,6 +208,15 @@ $types: "ghost", "solid", "light";
 .#{$module}-solid {
     .#{$module}-close {
         color: $color-tag_close-icon_deep-default;
+        opacity: .8;
+
+        &:hover {
+            opacity: 1.0;
+        }
+
+        &:active {
+            opacity: .9;
+        }
     }
 }
 

package/lib/cjs/tooltip/foundation.d.ts

@@ -133,7 +133,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
      * 如果 trigger 是 focus 或者 hover，则它绑定了 onFocus，这里我们如果重新 focus 的话，popup 会再次打开
      * 因此 returnFocusOnClose 只支持 click trigger
      */
-    _focusTrigger(): void;
+    focusTrigger(): void;
     _handleEscKeyDown(event: any): void;
     _handleContainerTabKeyDown(focusableElements: any[], event: any): void;
     _handleContainerShiftTabKeyDown(focusableElements: any[], event: any): void;

package/lib/cjs/tooltip/foundation.js

@@ -1229,7 +1229,7 @@ class Tooltip extends _foundation.default {
    */
 
 
-  _focusTrigger() {
+  focusTrigger() {
     const {
       trigger,
       returnFocusOnClose,
@@ -1255,8 +1255,7 @@ class Tooltip extends _foundation.default {
     if (trigger !== 'custom') {
       // 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.focusTrigger();
       this.hide();
     }
 

package/lib/cjs/typography/formatNumeral.js

@@ -32,13 +32,8 @@ class FormatNumeral {
         return `${this.truncatePrecision(value)} ${units[i]}`;
       },
       percentages: value => {
-        const cArr = value.toString().split('.');
-
-        if (Number(cArr[0]) === 0) {
-          return `${this.truncatePrecision(value * 100)}%`;
-        }
-
-        return `${this.truncatePrecision(value)}%`;
+        // The rules here have been modified in version v2.30.0
+        return `${this.truncatePrecision(value * 100)}%`;
       },
       exponential: value => {
         const vExponential = value.toExponential(this.precision + 2);

package/lib/es/datePicker/monthsGridFoundation.js

@@ -133,14 +133,20 @@ export default class MonthsGridFoundation extends BaseFoundation {
 
   _initDatePickerFromValue(values) {
     let refreshPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    const monthLeft = this.getState('monthLeft');
+
+    const {
+      monthLeft
+    } = this._adapter.getStates();
+
     const newMonthLeft = Object.assign({}, monthLeft); // REMOVE:
 
     this._adapter.updateMonthOnLeft(newMonthLeft);
 
     const newSelected = new Set();
 
-    if (!this._isMultiple()) {
+    const isMultiple = this._isMultiple();
+
+    if (!isMultiple) {
       values[0] && newSelected.add(format(values[0], strings.FORMAT_FULL_DATE));
     } else {
       values.forEach(date => {
@@ -149,7 +155,12 @@ export default class MonthsGridFoundation extends BaseFoundation {
     }
 
     if (refreshPicker) {
-      this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
+      if (isMultiple) {
+        const leftPickerDateInSelected = values === null || values === void 0 ? void 0 : values.some(item => item && differenceInCalendarMonths(item, monthLeft.pickerDate) === 0);
+        !leftPickerDateInSelected && this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
+      } else {
+        this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
+      }
     } else {
       // FIXME:
       this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, newMonthLeft.pickerDate);

package/lib/es/popconfirm/popconfirmFoundation.d.ts

@@ -7,6 +7,9 @@ export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, a
     notifyCancel: (e: any) => Promise<any> | void;
     notifyVisibleChange: (visible: boolean) => void;
     notifyClickOutSide: (e: any) => void;
+    focusCancelButton: () => void;
+    focusOkButton: () => void;
+    focusPrevFocusElement: () => void;
 }
 export default class PopConfirmFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PopconfirmAdapter<P, S>, P, S> {
     init(): void;
@@ -15,4 +18,5 @@ export default class PopConfirmFoundation<P = Record<string, any>, S = Record<st
     handleConfirm(e: any): void;
     handleClickOutSide(e: any): void;
     handleVisibleChange(visible: boolean): void;
+    handleFocusOperateButton(): void;
 }

package/lib/es/popconfirm/popconfirmFoundation.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
+import _get from "lodash/get";
 import BaseFoundation from '../base/foundation';
 import isPromise from '../utils/isPromise';
 export default class PopConfirmFoundation extends BaseFoundation {
@@ -51,7 +51,26 @@ export default class PopConfirmFoundation extends BaseFoundation {
       this._adapter.setVisible(visible);
     }
 
+    if (visible) {
+      this.handleFocusOperateButton();
+    } else {
+      this._adapter.focusPrevFocusElement();
+    }
+
     this._adapter.notifyVisibleChange(visible);
   }
 
+  handleFocusOperateButton() {
+    const {
+      cancelButtonProps,
+      okButtonProps
+    } = this._adapter.getProps();
+
+    if (_get(cancelButtonProps, 'autoFocus') && !_get(cancelButtonProps, 'disabled')) {
+      this._adapter.focusCancelButton();
+    } else if (_get(okButtonProps, 'autoFocus') && !_get(okButtonProps, 'disabled')) {
+      this._adapter.focusOkButton();
+    }
+  }
+
 }

package/lib/es/tag/tag.css

@@ -58,10 +58,10 @@
   padding-left: 4px;
   cursor: pointer;
 }
-.semi-tag-close :hover {
+.semi-tag-close:hover {
   color: var(--semi-color-text-1);
 }
-.semi-tag-close :active {
+.semi-tag-close:active {
   color: var(--semi-color-text-0);
 }
 .semi-tag-closable {
@@ -414,6 +414,13 @@
 
 .semi-tag-solid .semi-tag-close {
   color: var(--semi-color-white);
+  opacity: 0.8;
+}
+.semi-tag-solid .semi-tag-close:hover {
+  opacity: 1;
+}
+.semi-tag-solid .semi-tag-close:active {
+  opacity: 0.9;
 }
 
 .semi-rtl .semi-tag,

package/lib/es/tag/tag.scss

@@ -64,12 +64,12 @@ $types: "ghost", "solid", "light";
         padding-left: $spacing-tag_close-paddingLeft;
         cursor: pointer;
 
-        :hover {
-            color: $color-tag_close-icon-hover
+        &:hover {
+            color: $color-tag_close-icon-hover;
         }
 
-        :active {
-            color: $color-tag_close-icon-active
+        &:active {
+            color: $color-tag_close-icon-active;
         }
     }
 
@@ -208,6 +208,15 @@ $types: "ghost", "solid", "light";
 .#{$module}-solid {
     .#{$module}-close {
         color: $color-tag_close-icon_deep-default;
+        opacity: .8;
+
+        &:hover {
+            opacity: 1.0;
+        }
+
+        &:active {
+            opacity: .9;
+        }
     }
 }
 

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

@@ -133,7 +133,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
      * 如果 trigger 是 focus 或者 hover，则它绑定了 onFocus，这里我们如果重新 focus 的话，popup 会再次打开
      * 因此 returnFocusOnClose 只支持 click trigger
      */
-    _focusTrigger(): void;
+    focusTrigger(): void;
     _handleEscKeyDown(event: any): void;
     _handleContainerTabKeyDown(focusableElements: any[], event: any): void;
     _handleContainerShiftTabKeyDown(focusableElements: any[], event: any): void;

package/lib/es/tooltip/foundation.js

@@ -1219,7 +1219,7 @@ export default class Tooltip extends BaseFoundation {
    */
 
 
-  _focusTrigger() {
+  focusTrigger() {
     const {
       trigger,
       returnFocusOnClose,
@@ -1245,8 +1245,7 @@ export default class Tooltip extends BaseFoundation {
     if (trigger !== 'custom') {
       // 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.focusTrigger();
       this.hide();
     }
 

package/lib/es/typography/formatNumeral.js

@@ -25,13 +25,8 @@ export default class FormatNumeral {
         return `${this.truncatePrecision(value)} ${units[i]}`;
       },
       percentages: value => {
-        const cArr = value.toString().split('.');
-
-        if (Number(cArr[0]) === 0) {
-          return `${this.truncatePrecision(value * 100)}%`;
-        }
-
-        return `${this.truncatePrecision(value)}%`;
+        // The rules here have been modified in version v2.30.0
+        return `${this.truncatePrecision(value * 100)}%`;
       },
       exponential: value => {
         const vExponential = value.toExponential(this.precision + 2);

package/package.json

@@ -1,9 +1,9 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.29.0",
+    "version": "2.30.0-beta.0",
     "description": "",
     "scripts": {
-        "build:lib": "node ./scripts/compileLib.js",
+        "build:lib": "export NODE_OPTIONS=--no-experimental-fetch && node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "cf2c6529fb778787c2d3f6cb826e64af358a5215",
+    "gitHead": "330e8cf3c8bced4dee7d5c77c7e3931a0f40376b",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/popconfirm/popconfirmFoundation.ts

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 
+import { get } from 'lodash';
+
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import isPromise from '../utils/isPromise';
 
@@ -10,7 +12,10 @@ export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, a
     notifyConfirm: (e: any) => Promise<any> | void;
     notifyCancel: (e: any) => Promise<any> | void;
     notifyVisibleChange: (visible: boolean) => void;
-    notifyClickOutSide: (e: any) => void
+    notifyClickOutSide: (e: any) => void;
+    focusCancelButton: () => void;
+    focusOkButton: () => void;
+    focusPrevFocusElement: () => void
 }
 
 export default class PopConfirmFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PopconfirmAdapter<P, S>, P, S> {
@@ -63,6 +68,20 @@ export default class PopConfirmFoundation<P = Record<string, any>, S = Record<st
         if (!this._isControlledComponent('visible')) {
             this._adapter.setVisible(visible);
         }
+        if (visible) {
+            this.handleFocusOperateButton();
+        } else {
+            this._adapter.focusPrevFocusElement();
+        }
         this._adapter.notifyVisibleChange(visible);
     }
+
+    handleFocusOperateButton() {
+        const { cancelButtonProps, okButtonProps } = this._adapter.getProps() as any;
+        if (get(cancelButtonProps, 'autoFocus') && !get(cancelButtonProps, 'disabled')) {
+            this._adapter.focusCancelButton();
+        } else if (get(okButtonProps, 'autoFocus') && !get(okButtonProps, 'disabled')) {
+            this._adapter.focusOkButton();
+        }
+    }
 }

package/tag/tag.scss

@@ -64,12 +64,12 @@ $types: "ghost", "solid", "light";
         padding-left: $spacing-tag_close-paddingLeft;
         cursor: pointer;
 
-        :hover {
-            color: $color-tag_close-icon-hover
+        &:hover {
+            color: $color-tag_close-icon-hover;
         }
 
-        :active {
-            color: $color-tag_close-icon-active
+        &:active {
+            color: $color-tag_close-icon-active;
         }
     }
 
@@ -208,6 +208,15 @@ $types: "ghost", "solid", "light";
 .#{$module}-solid {
     .#{$module}-close {
         color: $color-tag_close-icon_deep-default;
+        opacity: .8;
+
+        &:hover {
+            opacity: 1.0;
+        }
+
+        &:active {
+            opacity: .9;
+        }
     }
 }
 

package/tooltip/foundation.ts

@@ -1126,7 +1126,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
      * 如果 trigger 是 focus 或者 hover，则它绑定了 onFocus，这里我们如果重新 focus 的话，popup 会再次打开
      * 因此 returnFocusOnClose 只支持 click trigger
      */
-    _focusTrigger() {
+    focusTrigger() {
         const { trigger, returnFocusOnClose, preventScroll } = this.getProps();
         if (returnFocusOnClose && trigger !== 'custom') {
             const triggerNode = this._adapter.getTriggerNode();
@@ -1141,7 +1141,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         if (trigger !== 'custom') {
             // 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.focusTrigger();
             this.hide();
         }
         this._adapter.notifyEscKeydown(event);

package/typography/formatNumeral.ts

@@ -42,11 +42,8 @@ export default class FormatNumeral {
             return `${this.truncatePrecision(value)} ${units[i]}`;
         },
         percentages: (value: number) => {
-            const cArr = value.toString().split('.');
-            if (Number(cArr[0]) === 0) {
-                return `${this.truncatePrecision(value * 100)}%`;
-            }
-            return `${this.truncatePrecision(value)}%`;
+            // The rules here have been modified in version v2.30.0
+            return `${this.truncatePrecision(value * 100)}%`;
         },
         exponential: (value: number) => {
             const vExponential = value.toExponential(this.precision + 2);