@douyinfe/semi-foundation 2.1.3 → 2.2.0-beta.0

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/checkbox/checkbox.scss

@@ -44,6 +44,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-hover;
+                box-shadow: none;
             }
         }
     }
@@ -56,6 +57,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-active;
+                box-shadow: none;
             }
         }
     }
@@ -70,6 +72,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-disabled;
+                box-shadow: none;
             }
         }
     }
@@ -125,7 +128,7 @@ $module: #{$prefix}-checkbox;
 
         &.#{$module}-indeterminate .#{$module}-inner-display {
             background: $color-checkbox_checked-bg-hover;
-            box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
+            box-shadow: none;
             color: $color-checkbox_checked-icon-hover;
         }
 
@@ -153,6 +156,7 @@ $module: #{$prefix}-checkbox;
             background: $color-checkbox_checked-bg-active;
             border-color: $color-checkbox_checked-border-active;
             color: $color-checkbox_checked-icon-active;
+            box-shadow: none;
         }
 
         .#{$module}-inner-checked {
@@ -222,6 +226,15 @@ $module: #{$prefix}-checkbox;
 
             &:hover {
                 background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-hover;
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+
+            &:active {
+                background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-active;
             }
         }
 
@@ -233,6 +246,17 @@ $module: #{$prefix}-checkbox;
                 background: transparent;
             }
         }
+
+        &_checked_disabled.#{$module}-cardType  {
+            background: $color-checkbox_cardType_checked_disabled-bg;
+            border: $width-checkbox_cardType_checked_disabled-border solid $color-checkbox_cardType_checked_disabled_border-default;
+
+            &:hover {
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+        }
     }
 
     &-indeterminate,

package/checkbox/checkboxFoundation.ts

@@ -8,6 +8,9 @@ export interface BasicCheckboxEvent {
     target: BasicTargetObject;
     stopPropagation: () => void;
     preventDefault: () => void;
+    nativeEvent: {
+        stopImmediatePropagation: () => void;
+    }
 }
 export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getIsInGroup: () => boolean;
@@ -28,7 +31,7 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     init() {}
 
-    getEvent(checked: boolean, e: MouseEvent) {
+    getEvent(checked: boolean, e: any) {
         const props = this.getProps();
         const cbValue = {
             target: {
@@ -41,16 +44,23 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
             preventDefault: () => {
                 e.preventDefault();
             },
+            nativeEvent: {
+                stopImmediatePropagation: () => {
+                    if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
+                        e.nativeEvent.stopImmediatePropagation();
+                    }
+                }
+            },
         };
         return cbValue;
     }
 
-    notifyChange(checked: boolean, e: MouseEvent) {
+    notifyChange(checked: boolean, e: any) {
         const cbValue = this.getEvent(checked, e);
         this._adapter.notifyChange(cbValue);
     }
 
-    handleChange(e: MouseEvent) {
+    handleChange(e: any) {
         const disabled = this.getProp('disabled');
 
         if (disabled) {
@@ -78,7 +88,7 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
         }
     }
 
-    handleChangeInGroup(e: MouseEvent) {
+    handleChangeInGroup(e: any) {
         const { value } = this.getProps();
         const groupValue = this._adapter.getGroupValue();
         const checked = groupValue.includes(value);
@@ -97,6 +107,7 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
 }
 
 export interface BaseCheckboxProps {
+    id?: string;
     autoFocus?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;

package/checkbox/variables.scss

@@ -19,9 +19,13 @@ $color-checkbox_checked-border-default: var(--semi-color-primary); // 选框选
 $color-checkbox_checked-border-hover: var(--semi-color-primary-hover); // 选框选中态描边颜色 - 悬浮
 $color-checkbox_checked-border-active: var(--semi-color-primary-active); // 选框选中态描边颜色 - 按下
 $color-checkbox_cardType_checked-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中时的背景颜色 - 默认
+$color-checkbox_cardType_checked_disabled-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中且禁用时的背景颜色 - 默认
 $color-checkbox_cardType-bg-hover: var(--semi-color-fill-0); // 卡片类型复选框选中时的背景颜色 - 悬浮
 $color-checkbox_cardType-bg-active: var(--semi-color-fill-1); // 卡片类型复选框选中时的背景颜色 - 按下
-$color-checkbox_cardType_checked_border-default: var(--semi-color-focus-border); //卡片类型复选框选中时的边框颜色 - 默认
+$color-checkbox_cardType_checked_border-default: var(--semi-color-primary); //卡片类型复选框选中时的边框颜色 - 默认
+$color-checkbox_cardType_checked_border-hover: var(--semi-color-primary-hover); //卡片类型复选框选中时的边框颜色 - 悬浮
+$color-checkbox_cardType_checked_border-active: var(--semi-color-primary-active); //卡片类型复选框选中时的边框颜色 - 按下
+$color-checkbox_cardType_checked_disabled_border-default: var(--semi-color-primary-disabled); //卡片类型复选框选中且禁用时的边框颜色 - 默认
 $color-checkbox_cardType_addon-text-default: var(--semi-color-text-0); // 卡片类型复选框 addon 的文字颜色 - 默认
 $color-checkbox_cardType_extra-text-default: var(--semi-color-text-2); // 卡片类型复选框 extra 的文字颜色 - 默认
 $color-checkbox_cardType_inner-bg-hover: var(--semi-color-white); // 卡片类型复选框 inner 的背景颜色 - 悬浮
@@ -37,6 +41,7 @@ $size-checkbox_inner-shadow: $border-thickness-control; // 选框内描边宽度
 $width-checkbox_inner: $width-icon-medium; // 选框对勾 icon 宽度
 $height-checkbox_inner: 20px; // 选框对勾 icon 高度
 $width-checkbox_cardType_checked-border: 1px; // 卡片类型复选框的边框宽度
+$width-checkbox_cardType_checked_disabled-border: 1px; // 卡片类型复选框选中且禁用的边框宽度
 
 $radius-checkbox_cardType: 3px; // 卡片类型复选框的圆角大小
 $radius-checkbox_inner: var(--semi-border-radius-extra-small); // 选框圆角

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;
+            }
+        }
     }
 
     // 年月选择器
@@ -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/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/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;