@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/pagination/foundation.ts

@@ -1,5 +1,3 @@
-/* eslint-disable max-len */
-/* eslint-disable no-param-reassign */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { numbers } from './constants';
 
@@ -9,6 +7,7 @@ export interface PaginationAdapter<P = Record<string, any>, S = Record<string, a
     updateTotal: (total: number) => void;
     updatePageSize: (pageSize: number) => void;
     updateQuickJumpPage: (quickJumpPage: string | number) => void;
+    updateAllPageNumbers: (allPageNumbers: number[]) => void;
     setCurrentPage: (pageIndex: number) => void;
     registerKeyDownHandler: (handler: KeyDownHandler) => void;
     unregisterKeyDownHandler: (handler: KeyDownHandler) => void;
@@ -104,6 +103,18 @@ class PaginationFoundation<P = Record<string, any>, S = Record<string, any>> ext
         this._adapter.updatePageSize(pageSize);
     }
 
+    updateAllPageNumbers(total: number, pageSize: number) {
+        // only need to update in small size
+
+        const { size, hoverShowPageSelect, disabled } = this.getProps();
+        if (size !== 'small' || !hoverShowPageSelect || disabled) {
+            return;
+        } else {
+            const pageNumbers = Array.from({ length: Math.ceil(total / pageSize) }, (v, i) => i + 1);
+            this._adapter.updateAllPageNumbers(pageNumbers);
+        }
+    }
+
     goPrev() {
         const { currentPage } = this.getStates();
         if (currentPage > 1) {
@@ -203,7 +214,6 @@ class PaginationFoundation<P = Record<string, any>, S = Record<string, any>> ext
     }
 
     // TODO handle tab/enter events
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     handleKeyDown() {
     }
 

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

@@ -12,20 +12,11 @@ $module: #{$prefix}-popconfirm;
         flex-direction: column;
         padding: $spacing-popconfirm-top $spacing-popconfirm-top $spacing-popconfirm-top $spacing-popconfirm-bottom;
         position: relative;
-
-        .#{$module}-btn-close {
-            position: absolute;
-            right: $spacing-popconfirm_inner_close_btn-right;
-            top: $spacing-popconfirm_inner_close_btn-top;
-            margin-top: $spacing-popconfirm_btn_close-margin;
-            margin-right: $spacing-popconfirm_btn_close-margin;
-        }
     }
 
     &-header {
         display: flex;
         justify-content: flex-start;
-        margin-right: $spacing-popconfirm_header-marginRight;
 
         &-title {
             @include font-size-header-6;
@@ -49,13 +40,15 @@ $module: #{$prefix}-popconfirm;
 
         &-body {
             display: inline-flex;
+            flex-grow: 1;
             flex-direction: column;
         }
     }
 
     &-body {
-        margin-left: $width-popconfirm-icon + $spacing-popconfirm_header_icon-marginRight;
-
+        &-withIcon {
+            margin-left: $width-popconfirm-icon + $spacing-popconfirm_header_icon-marginRight;
+        }
         color: $color-popconfirm_body-text;
 
         & > p {
@@ -84,11 +77,6 @@ $module: #{$prefix}-popconfirm;
 .#{$prefix}-popover-with-arrow {
     .#{$module}-inner {
         padding: $spacing-popconfirm_popover_with_arrow_inner-padding;
-
-        .#{$module}-btn-close {
-            margin-top: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginTop;
-            margin-right: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight;
-        }
     }
 }
 

package/popconfirm/popconfirmFoundation.ts

@@ -1,4 +1,5 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
+
+import { get } from 'lodash';
 
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import isPromise from '../utils/isPromise';
@@ -10,7 +11,10 @@ export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, a
     notifyConfirm: (e: any) => Promise<any> | void;
     notifyCancel: (e: any) => Promise<any> | void;
     notifyVisibleChange: (visible: boolean) => void;
-    notifyClickOutSide: (e: any) => void
+    notifyClickOutSide: (e: any) => void;
+    focusCancelButton: () => void;
+    focusOkButton: () => void;
+    focusPrevFocusElement: () => void
 }
 
 export default class PopConfirmFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PopconfirmAdapter<P, S>, P, S> {
@@ -63,6 +67,20 @@ export default class PopConfirmFoundation<P = Record<string, any>, S = Record<st
         if (!this._isControlledComponent('visible')) {
             this._adapter.setVisible(visible);
         }
+        if (visible) {
+            this.handleFocusOperateButton();
+        } else {
+            this._adapter.focusPrevFocusElement();
+        }
         this._adapter.notifyVisibleChange(visible);
     }
+
+    handleFocusOperateButton() {
+        const { cancelButtonProps, okButtonProps } = this._adapter.getProps() as any;
+        if (get(cancelButtonProps, 'autoFocus') && !get(cancelButtonProps, 'disabled')) {
+            this._adapter.focusCancelButton();
+        } else if (get(okButtonProps, 'autoFocus') && !get(okButtonProps, 'disabled')) {
+            this._adapter.focusOkButton();
+        }
+    }
 }

package/popconfirm/rtl.scss

@@ -9,20 +9,12 @@ $module: #{$prefix}-popconfirm;
     &-inner {
         .#{$module}-rtl & {
             padding: $spacing-popconfirm-top $spacing-popconfirm-bottom $spacing-popconfirm-top $spacing-popconfirm-top;
-    
-            .#{$module}-btn-close {
-                right: auto;
-                left: 0;
-                margin-right: 0;
-                margin-left: $spacing-popconfirm_btn_close-margin;
-            }
         }
     }
 
     &-header {
         .#{$module}-rtl & {
             margin-right: 0;
-            margin-left: $spacing-popconfirm_header-marginRight;
     
             &-icon {
                 margin-right: 0;
@@ -49,11 +41,6 @@ $module: #{$prefix}-popconfirm;
         
         .#{$module}-inner {
             padding: $spacing-popconfirm_popover_with_arrow_inner_rtl-padding;
-    
-            .#{$module}-btn-close {
-                margin-right: 0;
-                margin-left: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight;
-            }
         }
     }
 

package/popconfirm/variables.scss

@@ -13,9 +13,6 @@ $spacing-popconfirm-top: 24px; // 顶部内边距
 $spacing-popconfirm-bottom: 20px; // 底部内边距
 $spacing-popconfirm_btn_close-margin: 24px; // 关闭按钮顶部 & 右侧外边距
 $spacing-popconfirm_with_arrow-padding: 12px; // 顶部内边距
-$spacing-popconfirm_inner_close_btn-top: 0; // 关闭按钮距顶部距离
-$spacing-popconfirm_inner_close_btn-right: 0; // 关闭按钮距右侧距离
-$spacing-popconfirm_header-marginRight: $spacing-popconfirm_btn_close-margin + $width-popconfirm_close_btn + 20px; // header 右侧外边距
 $spacing-popconfirm_header_title-marginBottom: 8px; // header 标题底部外边距
 $spacing-popconfirm_header_content_p-padding: 0; // header 正文内边距
 $spacing-popconfirm_header_content_p-margin: 0; // header 正文外边距
@@ -26,7 +23,6 @@ $spacing-popconfirm_footer_btn-marginRight: 8px; // footer 按钮右侧外边距
 $spacing-popconfirm_popover_with_arrow_inner-padding: ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-bottom - $spacing-popconfirm_with_arrow-padding); // 带三角形箭头时的内边距
 $spacing-popconfirm_popover_with_arrow_inner_rtl-padding: ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-bottom - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding); // 带三角形箭头时的内边距(rtl)
 $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginTop: $spacing-popconfirm_btn_close-margin - $spacing-popconfirm_with_arrow-padding; // 带三角形箭头时关闭按钮的顶部外边距
-$spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight: $spacing-popconfirm_btn_close-margin - $spacing-popconfirm_with_arrow-padding; // 带三角形箭头时关闭按钮的右侧外边距
 $spacing-popconfirm_header_icon-marginRight: 12px; // header 图标的右侧外边距
 
 // Font

package/popover/constants.ts

@@ -23,7 +23,7 @@ const strings = {
         'leftTopOver',
         'rightTopOver',
     ],
-    TRIGGER_SET: ['hover', 'focus', 'click', 'custom'],
+    TRIGGER_SET: ['hover', 'focus', 'click', 'custom', 'contextMenu'],
     DEFAULT_ARROW_STYLE: {
         borderOpacity: '1',
         backgroundColor: 'var(--semi-color-bg-3)',

package/popover/popover.scss

@@ -79,10 +79,12 @@ $module-icon: #{$module}-icon-arrow;
     }
     &-animation-show{
         animation: #{$module}-zoomIn $animation_duration-popover-in $animation_function-popover-in;
+        animation-fill-mode: forwards;
     }
 
     &-animation-hide{
         animation: #{$module}-zoomOut $animation_duration-popover-out $animation_function-popover-out;
+        animation-fill-mode: forwards;
     }
 }
 

package/radio/radio.scss

@@ -8,6 +8,7 @@ $inner-width: $width-icon-medium;
 .#{$module} {
     @include box-sizing;
     @include font-size-regular;
+    position: relative;
     display: inline-flex;
     column-gap: $spacing-radio_addon-paddingLeft;
     transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
@@ -107,8 +108,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 +173,7 @@ $inner-width: $width-icon-medium;
 
         &_disabled {
             &:active {
-                background: transparent;
+                background: $color-radio_cardRadioGroup_disabled-bg-active;
             }
         }
 
@@ -241,6 +242,7 @@ $inner-width: $width-icon-medium;
     &-content {
         display: flex;
         flex-direction: column;
+        row-gap: $spacing-radio_content-rowGap;
     }
 
     &:hover {
@@ -416,6 +418,7 @@ $inner-width: $width-icon-medium;
     &-horizontal {
         display: inline-flex;
         flex-wrap: wrap;
+        vertical-align: bottom; // Fix 1573
         gap: $spacing-radio_group_horizontal-marginRight;
     }
 

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/radioGroupFoundation.ts

@@ -69,6 +69,5 @@ export default class RadioGroupFoundation extends BaseFoundation<RadioGroupAdapt
         this._adapter.setValue(value);
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() {}
 }

package/radio/radioInnerFoundation.ts

@@ -60,6 +60,5 @@ export default class RadioInnerFoundation extends BaseFoundation<RadioInnerAdapt
         }
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() {}
 }

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); // 卡片样式单选选中态描边颜色 - 悬浮态
@@ -74,6 +77,7 @@ $spacing-radio_addon_buttonRadio_middle-paddingX: $spacing-base; // 中尺寸按
 $spacing-radio_addon_buttonRadio_middle-paddingY: $spacing-extra-tight; // 中尺寸按钮式单选按钮垂直内边距
 $spacing-radio_addon_buttonRadio_marginLeft: $spacing-none; // 按钮式单选按钮左侧外边距
 $spacing-radio_extra-paddingLeft: $width-radio_inner + $spacing-tight; // 单选副标题左侧内边距
+$spacing-radio_content-rowGap: 4px; // 内容行间距
 
 $spacing-radio_group_vertical-marginBottom: $spacing-base-tight; // 垂直布局单选框组底部外边距
 $spacing-radio_card_group_vertical-marginBottom: $spacing-base; // 垂直布局卡片式单选框组底部外边距

package/rating/foundation.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import warning from '../utils/warning';