@douyinfe/semi-foundation 2.4.1 → 2.6.0-beta.0

package/button/button.scss

@@ -23,6 +23,11 @@ $module: #{$prefix}-button;
     outline: none;
     vertical-align: middle;
     white-space: nowrap;
+
+    &:focus {
+        outline: $width-button-outline solid $color-button_primary-outline-focus;
+    }
+
     &-danger {
         background-color: $color-button_danger-bg-default;
         color: $color-button_danger-text-default;
@@ -36,6 +41,9 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_danger-bg-default;
         }
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
+            outline-color: $color-button_danger-outline-focus;
+        }
     }
     &-warning {
         background-color: $color-button_warning-bg-default;
@@ -50,6 +58,9 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_warning-bg-default;
         }
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
+            outline-color: $color-button_warning-outline-focus;
+        }
     }
     &-tertiary {
         background-color: $color-button_tertiary-bg-default;

package/button/variables.scss

@@ -10,6 +10,7 @@ $color-button_primary-text-hover: white; // 主要按钮文字颜色 - 悬浮
 $color-button_primary-bg-active: var(--semi-color-primary-active); // 主要按钮背景颜色 - 按下
 $color-button_primary-border-active: var(--semi-color-primary-active); // 主要按钮描边颜色 - 按下
 $color-button_primary-text-active: white; // 主要按钮文字颜色 - 按下
+$color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
 
 // secondary
 $color-button_secondary-bg-default: var(--semi-color-secondary); // 次要按钮背景颜色
@@ -36,6 +37,7 @@ $color-button_danger-text-hover: white; // 危险按钮文字颜色 - 悬浮
 $color-button_danger-bg-active: var(--semi-color-danger-active); // 危险按钮背景颜色 - 按下
 $color-button_danger-border-active: var(--semi-color-danger-active); // 危险按钮描边颜色 - 按下
 $color-button_danger-text-active: white; // 危险按钮文字颜色 - 按下
+$color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
 
 // warning
 $color-button_warning-bg-default: var(--semi-color-warning); // 警告按钮背景颜色
@@ -49,6 +51,7 @@ $color-button_warning-text-hover: white; // 警告按钮文字颜色 - 悬浮
 $color-button_warning-bg-active: var(--semi-color-warning-active); // 警告按钮背景颜色 - 按下
 $color-button_warning-border-active: var(--semi-color-warning-active); // 警告按钮描边颜色 - 按下
 $color-button_warning-text-active: white; // 警告按钮文字颜色 - 按下
+$color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
 
 // tertiary
 $color-button_tertiary-bg-default: var(--semi-color-tertiary); // 第三按钮背景颜色
@@ -134,3 +137,4 @@ $height-button_default: $height-control-default; // 按钮高度 - 默认
 $width-button-border: $border-thickness;  // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小
 $radius-button_group: $radius-button; // 按钮组圆角大小
+$width-button-outline: 2px; // 按钮轮廓宽度

package/cascader/cascader.scss

@@ -20,6 +20,7 @@ $module: #{$prefix}-cascader;
 
     &:hover {
         background-color: $color-cascader_default-bg-hover;
+        border: $width-cascader_hover-border $color-cascader_default-border-hover solid;
     }
 
     &-small {
@@ -110,7 +111,7 @@ $module: #{$prefix}-cascader;
         }
 
         &-tag {
-            margin: $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginX;
+            margin: $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginRight $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginLeft;
 
             &:first-child {
                 margin-left: 0;
@@ -119,7 +120,7 @@ $module: #{$prefix}-cascader;
             &-disabled.#{$prefix}-tag {
                 color: $color-cascader_input_disabled-text-default;
                 cursor: not-allowed;
-                
+
                 .#{$prefix}-tag-close {
                     color: $color-cascader_input_disabled-text-default;
                     cursor: not-allowed;

package/cascader/foundation.ts

@@ -18,6 +18,7 @@ import {
     calcMergeType
 } from './util';
 import { strings } from './constants';
+import isEnterPress from '../utils/isEnterPress';
 
 export interface BasicData {
     data: BasicCascaderData;
@@ -602,6 +603,15 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         }
     }
 
+    /**
+     * A11y: simulate selection click
+     */
+    handleSelectionEnterPress(keyboardEvent: any) {
+        if (isEnterPress(keyboardEvent)) {
+            this.handleClick(keyboardEvent);
+        }
+    }
+
     toggleHoverState(bool: boolean) {
         this._adapter.toggleHovering(bool);
     }
@@ -911,6 +921,15 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         this._adapter.rePositionDropdown();
     }
 
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress(keyboardEvent: any) {
+        if (isEnterPress(keyboardEvent)) {
+            this.handleClear();
+        }
+    }
+
     getRenderData() {
         const { keyEntities, isSearching } = this.getStates();
         const isFilterable = this._isFilterable();

package/cascader/variables.scss

@@ -1,9 +1,10 @@
 $radius-cascader: var(--semi-border-radius-small); // 级联选择菜单圆角
 
-$color-cascader_default-border-default: transparent; // 级联选择描边颜色
+$color-cascader_default-border-default: transparent; // 级联选择描边颜色 - 默认
+$color-cascader_default-border-hover: transparent; // 级联选择描边颜色 - 悬浮
+$color-cascader_default-border-focus: var(--semi-color-focus-border); // 级联选择描边颜色 - 选中
 $color-cascader_default-bg-default: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 默认
 $color-cascader_default-bg-hover: var(--semi-color-fill-1); // 级联选择菜单项背景颜色 - 悬浮
-$color-cascader_default-border-focus: var(--semi-color-focus-border); // 级联选择描边颜色 - 选中
 $color-cascader_option_list-border-default: var(--semi-color-fill-0); // 级联选择各级菜单分割线颜色
 $color-cascader_option_main-text-default: var(--semi-color-text-0); // 级联选择菜单项文字颜色
 $color-cascader_option-bg-hover: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 悬浮
@@ -43,7 +44,8 @@ $spacing-cascader_selection-paddingLeft: 12px; // 级联选择触发器左侧内
 $spacing-cascader_selection-paddingRight: 12px; // 级联选择触发器右侧内边距
 $spacing-cascader_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距
 $spacing-cascader_selection_multiple-paddingRight: $spacing-extra-tight; // 级联选择触发器多选时右侧内边距
-$spacing-cascader_selection_tag-marginX: $spacing-super-tight; // 级联选择触发器多选时标签的水平外边距
+$spacing-cascader_selection_tag-marginLeft: $spacing-none; // 级联选择触发器多选时标签的水平左外边距
+$spacing-cascader_selection_tag-marginRight: $spacing-super-tight; // 级联选择触发器多选时标签的水平右外边距
 $spacing-cascader_selection_tag-marginY: 1px; // 级联选择触发器多选时标签的垂直外边距
 $spacing-cascader_selection_tagInput-marginLeft: - $spacing-extra-tight; // 级联选择触发器多选搜索时 TagInput 的左外边距
 $spacing-cascader_selection_input-marginLeft: $spacing-extra-tight; // 级联选择触发器多选搜索时输入框的左外边距
@@ -83,6 +85,7 @@ $width-cascader:  80px; // 级联选择触发器最小宽度
 $height-cascader_default:  $height-control-default; // 级联选择触发器高度 - 默认
 $height-cascader_small: $height-control-small; // 级联选择触发器高度 - 小尺寸
 $height-cascader_large: $height-control-large; // 级联选择触发器高度 - 大尺寸
+$width-cascader_hover-border: $width-cascader-border; // 级联选择触发器描边宽度 - 悬浮
 $width-cascader_focus-border: $border-thickness-control-focus; // 级联选择触发器描边宽度 - 选中态
 $width-cascader_search-border: 1px; // 级联选择触搜索描边宽度
 $width-cascader-icon: 16px; // 级联选择图标尺寸

package/datePicker/foundation.ts

@@ -163,8 +163,8 @@ export interface DatePickerFoundationState {
     panelShow: boolean;
     isRange: boolean;
     inputValue: string;
-    value: ValueType;
-    cachedSelectedValue: ValueType;
+    value: Date[];
+    cachedSelectedValue: Date[];
     prevTimeZone: string | number;
     motionEnd: boolean;
     rangeInputFocus: 'rangeStart' | 'rangeEnd' | boolean;
@@ -185,9 +185,9 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
     notifyConfirm: DatePickerFoundationProps['onConfirm'];
     notifyOpenChange: DatePickerFoundationProps['onOpenChange'];
     notifyPresetsClick: DatePickerFoundationProps['onPresetClick'];
-    updateValue: (value: ValueType) => void;
+    updateValue: (value: Date[]) => void;
     updatePrevTimezone: (prevTimeZone: string | number) => void;
-    updateCachedSelectedValue: (cachedSelectedValue: ValueType) => void;
+    updateCachedSelectedValue: (cachedSelectedValue: Date[]) => void;
     updateInputValue: (inputValue: string) => void;
     needConfirm: () => boolean;
     typeIsYearOrMonth: () => boolean;
@@ -384,6 +384,18 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         this._adapter.notifyBlur(e);
     }
 
+    /**
+     * clear range input focus when open is controlled
+     * fixed github 1375
+     */
+    clearRangeInputFocus = () => {
+        const { type } = this._adapter.getProps();
+        const { rangeInputFocus } = this._adapter.getStates();
+        if (type === 'dateTimeRange' && rangeInputFocus) {
+            this._adapter.setRangeInputFocus(false);
+        }
+    }
+
     /**
      * Callback when the content of the input box changes
      * Update the date panel if the changed value is a legal date, otherwise only update the input box

package/datePicker/inputFoundation.ts

@@ -32,7 +32,6 @@ export interface DateInputFoundationProps extends DateInputElementProps, DateInp
     value?: ValueType;
     disabled?: boolean;
     type?: Type;
-    multiple?: boolean;
     showClear?: boolean;
     format?: string;
     inputStyle?: React.CSSProperties;

package/datePicker/monthFoundation.ts

@@ -28,6 +28,7 @@ export interface MonthFoundationProps {
     focusRecordsRef: any;
     locale: any;
     localeCode: string;
+    multiple: boolean;
 }
 
 export type MonthDayInfo = {

package/form/form.scss

@@ -8,6 +8,8 @@ $col: #{$form}-col;
 
 $checkboxGroup: #{$prefix}-checkboxGroup;
 $radioGroup: #{$prefix}-radioGroup;
+$buttonRadioGroup: #{$prefix}-radioGroup-buttonRadio;
+
 $switch: #{$prefix}-switch;
 $rating: #{$prefix}-rating;
 
@@ -154,7 +156,6 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label_posTop-paddingTop;
             padding-bottom: $spacing-form_label_posTop-paddingBottom;
         }
-
     }
 
     &[x-label-pos="left"] {
@@ -173,6 +174,11 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label-paddingTop;
             padding-bottom: $spacing-form_label-paddingTop;
         }
+        // no need to adjust height for button radio, already 32px
+        .#{$buttonRadioGroup} {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
         .#{$switch},
         .#{$rating} {
             vertical-align: middle;

package/form/foundation.ts

@@ -410,7 +410,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     }
 
     // update formState value
-    updateStateValue(field: string, value: any, opts: CallOpts): void {
+    updateStateValue(field: string, value: any, opts: CallOpts, callback?: () => void): void {
         const notNotify = opts && opts.notNotify;
         const notUpdate = opts && opts.notUpdate;
         const fieldAllowEmpty = opts && opts.fieldAllowEmpty;
@@ -442,7 +442,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         }
 
         if (!notUpdate) {
-            this._adapter.forceUpdate();
+            this._adapter.forceUpdate(callback);
         }
     }
 
@@ -455,7 +455,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     }
 
     // update formState touched
-    updateStateTouched(field: string, isTouched: boolean, opts?: CallOpts): void {
+    updateStateTouched(field: string, isTouched: boolean, opts?: CallOpts, callback?: () => void): void {
         const notNotify = opts && opts.notNotify;
         const notUpdate = opts && opts.notUpdate;
         ObjectUtil.set(this.data.touched, field, isTouched);
@@ -464,7 +464,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
             this._adapter.notifyChange(this.data);
         }
         if (!notUpdate) {
-            this._adapter.forceUpdate();
+            this._adapter.forceUpdate(callback);
         }
     }
 
@@ -477,7 +477,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     }
 
     // update formState error
-    updateStateError(field: string, error: any, opts: CallOpts): void {
+    updateStateError(field: string, error: any, opts: CallOpts, callback?: () => void): void {
         const notNotify = opts && opts.notNotify;
         const notUpdate = opts && opts.notUpdate;
         ObjectUtil.set(this.data.errors, field, error);
@@ -488,7 +488,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         }
 
         if (!notUpdate) {
-            this._adapter.forceUpdate();
+            this._adapter.forceUpdate(callback);
         }
     }
 
@@ -506,16 +506,18 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
                 // At this time, first modify formState directly, then find out the subordinate fields and drive them to update
                 // Eg: peoples: [0, 2, 3]. Each value of the peoples array corresponds to an Input Field
                 // When the user directly calls formA pi.set Value ('peoples', [2,3])
-                this.updateStateValue(field, newValue, opts);
-                let nestedFields = this._getNestedField(field);
-                if (nestedFields.size) {
-                    nestedFields.forEach(fieldStaff => {
-                        let fieldPath = fieldStaff.field;
-                        let newFieldVal = ObjectUtil.get(this.data.values, fieldPath);
-                        let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
-                        fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
-                    });
-                }
+                this.updateStateValue(field, newValue, opts, () => {
+                    let nestedFields = this._getNestedField(field);
+                    if (nestedFields.size) {
+                        nestedFields.forEach(fieldStaff => {
+                            let fieldPath = fieldStaff.field;
+                            let newFieldVal = ObjectUtil.get(this.data.values, fieldPath);
+                            let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
+                            fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
+                        });
+                    }
+                });
+
                 // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
                 if (this.getArrayField(field)) {
                     this.updateArrayField(field, { updateKey: new Date().valueOf() });
@@ -528,16 +530,17 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
             if (fieldApi) {
                 fieldApi.setError(newError, opts);
             } else {
-                this.updateStateError(field, newError, opts);
-                let nestedFields = this._getNestedField(field);
-                if (nestedFields.size) {
-                    nestedFields.forEach(fieldStaff => {
-                        let fieldPath = fieldStaff.field;
-                        let newFieldError = ObjectUtil.get(this.data.errors, fieldPath);
-                        let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
-                        fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
-                    });
-                }
+                this.updateStateError(field, newError, opts, () => {
+                    let nestedFields = this._getNestedField(field);
+                    if (nestedFields.size) {
+                        nestedFields.forEach(fieldStaff => {
+                            let fieldPath = fieldStaff.field;
+                            let newFieldError = ObjectUtil.get(this.data.errors, fieldPath);
+                            let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
+                            fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
+                        });
+                    }
+                });
                 if (this.getArrayField(field)) {
                     this.updateArrayField(field, { updateKey: new Date().valueOf() });
                 }
@@ -549,16 +552,17 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
             if (fieldApi) {
                 fieldApi.setTouched(isTouched, opts);
             } else {
-                this.updateStateTouched(field, isTouched, opts);
-                let nestedFields = this._getNestedField(field);
-                if (nestedFields.size) {
-                    nestedFields.forEach(fieldStaff => {
-                        let fieldPath = fieldStaff.field;
-                        let newFieldTouch = ObjectUtil.get(this.data.touched, fieldPath);
-                        let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
-                        fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
-                    });
-                }
+                this.updateStateTouched(field, isTouched, opts, () => {
+                    let nestedFields = this._getNestedField(field);
+                    if (nestedFields.size) {
+                        nestedFields.forEach(fieldStaff => {
+                            let fieldPath = fieldStaff.field;
+                            let newFieldTouch = ObjectUtil.get(this.data.touched, fieldPath);
+                            let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
+                            fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
+                        });
+                    }
+                });
                 if (this.getArrayField(field)) {
                     this.updateArrayField(field, { updateKey: new Date().valueOf() });
                 }

package/form/interface.ts

@@ -12,7 +12,7 @@ export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any
     cloneDeep: (val: any, ...rest: any[]) => any;
     notifySubmit: (values: any) => void;
     notifySubmitFail: (errors: Record<string, any>, values: any) => void;
-    forceUpdate: () => void;
+    forceUpdate: (callback?: () => void) => void;
     notifyChange: (formState: FormState) => void;
     notifyValueChange: (values: any, changedValues: any) => void;
     notifyReset: () => void;

package/input/input.scss

@@ -382,7 +382,8 @@ $module: #{$prefix}-input;
         // border: $border-thickness-control $color-input_disabled-border-default solid;
         color: $color-input_disabled-text-default;
         background-color: $color-input_disabled-bg-default;
-
+        // fix issue 670 in safari
+        -webkit-text-fill-color: $color-input_disabled-text-default;
         &:hover {
             background-color: $color-input_disabled-bg-default;
         }

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

@@ -3,7 +3,7 @@ declare const cssClasses: {
 };
 declare const strings: {
     readonly SIZE: readonly ["small", "large", "default"];
-    readonly POSITION: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver"];
+    readonly POSITION: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver", "leftBottomOver", "rightBottomOver"];
     readonly OPTIONS: readonly ["children", "value"];
     readonly STATUS: readonly ["default", "error", "warning", "success"];
 };

package/lib/cjs/button/button.css

@@ -44,6 +44,9 @@
   vertical-align: middle;
   white-space: nowrap;
 }
+.semi-button:focus {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-button-danger {
   background-color: var(--semi-color-danger);
   color: white;
@@ -57,6 +60,9 @@
 .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-borderless {
   color: var(--semi-color-danger);
 }
+.semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus {
+  outline-color: var(--semi-color-danger-light-active);
+}
 .semi-button-warning {
   background-color: var(--semi-color-warning);
   color: white;
@@ -70,6 +76,9 @@
 .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-borderless {
   color: var(--semi-color-warning);
 }
+.semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus {
+  outline-color: var(--semi-color-warning-light-active);
+}
 .semi-button-tertiary {
   background-color: var(--semi-color-tertiary);
   color: white;

package/lib/cjs/button/button.scss

@@ -23,6 +23,11 @@ $module: #{$prefix}-button;
     outline: none;
     vertical-align: middle;
     white-space: nowrap;
+
+    &:focus {
+        outline: $width-button-outline solid $color-button_primary-outline-focus;
+    }
+
     &-danger {
         background-color: $color-button_danger-bg-default;
         color: $color-button_danger-text-default;
@@ -36,6 +41,9 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_danger-bg-default;
         }
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
+            outline-color: $color-button_danger-outline-focus;
+        }
     }
     &-warning {
         background-color: $color-button_warning-bg-default;
@@ -50,6 +58,9 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_warning-bg-default;
         }
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
+            outline-color: $color-button_warning-outline-focus;
+        }
     }
     &-tertiary {
         background-color: $color-button_tertiary-bg-default;

package/lib/cjs/button/variables.scss

@@ -10,6 +10,7 @@ $color-button_primary-text-hover: white; // 主要按钮文字颜色 - 悬浮
 $color-button_primary-bg-active: var(--semi-color-primary-active); // 主要按钮背景颜色 - 按下
 $color-button_primary-border-active: var(--semi-color-primary-active); // 主要按钮描边颜色 - 按下
 $color-button_primary-text-active: white; // 主要按钮文字颜色 - 按下
+$color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
 
 // secondary
 $color-button_secondary-bg-default: var(--semi-color-secondary); // 次要按钮背景颜色
@@ -36,6 +37,7 @@ $color-button_danger-text-hover: white; // 危险按钮文字颜色 - 悬浮
 $color-button_danger-bg-active: var(--semi-color-danger-active); // 危险按钮背景颜色 - 按下
 $color-button_danger-border-active: var(--semi-color-danger-active); // 危险按钮描边颜色 - 按下
 $color-button_danger-text-active: white; // 危险按钮文字颜色 - 按下
+$color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
 
 // warning
 $color-button_warning-bg-default: var(--semi-color-warning); // 警告按钮背景颜色
@@ -49,6 +51,7 @@ $color-button_warning-text-hover: white; // 警告按钮文字颜色 - 悬浮
 $color-button_warning-bg-active: var(--semi-color-warning-active); // 警告按钮背景颜色 - 按下
 $color-button_warning-border-active: var(--semi-color-warning-active); // 警告按钮描边颜色 - 按下
 $color-button_warning-text-active: white; // 警告按钮文字颜色 - 按下
+$color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
 
 // tertiary
 $color-button_tertiary-bg-default: var(--semi-color-tertiary); // 第三按钮背景颜色
@@ -134,3 +137,4 @@ $height-button_default: $height-control-default; // 按钮高度 - 默认
 $width-button-border: $border-thickness;  // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小
 $radius-button_group: $radius-button; // 按钮组圆角大小
+$width-button-outline: 2px; // 按钮轮廓宽度

package/lib/cjs/cascader/cascader.css

@@ -19,6 +19,7 @@
 }
 .semi-cascader:hover {
   background-color: var(--semi-color-fill-1);
+  border: 1px transparent solid;
 }
 .semi-cascader-small {
   min-height: 24px;
@@ -94,7 +95,7 @@
   color: var(--semi-color-text-2);
 }
 .semi-cascader-selection-tag {
-  margin: 1px 2px;
+  margin: 1px 2px 1px 0;
 }
 .semi-cascader-selection-tag:first-child {
   margin-left: 0;

package/lib/cjs/cascader/cascader.scss

@@ -20,6 +20,7 @@ $module: #{$prefix}-cascader;
 
     &:hover {
         background-color: $color-cascader_default-bg-hover;
+        border: $width-cascader_hover-border $color-cascader_default-border-hover solid;
     }
 
     &-small {
@@ -110,7 +111,7 @@ $module: #{$prefix}-cascader;
         }
 
         &-tag {
-            margin: $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginX;
+            margin: $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginRight $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginLeft;
 
             &:first-child {
                 margin-left: 0;
@@ -119,7 +120,7 @@ $module: #{$prefix}-cascader;
             &-disabled.#{$prefix}-tag {
                 color: $color-cascader_input_disabled-text-default;
                 cursor: not-allowed;
-                
+
                 .#{$prefix}-tag-close {
                     color: $color-cascader_input_disabled-text-default;
                     cursor: not-allowed;

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

@@ -193,6 +193,10 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     handleShowNextByHover(item: BasicEntity): void;
     onItemCheckboxClick(item: BasicEntity | BasicData): void;
     handleClick(e: any): void;
+    /**
+     * A11y: simulate selection click
+     */
+    handleSelectionEnterPress(keyboardEvent: any): void;
     toggleHoverState(bool: boolean): void;
     _defaultRenderText(path: any[], displayRender?: BasicCascaderProps['displayRender']): any;
     renderDisplayText(targetKey: string, keyEntities?: BasicEntities): any;
@@ -201,6 +205,17 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     handleSingleSelect(e: any, item: BasicEntity | BasicData): void;
     _handleMultipleSelect(item: BasicEntity | BasicData): void;
     calcNonDisabedCheckedKeys(eventKey: string, targetStatus: boolean): {
+        /**
+         * The typical scenario is: suppose we select the 0-0 node, at this time
+         *  selectedKeys=Set('0-0'), the input box will display a 0-0 label. When
+         *  treeData is updated, assuming 0-0 does not exist in treeData at this
+         *  time, then selectedKeys=Set('not-exist-0-0'), at this time the input
+         *  box displays 0-0, which means not-exist -After the content. When treeData
+         *  is updated again, assuming that 0-0 exists in treeData at this time,
+         *  then selectedKeys=Set('0-0'), and the input box displays a label of
+         *  0-0 at this time. The operation done here is for the 0-0 label to be
+         *  displayed normally after the second update in the example.
+         */
         checkedKeys: Set<string>;
         halfCheckedKeys: Set<any>;
     };
@@ -217,6 +232,10 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     };
     handleInputChange(sugInput: string): void;
     handleClear(): void;
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress(keyboardEvent: any): void;
     getRenderData(): BasicEntity[] | BasicData[];
     getFilteredData(): BasicData[];
     handleListScroll(e: any, ind: number): void;

package/lib/cjs/cascader/foundation.js

@@ -64,6 +64,8 @@ var _util = require("./util");
 
 var _constants = require("./constants");
 
+var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
+
 // eslint-disable-next-line max-len
 class CascaderFoundation extends _foundation.default {
   constructor(adapter) {
@@ -564,6 +566,16 @@ class CascaderFoundation extends _foundation.default {
       this.close(e);
     }
   }
+  /**
+   * A11y: simulate selection click
+   */
+
+
+  handleSelectionEnterPress(keyboardEvent) {
+    if ((0, _isEnterPress.default)(keyboardEvent)) {
+      this.handleClick(keyboardEvent);
+    }
+  }
 
   toggleHoverState(bool) {
     this._adapter.toggleHovering(bool);
@@ -986,6 +998,16 @@ class CascaderFoundation extends _foundation.default {
 
     this._adapter.rePositionDropdown();
   }
+  /**
+   * A11y: simulate clear button click
+   */
+
+
+  handleClearEnterPress(keyboardEvent) {
+    if ((0, _isEnterPress.default)(keyboardEvent)) {
+      this.handleClear();
+    }
+  }
 
   getRenderData() {
     var _context9, _context10;