@douyinfe/semi-foundation 2.37.0 → 2.37.2

package/cascader/cascader.scss

@@ -25,7 +25,7 @@ $module: #{$prefix}-cascader;
         border: $width-cascader_hover-border $color-cascader_default-border-hover solid;
     }
 
-    &:focus {
+    &:focus:not(&-disabled) {
         border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
         background-color: $color-cascader_default-bg-default;
         outline: 0;

package/lib/cjs/cascader/cascader.css

@@ -21,7 +21,7 @@
   background-color: var(--semi-color-fill-1);
   border: 1px transparent solid;
 }
-.semi-cascader:focus {
+.semi-cascader:focus:not(.semi-cascader-disabled) {
   border: 1px solid var(--semi-color-focus-border);
   background-color: var(--semi-color-fill-0);
   outline: 0;

package/lib/cjs/cascader/cascader.scss

@@ -25,7 +25,7 @@ $module: #{$prefix}-cascader;
         border: $width-cascader_hover-border $color-cascader_default-border-hover solid;
     }
 
-    &:focus {
+    &:focus:not(&-disabled) {
         border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
         background-color: $color-cascader_default-bg-default;
         outline: 0;

package/lib/cjs/radio/radio.scss

@@ -107,8 +107,8 @@ $inner-width: $width-icon-medium;
         flex-wrap: nowrap;
         border-radius: $radius-radio_cardRadioGroup;
         padding: $spacing-radio_cardRadioGroup-paddingY $spacing-radio_cardRadioGroup-paddingX;
-        background: transparent;
-        border: $width-radio_cardRadioGroup_checked-border solid transparent;
+        background: $color-radio_cardRadioGroup-bg-default;
+        border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_border-default;
         transition: background-color $transition_duration_radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
         border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
@@ -172,7 +172,7 @@ $inner-width: $width-icon-medium;
 
         &_disabled {
             &:active {
-                background: transparent;
+                background: $color-radio_cardRadioGroup_disabled-bg-active;
             }
         }
 

package/lib/cjs/radio/variables.scss

@@ -32,10 +32,13 @@ $color-radio_buttonRadio-text-disabled: var(--semi-color-disabled-text); // 按
 $color-radio_addon_buttonRadio-bg-hover: var(--semi-color-fill-1); // 按钮样式单选悬浮态背景色
 $color-radio_addon_buttonRadio-text-checked: var(--semi-color-primary); // 按钮样式单选选中项文字颜色
 $color-radio_addon_buttonRadio-bg-checked: var(--semi-color-bg-3); // 按钮样式单选选中项背景颜色
+$color-radio_cardRadioGroup-bg-default: transparent; // 卡片样式单选默认背景色
 $color-radio_cardRadioGroup-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中态背景色
 $color-radio_cardRadioGroup_disabled-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中且禁用时的背景色
+$color-radio_cardRadioGroup_disabled-bg-active: transparent; // 卡片样式单选禁用时的背景色 - 按下态
 $color-radio_cardRadioGroup-bg-hover: var(--semi-color-fill-0); // 卡片样式单选悬浮态背景色
 $color-radio_cardRadioGroup-bg-active: var(--semi-color-fill-1); // 卡片样式单选按下态背景色
+$color-radio_cardRadioGroup_border-default: transparent; // 卡片样式单选默认描边颜色
 $color-radio_cardRadioGroup_border-active: var(--semi-color-primary); // 卡片样式单选选中态描边颜色
 $color-radio_cardRadioGroup_checked_border-active: var(--semi-color-primary-active); // 卡片样式单选选中态描边颜色 - 按下态
 $color-radio_cardRadioGroup_checked_border-hover: var(--semi-color-primary-hover); // 卡片样式单选选中态描边颜色 - 悬浮态

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

@@ -135,7 +135,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     focusInput(bool: boolean): void;
     _notifyMultipleChange(key: string[], e: any): void;
     _notifyChange(key: any, e: any): void;
-    _registerClickOutsideHandler: (e: any) => void;
+    _registerClickOutsideHandler: () => void;
     _notifyFocus(e: any): void;
     handleTriggerFocus(e: any): void;
     _notifyBlur(e: any): void;

package/lib/cjs/treeSelect/foundation.js

@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 class TreeSelectFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-    this._registerClickOutsideHandler = e => {
+    this._registerClickOutsideHandler = () => {
       this._adapter.registerClickOutsideHandler(e => {
         this.handlerTriggerBlur(e);
         this.close(e);
@@ -37,11 +37,13 @@ class TreeSelectFoundation extends _foundation.default {
     const triggerSearch = searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER && filterTreeNode;
     const triggerSearchAutoFocus = searchAutoFocus && triggerSearch;
     this._setDropdownWidth();
-    const isOpen = (this.getProp('defaultOpen') || triggerSearchAutoFocus) && !this._isDisabled();
+    const able = !this._isDisabled();
+    const isOpen = (this.getProp('defaultOpen') || triggerSearchAutoFocus) && able;
     if (isOpen) {
       this.open();
+      this._registerClickOutsideHandler();
     }
-    if (triggerSearchAutoFocus) {
+    if (triggerSearchAutoFocus && able) {
       this.handleTriggerFocus(null);
     }
   }
@@ -272,7 +274,7 @@ class TreeSelectFoundation extends _foundation.default {
   handleTriggerFocus(e) {
     this._adapter.updateIsFocus(true);
     this._notifyFocus(e);
-    this._registerClickOutsideHandler(e);
+    this._registerClickOutsideHandler();
   }
   // Scenes that may trigger blur
   //  1、clickOutSide
@@ -282,6 +284,10 @@ class TreeSelectFoundation extends _foundation.default {
     this._adapter.notifyBlur(e);
   }
   handlerTriggerBlur(e) {
+    const isFocus = this.getState('isFocus');
+    if (!isFocus) {
+      return;
+    }
     this._adapter.updateIsFocus(false);
     this._notifyBlur(e);
     this._adapter.unregisterClickOutsideHandler();

package/lib/es/cascader/cascader.css

@@ -21,7 +21,7 @@
   background-color: var(--semi-color-fill-1);
   border: 1px transparent solid;
 }
-.semi-cascader:focus {
+.semi-cascader:focus:not(.semi-cascader-disabled) {
   border: 1px solid var(--semi-color-focus-border);
   background-color: var(--semi-color-fill-0);
   outline: 0;

package/lib/es/cascader/cascader.scss

@@ -25,7 +25,7 @@ $module: #{$prefix}-cascader;
         border: $width-cascader_hover-border $color-cascader_default-border-hover solid;
     }
 
-    &:focus {
+    &:focus:not(&-disabled) {
         border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
         background-color: $color-cascader_default-bg-default;
         outline: 0;

package/lib/es/radio/radio.scss

@@ -107,8 +107,8 @@ $inner-width: $width-icon-medium;
         flex-wrap: nowrap;
         border-radius: $radius-radio_cardRadioGroup;
         padding: $spacing-radio_cardRadioGroup-paddingY $spacing-radio_cardRadioGroup-paddingX;
-        background: transparent;
-        border: $width-radio_cardRadioGroup_checked-border solid transparent;
+        background: $color-radio_cardRadioGroup-bg-default;
+        border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_border-default;
         transition: background-color $transition_duration_radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
         border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
@@ -172,7 +172,7 @@ $inner-width: $width-icon-medium;
 
         &_disabled {
             &:active {
-                background: transparent;
+                background: $color-radio_cardRadioGroup_disabled-bg-active;
             }
         }
 

package/lib/es/radio/variables.scss

@@ -32,10 +32,13 @@ $color-radio_buttonRadio-text-disabled: var(--semi-color-disabled-text); // 按
 $color-radio_addon_buttonRadio-bg-hover: var(--semi-color-fill-1); // 按钮样式单选悬浮态背景色
 $color-radio_addon_buttonRadio-text-checked: var(--semi-color-primary); // 按钮样式单选选中项文字颜色
 $color-radio_addon_buttonRadio-bg-checked: var(--semi-color-bg-3); // 按钮样式单选选中项背景颜色
+$color-radio_cardRadioGroup-bg-default: transparent; // 卡片样式单选默认背景色
 $color-radio_cardRadioGroup-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中态背景色
 $color-radio_cardRadioGroup_disabled-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中且禁用时的背景色
+$color-radio_cardRadioGroup_disabled-bg-active: transparent; // 卡片样式单选禁用时的背景色 - 按下态
 $color-radio_cardRadioGroup-bg-hover: var(--semi-color-fill-0); // 卡片样式单选悬浮态背景色
 $color-radio_cardRadioGroup-bg-active: var(--semi-color-fill-1); // 卡片样式单选按下态背景色
+$color-radio_cardRadioGroup_border-default: transparent; // 卡片样式单选默认描边颜色
 $color-radio_cardRadioGroup_border-active: var(--semi-color-primary); // 卡片样式单选选中态描边颜色
 $color-radio_cardRadioGroup_checked_border-active: var(--semi-color-primary-active); // 卡片样式单选选中态描边颜色 - 按下态
 $color-radio_cardRadioGroup_checked_border-hover: var(--semi-color-primary-hover); // 卡片样式单选选中态描边颜色 - 悬浮态

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

@@ -135,7 +135,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     focusInput(bool: boolean): void;
     _notifyMultipleChange(key: string[], e: any): void;
     _notifyChange(key: any, e: any): void;
-    _registerClickOutsideHandler: (e: any) => void;
+    _registerClickOutsideHandler: () => void;
     _notifyFocus(e: any): void;
     handleTriggerFocus(e: any): void;
     _notifyBlur(e: any): void;

package/lib/es/treeSelect/foundation.js

@@ -14,7 +14,7 @@ import isEnterPress from '../utils/isEnterPress';
 export default class TreeSelectFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-    this._registerClickOutsideHandler = e => {
+    this._registerClickOutsideHandler = () => {
       this._adapter.registerClickOutsideHandler(e => {
         this.handlerTriggerBlur(e);
         this.close(e);
@@ -30,11 +30,13 @@ export default class TreeSelectFoundation extends BaseFoundation {
     const triggerSearch = searchPosition === strings.SEARCH_POSITION_TRIGGER && filterTreeNode;
     const triggerSearchAutoFocus = searchAutoFocus && triggerSearch;
     this._setDropdownWidth();
-    const isOpen = (this.getProp('defaultOpen') || triggerSearchAutoFocus) && !this._isDisabled();
+    const able = !this._isDisabled();
+    const isOpen = (this.getProp('defaultOpen') || triggerSearchAutoFocus) && able;
     if (isOpen) {
       this.open();
+      this._registerClickOutsideHandler();
     }
-    if (triggerSearchAutoFocus) {
+    if (triggerSearchAutoFocus && able) {
       this.handleTriggerFocus(null);
     }
   }
@@ -265,7 +267,7 @@ export default class TreeSelectFoundation extends BaseFoundation {
   handleTriggerFocus(e) {
     this._adapter.updateIsFocus(true);
     this._notifyFocus(e);
-    this._registerClickOutsideHandler(e);
+    this._registerClickOutsideHandler();
   }
   // Scenes that may trigger blur
   //  1、clickOutSide
@@ -275,6 +277,10 @@ export default class TreeSelectFoundation extends BaseFoundation {
     this._adapter.notifyBlur(e);
   }
   handlerTriggerBlur(e) {
+    const isFocus = this.getState('isFocus');
+    if (!isFocus) {
+      return;
+    }
     this._adapter.updateIsFocus(false);
     this._notifyBlur(e);
     this._adapter.unregisterClickOutsideHandler();

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.37.0",
+    "version": "2.37.2",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.12.0",
+        "@douyinfe/semi-animation": "2.37.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "3d2a2680186785f167b1bb0f9c719a2945c3c1f0",
+    "gitHead": "a60ba17cdb9b16ace637706583ea31dbf3a6a255",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/radio/radio.scss

@@ -107,8 +107,8 @@ $inner-width: $width-icon-medium;
         flex-wrap: nowrap;
         border-radius: $radius-radio_cardRadioGroup;
         padding: $spacing-radio_cardRadioGroup-paddingY $spacing-radio_cardRadioGroup-paddingX;
-        background: transparent;
-        border: $width-radio_cardRadioGroup_checked-border solid transparent;
+        background: $color-radio_cardRadioGroup-bg-default;
+        border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_border-default;
         transition: background-color $transition_duration_radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
         border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
@@ -172,7 +172,7 @@ $inner-width: $width-icon-medium;
 
         &_disabled {
             &:active {
-                background: transparent;
+                background: $color-radio_cardRadioGroup_disabled-bg-active;
             }
         }
 

package/radio/radioFoundation.ts

@@ -32,7 +32,7 @@ export default class RadioFoundation extends BaseFoundation<RadioAdapter> {
             if (target.matches(':focus-visible')) {
                 this._adapter.setFocusVisible(true);
             }
-        } catch (error){
+        } catch (error) {
             warning(true, 'Warning: [Semi Radio] The current browser does not support the focus-visible');
         }
     }

package/radio/variables.scss

@@ -32,10 +32,13 @@ $color-radio_buttonRadio-text-disabled: var(--semi-color-disabled-text); // 按
 $color-radio_addon_buttonRadio-bg-hover: var(--semi-color-fill-1); // 按钮样式单选悬浮态背景色
 $color-radio_addon_buttonRadio-text-checked: var(--semi-color-primary); // 按钮样式单选选中项文字颜色
 $color-radio_addon_buttonRadio-bg-checked: var(--semi-color-bg-3); // 按钮样式单选选中项背景颜色
+$color-radio_cardRadioGroup-bg-default: transparent; // 卡片样式单选默认背景色
 $color-radio_cardRadioGroup-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中态背景色
 $color-radio_cardRadioGroup_disabled-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中且禁用时的背景色
+$color-radio_cardRadioGroup_disabled-bg-active: transparent; // 卡片样式单选禁用时的背景色 - 按下态
 $color-radio_cardRadioGroup-bg-hover: var(--semi-color-fill-0); // 卡片样式单选悬浮态背景色
 $color-radio_cardRadioGroup-bg-active: var(--semi-color-fill-1); // 卡片样式单选按下态背景色
+$color-radio_cardRadioGroup_border-default: transparent; // 卡片样式单选默认描边颜色
 $color-radio_cardRadioGroup_border-active: var(--semi-color-primary); // 卡片样式单选选中态描边颜色
 $color-radio_cardRadioGroup_checked_border-active: var(--semi-color-primary-active); // 卡片样式单选选中态描边颜色 - 按下态
 $color-radio_cardRadioGroup_checked_border-hover: var(--semi-color-primary-hover); // 卡片样式单选选中态描边颜色 - 悬浮态

package/treeSelect/foundation.ts

@@ -212,11 +212,13 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         const triggerSearch = searchPosition === strings.SEARCH_POSITION_TRIGGER && filterTreeNode;
         const triggerSearchAutoFocus = searchAutoFocus && triggerSearch;
         this._setDropdownWidth();
-        const isOpen = (this.getProp('defaultOpen') || triggerSearchAutoFocus) && !this._isDisabled();
+        const able = !this._isDisabled();
+        const isOpen = (this.getProp('defaultOpen') || triggerSearchAutoFocus) && able;
         if (isOpen) {
             this.open();
+            this._registerClickOutsideHandler();
         }
-        if (triggerSearchAutoFocus) {
+        if (triggerSearchAutoFocus && able) {
             this.handleTriggerFocus(null);
         }
     }
@@ -433,7 +435,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         }
     }
 
-    _registerClickOutsideHandler = (e) => {
+    _registerClickOutsideHandler = () => {
         this._adapter.registerClickOutsideHandler(e => {
             this.handlerTriggerBlur(e);
             this.close(e);
@@ -449,7 +451,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     handleTriggerFocus(e: any) {
         this._adapter.updateIsFocus(true);
         this._notifyFocus(e);
-        this._registerClickOutsideHandler(e);
+        this._registerClickOutsideHandler();
     }
 
     // Scenes that may trigger blur
@@ -461,6 +463,10 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     }
 
     handlerTriggerBlur(e) {
+        const isFocus = this.getState('isFocus');
+        if (!isFocus) {
+            return;
+        }
         this._adapter.updateIsFocus(false);
         this._notifyBlur(e);
         this._adapter.unregisterClickOutsideHandler();