@ant-design/pro-components 3.1.0-0 → 3.1.1-1

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

@@ -1,16 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _AppsLogoComponents = require("../AppsLogoComponents");
@@ -18,17 +14,17 @@ 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) {
+const _SafetyWarningProvider = /*#__PURE__*/_react.default.memo(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 ? {
+const {
+  Sider,
+  _InternalSiderContext: SiderContext = {
     Provider: _SafetyWarningProvider
-  } : _Layout$_InternalSide;
+  }
+} = _antd.Layout;
 /**
  * 渲染 title 和 logo
  *
@@ -36,18 +32,19 @@ var Sider = _antd.Layout.Sider,
  * @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];
+const renderLogoAndTitle = (props, renderKey = 'menuHeaderRender') => {
+  const {
+    logo,
+    title,
+    layout
+  } = props;
+  const renderFunction = props[renderKey];
   if (renderFunction === false) {
     return null;
   }
-  var logoDom = (0, _AppsLogoComponents.defaultRenderLogo)(logo);
-  var titleDom = /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
-    children: title !== null && title !== void 0 ? title : 'Ant Design Pro'
+  const logoDom = (0, _AppsLogoComponents.defaultRenderLogo)(logo);
+  const titleDom = /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+    children: title ?? 'Ant Design Pro'
   });
   if (renderFunction) {
     // when collapsed, no render title
@@ -70,83 +67,92 @@ var renderLogoAndTitle = exports.renderLogoAndTitle = function renderLogoAndTitl
     children: [logoDom, titleDom]
   }, "title");
 };
-var SiderMenu = exports.SiderMenu = function SiderMenu(props) {
-  var _props$menu$collapsed, _props$menu, _props$menu3;
-  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 () {
+exports.renderLogoAndTitle = renderLogoAndTitle;
+const SiderMenu = props => {
+  const {
+    collapsed,
+    originCollapsed,
+    fixSiderbar,
+    menuFooterRender,
+    onCollapse,
+    theme,
+    siderWidth,
+    isMobile,
+    onMenuHeaderClick,
+    breakpoint = 'lg',
+    style,
+    layout,
+    menuExtraRender = false,
+    links,
+    menuContentRender,
+    collapsedButtonRender,
+    prefixCls,
+    avatarProps,
+    actionsRender,
+    onOpenChange,
+    stylish,
+    logoStyle
+  } = props;
+  const {
+    hashId
+  } = (0, _react.useContext)(_provider.ProProvider);
+  const showSiderExtraDom = (0, _react.useMemo)(() => {
     if (isMobile) return false;
     if (layout === 'mix') return false;
     return true;
   }, [isMobile, layout]);
-  var baseClassName = "".concat(prefixCls, "-sider");
+  const baseClassName = `${prefixCls}-sider`;
 
   // 收起的宽度，从 menu 配置中读取，默认为 64
-  var collapsedWidth = (_props$menu$collapsed = (_props$menu = props.menu) === null || _props$menu === void 0 ? void 0 : _props$menu.collapsedWidth) !== null && _props$menu$collapsed !== void 0 ? _props$menu$collapsed : 64;
+  const collapsedWidth = props.menu?.collapsedWidth ?? 64;
 
   // 之所以这样写是为了提升样式优先级，不然会被sider 自带的覆盖掉
-  var stylishClassName = (0, _stylish.useStylish)("".concat(baseClassName, ".").concat(baseClassName, "-stylish"), {
-    stylish: stylish,
+  const stylishClassName = (0, _stylish.useStylish)(`${baseClassName}.${baseClassName}-stylish`, {
+    stylish,
     proLayoutCollapsedWidth: collapsedWidth
   });
-  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',
-      onOpenChange: 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
-    };
+  const siderClassName = (0, _clsx.clsx)(`${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 menuRenderDom = (0, _react.useMemo)(function () {
+  const headerDom = renderLogoAndTitle(props);
+  const extraDom = menuExtraRender && menuExtraRender(props);
+  const menuDom = (0, _react.useMemo)(() => menuContentRender !== false && /*#__PURE__*/(0, _react.createElement)(_BaseMenu.BaseMenu, {
+    ...props,
+    key: "base-menu",
+    mode: collapsed && !isMobile ? 'vertical' : 'inline',
+    onOpenChange: 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, _react.useMemo)(() => {
     return menuContentRender ? menuContentRender(props, menuDom) : menuDom;
   }, [menuContentRender, menuDom, props]);
-  var avatarDom = (0, _react.useMemo)(function () {
+  const avatarDom = (0, _react.useMemo)(() => {
     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", {
+    const {
+      title,
+      render,
+      ...rest
+    } = avatarProps;
+    const dom = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `${baseClassName}-actions-avatar`,
+      children: [rest?.src || rest?.srcSet || rest.icon || rest.children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Avatar, {
+        size: 28,
+        ...rest
+      }) : null, avatarProps.title && !collapsed && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: title
       })]
     });
@@ -155,16 +161,16 @@ var SiderMenu = exports.SiderMenu = function SiderMenu(props) {
     }
     return dom;
   }, [avatarProps, baseClassName, collapsed]);
-  var actionsDom = (0, _react.useMemo)(function () {
+  const actionsDom = (0, _react.useMemo)(() => {
     if (!actionsRender) return null;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
       align: "center",
       size: 4,
       orientation: 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) {
+      className: (0, _clsx.clsx)([`${baseClassName}-actions-list`, collapsed && `${baseClassName}-actions-list-collapsed`, hashId]),
+      children: [actionsRender?.(props)].flat(1).map((item, index) => {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(baseClassName, "-actions-list-item ").concat(hashId).trim(),
+          className: `${baseClassName}-actions-list-item ${hashId}`.trim(),
           children: item
         }, index);
       })
@@ -172,7 +178,7 @@ var SiderMenu = exports.SiderMenu = function SiderMenu(props) {
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [actionsRender, baseClassName, collapsed]);
-  var appsDom = (0, _react.useMemo)(function () {
+  const appsDom = (0, _react.useMemo)(() => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppsLogoComponents.AppsLogoComponents, {
       onItemClick: props.itemClick,
       appListRender: props.appListRender,
@@ -180,48 +186,49 @@ var SiderMenu = exports.SiderMenu = function SiderMenu(props) {
       prefixCls: props.prefixCls
     });
   }, [props.appList, props.appListRender, props.prefixCls]);
-  var collapsedDom = (0, _react.useMemo)(function () {
+  const collapsedDom = (0, _react.useMemo)(() => {
     if (collapsedButtonRender === false) return null;
-    var dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsedIcon.CollapsedIcon, {
+    const 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);
+      className: `${baseClassName}-collapsed-button`,
+      onClick: () => {
+        onCollapse?.(!originCollapsed);
       }
     });
     if (collapsedButtonRender) return collapsedButtonRender(collapsed, dom);
     return dom;
-  }, [collapsedButtonRender, isMobile, originCollapsed, baseClassName, collapsed, _onCollapse]);
+  }, [collapsedButtonRender, isMobile, originCollapsed, baseClassName, collapsed, onCollapse]);
 
   /** 操作区域的dom */
-  var actionAreaDom = (0, _react.useMemo)(function () {
+  const actionAreaDom = (0, _react.useMemo)(() => {
     if (!avatarDom && !actionsDom) return null;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)("".concat(baseClassName, "-actions"), hashId, collapsed && "".concat(baseClassName, "-actions-collapsed")),
+      className: (0, _clsx.clsx)(`${baseClassName}-actions`, hashId, collapsed && `${baseClassName}-actions-collapsed`),
       children: [avatarDom, actionsDom]
     });
   }, [actionsDom, avatarDom, baseClassName, collapsed, hashId]);
 
   /* 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$menu2;
+  const hideMenuWhenCollapsedClassName = (0, _react.useMemo)(() => {
     // 收起时完全隐藏菜单
-    if (props !== null && props !== void 0 && (_props$menu2 = props.menu) !== null && _props$menu2 !== void 0 && _props$menu2.hideMenuWhenCollapsed && collapsed) {
-      return "".concat(baseClassName, "-hide-menu-collapsed");
+    if (props?.menu?.hideMenuWhenCollapsed && collapsed) {
+      return `${baseClassName}-hide-menu-collapsed`;
     }
     return null;
-  }, [baseClassName, collapsed, props === null || props === void 0 || (_props$menu3 = props.menu) === null || _props$menu3 === void 0 ? void 0 : _props$menu3.hideMenuWhenCollapsed]);
-  var menuFooterDom = menuFooterRender && (menuFooterRender === null || menuFooterRender === void 0 ? void 0 : menuFooterRender(props));
-  var menuDomItems = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  }, [baseClassName, collapsed, props?.menu?.hideMenuWhenCollapsed]);
+  const menuFooterDom = menuFooterRender && menuFooterRender?.(props);
+  const 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))]),
+      className: (0, _clsx.clsx)([(0, _clsx.clsx)(`${baseClassName}-logo`, hashId, {
+        [`${baseClassName}-logo-collapsed`]: collapsed
+      })]),
       onClick: showSiderExtraDom ? onMenuHeaderClick : undefined,
       id: "logo",
       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]),
+      className: (0, _clsx.clsx)([`${baseClassName}-extra`, !headerDom && `${baseClassName}-extra-no-logo`, hashId]),
       children: extraDom
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
@@ -233,10 +240,10 @@ var SiderMenu = exports.SiderMenu = function SiderMenu(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(SiderContext.Provider, {
       value: {},
       children: [links ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "".concat(baseClassName, "-links ").concat(hashId).trim(),
+        className: `${baseClassName}-links ${hashId}`.trim(),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Menu, {
           inlineIndent: 16,
-          className: "".concat(baseClassName, "-link-menu ").concat(hashId).trim(),
+          className: `${baseClassName}-link-menu ${hashId}`.trim(),
           selectedKeys: [],
           openKeys: [],
           theme: theme,
@@ -246,37 +253,40 @@ var SiderMenu = exports.SiderMenu = function SiderMenu(props) {
       }) : 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)]),
+        className: (0, _clsx.clsx)([`${baseClassName}-footer`, hashId, {
+          [`${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)({
+      style: {
         width: collapsed ? collapsedWidth : siderWidth,
         overflow: 'hidden',
-        flex: "0 0 ".concat(collapsed ? collapsedWidth : siderWidth, "px"),
+        flex: `0 0 ${collapsed ? collapsedWidth : siderWidth}px`,
         maxWidth: collapsed ? collapsedWidth : siderWidth,
         minWidth: collapsed ? collapsedWidth : siderWidth,
-        transition: 'all 0.2s ease 0s'
-      }, style)
+        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) {
+      onCollapse: collapse => {
         if (isMobile) return;
-        _onCollapse === null || _onCollapse === void 0 || _onCollapse(collapse);
+        onCollapse?.(collapse);
       },
       collapsedWidth: collapsedWidth,
       style: style,
       theme: theme,
       width: siderWidth,
-      className: (0, _classnames.default)(siderClassName, hashId, hideMenuWhenCollapsedClassName),
+      className: (0, _clsx.clsx)(siderClassName, hashId, hideMenuWhenCollapsedClassName),
       children: [hideMenuWhenCollapsedClassName ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "".concat(baseClassName, "-hide-when-collapsed ").concat(hashId).trim(),
+        className: `${baseClassName}-hide-when-collapsed ${hashId}`.trim(),
         style: {
           height: '100%',
           width: '100%',
@@ -286,4 +296,5 @@ var SiderMenu = exports.SiderMenu = function SiderMenu(props) {
       }) : menuDomItems, collapsedDom]
     })]
   }));
-};
+};
+exports.SiderMenu = SiderMenu;

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

@@ -1,69 +1,72 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SiderMenu = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _util = require("@rc-component/util");
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _SiderMenu = require("./SiderMenu");
 var _index = require("./style/index");
 var _jsxRuntime = require("react/jsx-runtime");
-var SiderMenuWrapper = exports.SiderMenu = function SiderMenuWrapper(props) {
-  var _props$menu$collapsed, _props$menu, _token$layout;
-  var isMobile = props.isMobile,
-    siderWidth = props.siderWidth,
-    collapsed = props.collapsed,
-    onCollapse = props.onCollapse,
-    style = props.style,
-    className = props.className,
-    hide = props.hide,
-    prefixCls = props.prefixCls,
-    getContainer = props.getContainer;
-  var _useContext = (0, _react.useContext)(_provider.ProProvider),
-    token = _useContext.token;
-  (0, _react.useEffect)(function () {
+const SiderMenuWrapper = props => {
+  const {
+    isMobile,
+    siderWidth,
+    collapsed,
+    onCollapse,
+    style,
+    className,
+    hide,
+    prefixCls,
+    getContainer
+  } = props;
+  const {
+    token
+  } = (0, _react.useContext)(_provider.ProProvider);
+  (0, _react.useEffect)(() => {
     if (isMobile === true) {
-      onCollapse === null || onCollapse === void 0 || onCollapse(true);
+      onCollapse?.(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMobile]);
-  var omitProps = (0, _util.omit)(props, ['className', 'style']);
-  var _React$useContext = _react.default.useContext(_antd.ConfigProvider.ConfigContext),
-    direction = _React$useContext.direction;
+  const omitProps = (0, _util.omit)(props, ['className', 'style']);
+  const {
+    direction
+  } = _react.default.useContext(_antd.ConfigProvider.ConfigContext);
 
   // 从 menu 配置中读取 collapsedWidth，默认为 64
-  var collapsedWidth = (_props$menu$collapsed = (_props$menu = props.menu) === null || _props$menu === void 0 ? void 0 : _props$menu.collapsedWidth) !== null && _props$menu$collapsed !== void 0 ? _props$menu$collapsed : 64;
-  var _useStyle = (0, _index.useStyle)("".concat(prefixCls, "-sider"), {
-      proLayoutCollapsedWidth: collapsedWidth
-    }),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var siderClassName = (0, _classnames.default)("".concat(prefixCls, "-sider"), className, hashId);
+  const collapsedWidth = props.menu?.collapsedWidth ?? 64;
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _index.useStyle)(`${prefixCls}-sider`, {
+    proLayoutCollapsedWidth: collapsedWidth
+  });
+  const siderClassName = (0, _clsx.clsx)(`${prefixCls}-sider`, className, hashId);
   if (hide) {
     return null;
   }
   return wrapSSR(isMobile ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Drawer, {
     placement: direction === 'rtl' ? 'right' : 'left',
-    className: (0, _classnames.default)("".concat(prefixCls, "-drawer-sider"), className),
+    className: (0, _clsx.clsx)(`${prefixCls}-drawer-sider`, className),
     open: !collapsed,
-    afterOpenChange: function afterOpenChange(open) {
+    afterOpenChange: open => {
       if (!open) {
-        onCollapse === null || onCollapse === void 0 || onCollapse(true);
+        onCollapse?.(true);
       }
     },
-    style: (0, _objectSpread2.default)({
+    style: {
       padding: 0,
-      height: '100vh'
-    }, style),
-    onClose: function onClose() {
-      onCollapse === null || onCollapse === void 0 || onCollapse(true);
+      height: '100vh',
+      ...style
+    },
+    onClose: () => {
+      onCollapse?.(true);
     },
     maskClosable: true,
     closable: false,
@@ -75,20 +78,22 @@ var SiderMenuWrapper = exports.SiderMenu = function SiderMenuWrapper(props) {
         padding: 0,
         display: 'flex',
         flexDirection: 'row',
-        backgroundColor: (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.sider) === null || _token$layout === void 0 ? void 0 : _token$layout.colorMenuBackground
+        backgroundColor: token.layout?.sider?.colorMenuBackground
       }
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SiderMenu.SiderMenu, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, omitProps), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SiderMenu.SiderMenu, {
+      ...omitProps,
       isMobile: true,
       className: siderClassName,
       collapsed: false,
       splitMenus: false,
       originCollapsed: collapsed
-    }))
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SiderMenu.SiderMenu, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SiderMenu.SiderMenu, {
     className: siderClassName,
-    originCollapsed: collapsed
-  }, omitProps), {}, {
+    originCollapsed: collapsed,
+    ...omitProps,
     style: style
-  })));
-};
+  }));
+};
+exports.SiderMenu = SiderMenuWrapper;