@douyinfe/semi-foundation 2.31.4 → 2.32.0

package/lib/cjs/sideSheet/sideSheet.css

@@ -76,12 +76,22 @@
   align-items: flex-start;
   padding: 24px;
   padding-bottom: 20px;
+  border-bottom: 0px solid var(--semi-color-border);
 }
 .semi-sidesheet-body {
   padding: 0 24px;
   flex: 1;
   overflow: auto;
 }
+.semi-sidesheet-size-small {
+  width: 448px;
+}
+.semi-sidesheet-size-medium {
+  width: 684px;
+}
+.semi-sidesheet-size-large {
+  width: 920px;
+}
 .semi-sidesheet-content {
   height: 100%;
   display: flex;

package/lib/cjs/sideSheet/sideSheet.scss

@@ -95,6 +95,7 @@ $module: #{$prefix}-sidesheet;
         align-items: flex-start;
         padding: $spacing-sideSheet_header-padding;
         padding-bottom: $spacing-sideSheet_header-paddingBottom;
+        border-bottom: $width-sideSheet_header-borderBottom solid $color-sideSheet_header-borderBottom;
     }
 
     &-body {
@@ -103,6 +104,20 @@ $module: #{$prefix}-sidesheet;
         overflow: auto;
     }
 
+    &-size-small {
+        width: $width-sideSheet_size-small;
+    }
+
+    &-size-medium {
+        width: $width-sideSheet_size-medium;
+    }
+
+    &-size-large {
+        width: $width-sideSheet_size-large;
+    }
+
+
+
     &-content {
         height: 100%;
         display: flex;

package/lib/cjs/sideSheet/variables.scss

@@ -2,6 +2,7 @@
 $color-sideSheet_mask-bg: var(--semi-color-overlay-bg); // 侧边栏打开后蒙层颜色
 $color-sideSheet-bg: var(--semi-color-bg-2); // 侧边栏背景颜色
 $color-sideSheet_main-text: var(--semi-color-text-0); // 侧边栏默认文本颜色
+$color-sideSheet_header-borderBottom: var(--semi-color-border); // 侧边栏 header 底部边框颜色
 
 // Spacing
 $spacing-sideSheet-margin: 0; // 侧边栏整体外边距
@@ -12,6 +13,11 @@ $spacing-sideSheet_body-paddingY: 0; // 侧边栏 body 垂直内边距
 $spacing-sideSheet_body-paddingX: $spacing-loose; // 侧边栏 body 水平内边距
 $spacing-sideSheet_footer-padding: $spacing-loose; // 侧边栏 footer 内边距
 
+$width-sideSheet_header-borderBottom: 0px; // 侧边栏 header 底部边框宽度
+$width-sideSheet_size-small: 448px; // 小尺寸侧边栏宽度
+$width-sideSheet_size-medium: 684px; // 中尺寸侧边栏宽度
+$width-sideSheet_size-large: 920px; // 大尺寸侧边栏宽度
+
 // Font
 $font-sideSheet_title-fontWeight: $font-weight-bold; // 侧边栏标题文本字重
 $font-sideSheet_title-fontSize: $font-size-header-5; // 侧边栏标题文本字号

package/lib/cjs/spin/spin.css

@@ -26,6 +26,7 @@
 .semi-spin-wrapper > svg {
   animation: 600ms linear infinite semi-animation-rotate;
   animation-fill-mode: forwards;
+  vertical-align: top;
   width: 20px;
   height: 20px;
 }

package/lib/cjs/spin/spin.scss

@@ -29,6 +29,7 @@ $module: #{$prefix}-spin;
         & > svg {
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
             animation-fill-mode: forwards;
+            vertical-align: top;
             @include size($width-spin_middle);
         }
     }

package/lib/cjs/table/table.css

@@ -201,12 +201,14 @@
 }
 .semi-table-tbody > .semi-table-row {
   display: table-row;
+  background-color: var(--semi-color-bg-1);
 }
 .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell {
-  background-color: var(--semi-color-fill-0);
+  background-image: linear-gradient(0deg, var(--semi-color-fill-0), var(--semi-color-fill-0));
+  background-color: var(--semi-color-bg-0);
 }
 .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right {
-  background-color: var(--semi-color-bg-1);
+  background-image: linear-gradient(0deg, var(--semi-color-bg-1), var(--semi-color-bg-1));
 }
 .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left::before, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right::before {
   background-color: var(--semi-color-fill-0);
@@ -230,7 +232,6 @@
   box-sizing: border-box;
   position: relative;
   vertical-align: middle;
-  background-color: var(--semi-color-bg-1);
 }
 .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing {
   border-right: 2px solid var(--semi-color-primary);

package/lib/cjs/table/table.scss

@@ -209,15 +209,19 @@ $module: #{$prefix}-table;
         display: table-row-group;
         & > .#{$module}-row {
             display: table-row;
+            background-color: $color-table_body-bg-default;
 
             &:hover {
                 & > .#{$module}-row-cell {
-                    background-color: $color-table_body-bg-hover;
+                    // $color-table_body-bg-hover has transparency，will reveal the background color $color-table_body-bg-default\
+                    // combine background-image and background-color to make the non-fixed column color does not show through the bottom color
+                    background-image: linear-gradient(0deg, $color-table_body-bg-hover, $color-table_body-bg-hover);
+                    background-color: $color-table_cell-bg-hover;
 
                     &.#{$module}-cell-fixed {
                         &-left,
                         &-right {
-                            background-color: $color-table_body-bg-default;
+                            background-image: linear-gradient(0deg, $color-table_body-bg-default, $color-table_body-bg-default);
 
                             &::before {
                                 background-color: $color-table_body-bg-hover;
@@ -246,7 +250,6 @@ $module: #{$prefix}-table;
                 box-sizing: border-box;
                 position: relative;
                 vertical-align: middle;
-                background-color: $color-table_body-bg-default;
 
                 &.resizing {
                     border-right: $width-table_resizer_border solid $color-table_resizer-bg-default;

package/lib/cjs/table/utils.d.ts

@@ -1,8 +1,6 @@
 import { strings } from './constants';
-export declare function cloneDeep(value: any, customizer?: (v: any) => any): any;
 export declare function equalWith(value: any, other: any, customizer?: (...args: any[]) => boolean): boolean;
 export declare function getColumnKey(column: any, keyPropNames: any[]): any;
-export declare function mergeColumns(oldColumns?: any[], newColumns?: any[], keyPropNames?: any[], deep?: boolean): any[];
 /**
  *
  * @param {Array<number>} arr
@@ -81,7 +79,58 @@ export declare function mergeQueries(query: Record<string, any>, queries?: Recor
  * @param {Object[]} columns columns retain the column width after resize
  * @param {Object[]} newColumns
  */
-export declare function withResizeWidth(columns: Record<string, any>[], newColumns: Record<string, any>[]): any;
+export declare function withResizeWidth(columns: Record<string, any>[], newColumns: Record<string, any>[]): {
+    [x: number]: Record<string, any>;
+    length: number;
+    toString(): string;
+    toLocaleString(): string;
+    pop(): Record<string, any>;
+    push(...items: Record<string, any>[]): number;
+    concat(...items: ConcatArray<Record<string, any>>[]): Record<string, any>[];
+    concat(...items: (Record<string, any> | ConcatArray<Record<string, any>>)[]): Record<string, any>[];
+    join(separator?: string): string;
+    reverse(): Record<string, any>[];
+    shift(): Record<string, any>;
+    slice(start?: number, end?: number): Record<string, any>[];
+    sort(compareFn?: (a: Record<string, any>, b: Record<string, any>) => number): Record<string, any>[];
+    splice(start: number, deleteCount?: number): Record<string, any>[];
+    splice(start: number, deleteCount: number, ...items: Record<string, any>[]): Record<string, any>[];
+    unshift(...items: Record<string, any>[]): number;
+    indexOf(searchElement: Record<string, any>, fromIndex?: number): number;
+    lastIndexOf(searchElement: Record<string, any>, fromIndex?: number): number;
+    every<S extends Record<string, any>>(predicate: (value: Record<string, any>, index: number, array: Record<string, any>[]) => value is S, thisArg?: any): this is S[];
+    every(predicate: (value: Record<string, any>, index: number, array: Record<string, any>[]) => unknown, thisArg?: any): boolean;
+    some(predicate: (value: Record<string, any>, index: number, array: Record<string, any>[]) => unknown, thisArg?: any): boolean;
+    forEach(callbackfn: (value: Record<string, any>, index: number, array: Record<string, any>[]) => void, thisArg?: any): void;
+    map<U>(callbackfn: (value: Record<string, any>, index: number, array: Record<string, any>[]) => U, thisArg?: any): U[];
+    filter<S_1 extends Record<string, any>>(predicate: (value: Record<string, any>, index: number, array: Record<string, any>[]) => value is S_1, thisArg?: any): S_1[];
+    filter(predicate: (value: Record<string, any>, index: number, array: Record<string, any>[]) => unknown, thisArg?: any): Record<string, any>[];
+    reduce(callbackfn: (previousValue: Record<string, any>, currentValue: Record<string, any>, currentIndex: number, array: Record<string, any>[]) => Record<string, any>): Record<string, any>;
+    reduce(callbackfn: (previousValue: Record<string, any>, currentValue: Record<string, any>, currentIndex: number, array: Record<string, any>[]) => Record<string, any>, initialValue: Record<string, any>): Record<string, any>;
+    reduce<U_1>(callbackfn: (previousValue: U_1, currentValue: Record<string, any>, currentIndex: number, array: Record<string, any>[]) => U_1, initialValue: U_1): U_1;
+    reduceRight(callbackfn: (previousValue: Record<string, any>, currentValue: Record<string, any>, currentIndex: number, array: Record<string, any>[]) => Record<string, any>): Record<string, any>;
+    reduceRight(callbackfn: (previousValue: Record<string, any>, currentValue: Record<string, any>, currentIndex: number, array: Record<string, any>[]) => Record<string, any>, initialValue: Record<string, any>): Record<string, any>;
+    reduceRight<U_2>(callbackfn: (previousValue: U_2, currentValue: Record<string, any>, currentIndex: number, array: Record<string, any>[]) => U_2, initialValue: U_2): U_2;
+    find<S_2 extends Record<string, any>>(predicate: (this: void, value: Record<string, any>, index: number, obj: Record<string, any>[]) => value is S_2, thisArg?: any): S_2;
+    find(predicate: (value: Record<string, any>, index: number, obj: Record<string, any>[]) => unknown, thisArg?: any): Record<string, any>;
+    findIndex(predicate: (value: Record<string, any>, index: number, obj: Record<string, any>[]) => unknown, thisArg?: any): number;
+    fill(value: Record<string, any>, start?: number, end?: number): Record<string, any>[];
+    copyWithin(target: number, start: number, end?: number): Record<string, any>[];
+    entries(): IterableIterator<[number, Record<string, any>]>;
+    keys(): IterableIterator<number>;
+    values(): IterableIterator<Record<string, any>>;
+    includes(searchElement: Record<string, any>, fromIndex?: number): boolean;
+    [Symbol.iterator](): IterableIterator<Record<string, any>>;
+    [Symbol.unscopables](): {
+        copyWithin: boolean;
+        entries: boolean;
+        fill: boolean;
+        find: boolean;
+        findIndex: boolean;
+        keys: boolean;
+        values: boolean;
+    };
+};
 /**
  * Pure function version of the same function in table foundation
  * This is not accessible in getDerivedStateFromProps, so fork one out

package/lib/cjs/table/utils.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.arrayAdd = arrayAdd;
 exports.assignColumnKeys = assignColumnKeys;
-exports.cloneDeep = cloneDeep;
 exports.equalWith = equalWith;
 exports.expandBtnShouldInRow = expandBtnShouldInRow;
 exports.filterColumns = filterColumns;
@@ -38,7 +37,6 @@ exports.isScrollbarColumn = isScrollbarColumn;
 exports.isSelected = isSelected;
 exports.isSelectionColumn = isSelectionColumn;
 exports.isTreeTable = isTreeTable;
-exports.mergeColumns = mergeColumns;
 exports.mergeQueries = mergeQueries;
 exports.sliceColumnsByLevel = sliceColumnsByLevel;
 exports.warnIfNoDataIndex = warnIfNoDataIndex;
@@ -56,10 +54,6 @@ var _findIndex2 = _interopRequireDefault(require("lodash/findIndex"));
 
 var _each2 = _interopRequireDefault(require("lodash/each"));
 
-var _clone2 = _interopRequireDefault(require("lodash/clone"));
-
-var _map2 = _interopRequireDefault(require("lodash/map"));
-
 var _find2 = _interopRequireDefault(require("lodash/find"));
 
 var _filter2 = _interopRequireDefault(require("lodash/filter"));
@@ -68,8 +62,6 @@ var _get2 = _interopRequireDefault(require("lodash/get"));
 
 var _isEqualWith2 = _interopRequireDefault(require("lodash/isEqualWith"));
 
-var _cloneDeepWith2 = _interopRequireDefault(require("lodash/cloneDeepWith"));
-
 var _constants = require("./constants");
 
 var _isNullOrUndefined = _interopRequireDefault(require("../utils/isNullOrUndefined"));
@@ -78,18 +70,6 @@ var _Logger = _interopRequireDefault(require("../utils/Logger"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function cloneDeep(value, customizer) {
-  return (0, _cloneDeepWith2.default)(value, v => {
-    if (typeof v === 'function') {
-      return v;
-    } else if (typeof customizer === 'function') {
-      return customizer(v);
-    }
-
-    return undefined;
-  });
-}
-
 function equalWith(value, other, customizer) {
   return (0, _isEqualWith2.default)(value, other, function (objVal, othVal) {
     if (typeof objVal === 'function' && typeof othVal === 'function') {
@@ -123,33 +103,6 @@ function getColumnKey(column, keyPropNames) {
   });
   return key;
 }
-
-function mergeColumns() {
-  let oldColumns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let newColumns = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  let keyPropNames = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  let deep = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-  const finalColumns = [];
-  const clone = deep ? cloneDeep : _clone2.default;
-
-  if (deep) {
-    const logger = new _Logger.default('[@douyinfe/semi-ui Table]');
-    logger.warn('Should not deep merge columns from foundation since columns may have react elements. Merge columns deep from semi-ui');
-  }
-
-  (0, _map2.default)(newColumns, newColumn => {
-    newColumn = Object.assign({}, newColumn);
-    const key = getColumnKey(newColumn, keyPropNames);
-    const oldColumn = key != null && (0, _find2.default)(oldColumns, item => getColumnKey(item, keyPropNames) === key);
-
-    if (oldColumn) {
-      finalColumns.push(clone(Object.assign(Object.assign({}, oldColumn), newColumn)));
-    } else {
-      finalColumns.push(clone(newColumn));
-    }
-  });
-  return finalColumns;
-}
 /**
  *
  * @param {Array<number>} arr
@@ -529,7 +482,7 @@ function mergeQueries(query) {
 
 
 function withResizeWidth(columns, newColumns) {
-  const _newColumns = cloneDeep(newColumns);
+  const _newColumns = Object.assign({}, newColumns);
 
   for (const column of columns) {
     if (!(0, _isNullOrUndefined.default)(column.width)) {

package/lib/cjs/table/variables.scss

@@ -75,6 +75,8 @@ $color-table_resizer-bg-default: var(--semi-color-primary); // 表格拉伸标
 $color-table_selection-bg-default: rgba(var(--semi-grey-0), 1); // 表格分组背景色
 $color-table_placeholder-text-default: var(--semi-color-text-2); // 表格空数据文本颜色
 
+$color-table_cell-bg-hover: var(--semi-color-bg-0); // 让表格在 hover 时正确显示 $color-table_body-bg-hover 颜色，如无必要不要修改
+
 // Other
 $font-table_base-fontSize: 14px; // 表格默认文本字号
 $border-table_base-borderStyle: solid; // 表格描边样式

package/lib/cjs/tree/tree.css

@@ -278,6 +278,7 @@
 }
 .semi-tree-option-list-block .semi-tree-option-spin-icon {
   display: flex;
+  line-height: 0;
   color: var(--semi-color-primary);
 }
 .semi-tree-option-list-block .semi-tree-option-spin-icon svg {

package/lib/cjs/tree/tree.scss

@@ -302,6 +302,7 @@ $module: #{$prefix}-tree;
 
         &-spin-icon {
             display: flex;
+            line-height: 0; // make the spin icon in the center
             & svg {
                 width: $width-tree_spinIcon;
                 height: $width-tree_spinIcon;

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

@@ -20,6 +20,8 @@ export interface BasicTriggerRenderProps {
     placeholder: string;
     value: BasicTreeNodeData[];
     onClear: (e: any) => void;
+    onSearch: (inputValue: string) => void;
+    onRemove: (key: string) => void;
 }
 export declare type BasicOnChangeWithObject = (node: BasicTreeNodeData[] | BasicTreeNodeData, e: any) => void;
 export declare type BasicOnChangeWithBasic = (value: BasicTreeNodeData['value'], node: BasicTreeNodeData[] | BasicTreeNodeData, e: any) => void;
@@ -59,6 +61,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize'
     loadedKeys?: string[];
     showRestTagsPopover?: boolean;
     restTagsPopoverProps?: any;
+    clickTriggerToHide?: boolean;
     loadData?: (data: BasicTreeNodeData) => Promise<void>;
     onSelect?: (selectedKeys: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
     searchRender?: (inputProps: any) => any;

package/lib/cjs/treeSelect/foundation.js

@@ -386,7 +386,8 @@ class TreeSelectFoundation extends _foundation.default {
       isFocus
     } = this.getStates();
     const {
-      searchPosition
+      searchPosition,
+      clickTriggerToHide
     } = this.getProps();
 
     if (isDisabled) {
@@ -401,7 +402,7 @@ class TreeSelectFoundation extends _foundation.default {
           return;
         }
 
-        this.close(e);
+        clickTriggerToHide && this.close(e);
       } else {
         this.open();
       }

package/lib/cjs/upload/upload.css

@@ -214,6 +214,9 @@
   position: relative;
   top: -1px;
 }
+.semi-upload-file-card-icon-loading {
+  line-height: 0;
+}
 .semi-upload-file-card-icon-loading .semi-spin-wrapper svg {
   height: 11px;
   width: 11px;

package/lib/cjs/upload/upload.scss

@@ -258,6 +258,7 @@ $module: #{$prefix}-upload;
             }
 
             &-loading {
+                line-height: 0; // make the spin icon in the center
                 .#{$prefix}-spin-wrapper svg {
                     height: $width-upload_file_card-icon;
                     width: $width-upload_file_card-icon;

package/lib/es/autoComplete/autoComplete.css

@@ -94,6 +94,7 @@
   padding-top: 8px;
   padding-bottom: 8px;
   cursor: not-allowed;
+  height: 20px;
 }
 .semi-autocomplete-loading-wrapper .semi-spin {
   width: 100%;

package/lib/es/autoComplete/autoComplete.scss

@@ -27,6 +27,8 @@ $module: #{$prefix}-autocomplete;
         padding-top: $spacing-autoComplete_loading_wrapper-paddingTop;
         padding-bottom: $spacing-autoComplete_loading_wrapper-paddingBottom;
         cursor: not-allowed;
+        // make sure that spin align vertical, no need to make 20px as a spacing token here
+        height: 20px;
         // height: $spacing-extra-loose;
         // @include all-center;
         .#{$prefix}-spin {

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

@@ -47,8 +47,10 @@ export interface BasicTriggerRenderProps {
      * should call this function when the value of the Input component
      * customized by triggerRender is updated to synchronize the state
      * with Cascader. */
+    onSearch: (inputValue: string) => void;
     onChange: (inputValue: string) => void;
     onClear: (e: any) => void;
+    onRemove: (key: string) => void;
 }
 export interface BasicScrollPanelProps {
     panelIndex: number;

package/lib/es/datePicker/_utils/getDefaultFormatToken.d.ts

@@ -4,6 +4,7 @@ declare const getDefaultFormatToken: (type: string) => {
     readonly dateRange: "yyyy-MM-dd";
     readonly dateTimeRange: "yyyy-MM-dd HH:mm:ss";
     readonly month: "yyyy-MM";
+    readonly monthRange: "yyyy-MM";
 };
 export declare function getDefaultFormatTokenByType(type: string): any;
 export default getDefaultFormatToken;

package/lib/es/datePicker/_utils/getDefaultFormatToken.js

@@ -4,7 +4,8 @@ const defaultFormatTokens = {
   dateTime: strings.FORMAT_DATE_TIME,
   dateRange: strings.FORMAT_FULL_DATE,
   dateTimeRange: strings.FORMAT_DATE_TIME,
-  month: strings.FORMAT_YEAR_MONTH
+  month: strings.FORMAT_YEAR_MONTH,
+  monthRange: strings.FORMAT_YEAR_MONTH
 };
 
 const getDefaultFormatToken = type => defaultFormatTokens;

package/lib/es/datePicker/_utils/getInsetInputFormatToken.js

@@ -34,6 +34,7 @@ export default function getInsetInputFormatToken(options) {
 
     case 'date':
     case 'month':
+    case 'monthRange':
     case 'dateRange':
     default:
       const dateResult = dateReg.exec(format);

package/lib/es/datePicker/_utils/getInsetInputValueFromInsetInputStr.js

@@ -36,6 +36,7 @@ export default function getInsetInputValueFromInsetInputStr(options) {
   switch (type) {
     case 'date':
     case 'month':
+    case 'monthRange':
       insetInputValue.monthLeft.dateInput = inputValue;
       break;
 

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

@@ -35,7 +35,7 @@ declare const strings: {
     readonly DEFAULT_SEPARATOR_MULTIPLE: ",";
     readonly DEFAULT_SEPARATOR_RANGE: " ~ ";
     readonly SIZE_SET: readonly ["small", "default", "large"];
-    readonly TYPE_SET: readonly ["date", "dateRange", "year", "month", "dateTime", "dateTimeRange"];
+    readonly TYPE_SET: readonly ["date", "dateRange", "year", "month", "monthRange", "dateTime", "dateTimeRange"];
     readonly PRESET_POSITION_SET: readonly ["left", "right", "top", "bottom"];
     readonly DENSITY_SET: readonly ["default", "compact"];
     readonly PANEL_TYPE_LEFT: "left";

package/lib/es/datePicker/constants.js

@@ -41,7 +41,7 @@ const strings = Object.assign({
   DEFAULT_SEPARATOR_MULTIPLE: ',',
   DEFAULT_SEPARATOR_RANGE: ' ~ ',
   SIZE_SET: ['small', 'default', 'large'],
-  TYPE_SET: ['date', 'dateRange', 'year', 'month', 'dateTime', 'dateTimeRange'],
+  TYPE_SET: ['date', 'dateRange', 'year', 'month', 'monthRange', 'dateTime', 'dateTimeRange'],
   PRESET_POSITION_SET: ['left', 'right', 'top', 'bottom'],
   DENSITY_SET: ['default', 'compact'],
   PANEL_TYPE_LEFT: 'left',

package/lib/es/datePicker/datePicker.css

@@ -118,6 +118,15 @@
 .semi-datepicker-panel-yam {
   max-width: 484px;
 }
+.semi-datepicker-panel-yam[x-type=monthRange] {
+  max-width: 584px;
+}
+.semi-datepicker-panel-yam .semi-datepicker-yearmonth-body {
+  display: flex;
+}
+.semi-datepicker-panel-yam .semi-datepicker-yearmonth-body .semi-scrolllist:nth-child(2) {
+  border-left: 1px solid var(--semi-color-border);
+}
 .semi-datepicker-panel-yam .semi-scrolllist {
   box-shadow: none;
   height: 266px;
@@ -132,10 +141,7 @@
   padding: 0;
   overflow: hidden;
 }
-.semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item-wheel {
-  border: none;
-}
-.semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item {
+.semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item-wheel:not(#neverExistElement) {
   border: none;
 }
 .semi-datepicker-footer {
@@ -456,16 +462,16 @@
 .semi-datepicker-quick-control-top-month-content, .semi-datepicker-quick-control-bottom-month-content {
   box-sizing: border-box;
   display: grid;
-  grid-template-columns: repeat(2, minmax(65.5px, 73px));
+  grid-template-columns: repeat(2, minmax(51px, 58.5px));
   grid-gap: 8px;
   align-content: flex-start;
   padding: 8px 20px;
 }
 .semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-quick-control-bottom-month-content-item {
-  max-width: 73px;
+  max-width: 58.5px;
 }
 .semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-quick-control-bottom-month-content-item-ellipsis {
-  max-width: 57px;
+  max-width: 42.5px;
   color: var(--semi-color-primary);
 }
 .semi-datepicker-quick-control-month {
@@ -555,7 +561,10 @@
   width: 568px;
 }
 .semi-datepicker-inset-input-wrapper[x-type=month] {
-  width: 204px;
+  width: 165px;
+}
+.semi-datepicker-inset-input-wrapper[x-type=monthRange] {
+  width: 331px;
 }
 .semi-datepicker-inset-input-wrapper .semi-input-wrapper {
   flex: 1;
@@ -585,6 +594,9 @@
 .semi-datepicker-range-input:active {
   border-color: transparent;
 }
+.semi-datepicker-range-input .semi-datepicker-monthRange-input {
+  background-color: transparent;
+}
 .semi-datepicker-range-input-wrapper {
   box-sizing: border-box;
   background-color: transparent;
@@ -754,6 +766,12 @@
   height: 48px;
   padding: 12px;
 }
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body {
+  display: flex;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body .semi-scrolllist:nth-child(2) {
+  border: 1px solid var(--semi-color-border);
+}
 .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist {
   font-size: 12px;
   line-height: 16px;
@@ -955,16 +973,16 @@
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content {
   display: grid;
-  grid-template-columns: repeat(2, minmax(75.5px, 83px));
+  grid-template-columns: repeat(2, minmax(61px, 68.5px));
   grid-gap: 8px;
   align-content: flex-start;
   padding: 8px 10px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item {
-  max-width: 83px;
+  max-width: 68.5px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item-ellipsis {
-  max-width: 67px;
+  max-width: 52.5px;
   font-size: 12px;
   color: var(--semi-color-primary);
 }