@broxus/react-uikit 0.21.0 → 0.23.0

package/dist/cjs/components/Nav/Nav.d.ts

@@ -1,28 +1,12 @@
-import { type CSSMotionProps } from 'rc-motion';
+import { type CSSMotionProps } from '@rc-component/motion';
 import * as React from 'react';
-import { type BuiltinPlacements, type ItemType, type NavClickEventHandler, type NavMode, type NavModifier, type NavRef, type RenderIconType, type SelectEventHandler, type TriggerSubNavAction } from '../../components/Nav/types';
+import { type SemanticName } from '../../components/Nav/Sub/InternalSubNav';
+import { type BuiltinPlacements, type ItemType, type NavClickEventHandler, type NavMode, type NavModifier, type NavPopupRender, type NavRef, type RenderIconType, type SelectEventHandler, type TriggerSubNavAction } from '../../components/Nav/types';
 import { type Direction } from '../../types';
 export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onClick' | 'onSelect' | 'dir'> {
-    /**
-     * @private Only used for `pro-layout`. Do not use in your prod directly,
-     * and we do not promise any compatibility for this.
-     */
-    _internalRenderMenuItem?: (originNode: React.ReactElement, menuItemProps: any, stateProps: {
-        selected: boolean;
-    }) => React.ReactElement;
-    /**
-     * @private Only used for `pro-layout`. Do not use in your prod directly,
-     * and we do not promise any compatibility for this.
-     */
-    _internalRenderSubMenuItem?: (originNode: React.ReactElement, subMenuItemProps: any, stateProps: {
-        active: boolean;
-        disabled: boolean;
-        open: boolean;
-        selected: boolean;
-    }) => React.ReactElement;
     activeKey?: string;
     builtinPlacements?: BuiltinPlacements;
-    children?: React.ReactNode;
+    classNames?: Partial<Record<SemanticName, string>>;
     defaultActiveFirst?: boolean;
     defaultMotions?: Partial<{
         [key in NavMode | 'other']: CSSMotionProps;
@@ -31,7 +15,6 @@ export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, '
     defaultSelectedKeys?: string[];
     direction?: Direction;
     disabled?: boolean;
-    disabledOverflow?: boolean;
     expandIcon?: RenderIconType;
     forceSubNavRender?: boolean;
     getPopupContainer?: (node: HTMLElement) => HTMLElement;
@@ -43,12 +26,16 @@ export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, '
     motion?: CSSMotionProps;
     multiple?: boolean;
     openKeys?: string[];
+    overflowDisabled?: boolean;
     overflowedIndicator?: React.ReactNode;
     overflowedIndicatorPopupClassName?: string;
     popupPrefixCls?: string;
+    popupRender?: NavPopupRender;
     prefixCls?: string;
+    rootClassName?: string;
     selectable?: boolean;
     selectedKeys?: string[];
+    styles?: Partial<Record<SemanticName, React.CSSProperties>>;
     subNavCloseDelay?: number;
     subNavOpenDelay?: number;
     triggerSubNavAction?: TriggerSubNavAction;

package/dist/cjs/components/Nav/Nav.js

@@ -37,50 +37,42 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Nav = void 0;
+const util_1 = require("@rc-component/util");
+const useId_1 = __importDefault(require("@rc-component/util/es/hooks/useId"));
+const isEqual_1 = __importDefault(require("@rc-component/util/es/isEqual"));
 const classnames_1 = __importDefault(require("classnames"));
 const rc_overflow_1 = __importDefault(require("rc-overflow"));
-const useMergedState_1 = __importDefault(require("rc-util/lib/hooks/useMergedState"));
-const isEqual_1 = __importDefault(require("rc-util/lib/isEqual"));
 const React = __importStar(require("react"));
 const ReactDOM = __importStar(require("react-dom"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
-const IdContext_1 = require("../../components/Nav/context/IdContext");
-const NavContext_1 = require("../../components/Nav/context/NavContext");
-const PathContext_1 = require("../../components/Nav/context/PathContext");
-const PrivateContext_1 = require("../../components/Nav/context/PrivateContext");
-const useAccessibility_1 = require("../../components/Nav/hooks/useAccessibility");
-const useKeyRecords_1 = require("../../components/Nav/hooks/useKeyRecords");
-const useMemoCallback_1 = require("../../components/Nav/hooks/useMemoCallback");
-const useUUID_1 = require("../../components/Nav/hooks/useUUID");
+const context_1 = require("../../components/Nav/context");
+const hooks_1 = require("../../components/Nav/hooks");
 const Item_1 = require("../../components/Nav/Item");
 const Sub_1 = require("../../components/Nav/Sub");
-const nodeUtil_1 = require("../../components/Nav/utils/nodeUtil");
-const warnUtil_1 = require("../../components/Nav/utils/warnUtil");
-const hooks_1 = require("../../hooks");
-const utils_1 = require("../../utils");
-const EMPTY_LIST = [];
-exports.Nav = React.forwardRef((props, ref) => {
+const utils_1 = require("../../components/Nav/utils");
+const hooks_2 = require("../../hooks");
+const utils_2 = require("../../utils");
+const EmptyList = [];
+exports.Nav = React.forwardRef(({ activeKey, builtinPlacements, children, className, classNames: navClassNames, defaultActiveFirst, defaultOpenKeys, defaultSelectedKeys, direction, disabled, expandIcon, forceSubNavRender, id, inlineCollapsed, itemIcon, items, mode = 'inline', modifiers, motion, multiple = false, openKeys, overflowDisabled, overflowedIndicator = '...', overflowedIndicatorPopupClassName, popupRender, selectable = false, selectedKeys, style, styles, subNavCloseDelay = 0.1, subNavOpenDelay = 0.1, tabIndex = 0, triggerSubNavAction = 'hover', onClick, onDeselect, onKeyDown, onOpenChange, onSelect, ...props }, ref) => {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { _internalRenderMenuItem, _internalRenderSubMenuItem, activeKey, builtinPlacements, children, className, defaultActiveFirst, prefixCls = config.prefixCls, defaultMotions = {
+    const { prefixCls = config.prefixCls, defaultMotions = {
         horizontal: {
-            motionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'),
+            motionName: (0, utils_2.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'),
         },
-        inline: (0, utils_1.getCollapseMotion)(prefixCls || config.prefixCls),
+        inline: (0, utils_2.getCollapseMotion)(prefixCls || config.prefixCls),
         other: {
             leavedClassName: `${prefixCls || config.prefixCls}-hidden`,
-            motionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'zoom'),
+            motionName: (0, utils_2.getMotionName)(prefixCls || config.prefixCls, 'zoom'),
         },
-    }, defaultOpenKeys, defaultSelectedKeys, direction, disabled, disabledOverflow, expandIcon, forceSubNavRender, getPopupContainer = config.getPopupContainer, id, inlineCollapsed, itemIcon, items, mode = 'inline', modifiers, motion, multiple = false, openKeys, overflowedIndicator = '...', overflowedIndicatorPopupClassName, popupPrefixCls = `${config.prefixCls}-dropdown`, selectable = false, selectedKeys, style, subNavCloseDelay = 0.1, subNavOpenDelay = 0.1, tabIndex = 0, triggerSubNavAction = 'hover', onClick, onDeselect, onKeyDown, onOpenChange, onSelect, ...restProps } = props;
-    const childList = React.useMemo(() => (0, nodeUtil_1.parseItems)(children, items, EMPTY_LIST), [children, items]);
-    const mounted = (0, hooks_1.useMounted)();
+    }, getPopupContainer = config.getPopupContainer, popupPrefixCls = `${config.prefixCls}-dropdown`, ...restProps } = props;
+    const childList = React.useMemo(() => (0, utils_1.parseItems)(children, items, EmptyList, {}, prefixCls), [children, items, prefixCls]);
+    const mounted = (0, hooks_2.useMounted)();
     const containerRef = React.useRef(null);
-    const uuid = (0, useUUID_1.useUUID)(id);
+    const uuid = (0, useId_1.default)(id);
     const isRtl = direction === 'rtl';
     // ========================= Open =========================
-    const [mergedOpenKeys, setMergedOpenKeys] = (0, useMergedState_1.default)(defaultOpenKeys, {
-        postState: keys => keys || EMPTY_LIST,
-        value: openKeys,
-    });
+    const [innerOpenKeys, setMergedOpenKeys] = (0, util_1.useControlledState)(defaultOpenKeys, openKeys);
+    const mergedOpenKeys = innerOpenKeys || EmptyList;
     // React 18 will merge mouse event which means we open key will not sync
     // ref: https://github.com/ant-design/ant-design/issues/38818
     const triggerOpenKeys = React.useCallback((keys, forceFlush = false) => {
@@ -107,7 +99,7 @@ exports.Nav = React.forwardRef((props, ref) => {
     }, [mode, inlineCollapsed]);
     const isInlineMode = mergedMode === 'inline';
     const [internalMode, setInternalMode] = React.useState(mergedMode);
-    const [, setInternalInlineCollapsed] = React.useState(mergedInlineCollapsed);
+    const [internalInlineCollapsed, setInternalInlineCollapsed] = React.useState(mergedInlineCollapsed);
     React.useEffect(() => {
         setInternalMode(mergedMode);
         setInternalInlineCollapsed(mergedInlineCollapsed);
@@ -120,7 +112,7 @@ exports.Nav = React.forwardRef((props, ref) => {
         }
         else {
             // Trigger open event in case it`s in control
-            triggerOpenKeys(EMPTY_LIST);
+            triggerOpenKeys(EmptyList);
         }
     }, [
         mergedMode,
@@ -134,7 +126,7 @@ exports.Nav = React.forwardRef((props, ref) => {
     const [lastVisibleIndex, setLastVisibleIndex] = React.useState(0);
     const allVisible = lastVisibleIndex >= childList.length - 1
         || internalMode !== 'horizontal'
-        || disabledOverflow;
+        || overflowDisabled;
     // Cache
     React.useEffect(() => {
         if (isInlineMode) {
@@ -148,49 +140,66 @@ exports.Nav = React.forwardRef((props, ref) => {
         };
     }, []);
     // ========================= Path =========================
-    const { getKeyPath, getKeys, getSubPathKeys, isSubPathKey, refreshOverflowKeys, registerPath, unregisterPath, } = (0, useKeyRecords_1.useKeyRecords)();
+    const { getKeyPath, getKeys, getSubPathKeys, isSubPathKey, refreshOverflowKeys, registerPath, unregisterPath, } = (0, hooks_1.useKeyRecords)();
     const registerPathContext = React.useMemo(() => ({ registerPath, unregisterPath }), [registerPath, unregisterPath]);
     const pathUserContext = React.useMemo(() => ({ isSubPathKey }), [isSubPathKey]);
     React.useEffect(() => {
         refreshOverflowKeys(allVisible
-            ? EMPTY_LIST
+            ? EmptyList
             : childList.slice(lastVisibleIndex + 1).map(child => child.key));
     }, [lastVisibleIndex, allVisible, refreshOverflowKeys, childList]);
     // ======================== Active ========================
-    const [mergedActiveKey, setMergedActiveKey] = (0, useMergedState_1.default)(activeKey || ((defaultActiveFirst && childList[0]?.key)), { value: activeKey });
-    const onActive = (0, useMemoCallback_1.useMemoCallback)((key) => {
+    const [mergedActiveKey, setMergedActiveKey] = (0, util_1.useControlledState)(activeKey || (defaultActiveFirst && childList[0]?.key), activeKey);
+    const onActive = (0, hooks_1.useMemoCallback)((key) => {
         setMergedActiveKey(key);
     });
-    const onInactive = (0, useMemoCallback_1.useMemoCallback)(() => {
+    const onInactive = (0, hooks_1.useMemoCallback)(() => {
         setMergedActiveKey(undefined);
     });
     React.useImperativeHandle(ref, () => ({
+        findItem: ({ key: itemKey }) => {
+            const keys = getKeys();
+            const { key2element } = (0, hooks_1.refreshElements)(keys, uuid);
+            return key2element.get(itemKey) || null;
+        },
         focus: options => {
-            const shouldFocusKey = mergedActiveKey
-                ?? childList.find(node => !node.props.disabled)?.key;
-            if (shouldFocusKey) {
-                containerRef.current
-                    ?.querySelector(`li[data-nav-id='${(0, IdContext_1.getNavId)(uuid, shouldFocusKey)}']`)
-                    ?.focus?.(options);
+            if (!containerRef.current) {
+                return;
+            }
+            const keys = getKeys();
+            const { element2key, elements, key2element } = (0, hooks_1.refreshElements)(keys, uuid);
+            const focusableElements = (0, hooks_1.getFocusableElements)(containerRef.current, elements);
+            let shouldFocusKey;
+            if (mergedActiveKey && keys.includes(mergedActiveKey)) {
+                shouldFocusKey = mergedActiveKey;
+            }
+            else {
+                shouldFocusKey = focusableElements[0]
+                    ? element2key.get(focusableElements[0])
+                    : childList.find(node => !node.props.disabled)?.key;
+            }
+            if (!shouldFocusKey) {
+                return;
+            }
+            const elementToFocus = key2element.get(shouldFocusKey);
+            if (shouldFocusKey && elementToFocus) {
+                elementToFocus?.focus?.(options);
             }
         },
         list: containerRef.current,
     }));
     // ======================== Select ========================
     // >>>>> Select keys
-    const [mergedSelectKeys, setMergedSelectKeys] = (0, useMergedState_1.default)(defaultSelectedKeys || [], {
-        // Legacy convert key to array
-        postState: keys => {
-            if (Array.isArray(keys)) {
-                return keys;
-            }
-            if (keys === null || keys === undefined) {
-                return EMPTY_LIST;
-            }
-            return [keys];
-        },
-        value: selectedKeys,
-    });
+    const [internalSelectKeys, setMergedSelectKeys] = (0, util_1.useControlledState)(defaultSelectedKeys || EmptyList, selectedKeys);
+    const mergedSelectKeys = React.useMemo(() => {
+        if (Array.isArray(internalSelectKeys)) {
+            return internalSelectKeys;
+        }
+        if (internalSelectKeys === null || internalSelectKeys === undefined) {
+            return EmptyList;
+        }
+        return [internalSelectKeys];
+    }, [internalSelectKeys]);
     // >>>>> Trigger select
     const triggerSelection = (info) => {
         if (selectable) {
@@ -211,10 +220,7 @@ exports.Nav = React.forwardRef((props, ref) => {
             }
             setMergedSelectKeys(newSelectKeys);
             // Trigger event
-            const selectInfo = {
-                ...info,
-                selectedKeys: newSelectKeys,
-            };
+            const selectInfo = { ...info, selectedKeys: newSelectKeys };
             if (exist) {
                 onDeselect?.(selectInfo);
             }
@@ -224,18 +230,18 @@ exports.Nav = React.forwardRef((props, ref) => {
         }
         // Whatever selectable, always close it
         if (!multiple && mergedOpenKeys?.length && internalMode !== 'inline') {
-            triggerOpenKeys(EMPTY_LIST);
+            triggerOpenKeys(EmptyList);
         }
     };
     // ========================= Open =========================
     /**
      * Click for item. SubMenu do not have selection status
      */
-    const onInternalClick = (0, useMemoCallback_1.useMemoCallback)((info) => {
-        onClick?.((0, warnUtil_1.warnItemProp)(info));
+    const onInternalClick = (0, hooks_1.useMemoCallback)((info) => {
+        onClick?.((0, utils_1.warnItemProp)(info));
         triggerSelection(info);
     });
-    const onInternalOpenChange = (0, useMemoCallback_1.useMemoCallback)((key, open) => {
+    const onInternalOpenChange = (0, hooks_1.useMemoCallback)((key, open) => {
         let newOpenKeys = mergedOpenKeys?.filter(k => k !== key);
         if (open) {
             newOpenKeys?.push(key);
@@ -249,49 +255,38 @@ exports.Nav = React.forwardRef((props, ref) => {
             triggerOpenKeys(newOpenKeys, true);
         }
     });
-    const getInternalPopupContainer = (0, useMemoCallback_1.useMemoCallback)(getPopupContainer);
     // ==================== Accessibility =====================
     const triggerAccessibilityOpen = (key, open) => {
         const nextOpen = open ?? !mergedOpenKeys?.includes(key);
         onInternalOpenChange?.(key, nextOpen);
     };
-    const onInternalKeyDown = (0, useAccessibility_1.useAccessibility)(internalMode, mergedActiveKey, isRtl, uuid, containerRef, getKeys, getKeyPath, setMergedActiveKey, triggerAccessibilityOpen, onKeyDown);
-    // ======================= Context ========================
-    const privateContext = React.useMemo(() => ({
-        _internalRenderMenuItem,
-        _internalRenderSubMenuItem,
-    }), [_internalRenderMenuItem, _internalRenderSubMenuItem]);
+    const onInternalKeyDown = (0, hooks_1.useAccessibility)(internalMode, mergedActiveKey, isRtl, uuid, containerRef, getKeys, getKeyPath, setMergedActiveKey, triggerAccessibilityOpen, onKeyDown);
     // ======================== Render ========================
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'nav'), [config, prefixCls]);
+    const modifiersClasses = React.useMemo(() => (Array.isArray(modifiers) ? modifiers : [modifiers])
+        .filter(e => e)
+        .map(mod => `${rootCls}-${mod}`), [modifiers, rootCls]);
     // >>>>> Children
-    const wrappedChildList = mergedMode !== 'horizontal' || disabledOverflow
+    const wrappedChildList = mergedMode !== 'horizontal' || overflowDisabled
         ? childList
         // Need wrap for overflow dropdown that do not response for open
         : childList.map((child, index) => (
         // Always wrap provider to avoid sub node re-mount
-        React.createElement(NavContext_1.NavContextProvider, { key: child.key, overflowDisabled: index > lastVisibleIndex }, child)));
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'nav'), [config, prefixCls]);
-    const container = (React.createElement(rc_overflow_1.default, { ref: containerRef, className: (0, classnames_1.default)({
-            [rootCls]: mergedMode !== 'horizontal',
-        }, (Array.isArray(modifiers) ? modifiers : [modifiers])
-            .filter(e => e)
-            .map(mod => `${rootCls}-${mod}`), {
-            [`${rootCls}-${mergedMode}`]: rootCls && mergedMode,
-            [`${rootCls}-rtl`]: rootCls && isRtl,
-        }, className), component: "ul", data: wrappedChildList, "data-menu-list": true, dir: direction, id: id, itemComponent: Item_1.Item, maxCount: (mergedMode !== 'horizontal' || disabledOverflow)
-            ? rc_overflow_1.default.INVALIDATE
-            : rc_overflow_1.default.RESPONSIVE, prefixCls: rootCls, renderRawItem: node => node, renderRawRest: omitItems => {
+        React.createElement(context_1.NavContextProvider, { key: child.key, classNames: navClassNames, overflowDisabled: index > lastVisibleIndex, styles: styles }, child)));
+    const container = (React.createElement(rc_overflow_1.default, { ref: containerRef, className: (0, classnames_1.default)(className, { [rootCls]: internalMode !== 'horizontal' }, `${rootCls}-${internalMode}`, modifiersClasses, {
+            [`${rootCls}-inline-collapsed`]: internalInlineCollapsed,
+            [`${rootCls}-rtl`]: isRtl,
+        }), component: "ul", data: wrappedChildList, "data-nav-list": true, dir: direction, id: id, itemComponent: Item_1.Item, maxCount: (internalMode !== 'horizontal' || overflowDisabled) ? rc_overflow_1.default.INVALIDATE : rc_overflow_1.default.RESPONSIVE, prefixCls: rootCls, renderRawItem: node => node, renderRawRest: omitItems => {
             // We use origin list since wrapped list use context to prevent open
             const len = omitItems.length;
             const originOmitItems = len ? childList.slice(-len) : null;
-            return (React.createElement(Sub_1.Sub, { disabled: allVisible, eventKey: useKeyRecords_1.OVERFLOW_KEY, internalPopupClose: len === 0, popupClassName: overflowedIndicatorPopupClassName, title: overflowedIndicator }, originOmitItems));
+            return (React.createElement(Sub_1.Sub, { disabled: allVisible, eventKey: hooks_1.OVERFLOW_KEY, internalPopupClose: len === 0, popupClassName: overflowedIndicatorPopupClassName, title: overflowedIndicator }, originOmitItems));
         }, role: "menu", ssr: "full", style: style, tabIndex: tabIndex, onKeyDown: onInternalKeyDown, onVisibleChange: newLastIndex => {
             setLastVisibleIndex(newLastIndex);
         }, ...restProps }));
-    // >>>>> Render
-    return (React.createElement(PrivateContext_1.PrivateContext.Provider, { value: privateContext },
-        React.createElement(IdContext_1.IdContext.Provider, { value: uuid },
-            React.createElement(NavContext_1.NavContextProvider, { activeKey: mergedActiveKey, builtinPlacements: builtinPlacements, defaultMotions: mounted ? defaultMotions : undefined, disabled: disabled, expandIcon: expandIcon, forceSubNavRender: forceSubNavRender, getPopupContainer: getInternalPopupContainer, itemIcon: itemIcon, mode: mergedMode, motion: mounted ? motion : undefined, openKeys: mergedOpenKeys, popupPrefixCls: popupPrefixCls, prefixCls: rootCls, rtl: isRtl, selectedKeys: mergedSelectKeys, subNavCloseDelay: subNavCloseDelay, subNavOpenDelay: subNavOpenDelay, triggerSubNavAction: triggerSubNavAction, onActive: onActive, onInactive: onInactive, onItemClick: onInternalClick, onOpenChange: onInternalOpenChange },
-                React.createElement(PathContext_1.PathUserContext.Provider, { value: pathUserContext }, container),
-                React.createElement("div", { "aria-hidden": true, style: { display: 'none' } },
-                    React.createElement(PathContext_1.PathRegisterContext.Provider, { value: registerPathContext }, childList))))));
+    return (React.createElement(context_1.IdContext.Provider, { value: uuid },
+        React.createElement(context_1.NavContextProvider, { activeKey: mergedActiveKey, builtinPlacements: builtinPlacements, defaultMotions: mounted ? defaultMotions : undefined, disabled: disabled, expandIcon: expandIcon, forceSubNavRender: forceSubNavRender, getPopupContainer: getPopupContainer, itemIcon: itemIcon, mode: mergedMode, motion: mounted ? motion : undefined, openKeys: mergedOpenKeys, popupPrefixCls: popupPrefixCls, popupRender: popupRender, prefixCls: rootCls, rtl: isRtl, selectedKeys: mergedSelectKeys, subNavCloseDelay: subNavCloseDelay, subNavOpenDelay: subNavOpenDelay, triggerSubNavAction: triggerSubNavAction, onActive: onActive, onInactive: onInactive, onItemClick: onInternalClick, onOpenChange: onInternalOpenChange },
+            React.createElement(context_1.PathUserContext.Provider, { value: pathUserContext }, container),
+            React.createElement("div", { "aria-hidden": true, style: { display: 'none' } },
+                React.createElement(context_1.PathRegisterContext.Provider, { value: registerPathContext }, childList)))));
 });

package/dist/cjs/components/Nav/Sub/InlineSubNavList.d.ts

@@ -5,7 +5,7 @@ export interface InlineSubNavListProps {
     keyPath: string[];
     open: boolean;
 }
-export declare function InlineSubNavList({ children, id, keyPath, open }: InlineSubNavListProps): React.JSX.Element | null;
+export declare function InlineSubNavList({ children, id, keyPath, open }: InlineSubNavListProps): React.ReactElement | null;
 export declare namespace InlineSubNavList {
     var displayName: string;
 }

package/dist/cjs/components/Nav/Sub/InlineSubNavList.js

@@ -40,13 +40,13 @@ exports.InlineSubNavList = InlineSubNavList;
 const motion_1 = __importDefault(require("@rc-component/motion"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../../components/ConfigProvider");
-const NavContext_1 = require("../../../components/Nav/context/NavContext");
+const context_1 = require("../../../components/Nav/context");
 const SubNavList_1 = require("../../../components/Nav/Sub/SubNavList");
-const motionUtil_1 = require("../../../components/Nav/utils/motionUtil");
+const utils_1 = require("../../../components/Nav/utils");
+const fixedMode = 'inline';
 function InlineSubNavList({ children, id, keyPath, open }) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const fixedMode = 'inline';
-    const { defaultMotions, forceSubNavRender, mode, motion, prefixCls, } = React.useContext(NavContext_1.NavContext);
+    const { defaultMotions, forceSubNavRender, mode, motion, prefixCls, } = React.useContext(context_1.NavContext);
     // Always use the latest mode check
     const sameModeRef = React.useRef(false);
     sameModeRef.current = mode === fixedMode;
@@ -62,7 +62,7 @@ function InlineSubNavList({ children, id, keyPath, open }) {
         }
     }, [mode]);
     // ================================= Render =================================
-    const mergedMotion = { ...(0, motionUtil_1.getMotion)(fixedMode, motion, defaultMotions) };
+    const mergedMotion = { ...(0, utils_1.getMotion)(fixedMode, motion, defaultMotions) };
     // No need appear since nest inlineCollapse changed
     if (keyPath.length > 1) {
         mergedMotion.motionAppear = false;
@@ -78,7 +78,7 @@ function InlineSubNavList({ children, id, keyPath, open }) {
     if (destroy) {
         return null;
     }
-    return (React.createElement(NavContext_1.NavContextProvider, { locked: !sameModeRef.current, mode: fixedMode, prefixCls: prefixCls },
+    return (React.createElement(context_1.NavContextProvider, { locked: !sameModeRef.current, mode: fixedMode, prefixCls: prefixCls },
         React.createElement(motion_1.default, { visible: mergedOpen, ...mergedMotion, forceRender: forceSubNavRender, leavedClassName: `${config.prefixCls}-hidden`, removeOnLeave: false }, ({ className: motionClassName, style: motionStyle }) => (React.createElement(SubNavList_1.SubNavList, { className: motionClassName, id: id, style: motionStyle }, children)))));
 }
 if (process.env.NODE_ENV !== 'production') {

package/dist/cjs/components/Nav/Sub/InternalSubNav.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { type NavPopupRender, type SubNavType } from '../../../components/Nav/types';
+export type SemanticName = 'list' | 'listTitle';
+export interface SubNavProps extends Omit<SubNavType, 'children' | 'key' | 'label'> {
+    classNames?: Partial<Record<SemanticName, string>>;
+    eventKey?: string;
+    internalPopupClose?: boolean;
+    popupRender?: NavPopupRender;
+    styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+    title?: React.ReactNode;
+    warnKey?: boolean;
+}
+export declare const InternalSubNav: React.ForwardRefExoticComponent<SubNavProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLLIElement>>;

package/dist/cjs/components/Nav/Sub/InternalSubNav.js

@@ -0,0 +1,196 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalSubNav = void 0;
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
+const util_1 = require("@rc-component/util");
+const classnames_1 = __importDefault(require("classnames"));
+const rc_overflow_1 = __importDefault(require("rc-overflow"));
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../../components/ConfigProvider");
+const context_1 = require("../../../components/Nav/context");
+const hooks_1 = require("../../../components/Nav/hooks");
+const InlineSubNavList_1 = require("../../../components/Nav/Sub/InlineSubNavList");
+const PopupTrigger_1 = require("../../../components/Nav/Sub/PopupTrigger");
+const SubNavList_1 = require("../../../components/Nav/Sub/SubNavList");
+const utils_1 = require("../../../components/Nav/utils");
+exports.InternalSubNav = React.forwardRef(({ children, className, classNames: navClassNames, disabled, eventKey, expandIcon, internalPopupClose, itemIcon, popupClassName, popupOffset, popupRender: propsPopupRender, popupStyle, style, styles, title, warnKey, onClick, onMouseEnter, onMouseLeave, onTitleClick, onTitleMouseEnter, onTitleMouseLeave, ...props }, ref) => {
+    const config = (0, ConfigProvider_1.useConfig)();
+    const connectedPath = (0, context_1.useFullPath)();
+    const domDataId = (0, context_1.useNavId)(eventKey);
+    const { activeKey, disabled: contextDisabled, expandIcon: contextExpandIcon, itemIcon: contextItemIcon, mode, openKeys, overflowDisabled, popupPrefixCls, popupRender: contextPopupRender, selectedKeys, onActive, onItemClick, onOpenChange, } = React.useContext(context_1.NavContext);
+    const pathUser = React.useContext(context_1.PathUserContext);
+    const elementRef = React.useRef(null);
+    const popupRef = React.useRef(null);
+    const mergedDisabled = contextDisabled || disabled;
+    // ================================ Warn ================================
+    if (process.env.NODE_ENV !== 'production' && warnKey) {
+        (0, util_1.warning)(false, 'SubNav should not leave undefined `key`.');
+    }
+    // ================================ Icon ================================
+    const mergedItemIcon = itemIcon || contextItemIcon;
+    const mergedExpandIcon = expandIcon || contextExpandIcon;
+    // ================================ Open ================================
+    const originOpen = eventKey ? openKeys.includes(eventKey) : false;
+    const open = !overflowDisabled && originOpen;
+    // =============================== Select ===============================
+    const childrenSelected = eventKey ? pathUser?.isSubPathKey(selectedKeys, eventKey) : false;
+    // =============================== Active ===============================
+    const { active, ...activeProps } = (0, hooks_1.useActive)(eventKey, mergedDisabled, onTitleMouseEnter, onTitleMouseLeave);
+    // Fallback of active check to avoid hover on menu title or disabled item
+    const [childrenActive, setChildrenActive] = React.useState(false);
+    const triggerChildrenActive = (newActive) => {
+        if (!mergedDisabled) {
+            setChildrenActive(newActive);
+        }
+    };
+    const onInternalMouseEnter = domEvent => {
+        triggerChildrenActive(true);
+        if (eventKey) {
+            onMouseEnter?.({ domEvent, key: eventKey });
+        }
+    };
+    const onInternalMouseLeave = domEvent => {
+        triggerChildrenActive(false);
+        if (eventKey) {
+            onMouseLeave?.({ domEvent, key: eventKey });
+        }
+    };
+    const mergedActive = React.useMemo(() => {
+        if (active) {
+            return active;
+        }
+        if (mode !== 'inline' && eventKey) {
+            return childrenActive || pathUser?.isSubPathKey([activeKey], eventKey);
+        }
+        return false;
+    }, [active, mode, eventKey, childrenActive, pathUser, activeKey]);
+    // ========================== DirectionStyle ==========================
+    const directionStyle = (0, hooks_1.useDirectionStyle)(connectedPath.length);
+    // =============================== Events ===============================
+    // Title click
+    const onInternalTitleClick = domEvent => {
+        // Skip if disabled
+        if (mergedDisabled) {
+            return;
+        }
+        if (eventKey) {
+            onTitleClick?.({ domEvent, key: eventKey });
+        }
+        // Trigger open by click when mode is `inline`
+        if (mode === 'inline' && eventKey) {
+            onOpenChange(eventKey, !originOpen);
+        }
+    };
+    // Context for children click
+    const onMergedItemClick = (0, hooks_1.useMemoCallback)((info) => {
+        onClick?.((0, utils_1.warnItemProp)(info));
+        onItemClick?.(info);
+    });
+    // Visible change
+    const onPopupVisibleChange = (newVisible) => {
+        if (mode !== 'inline' && eventKey) {
+            onOpenChange(eventKey, newVisible);
+        }
+    };
+    /**
+     * Used for accessibility. Helper will focus element without keyboard.
+     * We should manually trigger an active
+     */
+    const onInternalFocus = () => {
+        if (eventKey) {
+            onActive(eventKey);
+        }
+    };
+    // =============================== Render ===============================
+    const popupId = domDataId ? `${domDataId}-dropdown` : undefined;
+    // Title
+    let titleNode = (React.createElement("a", { ref: elementRef, "aria-controls": popupId, "aria-disabled": mergedDisabled, "aria-expanded": open, "aria-haspopup": true, "data-nav-id": overflowDisabled && domDataId ? null : domDataId, role: mergedDisabled ? undefined : 'menuitem', style: { ...directionStyle }, tabIndex: mergedDisabled ? undefined : -1, onClick: onInternalTitleClick, onFocus: onInternalFocus, ...activeProps },
+        React.createElement(React.Fragment, { key: "children" },
+            title,
+            typeof mergedExpandIcon === 'function' ? mergedExpandIcon({
+                disabled: mergedDisabled,
+                isOpen: open,
+                isSubNav: true,
+            }) : mergedExpandIcon)));
+    // Cache mode if it changes to `inline` which do not have popup motion
+    const triggerModeRef = React.useRef(mode);
+    if (mode !== 'inline' && connectedPath.length > 1) {
+        triggerModeRef.current = 'vertical';
+    }
+    else {
+        triggerModeRef.current = mode;
+    }
+    const popupContentTriggerMode = triggerModeRef.current;
+    const renderPopupContent = React.useMemo(() => {
+        const originNode = (React.createElement(context_1.NavContextProvider, { classNames: navClassNames, mode: popupContentTriggerMode === 'horizontal' ? 'vertical' : popupContentTriggerMode, styles: styles },
+            React.createElement(SubNavList_1.SubNavList, { ref: popupRef, className: `${popupPrefixCls}-nav`, id: popupId }, children)));
+        const mergedPopupRender = propsPopupRender || contextPopupRender;
+        if (mergedPopupRender) {
+            return mergedPopupRender(originNode, { item: props, keys: connectedPath });
+        }
+        return originNode;
+    }, [
+        navClassNames,
+        popupContentTriggerMode,
+        styles,
+        popupPrefixCls,
+        popupId,
+        children,
+        propsPopupRender,
+        contextPopupRender,
+        props,
+        connectedPath,
+    ]);
+    if (!overflowDisabled) {
+        const triggerMode = triggerModeRef.current;
+        // Still wrap with Trigger here since we need avoid react re-mount dom node
+        // Which makes motion failed
+        titleNode = (React.createElement(PopupTrigger_1.PopupTrigger, { disabled: mergedDisabled, mode: triggerMode, popup: renderPopupContent, popupClassName: popupClassName, popupOffset: popupOffset, popupStyle: popupStyle, prefixCls: popupPrefixCls, visible: !internalPopupClose && open && mode !== 'inline', onVisibleChange: onPopupVisibleChange }, titleNode));
+    }
+    // List node
+    const listNode = (React.createElement(rc_overflow_1.default.Item, { ref: ref, className: (0, classnames_1.default)(`${config.prefixCls}-parent`, className, {
+            [`${config.prefixCls}-active`]: childrenSelected,
+            [`${config.prefixCls}-disabled`]: mergedDisabled,
+            [`${config.prefixCls}-hover`]: mergedActive,
+            [`${config.prefixCls}-open`]: open,
+        }), role: "none", ...props, component: "li", style: style, onMouseEnter: onInternalMouseEnter, onMouseLeave: onInternalMouseLeave },
+        titleNode,
+        !overflowDisabled && (React.createElement(InlineSubNavList_1.InlineSubNavList, { id: popupId, keyPath: connectedPath, open: open }, children))));
+    return (React.createElement(context_1.NavContextProvider, { classNames: navClassNames, expandIcon: mergedExpandIcon, itemIcon: mergedItemIcon, mode: mode === 'horizontal' ? 'vertical' : mode, styles: styles, onItemClick: onMergedItemClick }, listNode));
+});

package/dist/cjs/components/Nav/Sub/PopupTrigger.d.ts

@@ -7,11 +7,12 @@ export interface PopupTriggerProps {
     popup: React.ReactNode;
     popupClassName?: string;
     popupOffset?: number[];
+    popupStyle?: React.CSSProperties;
     prefixCls: string;
     visible: boolean;
     onVisibleChange: (visible: boolean) => void;
 }
-export declare function PopupTrigger({ children, disabled, mode, popup, popupClassName, popupOffset, prefixCls, visible, onVisibleChange, }: PopupTriggerProps): React.JSX.Element;
+export declare function PopupTrigger({ children, disabled, mode, popup, popupClassName, popupOffset, popupStyle, prefixCls, visible, onVisibleChange, }: PopupTriggerProps): React.ReactElement;
 export declare namespace PopupTrigger {
     var displayName: string;
 }