@douyinfe/semi-foundation 2.1.6-alpha.0 → 2.2.1

package/cascader/cascader.scss

@@ -116,7 +116,7 @@ $module: #{$prefix}-cascader;
                 margin-left: 0;
             }
 
-            &-disabled {
+            &-disabled.#{$prefix}-tag {
                 color: $color-cascader_input_disabled-text-default;
                 cursor: not-allowed;
                 

package/cascader/constants.ts

@@ -12,6 +12,10 @@ const strings = {
     IS_VALUE: 'isValue',
     SHOW_NEXT_BY_CLICK: 'click',
     SHOW_NEXT_BY_HOVER: 'hover',
+    /* Merge Type */
+    LEAF_ONLY_MERGE_TYPE: 'leafOnly',
+    AUTO_MERGE_VALUE_MERGE_TYPE: 'autoMergeValue',
+    NONE_MERGE_TYPE: 'none',
 } as const;
 
 const numbers = {};

package/cascader/foundation.ts

@@ -14,8 +14,11 @@ import {
     convertDataToEntities,
     findKeysForValues,
     normalizedArr,
-    isValid
+    isValid,
+    calcMergeType
 } from './util';
+import { strings } from './constants';
+
 export interface BasicData {
     data: BasicCascaderData;
     disabled: boolean;
@@ -99,6 +102,7 @@ export interface BasicScrollPanelProps {
 export interface BasicCascaderProps {
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
+    separator?: string;
     arrowIcon?: any;
     changeOnSelect?: boolean;
     multiple?: boolean;
@@ -138,6 +142,8 @@ export interface BasicCascaderProps {
     topSlot?: any;
     showNext?: ShowNextType;
     disableStrictly?: boolean;
+    leafOnly?: boolean;
+    enableLeafClick?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -168,7 +174,7 @@ export interface BasicCascaderInnerData {
     isHovering: boolean;
     checkedKeys: Set<string>;
     halfCheckedKeys: Set<string>;
-    mergedCheckedKeys: Set<string>;
+    resolvedCheckedKeys: Set<string>;
     loadedKeys: Set<string>;
     loadingKeys: Set<string>;
     loading: boolean;
@@ -601,10 +607,11 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     }
 
     _defaultRenderText(path: any[], displayRender?: BasicCascaderProps['displayRender']) {
+        const separator = this.getProp('separator');
         if (displayRender && typeof displayRender === 'function') {
             return displayRender(path);
         } else {
-            return path.join(' / ');
+            return path.join(separator);
         }
     }
 
@@ -649,7 +656,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     }
 
     handleSingleSelect(e: any, item: BasicEntity | BasicData) {
-        const { changeOnSelect: allowChange, filterLeafOnly, multiple } = this.getProps();
+        const { changeOnSelect: allowChange, filterLeafOnly, multiple, enableLeafClick } = this.getProps();
         const { keyEntities, selectedKeys, isSearching } = this.getStates();
         const filterable = this._isFilterable();
         const { data, key } = item;
@@ -667,6 +674,9 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         }
         if (multiple) {
             this._adapter.updateStates({ activeKeys: new Set(activeKeys) });
+            if (isLeaf && enableLeafClick) {
+                this.onItemCheckboxClick(item);
+            }
         } else {
             this._adapter.notifySelect(data.value);
             if (hasChanged) {
@@ -703,8 +713,8 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
 
     _handleMultipleSelect(item: BasicEntity | BasicData) {
         const { key } = item;
-        const { checkedKeys, keyEntities, mergedCheckedKeys } = this.getStates();
-        const { autoMergeValue, max, disableStrictly } = this.getProps();
+        const { checkedKeys, keyEntities, resolvedCheckedKeys } = this.getStates();
+        const { autoMergeValue, max, disableStrictly, leafOnly } = this.getProps();
         // prev checked status
         const prevCheckedStatus = checkedKeys.has(key);
         // next checked status
@@ -719,18 +729,22 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
             this.calcNonDisabedCheckedKeys(key, curCheckedStatus) :
             this.calcCheckedKeys(key, curCheckedStatus);
 
-        const curMergedCheckedKeys = new Set(normalizeKeyList(curCheckedKeys, keyEntities));
+        const mergeType = calcMergeType(autoMergeValue, leafOnly);
+        const isLeafOnlyMerge = mergeType === strings.LEAF_ONLY_MERGE_TYPE;
+        const isNoneMerge = mergeType === strings.NONE_MERGE_TYPE;
+
+        const curResolvedCheckedKeys = new Set(normalizeKeyList(curCheckedKeys, keyEntities, isLeafOnlyMerge));
 
-        const curRealCheckedKeys = autoMergeValue ?
-            curMergedCheckedKeys :
-            curCheckedKeys;
+        const curRealCheckedKeys = isNoneMerge
+            ? curCheckedKeys
+            : curResolvedCheckedKeys;
 
         if (isNumber(max)) {
-            if (autoMergeValue) {
+            if (!isNoneMerge) {
                 // When it exceeds max, the quantity is allowed to be reduced, and no further increase is allowed
-                if (mergedCheckedKeys.size < curMergedCheckedKeys.size && curMergedCheckedKeys.size > max) {
+                if (resolvedCheckedKeys.size < curResolvedCheckedKeys.size && curResolvedCheckedKeys.size > max) {
                     const checkedEntities: BasicEntity[] = [];
-                    curMergedCheckedKeys.forEach(itemKey => {
+                    curResolvedCheckedKeys.forEach(itemKey => {
                         checkedEntities.push(keyEntities[itemKey]);
                     });
                     this._adapter.notifyOnExceed(checkedEntities);
@@ -752,7 +766,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
             this._adapter.updateStates({
                 checkedKeys: curCheckedKeys,
                 halfCheckedKeys: curHalfCheckedKeys,
-                mergedCheckedKeys: curMergedCheckedKeys
+                resolvedCheckedKeys: curResolvedCheckedKeys
             });
         }
 
@@ -868,7 +882,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
             newState.halfCheckedKeys = new Set([]);
             newState.selectedKeys = new Set([]);
             newState.activeKeys = new Set([]);
-            newState.mergedCheckedKeys = new Set([]);
+            newState.resolvedCheckedKeys = new Set([]);
             this._adapter.notifyChange([]);
         } else {
             // if click clearBtn when not searching, clear selected and active values as well

package/cascader/util.ts

@@ -3,6 +3,7 @@ import {
     isUndefined,
     isEqual
 } from 'lodash';
+import { strings } from './constants';
 
 function getPosition(level: any, index: any) {
     return `${level}-${index}`;
@@ -79,4 +80,16 @@ export function findKeysForValues(value: any, keyEntities: any) {
         .filter((item: any) => isEqual(item.valuePath, valuePath))
         .map((item: any) => item.key);
     return res;
+}
+
+export function calcMergeType(autoMergeValue: boolean, leafOnly: boolean): string {
+    let mergeType: string;
+    if (leafOnly) {
+        mergeType = strings.LEAF_ONLY_MERGE_TYPE;
+    } else if (autoMergeValue) {
+        mergeType = strings.AUTO_MERGE_VALUE_MERGE_TYPE;
+    } else {
+        mergeType = strings.NONE_MERGE_TYPE;
+    }
+    return mergeType;
 }

package/datePicker/_utils/parser.ts

@@ -2,7 +2,7 @@
  * @file
  * Various date-related analysis methods
  */
-import { isValid, parseISO, parse } from 'date-fns';
+import { isValid, parseISO, parse, Locale } from 'date-fns';
 
 /**
  * Parsing value to Date object
@@ -11,7 +11,7 @@ export function compatiableParse(
     value: string,
     formatToken?: string,
     baseDate?: Date,
-    locale?: any
+    locale?: Locale
 ): Date | null {
     let result = null;
     if (value) {
@@ -25,7 +25,8 @@ export function compatiableParse(
         if (!isValid(result)) {
             result = new Date(Date.parse(value));
         }
-        if (!isValid(result)) {
+        const yearInvalid = isValid(result) && String(result.getFullYear()).length > 4;
+        if (!isValid(result) || yearInvalid) {
             result = null;
         }
     }

package/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;
+            }
+        }
     }
 
     // 年月选择器
@@ -131,6 +140,17 @@ $module: #{$prefix}-datepicker;
         padding-bottom: $spacing-datepicker_footer-paddingBottom;
         text-align: right;
         background-color: $color-datepicker_footer-bg-default;
+
+        .#{$prefix}-button {
+            // cancel button
+            &:first-of-type {
+                margin-right: $spacing-datepicker_footer_cancel_button-marginRight;
+            }
+            // confirm button
+            &:nth-of-type(2) {
+                margin-right: $spacing-datepicker_footer_confirm_button-marginRight;
+            }
+        }
     }
 
     // 年月选择
@@ -833,6 +853,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/datePicker/foundation.ts

@@ -323,10 +323,8 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      *   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
-     * @param {String} inputValue
-     * @param {Date[]} dates
      */
-    rangeTypeSideEffectsWhenClosePanel(inputValue: string, dates: Date[]) {
+    rangeTypeSideEffectsWhenClosePanel(inputValue: string, willUpdateDates: Date[]) {
         if (this._isRangeType()) {
             this._adapter.setRangeInputFocus(false);
             /**
@@ -334,11 +332,29 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
              * when inputValue is null, picker value will back to last selected value
              */
             this.handleInputBlur(inputValue);
-            const { value, cachedSelectedValue } = this._adapter.getStates();
-            const newCachedSelectedValue = Array.isArray(dates) && dates.length ? dates : value;
-            if (!isEqual(newCachedSelectedValue, cachedSelectedValue)) {
-                this._adapter.updateCachedSelectedValue(newCachedSelectedValue);
-            }
+            this.resetCachedSelectedValue(willUpdateDates);
+        }
+    }
+
+    /**
+     * clear input value when selected date is not confirmed
+     */
+    needConfirmSideEffectsWhenClosePanel(willUpdateDates: Date[] | null | undefined) {
+        if (this._adapter.needConfirm() && !this._isRangeType()) {
+            /**
+             * if `null` input element will show `cachedSelectedValue` formatted value（format in DateInput render）
+             * if `` input element will show `` directly
+             */
+            this._adapter.updateInputValue(null);
+            this.resetCachedSelectedValue(willUpdateDates);
+        }
+    }
+
+    resetCachedSelectedValue(willUpdateDates?: Date[]) {
+        const { value, cachedSelectedValue } = this._adapter.getStates();
+        const newCachedSelectedValue = Array.isArray(willUpdateDates) ? willUpdateDates : value;
+        if (!isEqual(newCachedSelectedValue, cachedSelectedValue)) {
+            this._adapter.updateCachedSelectedValue(newCachedSelectedValue);
         }
     }
 
@@ -354,13 +370,16 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {String} inputValue
      * @param {Date[]} dates
      */
-    closePanel(e?: any, inputValue: string = null, dates: Date[] = []) {
+    closePanel(e?: any, inputValue: string = null, dates?: Date[]) {
+        const { value, cachedSelectedValue } = this._adapter.getStates();
+        const willUpdateDates = isNullOrUndefined(dates) ? this._adapter.needConfirm() ? value : cachedSelectedValue : dates;
         if (!this._isControlledComponent('open')) {
             this._adapter.togglePanel(false);
             this._adapter.unregisterClickOutSide();
         }
         // range type picker, closing panel requires the following side effects
-        this.rangeTypeSideEffectsWhenClosePanel(inputValue, dates);
+        this.rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates as Date[]);
+        this.needConfirmSideEffectsWhenClosePanel(willUpdateDates as Date[]);
         this._adapter.notifyOpenChange(false);
         this._adapter.notifyBlur(e);
     }
@@ -416,7 +435,8 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         if (parsedResult && parsedResult.length) {
             this._updateValueAndInput(parsedResult, input === '');
         } else if (input === '') {
-            this._updateValueAndInput('' as any, true);
+            // if clear input, set input to `''`
+            this._updateValueAndInput('' as any, true, '');
         } else {
             this._updateValueAndInput(stateValue);
         }

package/datePicker/inputFoundation.ts

@@ -89,6 +89,8 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
     }
 
     handleRangeInputClear(e: any) {
+        // prevent trigger click outside
+        this.stopPropagation(e);
         this._adapter.notifyRangeInputClear(e);
     }
 

package/datePicker/monthsGridFoundation.ts

@@ -47,6 +47,7 @@ interface MonthsGridElementProps {
 }
 
 export type PanelType = 'left' | 'right';
+export type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear';
 
 export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     type?: Type;
@@ -268,9 +269,65 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     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: { panelType: PanelType, target: Date }) {
+        const { panelType, target } = options;
+        const { type } = this._adapter.getProps();
+        const { monthLeft, monthRight } = this._adapter.getStates();
+        if (this.isRangeType(type)) {
+            if (panelType === 'right' && differenceInCalendarMonths(target, monthLeft.pickerDate) === 0) {
+                this.handleYearOrMonthChange('prevMonth', 'left', 1, true);
+            } else if (panelType === 'left' && 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: { panelType: PanelType, switchType: YearMonthChangeType }) {
+        const { panelType, switchType } = options;
+        const { monthRight, monthLeft } = this._adapter.getStates();
+        const currentDate = panelType === 'left' ? monthLeft.pickerDate : monthRight.pickerDate;
+        let target: Date;
+        
+        switch (switchType) {
+            case 'prevMonth':
+                target = addMonths(currentDate, -1);
+                break;
+            case 'nextMonth':
+                target = addMonths(currentDate, 1);
+                break;
+            case 'prevYear':
+                target = addYears(currentDate, -1);
+                break;
+            case 'nextYear':
+                target = addYears(currentDate, 1);
+                break;
+        }
+        return target;
+    }
+
+    /**
+     * Change month by yam panel
+     */
     toMonth(panelType: PanelType, target: Date) {
+        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: PanelType, target: Date) {
@@ -289,30 +346,43 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         return typeof realType === 'string' && /range/i.test(realType);
     }
 
-    handleSwitchMonth(switchType: 'prevMonth' | 'nextMonth', panelType: PanelType) {
+    handleSwitchMonthOrYear(switchType: YearMonthChangeType, panelType: PanelType) {
         const { type, syncSwitchMonth } = this.getProps();
-        if (this.isRangeType(type) && syncSwitchMonth) {
+        const rangeType = this.isRangeType(type);
+
+        // range type and syncSwitchMonth, we should change panels at same time
+        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: PanelType) {
-        this.handleSwitchMonth('prevMonth', panelType);
+        this.handleSwitchMonthOrYear('prevMonth', panelType);
     }
 
     nextMonth(panelType: PanelType) {
-        this.handleSwitchMonth('nextMonth', panelType);
+        this.handleSwitchMonthOrYear('nextMonth', panelType);
     }
 
     prevYear(panelType: PanelType) {
-        this.handleYearOrMonthChange('prevYear', panelType);
+        this.handleSwitchMonthOrYear('prevYear', panelType);
     }
 
     nextYear(panelType: PanelType) {
-        this.handleYearOrMonthChange('nextYear', panelType);
+        this.handleSwitchMonthOrYear('nextYear', panelType);
     }
 
     /**
@@ -414,7 +484,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     }
 
     handleYearOrMonthChange(
-        type: 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear',
+        type: YearMonthChangeType,
         panelType: PanelType = strings.PANEL_TYPE_LEFT,
         step = 1,
         notSeparateInRange = false
@@ -458,7 +528,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
      * @param {*} targetDate
      */
     updateDateAfterChangeYM(
-        type: 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear',
+        type: YearMonthChangeType,
         targetDate: Date
     ) {
         const { multiple, disabledDate } = this.getProps();
@@ -839,4 +909,27 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     showDatePanel(panelType: PanelType) {
         this._updatePanelDetail(panelType, { isTimePickerOpen: false, 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/datePicker/rtl.scss

@@ -9,6 +9,18 @@ $module: #{$prefix}-datepicker;
             padding-right: 0;
             padding-left: $spacing-datepicker_footer-paddingRight;
             text-align: left;
+
+            .#{$prefix}-button {
+                &:first-of-type {
+                    margin-left: 0;
+                    margin-right: 0;
+                }
+                // confirm button
+                &:nth-of-type(2) {
+                    margin-right: $spacing-datepicker_footer_cancel_button-marginRight;
+                    margin-left: 0;
+                }
+            }
         }
 
         &-day {
@@ -66,7 +78,9 @@ $module: #{$prefix}-datepicker;
         &-yam {
             // rtl 对箭头进行翻转
             .#{$prefix}-icon-chevron_left,
-            .#{$prefix}-icon-chevron_right {
+            .#{$prefix}-icon-chevron_right,
+            .#{$prefix}-icon-double_chevron_left,
+            .#{$prefix}-icon-double_chevron_right {
                 transform: scaleX(-1);
             }
         }

package/datePicker/variables.scss

@@ -33,6 +33,8 @@ $spacing-datepicker_scrolllist_body-padding: 0; // 时间选择滚动菜单内
 $spacing-datepicker_footer-paddingTop: 10px; // 确认选择 footer 顶部内边距
 $spacing-datepicker_footer-paddingBottom: 10px; // 确认选择 footer 底部内边距
 $spacing-datepicker_footer-paddingRight: 8px; // 确认选择 footer 右侧内边距
+$spacing-datepicker_footer_cancel_button-marginRight: 12px; // 确认选择 footer 取消按钮右外边距
+$spacing-datepicker_footer_confirm_button-marginRight: 8px; // 确认选择 footer 确认按钮右外边距
 $spacing-datepicker_navigation-paddingY: $spacing-base-tight; // 年月切换 header 垂直内边距
 $spacing-datepicker_navigation-paddingX: $spacing-base; // 年月切换 header 水平内边距
 $spacing-datepicker_month-padding: $spacing-base; 

package/gulpfile.js

@@ -52,7 +52,9 @@ gulp.task('compileScss', function compileScss() {
                 cb(null, chunk);
             }
         ))
-        .pipe(sass().on('error', sass.logError))
+        .pipe(sass({
+            charset: false
+        }).on('error', sass.logError))
         .pipe(gulp.dest('lib/es'))
         .pipe(gulp.dest('lib/cjs'));
 });

package/lib/cjs/cascader/cascader.css

@@ -99,11 +99,11 @@
 .semi-cascader-selection-tag:first-child {
   margin-left: 0;
 }
-.semi-cascader-selection-tag-disabled {
+.semi-cascader-selection-tag-disabled.semi-tag {
   color: var(--semi-color-disabled-text);
   cursor: not-allowed;
 }
-.semi-cascader-selection-tag-disabled .semi-tag-close {
+.semi-cascader-selection-tag-disabled.semi-tag .semi-tag-close {
   color: var(--semi-color-disabled-text);
   cursor: not-allowed;
   pointer-events: none;

package/lib/cjs/cascader/cascader.scss

@@ -116,7 +116,7 @@ $module: #{$prefix}-cascader;
                 margin-left: 0;
             }
 
-            &-disabled {
+            &-disabled.#{$prefix}-tag {
                 color: $color-cascader_input_disabled-text-default;
                 cursor: not-allowed;
                 

package/lib/cjs/cascader/constants.d.ts

@@ -9,6 +9,9 @@ declare const strings: {
     readonly IS_VALUE: "isValue";
     readonly SHOW_NEXT_BY_CLICK: "click";
     readonly SHOW_NEXT_BY_HOVER: "hover";
+    readonly LEAF_ONLY_MERGE_TYPE: "leafOnly";
+    readonly AUTO_MERGE_VALUE_MERGE_TYPE: "autoMergeValue";
+    readonly NONE_MERGE_TYPE: "none";
 };
 declare const numbers: {};
 export { cssClasses, strings, numbers };

package/lib/cjs/cascader/constants.js

@@ -21,7 +21,12 @@ const strings = {
   IS_KEY: 'isKey',
   IS_VALUE: 'isValue',
   SHOW_NEXT_BY_CLICK: 'click',
-  SHOW_NEXT_BY_HOVER: 'hover'
+  SHOW_NEXT_BY_HOVER: 'hover',
+
+  /* Merge Type */
+  LEAF_ONLY_MERGE_TYPE: 'leafOnly',
+  AUTO_MERGE_VALUE_MERGE_TYPE: 'autoMergeValue',
+  NONE_MERGE_TYPE: 'none'
 };
 exports.strings = strings;
 const numbers = {};

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

@@ -57,6 +57,7 @@ export interface BasicScrollPanelProps {
 export interface BasicCascaderProps {
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
+    separator?: string;
     arrowIcon?: any;
     changeOnSelect?: boolean;
     multiple?: boolean;
@@ -96,6 +97,8 @@ export interface BasicCascaderProps {
     topSlot?: any;
     showNext?: ShowNextType;
     disableStrictly?: boolean;
+    leafOnly?: boolean;
+    enableLeafClick?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -125,7 +128,7 @@ export interface BasicCascaderInnerData {
     isHovering: boolean;
     checkedKeys: Set<string>;
     halfCheckedKeys: Set<string>;
-    mergedCheckedKeys: Set<string>;
+    resolvedCheckedKeys: Set<string>;
     loadedKeys: Set<string>;
     loadingKeys: Set<string>;
     loading: boolean;