@broxus/react-uikit 0.22.0 → 0.23.1

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;
 }

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

@@ -38,13 +38,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopupTrigger = PopupTrigger;
 const trigger_1 = __importDefault(require("@rc-component/trigger"));
-const raf_1 = __importDefault(require("@rc-component/util/lib/raf"));
+const util_1 = require("@rc-component/util");
+const raf_1 = __importDefault(require("@rc-component/util/es/raf"));
 const classnames_1 = __importDefault(require("classnames"));
 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 placements_1 = require("../../../components/Nav/placements");
-const motionUtil_1 = require("../../../components/Nav/utils/motionUtil");
+const utils_1 = require("../../../components/Nav/utils");
 const popupPlacementMap = {
     horizontal: 'bottom-left',
     inline: null,
@@ -52,15 +53,15 @@ const popupPlacementMap = {
     'vertical-left': 'right-top',
     'vertical-right': 'left-top',
 };
-function PopupTrigger({ children, disabled, mode, popup, popupClassName, popupOffset, prefixCls, visible, onVisibleChange, }) {
+function PopupTrigger({ children, disabled, mode, popup, popupClassName, popupOffset, popupStyle, prefixCls, visible, onVisibleChange, }) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { builtinPlacements, defaultMotions, forceSubNavRender, getPopupContainer, motion, rtl, subNavCloseDelay = 300, subNavOpenDelay, triggerSubNavAction = 'hover', } = React.useContext(NavContext_1.NavContext);
+    const { builtinPlacements, defaultMotions, forceSubNavRender, getPopupContainer, motion, rootClassName, rtl, subNavCloseDelay = 300, subNavOpenDelay, triggerSubNavAction = 'hover', } = React.useContext(context_1.NavContext);
     const [innerVisible, setInnerVisible] = React.useState(false);
     const placement = rtl
-        ? { ...placements_1.placementsRtl, ...builtinPlacements }
-        : { ...placements_1.placements, ...builtinPlacements };
+        ? (0, util_1.merge)(placements_1.placementsRtl, builtinPlacements || {})
+        : (0, util_1.merge)(placements_1.placements, builtinPlacements || {});
     const popupPlacement = popupPlacementMap[mode];
-    const targetMotion = (0, motionUtil_1.getMotion)(mode, motion, defaultMotions);
+    const targetMotion = (0, utils_1.getMotion)(mode, motion, defaultMotions);
     const targetMotionRef = React.useRef(targetMotion);
     if (mode !== 'inline') {
         /**
@@ -87,9 +88,7 @@ function PopupTrigger({ children, disabled, mode, popup, popupClassName, popupOf
             }
         };
     }, [visible]);
-    return (React.createElement(trigger_1.default, { action: disabled || !triggerSubNavAction ? [] : [triggerSubNavAction], builtinPlacements: placement, forceRender: forceSubNavRender, getPopupContainer: getPopupContainer, hideAction: disabled || !triggerSubNavAction ? [] : [triggerSubNavAction], mouseEnterDelay: subNavOpenDelay, mouseLeaveDelay: subNavCloseDelay, popup: popup, popupAlign: popupOffset && { offset: popupOffset }, popupClassName: (0, classnames_1.default)({
-            [`${prefixCls}-rtl`]: rtl,
-        }, popupClassName), popupMotion: mergedMotion, popupPlacement: popupPlacement, popupVisible: innerVisible, prefixCls: prefixCls, stretch: mode === 'horizontal' ? 'minWidth' : undefined, onPopupVisibleChange: onVisibleChange }, children));
+    return (React.createElement(trigger_1.default, { action: disabled || !triggerSubNavAction ? [] : [triggerSubNavAction], builtinPlacements: placement, forceRender: forceSubNavRender, fresh: true, getPopupContainer: getPopupContainer, hideAction: disabled || !triggerSubNavAction ? [] : [triggerSubNavAction], mouseEnterDelay: subNavOpenDelay, mouseLeaveDelay: subNavCloseDelay, popup: popup, popupAlign: popupOffset && { offset: popupOffset }, popupClassName: (0, classnames_1.default)(`${config.prefixCls}-drop`, { [`${prefixCls}-rtl`]: rtl }, popupClassName, rootClassName), popupMotion: mergedMotion, popupPlacement: popupPlacement, popupStyle: popupStyle, popupVisible: innerVisible, prefixCls: prefixCls, stretch: mode === 'horizontal' ? 'minWidth' : undefined, onOpenChange: onVisibleChange }, children));
 }
 if (process.env.NODE_ENV !== 'production') {
     PopupTrigger.displayName = 'Nav.PopupTrigger';

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

@@ -1,3 +1,2 @@
 import * as React from 'react';
-export type SubNavListProps = React.HTMLAttributes<HTMLUListElement>;
-export declare const SubNavList: React.ForwardRefExoticComponent<SubNavListProps & React.RefAttributes<HTMLUListElement>>;
+export declare const SubNavList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;

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

@@ -39,14 +39,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubNavList = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
-const NavContext_1 = require("../../../components/Nav/context/NavContext");
-exports.SubNavList = React.forwardRef(({ children, className, ...restProps }, ref) => {
-    const { mode, prefixCls, rtl } = React.useContext(NavContext_1.NavContext);
-    return (React.createElement("ul", { className: (0, classnames_1.default)({
+const context_1 = require("../../../components/Nav/context");
+exports.SubNavList = React.forwardRef(({ children, className, ...props }, ref) => {
+    const { mode, prefixCls, rtl } = React.useContext(context_1.NavContext);
+    return (React.createElement("ul", { ref: ref, className: (0, classnames_1.default)({
             [`${prefixCls}-sub-rtl`]: rtl && mode === 'inline',
             [`${prefixCls}-sub`]: mode === 'inline',
             [prefixCls]: mode !== 'inline',
-        }, className), ...restProps, ref: ref, "data-nav-list": "" }, children));
+        }, className), ...props, "data-nav-list": true, role: "menu" }, children));
 });
 if (process.env.NODE_ENV !== 'production') {
     exports.SubNavList.displayName = 'Nav.SubNavList';

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

@@ -1,16 +1,5 @@
 import * as React from 'react';
-import { type SubNavType } from '../../../components/Nav/types';
-export interface SubNavProps extends Omit<SubNavType, 'children' | 'key' | 'label'> {
-    children?: React.ReactNode;
-    /** @private Internal filled key. Do not set it directly */
-    eventKey?: string;
-    /** @private Used for rest popup. Do not use in your prod */
-    internalPopupClose?: boolean;
-    title?: React.ReactNode;
-    /** @private Do not use. Private warning empty usage */
-    warnKey?: boolean;
-}
-export declare function Sub({ children, eventKey, ...restProps }: SubNavProps): React.JSX.Element;
-export declare namespace Sub {
-    var displayName: string;
-}
+import { type SubNavProps } from '../../../components/Nav/Sub/InternalSubNav';
+export declare const Sub: React.ForwardRefExoticComponent<SubNavProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLLIElement>>;

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

@@ -32,180 +32,17 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sub = Sub;
-/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
+exports.Sub = void 0;
 const js_utils_1 = require("@broxus/js-utils");
-const warning_1 = __importDefault(require("@rc-component/util/lib/warning"));
-const classnames_1 = __importDefault(require("classnames"));
-const rc_overflow_1 = __importDefault(require("rc-overflow"));
 const React = __importStar(require("react"));
-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 useActive_1 = require("../../../components/Nav/hooks/useActive");
-const useDirectionStyle_1 = require("../../../components/Nav/hooks/useDirectionStyle");
-const useMemoCallback_1 = require("../../../components/Nav/hooks/useMemoCallback");
-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 nodeUtil_1 = require("../../../components/Nav/utils/nodeUtil");
-const warnUtil_1 = require("../../../components/Nav/utils/warnUtil");
-function InternalSubNav({ children, className, disabled, eventKey, expandIcon, internalPopupClose, itemIcon, popupClassName, popupOffset, style, title, warnKey, onClick, onMouseEnter, onMouseLeave, onTitleClick, onTitleMouseEnter, onTitleMouseLeave, ...props }) {
-    const domDataId = (0, IdContext_1.useNavId)(eventKey);
-    const { activeKey, disabled: contextDisabled, expandIcon: contextExpandIcon, itemIcon: contextItemIcon, mode, openKeys, overflowDisabled, popupPrefixCls, selectedKeys, onActive, onItemClick, onOpenChange, } = React.useContext(NavContext_1.NavContext);
-    const pathUser = React.useContext(PathContext_1.PathUserContext);
-    const connectedPath = (0, PathContext_1.useFullPath)();
-    const { _internalRenderSubMenuItem } = React.useContext(PrivateContext_1.PrivateContext);
-    const mergedDisabled = contextDisabled || disabled;
-    const elementRef = React.useRef(null);
-    const popupRef = React.useRef(null);
-    // ================================ Warn ================================
-    if (process.env.NODE_ENV !== 'production' && warnKey) {
-        (0, warning_1.default)(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, useActive_1.useActive)(eventKey, disabled, 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 (!disabled) {
-            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, useDirectionStyle_1.useDirectionStyle)(connectedPath.length);
-    // =============================== Events ===============================
-    // Title click
-    const onInternalTitleClick = e => {
-        // Skip if disabled
-        if (disabled) {
-            return;
-        }
-        if (eventKey) {
-            onTitleClick?.({
-                domEvent: e,
-                key: eventKey,
-            });
-        }
-        // Trigger open by click when mode is `inline`
-        if (mode === 'inline' && eventKey) {
-            onOpenChange(eventKey, !originOpen);
-        }
-    };
-    // Context for children click
-    const onMergedItemClick = (0, useMemoCallback_1.useMemoCallback)((info) => {
-        onClick?.((0, warnUtil_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": disabled, "aria-expanded": open, "aria-haspopup": true, "data-nav-id": overflowDisabled && domDataId ? null : domDataId, role: disabled ? undefined : 'menuitem', style: { ...directionStyle }, tabIndex: disabled ? undefined : -1, title: typeof title === 'string' ? title : undefined, onClick: onInternalTitleClick, onFocus: onInternalFocus, ...activeProps },
-        React.createElement(React.Fragment, { key: "children" },
-            title,
-            typeof mergedExpandIcon === 'function' ? mergedExpandIcon({
-                disabled,
-                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;
-    }
-    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: disabled, mode: triggerMode, popup: (React.createElement(NavContext_1.NavContextProvider
-            // Special handle of horizontal mode
-            , { 
-                // Special handle of horizontal mode
-                mode: triggerMode === 'horizontal' ? 'vertical' : triggerMode },
-                React.createElement(SubNavList_1.SubNavList, { ref: popupRef, className: `${popupPrefixCls}-nav`, id: popupId }, children))), popupClassName: popupClassName, popupOffset: popupOffset, prefixCls: popupPrefixCls, visible: !internalPopupClose && open && mode !== 'inline', onVisibleChange: onPopupVisibleChange }, titleNode));
-    }
-    // List node
-    let listNode = (React.createElement(rc_overflow_1.default.Item, { className: (0, classnames_1.default)('uk-parent', className, {
-            'uk-active': childrenSelected,
-            'uk-disabled': disabled,
-            'uk-hover': mergedActive,
-            'uk-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))));
-    if (_internalRenderSubMenuItem) {
-        listNode = _internalRenderSubMenuItem(listNode, props, {
-            active: !!mergedActive,
-            disabled: !!mergedDisabled,
-            open,
-            selected: !!childrenSelected,
-        });
-    }
-    return (React.createElement(NavContext_1.NavContextProvider, { expandIcon: mergedExpandIcon, itemIcon: mergedItemIcon, mode: mode === 'horizontal' ? 'vertical' : mode, onItemClick: onMergedItemClick }, listNode));
-}
-// eslint-disable-next-line react/no-multi-comp
-function Sub({ children, eventKey, ...restProps }) {
-    const connectedKeyPath = (0, PathContext_1.useFullPath)(eventKey);
-    const childList = (0, nodeUtil_1.parseChildren)(children, connectedKeyPath);
-    const measure = (0, PathContext_1.useMeasure)();
+const context_1 = require("../../../components/Nav/context");
+const InternalSubNav_1 = require("../../../components/Nav/Sub/InternalSubNav");
+const utils_1 = require("../../../components/Nav/utils");
+exports.Sub = React.forwardRef(({ children, eventKey, ...props }, ref) => {
+    const connectedKeyPath = (0, context_1.useFullPath)(eventKey);
+    const measure = (0, context_1.useMeasure)();
+    const childList = (0, utils_1.parseChildren)(children, connectedKeyPath);
     React.useEffect(() => {
         if (measure && eventKey) {
             measure.registerPath(eventKey, connectedKeyPath);
@@ -215,8 +52,8 @@ function Sub({ children, eventKey, ...restProps }) {
         }
         return js_utils_1.noop;
     }, [connectedKeyPath, eventKey, measure]);
-    return (React.createElement(PathContext_1.PathTrackerContext.Provider, { value: connectedKeyPath }, measure ? childList : React.createElement(InternalSubNav, { eventKey: eventKey, ...restProps }, childList)));
-}
+    return (React.createElement(context_1.PathTrackerContext.Provider, { value: connectedKeyPath }, measure ? childList : (React.createElement(InternalSubNav_1.InternalSubNav, { ref: ref, eventKey: eventKey, ...props }, childList))));
+});
 if (process.env.NODE_ENV !== 'production') {
-    Sub.displayName = 'Nav.Sub';
+    exports.Sub.displayName = 'Nav.Sub';
 }

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

@@ -1,9 +1,11 @@
 import { type CSSMotionProps } from '@rc-component/motion';
 import * as React from 'react';
-import { type BuiltinPlacements, type NavClickEventHandler, type NavMode, type RenderIconType, type TriggerSubNavAction } from '../../../components/Nav/types';
+import { type SemanticName } from '../../../components/Nav/Sub/InternalSubNav';
+import { type BuiltinPlacements, type NavClickEventHandler, type NavMode, type NavPopupRender, type RenderIconType, type TriggerSubNavAction } from '../../../components/Nav/types';
 export interface NavContextProps {
     activeKey: string;
     builtinPlacements?: BuiltinPlacements;
+    classNames?: Partial<Record<SemanticName, string>>;
     defaultMotions?: Partial<{
         [key in NavMode | 'other']: CSSMotionProps;
     }>;
@@ -18,9 +20,12 @@ export interface NavContextProps {
     openKeys: string[];
     overflowDisabled?: boolean;
     popupPrefixCls: string;
+    popupRender?: NavPopupRender;
     prefixCls: string;
+    rootClassName?: string;
     rtl?: boolean;
     selectedKeys: string[];
+    styles?: Partial<Record<SemanticName, React.CSSProperties>>;
     subNavCloseDelay: number;
     subNavOpenDelay: number;
     triggerSubNavAction?: TriggerSubNavAction;
@@ -31,7 +36,6 @@ export interface NavContextProps {
 }
 export declare const NavContext: React.Context<NavContextProps>;
 export interface InheritableContextProps extends Partial<NavContextProps> {
-    children?: React.ReactNode;
     locked?: boolean;
 }
-export declare function NavContextProvider({ children, locked, ...restProps }: InheritableContextProps): React.JSX.Element;
+export declare function NavContextProvider({ children, locked, ...props }: React.PropsWithChildren<InheritableContextProps>): React.ReactElement;

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

@@ -39,9 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavContext = void 0;
 exports.NavContextProvider = NavContextProvider;
-const useMemo_1 = __importDefault(require("@rc-component/util/lib/hooks/useMemo"));
+const useMemo_1 = __importDefault(require("@rc-component/util/es/hooks/useMemo"));
+const isEqual_1 = __importDefault(require("@rc-component/util/es/isEqual"));
 const React = __importStar(require("react"));
-const shallowequal_1 = __importDefault(require("shallowequal"));
 const ConfigProvider_1 = require("../../../components/ConfigProvider");
 exports.NavContext = React.createContext({
     popupPrefixCls: 'dropdown',
@@ -59,16 +59,16 @@ function mergeProps(origin, target) {
     });
     return clone;
 }
-function NavContextProvider({ children, locked, ...restProps }) {
+function NavContextProvider({ children, locked, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
     const context = React.useContext(exports.NavContext);
     const inheritableContext = (0, useMemo_1.default)(() => mergeProps({
         ...context,
         popupPrefixCls: context.popupPrefixCls ?? `${config.prefixCls}-dropdown`,
         prefixCls: context.prefixCls ?? `${config.prefixCls}-nav`,
-    }, restProps), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [context, restProps], (prev, next) => !locked && (prev[0] !== next[0] || !(0, shallowequal_1.default)(prev[1], next[1])));
+    }, props), [config.prefixCls, context, props], (prev, next) => !locked && (prev[0] !== next[0]
+        || !(0, isEqual_1.default)(prev[1], next[1], true)
+        || !(0, isEqual_1.default)(prev[2], next[2], true)));
     return React.createElement(exports.NavContext.Provider, { value: inheritableContext }, children);
 }
 if (process.env.NODE_ENV !== 'production') {

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

@@ -0,0 +1,3 @@
+export * from '../../../components/Nav/context/IdContext';
+export * from '../../../components/Nav/context/NavContext';
+export * from '../../../components/Nav/context/PathContext';

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

@@ -0,0 +1,19 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../../components/Nav/context/IdContext"), exports);
+__exportStar(require("../../../components/Nav/context/NavContext"), exports);
+__exportStar(require("../../../components/Nav/context/PathContext"), exports);

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

@@ -0,0 +1,5 @@
+export * from '../../../components/Nav/hooks/useAccessibility';
+export * from '../../../components/Nav/hooks/useActive';
+export * from '../../../components/Nav/hooks/useDirectionStyle';
+export * from '../../../components/Nav/hooks/useKeyRecords';
+export * from '../../../components/Nav/hooks/useMemoCallback';

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

@@ -0,0 +1,21 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../../components/Nav/hooks/useAccessibility"), exports);
+__exportStar(require("../../../components/Nav/hooks/useActive"), exports);
+__exportStar(require("../../../components/Nav/hooks/useDirectionStyle"), exports);
+__exportStar(require("../../../components/Nav/hooks/useKeyRecords"), exports);
+__exportStar(require("../../../components/Nav/hooks/useMemoCallback"), exports);