@douyinfe/semi-foundation 2.15.0-beta.0 → 2.15.0

package/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/datePicker/foundation.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable max-len, max-depth,  */
 import { format, isValid, isSameSecond, isEqual as isDateEqual, isDate } from 'date-fns';
-import { get, isObject, isString, isEqual } from 'lodash';
+import { get, isObject, isString, isEqual, isFunction } from 'lodash';
 
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { isValidDate, isTimestamp } from './_utils/index';
@@ -246,6 +246,23 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         this._adapter.updateInputValue(null);
         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: Date[]) {
+        const { triggerRender } = this.getProps();
+        if (this._isRangeType() && isFunction(triggerRender) && result.length === 0) {
+            this._adapter.setRangeInputFocus('rangeStart');
+        }
     }
 
     parseWithTimezone(value: ValueType, timeZone: string | number, prevTimeZone: string | number) {
@@ -1286,7 +1303,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @returns
      */
     handleTriggerWrapperClick(e: any) {
-        const { disabled } = this._adapter.getProps();
+        const { disabled, triggerRender } = this._adapter.getProps();
         const { rangeInputFocus } = this._adapter.getStates();
         if (disabled) {
             return;
@@ -1298,12 +1315,18 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
          * - When type is not range type, Input component will automatically focus in the same case
          * - isEventTarget is used to judge whether the event is a bubbling event
          */
-        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/datePicker/monthsGridFoundation.ts

@@ -724,9 +724,8 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
             /**
              * 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/cjs/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/cjs/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/cjs/datePicker/foundation.d.ts

@@ -185,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;
     /**

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/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/datePicker/foundation.d.ts

@@ -185,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;
     /**

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.15.0-beta.0",
+    "version": "2.15.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "09fa8ba9a3765537c9de842dbcc2f97d515b54d9",
+    "gitHead": "236be8e52864297171e3b08da20475139dadd633",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",