@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.3

package/es/layout/components/PageContainer/style/index.js

@@ -1,124 +1,84 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
-// src/layout/components/PageContainer/style/index.ts
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useStyle as useAntdStyle } from "../../../../provider";
-var [sm, md, lg, xl] = [576, 768, 992, 1200].map(
-  (bp) => `@media (max-width: ${bp}px)`
-);
-var genPageContainerStyle = (token) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D;
-  return {
-    [token.componentCls]: {
-      position: "relative",
-      "&-children-container": {
-        paddingBlockStart: 0,
-        paddingBlockEnd: (_b = (_a = token.layout) == null ? void 0 : _a.pageContainer) == null ? void 0 : _b.paddingBlockPageContainerContent,
-        paddingInline: (_d = (_c = token.layout) == null ? void 0 : _c.pageContainer) == null ? void 0 : _d.paddingInlinePageContainerContent
-      },
-      "&-children-container-no-header": {
-        paddingBlockStart: (_f = (_e = token.layout) == null ? void 0 : _e.pageContainer) == null ? void 0 : _f.paddingBlockPageContainerContent
-      },
-      "&-affix": {
-        [`${token.antCls}-affix`]: {
-          [`${token.componentCls}-warp`]: {
-            backgroundColor: (_h = (_g = token.layout) == null ? void 0 : _g.pageContainer) == null ? void 0 : _h.colorBgPageContainerFixed,
-            transition: "background-color 0.3s",
-            boxShadow: "0 2px 8px #f0f1f2"
-          }
-        }
-      },
-      ["& &-warp-page-header"]: {
-        paddingBlockStart: ((_k = (_j = (_i = token.layout) == null ? void 0 : _i.pageContainer) == null ? void 0 : _j.paddingBlockPageContainerContent) != null ? _k : 40) / 4,
-        paddingBlockEnd: ((_n = (_m = (_l = token.layout) == null ? void 0 : _l.pageContainer) == null ? void 0 : _m.paddingBlockPageContainerContent) != null ? _n : 40) / 2,
-        paddingInlineStart: (_p = (_o = token.layout) == null ? void 0 : _o.pageContainer) == null ? void 0 : _p.paddingInlinePageContainerContent,
-        paddingInlineEnd: (_r = (_q = token.layout) == null ? void 0 : _q.pageContainer) == null ? void 0 : _r.paddingInlinePageContainerContent,
-        [`& ~ ${token.proComponentsCls}-grid-content`]: {
-          [`${token.proComponentsCls}-page-container-children-content`]: {
-            paddingBlock: ((_u = (_t = (_s = token.layout) == null ? void 0 : _s.pageContainer) == null ? void 0 : _t.paddingBlockPageContainerContent) != null ? _u : 24) / 3
-          }
-        },
-        [`${token.antCls}-page-header-breadcrumb`]: {
-          paddingBlockStart: ((_x = (_w = (_v = token.layout) == null ? void 0 : _v.pageContainer) == null ? void 0 : _w.paddingBlockPageContainerContent) != null ? _x : 40) / 4 + 10
-        },
-        [`${token.antCls}-page-header-heading`]: {
-          paddingBlockStart: ((_A = (_z = (_y = token.layout) == null ? void 0 : _y.pageContainer) == null ? void 0 : _z.paddingBlockPageContainerContent) != null ? _A : 40) / 4
-        },
-        [`${token.antCls}-page-header-footer`]: {
-          marginBlockStart: ((_D = (_C = (_B = token.layout) == null ? void 0 : _B.pageContainer) == null ? void 0 : _C.paddingBlockPageContainerContent) != null ? _D : 40) / 4
-        }
-      },
-      "&-detail": {
-        display: "flex",
-        [sm]: {
-          display: "block"
-        }
-      },
-      "&-main": {
-        width: "100%"
-      },
-      "&-row": {
-        display: "flex",
-        width: "100%",
-        [md]: {
-          display: "block"
-        }
-      },
-      "&-content": {
-        flex: "auto",
-        width: "100%"
-      },
-      "&-extraContent": {
-        flex: "0 1 auto",
-        minWidth: "242px",
-        marginInlineStart: 88,
-        textAlign: "end",
-        [xl]: {
-          marginInlineStart: 44
-        },
-        [lg]: {
-          marginInlineStart: 20
-        },
-        [md]: {
-          marginInlineStart: 0,
-          textAlign: "start"
-        },
-        [sm]: {
-          marginInlineStart: 0
-        }
-      }
-    }
-  };
+var _map = [576, 768, 992, 1200].map(function (bp) {
+    return "@media (max-width: ".concat(bp, "px)");
+  }),
+  _map2 = _slicedToArray(_map, 4),
+  sm = _map2[0],
+  md = _map2[1],
+  lg = _map2[2],
+  xl = _map2[3];
+var genPageContainerStyle = function genPageContainerStyle(token) {
+  var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout$pageCon, _token$layout5, _token$layout$pageCon2, _token$layout6, _token$layout7, _token$layout8, _token$layout$pageCon3, _token$layout9, _token$layout$pageCon4, _token$layout10, _token$layout$pageCon5, _token$layout11, _token$layout$pageCon6, _token$layout12;
+  return _defineProperty({}, token.componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    position: 'relative',
+    '&-children-container': {
+      paddingBlockStart: 0,
+      paddingBlockEnd: (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.pageContainer) === null || _token$layout === void 0 ? void 0 : _token$layout.paddingBlockPageContainerContent,
+      paddingInline: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.pageContainer) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.paddingInlinePageContainerContent
+    },
+    '&-children-container-no-header': {
+      paddingBlockStart: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.pageContainer) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.paddingBlockPageContainerContent
+    },
+    '&-affix': _defineProperty({}, "".concat(token.antCls, "-affix"), _defineProperty({}, "".concat(token.componentCls, "-warp"), {
+      backgroundColor: (_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.pageContainer) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorBgPageContainerFixed,
+      transition: 'background-color 0.3s',
+      boxShadow: '0 2px 8px #f0f1f2'
+    }))
+  }, '& &-warp-page-header', _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    paddingBlockStart: ((_token$layout$pageCon = (_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.pageContainer) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.paddingBlockPageContainerContent) !== null && _token$layout$pageCon !== void 0 ? _token$layout$pageCon : 40) / 4,
+    paddingBlockEnd: ((_token$layout$pageCon2 = (_token$layout6 = token.layout) === null || _token$layout6 === void 0 || (_token$layout6 = _token$layout6.pageContainer) === null || _token$layout6 === void 0 ? void 0 : _token$layout6.paddingBlockPageContainerContent) !== null && _token$layout$pageCon2 !== void 0 ? _token$layout$pageCon2 : 40) / 2,
+    paddingInlineStart: (_token$layout7 = token.layout) === null || _token$layout7 === void 0 || (_token$layout7 = _token$layout7.pageContainer) === null || _token$layout7 === void 0 ? void 0 : _token$layout7.paddingInlinePageContainerContent,
+    paddingInlineEnd: (_token$layout8 = token.layout) === null || _token$layout8 === void 0 || (_token$layout8 = _token$layout8.pageContainer) === null || _token$layout8 === void 0 ? void 0 : _token$layout8.paddingInlinePageContainerContent
+  }, "& ~ ".concat(token.proComponentsCls, "-grid-content"), _defineProperty({}, "".concat(token.proComponentsCls, "-page-container-children-content"), {
+    paddingBlock: ((_token$layout$pageCon3 = (_token$layout9 = token.layout) === null || _token$layout9 === void 0 || (_token$layout9 = _token$layout9.pageContainer) === null || _token$layout9 === void 0 ? void 0 : _token$layout9.paddingBlockPageContainerContent) !== null && _token$layout$pageCon3 !== void 0 ? _token$layout$pageCon3 : 24) / 3
+  })), "".concat(token.antCls, "-page-header-breadcrumb"), {
+    paddingBlockStart: ((_token$layout$pageCon4 = (_token$layout10 = token.layout) === null || _token$layout10 === void 0 || (_token$layout10 = _token$layout10.pageContainer) === null || _token$layout10 === void 0 ? void 0 : _token$layout10.paddingBlockPageContainerContent) !== null && _token$layout$pageCon4 !== void 0 ? _token$layout$pageCon4 : 40) / 4 + 10
+  }), "".concat(token.antCls, "-page-header-heading"), {
+    paddingBlockStart: ((_token$layout$pageCon5 = (_token$layout11 = token.layout) === null || _token$layout11 === void 0 || (_token$layout11 = _token$layout11.pageContainer) === null || _token$layout11 === void 0 ? void 0 : _token$layout11.paddingBlockPageContainerContent) !== null && _token$layout$pageCon5 !== void 0 ? _token$layout$pageCon5 : 40) / 4
+  }), "".concat(token.antCls, "-page-header-footer"), {
+    marginBlockStart: ((_token$layout$pageCon6 = (_token$layout12 = token.layout) === null || _token$layout12 === void 0 || (_token$layout12 = _token$layout12.pageContainer) === null || _token$layout12 === void 0 ? void 0 : _token$layout12.paddingBlockPageContainerContent) !== null && _token$layout$pageCon6 !== void 0 ? _token$layout$pageCon6 : 40) / 4
+  })), '&-detail', _defineProperty({
+    display: 'flex'
+  }, sm, {
+    display: 'block'
+  })), '&-main', {
+    width: '100%'
+  }), '&-row', _defineProperty({
+    display: 'flex',
+    width: '100%'
+  }, md, {
+    display: 'block'
+  })), '&-content', {
+    flex: 'auto',
+    width: '100%'
+  }), '&-extraContent', _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    flex: '0 1 auto',
+    minWidth: '242px',
+    marginInlineStart: 88,
+    textAlign: 'end'
+  }, xl, {
+    marginInlineStart: 44
+  }), lg, {
+    marginInlineStart: 20
+  }), md, {
+    marginInlineStart: 0,
+    textAlign: 'start'
+  }), sm, {
+    marginInlineStart: 0
+  })));
 };
-function useStyle(prefixCls, componentsToken) {
-  return useAntdStyle("ProLayoutPageContainer", (token) => {
-    var _a;
-    const proCardToken = __spreadProps(__spreadValues({}, token), {
-      componentCls: `.${prefixCls}`,
-      layout: __spreadProps(__spreadValues({}, token == null ? void 0 : token.layout), {
-        pageContainer: __spreadValues(__spreadValues({}, (_a = token == null ? void 0 : token.layout) == null ? void 0 : _a.pageContainer), componentsToken)
+export function useStyle(prefixCls, componentsToken) {
+  return useAntdStyle('ProLayoutPageContainer', function (token) {
+    var _token$layout13;
+    var proCardToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls),
+      layout: _objectSpread(_objectSpread({}, token === null || token === void 0 ? void 0 : token.layout), {}, {
+        pageContainer: _objectSpread(_objectSpread({}, token === null || token === void 0 || (_token$layout13 = token.layout) === null || _token$layout13 === void 0 ? void 0 : _token$layout13.pageContainer), componentsToken)
       })
     });
     return [genPageContainerStyle(proCardToken)];
   });
-}
-export {
-  useStyle
-};
+}

package/es/layout/components/PageContainer/style/stylish.js

@@ -1,41 +1,13 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
-// src/layout/components/PageContainer/style/stylish.ts
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useStyle as useAntdStyle } from "../../../../provider";
-function useStylish(prefixCls, {
-  stylish
-}) {
-  return useAntdStyle("ProLayoutPageContainerStylish", (token) => {
-    const stylishToken = __spreadProps(__spreadValues({}, token), {
-      componentCls: `.${prefixCls}`
+export function useStylish(prefixCls, _ref) {
+  var stylish = _ref.stylish;
+  return useAntdStyle('ProLayoutPageContainerStylish', function (token) {
+    var stylishToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
     });
-    if (!stylish)
-      return [];
-    return [
-      {
-        [`div${stylishToken.componentCls}`]: stylish == null ? void 0 : stylish(stylishToken)
-      }
-    ];
+    if (!stylish) return [];
+    return [_defineProperty({}, "div".concat(stylishToken.componentCls), stylish === null || stylish === void 0 ? void 0 : stylish(stylishToken))];
   });
-}
-export {
-  useStylish
-};
+}

package/es/layout/components/PageHeader/index.js

@@ -1,155 +1,170 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
-// src/layout/components/PageHeader/index.tsx
-import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons";
-import { Avatar, Breadcrumb, ConfigProvider, Space } from "antd";
-import classNames from "classnames";
-import ResizeObserver from "rc-resize-observer";
-import React from "react";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
+import { Avatar, Breadcrumb, ConfigProvider, Space } from 'antd';
+import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
+import React from 'react';
 import useStyle from "./style";
-var renderBack = (prefixCls, hashId, backIcon, onBack) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var renderBack = function renderBack(prefixCls, hashId, backIcon, onBack) {
   if (!backIcon || !onBack) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-back ${hashId}`.trim() }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(prefixCls, "-back ").concat(hashId).trim(),
+    children: /*#__PURE__*/_jsx("div", {
       role: "button",
-      onClick: (e) => {
-        onBack == null ? void 0 : onBack(e);
+      onClick: function onClick(e) {
+        onBack === null || onBack === void 0 || onBack(e);
       },
-      className: `${prefixCls}-back-button ${hashId}`.trim(),
-      "aria-label": "back"
-    },
-    backIcon
-  ));
-};
-var renderBreadcrumb = (breadcrumb, prefixCls) => {
-  var _a;
-  if (!((_a = breadcrumb.items) == null ? void 0 : _a.length))
-    return null;
-  return /* @__PURE__ */ React.createElement(
-    Breadcrumb,
-    __spreadProps(__spreadValues({}, breadcrumb), {
-      className: classNames(`${prefixCls}-breadcrumb`, breadcrumb.className)
+      className: "".concat(prefixCls, "-back-button ").concat(hashId).trim(),
+      "aria-label": "back",
+      children: backIcon
     })
-  );
+  });
 };
-var getBackIcon = (props, direction = "ltr") => {
-  if (props.backIcon !== void 0) {
+var renderBreadcrumb = function renderBreadcrumb(breadcrumb, prefixCls) {
+  var _breadcrumb$items;
+  if (!((_breadcrumb$items = breadcrumb.items) !== null && _breadcrumb$items !== void 0 && _breadcrumb$items.length)) return null;
+  return /*#__PURE__*/_jsx(Breadcrumb, _objectSpread(_objectSpread({}, breadcrumb), {}, {
+    className: classNames("".concat(prefixCls, "-breadcrumb"), breadcrumb.className)
+  }));
+};
+var getBackIcon = function getBackIcon(props) {
+  var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'ltr';
+  if (props.backIcon !== undefined) {
     return props.backIcon;
   }
-  return direction === "rtl" ? /* @__PURE__ */ React.createElement(ArrowRightOutlined, null) : /* @__PURE__ */ React.createElement(ArrowLeftOutlined, null);
+  return direction === 'rtl' ? /*#__PURE__*/_jsx(ArrowRightOutlined, {}) : /*#__PURE__*/_jsx(ArrowLeftOutlined, {});
 };
-var renderTitle = (prefixCls, props, direction = "ltr", hashId) => {
-  const { title, avatar, subTitle, tags, extra, onBack } = props;
-  const headingPrefixCls = `${prefixCls}-heading`;
-  const hasHeading = title || subTitle || tags || extra;
+var renderTitle = function renderTitle(prefixCls, props) {
+  var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'ltr';
+  var hashId = arguments.length > 3 ? arguments[3] : undefined;
+  var title = props.title,
+    avatar = props.avatar,
+    subTitle = props.subTitle,
+    tags = props.tags,
+    extra = props.extra,
+    onBack = props.onBack;
+  var headingPrefixCls = "".concat(prefixCls, "-heading");
+  var hasHeading = title || subTitle || tags || extra;
+  // If there is nothing, return a null
   if (!hasHeading) {
     return null;
   }
-  const backIcon = getBackIcon(props, direction);
-  const backIconDom = renderBack(prefixCls, hashId, backIcon, onBack);
-  const hasTitle = backIconDom || avatar || hasHeading;
-  return /* @__PURE__ */ React.createElement("div", { className: headingPrefixCls + " " + hashId }, hasTitle && /* @__PURE__ */ React.createElement("div", { className: `${headingPrefixCls}-left ${hashId}`.trim() }, backIconDom, avatar && /* @__PURE__ */ React.createElement(
-    Avatar,
-    __spreadValues({
-      className: classNames(
-        `${headingPrefixCls}-avatar`,
-        hashId,
-        avatar.className
-      )
-    }, avatar)
-  ), title && /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: `${headingPrefixCls}-title ${hashId}`.trim(),
-      title: typeof title === "string" ? title : void 0
-    },
-    title
-  ), subTitle && /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: `${headingPrefixCls}-sub-title ${hashId}`.trim(),
-      title: typeof subTitle === "string" ? subTitle : void 0
-    },
-    subTitle
-  ), tags && /* @__PURE__ */ React.createElement("span", { className: `${headingPrefixCls}-tags ${hashId}`.trim() }, tags)), extra && /* @__PURE__ */ React.createElement("span", { className: `${headingPrefixCls}-extra ${hashId}`.trim() }, /* @__PURE__ */ React.createElement(Space, null, extra)));
+  var backIcon = getBackIcon(props, direction);
+  var backIconDom = renderBack(prefixCls, hashId, backIcon, onBack);
+  var hasTitle = backIconDom || avatar || hasHeading;
+  return /*#__PURE__*/_jsxs("div", {
+    className: headingPrefixCls + ' ' + hashId,
+    children: [hasTitle && /*#__PURE__*/_jsxs("div", {
+      className: "".concat(headingPrefixCls, "-left ").concat(hashId).trim(),
+      children: [backIconDom, avatar && /*#__PURE__*/_jsx(Avatar, _objectSpread({
+        className: classNames("".concat(headingPrefixCls, "-avatar"), hashId, avatar.className)
+      }, avatar)), title && /*#__PURE__*/_jsx("span", {
+        className: "".concat(headingPrefixCls, "-title ").concat(hashId).trim(),
+        title: typeof title === 'string' ? title : undefined,
+        children: title
+      }), subTitle && /*#__PURE__*/_jsx("span", {
+        className: "".concat(headingPrefixCls, "-sub-title ").concat(hashId).trim(),
+        title: typeof subTitle === 'string' ? subTitle : undefined,
+        children: subTitle
+      }), tags && /*#__PURE__*/_jsx("span", {
+        className: "".concat(headingPrefixCls, "-tags ").concat(hashId).trim(),
+        children: tags
+      })]
+    }), extra && /*#__PURE__*/_jsx("span", {
+      className: "".concat(headingPrefixCls, "-extra ").concat(hashId).trim(),
+      children: /*#__PURE__*/_jsx(Space, {
+        children: extra
+      })
+    })]
+  });
 };
-var renderFooter = (prefixCls, footer, hashId) => {
+var renderFooter = function renderFooter(prefixCls, footer, hashId) {
   if (footer) {
-    return /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-footer ${hashId}`.trim() }, footer);
+    return /*#__PURE__*/_jsx("div", {
+      className: "".concat(prefixCls, "-footer ").concat(hashId).trim(),
+      children: footer
+    });
   }
   return null;
 };
-var renderChildren = (prefixCls, children, hashId) => /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-content ${hashId}`.trim() }, children);
-var PageHeader = (props) => {
-  var _a;
-  const [compact, updateCompact] = React.useState(false);
-  const onResize = ({ width }) => updateCompact(width < 768);
-  const { getPrefixCls, direction } = React.useContext(
-    ConfigProvider.ConfigContext
-  );
-  const {
-    prefixCls: customizePrefixCls,
-    style,
-    footer,
-    children,
-    breadcrumb,
-    breadcrumbRender,
-    className: customizeClassName,
-    contentWidth,
-    layout,
-    ghost = true
-  } = props;
-  const prefixCls = getPrefixCls("page-header", customizePrefixCls);
-  const { wrapSSR, hashId } = useStyle(prefixCls);
-  const getDefaultBreadcrumbDom = () => {
-    if (breadcrumb == null ? void 0 : breadcrumb.items) {
+var renderChildren = function renderChildren(prefixCls, children, hashId) {
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(prefixCls, "-content ").concat(hashId).trim(),
+    children: children
+  });
+};
+var PageHeader = function PageHeader(props) {
+  var _breadcrumbRender;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    compact = _React$useState2[0],
+    updateCompact = _React$useState2[1];
+  var onResize = function onResize(_ref) {
+    var width = _ref.width;
+    return updateCompact(width < 768);
+  };
+  var _React$useContext = React.useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _React$useContext.getPrefixCls,
+    direction = _React$useContext.direction;
+  var customizePrefixCls = props.prefixCls,
+    style = props.style,
+    footer = props.footer,
+    children = props.children,
+    breadcrumb = props.breadcrumb,
+    breadcrumbRender = props.breadcrumbRender,
+    customizeClassName = props.className,
+    contentWidth = props.contentWidth,
+    layout = props.layout,
+    _props$ghost = props.ghost,
+    ghost = _props$ghost === void 0 ? true : _props$ghost;
+  var prefixCls = getPrefixCls('page-header', customizePrefixCls);
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var getDefaultBreadcrumbDom = function getDefaultBreadcrumbDom() {
+    if (breadcrumb !== null && breadcrumb !== void 0 && breadcrumb.items) {
       return renderBreadcrumb(breadcrumb, prefixCls);
     }
     return null;
   };
-  const defaultBreadcrumbDom = getDefaultBreadcrumbDom();
-  const isBreadcrumbComponent = breadcrumb && "props" in breadcrumb;
-  const breadcrumbRenderDomFromProps = (_a = breadcrumbRender == null ? void 0 : breadcrumbRender(__spreadProps(__spreadValues({}, props), { prefixCls }), defaultBreadcrumbDom)) != null ? _a : defaultBreadcrumbDom;
-  const breadcrumbDom = isBreadcrumbComponent ? breadcrumb : Array.isArray(breadcrumbRenderDomFromProps) ? renderBreadcrumb({ items: breadcrumbRenderDomFromProps }, prefixCls) : breadcrumbRenderDomFromProps;
-  const className = classNames(prefixCls, hashId, customizeClassName, {
-    [`${prefixCls}-has-breadcrumb`]: !!breadcrumbDom,
-    [`${prefixCls}-has-footer`]: !!footer,
-    [`${prefixCls}-rtl`]: direction === "rtl",
-    [`${prefixCls}-compact`]: compact,
-    [`${prefixCls}-wide`]: contentWidth === "Fixed" && layout == "top",
-    [`${prefixCls}-ghost`]: ghost
-  });
-  const title = renderTitle(prefixCls, props, direction, hashId);
-  const childDom = children && renderChildren(prefixCls, children, hashId);
-  const footerDom = renderFooter(prefixCls, footer, hashId);
+  var defaultBreadcrumbDom = getDefaultBreadcrumbDom();
+  var isBreadcrumbComponent = breadcrumb && 'props' in breadcrumb;
+
+  // support breadcrumbRender function
+  var breadcrumbRenderDomFromProps = (_breadcrumbRender = breadcrumbRender === null || breadcrumbRender === void 0 ? void 0 : breadcrumbRender(_objectSpread(_objectSpread({}, props), {}, {
+    prefixCls: prefixCls
+  }), defaultBreadcrumbDom)) !== null && _breadcrumbRender !== void 0 ? _breadcrumbRender : defaultBreadcrumbDom;
+
+  // 如果 breadcrumbRender 返回的是数组，需要转换为 Breadcrumb 组件
+  // 如果返回的是 React.ReactNode，直接使用
+  var breadcrumbDom = isBreadcrumbComponent ? breadcrumb : Array.isArray(breadcrumbRenderDomFromProps) ? renderBreadcrumb({
+    items: breadcrumbRenderDomFromProps
+  }, prefixCls) : breadcrumbRenderDomFromProps;
+  var className = classNames(prefixCls, hashId, customizeClassName, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-has-breadcrumb"), !!breadcrumbDom), "".concat(prefixCls, "-has-footer"), !!footer), "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-compact"), compact), "".concat(prefixCls, "-wide"), contentWidth === 'Fixed' && layout == 'top'), "".concat(prefixCls, "-ghost"), ghost));
+  var title = renderTitle(prefixCls, props, direction, hashId);
+  var childDom = children && renderChildren(prefixCls, children, hashId);
+  var footerDom = renderFooter(prefixCls, footer, hashId);
   if (!breadcrumbDom && !title && !footerDom && !childDom) {
-    return /* @__PURE__ */ React.createElement("div", { className: classNames(hashId, [`${prefixCls}-no-children`]) });
+    return /*#__PURE__*/_jsx("div", {
+      className: classNames(hashId, ["".concat(prefixCls, "-no-children")])
+    });
   }
-  return wrapSSR(
-    /* @__PURE__ */ React.createElement(ResizeObserver, { onResize }, (ref) => /* @__PURE__ */ React.createElement("div", { ref, className, style }, breadcrumbDom, title, childDom, footerDom))
-  );
-};
-export {
-  PageHeader
+  return wrapSSR( /*#__PURE__*/_jsx(ResizeObserver, {
+    onResize: onResize,
+    children: function children(ref) {
+      return /*#__PURE__*/_jsxs("div", {
+        ref: ref,
+        className: className,
+        style: style,
+        children: [breadcrumbDom, title, childDom, footerDom]
+      });
+    }
+  }));
 };
+export { PageHeader };