@douyinfe/semi-foundation 2.67.1 → 2.67.2-alpha.1

package/datePicker/foundation.ts

@@ -227,6 +227,7 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
  */
 export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapter> {
 
+    clickConfirmButton: boolean;
     constructor(adapter: DatePickerAdapter) {
         super({ ...adapter });
     }
@@ -388,12 +389,17 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      *    - date type and not multiple, close panel after select date
      *    - dateRange type, close panel after select rangeStart and rangeEnd
      *  4. click outside
+     * @param {Event} e
+     * @param {String} inputValue
+     * @param {Date[]} dates
      */
-    closePanel() {
+    closePanel(e?: any, inputValue: string = null, dates?: Date[]) {
+        const { value } = this._adapter.getStates();
+        const willUpdateDates = isNullOrUndefined(dates) ? value : dates;
         if (!this._isControlledComponent('open')) {
             this.close();
         } else {
-            this.resetInnerSelectedStates();
+            this.resetInnerSelectedStates(willUpdateDates);
         }
         this._adapter.notifyOpenChange(false);
     }
@@ -404,8 +410,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     }
 
     close() {
-        this._adapter.togglePanel(false);
-        this.resetInnerSelectedStates();
+        this._adapter.togglePanel(false, () => this.resetInnerSelectedStates());
         this._adapter.unregisterClickOutSide();
     }
 
@@ -429,16 +434,15 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     /**
      * reset cachedSelectedValue, inputValue when close panel
      */
-    resetInnerSelectedStates() {
-        // 通过 setTimeout 保证需要获取到最新的 state 状态
-        setTimeout(() => {
-            const { value, cachedSelectedValue } = this._adapter.getStates();
-            if (!isEqual(value, cachedSelectedValue)) {
-                this.resetCachedSelectedValue(value);
-            }
-        }, 0);
+    resetInnerSelectedStates(willUpdateDates?: Date[]) {
+        const { value } = this._adapter.getStates();
+        const needResetCachedSelectedValue = isNullOrUndefined(willUpdateDates) || !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
+        if (needResetCachedSelectedValue) {
+            this.resetCachedSelectedValue(value);
+        }
         this.resetFocus();
         this.clearInputValue();
+        this.clickConfirmButton = false;
     }
 
     resetFocus(e?: any) {
@@ -1012,7 +1016,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
 
         const focusRecordChecked = !needCheckFocusRecord || (needCheckFocusRecord && this._adapter.couldPanelClosed());
         if ((type === 'date' && !this._isMultiple() && closePanel) || (type === 'dateRange' && this._isRangeValueComplete(dates) && closePanel && focusRecordChecked)) {
-            this.closePanel();
+            this.closePanel(undefined, inputValue, dates);
         }
     }
 
@@ -1039,6 +1043,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     }
 
     handleConfirm() {
+        this.clickConfirmButton = true;
         const { cachedSelectedValue, value } = this._adapter.getStates();
         const isRangeValueComplete = this._isRangeValueComplete(cachedSelectedValue);
         const newValue = isRangeValueComplete ? cachedSelectedValue : value;
@@ -1046,7 +1051,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
             this._adapter.updateValue(newValue);
         }
         // If the input is incomplete, the legal date of the last input is used
-        this.closePanel();
+        this.closePanel(undefined, undefined, newValue);
 
         if (isRangeValueComplete) {
             const { notifyValue, notifyDate } = this.disposeCallbackArgs(cachedSelectedValue);

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

@@ -190,6 +190,7 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
  *  task 2. When the input box changes, update the date value = > Notify the change
  */
 export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapter> {
+    clickConfirmButton: boolean;
     constructor(adapter: DatePickerAdapter);
     init(): void;
     initFromProps({ value, timeZone, prevTimeZone }: Pick<DatePickerFoundationProps, 'value' | 'timeZone'> & {
@@ -246,8 +247,11 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      *    - date type and not multiple, close panel after select date
      *    - dateRange type, close panel after select rangeStart and rangeEnd
      *  4. click outside
+     * @param {Event} e
+     * @param {String} inputValue
+     * @param {Date[]} dates
      */
-    closePanel(): void;
+    closePanel(e?: any, inputValue?: string, dates?: Date[]): void;
     open(): void;
     close(): void;
     focus(focusType?: Exclude<RangeType, false>): void;
@@ -255,7 +259,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     /**
      * reset cachedSelectedValue, inputValue when close panel
      */
-    resetInnerSelectedStates(): void;
+    resetInnerSelectedStates(willUpdateDates?: Date[]): void;
     resetFocus(e?: any): void;
     /**
      * cachedSelectedValue can be `(Date|null)[]` or `null`

package/lib/cjs/datePicker/foundation.js

@@ -217,12 +217,21 @@ class DatePickerFoundation extends _foundation.default {
    *    - date type and not multiple, close panel after select date
    *    - dateRange type, close panel after select rangeStart and rangeEnd
    *  4. click outside
+   * @param {Event} e
+   * @param {String} inputValue
+   * @param {Date[]} dates
    */
-  closePanel() {
+  closePanel(e) {
+    let inputValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    let dates = arguments.length > 2 ? arguments[2] : undefined;
+    const {
+      value
+    } = this._adapter.getStates();
+    const willUpdateDates = (0, _isNullOrUndefined.default)(dates) ? value : dates;
     if (!this._isControlledComponent('open')) {
       this.close();
     } else {
-      this.resetInnerSelectedStates();
+      this.resetInnerSelectedStates(willUpdateDates);
     }
     this._adapter.notifyOpenChange(false);
   }
@@ -231,8 +240,7 @@ class DatePickerFoundation extends _foundation.default {
     this._adapter.registerClickOutSide();
   }
   close() {
-    this._adapter.togglePanel(false);
-    this.resetInnerSelectedStates();
+    this._adapter.togglePanel(false, () => this.resetInnerSelectedStates());
     this._adapter.unregisterClickOutSide();
   }
   focus(focusType) {
@@ -253,19 +261,17 @@ class DatePickerFoundation extends _foundation.default {
   /**
    * reset cachedSelectedValue, inputValue when close panel
    */
-  resetInnerSelectedStates() {
-    // 通过 setTimeout 保证需要获取到最新的 state 状态
-    setTimeout(() => {
-      const {
-        value,
-        cachedSelectedValue
-      } = this._adapter.getStates();
-      if (!(0, _isEqual2.default)(value, cachedSelectedValue)) {
-        this.resetCachedSelectedValue(value);
-      }
-    }, 0);
+  resetInnerSelectedStates(willUpdateDates) {
+    const {
+      value
+    } = this._adapter.getStates();
+    const needResetCachedSelectedValue = (0, _isNullOrUndefined.default)(willUpdateDates) || !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
+    if (needResetCachedSelectedValue) {
+      this.resetCachedSelectedValue(value);
+    }
     this.resetFocus();
     this.clearInputValue();
+    this.clickConfirmButton = false;
   }
   resetFocus(e) {
     this._adapter.setRangeInputFocus(false);
@@ -819,7 +825,7 @@ class DatePickerFoundation extends _foundation.default {
     }
     const focusRecordChecked = !needCheckFocusRecord || needCheckFocusRecord && this._adapter.couldPanelClosed();
     if (type === 'date' && !this._isMultiple() && closePanel || type === 'dateRange' && this._isRangeValueComplete(dates) && closePanel && focusRecordChecked) {
-      this.closePanel();
+      this.closePanel(undefined, inputValue, dates);
     }
   }
   /**
@@ -846,6 +852,7 @@ class DatePickerFoundation extends _foundation.default {
     }
   }
   handleConfirm() {
+    this.clickConfirmButton = true;
     const {
       cachedSelectedValue,
       value
@@ -856,7 +863,7 @@ class DatePickerFoundation extends _foundation.default {
       this._adapter.updateValue(newValue);
     }
     // If the input is incomplete, the legal date of the last input is used
-    this.closePanel();
+    this.closePanel(undefined, undefined, newValue);
     if (isRangeValueComplete) {
       const {
         notifyValue,

package/lib/cjs/select/foundation.js

@@ -378,16 +378,9 @@ class SelectFoundation extends _foundation.default {
       closeCb,
       notToggleInput
     } = closeConfig || {};
-    const {
-      isFocus
-    } = this.getStates();
     this._adapter.closeMenu();
     this._adapter.notifyDropdownVisibleChange(false);
     this._adapter.setIsFocusInContainer(false);
-    if (isFocus) {
-      // if the isFocus state is true, refocus the trigger case see in https://github.com/DouyinFE/semi-design/issues/2465
-      this._focusTrigger();
-    }
     // this.unBindKeyBoardEvent();
     // this._notifyBlur(e);
     // this._adapter.updateFocusState(false);
@@ -418,6 +411,7 @@ class SelectFoundation extends _foundation.default {
     const isMultiple = this._isMultiple();
     if (!isMultiple) {
       this._handleSingleSelect(option, event);
+      this._focusTrigger();
     } else {
       this._handleMultipleSelect(option, event);
     }

package/lib/cjs/select/select.css

@@ -165,6 +165,7 @@
 }
 .semi-select-disabled:focus {
   border: 1px solid transparent;
+  background-color: var(--semi-color-disabled-fill);
 }
 .semi-select-disabled .semi-select-selection,
 .semi-select-disabled .semi-select-selection-placeholder {

package/lib/cjs/select/select.scss

@@ -37,6 +37,7 @@ $overflowList: #{$prefix}-overflow-list;
     &:focus {
         border: $width-select-border-focus solid $color-select-border-focus;
         background-color: $color-select-bg-focus;
+        // background-color: plum;
         outline: 0;
     }
 
@@ -125,7 +126,8 @@ $overflowList: #{$prefix}-overflow-list;
 
         &:focus {
             // when select is disabled, the border should not have active color
-            border: $width-select-border-focus solid transparent;
+            border: $width-select-border-focus solid $color-select_input_disabled-border-focus;
+            background-color: $color-select_input_disabled-bg-focus;
         }
 
         .#{$module}-selection,

package/lib/cjs/select/variables.scss

@@ -37,8 +37,11 @@ $color-select_clearBtn-text-hover: var(--semi-color-primary); // 选择器输入
 $color-select_input-bg-default: transparent; // 选择器输入框清空按钮颜色 - 悬停态
 $color-select_input_disabled-bg: var(--semi-color-disabled-fill); // 禁用选择器输入框背景色
 $color-select_input_disabled-border: var(--semi-color-border); // 禁用选择器输入框描边颜色
+$color-select_input_disabled-border-focus: transparent; // 禁用选择器输入框描边颜色 - 聚焦态
 $color-select_input_disabled-text: var(--semi-color-disabled-text); // 禁用选择器输入框回填内容文字颜色
 $color-select_input_disabled-bg-hover: var(--semi-color-disabled-fill); // 选择器输入框回填内容文字颜色 - 悬停态
+$color-select_input_disabled-bg-focus: var(--semi-color-disabled-fill); // 选择器输入框回填内容文字颜色 - 聚焦态
+
 $color-select_input_placeholder-text: var(--semi-color-text-2); // 选择器输入框占位文本文字颜色
 
 $color-select_option_main-text: var(--semi-color-text-0); // 选择器菜单选项文本颜色

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

@@ -190,6 +190,7 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
  *  task 2. When the input box changes, update the date value = > Notify the change
  */
 export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapter> {
+    clickConfirmButton: boolean;
     constructor(adapter: DatePickerAdapter);
     init(): void;
     initFromProps({ value, timeZone, prevTimeZone }: Pick<DatePickerFoundationProps, 'value' | 'timeZone'> & {
@@ -246,8 +247,11 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      *    - date type and not multiple, close panel after select date
      *    - dateRange type, close panel after select rangeStart and rangeEnd
      *  4. click outside
+     * @param {Event} e
+     * @param {String} inputValue
+     * @param {Date[]} dates
      */
-    closePanel(): void;
+    closePanel(e?: any, inputValue?: string, dates?: Date[]): void;
     open(): void;
     close(): void;
     focus(focusType?: Exclude<RangeType, false>): void;
@@ -255,7 +259,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     /**
      * reset cachedSelectedValue, inputValue when close panel
      */
-    resetInnerSelectedStates(): void;
+    resetInnerSelectedStates(willUpdateDates?: Date[]): void;
     resetFocus(e?: any): void;
     /**
      * cachedSelectedValue can be `(Date|null)[]` or `null`

package/lib/es/datePicker/foundation.js

@@ -210,12 +210,21 @@ export default class DatePickerFoundation extends BaseFoundation {
    *    - date type and not multiple, close panel after select date
    *    - dateRange type, close panel after select rangeStart and rangeEnd
    *  4. click outside
+   * @param {Event} e
+   * @param {String} inputValue
+   * @param {Date[]} dates
    */
-  closePanel() {
+  closePanel(e) {
+    let inputValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    let dates = arguments.length > 2 ? arguments[2] : undefined;
+    const {
+      value
+    } = this._adapter.getStates();
+    const willUpdateDates = isNullOrUndefined(dates) ? value : dates;
     if (!this._isControlledComponent('open')) {
       this.close();
     } else {
-      this.resetInnerSelectedStates();
+      this.resetInnerSelectedStates(willUpdateDates);
     }
     this._adapter.notifyOpenChange(false);
   }
@@ -224,8 +233,7 @@ export default class DatePickerFoundation extends BaseFoundation {
     this._adapter.registerClickOutSide();
   }
   close() {
-    this._adapter.togglePanel(false);
-    this.resetInnerSelectedStates();
+    this._adapter.togglePanel(false, () => this.resetInnerSelectedStates());
     this._adapter.unregisterClickOutSide();
   }
   focus(focusType) {
@@ -246,19 +254,17 @@ export default class DatePickerFoundation extends BaseFoundation {
   /**
    * reset cachedSelectedValue, inputValue when close panel
    */
-  resetInnerSelectedStates() {
-    // 通过 setTimeout 保证需要获取到最新的 state 状态
-    setTimeout(() => {
-      const {
-        value,
-        cachedSelectedValue
-      } = this._adapter.getStates();
-      if (!_isEqual(value, cachedSelectedValue)) {
-        this.resetCachedSelectedValue(value);
-      }
-    }, 0);
+  resetInnerSelectedStates(willUpdateDates) {
+    const {
+      value
+    } = this._adapter.getStates();
+    const needResetCachedSelectedValue = isNullOrUndefined(willUpdateDates) || !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
+    if (needResetCachedSelectedValue) {
+      this.resetCachedSelectedValue(value);
+    }
     this.resetFocus();
     this.clearInputValue();
+    this.clickConfirmButton = false;
   }
   resetFocus(e) {
     this._adapter.setRangeInputFocus(false);
@@ -812,7 +818,7 @@ export default class DatePickerFoundation extends BaseFoundation {
     }
     const focusRecordChecked = !needCheckFocusRecord || needCheckFocusRecord && this._adapter.couldPanelClosed();
     if (type === 'date' && !this._isMultiple() && closePanel || type === 'dateRange' && this._isRangeValueComplete(dates) && closePanel && focusRecordChecked) {
-      this.closePanel();
+      this.closePanel(undefined, inputValue, dates);
     }
   }
   /**
@@ -839,6 +845,7 @@ export default class DatePickerFoundation extends BaseFoundation {
     }
   }
   handleConfirm() {
+    this.clickConfirmButton = true;
     const {
       cachedSelectedValue,
       value
@@ -849,7 +856,7 @@ export default class DatePickerFoundation extends BaseFoundation {
       this._adapter.updateValue(newValue);
     }
     // If the input is incomplete, the legal date of the last input is used
-    this.closePanel();
+    this.closePanel(undefined, undefined, newValue);
     if (isRangeValueComplete) {
       const {
         notifyValue,

package/lib/es/select/foundation.js

@@ -369,16 +369,9 @@ export default class SelectFoundation extends BaseFoundation {
       closeCb,
       notToggleInput
     } = closeConfig || {};
-    const {
-      isFocus
-    } = this.getStates();
     this._adapter.closeMenu();
     this._adapter.notifyDropdownVisibleChange(false);
     this._adapter.setIsFocusInContainer(false);
-    if (isFocus) {
-      // if the isFocus state is true, refocus the trigger case see in https://github.com/DouyinFE/semi-design/issues/2465
-      this._focusTrigger();
-    }
     // this.unBindKeyBoardEvent();
     // this._notifyBlur(e);
     // this._adapter.updateFocusState(false);
@@ -409,6 +402,7 @@ export default class SelectFoundation extends BaseFoundation {
     const isMultiple = this._isMultiple();
     if (!isMultiple) {
       this._handleSingleSelect(option, event);
+      this._focusTrigger();
     } else {
       this._handleMultipleSelect(option, event);
     }

package/lib/es/select/select.css

@@ -165,6 +165,7 @@
 }
 .semi-select-disabled:focus {
   border: 1px solid transparent;
+  background-color: var(--semi-color-disabled-fill);
 }
 .semi-select-disabled .semi-select-selection,
 .semi-select-disabled .semi-select-selection-placeholder {

package/lib/es/select/select.scss

@@ -37,6 +37,7 @@ $overflowList: #{$prefix}-overflow-list;
     &:focus {
         border: $width-select-border-focus solid $color-select-border-focus;
         background-color: $color-select-bg-focus;
+        // background-color: plum;
         outline: 0;
     }
 
@@ -125,7 +126,8 @@ $overflowList: #{$prefix}-overflow-list;
 
         &:focus {
             // when select is disabled, the border should not have active color
-            border: $width-select-border-focus solid transparent;
+            border: $width-select-border-focus solid $color-select_input_disabled-border-focus;
+            background-color: $color-select_input_disabled-bg-focus;
         }
 
         .#{$module}-selection,

package/lib/es/select/variables.scss

@@ -37,8 +37,11 @@ $color-select_clearBtn-text-hover: var(--semi-color-primary); // 选择器输入
 $color-select_input-bg-default: transparent; // 选择器输入框清空按钮颜色 - 悬停态
 $color-select_input_disabled-bg: var(--semi-color-disabled-fill); // 禁用选择器输入框背景色
 $color-select_input_disabled-border: var(--semi-color-border); // 禁用选择器输入框描边颜色
+$color-select_input_disabled-border-focus: transparent; // 禁用选择器输入框描边颜色 - 聚焦态
 $color-select_input_disabled-text: var(--semi-color-disabled-text); // 禁用选择器输入框回填内容文字颜色
 $color-select_input_disabled-bg-hover: var(--semi-color-disabled-fill); // 选择器输入框回填内容文字颜色 - 悬停态
+$color-select_input_disabled-bg-focus: var(--semi-color-disabled-fill); // 选择器输入框回填内容文字颜色 - 聚焦态
+
 $color-select_input_placeholder-text: var(--semi-color-text-2); // 选择器输入框占位文本文字颜色
 
 $color-select_option_main-text: var(--semi-color-text-0); // 选择器菜单选项文本颜色

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.67.1",
+    "version": "2.67.2-alpha.1",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.67.1",
+        "@douyinfe/semi-animation": "2.67.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -28,7 +28,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "3582ea01a35b6f6c9db326d74c3181697f66d1b1",
+    "gitHead": "3f08368852c402daca35bf5ff4a192e841ea4dd3",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/select/foundation.ts

@@ -400,14 +400,9 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     close(closeConfig?: { event?: any; closeCb?: () => void; notToggleInput?: boolean }) {
         // to support A11y, closing the panel trigger does not necessarily lose focus
         const { event, closeCb, notToggleInput } = closeConfig || {};
-        const { isFocus } = this.getStates();
         this._adapter.closeMenu();
         this._adapter.notifyDropdownVisibleChange(false);
         this._adapter.setIsFocusInContainer(false);
-        if (isFocus) {
-            // if the isFocus state is true, refocus the trigger case see in https://github.com/DouyinFE/semi-design/issues/2465
-            this._focusTrigger();
-        }
         // this.unBindKeyBoardEvent();
         // this._notifyBlur(e);
         // this._adapter.updateFocusState(false);
@@ -443,6 +438,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         const isMultiple = this._isMultiple();
         if (!isMultiple) {
             this._handleSingleSelect(option, event);
+            this._focusTrigger();
         } else {
             this._handleMultipleSelect(option, event);
         }

package/select/select.scss

@@ -37,6 +37,7 @@ $overflowList: #{$prefix}-overflow-list;
     &:focus {
         border: $width-select-border-focus solid $color-select-border-focus;
         background-color: $color-select-bg-focus;
+        // background-color: plum;
         outline: 0;
     }
 
@@ -125,7 +126,8 @@ $overflowList: #{$prefix}-overflow-list;
 
         &:focus {
             // when select is disabled, the border should not have active color
-            border: $width-select-border-focus solid transparent;
+            border: $width-select-border-focus solid $color-select_input_disabled-border-focus;
+            background-color: $color-select_input_disabled-bg-focus;
         }
 
         .#{$module}-selection,

package/select/variables.scss

@@ -37,8 +37,11 @@ $color-select_clearBtn-text-hover: var(--semi-color-primary); // 选择器输入
 $color-select_input-bg-default: transparent; // 选择器输入框清空按钮颜色 - 悬停态
 $color-select_input_disabled-bg: var(--semi-color-disabled-fill); // 禁用选择器输入框背景色
 $color-select_input_disabled-border: var(--semi-color-border); // 禁用选择器输入框描边颜色
+$color-select_input_disabled-border-focus: transparent; // 禁用选择器输入框描边颜色 - 聚焦态
 $color-select_input_disabled-text: var(--semi-color-disabled-text); // 禁用选择器输入框回填内容文字颜色
 $color-select_input_disabled-bg-hover: var(--semi-color-disabled-fill); // 选择器输入框回填内容文字颜色 - 悬停态
+$color-select_input_disabled-bg-focus: var(--semi-color-disabled-fill); // 选择器输入框回填内容文字颜色 - 聚焦态
+
 $color-select_input_placeholder-text: var(--semi-color-text-2); // 选择器输入框占位文本文字颜色
 
 $color-select_option_main-text: var(--semi-color-text-0); // 选择器菜单选项文本颜色