@douyinfe/semi-foundation 2.31.2 → 2.32.0-beta.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/switch/foundation.js

@@ -36,11 +36,8 @@ class SwitchFoundation extends _foundation.default {
 
   init() {
     const {
-      defaultChecked,
-      checked,
       disabled
     } = this.getProps();
-    this.setChecked(defaultChecked || checked);
     this.setDisabled(disabled);
   }
 

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: (value: 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/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);
 }

package/lib/es/datePicker/datePicker.scss

@@ -169,11 +169,23 @@ $module-list: #{$prefix}-scrolllist;
     }
 
     // 年月选择器
-
     &-panel-yam {
         // add left or right preset panel to panel yam, max-width will be bigger
         max-width: $width-datepicker_monthPanel_max + $width-datepicker_presetPanel_left_and_right;
 
+        &[x-type="monthRange"] {
+            max-width: $width-datepicker_monthRangePanel_max + $width-datepicker_presetPanel_left_and_right;
+        }
+
+        .#{$module}-yearmonth-body {
+            display: flex;
+
+            .#{$prefix}-scrolllist:nth-child(2) {
+                border-left: 1px solid var(--semi-color-border);
+
+            }
+        }
+
         .#{$prefix}-scrolllist {
             box-shadow: none;
             height: $height-datepicker_panel_yam_scrolllist;
@@ -196,13 +208,14 @@ $module-list: #{$prefix}-scrolllist;
                 padding: 0;
                 overflow: hidden;
 
-                .#{$prefix}-scrolllist-item-wheel {
+                .#{$prefix}-scrolllist-item-wheel:not(#neverExistElement) {
+                    // equal to #{$prefix}-scrolllist-item-wheel, add [:not] selector only to increase selector priority
                     border: none;
                 }
 
-                .#{$prefix}-scrolllist-item {
-                    border: none;
-                }
+                // .#{$prefix}-scrolllist-item {
+                //     border: none;
+                // }
             }
         }
     }
@@ -832,6 +845,9 @@ $module-list: #{$prefix}-scrolllist;
             &[x-type=month] {
                 width: $width-datepicker_insetInput_month_type_wrapper;
             }
+            &[x-type=monthRange] {
+                width: $width-datepicker_insetInput_month_range_type_wrapper;
+            }
 
             .#{$prefix}-input-wrapper {
                 flex: 1;
@@ -869,7 +885,9 @@ $module-list: #{$prefix}-scrolllist;
                 border-color: $color-datepicker_range_trigger-border-active ;
             }
 
-
+            .#{$module}-monthRange-input {
+                background-color: transparent;
+            }
 
             &-wrapper {
                 box-sizing: border-box;
@@ -1108,6 +1126,15 @@ $module-list: #{$prefix}-scrolllist;
             padding: $spacing-datepicker_yam_panel_header_compact-padding;
         }
 
+        .#{$module}-yearmonth-body {
+            display: flex;
+
+            .#{$prefix}-scrolllist:nth-child(2){
+                border: 1px solid var(--semi-color-border);
+
+            }
+        }
+
         .#{$prefix}-scrolllist {
             @include font-size-small;
             line-height: $lineHeight-datepicker_compact;

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

@@ -85,6 +85,7 @@ export interface EventHandlerProps {
     onClear?: (e: any) => void;
     onFocus?: (e: any, rangType: RangeType) => void;
     onPresetClick?: OnPresetClickType;
+    onClickOutSide?: () => void;
 }
 export interface DatePickerFoundationProps extends ElementProps, RenderProps, EventHandlerProps {
     autoAdjustOverflow?: boolean;
@@ -155,7 +156,7 @@ export interface DatePickerFoundationState {
 }
 export { Type, DateInputFoundationProps };
 export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationProps, DatePickerFoundationState> {
-    togglePanel: (panelShow: boolean) => void;
+    togglePanel: (panelShow: boolean, cb?: () => void) => void;
     registerClickOutSide: () => void;
     unregisterClickOutSide: () => void;
     notifyBlur: DatePickerFoundationProps['onBlur'];
@@ -178,6 +179,9 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
     updateInsetInputValue: (insetInputValue: InsetInputValue) => void;
     setInsetInputFocus: () => void;
     setTriggerDisabled: (disabled: boolean) => void;
+    setInputFocus: () => void;
+    setInputBlur: () => void;
+    setRangeInputBlur: () => void;
 }
 /**
  * The datePicker foundation.js is responsible for maintaining the date value and the input box value, as well as the callback of both
@@ -185,6 +189,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;
     isValidTimeZone(timeZone?: string | number): boolean;
@@ -215,17 +220,17 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     initPanelOpenStatus(defaultOpen?: boolean): void;
     openPanel(): void;
     /**
+     * @deprecated
      * do these side effects when type is dateRange or dateTimeRange
      *   1. trigger input blur, if input value is invalid, set input value and state value to previous status
      *   2. set cachedSelectedValue using given dates(in needConfirm mode)
      *      - directly closePanel without click confirm will set cachedSelectedValue to state value
      *      - select one date(which means that the selection value is incomplete) and click confirm also set cachedSelectedValue to state value
      */
-    rangeTypeSideEffectsWhenClosePanel(inputValue: string, willUpdateDates: Date[]): void;
     /**
+     * @deprecated
      * clear input value when selected date is not confirmed
      */
-    needConfirmSideEffectsWhenClosePanel(willUpdateDates: Date[] | null | undefined): void;
     /**
      * clear inset input value when close panel
      */
@@ -247,6 +252,23 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {Date[]} dates
      */
     closePanel(e?: any, inputValue?: string, dates?: Date[]): void;
+    open(): void;
+    close(): void;
+    focus(focusType?: Exclude<RangeType, false>): void;
+    blur(): void;
+    /**
+     * reset cachedSelectedValue, inputValue when close panel
+     */
+    resetInnerSelectedStates(willUpdateDates?: Date[]): void;
+    resetFocus(e?: any): void;
+    /**
+     * cachedSelectedValue can be `(Date|null)[]` or `null`
+     */
+    isCachedSelectedValueValid(dates: Date[]): boolean;
+    /**
+     * 将输入框内容置空
+     */
+    clearInputValue(): void;
     /**
      * clear range input focus when open is controlled
      * fixed github 1375
@@ -381,12 +403,18 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         needCheckFocusRecord?: boolean;
     }): void;
     /**
-     * when changing the year and month through the panel when the type is year or month
+     * when changing the year and month through the panel when the type is year or month or monthRange
      * @param {*} item
      */
     handleYMSelectedChange(item?: {
-        currentMonth?: number;
-        currentYear?: number;
+        currentMonth?: {
+            left: number;
+            right: number;
+        };
+        currentYear?: {
+            left: number;
+            right: number;
+        };
     }): void;
     handleConfirm(): void;
     handleCancel(): void;