@ant-design/pro-components 3.0.2-0 → 3.1.1-0

package/lib/card/components/Actions/style.js

@@ -1,87 +1,94 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../provider");
-var genActionsStyle = function genActionsStyle(token) {
-  var componentCls = token.componentCls,
-    antCls = token.antCls;
-  return (0, _defineProperty2.default)({}, "".concat(componentCls, "-actions"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
-    marginBlock: 0,
-    marginInline: 0,
-    paddingBlock: 0,
-    paddingInline: 0,
-    listStyle: 'none',
-    display: 'flex',
-    gap: token.marginXS,
-    background: token.colorBgContainer,
-    borderBlockStart: "".concat(token.lineWidth, "px ").concat(token.lineType, " ").concat(token.colorSplit),
-    minHeight: 42
-  }, "& > *", {
-    alignItems: 'center',
-    justifyContent: 'center',
-    flex: 1,
-    display: 'flex',
-    cursor: 'pointer',
-    color: token.colorTextSecondary,
-    transition: 'color 0.3s',
-    '&:hover': {
-      color: token.colorPrimaryHover
-    }
-  }), "& > li > div", {
-    flex: 1,
-    width: '100%',
-    marginBlock: token.marginSM,
-    marginInline: 0,
-    color: token.colorTextSecondary,
-    textAlign: 'center',
-    a: {
-      color: token.colorTextSecondary,
-      transition: 'color 0.3s',
-      '&:hover': {
-        color: token.colorPrimaryHover
-      }
-    },
-    div: (0, _defineProperty2.default)((0, _defineProperty2.default)({
-      position: 'relative',
-      display: 'block',
-      minWidth: 32,
-      fontSize: token.fontSize,
-      lineHeight: token.lineHeight,
-      cursor: 'pointer',
-      '&:hover': {
-        color: token.colorPrimaryHover,
-        transition: 'color 0.3s'
-      }
-    }, "a:not(".concat(antCls, "-btn),\n            > .anticon"), {
-      display: 'inline-block',
-      width: '100%',
-      color: token.colorTextSecondary,
-      lineHeight: '22px',
-      transition: 'color 0.3s',
-      '&:hover': {
-        color: token.colorPrimaryHover
+const genActionsStyle = token => {
+  const {
+    componentCls,
+    antCls
+  } = token;
+  return {
+    [`${componentCls}-actions`]: {
+      marginBlock: 0,
+      marginInline: 0,
+      paddingBlock: 0,
+      paddingInline: 0,
+      listStyle: 'none',
+      display: 'flex',
+      gap: token.marginXS,
+      background: token.colorBgContainer,
+      borderBlockStart: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+      minHeight: 42,
+      [`& > *`]: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1,
+        display: 'flex',
+        cursor: 'pointer',
+        color: token.colorTextSecondary,
+        transition: 'color 0.3s',
+        '&:hover': {
+          color: token.colorPrimaryHover
+        }
+      },
+      [`& > li > div`]: {
+        flex: 1,
+        width: '100%',
+        marginBlock: token.marginSM,
+        marginInline: 0,
+        color: token.colorTextSecondary,
+        textAlign: 'center',
+        a: {
+          color: token.colorTextSecondary,
+          transition: 'color 0.3s',
+          '&:hover': {
+            color: token.colorPrimaryHover
+          }
+        },
+        div: {
+          position: 'relative',
+          display: 'block',
+          minWidth: 32,
+          fontSize: token.fontSize,
+          lineHeight: token.lineHeight,
+          cursor: 'pointer',
+          '&:hover': {
+            color: token.colorPrimaryHover,
+            transition: 'color 0.3s'
+          },
+          [`a:not(${antCls}-btn),
+            > .anticon`]: {
+            display: 'inline-block',
+            width: '100%',
+            color: token.colorTextSecondary,
+            lineHeight: '22px',
+            transition: 'color 0.3s',
+            '&:hover': {
+              color: token.colorPrimaryHover
+            }
+          },
+          '.anticon': {
+            fontSize: token.cardActionIconSize,
+            lineHeight: '22px'
+          }
+        },
+        '&:not(:last-child)': {
+          borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
+        }
       }
-    }), '.anticon', {
-      fontSize: token.cardActionIconSize,
-      lineHeight: '22px'
-    }),
-    '&:not(:last-child)': {
-      borderInlineEnd: "".concat(token.lineWidth, "px ").concat(token.lineType, " ").concat(token.colorSplit)
     }
-  }));
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProCardActions', function (token) {
-    var proCardActionsToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls),
+  return (0, _provider.useStyle)('ProCardActions', token => {
+    const proCardActionsToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
       cardActionIconSize: 16
-    });
+    };
     return [genActionsStyle(proCardActionsToken)];
   });
 }

package/lib/card/components/Card/index.js

@@ -6,70 +6,60 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _icons = require("@ant-design/icons");
 var _util = require("@rc-component/util");
 var _antd = require("antd");
-var _useBreakpoint = _interopRequireDefault(require("antd/lib/grid/hooks/useBreakpoint"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../../../utils");
 var _Actions = _interopRequireDefault(require("../Actions"));
 var _Loading = _interopRequireDefault(require("../Loading"));
 var _style = _interopRequireDefault(require("./style"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "style", "bodyStyle", "headStyle", "title", "subTitle", "extra", "wrap", "layout", "loading", "gutter", "tooltip", "split", "headerBordered", "variant", "boxShadow", "children", "size", "actions", "ghost", "hoverable", "direction", "collapsed", "collapsible", "collapsibleIconRender", "colStyle", "defaultCollapsed", "onCollapse", "checked", "onChecked", "tabs", "type"];
-var Card = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _classNames2;
-  var className = props.className,
-    style = props.style,
-    bodyStyle = props.bodyStyle,
-    headStyle = props.headStyle,
-    title = props.title,
-    subTitle = props.subTitle,
-    extra = props.extra,
-    _props$wrap = props.wrap,
-    wrap = _props$wrap === void 0 ? false : _props$wrap,
-    layout = props.layout,
-    loading = props.loading,
-    _props$gutter = props.gutter,
-    gutter = _props$gutter === void 0 ? 0 : _props$gutter,
-    tooltip = props.tooltip,
-    split = props.split,
-    _props$headerBordered = props.headerBordered,
-    headerBordered = _props$headerBordered === void 0 ? false : _props$headerBordered,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'outlined' : _props$variant,
-    _props$boxShadow = props.boxShadow,
-    boxShadow = _props$boxShadow === void 0 ? false : _props$boxShadow,
-    children = props.children,
-    size = props.size,
-    actions = props.actions,
-    _props$ghost = props.ghost,
-    ghost = _props$ghost === void 0 ? false : _props$ghost,
-    _props$hoverable = props.hoverable,
-    hoverable = _props$hoverable === void 0 ? false : _props$hoverable,
-    direction = props.direction,
-    controlCollapsed = props.collapsed,
-    _props$collapsible = props.collapsible,
-    collapsible = _props$collapsible === void 0 ? false : _props$collapsible,
-    collapsibleIconRender = props.collapsibleIconRender,
-    colStyle = props.colStyle,
-    _props$defaultCollaps = props.defaultCollapsed,
-    defaultCollapsed = _props$defaultCollaps === void 0 ? false : _props$defaultCollaps,
-    onCollapse = props.onCollapse,
-    checked = props.checked,
-    onChecked = props.onChecked,
-    tabs = props.tabs,
-    type = props.type,
-    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var screens = (0, _useBreakpoint.default)() || {
+const {
+  useBreakpoint
+} = _antd.Grid;
+const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    className,
+    style,
+    bodyStyle,
+    headStyle,
+    styles,
+    title,
+    subTitle,
+    extra,
+    wrap = false,
+    layout,
+    loading,
+    gutter = 0,
+    tooltip,
+    split,
+    headerBordered = false,
+    variant = 'outlined',
+    boxShadow = false,
+    children,
+    size,
+    actions,
+    ghost = false,
+    hoverable = false,
+    direction,
+    collapsed: controlCollapsed,
+    collapsible = false,
+    collapsibleIconRender,
+    colStyle,
+    defaultCollapsed = false,
+    onCollapse,
+    checked,
+    onChecked,
+    tabs,
+    type,
+    ...rest
+  } = props;
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const screens = useBreakpoint() || {
     lg: true,
     md: true,
     sm: true,
@@ -77,31 +67,32 @@ var Card = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     xs: false,
     xxl: false
   };
-  var _useMergedState = (0, _util.useMergedState)(defaultCollapsed, {
-      value: controlCollapsed,
-      onChange: onCollapse
-    }),
-    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-    collapsed = _useMergedState2[0],
-    setCollapsed = _useMergedState2[1];
+  const [collapsed, setCollapsedInner] = (0, _util.useControlledState)(defaultCollapsed, controlCollapsed);
+  const setCollapsed = (0, _react.useCallback)(updater => {
+    setCollapsedInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      onCollapse?.(next);
+      return next;
+    });
+  }, [onCollapse]);
 
   // 顺序决定如何进行响应式取值，按最大响应值依次取值，请勿修改。
-  var responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+  const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
   // 直接使用 tabs.items，不再支持旧的 TabPane 写法
-  var ModifyTabItemsContent = tabs === null || tabs === void 0 ? void 0 : tabs.items;
+  const ModifyTabItemsContent = tabs?.items;
 
   /**
    * 根据响应式获取 gutter, 参考 antd 实现
    *
    * @param gutter Gutter
    */
-  var getNormalizedGutter = function getNormalizedGutter(gut) {
-    var results = [0, 0];
-    var normalizedGutter = Array.isArray(gut) ? gut : [gut, 0];
-    normalizedGutter.forEach(function (g, index) {
-      if ((0, _typeof2.default)(g) === 'object') {
-        for (var i = 0; i < responsiveArray.length; i += 1) {
-          var breakpoint = responsiveArray[i];
+  const getNormalizedGutter = gut => {
+    const results = [0, 0];
+    const normalizedGutter = Array.isArray(gut) ? gut : [gut, 0];
+    normalizedGutter.forEach((g, index) => {
+      if (typeof g === 'object') {
+        for (let i = 0; i < responsiveArray.length; i += 1) {
+          const breakpoint = responsiveArray[i];
           if (screens[breakpoint] && g[breakpoint] !== undefined) {
             results[index] = g[breakpoint];
             break;
@@ -120,17 +111,17 @@ var Card = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * @param withStyle 是否符合条件
    * @param appendStyle 如果符合条件要返回的 style 属性
    */
-  var getStyle = function getStyle(withStyle, appendStyle) {
+  const getStyle = (withStyle, appendStyle) => {
     return withStyle ? appendStyle : {};
   };
-  var getColSpanStyle = function getColSpanStyle(colSpan) {
-    var span = colSpan;
+  const getColSpanStyle = colSpan => {
+    let span = colSpan;
 
     // colSpan 响应式
-    if ((0, _typeof2.default)(colSpan) === 'object') {
-      for (var i = 0; i < responsiveArray.length; i += 1) {
-        var breakpoint = responsiveArray[i];
-        if (screens !== null && screens !== void 0 && screens[breakpoint] && (colSpan === null || colSpan === void 0 ? void 0 : colSpan[breakpoint]) !== undefined) {
+    if (typeof colSpan === 'object') {
+      for (let i = 0; i < responsiveArray.length; i += 1) {
+        const breakpoint = responsiveArray[i];
+        if (screens?.[breakpoint] && colSpan?.[breakpoint] !== undefined) {
           span = colSpan[breakpoint];
           break;
         }
@@ -138,113 +129,141 @@ var Card = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
 
     // 当 colSpan 为 30% 或 300px 时
-    var colSpanStyle = getStyle(typeof span === 'string' && /\d%|\dpx/i.test(span), {
+    const colSpanStyle = getStyle(typeof span === 'string' && /\d%|\dpx/i.test(span), {
       width: span,
       flexShrink: 0
     });
     return {
-      span: span,
-      colSpanStyle: colSpanStyle
+      span,
+      colSpanStyle
     };
   };
-  var prefixCls = getPrefixCls('pro-card');
-  var _useStyle = (0, _style.default)(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var _getNormalizedGutter = getNormalizedGutter(gutter),
-    _getNormalizedGutter2 = (0, _slicedToArray2.default)(_getNormalizedGutter, 2),
-    horizontalGutter = _getNormalizedGutter2[0],
-    verticalGutter = _getNormalizedGutter2[1];
+  const prefixCls = getPrefixCls('pro-card');
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.default)(prefixCls);
+  const [horizontalGutter, verticalGutter] = getNormalizedGutter(gutter);
 
   // 判断是否套了卡片，如果套了的话将自身卡片内部内容的 padding 设置为0
-  var containProCard = false;
-  var childrenArray = _react.default.Children.toArray(children);
-  var childrenModified = childrenArray.map(function (element, index) {
-    var _element$type;
-    if (element !== null && element !== void 0 && (_element$type = element.type) !== null && _element$type !== void 0 && _element$type.isProCard) {
+  let containProCard = false;
+  const childrenArray = _react.default.Children.toArray(children);
+  const childrenModified = childrenArray.map((element, index) => {
+    if (element?.type?.isProCard) {
       containProCard = true;
 
       // 宽度
-      var colSpan = element.props.colSpan;
-      var _getColSpanStyle = getColSpanStyle(colSpan),
-        span = _getColSpanStyle.span,
-        colSpanStyle = _getColSpanStyle.colSpanStyle;
-      var columnClassName = (0, _classnames.default)(["".concat(prefixCls, "-col")], hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-split-vertical"), split === 'vertical' && index !== childrenArray.length - 1), "".concat(prefixCls, "-split-horizontal"), split === 'horizontal' && index !== childrenArray.length - 1), "".concat(prefixCls, "-col-").concat(span), typeof span === 'number' && span >= 0 && span <= 24));
-      var wrappedElement = wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, colSpanStyle), getStyle(horizontalGutter > 0, {
-          paddingInlineEnd: horizontalGutter / 2,
-          paddingInlineStart: horizontalGutter / 2
-        })), getStyle(verticalGutter > 0, {
-          paddingBlockStart: verticalGutter / 2,
-          paddingBlockEnd: verticalGutter / 2
-        })), colStyle),
+      const {
+        colSpan
+      } = element.props;
+      const {
+        span,
+        colSpanStyle
+      } = getColSpanStyle(colSpan);
+      const columnClassName = (0, _clsx.clsx)([`${prefixCls}-col`], hashId, {
+        [`${prefixCls}-split-vertical`]: split === 'vertical' && index !== childrenArray.length - 1,
+        [`${prefixCls}-split-horizontal`]: split === 'horizontal' && index !== childrenArray.length - 1,
+        [`${prefixCls}-col-${span}`]: typeof span === 'number' && span >= 0 && span <= 24
+      });
+      const wrappedElement = wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          ...colSpanStyle,
+          ...getStyle(horizontalGutter > 0, {
+            paddingInlineEnd: horizontalGutter / 2,
+            paddingInlineStart: horizontalGutter / 2
+          }),
+          ...getStyle(verticalGutter > 0, {
+            paddingBlockStart: verticalGutter / 2,
+            paddingBlockEnd: verticalGutter / 2
+          }),
+          ...colStyle
+        },
         className: columnClassName,
         children: /*#__PURE__*/_react.default.cloneElement(element)
       }));
       return /*#__PURE__*/_react.default.cloneElement(wrappedElement, {
-        key: "pro-card-col-".concat((element === null || element === void 0 ? void 0 : element.key) || index)
+        key: `pro-card-col-${element?.key || index}`
       });
     }
     return element;
   });
-  var cardCls = (0, _classnames.default)("".concat(prefixCls), className, hashId, (_classNames2 = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-border"), variant === 'outlined'), "".concat(prefixCls, "-box-shadow"), boxShadow), "".concat(prefixCls, "-contain-card"), containProCard), "".concat(prefixCls, "-loading"), loading), "".concat(prefixCls, "-split"), split === 'vertical' || split === 'horizontal'), "".concat(prefixCls, "-ghost"), ghost), "".concat(prefixCls, "-hoverable"), hoverable), "".concat(prefixCls, "-size-").concat(size), size), "".concat(prefixCls, "-type-").concat(type), type), "".concat(prefixCls, "-collapse"), collapsed), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-checked"), checked)));
-  var bodyCls = (0, _classnames.default)("".concat(prefixCls, "-body"), hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-body-center"), layout === 'center'), "".concat(prefixCls, "-body-direction-column"), split === 'horizontal' || direction === 'column'), "".concat(prefixCls, "-body-wrap"), wrap && containProCard));
-  var cardBodyStyle = bodyStyle;
-  var loadingDOM = /*#__PURE__*/_react.default.isValidElement(loading) ? loading : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {
+  const cardCls = (0, _clsx.clsx)(`${prefixCls}`, className, hashId, {
+    [`${prefixCls}-border`]: variant === 'outlined',
+    [`${prefixCls}-box-shadow`]: boxShadow,
+    [`${prefixCls}-contain-card`]: containProCard,
+    [`${prefixCls}-loading`]: loading,
+    [`${prefixCls}-split`]: split === 'vertical' || split === 'horizontal',
+    [`${prefixCls}-ghost`]: ghost,
+    [`${prefixCls}-hoverable`]: hoverable,
+    [`${prefixCls}-size-${size}`]: size,
+    [`${prefixCls}-type-${type}`]: type,
+    [`${prefixCls}-collapse`]: collapsed,
+    [`${prefixCls}-checked`]: checked
+  });
+  const bodyCls = (0, _clsx.clsx)(`${prefixCls}-body`, hashId, {
+    [`${prefixCls}-body-center`]: layout === 'center',
+    [`${prefixCls}-body-direction-column`]: split === 'horizontal' || direction === 'column',
+    [`${prefixCls}-body-wrap`]: wrap && containProCard
+  });
+
+  // 支持新的 styles API，同时保持向后兼容
+  const cardBodyStyle = styles?.body || bodyStyle;
+  const cardHeadStyle = styles?.header || headStyle;
+  const loadingDOM = /*#__PURE__*/_react.default.isValidElement(loading) ? loading : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {
     prefix: prefixCls,
-    style: (bodyStyle === null || bodyStyle === void 0 ? void 0 : bodyStyle.padding) === 0 || (bodyStyle === null || bodyStyle === void 0 ? void 0 : bodyStyle.padding) === '0px' ? {
+    style: cardBodyStyle?.padding === 0 || cardBodyStyle?.padding === '0px' ? {
       padding: 24
     } : undefined
   });
   // 非受控情况下展示
-  var collapsibleButton = collapsible && controlCollapsed === undefined && (collapsibleIconRender ? collapsibleIconRender({
-    collapsed: collapsed
+  const collapsibleButton = collapsible && controlCollapsed === undefined && (collapsibleIconRender ? collapsibleIconRender({
+    collapsed
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {
-    onClick: function onClick() {
+    onClick: () => {
       if (collapsible === 'icon') setCollapsed(!collapsed);
     },
     rotate: !collapsed ? 90 : undefined,
-    className: "".concat(prefixCls, "-collapsible-icon ").concat(hashId).trim()
+    className: `${prefixCls}-collapsible-icon ${hashId}`.trim()
   }));
-  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: cardCls,
     style: style,
     ref: ref,
-    onClick: function onClick(e) {
-      var _rest$onClick;
-      onChecked === null || onChecked === void 0 || onChecked(e);
-      rest === null || rest === void 0 || (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 || _rest$onClick.call(rest, e);
-    }
-  }, (0, _util.omit)(rest, ['prefixCls', 'colSpan'])), {}, {
+    onClick: e => {
+      onChecked?.(e);
+      rest?.onClick?.(e);
+    },
+    ...(0, _util.omit)(rest, ['prefixCls', 'colSpan']),
     children: [(title || extra || collapsibleButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)("".concat(prefixCls, "-header"), hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-header-border"), headerBordered || type === 'inner'), "".concat(prefixCls, "-header-collapsible"), collapsibleButton)),
-      style: headStyle,
-      onClick: function onClick() {
+      className: (0, _clsx.clsx)(`${prefixCls}-header`, hashId, {
+        [`${prefixCls}-header-border`]: headerBordered || type === 'inner',
+        [`${prefixCls}-header-collapsible`]: collapsibleButton
+      }),
+      style: cardHeadStyle,
+      onClick: () => {
         if (collapsible === 'header' || collapsible === true) setCollapsed(!collapsed);
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "".concat(prefixCls, "-title ").concat(hashId).trim(),
+        className: `${prefixCls}-title ${hashId}`.trim(),
         children: [collapsibleButton, /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.LabelIconTip, {
           label: title,
           tooltip: tooltip,
           subTitle: subTitle
         })]
       }), extra && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "".concat(prefixCls, "-extra ").concat(hashId).trim(),
-        onClick: function onClick(e) {
-          return e.stopPropagation();
-        },
+        className: `${prefixCls}-extra ${hashId}`.trim(),
+        onClick: e => e.stopPropagation(),
         children: extra
       })]
     }), tabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(prefixCls, "-tabs ").concat(hashId).trim(),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-        onChange: tabs.onChange
-      }, (0, _util.omit)(tabs, ['cardProps'])), {}, {
+      className: `${prefixCls}-tabs ${hashId}`.trim(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, {
+        onChange: tabs.onChange,
+        ...(0, _util.omit)(tabs, ['cardProps']),
         // @ts-ignore
         items: ModifyTabItemsContent,
         children: loading ? loadingDOM : children
-      }))
+      })
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: bodyCls,
       style: cardBodyStyle,
@@ -253,6 +272,6 @@ var Card = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       actions: actions,
       prefixCls: prefixCls
     }) : null]
-  })));
+  }));
 });
 var _default = exports.default = Card;

package/lib/card/components/Card/style.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export default function useStyle(prefixCls: string): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };