@douyinfe/semi-foundation 2.1.5 → 2.2.0

package/lib/cjs/datePicker/datePicker.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* shadow */
 /* sizing */
 /* spacing */
@@ -72,6 +71,9 @@
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   min-height: 24px;
 }
+.semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
+  min-height: 216px;
+}
 .semi-datepicker-panel-yam {
   max-width: 284px;
 }
@@ -561,6 +563,9 @@
 .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-shade-post {
   margin-top: 17px;
 }
+.semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
+  min-height: 168px;
+}
 .semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist {
   font-size: 12px;
   line-height: 16px;

package/lib/cjs/datePicker/datePicker.scss

@@ -94,6 +94,15 @@ $module: #{$prefix}-datepicker;
                 min-height: $height-datepicker_timepicker_header_min;
             }
         }
+
+        // 为了防止 scrollList 因为 weeks 变化高度发生变化导致年月可能发生滚动
+        // In order to prevent scrollList from scrolling due to changes in the height of weeks, the year and month may be scrolled
+        &[x-panel-yearandmonth-open-type="left"],
+        &[x-panel-yearandmonth-open-type="right"] {
+            .#{$module}-weeks {
+                min-height: 6 * $width-datepicker_day;
+            }
+        }
     }
 
     // 年月选择器
@@ -833,6 +842,15 @@ $module: #{$prefix}-datepicker;
                 }
             }
         }
+
+        // 为了防止 scrollList 因为 weeks 变化高度发生变化导致年月可能发生滚动
+        // In order to prevent scrollList from scrolling due to changes in the height of weeks, the year and month may be scrolled
+        &[x-panel-yearandmonth-open-type="left"],
+        &[x-panel-yearandmonth-open-type="right"] {
+            .#{$module}-weeks {
+                min-height: 6 * $width-datepicker_day_compact;
+            }
+        }
     }
 
     // 年月选择器

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

@@ -13,6 +13,7 @@ interface MonthsGridElementProps {
     renderFullDate?: () => React.ReactNode;
 }
 export declare type PanelType = 'left' | 'right';
+export declare type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear';
 export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     type?: Type;
     defaultValue?: ValueType;
@@ -104,11 +105,34 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     _initDateTimePickerFromValue(values: BaseValueType[]): void;
     _initDateTimeRangePickerFormValue(values: BaseValueType[]): void;
     destroy(): void;
+    /**
+     * sync change another panel month when change months from the else yam panel
+     * call it when
+     *  - current change panel targe date month is same with another panel date
+     *
+     * @example
+     *  - panelType=right, target=new Date('2022-09-01') and left panel is in '2022-09' => call it, left panel minus one month to '2022-08'
+     *  - panelType=left, target=new Date('2021-12-01') and right panel is in '2021-12' => call it, right panel add one month to '2021-01'
+     */
+    handleSyncChangeMonths(options: {
+        panelType: PanelType;
+        target: Date;
+    }): void;
+    /**
+     * Get the target date based on the panel type and switch type
+     */
+    getTargetChangeDate(options: {
+        panelType: PanelType;
+        switchType: YearMonthChangeType;
+    }): Date;
+    /**
+     * Change month by yam panel
+     */
     toMonth(panelType: PanelType, target: Date): void;
     toYear(panelType: PanelType, target: Date): void;
     toYearMonth(panelType: PanelType, target: Date): void;
     isRangeType(type?: Type): boolean;
-    handleSwitchMonth(switchType: 'prevMonth' | 'nextMonth', panelType: PanelType): void;
+    handleSwitchMonthOrYear(switchType: YearMonthChangeType, panelType: PanelType): void;
     prevMonth(panelType: PanelType): void;
     nextMonth(panelType: PanelType): void;
     prevYear(panelType: PanelType): void;
@@ -158,13 +182,13 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         notifyValue: any;
         notifyDate: any;
     };
-    handleYearOrMonthChange(type: 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear', panelType?: PanelType, step?: number, notSeparateInRange?: boolean): void;
+    handleYearOrMonthChange(type: YearMonthChangeType, panelType?: PanelType, step?: number, notSeparateInRange?: boolean): void;
     /**
      * You have chosen to switch the year and month in the future to directly update the Date without closing the date panel
      * @param {*} type
      * @param {*} targetDate
      */
-    updateDateAfterChangeYM(type: 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear', targetDate: Date): void;
+    updateDateAfterChangeYM(type: YearMonthChangeType, targetDate: Date): void;
     _isMultiple(): boolean;
     _isRange(): void;
     handleDayClick(day: MonthDayInfo, panelType: PanelType): void;
@@ -214,5 +238,13 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     showYearPicker(panelType: PanelType): void;
     showTimePicker(panelType: PanelType, opt?: boolean): void;
     showDatePanel(panelType: PanelType): void;
+    /**
+     * Get year and month panel open type
+     *
+     * It is useful info to set minHeight of weeks.
+     *  - When yam open type is 'left' or 'right', weeks minHeight should be set
+     *    If the minHeight is not set, the change of the number of weeks will cause the scrollList to be unstable
+     */
+    getYAMOpenType(): "left" | "right" | "none" | "both";
 }
 export {};

package/lib/cjs/datePicker/monthsGridFoundation.js

@@ -241,11 +241,99 @@ class MonthsGridFoundation extends _foundation.default {
 
 
   destroy() {}
+  /**
+   * sync change another panel month when change months from the else yam panel
+   * call it when
+   *  - current change panel targe date month is same with another panel date
+   *
+   * @example
+   *  - panelType=right, target=new Date('2022-09-01') and left panel is in '2022-09' => call it, left panel minus one month to '2022-08'
+   *  - panelType=left, target=new Date('2021-12-01') and right panel is in '2021-12' => call it, right panel add one month to '2021-01'
+   */
+
+
+  handleSyncChangeMonths(options) {
+    const {
+      panelType,
+      target
+    } = options;
+
+    const {
+      type
+    } = this._adapter.getProps();
+
+    const {
+      monthLeft,
+      monthRight
+    } = this._adapter.getStates();
+
+    if (this.isRangeType(type)) {
+      if (panelType === 'right' && (0, _dateFns.differenceInCalendarMonths)(target, monthLeft.pickerDate) === 0) {
+        this.handleYearOrMonthChange('prevMonth', 'left', 1, true);
+      } else if (panelType === 'left' && (0, _dateFns.differenceInCalendarMonths)(monthRight.pickerDate, target) === 0) {
+        this.handleYearOrMonthChange('nextMonth', 'right', 1, true);
+      }
+    }
+  }
+  /**
+   * Get the target date based on the panel type and switch type
+   */
+
+
+  getTargetChangeDate(options) {
+    const {
+      panelType,
+      switchType
+    } = options;
+
+    const {
+      monthRight,
+      monthLeft
+    } = this._adapter.getStates();
+
+    const currentDate = panelType === 'left' ? monthLeft.pickerDate : monthRight.pickerDate;
+    let target;
+
+    switch (switchType) {
+      case 'prevMonth':
+        target = (0, _dateFns.addMonths)(currentDate, -1);
+        break;
+
+      case 'nextMonth':
+        target = (0, _dateFns.addMonths)(currentDate, 1);
+        break;
+
+      case 'prevYear':
+        target = (0, _dateFns.addYears)(currentDate, -1);
+        break;
+
+      case 'nextYear':
+        target = (0, _dateFns.addYears)(currentDate, 1);
+        break;
+    }
+
+    return target;
+  }
+  /**
+   * Change month by yam panel
+   */
+
 
   toMonth(panelType, target) {
+    const {
+      type
+    } = this._adapter.getProps();
+
     const diff = this._getDiff('month', target, panelType);
 
     this.handleYearOrMonthChange(diff < 0 ? 'prevMonth' : 'nextMonth', panelType, Math.abs(diff), false);
+
+    if (this.isRangeType(type)) {
+      this.handleSyncChangeMonths({
+        panelType,
+        target
+      });
+    }
   }
 
   toYear(panelType, target) {
@@ -267,34 +355,51 @@ class MonthsGridFoundation extends _foundation.default {
     return typeof realType === 'string' && /range/i.test(realType);
   }
 
-  handleSwitchMonth(switchType, panelType) {
+  handleSwitchMonthOrYear(switchType, panelType) {
     const {
       type,
       syncSwitchMonth
     } = this.getProps();
+    const rangeType = this.isRangeType(type); // range type and syncSwitchMonth, we should change panels at same time
 
-    if (this.isRangeType(type) && syncSwitchMonth) {
+    if (rangeType && syncSwitchMonth) {
       this.handleYearOrMonthChange(switchType, 'left', 1, true);
       this.handleYearOrMonthChange(switchType, 'right', 1, true);
     } else {
       this.handleYearOrMonthChange(switchType, panelType);
+      /**
+       * default behavior (v2.2.0)
+       * In order to prevent the two panels from being the same month, this will confuse the user when selecting the range
+       * https://github.com/DouyinFE/semi-design/issues/260
+       */
+
+      if (rangeType) {
+        const target = this.getTargetChangeDate({
+          panelType,
+          switchType
+        });
+        this.handleSyncChangeMonths({
+          panelType,
+          target
+        });
+      }
     }
   }
 
   prevMonth(panelType) {
-    this.handleSwitchMonth('prevMonth', panelType);
+    this.handleSwitchMonthOrYear('prevMonth', panelType);
   }
 
   nextMonth(panelType) {
-    this.handleSwitchMonth('nextMonth', panelType);
+    this.handleSwitchMonthOrYear('nextMonth', panelType);
   }
 
   prevYear(panelType) {
-    this.handleYearOrMonthChange('prevYear', panelType);
+    this.handleSwitchMonthOrYear('prevYear', panelType);
   }
 
   nextYear(panelType) {
-    this.handleYearOrMonthChange('nextYear', panelType);
+    this.handleSwitchMonthOrYear('nextYear', panelType);
   }
   /**
    * Calculate the year and month difference
@@ -948,6 +1053,34 @@ class MonthsGridFoundation extends _foundation.default {
       isYearPickerOpen: false
     });
   }
+  /**
+   * Get year and month panel open type
+   *
+   * It is useful info to set minHeight of weeks.
+   *  - When yam open type is 'left' or 'right', weeks minHeight should be set
+   *    If the minHeight is not set, the change of the number of weeks will cause the scrollList to be unstable
+   */
+
+
+  getYAMOpenType() {
+    const {
+      monthLeft,
+      monthRight
+    } = this._adapter.getStates();
+
+    const leftYearPickerOpen = monthLeft.isYearPickerOpen;
+    const rightYearPickerOpen = monthRight.isYearPickerOpen;
+
+    if (leftYearPickerOpen && rightYearPickerOpen) {
+      return 'both';
+    } else if (leftYearPickerOpen) {
+      return 'left';
+    } else if (rightYearPickerOpen) {
+      return 'right';
+    } else {
+      return 'none';
+    }
+  }
 
 }
 

package/lib/cjs/navigation/navigation.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* shadow */
 /* sizing */
 /* spacing */

package/lib/cjs/notification/notification.css

@@ -79,19 +79,23 @@
   color: var(--semi-color-success);
 }
 .semi-notification-notice-light.semi-notification-notice-warning {
-  background-color: var(--semi-color-warning-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-warning-light-default), var(--semi-color-warning-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-warning);
 }
 .semi-notification-notice-light.semi-notification-notice-success {
-  background-color: var(--semi-color-success-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-success-light-default), var(--semi-color-success-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-success);
 }
 .semi-notification-notice-light.semi-notification-notice-info, .semi-notification-notice-light.semi-notification-notice-default {
-  background-color: var(--semi-color-info-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-info-light-default), var(--semi-color-info-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-info);
 }
 .semi-notification-notice-light.semi-notification-notice-error {
-  background-color: var(--semi-color-danger-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-danger-light-default), var(--semi-color-danger-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-danger);
 }
 .semi-notification-notice-title {

package/lib/cjs/notification/notification.scss

@@ -93,23 +93,27 @@ $module: #{$prefix}-notification;
 
         &-light {
             &.#{$module}-notice-warning {
-                background-color: $color-notification_warning_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_warning_light-bg, $color-notification_warning_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_warning_light-border;
             }
 
             &.#{$module}-notice-success {
-                background-color: $color-notification_success_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_success_light-bg, $color-notification_success_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_success_light-border;
             }
 
             &.#{$module}-notice-info,
             &.#{$module}-notice-default {
-                background-color: $color-notification_info_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_info_light-bg, $color-notification_info_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_info_light-border;
             }
 
             &.#{$module}-notice-error {
-                background-color: $color-notification_danger_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_danger_light-bg, $color-notification_danger_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_danger_light-border;
             }
         }
@@ -165,4 +169,4 @@ $module: #{$prefix}-notification;
     }
 }
 
-@import "./rtl.scss";
+@import "./rtl.scss";

package/lib/cjs/notification/variables.scss

@@ -15,6 +15,7 @@ $color-notification_info_light-bg: var(--semi-color-info-light-default); // 彩
 $color-notification_info_light-border: var(--semi-color-info); // 彩色通知信息描边色
 $color-notification_danger_light-bg: var(--semi-color-danger-light-default); // 彩色通知危险背景色
 $color-notification_danger_light-border: var(--semi-color-danger); // 彩色通知危险描边色
+$color-notification_ambient-bg: var(--semi-color-bg-0); // 透明背景色叠加层(与bg0保持一致不建议修改)
 
 // Width/Height
 $width-notification_notice: auto; // 通知宽度

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

@@ -82,7 +82,16 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     _handleEnterKeyDown(event: KeyboardEvent): void;
     _handleBackspaceKeyDown(): void;
     _notifyChange(selections: Map<any, any>): void;
-    _removeInternalKey(option: BasicOptionProps): BasicOptionProps;
+    _removeInternalKey(option: BasicOptionProps): {
+        [x: string]: any;
+        value?: string | number;
+        label?: unknown;
+        children?: unknown;
+        disabled?: boolean;
+        showTick?: boolean;
+        className?: string;
+        style?: Record<string, any>;
+    };
     _notifySelect(value: BasicOptionProps['value'], option: BasicOptionProps): void;
     _notifyDeselect(value: BasicOptionProps['value'], option: BasicOptionProps): void;
     _diffSelections(selections: Map<any, any>, oldSelections: Map<any, any>, isMultiple: boolean): boolean;

package/lib/cjs/select/foundation.js

@@ -1038,17 +1038,19 @@ class SelectFoundation extends _foundation.default {
   }
 
   _removeInternalKey(option) {
-    delete option._parentGroup;
-    delete option._show;
-    delete option._selected;
-    delete option._scrollIndex;
-
-    if ('_keyInOptionList' in option) {
-      option.key = option._keyInOptionList;
-      delete option._keyInOptionList;
+    // eslint-disable-next-line
+    let newOption = (0, _assign.default)({}, option);
+    delete newOption._parentGroup;
+    delete newOption._show;
+    delete newOption._selected;
+    delete newOption._scrollIndex;
+
+    if ('_keyInOptionList' in newOption) {
+      newOption.key = newOption._keyInOptionList;
+      delete newOption._keyInOptionList;
     }
 
-    return option;
+    return newOption;
   }
 
   _notifySelect(value, option) {

package/lib/cjs/select/select.scss

@@ -1,7 +1,7 @@
 //@import '../theme/variables.scss';
+@import './option.scss';
 @import './variables.scss';
 @import './mixin.scss';
-@import './option.scss';
 
 $module: #{$prefix}-select;
 $single: #{$module}-single;

package/lib/cjs/timeline/timeline.css

@@ -96,6 +96,9 @@
 .semi-timeline-alternate .semi-timeline-item-tail, .semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-alternate .semi-timeline-item-head-custom, .semi-timeline-right .semi-timeline-item-tail, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head-custom, .semi-timeline-center .semi-timeline-item-tail, .semi-timeline-center .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head-custom {
   left: 50%;
 }
+.semi-timeline-alternate .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-right .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-center .semi-timeline-item-head.semi-timeline-item-head-custom {
+  margin-left: 0;
+}
 .semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head {
   margin-left: -4px;
 }

package/lib/cjs/timeline/timeline.scss

@@ -120,7 +120,11 @@ $module: #{$prefix}-timeline;
             &-head-custom {
                 left: $spacing-timeline_item_head_custom-left;
             }
-
+            &-head{
+                &.#{$module}-item-head-custom{
+                    margin-left: 0;
+                }
+            }
             &-head {
                 margin-left: $spacing-timeline_item_head-marginLeft;
             }

package/lib/cjs/tree/treeUtil.js

@@ -57,12 +57,10 @@ var _every = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stab
 
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
 
-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 _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
 
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 
 var _get2 = _interopRequireDefault(require("lodash/get"));
@@ -557,7 +555,7 @@ function normalizedArr(val) {
 
 function normalizeKeyList(keyList, keyEntities) {
   let leafOnly = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  let res = [];
+  const res = [];
   const keyListSet = new _set.default(keyList);
 
   if (!leafOnly) {
@@ -577,9 +575,11 @@ function normalizeKeyList(keyList, keyEntities) {
       res.push(key);
     });
   } else {
-    var _context8;
-
-    res = (0, _filter.default)(_context8 = (0, _from.default)(keyList)).call(_context8, key => keyEntities[key] && !isValid(keyEntities[key].children));
+    (0, _forEach.default)(keyList).call(keyList, key => {
+      if (keyEntities[key] && !isValid(keyEntities[key].children)) {
+        res.push(key);
+      }
+    });
   }
 
   return res;
@@ -589,9 +589,9 @@ function getMotionKeys(eventKey, expandedKeys, keyEntities) {
   const res = [];
 
   const getChild = itemKey => {
-    var _context9;
+    var _context8;
 
-    keyEntities[itemKey].children && (0, _forEach.default)(_context9 = keyEntities[itemKey].children).call(_context9, item => {
+    keyEntities[itemKey].children && (0, _forEach.default)(_context8 = keyEntities[itemKey].children).call(_context8, item => {
       const {
         key
       } = item;
@@ -707,7 +707,7 @@ function calcCheckedKeysForUnchecked(key, keyEntities, checkedKeys, halfCheckedK
 }
 
 function filterTreeData(info) {
-  var _context10, _context11;
+  var _context9, _context10;
 
   const {
     showFilteredOnly,
@@ -719,7 +719,7 @@ function filterTreeData(info) {
     prevExpandedKeys
   } = info;
   let filteredOptsKeys = [];
-  filteredOptsKeys = (0, _map.default)(_context10 = (0, _filter.default)(_context11 = (0, _values.default)(keyEntities)).call(_context11, item => filter(inputValue, item.data, filterTreeNode, filterProps))).call(_context10, item => item.key);
+  filteredOptsKeys = (0, _map.default)(_context9 = (0, _filter.default)(_context10 = (0, _values.default)(keyEntities)).call(_context10, item => filter(inputValue, item.data, filterTreeNode, filterProps))).call(_context9, item => item.key);
   let expandedOptsKeys = findAncestorKeys(filteredOptsKeys, keyEntities, false);
 
   if (prevExpandedKeys.length) {
@@ -763,9 +763,9 @@ function updateKeys(keySet, keyEntities) {
 }
 
 function calcDisabledKeys(keyEntities) {
-  var _context12;
+  var _context11;
 
-  const disabledKeys = (0, _filter.default)(_context12 = (0, _keys.default)(keyEntities)).call(_context12, key => keyEntities[key].data.disabled);
+  const disabledKeys = (0, _filter.default)(_context11 = (0, _keys.default)(keyEntities)).call(_context11, key => keyEntities[key].data.disabled);
   const {
     checkedKeys
   } = calcCheckedKeys(disabledKeys, keyEntities);

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

@@ -119,6 +119,7 @@ declare class UploadFoundation<P = Record<string, any>, S = Record<string, any>>
     buildFileItem(fileInstance: CustomFile, uploadTrigger: string): BaseFileItem;
     replaceFileList(files: Array<CustomFile>): void;
     addFilesToList(files: Array<CustomFile>): void;
+    insertFileToList(files: Array<CustomFile>, index: number): void;
     manualUpload(): void;
     startUpload(fileList: Array<BaseFileItem>): void;
     upload(file: BaseFileItem): void;