@ant-design/pro-components 2.8.10 → 3.0.0-beta.2

package/es/layout/components/SiderMenu/SiderMenu.js

@@ -0,0 +1,285 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["title", "render"];
+import { Avatar, Layout, Menu, Space } from 'antd';
+import classNames from 'classnames';
+import React, { useContext, useMemo } from 'react';
+import { ProProvider } from "../../../provider";
+import { AppsLogoComponents, defaultRenderLogo } from "../AppsLogoComponents";
+import { CollapsedIcon } from "../CollapsedIcon";
+import { BaseMenu } from "./BaseMenu";
+import { useStylish } from "./style/stylish";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+var _SafetyWarningProvider = /*#__PURE__*/React.memo(function (props) {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: props.children
+  });
+});
+var Sider = Layout.Sider,
+  _Layout$_InternalSide = Layout._InternalSiderContext,
+  SiderContext = _Layout$_InternalSide === void 0 ? {
+    Provider: _SafetyWarningProvider
+  } : _Layout$_InternalSide;
+/**
+ * 渲染 title 和 logo
+ *
+ * @param props
+ * @param renderKey
+ * @returns
+ */
+export var 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;
+  }
+  var logoDom = defaultRenderLogo(logo);
+  var titleDom = /*#__PURE__*/_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 (props.collapsed) {
+    return /*#__PURE__*/_jsx("a", {
+      children: logoDom
+    }, "title");
+  }
+  return /*#__PURE__*/_jsxs("a", {
+    children: [logoDom, titleDom]
+  }, "title");
+};
+var 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 = useContext(ProProvider),
+    hashId = _useContext.hashId;
+  var showSiderExtraDom = useMemo(function () {
+    if (isMobile) return false;
+    if (layout === 'mix') return false;
+    return true;
+  }, [isMobile, layout]);
+  var baseClassName = "".concat(prefixCls, "-sider");
+
+  // 收起的宽度
+  var collapsedWidth = 64;
+
+  // 之所以这样写是为了提升样式优先级，不然会被sider 自带的覆盖掉
+  var stylishClassName = useStylish("".concat(baseClassName, ".").concat(baseClassName, "-stylish"), {
+    stylish: stylish,
+    proLayoutCollapsedWidth: collapsedWidth
+  });
+  var siderClassName = classNames("".concat(baseClassName), hashId, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".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 = useMemo(function () {
+    return menuContentRender !== false && /*#__PURE__*/_createElement(BaseMenu, _objectSpread(_objectSpread({}, 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 = useMemo(function () {
+    return menuContentRender ? menuContentRender(props, menuDom) : menuDom;
+  }, [menuContentRender, menuDom, props]);
+  var avatarDom = useMemo(function () {
+    if (!avatarProps) return null;
+    var title = avatarProps.title,
+      render = avatarProps.render,
+      rest = _objectWithoutProperties(avatarProps, _excluded);
+    var dom = /*#__PURE__*/_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__*/_jsx(Avatar, _objectSpread({
+        size: 28
+      }, rest)) : null, avatarProps.title && !collapsed && /*#__PURE__*/_jsx("span", {
+        children: title
+      })]
+    });
+    if (render) {
+      return render(avatarProps, dom, props);
+    }
+    return dom;
+  }, [avatarProps, baseClassName, collapsed]);
+  var actionsDom = useMemo(function () {
+    if (!actionsRender) return null;
+    return /*#__PURE__*/_jsx(Space, {
+      align: "center",
+      size: 4,
+      direction: collapsed ? 'vertical' : 'horizontal',
+      className: classNames(["".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__*/_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 = useMemo(function () {
+    return /*#__PURE__*/_jsx(AppsLogoComponents, {
+      onItemClick: props.itemClick,
+      appListRender: props.appListRender,
+      appList: props.appList,
+      prefixCls: props.prefixCls
+    });
+  }, [props.appList, props.appListRender, props.prefixCls]);
+  var collapsedDom = useMemo(function () {
+    if (collapsedButtonRender === false) return null;
+    var dom = /*#__PURE__*/_jsx(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);
+    return dom;
+  }, [collapsedButtonRender, isMobile, originCollapsed, baseClassName, collapsed, _onCollapse]);
+
+  /** 操作区域的dom */
+  var actionAreaDom = useMemo(function () {
+    if (!avatarDom && !actionsDom) return null;
+    return /*#__PURE__*/_jsxs("div", {
+      className: classNames("".concat(baseClassName, "-actions"), hashId, collapsed && "".concat(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 = 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, 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__*/_jsxs(_Fragment, {
+    children: [headerDom && /*#__PURE__*/_jsxs("div", {
+      className: classNames([classNames("".concat(baseClassName, "-logo"), hashId, _defineProperty({}, "".concat(baseClassName, "-logo-collapsed"), collapsed))]),
+      onClick: showSiderExtraDom ? onMenuHeaderClick : undefined,
+      id: "logo",
+      style: logoStyle,
+      children: [headerDom, appsDom]
+    }), extraDom && /*#__PURE__*/_jsx("div", {
+      className: classNames(["".concat(baseClassName, "-extra"), !headerDom && "".concat(baseClassName, "-extra-no-logo"), hashId]),
+      children: extraDom
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
+        flex: 1,
+        overflowY: 'auto',
+        overflowX: 'hidden'
+      },
+      children: menuRenderDom
+    }), /*#__PURE__*/_jsxs(SiderContext.Provider, {
+      value: {},
+      children: [links ? /*#__PURE__*/_jsx("div", {
+        className: "".concat(baseClassName, "-links ").concat(hashId).trim(),
+        children: /*#__PURE__*/_jsx(Menu, {
+          inlineIndent: 16,
+          className: "".concat(baseClassName, "-link-menu ").concat(hashId).trim(),
+          selectedKeys: [],
+          openKeys: [],
+          theme: theme,
+          mode: "inline",
+          items: linksMenuItems
+        })
+      }) : null, showSiderExtraDom && /*#__PURE__*/_jsx(_Fragment, {
+        children: actionAreaDom
+      }), menuFooterDom && /*#__PURE__*/_jsx("div", {
+        className: classNames(["".concat(baseClassName, "-footer"), hashId, _defineProperty({}, "".concat(baseClassName, "-footer-collapsed"), collapsed)]),
+        children: menuFooterDom
+      })]
+    })]
+  });
+  return stylishClassName.wrapSSR( /*#__PURE__*/_jsxs(_Fragment, {
+    children: [fixSiderbar && !isMobile && !hideMenuWhenCollapsedClassName && /*#__PURE__*/_jsx("div", {
+      style: _objectSpread({
+        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__*/_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);
+      },
+      collapsedWidth: collapsedWidth,
+      style: style,
+      theme: theme,
+      width: siderWidth,
+      className: classNames(siderClassName, hashId, hideMenuWhenCollapsedClassName),
+      children: [hideMenuWhenCollapsedClassName ? /*#__PURE__*/_jsx("div", {
+        className: "".concat(baseClassName, "-hide-when-collapsed ").concat(hashId).trim(),
+        style: {
+          height: '100%',
+          width: '100%',
+          opacity: hideMenuWhenCollapsedClassName ? 0 : 1
+        },
+        children: menuDomItems
+      }) : menuDomItems, collapsedDom]
+    })]
+  }));
+};
+export { SiderMenu };

package/es/layout/components/SiderMenu/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PrivateSiderMenuProps, SiderMenuProps } from './SiderMenu';
+declare const SiderMenuWrapper: React.FC<SiderMenuProps & PrivateSiderMenuProps>;
+export { SiderMenuWrapper as SiderMenu };

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

@@ -0,0 +1,82 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { ConfigProvider, Drawer } from 'antd';
+import classNames from 'classnames';
+import omit from 'rc-util/lib/omit';
+import React, { useContext, useEffect } from 'react';
+import { ProProvider } from "../../../provider";
+import { SiderMenu } from "./SiderMenu";
+import { useStyle } from "./style/index";
+import { jsx as _jsx } from "react/jsx-runtime";
+var SiderMenuWrapper = function SiderMenuWrapper(props) {
+  var _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 = useContext(ProProvider),
+    token = _useContext.token;
+  useEffect(function () {
+    if (isMobile === true) {
+      onCollapse === null || onCollapse === void 0 || onCollapse(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isMobile]);
+  var omitProps = omit(props, ['className', 'style']);
+  var _React$useContext = React.useContext(ConfigProvider.ConfigContext),
+    direction = _React$useContext.direction;
+  var _useStyle = useStyle("".concat(prefixCls, "-sider"), {
+      proLayoutCollapsedWidth: 64
+    }),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var siderClassName = classNames("".concat(prefixCls, "-sider"), className, hashId);
+  if (hide) {
+    return null;
+  }
+  return wrapSSR(isMobile ? /*#__PURE__*/_jsx(Drawer, {
+    placement: direction === 'rtl' ? 'right' : 'left',
+    className: classNames("".concat(prefixCls, "-drawer-sider"), className),
+    open: !collapsed,
+    afterOpenChange: function afterOpenChange() {
+      onCollapse === null || onCollapse === void 0 || onCollapse(true);
+    },
+    style: _objectSpread({
+      padding: 0,
+      height: '100vh'
+    }, style),
+    onClose: function onClose() {
+      onCollapse === null || onCollapse === void 0 || onCollapse(true);
+    },
+    maskClosable: true,
+    closable: false,
+    getContainer: getContainer || false,
+    width: siderWidth,
+    styles: {
+      body: {
+        height: '100vh',
+        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
+      }
+    },
+    children: /*#__PURE__*/_jsx(SiderMenu, _objectSpread(_objectSpread({}, omitProps), {}, {
+      isMobile: true,
+      className: siderClassName,
+      collapsed: isMobile ? false : collapsed,
+      splitMenus: false,
+      originCollapsed: collapsed
+    }))
+  }) : /*#__PURE__*/_jsx(SiderMenu, _objectSpread(_objectSpread({
+    className: siderClassName,
+    originCollapsed: collapsed
+  }, omitProps), {}, {
+    style: style
+  })));
+};
+export { SiderMenuWrapper as SiderMenu };

package/es/layout/components/SiderMenu/style/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '../../../../provider';
+export interface SiderMenuToken extends ProAliasToken {
+    componentCls: string;
+    proLayoutCollapsedWidth: number;
+}
+export declare const proLayoutTitleHide: any;
+export declare function useStyle(prefixCls: string, { proLayoutCollapsedWidth, }: {
+    proLayoutCollapsedWidth: number;
+}): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

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

@@ -0,0 +1,185 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { Keyframes } from '@ant-design/cssinjs';
+import { useStyle as useAntdStyle } from "../../../../provider";
+export var proLayoutTitleHide = new Keyframes('antBadgeLoadingCircle', {
+  '0%': {
+    display: 'none',
+    opacity: 0,
+    overflow: 'hidden'
+  },
+  '80%': {
+    overflow: 'hidden'
+  },
+  '100%': {
+    display: 'unset',
+    opacity: 1
+  }
+});
+var genSiderMenuStyle = function genSiderMenuStyle(token) {
+  var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5, _token$layout6, _token$layout7, _token$layout8, _token$layout9, _token$layout10, _token$layout11, _token$layout12;
+  return _defineProperty({}, "".concat(token.proComponentsCls, "-layout"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(token.antCls, "-layout-sider").concat(token.componentCls), {
+    background: ((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.sider) === null || _token$layout === void 0 ? void 0 : _token$layout.colorMenuBackground) || 'transparent'
+  }), token.componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    position: 'relative',
+    boxSizing: 'border-box',
+    '&-menu': {
+      position: 'relative',
+      zIndex: 10,
+      minHeight: '100%'
+    }
+  }, "& ".concat(token.antCls, "-layout-sider-children"), {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    paddingInline: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.sider) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.paddingInlineLayoutMenu,
+    paddingBlock: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.sider) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.paddingBlockLayoutMenu,
+    borderInlineEnd: "1px solid ".concat(token.colorSplit),
+    marginInlineEnd: -1
+  }), "".concat(token.antCls, "-menu"), _defineProperty(_defineProperty({}, "".concat(token.antCls, "-menu-item-group-title"), {
+    fontSize: token.fontSizeSM,
+    paddingBottom: 4
+  }), "".concat(token.antCls, "-menu-item:not(").concat(token.antCls, "-menu-item-selected):hover"), {
+    color: (_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.sider) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorTextMenuItemHover
+  })), '&-logo', {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingInline: 12,
+    paddingBlock: 16,
+    color: (_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.sider) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.colorTextMenu,
+    cursor: 'pointer',
+    borderBlockEnd: "1px solid ".concat((_token$layout6 = token.layout) === null || _token$layout6 === void 0 || (_token$layout6 = _token$layout6.sider) === null || _token$layout6 === void 0 ? void 0 : _token$layout6.colorMenuItemDivider),
+    '> a': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: 22,
+      fontSize: 22,
+      '> img': {
+        display: 'inline-block',
+        height: 22,
+        verticalAlign: 'middle'
+      },
+      '> h1': {
+        display: 'inline-block',
+        height: 22,
+        marginBlock: 0,
+        marginInlineEnd: 0,
+        marginInlineStart: 6,
+        color: (_token$layout7 = token.layout) === null || _token$layout7 === void 0 || (_token$layout7 = _token$layout7.sider) === null || _token$layout7 === void 0 ? void 0 : _token$layout7.colorTextMenuTitle,
+        animationName: proLayoutTitleHide,
+        animationDuration: '.4s',
+        animationTimingFunction: 'ease',
+        fontWeight: 600,
+        fontSize: 16,
+        lineHeight: '22px',
+        verticalAlign: 'middle'
+      }
+    },
+    '&-collapsed': _defineProperty({
+      flexDirection: 'column-reverse',
+      margin: 0,
+      padding: 12
+    }, "".concat(token.proComponentsCls, "-layout-apps-icon"), {
+      marginBlockEnd: 8,
+      fontSize: 16,
+      transition: 'font-size 0.2s ease-in-out,color 0.2s ease-in-out'
+    })
+  }), '&-actions', {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBlock: 4,
+    marginInline: 0,
+    color: (_token$layout8 = token.layout) === null || _token$layout8 === void 0 || (_token$layout8 = _token$layout8.sider) === null || _token$layout8 === void 0 ? void 0 : _token$layout8.colorTextMenu,
+    '&-collapsed': {
+      flexDirection: 'column-reverse',
+      paddingBlock: 0,
+      paddingInline: 8,
+      fontSize: 16,
+      transition: 'font-size 0.3s ease-in-out'
+    },
+    '&-list': {
+      color: (_token$layout9 = token.layout) === null || _token$layout9 === void 0 || (_token$layout9 = _token$layout9.sider) === null || _token$layout9 === void 0 ? void 0 : _token$layout9.colorTextMenuSecondary,
+      '&-collapsed': {
+        marginBlockEnd: 8,
+        animationName: 'none'
+      },
+      '&-item': {
+        paddingInline: 6,
+        paddingBlock: 6,
+        lineHeight: '16px',
+        fontSize: 16,
+        cursor: 'pointer',
+        borderRadius: token.borderRadius,
+        '&:hover': {
+          background: token.colorBgTextHover
+        }
+      }
+    },
+    '&-avatar': {
+      fontSize: 14,
+      paddingInline: 8,
+      paddingBlock: 8,
+      display: 'flex',
+      alignItems: 'center',
+      gap: token.marginXS,
+      borderRadius: token.borderRadius,
+      '& *': {
+        cursor: 'pointer'
+      },
+      '&:hover': {
+        background: token.colorBgTextHover
+      }
+    }
+  }), '&-hide-menu-collapsed', {
+    insetInlineStart: "-".concat(token.proLayoutCollapsedWidth - 12, "px"),
+    position: 'absolute'
+  }), '&-extra', {
+    marginBlockEnd: 16,
+    marginBlock: 0,
+    marginInline: 16,
+    '&-no-logo': {
+      marginBlockStart: 16
+    }
+  }), '&-links', {
+    width: '100%',
+    ul: {
+      height: 'auto'
+    }
+  }), '&-link-menu', {
+    border: 'none',
+    boxShadow: 'none',
+    background: 'transparent'
+  }), '&-footer', {
+    color: (_token$layout10 = token.layout) === null || _token$layout10 === void 0 || (_token$layout10 = _token$layout10.sider) === null || _token$layout10 === void 0 ? void 0 : _token$layout10.colorTextMenuSecondary,
+    paddingBlockEnd: 16,
+    fontSize: token.fontSize,
+    animationName: proLayoutTitleHide,
+    animationDuration: '.4s',
+    animationTimingFunction: 'ease'
+  })), "".concat(token.componentCls).concat(token.componentCls, "-fixed"), {
+    position: 'fixed',
+    insetBlockStart: 0,
+    insetInlineStart: 0,
+    zIndex: '100',
+    height: '100%',
+    '&-mix': {
+      height: "calc(100% - ".concat(((_token$layout11 = token.layout) === null || _token$layout11 === void 0 || (_token$layout11 = _token$layout11.header) === null || _token$layout11 === void 0 ? void 0 : _token$layout11.heightLayoutHeader) || 56, "px)"),
+      insetBlockStart: "".concat(((_token$layout12 = token.layout) === null || _token$layout12 === void 0 || (_token$layout12 = _token$layout12.header) === null || _token$layout12 === void 0 ? void 0 : _token$layout12.heightLayoutHeader) || 56, "px")
+    }
+  }));
+};
+export function useStyle(prefixCls, _ref2) {
+  var proLayoutCollapsedWidth = _ref2.proLayoutCollapsedWidth;
+  return useAntdStyle('ProLayoutSiderMenu', function (token) {
+    var siderMenuToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls),
+      proLayoutCollapsedWidth: proLayoutCollapsedWidth
+    });
+    return [genSiderMenuStyle(siderMenuToken)];
+  });
+}

package/es/layout/components/SiderMenu/style/menu.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '../../../../provider';
+import type { MenuMode } from '../BaseMenu';
+export interface ProLayoutBaseMenuToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStyle(prefixCls: string, mode: MenuMode | undefined): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};