@oceanbase/design 1.0.0-alpha.3 → 1.0.0-alpha.4

package/es/theme/style/default.less

@@ -310,12 +310,12 @@
 @colorTextQuaternary: #b6c0d4;
 @colorFill: #cdd5e4;
 @colorFillSecondary: #e2e8f3;
-@colorFillTertiary: #eff3fa;
-@colorFillQuaternary: #f7f9fc;
+@colorFillTertiary: #ebeff7;
+@colorFillQuaternary: #f5f7fc;
 @colorBgSolid: rgb(0,0,0);
 @colorBgSolidHover: rgba(0,0,0,0.75);
 @colorBgSolidActive: rgba(0,0,0,0.95);
-@colorBgLayout: #f7f9fc;
+@colorBgLayout: #fbfcfe;
 @colorBgContainer: #ffffff;
 @colorBgElevated: #ffffff;
 @colorBgSpotlight: #ffffff;
@@ -421,14 +421,14 @@
 @colorFuchsiaBg: #faf0fc;
 @colorFuchsiaText: #580e67;
 @colorIcon: #8592ad;
-@colorBgContainerDisabled: #eff3fa;
+@colorBgContainerDisabled: #ebeff7;
 @boxShadow: 0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05);
 @boxShadowSecondary: 0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05);
 @boxShadowTertiary: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
 @lineWidthFocus: 3px;
 @colorFillContent: #e2e8f3;
 @colorFillContentHover: #cdd5e4;
-@colorFillAlter: #f7f9fc;
+@colorFillAlter: #f5f7fc;
 @colorBorderBg: #ffffff;
 @colorSplit: rgba(13,63,155,0.12);
 @colorTextPlaceholder: #b6c0d4;
@@ -446,11 +446,11 @@
 @fontSizeIcon: 12px;
 @controlOutlineWidth: 2px;
 @controlInteractiveSize: 14px;
-@controlItemBgHover: #eff3fa;
+@controlItemBgHover: #ebeff7;
 @controlItemBgActive: #e6f4ff;
 @controlItemBgActiveHover: #b0dbff;
 @controlItemBgActiveDisabled: #cdd5e4;
-@controlTmpOutline: #f7f9fc;
+@controlTmpOutline: #f5f7fc;
 @controlOutline: rgba(5,145,255,0.1);
 @opacityLoading: 0.65;
 @linkDecoration: none;

package/lib/alert/index.d.ts

@@ -3,10 +3,10 @@ import type { AlertProps as AntAlertProps } from 'antd/es/alert';
 export * from 'antd/es/alert';
 export interface AlertProps extends AntAlertProps {
     ghost?: boolean;
-    colored?: boolean;
+    mini?: boolean;
 }
 declare const Alert: {
-    ({ type, ghost, colored, prefixCls: customizePrefixCls, className, ...restProps }: AlertProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    ({ type: typeProp, showIcon, closable, ghost, mini, banner, prefixCls: customizePrefixCls, className, ...restProps }: AlertProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     ErrorBoundary: typeof import("antd/es/alert/ErrorBoundary").default;
     displayName: string;
 };

package/lib/alert/index.js

@@ -48,20 +48,25 @@ var iconMapOutlined = {
   warning: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExclamationCircleOutlined, {})
 };
 var Alert = ({
-  type,
+  type: typeProp,
+  showIcon = true,
+  closable,
   ghost,
-  colored,
+  mini,
+  banner,
   prefixCls: customizePrefixCls,
   className,
   ...restProps
 }) => {
+  const type = banner && !typeProp ? "warning" : typeProp;
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("alert", customizePrefixCls);
   const { wrapSSR } = (0, import_style.default)(prefixCls);
   const alertCls = (0, import_classnames.default)(
     {
+      [`${prefixCls}-closable`]: closable,
       [`${prefixCls}-ghost`]: ghost,
-      [`${prefixCls}-colored`]: colored
+      [`${prefixCls}-mini`]: mini
     },
     className
   );
@@ -70,6 +75,9 @@ var Alert = ({
       import_antd.Alert,
       {
         type,
+        showIcon,
+        closable,
+        banner,
         icon: iconMapOutlined[type],
         prefixCls: customizePrefixCls,
         className: alertCls,

package/lib/alert/style/index.js

@@ -24,118 +24,217 @@ __export(style_exports, {
 });
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
-var genTypeStyle = (color, token) => {
-  const borderWidth = 8;
-  return {
-    content: '""',
-    width: borderWidth,
-    // 绕 Y 轴旋转 60deg 是为了让圆角有一定的视觉拉伸，以与原先的边框贴合更加紧密
-    transform: "rotateY(60deg)",
-    backgroundColor: color,
-    position: "absolute",
-    height: `calc(100% - ${token.lineWidth}px)`,
-    left: -token.lineWidth - borderWidth / 2 / 2,
-    top: token.lineWidth / 2,
-    borderTopLeftRadius: token.borderRadiusLG,
-    borderBottomLeftRadius: token.borderRadiusLG
+var import_lodash = require("lodash");
+var genAlertTypeStyle = (type, token) => {
+  const { componentCls } = token;
+  const textColor = token[`color${(0, import_lodash.upperFirst)(type)}Text`];
+  const hoverColor = token[`color${(0, import_lodash.upperFirst)(type)}TextHover`];
+  const activeColor = token[`color${(0, import_lodash.upperFirst)(type)}TextActive`];
+  const linkStyle = {
+    color: textColor,
+    textDecoration: "underline",
+    "&:hover": {
+      color: hoverColor
+    },
+    "&:active": {
+      color: activeColor
+    }
   };
-};
-var genColoredStyle = (color, colorHover, token) => {
-  const { componentCls, iconCls } = token;
   return {
     [`${componentCls}-message`]: {
-      color
+      color: textColor,
+      a: linkStyle
     },
     [`${componentCls}-description`]: {
-      color
+      a: linkStyle
     },
-    [`${componentCls}-close-icon`]: {
-      [`${iconCls}`]: {
-        color,
-        "&:hover": {
-          color: colorHover
-        }
-      },
-      [`${componentCls}-close-text`]: {
-        color,
-        "&:hover": {
-          color: colorHover
-        }
-      }
+    [`${componentCls}-icon`]: {
+      color: textColor
     }
   };
 };
 var genAlertStyle = (token) => {
-  const {
-    componentCls,
-    colorSuccess,
-    colorSuccessHover,
-    colorInfo,
-    colorInfoHover,
-    colorWarning,
-    colorWarningHover,
-    colorError,
-    colorErrorHover,
-    colorIcon,
-    colorIconHover,
-    motionDurationMid
-  } = token;
+  const { componentCls, colorIcon, colorIconHover, motionDurationMid } = token;
   const height = token.fontSize * token.lineHeight;
+  const iconWidth = token.fontSizeLG;
+  const contentStartOffset = iconWidth + token.marginXS;
+  const closeIconWidth = height;
   return {
     [`${componentCls}`]: {
       // vertical align to flex-start
       alignItems: "flex-start !important",
-      paddingRight: token.padding,
+      paddingInline: token.padding,
+      position: "relative",
       [`${componentCls}-icon`]: {
-        height
+        height,
+        fontSize: token.fontSizeLG,
+        marginInlineEnd: token.marginXS,
+        flexShrink: 0
       },
       [`${componentCls}-close-icon`]: {
+        position: "absolute",
+        top: token.paddingXS,
+        insetInlineEnd: token.padding,
         height,
         color: colorIcon,
         transition: `color ${motionDurationMid}`,
+        flexShrink: 0,
+        display: "flex",
+        alignItems: "center",
         "&:hover": {
           color: colorIconHover
         }
-      }
+      },
+      // Default link styles (will be overridden by type-specific styles)
+      [`${componentCls}-message`]: {
+        a: {
+          textDecoration: "underline"
+        }
+      },
+      [`${componentCls}-description`]: {
+        a: {
+          textDecoration: "underline"
+        }
+      },
+      [`&${componentCls}-success`]: genAlertTypeStyle("success", token),
+      [`&${componentCls}-info`]: genAlertTypeStyle("info", token),
+      [`&${componentCls}-warning`]: genAlertTypeStyle("warning", token),
+      [`&${componentCls}-error`]: genAlertTypeStyle("error", token)
     },
     [`${componentCls}:not(${componentCls}-with-description)`]: {
-      paddingLeft: token.padding
+      flexWrap: "wrap",
+      [`${componentCls}-content`]: {
+        flex: `1 1 calc(100% - ${contentStartOffset + closeIconWidth + token.padding}px)`,
+        minWidth: 0,
+        maxWidth: `calc(100% - ${contentStartOffset + closeIconWidth + token.padding}px)`,
+        wordBreak: "break-word"
+      },
+      [`${componentCls}-action`]: {
+        width: `calc(100% - ${contentStartOffset + token.padding}px)`,
+        marginInlineStart: contentStartOffset,
+        marginTop: token.marginXS
+      }
     },
     [`${componentCls}${componentCls}-with-description`]: {
-      paddingBlock: token.padding,
+      paddingBlock: token.paddingSM,
+      flexWrap: "wrap",
       [`${componentCls}-message`]: {
-        fontWeight: 500,
-        marginBottom: token.marginXXS
+        fontSize: token.fontSize,
+        fontWeight: token.fontWeightStrong,
+        marginBottom: token.marginXXS,
+        wordBreak: "break-word"
       },
       [`${componentCls}-description`]: {
-        color: token.colorTextSecondary
+        wordBreak: "break-word"
       },
-      [`${componentCls}-icon`]: {
-        fontSize: token.fontSizeHeading4,
-        height: token.fontSizeHeading3,
-        marginInlineEnd: token.margin
+      [`${componentCls}-content`]: {
+        flex: `1 1 calc(100% - ${contentStartOffset + closeIconWidth + token.padding}px)`,
+        minWidth: 0,
+        maxWidth: `calc(100% - ${contentStartOffset + closeIconWidth + token.padding}px)`,
+        wordBreak: "break-word"
       },
       [`${componentCls}-action`]: {
-        marginInlineStart: token.marginXS
+        width: `calc(100% - ${contentStartOffset + token.padding}px)`,
+        marginInlineStart: contentStartOffset,
+        marginTop: token.marginSM
+      },
+      [`${componentCls}-close-icon`]: {
+        top: token.paddingSM
       }
     },
-    [`${componentCls}:not(${componentCls}-banner):not(${componentCls}-ghost)`]: {
-      [`&${componentCls}-success::before`]: genTypeStyle(colorSuccess, token),
-      [`&${componentCls}-info::before`]: genTypeStyle(colorInfo, token),
-      [`&${componentCls}-warning::before`]: genTypeStyle(colorWarning, token),
-      [`&${componentCls}-error::before`]: genTypeStyle(colorError, token)
-    },
     [`${componentCls}${componentCls}-ghost`]: {
       backgroundColor: "transparent",
       border: "none",
-      padding: 0,
+      padding: "0px !important",
       borderRadius: 0
     },
-    [`${componentCls}-colored`]: {
-      [`&${componentCls}-success`]: genColoredStyle(colorSuccess, colorSuccessHover, token),
-      [`&${componentCls}-info`]: genColoredStyle(colorInfo, colorInfoHover, token),
-      [`&${componentCls}-warning`]: genColoredStyle(colorWarning, colorWarningHover, token),
-      [`&${componentCls}-error`]: genColoredStyle(colorError, colorErrorHover, token)
+    [`${componentCls}${componentCls}-mini`]: {
+      paddingBlock: token.paddingXXS,
+      paddingInline: token.paddingXS,
+      border: "none",
+      width: "fit-content",
+      display: "inline-flex",
+      alignItems: "center",
+      flexWrap: "nowrap",
+      [`${componentCls}-icon`]: {
+        marginInlineEnd: token.paddingXS,
+        flexShrink: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        lineHeight: 1
+      },
+      [`${componentCls}-message`]: {
+        whiteSpace: "nowrap",
+        wordBreak: "normal",
+        overflow: "visible",
+        lineHeight: token.lineHeight,
+        display: "flex",
+        alignItems: "center"
+      },
+      [`${componentCls}-content`]: {
+        display: "flex",
+        alignItems: "center",
+        flex: "0 1 auto",
+        whiteSpace: "nowrap",
+        minWidth: 0,
+        lineHeight: token.lineHeight
+      },
+      [`${componentCls}-close-icon`]: {
+        position: "relative",
+        top: token.paddingXXS,
+        insetInlineEnd: "auto",
+        height: "auto",
+        flexShrink: 0,
+        marginInlineStart: 0
+      },
+      [`&${componentCls}-closable`]: {
+        [`${componentCls}-content`]: {
+          paddingInlineEnd: token.paddingXS
+        }
+      },
+      [`&:not(${componentCls}-with-description)`]: {
+        flexWrap: "nowrap",
+        [`${componentCls}-content`]: {
+          flex: "0 1 auto",
+          minWidth: 0,
+          maxWidth: "none",
+          wordBreak: "normal"
+        }
+      },
+      [`&${componentCls}-with-description`]: {
+        paddingBlock: token.paddingXXS,
+        flexDirection: "row",
+        alignItems: "flex-start",
+        position: "relative",
+        flexWrap: "nowrap",
+        [`${componentCls}-icon`]: {
+          alignSelf: "flex-start",
+          marginTop: 0
+        },
+        [`${componentCls}-content`]: {
+          flexDirection: "column",
+          alignItems: "flex-start",
+          flex: "0 1 auto",
+          minWidth: 0,
+          maxWidth: "none",
+          wordBreak: "normal"
+        },
+        [`${componentCls}-message`]: {
+          marginBottom: token.marginXXS,
+          whiteSpace: "nowrap",
+          wordBreak: "normal"
+        },
+        [`${componentCls}-description`]: {
+          whiteSpace: "nowrap",
+          wordBreak: "normal"
+        },
+        [`${componentCls}-close-icon`]: {
+          position: "absolute",
+          top: token.paddingXXS,
+          insetInlineEnd: token.paddingXS
+        }
+      }
     }
   };
 };

package/lib/badge/index.js

@@ -43,7 +43,7 @@ __reExport(badge_exports, require("antd/es/badge"), module.exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var Badge = import_react.default.forwardRef(
   ({ prefixCls: customizePrefixCls, className, status, text, icon, ...restProps }, ref) => {
-    const { getPrefixCls, iconPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+    const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
     const prefixCls = getPrefixCls("badge", customizePrefixCls);
     const { wrapSSR, hashId } = (0, import_style.default)(prefixCls);
     const iconMap = {
@@ -54,7 +54,7 @@ var Badge = import_react.default.forwardRef(
           style: {
             display: "inline-block"
           },
-          className: `${iconPrefixCls}-spin`
+          spin: true
         }
       ),
       success: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CheckCircleFilled, {}),

package/lib/badge/style/index.js

@@ -35,9 +35,7 @@ var genBadgeStyle = (token) => {
     [`${componentCls}${componentCls}-status`]: {
       // dot style
       [`${componentCls}-status-dot`]: {
-        [`&${componentCls}-status-default`]: {
-          backgroundColor: token.colorFill
-        }
+        [`&${componentCls}-status-default`]: {}
       },
       // icon style
       [`${componentCls}-status-icon`]: {

package/lib/card/index.d.ts

@@ -8,6 +8,10 @@ export interface CardTabListType extends AntCardTabListType {
 export interface CardProps extends AntCardProps {
     divided?: boolean;
     tabList?: CardTabListType[];
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    collapsed?: boolean;
+    onCollapse?: (collapsed: boolean) => void;
 }
 declare const _default: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
     Grid: React.FC<import("antd/es/card").CardGridProps>;

package/lib/card/index.js

@@ -37,8 +37,10 @@ var import_util = require("@oceanbase/util");
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
+var import_icons = require("@oceanbase/icons");
 var import_config_provider = __toESM(require("../config-provider"));
 var import_util2 = require("../_util");
+var import_theme = __toESM(require("../theme"));
 var import_style = __toESM(require("./style"));
 __reExport(card_exports, require("antd/es/card/Card"), module.exports);
 __reExport(card_exports, require("antd/es/card"), module.exports);
@@ -55,20 +57,72 @@ var Card = import_react.default.forwardRef(
     bodyStyle,
     styles,
     className,
+    collapsible,
+    defaultCollapsed,
+    collapsed: outerCollapsed,
+    onCollapse,
+    extra,
     ...restProps
   }, ref) => {
     var _a;
-    const { getPrefixCls, card: contextCard } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+    const {
+      getPrefixCls,
+      card: contextCard,
+      iconPrefixCls
+    } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+    const { token } = import_theme.default.useToken();
     const divided = outerDivided ?? (contextCard == null ? void 0 : contextCard.divided) ?? true;
     const prefixCls = getPrefixCls("card", customizePrefixCls);
     const tabsPrefixCls = getPrefixCls("tabs", customizePrefixCls);
     const { wrapSSR } = (0, import_style.default)(prefixCls, tabsPrefixCls);
+    const [internalCollapsed, setInternalCollapsed] = (0, import_react.useState)(defaultCollapsed ?? false);
+    const collapsed = outerCollapsed !== void 0 ? outerCollapsed : internalCollapsed;
+    const handleCollapse = (0, import_react.useCallback)(() => {
+      const newCollapsed = !collapsed;
+      if (outerCollapsed === void 0) {
+        setInternalCollapsed(newCollapsed);
+      }
+      onCollapse == null ? void 0 : onCollapse(newCollapsed);
+    }, [collapsed, outerCollapsed, onCollapse]);
+    const cardTitle = (0, import_react.useMemo)(() => {
+      if (!collapsible) {
+        return title;
+      }
+      if (!title) {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: `${prefixCls}-title-wrapper`,
+          onClick: handleCollapse,
+          style: { cursor: "pointer", display: "flex", alignItems: "center" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_icons.CaretRightFilled,
+              {
+                className: `${prefixCls}-collapsible-icon`,
+                style: {
+                  transition: `transform ${token.motionDurationMid}`,
+                  transform: collapsed ? void 0 : "rotate(90deg)",
+                  color: token.colorIcon,
+                  marginRight: token.marginXS
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title })
+          ]
+        }
+      );
+    }, [collapsible, title, collapsed, prefixCls, token, handleCollapse]);
     const noBodyHorizontalPadding = (0, import_util2.isHorizontalPaddingZero)(bodyStyle == null ? void 0 : bodyStyle.padding) || (0, import_util2.isHorizontalPaddingZero)((_a = styles == null ? void 0 : styles.body) == null ? void 0 : _a.padding);
     const cardCls = (0, import_classnames.default)(
       {
         [`${prefixCls}-has-title`]: !!title,
         [`${prefixCls}-no-divider`]: !divided,
-        [`${prefixCls}-no-body-horizontal-padding`]: noBodyHorizontalPadding
+        [`${prefixCls}-no-body-horizontal-padding`]: noBodyHorizontalPadding,
+        [`${prefixCls}-collapsible`]: collapsible,
+        [`${prefixCls}-collapsed`]: collapsed
       },
       className
     );
@@ -90,16 +144,19 @@ var Card = import_react.default.forwardRef(
         {
           ref,
           size,
-          title,
+          title: cardTitle,
           tabList: newTabList,
           tabProps: {
             size: "middle",
             ...tabProps
           },
           prefixCls: customizePrefixCls,
-          bodyStyle,
+          bodyStyle: {
+            ...bodyStyle
+          },
           styles,
           className: cardCls,
+          extra,
           ...restProps,
           children
         }

package/lib/card/style/index.js

@@ -59,6 +59,9 @@ var genCardStyle = (token) => {
   const tableComponentCls = `${antCls}-table`;
   return {
     [`${componentCls}`]: {
+      [`${componentCls}-body`]: {
+        paddingTop: token.padding
+      },
       // nested Card style
       [`${componentCls}:not(${componentCls}-bordered):not(${componentCls}-type-inner)`]: {
         boxShadow: "none"
@@ -78,6 +81,8 @@ var genCardStyle = (token) => {
       [`${componentCls}-head`]: {
         // should not remove border-bottom to avoid tabs inkbar display correctly
         borderBottomColor: "transparent",
+        paddingTop: token.paddingLG,
+        paddingBottom: token.padding,
         // remove divider for top and bottom tabs
         [tabsComponentCls]: {
           [`&${tabsComponentCls}-top, &${tabsComponentCls}-bottom`]: {
@@ -93,6 +98,11 @@ var genCardStyle = (token) => {
         padding: `0 ${paddingLG}px ${paddingLG}px ${paddingLG}px`
       }
     },
+    [`${componentCls}-small`]: {
+      [`${componentCls}-body`]: {
+        paddingTop: token.paddingXS
+      }
+    },
     [`${componentCls}-small${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
       [`${componentCls}-body`]: {
         padding: `0 ${paddingSM}px ${paddingSM}px ${paddingSM}px`
@@ -104,11 +114,20 @@ var genCardStyle = (token) => {
       }
     },
     [`${componentCls}${componentCls}-contain-tabs`]: {
-      [`${componentCls}-head`]: (0, import_style.genTabsStyle)({
-        ...token,
-        componentCls: tabsComponentCls,
-        prefixCls: tabsPrefixCls
-      })
+      [`${componentCls}-head`]: {
+        ...(0, import_style.genTabsStyle)({
+          ...token,
+          componentCls: tabsComponentCls,
+          prefixCls: tabsPrefixCls
+        }),
+        [tabsComponentCls]: {
+          [`&${tabsComponentCls}-top, &${tabsComponentCls}-bottom`]: {
+            [`${tabsComponentCls}-tab`]: {
+              paddingBlock: token.padding
+            }
+          }
+        }
+      }
     },
     [`${componentCls}${componentCls}-contain-grid`]: {
       [`${componentCls}-head`]: {
@@ -133,7 +152,34 @@ var genCardStyle = (token) => {
     // no body horizontal padding card
     [`${componentCls}${componentCls}-no-body-horizontal-padding`]: genTableStyle(paddingLG, token),
     // no body horizontal padding small card
-    [`${componentCls}${componentCls}-no-body-horizontal-padding${componentCls}-small`]: genTableStyle(paddingSM, token)
+    [`${componentCls}${componentCls}-no-body-horizontal-padding${componentCls}-small`]: genTableStyle(paddingSM, token),
+    // collapsible card style
+    [`${componentCls}${componentCls}-collapsible`]: {
+      [`${componentCls}-title-wrapper`]: {
+        userSelect: "none",
+        [`${componentCls}-collapsible-icon`]: {
+          fontSize: token.fontSizeLG
+        }
+      },
+      [`${componentCls}-body`]: {
+        overflow: "hidden"
+      }
+    },
+    [`${componentCls}${componentCls}-collapsible${componentCls}-collapsed`]: {
+      [`${componentCls}-body`]: {
+        maxHeight: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        opacity: 0,
+        overflow: "hidden",
+        border: "none",
+        margin: 0
+      },
+      // hide bottom border of head when collapsed, avoid double border
+      [`${componentCls}-head`]: {
+        borderBottom: "none"
+      }
+    }
   };
 };
 var style_default = (prefixCls, tabsPrefixCls) => {

package/lib/config-provider/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ConfigProvider as AntConfigProvider } from 'antd';
 import type { ConfigProviderProps as AntConfigProviderProps, ConfigConsumerProps as AntConfigConsumerProps, ThemeConfig as AntThemeConfig } from 'antd/es/config-provider';
-import type { ComponentStyleConfig, CardConfig as AntCardConfig } from 'antd/es/config-provider/context';
+import type { ComponentStyleConfig, CardConfig as AntCardConfig, TableConfig as AntTableConfig } from 'antd/es/config-provider/context';
 import type { AppProps } from 'antd/es/app';
 import type { PaginationConfig } from 'antd/es/pagination';
 import type { SpinIndicator } from 'antd/es/spin';
@@ -23,7 +23,7 @@ export type CardConfig = AntCardConfig & {
 export type SpinConfig = ComponentStyleConfig & {
     indicator?: SpinIndicator;
 };
-export type TableConfig = ComponentStyleConfig & {
+export type TableConfig = AntTableConfig & {
     selectionColumnWidth?: number;
 };
 export interface ConfigConsumerProps extends AntConfigConsumerProps {