@douyinfe/semi-foundation 2.36.0 → 2.37.0

package/datePicker/datePicker.scss

@@ -993,13 +993,16 @@ $module-list: #{$prefix}-scrolllist;
             &:hover {
                 .#{$module}-range-input-clearbtn {
                     display: flex;
-                    color: $color-datepicker_range_input_clearbtn-icon-hover;
                     cursor: pointer;
                 }
 
                 .#{$module}-range-input-clearbtn ~ .#{$module}-range-input-suffix {
                     display: none;
                 }
+
+                .#{$module}-range-input-clearbtn:hover {
+                    color: $color-datepicker_range_input_clearbtn-icon-hover;
+                }
             }
 
             &-disabled {

package/datePicker/foundation.ts

@@ -617,9 +617,11 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         const inputValue = '';
         if (!this._isControlledComponent('value')) {
             this._updateValueAndInput(value, true, inputValue);
+            this._adapter.updateInsetInputValue(null);
             this.resetCachedSelectedValue(value);
         }
         this._notifyChange(value);
+        this._adapter.setRangeInputFocus(false);
         this._adapter.notifyClear(e);
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function

package/datePicker/inputFoundation.ts

@@ -261,6 +261,7 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
             case 'dateTime':
             case 'dateTimeRange':
                 [datePlaceholder, timePlaceholder] = insetInputFormat.split(' ');
+                break;
             case 'monthRange':
                 datePlaceholder = insetInputFormat + rangeSeparator + insetInputFormat;
                 break;

package/dropdown/foundation.ts

@@ -13,7 +13,7 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
         this._adapter.notifyVisibleChange(visible);
 
         const { trigger } = this.getProps();
-        if (visible && trigger === "click"){
+        if (visible && trigger === "click") {
             const popupId = this._adapter.getPopupId();
             this.setFocusToFirstMenuItem(popupId);
         }
@@ -37,6 +37,7 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
 
     handleKeyDown(event: any): void {
         const id = event.target?.attributes['data-popupid']?.value;
+        const { visible } = this._adapter.getStates();
         switch (event.key) {
             case ' ':
             case 'Enter':
@@ -46,11 +47,11 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
                 break;
             case 'ArrowDown':
                 this.setFocusToFirstMenuItem(id);
-                handlePrevent(event);
+                visible && handlePrevent(event);
                 break;
             case 'ArrowUp':
                 this.setFocusToLastMenuItem(id);
-                handlePrevent(event);
+                visible && handlePrevent(event);
                 break;
             default:
                 break;

package/input/foundation.ts

@@ -270,8 +270,8 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
 
     isAllowClear() {
         const { value, isFocus, isHovering } = this._adapter.getStates();
-        const { showClear, disabled } = this._adapter.getProps();
-        const allowClear = value && showClear && !disabled && (isFocus || isHovering);
+        const { showClear, disabled, showClearIgnoreDisabled } = this._adapter.getProps();
+        const allowClear = value && showClear && (!disabled || showClearIgnoreDisabled) && (isFocus || isHovering);
         return allowClear;
     }
 

package/lib/cjs/datePicker/datePicker.css

@@ -664,12 +664,14 @@
 }
 .semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn {
   display: flex;
-  color: var(--semi-color-primary-hover);
   cursor: pointer;
 }
 .semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn ~ .semi-datepicker-range-input-suffix {
   display: none;
 }
+.semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn:hover {
+  color: var(--semi-color-primary-hover);
+}
 .semi-datepicker-range-input-disabled {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);

package/lib/cjs/datePicker/datePicker.scss

@@ -993,13 +993,16 @@ $module-list: #{$prefix}-scrolllist;
             &:hover {
                 .#{$module}-range-input-clearbtn {
                     display: flex;
-                    color: $color-datepicker_range_input_clearbtn-icon-hover;
                     cursor: pointer;
                 }
 
                 .#{$module}-range-input-clearbtn ~ .#{$module}-range-input-suffix {
                     display: none;
                 }
+
+                .#{$module}-range-input-clearbtn:hover {
+                    color: $color-datepicker_range_input_clearbtn-icon-hover;
+                }
             }
 
             &-disabled {

package/lib/cjs/datePicker/foundation.js

@@ -434,9 +434,11 @@ class DatePickerFoundation extends _foundation.default {
     const inputValue = '';
     if (!this._isControlledComponent('value')) {
       this._updateValueAndInput(value, true, inputValue);
+      this._adapter.updateInsetInputValue(null);
       this.resetCachedSelectedValue(value);
     }
     this._notifyChange(value);
+    this._adapter.setRangeInputFocus(false);
     this._adapter.notifyClear(e);
   }
   // eslint-disable-next-line @typescript-eslint/no-empty-function

package/lib/cjs/datePicker/inputFoundation.js

@@ -216,6 +216,7 @@ class InputFoundation extends _foundation.default {
       case 'dateTime':
       case 'dateTimeRange':
         [datePlaceholder, timePlaceholder] = insetInputFormat.split(' ');
+        break;
       case 'monthRange':
         datePlaceholder = insetInputFormat + rangeSeparator + insetInputFormat;
         break;

package/lib/cjs/dropdown/foundation.js

@@ -35,6 +35,9 @@ class DropdownFoundation extends _foundation.default {
   handleKeyDown(event) {
     var _a, _b;
     const id = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.attributes['data-popupid']) === null || _b === void 0 ? void 0 : _b.value;
+    const {
+      visible
+    } = this._adapter.getStates();
     switch (event.key) {
       case ' ':
       case 'Enter':
@@ -44,11 +47,11 @@ class DropdownFoundation extends _foundation.default {
         break;
       case 'ArrowDown':
         this.setFocusToFirstMenuItem(id);
-        (0, _a11y.handlePrevent)(event);
+        visible && (0, _a11y.handlePrevent)(event);
         break;
       case 'ArrowUp':
         this.setFocusToLastMenuItem(id);
-        (0, _a11y.handlePrevent)(event);
+        visible && (0, _a11y.handlePrevent)(event);
         break;
       default:
         break;

package/lib/cjs/input/foundation.js

@@ -261,9 +261,10 @@ class InputFoundation extends _foundation.default {
     } = this._adapter.getStates();
     const {
       showClear,
-      disabled
+      disabled,
+      showClearIgnoreDisabled
     } = this._adapter.getProps();
-    const allowClear = value && showClear && !disabled && (isFocus || isHovering);
+    const allowClear = value && showClear && (!disabled || showClearIgnoreDisabled) && (isFocus || isHovering);
     return allowClear;
   }
   handleClickPrefixOrSuffix(e) {

package/lib/cjs/notification/notification.css

@@ -105,14 +105,18 @@
   font-weight: 600;
   color: var(--semi-color-text-0);
   margin-bottom: 4px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .semi-notification-notice-inner {
   display: flex;
   width: 100%;
+  min-width: 0;
 }
 .semi-notification-notice-content-wrapper {
   flex: 1 1 auto;
   margin-right: 8px;
+  min-width: 0;
 }
 .semi-notification-notice-content {
   font-size: 14px;
@@ -120,6 +124,8 @@
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 400;
   color: var(--semi-color-text-1);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .semi-notification-notice-icon-close {
   height: 24px;

package/lib/cjs/notification/notification.scss

@@ -123,16 +123,21 @@ $module: #{$prefix}-notification;
             font-weight: $font-notification_notice_title-fontWeight;
             color: $color-notification_title-text;
             margin-bottom: $spacing-notification_notice_title-marginBottom;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
 
         &-inner {
             display: flex;
             width: 100%;
+            min-width: 0;
         }
 
         &-content-wrapper {
             flex: 1 1 auto;
             margin-right: $spacing-notification_notice_content_wrapper-marginRight;
+            min-width: 0;
         }
 
         &-content {
@@ -140,6 +145,9 @@ $module: #{$prefix}-notification;
             font-weight: $font-notification_notice_content-fontWeight;
             color: $color-notification_content-text;
             // padding-top: $spacing-extra-tight;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
 
         &-icon-close {

package/lib/cjs/pagination/pagination.css

@@ -18,6 +18,12 @@
   color: var(--semi-color-text-2);
   padding: 0 0;
 }
+.semi-page-disabled {
+  cursor: not-allowed;
+}
+.semi-page-disabled .semi-page-total {
+  color: var(--semi-color-disabled-text);
+}
 .semi-page-item {
   font-size: 14px;
   line-height: 20px;
@@ -78,6 +84,23 @@
   min-width: 44px;
   margin: 0;
 }
+.semi-page-item-all-disabled {
+  border-color: transparent;
+  color: var(--semi-color-disabled-text);
+  background-color: transparent;
+  cursor: not-allowed;
+}
+.semi-page-item-all-disabled:hover {
+  background-color: transparent;
+  color: var(--semi-color-disabled-text);
+}
+.semi-page-item-all-disabled-active {
+  background-color: var(--semi-color-disabled-fill);
+  font-weight: 600;
+}
+.semi-page-item-all-disabled-active:hover {
+  background-color: var(--semi-color-disabled-fill);
+}
 .semi-page-total {
   font-size: 14px;
   line-height: 20px;

package/lib/cjs/pagination/pagination.scss

@@ -20,6 +20,14 @@ $module: #{$prefix}-page;
         padding: $spacing-pagination_small-paddingY $spacing-pagination_small-paddingX;
     }
 
+    &-disabled {
+        cursor: not-allowed;
+
+        .#{$module}-total {
+            color: $color-pagination_item-text-disabled;
+        }
+    }
+
     &-item {
         @include font-size-regular;
         min-width: $width-pagination_item-minWidth;
@@ -86,6 +94,27 @@ $module: #{$prefix}-page;
             min-width: $width-pagination_item_small-minWidth;
             margin: $spacing-pagination_item_small-margin;
         }
+
+        &-all-disabled {
+            border-color: $color-pagination_item-border-disabled;
+            color: $color-pagination_item-text-disabled;
+            background-color: $color-pagination_item-bg-disabled;
+            cursor: not-allowed;
+    
+            &:hover {
+                background-color: transparent;
+                color: $color-pagination_item-text-disabled;
+            }
+
+            &-active {
+                background-color: $color-pagination_item-bg-selected-disabled;
+                font-weight: $font-pagination_item_active-fontWeight;
+
+                &:hover {
+                    background-color: $color-pagination_item-bg-selected-disabled;
+                }
+            }
+        }
     }
 
     &-total {

package/lib/cjs/pagination/variables.scss

@@ -10,6 +10,7 @@ $color-pagination_item-bg-active: var(--semi-color-fill-1); // 翻页器 页码
 $color-pagination_item-text-disabled: var(--semi-color-disabled-text); // 翻页器 页码 禁用态文字颜色
 $color-pagination_item-icon-disabled: var(--semi-color-disabled-text); // 翻页器 页码 禁用态图标颜色
 $color-pagination_item-bg-disabled: transparent; // 翻页器 页码 禁用态背景颜色
+$color-pagination_item-bg-selected-disabled: var(--semi-color-disabled-fill); // 翻页器 页码 选中禁用态背景颜色
 $color-pagination_item-text-selected: var(--semi-color-primary); // 翻页器 页码 选中态文字颜色
 $color-pagination_item-bg-selected: var(--semi-color-primary-light-default); // 翻页器 页码 选中态背景颜色
 $color-pagination_quickjump_text-disabled: var(--semi-color-disabled-text); // 翻页器 快速跳转禁用态文字颜色

package/lib/cjs/toast/toast.css

@@ -36,6 +36,8 @@
   margin-left: 12px;
   margin-right: 12px;
   text-align: left;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .semi-toast-light.semi-toast-warning .semi-toast-content {
   background-color: var(--semi-color-warning-light-default);

package/lib/cjs/toast/toast.scss

@@ -39,6 +39,9 @@ $icon: #{$prefix}-toast-icon;
             margin-left: $spacing-toast_content_text-marginLeft;
             margin-right: $spacing-toast_content_text-marginRight;
             text-align: left;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
     }
 

package/lib/cjs/tooltip/tooltip.css

@@ -49,6 +49,8 @@
   font-size: 14px;
   left: 0;
   top: 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -58,6 +60,9 @@
 .semi-tooltip-wrapper-show {
   opacity: 1;
 }
+.semi-tooltip-content {
+  min-Width: 0;
+}
 .semi-tooltip-trigger {
   display: inline-block;
   width: auto;

package/lib/cjs/tooltip/tooltip.scss

@@ -65,6 +65,9 @@ $module-icon: #{$module}-icon-arrow;
         font-size: $font-tooltip-fontSize;
         left: 0;
         top: 0;
+        // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+        word-wrap: break-word;
+        overflow-wrap: break-word;
 
         @include font-size-regular;
         opacity: 0;
@@ -75,6 +78,10 @@ $module-icon: #{$module}-icon-arrow;
         }
     }
 
+    &-content {
+        min-Width: 0
+    }
+
     &-trigger {
         display: inline-block;
         width: auto;

package/lib/cjs/upload/foundation.js

@@ -488,6 +488,7 @@ class UploadFoundation extends _foundation.default {
         newFileList[index].fileInstance = fileInstance;
         newFileList[index].size = (0, _utils.getFileSize)(fileInstance.size);
         newFileList[index].name = fileInstance.name;
+        newFileList[index].url = this._createURL(fileInstance);
       }
       newFileList[index].shouldUpload = shouldUpload;
     }

package/lib/cjs/utils/getDataAttr.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = getDataAttr;
 function getDataAttr(props) {
   return Object.keys(props).reduce((prev, key) => {
-    if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') {
+    if (key.substr(0, 5) === 'data-') {
       prev[key] = props[key];
     }
     return prev;

package/lib/es/datePicker/datePicker.css

@@ -664,12 +664,14 @@
 }
 .semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn {
   display: flex;
-  color: var(--semi-color-primary-hover);
   cursor: pointer;
 }
 .semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn ~ .semi-datepicker-range-input-suffix {
   display: none;
 }
+.semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn:hover {
+  color: var(--semi-color-primary-hover);
+}
 .semi-datepicker-range-input-disabled {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);

package/lib/es/datePicker/datePicker.scss

@@ -993,13 +993,16 @@ $module-list: #{$prefix}-scrolllist;
             &:hover {
                 .#{$module}-range-input-clearbtn {
                     display: flex;
-                    color: $color-datepicker_range_input_clearbtn-icon-hover;
                     cursor: pointer;
                 }
 
                 .#{$module}-range-input-clearbtn ~ .#{$module}-range-input-suffix {
                     display: none;
                 }
+
+                .#{$module}-range-input-clearbtn:hover {
+                    color: $color-datepicker_range_input_clearbtn-icon-hover;
+                }
             }
 
             &-disabled {

package/lib/es/datePicker/foundation.js

@@ -426,9 +426,11 @@ export default class DatePickerFoundation extends BaseFoundation {
     const inputValue = '';
     if (!this._isControlledComponent('value')) {
       this._updateValueAndInput(value, true, inputValue);
+      this._adapter.updateInsetInputValue(null);
       this.resetCachedSelectedValue(value);
     }
     this._notifyChange(value);
+    this._adapter.setRangeInputFocus(false);
     this._adapter.notifyClear(e);
   }
   // eslint-disable-next-line @typescript-eslint/no-empty-function

package/lib/es/datePicker/inputFoundation.js

@@ -208,6 +208,7 @@ export default class InputFoundation extends BaseFoundation {
       case 'dateTime':
       case 'dateTimeRange':
         [datePlaceholder, timePlaceholder] = insetInputFormat.split(' ');
+        break;
       case 'monthRange':
         datePlaceholder = insetInputFormat + rangeSeparator + insetInputFormat;
         break;

package/lib/es/dropdown/foundation.js

@@ -28,6 +28,9 @@ export default class DropdownFoundation extends BaseFoundation {
   handleKeyDown(event) {
     var _a, _b;
     const id = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.attributes['data-popupid']) === null || _b === void 0 ? void 0 : _b.value;
+    const {
+      visible
+    } = this._adapter.getStates();
     switch (event.key) {
       case ' ':
       case 'Enter':
@@ -37,11 +40,11 @@ export default class DropdownFoundation extends BaseFoundation {
         break;
       case 'ArrowDown':
         this.setFocusToFirstMenuItem(id);
-        handlePrevent(event);
+        visible && handlePrevent(event);
         break;
       case 'ArrowUp':
         this.setFocusToLastMenuItem(id);
-        handlePrevent(event);
+        visible && handlePrevent(event);
         break;
       default:
         break;

package/lib/es/input/foundation.js

@@ -254,9 +254,10 @@ class InputFoundation extends BaseFoundation {
     } = this._adapter.getStates();
     const {
       showClear,
-      disabled
+      disabled,
+      showClearIgnoreDisabled
     } = this._adapter.getProps();
-    const allowClear = value && showClear && !disabled && (isFocus || isHovering);
+    const allowClear = value && showClear && (!disabled || showClearIgnoreDisabled) && (isFocus || isHovering);
     return allowClear;
   }
   handleClickPrefixOrSuffix(e) {

package/lib/es/notification/notification.css

@@ -105,14 +105,18 @@
   font-weight: 600;
   color: var(--semi-color-text-0);
   margin-bottom: 4px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .semi-notification-notice-inner {
   display: flex;
   width: 100%;
+  min-width: 0;
 }
 .semi-notification-notice-content-wrapper {
   flex: 1 1 auto;
   margin-right: 8px;
+  min-width: 0;
 }
 .semi-notification-notice-content {
   font-size: 14px;
@@ -120,6 +124,8 @@
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 400;
   color: var(--semi-color-text-1);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .semi-notification-notice-icon-close {
   height: 24px;

package/lib/es/notification/notification.scss

@@ -123,16 +123,21 @@ $module: #{$prefix}-notification;
             font-weight: $font-notification_notice_title-fontWeight;
             color: $color-notification_title-text;
             margin-bottom: $spacing-notification_notice_title-marginBottom;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
 
         &-inner {
             display: flex;
             width: 100%;
+            min-width: 0;
         }
 
         &-content-wrapper {
             flex: 1 1 auto;
             margin-right: $spacing-notification_notice_content_wrapper-marginRight;
+            min-width: 0;
         }
 
         &-content {
@@ -140,6 +145,9 @@ $module: #{$prefix}-notification;
             font-weight: $font-notification_notice_content-fontWeight;
             color: $color-notification_content-text;
             // padding-top: $spacing-extra-tight;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
 
         &-icon-close {

package/lib/es/pagination/pagination.css

@@ -18,6 +18,12 @@
   color: var(--semi-color-text-2);
   padding: 0 0;
 }
+.semi-page-disabled {
+  cursor: not-allowed;
+}
+.semi-page-disabled .semi-page-total {
+  color: var(--semi-color-disabled-text);
+}
 .semi-page-item {
   font-size: 14px;
   line-height: 20px;
@@ -78,6 +84,23 @@
   min-width: 44px;
   margin: 0;
 }
+.semi-page-item-all-disabled {
+  border-color: transparent;
+  color: var(--semi-color-disabled-text);
+  background-color: transparent;
+  cursor: not-allowed;
+}
+.semi-page-item-all-disabled:hover {
+  background-color: transparent;
+  color: var(--semi-color-disabled-text);
+}
+.semi-page-item-all-disabled-active {
+  background-color: var(--semi-color-disabled-fill);
+  font-weight: 600;
+}
+.semi-page-item-all-disabled-active:hover {
+  background-color: var(--semi-color-disabled-fill);
+}
 .semi-page-total {
   font-size: 14px;
   line-height: 20px;

package/lib/es/pagination/pagination.scss

@@ -20,6 +20,14 @@ $module: #{$prefix}-page;
         padding: $spacing-pagination_small-paddingY $spacing-pagination_small-paddingX;
     }
 
+    &-disabled {
+        cursor: not-allowed;
+
+        .#{$module}-total {
+            color: $color-pagination_item-text-disabled;
+        }
+    }
+
     &-item {
         @include font-size-regular;
         min-width: $width-pagination_item-minWidth;
@@ -86,6 +94,27 @@ $module: #{$prefix}-page;
             min-width: $width-pagination_item_small-minWidth;
             margin: $spacing-pagination_item_small-margin;
         }
+
+        &-all-disabled {
+            border-color: $color-pagination_item-border-disabled;
+            color: $color-pagination_item-text-disabled;
+            background-color: $color-pagination_item-bg-disabled;
+            cursor: not-allowed;
+    
+            &:hover {
+                background-color: transparent;
+                color: $color-pagination_item-text-disabled;
+            }
+
+            &-active {
+                background-color: $color-pagination_item-bg-selected-disabled;
+                font-weight: $font-pagination_item_active-fontWeight;
+
+                &:hover {
+                    background-color: $color-pagination_item-bg-selected-disabled;
+                }
+            }
+        }
     }
 
     &-total {

package/lib/es/pagination/variables.scss

@@ -10,6 +10,7 @@ $color-pagination_item-bg-active: var(--semi-color-fill-1); // 翻页器 页码
 $color-pagination_item-text-disabled: var(--semi-color-disabled-text); // 翻页器 页码 禁用态文字颜色
 $color-pagination_item-icon-disabled: var(--semi-color-disabled-text); // 翻页器 页码 禁用态图标颜色
 $color-pagination_item-bg-disabled: transparent; // 翻页器 页码 禁用态背景颜色
+$color-pagination_item-bg-selected-disabled: var(--semi-color-disabled-fill); // 翻页器 页码 选中禁用态背景颜色
 $color-pagination_item-text-selected: var(--semi-color-primary); // 翻页器 页码 选中态文字颜色
 $color-pagination_item-bg-selected: var(--semi-color-primary-light-default); // 翻页器 页码 选中态背景颜色
 $color-pagination_quickjump_text-disabled: var(--semi-color-disabled-text); // 翻页器 快速跳转禁用态文字颜色

package/lib/es/toast/toast.css

@@ -36,6 +36,8 @@
   margin-left: 12px;
   margin-right: 12px;
   text-align: left;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .semi-toast-light.semi-toast-warning .semi-toast-content {
   background-color: var(--semi-color-warning-light-default);

package/lib/es/toast/toast.scss

@@ -39,6 +39,9 @@ $icon: #{$prefix}-toast-icon;
             margin-left: $spacing-toast_content_text-marginLeft;
             margin-right: $spacing-toast_content_text-marginRight;
             text-align: left;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
     }
 

package/lib/es/tooltip/tooltip.css

@@ -49,6 +49,8 @@
   font-size: 14px;
   left: 0;
   top: 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -58,6 +60,9 @@
 .semi-tooltip-wrapper-show {
   opacity: 1;
 }
+.semi-tooltip-content {
+  min-Width: 0;
+}
 .semi-tooltip-trigger {
   display: inline-block;
   width: auto;

package/lib/es/tooltip/tooltip.scss

@@ -65,6 +65,9 @@ $module-icon: #{$module}-icon-arrow;
         font-size: $font-tooltip-fontSize;
         left: 0;
         top: 0;
+        // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+        word-wrap: break-word;
+        overflow-wrap: break-word;
 
         @include font-size-regular;
         opacity: 0;
@@ -75,6 +78,10 @@ $module-icon: #{$module}-icon-arrow;
         }
     }
 
+    &-content {
+        min-Width: 0
+    }
+
     &-trigger {
         display: inline-block;
         width: auto;

package/lib/es/upload/foundation.js

@@ -481,6 +481,7 @@ class UploadFoundation extends BaseFoundation {
         newFileList[index].fileInstance = fileInstance;
         newFileList[index].size = getFileSize(fileInstance.size);
         newFileList[index].name = fileInstance.name;
+        newFileList[index].url = this._createURL(fileInstance);
       }
       newFileList[index].shouldUpload = shouldUpload;
     }

package/lib/es/utils/getDataAttr.js

@@ -1,6 +1,6 @@
 export default function getDataAttr(props) {
   return Object.keys(props).reduce((prev, key) => {
-    if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') {
+    if (key.substr(0, 5) === 'data-') {
       prev[key] = props[key];
     }
     return prev;

package/notification/notification.scss

@@ -123,16 +123,21 @@ $module: #{$prefix}-notification;
             font-weight: $font-notification_notice_title-fontWeight;
             color: $color-notification_title-text;
             margin-bottom: $spacing-notification_notice_title-marginBottom;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
 
         &-inner {
             display: flex;
             width: 100%;
+            min-width: 0;
         }
 
         &-content-wrapper {
             flex: 1 1 auto;
             margin-right: $spacing-notification_notice_content_wrapper-marginRight;
+            min-width: 0;
         }
 
         &-content {
@@ -140,6 +145,9 @@ $module: #{$prefix}-notification;
             font-weight: $font-notification_notice_content-fontWeight;
             color: $color-notification_content-text;
             // padding-top: $spacing-extra-tight;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
 
         &-icon-close {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.36.0",
+    "version": "2.37.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "597a4a6279411ed623d2072f1bcde3f2f3983985",
+    "gitHead": "3d2a2680186785f167b1bb0f9c719a2945c3c1f0",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/pagination/pagination.scss

@@ -20,6 +20,14 @@ $module: #{$prefix}-page;
         padding: $spacing-pagination_small-paddingY $spacing-pagination_small-paddingX;
     }
 
+    &-disabled {
+        cursor: not-allowed;
+
+        .#{$module}-total {
+            color: $color-pagination_item-text-disabled;
+        }
+    }
+
     &-item {
         @include font-size-regular;
         min-width: $width-pagination_item-minWidth;
@@ -86,6 +94,27 @@ $module: #{$prefix}-page;
             min-width: $width-pagination_item_small-minWidth;
             margin: $spacing-pagination_item_small-margin;
         }
+
+        &-all-disabled {
+            border-color: $color-pagination_item-border-disabled;
+            color: $color-pagination_item-text-disabled;
+            background-color: $color-pagination_item-bg-disabled;
+            cursor: not-allowed;
+    
+            &:hover {
+                background-color: transparent;
+                color: $color-pagination_item-text-disabled;
+            }
+
+            &-active {
+                background-color: $color-pagination_item-bg-selected-disabled;
+                font-weight: $font-pagination_item_active-fontWeight;
+
+                &:hover {
+                    background-color: $color-pagination_item-bg-selected-disabled;
+                }
+            }
+        }
     }
 
     &-total {

package/pagination/variables.scss

@@ -10,6 +10,7 @@ $color-pagination_item-bg-active: var(--semi-color-fill-1); // 翻页器 页码
 $color-pagination_item-text-disabled: var(--semi-color-disabled-text); // 翻页器 页码 禁用态文字颜色
 $color-pagination_item-icon-disabled: var(--semi-color-disabled-text); // 翻页器 页码 禁用态图标颜色
 $color-pagination_item-bg-disabled: transparent; // 翻页器 页码 禁用态背景颜色
+$color-pagination_item-bg-selected-disabled: var(--semi-color-disabled-fill); // 翻页器 页码 选中禁用态背景颜色
 $color-pagination_item-text-selected: var(--semi-color-primary); // 翻页器 页码 选中态文字颜色
 $color-pagination_item-bg-selected: var(--semi-color-primary-light-default); // 翻页器 页码 选中态背景颜色
 $color-pagination_quickjump_text-disabled: var(--semi-color-disabled-text); // 翻页器 快速跳转禁用态文字颜色

package/toast/toast.scss

@@ -39,6 +39,9 @@ $icon: #{$prefix}-toast-icon;
             margin-left: $spacing-toast_content_text-marginLeft;
             margin-right: $spacing-toast_content_text-marginRight;
             text-align: left;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
     }
 

package/tooltip/tooltip.scss

@@ -65,6 +65,9 @@ $module-icon: #{$module}-icon-arrow;
         font-size: $font-tooltip-fontSize;
         left: 0;
         top: 0;
+        // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+        word-wrap: break-word;
+        overflow-wrap: break-word;
 
         @include font-size-regular;
         opacity: 0;
@@ -75,6 +78,10 @@ $module-icon: #{$module}-icon-arrow;
         }
     }
 
+    &-content {
+        min-Width: 0
+    }
+
     &-trigger {
         display: inline-block;
         width: auto;

package/upload/foundation.ts

@@ -487,6 +487,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
                 newFileList[index].fileInstance = fileInstance;
                 newFileList[index].size = getFileSize(fileInstance.size);
                 newFileList[index].name = fileInstance.name;
+                newFileList[index].url = this._createURL(fileInstance);
             }
             newFileList[index].shouldUpload = shouldUpload;
         }

package/utils/getDataAttr.ts

@@ -1,6 +1,6 @@
 export default function getDataAttr(props: Record<string, any>) {
     return Object.keys(props).reduce((prev, key) => {
-        if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') {
+        if (key.substr(0, 5) === 'data-') {
             prev[key] = props[key];
         }
         return prev;