fix: Inline ssr logic

docs/examples/debug.tsx

@@ -47,7 +47,7 @@ const motionMap: Record<MenuProps['mode'], CSSMotionProps> = {
 };
 
 export default () => {
-  const [mode, setMode] = React.useState<MenuProps['mode']>('horizontal');
+  const [mode, setMode] = React.useState<MenuProps['mode']>('inline');
   const [narrow, setNarrow] = React.useState(false);
   const [inlineCollapsed, setInlineCollapsed] = React.useState(false);
   const [forceRender, setForceRender] = React.useState(false);
@@ -105,6 +105,7 @@ export default () => {
       <div style={{ width: narrow ? 350 : undefined }}>
         <Menu
           // direction="rtl"
+          defaultOpenKeys={['sub', 'nest']}
           forceSubMenuRender={forceRender}
           mode={mode}
           style={{ width: mode === 'horizontal' ? undefined : 256 }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-menu",
-  "version": "9.0.0-alpha.1",
+  "version": "9.0.0-alpha.2",
   "description": "menu ui component for react",
   "keywords": [
     "react",

src/Divider.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { MenuContext } from './context/MenuContext';
-import { useMeasure } from './context/MeasureContext';
+import { useMeasure } from './context/PathContext';
 
 export interface DividerProps {
   className?: string;

src/Menu.tsx

@@ -23,7 +23,7 @@ import { warnItemProp } from './utils/warnUtil';
 import SubMenu from './SubMenu';
 import useAccessibility from './hooks/useAccessibility';
 import useUUID from './hooks/useUUID';
-import { PathRegisterContext, PathUserContext } from './context/MeasureContext';
+import { PathRegisterContext, PathUserContext } from './context/PathContext';
 import useKeyRecords, { OVERFLOW_KEY } from './hooks/useKeyRecords';
 import { IdContext } from './context/IdContext';
 
@@ -277,9 +277,8 @@ const Menu: React.FC<MenuProps> = props => {
     [registerPath, unregisterPath],
   );
 
-  const pathUserContext = React.useMemo(() => ({ isSubPathKey, getKeyPath }), [
+  const pathUserContext = React.useMemo(() => ({ isSubPathKey }), [
     isSubPathKey,
-    getKeyPath,
   ]);
 
   React.useEffect(() => {

src/MenuItem.tsx

@@ -15,11 +15,7 @@ import useActive from './hooks/useActive';
 import { warnItemProp } from './utils/warnUtil';
 import Icon from './Icon';
 import useDirectionStyle from './hooks/useDirectionStyle';
-import {
-  PathUserContext,
-  useKeyPath,
-  useMeasure,
-} from './context/MeasureContext';
+import { useFullPath, useMeasure } from './context/PathContext';
 import { useMenuId } from './context/IdContext';
 
 export interface MenuItemProps
@@ -122,8 +118,7 @@ const InternalMenuItem = (props: MenuItemProps) => {
   const elementRef = React.useRef<HTMLLIElement>();
   const mergedDisabled = contextDisabled || disabled;
 
-  const { getKeyPath } = React.useContext(PathUserContext);
-  const connectedKeys = getKeyPath(eventKey);
+  const connectedKeys = useFullPath(eventKey);
 
   // ============================= Info =============================
   const getEventInfo = (
@@ -240,7 +235,7 @@ function MenuItem(props: MenuItemProps): React.ReactElement {
 
   // ==================== Record KeyPath ====================
   const measure = useMeasure();
-  const connectedKeyPath = useKeyPath(eventKey);
+  const connectedKeyPath = useFullPath(eventKey);
 
   // eslint-disable-next-line consistent-return
   React.useEffect(() => {

src/MenuItemGroup.tsx

@@ -2,10 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { parseChildren } from './utils/nodeUtil';
 import { MenuContext } from './context/MenuContext';
-import {
-  useKeyPath,
-  useMeasure,
-} from './context/MeasureContext';
+import { useFullPath, useMeasure } from './context/PathContext';
 
 export interface MenuItemGroupProps {
   className?: string;
@@ -48,7 +45,7 @@ export default function MenuItemGroup({
   children,
   ...props
 }: MenuItemGroupProps): React.ReactElement {
-  const connectedKeyPath = useKeyPath(props.eventKey);
+  const connectedKeyPath = useFullPath(props.eventKey);
   const childList: React.ReactElement[] = parseChildren(
     children,
     connectedKeyPath,

src/SubMenu/index.tsx

@@ -19,11 +19,11 @@ import { warnItemProp } from '../utils/warnUtil';
 import useDirectionStyle from '../hooks/useDirectionStyle';
 import InlineSubMenuList from './InlineSubMenuList';
 import {
-  PathConnectContext,
+  PathTrackerContext,
   PathUserContext,
-  useKeyPath,
+  useFullPath,
   useMeasure,
-} from '../context/MeasureContext';
+} from '../context/PathContext';
 import { useMenuId } from '../context/IdContext';
 
 export interface SubMenuProps {
@@ -122,8 +122,8 @@ const InternalSubMenu = (props: SubMenuProps) => {
     onActive,
   } = React.useContext(MenuContext);
 
-  const { isSubPathKey, getKeyPath } = React.useContext(PathUserContext);
-  const keyPath = getKeyPath(eventKey);
+  const { isSubPathKey } = React.useContext(PathUserContext);
+  const connectedPath = useFullPath();
 
   const subMenuPrefixCls = `${prefixCls}-submenu`;
   const mergedDisabled = contextDisabled || disabled;
@@ -189,7 +189,7 @@ const InternalSubMenu = (props: SubMenuProps) => {
   }, [mode, active, activeKey, childrenActive, eventKey, isSubPathKey]);
 
   // ========================== DirectionStyle ==========================
-  const directionStyle = useDirectionStyle(keyPath.length);
+  const directionStyle = useDirectionStyle(connectedPath.length);
 
   // =============================== Events ===============================
   // >>>> Title click
@@ -319,7 +319,7 @@ const InternalSubMenu = (props: SubMenuProps) => {
 
         {/* Inline mode */}
         {!overflowDisabled && (
-          <InlineSubMenuList id={popupId} open={open} keyPath={keyPath}>
+          <InlineSubMenuList id={popupId} open={open} keyPath={connectedPath}>
             {children}
           </InlineSubMenuList>
         )}
@@ -331,7 +331,7 @@ const InternalSubMenu = (props: SubMenuProps) => {
 export default function SubMenu(props: SubMenuProps) {
   const { eventKey, children } = props;
 
-  const connectedKeyPath = useKeyPath(eventKey);
+  const connectedKeyPath = useFullPath(eventKey);
   const childList: React.ReactElement[] = parseChildren(
     children,
     connectedKeyPath,
@@ -351,15 +351,18 @@ export default function SubMenu(props: SubMenuProps) {
     }
   }, [connectedKeyPath]);
 
-  if (measure) {
-    return (
-      <PathConnectContext.Provider value={connectedKeyPath}>
-        {childList}
-      </PathConnectContext.Provider>
-    );
-  }
+  let renderNode: React.ReactNode;
 
   // ======================== Render ========================
+  if (measure) {
+    renderNode = childList;
+  } else {
+    renderNode = <InternalSubMenu {...props}>{childList}</InternalSubMenu>;
+  }
 
-  return <InternalSubMenu {...props}>{childList}</InternalSubMenu>;
+  return (
+    <PathTrackerContext.Provider value={connectedKeyPath}>
+      {renderNode}
+    </PathTrackerContext.Provider>
+  );
 }

src/context/MeasureContext.tsx → src/context/PathContext.tsx

@@ -16,21 +16,21 @@ export function useMeasure() {
   return React.useContext(PathRegisterContext);
 }
 
-// ========================= Path Connect ==========================
-export const PathConnectContext = React.createContext<string[]>(EmptyList);
-
-export function useKeyPath(eventKey: string) {
-  const parentKeyPath = React.useContext(PathConnectContext);
-  return React.useMemo(() => [...parentKeyPath, eventKey], [
-    parentKeyPath,
-    eventKey,
-  ]);
+// ========================= Path Tracker ==========================
+export const PathTrackerContext = React.createContext<string[]>(EmptyList);
+
+export function useFullPath(eventKey?: string) {
+  const parentKeyPath = React.useContext(PathTrackerContext);
+  return React.useMemo(
+    () =>
+      eventKey !== undefined ? [...parentKeyPath, eventKey] : parentKeyPath,
+    [parentKeyPath, eventKey],
+  );
 }
 
 // =========================== Path User ===========================
 export interface PathUserContextProps {
   isSubPathKey: (pathKeys: string[], eventKey: string) => boolean;
-  getKeyPath: (eventKey: string) => string[];
 }
 
 export const PathUserContext = React.createContext<PathUserContextProps>(null);

tests/__snapshots__/Keyboard.spec.tsx.snap

@@ -32,7 +32,7 @@ exports[`Menu.Keyboard no data-menu-id by init 1`] = `
       <li
         class="rc-menu-item"
         role="menuitem"
-        style="padding-left:24px"
+        style="padding-left:48px"
         tabindex="-1"
       >
         Bamboo