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

package/lib/layout/components/SiderMenu/SiderMenu.js

@@ -1,402 +1,289 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-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));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/layout/components/SiderMenu/SiderMenu.tsx
-var SiderMenu_exports = {};
-__export(SiderMenu_exports, {
-  SiderMenu: () => SiderMenu,
-  renderLogoAndTitle: () => renderLogoAndTitle
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(SiderMenu_exports);
-var import_antd = require("antd");
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_provider = require("../../../provider");
-var import_AppsLogoComponents = require("../AppsLogoComponents");
-var import_CollapsedIcon = require("../CollapsedIcon");
-var import_BaseMenu = require("./BaseMenu");
-var import_stylish = require("./style/stylish");
-var _SafetyWarningProvider = import_react.default.memo(
-  (props) => {
-    if (true) {
-      console.warn(
-        `[pro-layout] SiderMenu required antd@^5.11.2 for access the menu context, please upgrade your antd version (current ${import_antd.version}).`
-      );
-    }
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.children);
-  }
-);
-var {
-  Sider,
-  _InternalSiderContext: SiderContext = { Provider: _SafetyWarningProvider }
-} = import_antd.Layout;
-var renderLogoAndTitle = (props, renderKey = "menuHeaderRender") => {
-  const { logo, title, layout } = props;
-  const renderFunction = props[renderKey];
+exports.renderLogoAndTitle = exports.SiderMenu = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _provider = require("../../../provider");
+var _AppsLogoComponents = require("../AppsLogoComponents");
+var _CollapsedIcon = require("../CollapsedIcon");
+var _BaseMenu = require("./BaseMenu");
+var _stylish = require("./style/stylish");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["title", "render"];
+var _SafetyWarningProvider = /*#__PURE__*/_react.default.memo(function (props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: props.children
+  });
+});
+var Sider = _antd.Layout.Sider,
+  _Layout$_InternalSide = _antd.Layout._InternalSiderContext,
+  SiderContext = _Layout$_InternalSide === void 0 ? {
+    Provider: _SafetyWarningProvider
+  } : _Layout$_InternalSide;
+/**
+ * 渲染 title 和 logo
+ *
+ * @param props
+ * @param renderKey
+ * @returns
+ */
+var renderLogoAndTitle = exports.renderLogoAndTitle = function renderLogoAndTitle(props) {
+  var renderKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'menuHeaderRender';
+  var logo = props.logo,
+    title = props.title,
+    layout = props.layout;
+  var renderFunction = props[renderKey];
   if (renderFunction === false) {
     return null;
   }
-  const logoDom = (0, import_AppsLogoComponents.defaultRenderLogo)(logo);
-  const titleDom = /* @__PURE__ */ import_react.default.createElement("h1", null, title != null ? title : "Ant Design Pro");
+  var logoDom = (0, _AppsLogoComponents.defaultRenderLogo)(logo);
+  var titleDom = /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+    children: title !== null && title !== void 0 ? title : 'Ant Design Pro'
+  });
   if (renderFunction) {
+    // when collapsed, no render title
     return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
   }
+
+  /**
+   * 收起来时候直接不显示
+   */
   if (props.isMobile) {
     return null;
   }
-  if (layout === "mix" && renderKey === "menuHeaderRender")
-    return false;
+  if (layout === 'mix' && renderKey === 'menuHeaderRender') return false;
   if (props.collapsed) {
-    return /* @__PURE__ */ import_react.default.createElement("a", { key: "title" }, logoDom);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+      children: logoDom
+    }, "title");
   }
-  return /* @__PURE__ */ import_react.default.createElement("a", { key: "title" }, logoDom, titleDom);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
+    children: [logoDom, titleDom]
+  }, "title");
 };
-var SiderMenu = (props) => {
-  var _a;
-  const {
-    collapsed,
-    originCollapsed,
-    fixSiderbar,
-    menuFooterRender,
-    onCollapse,
-    theme,
-    siderWidth,
-    isMobile,
-    onMenuHeaderClick,
-    breakpoint = "lg",
-    style,
-    layout,
-    menuExtraRender = false,
-    links,
-    menuContentRender,
-    collapsedButtonRender,
-    prefixCls,
-    avatarProps,
-    //@ts-ignore
-    rightContentRender,
-    actionsRender,
-    onOpenChange,
-    stylish,
-    logoStyle
-  } = props;
-  const { hashId } = (0, import_react.useContext)(import_provider.ProProvider);
-  const showSiderExtraDom = (0, import_react.useMemo)(() => {
-    if (isMobile)
-      return false;
-    if (layout === "mix")
-      return false;
+var SiderMenu = exports.SiderMenu = function SiderMenu(props) {
+  var _props$menu2;
+  var collapsed = props.collapsed,
+    originCollapsed = props.originCollapsed,
+    fixSiderbar = props.fixSiderbar,
+    menuFooterRender = props.menuFooterRender,
+    _onCollapse = props.onCollapse,
+    theme = props.theme,
+    siderWidth = props.siderWidth,
+    isMobile = props.isMobile,
+    onMenuHeaderClick = props.onMenuHeaderClick,
+    _props$breakpoint = props.breakpoint,
+    breakpoint = _props$breakpoint === void 0 ? 'lg' : _props$breakpoint,
+    style = props.style,
+    layout = props.layout,
+    _props$menuExtraRende = props.menuExtraRender,
+    menuExtraRender = _props$menuExtraRende === void 0 ? false : _props$menuExtraRende,
+    links = props.links,
+    menuContentRender = props.menuContentRender,
+    collapsedButtonRender = props.collapsedButtonRender,
+    prefixCls = props.prefixCls,
+    avatarProps = props.avatarProps,
+    actionsRender = props.actionsRender,
+    onOpenChange = props.onOpenChange,
+    stylish = props.stylish,
+    logoStyle = props.logoStyle;
+  var _useContext = (0, _react.useContext)(_provider.ProProvider),
+    hashId = _useContext.hashId;
+  var showSiderExtraDom = (0, _react.useMemo)(function () {
+    if (isMobile) return false;
+    if (layout === 'mix') return false;
     return true;
   }, [isMobile, layout]);
-  const baseClassName = `${prefixCls}-sider`;
-  const collapsedWidth = 64;
-  const stylishClassName = (0, import_stylish.useStylish)(
-    `${baseClassName}.${baseClassName}-stylish`,
-    {
-      stylish,
-      proLayoutCollapsedWidth: collapsedWidth
-    }
-  );
-  const siderClassName = (0, import_classnames.default)(`${baseClassName}`, hashId, {
-    [`${baseClassName}-fixed`]: fixSiderbar,
-    [`${baseClassName}-fixed-mix`]: layout === "mix" && !isMobile && fixSiderbar,
-    [`${baseClassName}-collapsed`]: props.collapsed,
-    [`${baseClassName}-layout-${layout}`]: layout && !isMobile,
-    [`${baseClassName}-light`]: theme !== "dark",
-    [`${baseClassName}-mix`]: layout === "mix" && !isMobile,
-    [`${baseClassName}-stylish`]: !!stylish
+  var baseClassName = "".concat(prefixCls, "-sider");
+
+  // 收起的宽度
+  var collapsedWidth = 64;
+
+  // 之所以这样写是为了提升样式优先级，不然会被sider 自带的覆盖掉
+  var stylishClassName = (0, _stylish.useStylish)("".concat(baseClassName, ".").concat(baseClassName, "-stylish"), {
+    stylish: stylish,
+    proLayoutCollapsedWidth: collapsedWidth
   });
-  const headerDom = renderLogoAndTitle(props);
-  const extraDom = menuExtraRender && menuExtraRender(props);
-  const menuDom = (0, import_react.useMemo)(
-    () => menuContentRender !== false && /* @__PURE__ */ import_react.default.createElement(
-      import_BaseMenu.BaseMenu,
-      __spreadProps(__spreadValues({}, props), {
-        key: "base-menu",
-        mode: collapsed && !isMobile ? "vertical" : "inline",
-        handleOpenChange: onOpenChange,
-        style: {
-          width: "100%"
-        },
-        className: `${baseClassName}-menu ${hashId}`.trim()
-      })
-    ),
-    [baseClassName, hashId, menuContentRender, onOpenChange, props]
-  );
-  const linksMenuItems = (links || []).map((node, index) => ({
-    className: `${baseClassName}-link`,
-    label: node,
-    key: index
-  }));
-  const menuRenderDom = (0, import_react.useMemo)(() => {
+  var siderClassName = (0, _classnames.default)("".concat(baseClassName), hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-fixed"), fixSiderbar), "".concat(baseClassName, "-fixed-mix"), layout === 'mix' && !isMobile && fixSiderbar), "".concat(baseClassName, "-collapsed"), props.collapsed), "".concat(baseClassName, "-layout-").concat(layout), layout && !isMobile), "".concat(baseClassName, "-light"), theme !== 'dark'), "".concat(baseClassName, "-mix"), layout === 'mix' && !isMobile), "".concat(baseClassName, "-stylish"), !!stylish));
+  var headerDom = renderLogoAndTitle(props);
+  var extraDom = menuExtraRender && menuExtraRender(props);
+  var menuDom = (0, _react.useMemo)(function () {
+    return menuContentRender !== false && /*#__PURE__*/(0, _react.createElement)(_BaseMenu.BaseMenu, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      key: "base-menu",
+      mode: collapsed && !isMobile ? 'vertical' : 'inline',
+      handleOpenChange: onOpenChange,
+      style: {
+        width: '100%'
+      },
+      className: "".concat(baseClassName, "-menu ").concat(hashId).trim()
+    }));
+  }, [baseClassName, hashId, menuContentRender, onOpenChange, props]);
+  var linksMenuItems = (links || []).map(function (node, index) {
+    return {
+      className: "".concat(baseClassName, "-link"),
+      label: node,
+      key: index
+    };
+  });
+  var menuRenderDom = (0, _react.useMemo)(function () {
     return menuContentRender ? menuContentRender(props, menuDom) : menuDom;
   }, [menuContentRender, menuDom, props]);
-  const avatarDom = (0, import_react.useMemo)(() => {
-    if (!avatarProps)
-      return null;
-    const _a2 = avatarProps, { title, render } = _a2, rest = __objRest(_a2, ["title", "render"]);
-    const dom = /* @__PURE__ */ import_react.default.createElement("div", { className: `${baseClassName}-actions-avatar` }, (rest == null ? void 0 : rest.src) || (rest == null ? void 0 : rest.srcSet) || rest.icon || rest.children ? /* @__PURE__ */ import_react.default.createElement(import_antd.Avatar, __spreadValues({ size: 28 }, rest)) : null, avatarProps.title && !collapsed && /* @__PURE__ */ import_react.default.createElement("span", null, title));
+  var avatarDom = (0, _react.useMemo)(function () {
+    if (!avatarProps) return null;
+    var title = avatarProps.title,
+      render = avatarProps.render,
+      rest = (0, _objectWithoutProperties2.default)(avatarProps, _excluded);
+    var dom = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "".concat(baseClassName, "-actions-avatar"),
+      children: [rest !== null && rest !== void 0 && rest.src || rest !== null && rest !== void 0 && rest.srcSet || rest.icon || rest.children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Avatar, (0, _objectSpread2.default)({
+        size: 28
+      }, rest)) : null, avatarProps.title && !collapsed && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: title
+      })]
+    });
     if (render) {
       return render(avatarProps, dom, props);
     }
     return dom;
   }, [avatarProps, baseClassName, collapsed]);
-  const actionsDom = (0, import_react.useMemo)(
-    () => {
-      if (!actionsRender)
-        return null;
-      return /* @__PURE__ */ import_react.default.createElement(
-        import_antd.Space,
-        {
-          align: "center",
-          size: 4,
-          direction: collapsed ? "vertical" : "horizontal",
-          className: (0, import_classnames.default)([
-            `${baseClassName}-actions-list`,
-            collapsed && `${baseClassName}-actions-list-collapsed`,
-            hashId
-          ])
-        },
-        [actionsRender == null ? void 0 : actionsRender(props)].flat(1).map((item, index) => {
-          return /* @__PURE__ */ import_react.default.createElement(
-            "div",
-            {
-              key: index,
-              className: `${baseClassName}-actions-list-item ${hashId}`.trim()
-            },
-            item
-          );
-        })
-      );
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [actionsRender, baseClassName, collapsed]
-  );
-  const appsDom = (0, import_react.useMemo)(() => {
-    return /* @__PURE__ */ import_react.default.createElement(
-      import_AppsLogoComponents.AppsLogoComponents,
-      {
-        onItemClick: props.itemClick,
-        appListRender: props.appListRender,
-        appList: props.appList,
-        prefixCls: props.prefixCls
-      }
-    );
+  var actionsDom = (0, _react.useMemo)(function () {
+    if (!actionsRender) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
+      align: "center",
+      size: 4,
+      direction: collapsed ? 'vertical' : 'horizontal',
+      className: (0, _classnames.default)(["".concat(baseClassName, "-actions-list"), collapsed && "".concat(baseClassName, "-actions-list-collapsed"), hashId]),
+      children: [actionsRender === null || actionsRender === void 0 ? void 0 : actionsRender(props)].flat(1).map(function (item, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "".concat(baseClassName, "-actions-list-item ").concat(hashId).trim(),
+          children: item
+        }, index);
+      })
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [actionsRender, baseClassName, collapsed]);
+  var appsDom = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppsLogoComponents.AppsLogoComponents, {
+      onItemClick: props.itemClick,
+      appListRender: props.appListRender,
+      appList: props.appList,
+      prefixCls: props.prefixCls
+    });
   }, [props.appList, props.appListRender, props.prefixCls]);
-  const collapsedDom = (0, import_react.useMemo)(() => {
-    if (collapsedButtonRender === false)
-      return null;
-    const dom = /* @__PURE__ */ import_react.default.createElement(
-      import_CollapsedIcon.CollapsedIcon,
-      {
-        isMobile,
-        collapsed: originCollapsed,
-        className: `${baseClassName}-collapsed-button`,
-        onClick: () => {
-          onCollapse == null ? void 0 : onCollapse(!originCollapsed);
-        }
+  var collapsedDom = (0, _react.useMemo)(function () {
+    if (collapsedButtonRender === false) return null;
+    var dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsedIcon.CollapsedIcon, {
+      isMobile: isMobile,
+      collapsed: originCollapsed,
+      className: "".concat(baseClassName, "-collapsed-button"),
+      onClick: function onClick() {
+        _onCollapse === null || _onCollapse === void 0 || _onCollapse(!originCollapsed);
       }
-    );
-    if (collapsedButtonRender)
-      return collapsedButtonRender(collapsed, dom);
+    });
+    if (collapsedButtonRender) return collapsedButtonRender(collapsed, dom);
     return dom;
-  }, [
-    collapsedButtonRender,
-    isMobile,
-    originCollapsed,
-    baseClassName,
-    collapsed,
-    onCollapse
-  ]);
-  const actionAreaDom = (0, import_react.useMemo)(() => {
-    if (!avatarDom && !actionsDom)
-      return null;
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_classnames.default)(
-          `${baseClassName}-actions`,
-          hashId,
-          collapsed && `${baseClassName}-actions-collapsed`
-        )
-      },
-      avatarDom,
-      actionsDom
-    );
+  }, [collapsedButtonRender, isMobile, originCollapsed, baseClassName, collapsed, _onCollapse]);
+
+  /** 操作区域的dom */
+  var actionAreaDom = (0, _react.useMemo)(function () {
+    if (!avatarDom && !actionsDom) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)("".concat(baseClassName, "-actions"), hashId, collapsed && "".concat(baseClassName, "-actions-collapsed")),
+      children: [avatarDom, actionsDom]
+    });
   }, [actionsDom, avatarDom, baseClassName, collapsed, hashId]);
-  const hideMenuWhenCollapsedClassName = (0, import_react.useMemo)(() => {
-    var _a2;
-    if (((_a2 = props == null ? void 0 : props.menu) == null ? void 0 : _a2.hideMenuWhenCollapsed) && collapsed) {
-      return `${baseClassName}-hide-menu-collapsed`;
+
+  /* Using the useMemo hook to create a CSS class that will hide the menu when the menu is collapsed. */
+  var hideMenuWhenCollapsedClassName = (0, _react.useMemo)(function () {
+    var _props$menu;
+    // 收起时完全隐藏菜单
+    if (props !== null && props !== void 0 && (_props$menu = props.menu) !== null && _props$menu !== void 0 && _props$menu.hideMenuWhenCollapsed && collapsed) {
+      return "".concat(baseClassName, "-hide-menu-collapsed");
     }
     return null;
-  }, [baseClassName, collapsed, (_a = props == null ? void 0 : props.menu) == null ? void 0 : _a.hideMenuWhenCollapsed]);
-  const menuFooterDom = menuFooterRender && (menuFooterRender == null ? void 0 : menuFooterRender(props));
-  const menuDomItems = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, headerDom && /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: (0, import_classnames.default)([
-        (0, import_classnames.default)(`${baseClassName}-logo`, hashId, {
-          [`${baseClassName}-logo-collapsed`]: collapsed
-        })
-      ]),
-      onClick: showSiderExtraDom ? onMenuHeaderClick : void 0,
+  }, [baseClassName, collapsed, props === null || props === void 0 || (_props$menu2 = props.menu) === null || _props$menu2 === void 0 ? void 0 : _props$menu2.hideMenuWhenCollapsed]);
+  var menuFooterDom = menuFooterRender && (menuFooterRender === null || menuFooterRender === void 0 ? void 0 : menuFooterRender(props));
+  var menuDomItems = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [headerDom && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)([(0, _classnames.default)("".concat(baseClassName, "-logo"), hashId, (0, _defineProperty2.default)({}, "".concat(baseClassName, "-logo-collapsed"), collapsed))]),
+      onClick: showSiderExtraDom ? onMenuHeaderClick : undefined,
       id: "logo",
-      style: logoStyle
-    },
-    headerDom,
-    appsDom
-  ), extraDom && /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: (0, import_classnames.default)([
-        `${baseClassName}-extra`,
-        !headerDom && `${baseClassName}-extra-no-logo`,
-        hashId
-      ])
-    },
-    extraDom
-  ), /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
+      style: logoStyle,
+      children: [headerDom, appsDom]
+    }), extraDom && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(["".concat(baseClassName, "-extra"), !headerDom && "".concat(baseClassName, "-extra-no-logo"), hashId]),
+      children: extraDom
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
         flex: 1,
-        overflowY: "auto",
-        overflowX: "hidden"
-      }
-    },
-    menuRenderDom
-  ), /* @__PURE__ */ import_react.default.createElement(SiderContext.Provider, { value: {} }, links ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${baseClassName}-links ${hashId}`.trim() }, /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Menu,
-    {
-      inlineIndent: 16,
-      className: `${baseClassName}-link-menu ${hashId}`.trim(),
-      selectedKeys: [],
-      openKeys: [],
-      theme,
-      mode: "inline",
-      items: linksMenuItems
-    }
-  )) : null, showSiderExtraDom && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, actionAreaDom, !actionsDom && rightContentRender ? /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: (0, import_classnames.default)(`${baseClassName}-actions`, hashId, {
-        [`${baseClassName}-actions-collapsed`]: collapsed
-      })
-    },
-    rightContentRender == null ? void 0 : rightContentRender(props)
-  ) : null), menuFooterDom && /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: (0, import_classnames.default)([
-        `${baseClassName}-footer`,
-        hashId,
-        { [`${baseClassName}-footer-collapsed`]: collapsed }
-      ])
-    },
-    menuFooterDom
-  )));
-  return stylishClassName.wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, fixSiderbar && !isMobile && !hideMenuWhenCollapsedClassName && /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        style: __spreadValues({
-          width: collapsed ? collapsedWidth : siderWidth,
-          overflow: "hidden",
-          flex: `0 0 ${collapsed ? collapsedWidth : siderWidth}px`,
-          maxWidth: collapsed ? collapsedWidth : siderWidth,
-          minWidth: collapsed ? collapsedWidth : siderWidth,
-          transition: "all 0.2s ease 0s"
-        }, style)
-      }
-    ), /* @__PURE__ */ import_react.default.createElement(
-      Sider,
-      {
-        collapsible: true,
-        trigger: null,
-        collapsed,
-        breakpoint: breakpoint === false ? void 0 : breakpoint,
-        onCollapse: (collapse) => {
-          if (isMobile)
-            return;
-          onCollapse == null ? void 0 : onCollapse(collapse);
-        },
-        collapsedWidth,
-        style,
-        theme,
-        width: siderWidth,
-        className: (0, import_classnames.default)(
-          siderClassName,
-          hashId,
-          hideMenuWhenCollapsedClassName
-        )
+        overflowY: 'auto',
+        overflowX: 'hidden'
+      },
+      children: menuRenderDom
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(SiderContext.Provider, {
+      value: {},
+      children: [links ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "".concat(baseClassName, "-links ").concat(hashId).trim(),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Menu, {
+          inlineIndent: 16,
+          className: "".concat(baseClassName, "-link-menu ").concat(hashId).trim(),
+          selectedKeys: [],
+          openKeys: [],
+          theme: theme,
+          mode: "inline",
+          items: linksMenuItems
+        })
+      }) : null, showSiderExtraDom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: actionAreaDom
+      }), menuFooterDom && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)(["".concat(baseClassName, "-footer"), hashId, (0, _defineProperty2.default)({}, "".concat(baseClassName, "-footer-collapsed"), collapsed)]),
+        children: menuFooterDom
+      })]
+    })]
+  });
+  return stylishClassName.wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [fixSiderbar && !isMobile && !hideMenuWhenCollapsedClassName && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: (0, _objectSpread2.default)({
+        width: collapsed ? collapsedWidth : siderWidth,
+        overflow: 'hidden',
+        flex: "0 0 ".concat(collapsed ? collapsedWidth : siderWidth, "px"),
+        maxWidth: collapsed ? collapsedWidth : siderWidth,
+        minWidth: collapsed ? collapsedWidth : siderWidth,
+        transition: 'all 0.2s ease 0s'
+      }, style)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Sider, {
+      collapsible: true,
+      trigger: null,
+      collapsed: collapsed,
+      breakpoint: breakpoint === false ? undefined : breakpoint,
+      onCollapse: function onCollapse(collapse) {
+        if (isMobile) return;
+        _onCollapse === null || _onCollapse === void 0 || _onCollapse(collapse);
       },
-      hideMenuWhenCollapsedClassName ? /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: `${baseClassName}-hide-when-collapsed ${hashId}`.trim(),
-          style: {
-            height: "100%",
-            width: "100%",
-            opacity: hideMenuWhenCollapsedClassName ? 0 : 1
-          }
+      collapsedWidth: collapsedWidth,
+      style: style,
+      theme: theme,
+      width: siderWidth,
+      className: (0, _classnames.default)(siderClassName, hashId, hideMenuWhenCollapsedClassName),
+      children: [hideMenuWhenCollapsedClassName ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "".concat(baseClassName, "-hide-when-collapsed ").concat(hashId).trim(),
+        style: {
+          height: '100%',
+          width: '100%',
+          opacity: hideMenuWhenCollapsedClassName ? 0 : 1
         },
-        menuDomItems
-      ) : menuDomItems,
-      collapsedDom
-    ))
-  );
-};
+        children: menuDomItems
+      }) : menuDomItems, collapsedDom]
+    })]
+  }));
+};