@broxus/react-uikit 0.22.0 → 0.23.0

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

@@ -1,12 +1,12 @@
 import CSSMotion from '@rc-component/motion';
 import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
-import { NavContext, NavContextProvider } from '../../../components/Nav/context/NavContext';
+import { NavContext, NavContextProvider } from '../../../components/Nav/context';
 import { SubNavList } from '../../../components/Nav/Sub/SubNavList';
-import { getMotion } from '../../../components/Nav/utils/motionUtil';
+import { getMotion } from '../../../components/Nav/utils';
+const fixedMode = 'inline';
 export function InlineSubNavList({ children, id, keyPath, open }) {
     const config = useConfig();
-    const fixedMode = 'inline';
     const { defaultMotions, forceSubNavRender, mode, motion, prefixCls, } = React.useContext(NavContext);
     // Always use the latest mode check
     const sameModeRef = React.useRef(false);

package/dist/esm/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/esm/components/Nav/Sub/InternalSubNav.js

@@ -0,0 +1,157 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
+import { warning } from '@rc-component/util';
+import classNames from 'classnames';
+import Overflow from 'rc-overflow';
+import * as React from 'react';
+import { useConfig } from '../../../components/ConfigProvider';
+import { NavContext, NavContextProvider, PathUserContext, useFullPath, useNavId } from '../../../components/Nav/context';
+import { useActive, useDirectionStyle, useMemoCallback } from '../../../components/Nav/hooks';
+import { InlineSubNavList } from '../../../components/Nav/Sub/InlineSubNavList';
+import { PopupTrigger } from '../../../components/Nav/Sub/PopupTrigger';
+import { SubNavList } from '../../../components/Nav/Sub/SubNavList';
+import { warnItemProp } from '../../../components/Nav/utils';
+export const 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 = useConfig();
+    const connectedPath = useFullPath();
+    const domDataId = useNavId(eventKey);
+    const { activeKey, disabled: contextDisabled, expandIcon: contextExpandIcon, itemIcon: contextItemIcon, mode, openKeys, overflowDisabled, popupPrefixCls, popupRender: contextPopupRender, selectedKeys, onActive, onItemClick, onOpenChange, } = React.useContext(NavContext);
+    const pathUser = React.useContext(PathUserContext);
+    const elementRef = React.useRef(null);
+    const popupRef = React.useRef(null);
+    const mergedDisabled = contextDisabled || disabled;
+    // ================================ Warn ================================
+    if (process.env.NODE_ENV !== 'production' && warnKey) {
+        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 } = 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 = 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 = useMemoCallback((info) => {
+        onClick?.(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(NavContextProvider, { classNames: navClassNames, mode: popupContentTriggerMode === 'horizontal' ? 'vertical' : popupContentTriggerMode, styles: styles },
+            React.createElement(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, { 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(Overflow.Item, { ref: ref, className: classNames(`${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, { id: popupId, keyPath: connectedPath, open: open }, children))));
+    return (React.createElement(NavContextProvider, { classNames: navClassNames, expandIcon: mergedExpandIcon, itemIcon: mergedItemIcon, mode: mode === 'horizontal' ? 'vertical' : mode, styles: styles, onItemClick: onMergedItemClick }, listNode));
+});

package/dist/esm/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/esm/components/Nav/Sub/PopupTrigger.js

@@ -1,11 +1,12 @@
 import Trigger from '@rc-component/trigger';
-import raf from '@rc-component/util/lib/raf';
+import { merge } from '@rc-component/util';
+import raf from '@rc-component/util/es/raf';
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
-import { NavContext } from '../../../components/Nav/context/NavContext';
+import { NavContext } from '../../../components/Nav/context';
 import { placements, placementsRtl } from '../../../components/Nav/placements';
-import { getMotion } from '../../../components/Nav/utils/motionUtil';
+import { getMotion } from '../../../components/Nav/utils';
 const popupPlacementMap = {
     horizontal: 'bottom-left',
     inline: null,
@@ -13,13 +14,13 @@ const popupPlacementMap = {
     'vertical-left': 'right-top',
     'vertical-right': 'left-top',
 };
-export function PopupTrigger({ children, disabled, mode, popup, popupClassName, popupOffset, prefixCls, visible, onVisibleChange, }) {
+export function PopupTrigger({ children, disabled, mode, popup, popupClassName, popupOffset, popupStyle, prefixCls, visible, onVisibleChange, }) {
     const config = useConfig();
-    const { builtinPlacements, defaultMotions, forceSubNavRender, getPopupContainer, motion, rtl, subNavCloseDelay = 300, subNavOpenDelay, triggerSubNavAction = 'hover', } = React.useContext(NavContext);
+    const { builtinPlacements, defaultMotions, forceSubNavRender, getPopupContainer, motion, rootClassName, rtl, subNavCloseDelay = 300, subNavOpenDelay, triggerSubNavAction = 'hover', } = React.useContext(NavContext);
     const [innerVisible, setInnerVisible] = React.useState(false);
     const placement = rtl
-        ? { ...placementsRtl, ...builtinPlacements }
-        : { ...placements, ...builtinPlacements };
+        ? merge(placementsRtl, builtinPlacements || {})
+        : merge(placements, builtinPlacements || {});
     const popupPlacement = popupPlacementMap[mode];
     const targetMotion = getMotion(mode, motion, defaultMotions);
     const targetMotionRef = React.useRef(targetMotion);
@@ -48,9 +49,7 @@ export function PopupTrigger({ children, disabled, mode, popup, popupClassName,
             }
         };
     }, [visible]);
-    return (React.createElement(Trigger, { 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: classNames({
-            [`${prefixCls}-rtl`]: rtl,
-        }, popupClassName), popupMotion: mergedMotion, popupPlacement: popupPlacement, popupVisible: innerVisible, prefixCls: prefixCls, stretch: mode === 'horizontal' ? 'minWidth' : undefined, onPopupVisibleChange: onVisibleChange }, children));
+    return (React.createElement(Trigger, { 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: classNames(`${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/esm/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/esm/components/Nav/Sub/SubNavList.js

@@ -1,13 +1,13 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import { NavContext } from '../../../components/Nav/context/NavContext';
-export const SubNavList = React.forwardRef(({ children, className, ...restProps }, ref) => {
+import { NavContext } from '../../../components/Nav/context';
+export const SubNavList = React.forwardRef(({ children, className, ...props }, ref) => {
     const { mode, prefixCls, rtl } = React.useContext(NavContext);
-    return (React.createElement("ul", { className: classNames({
+    return (React.createElement("ul", { ref: ref, className: classNames({
             [`${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') {
     SubNavList.displayName = 'Nav.SubNavList';

package/dist/esm/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/esm/components/Nav/Sub/index.js

@@ -1,172 +1,12 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
 import { noop } from '@broxus/js-utils';
-import warning from '@rc-component/util/lib/warning';
-import classNames from 'classnames';
-import Overflow from 'rc-overflow';
 import * as React from 'react';
-import { useNavId } from '../../../components/Nav/context/IdContext';
-import { NavContext, NavContextProvider } from '../../../components/Nav/context/NavContext';
-import { PathTrackerContext, PathUserContext, useFullPath, useMeasure } from '../../../components/Nav/context/PathContext';
-import { PrivateContext } from '../../../components/Nav/context/PrivateContext';
-import { useActive } from '../../../components/Nav/hooks/useActive';
-import { useDirectionStyle } from '../../../components/Nav/hooks/useDirectionStyle';
-import { useMemoCallback } from '../../../components/Nav/hooks/useMemoCallback';
-import { InlineSubNavList } from '../../../components/Nav/Sub/InlineSubNavList';
-import { PopupTrigger } from '../../../components/Nav/Sub/PopupTrigger';
-import { SubNavList } from '../../../components/Nav/Sub/SubNavList';
-import { parseChildren } from '../../../components/Nav/utils/nodeUtil';
-import { warnItemProp } from '../../../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 = useNavId(eventKey);
-    const { activeKey, disabled: contextDisabled, expandIcon: contextExpandIcon, itemIcon: contextItemIcon, mode, openKeys, overflowDisabled, popupPrefixCls, selectedKeys, onActive, onItemClick, onOpenChange, } = React.useContext(NavContext);
-    const pathUser = React.useContext(PathUserContext);
-    const connectedPath = useFullPath();
-    const { _internalRenderSubMenuItem } = React.useContext(PrivateContext);
-    const mergedDisabled = contextDisabled || disabled;
-    const elementRef = React.useRef(null);
-    const popupRef = React.useRef(null);
-    // ================================ Warn ================================
-    if (process.env.NODE_ENV !== 'production' && warnKey) {
-        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 } = 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 = 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 = useMemoCallback((info) => {
-        onClick?.(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, { disabled: disabled, mode: triggerMode, popup: (React.createElement(NavContextProvider
-            // Special handle of horizontal mode
-            , { 
-                // Special handle of horizontal mode
-                mode: triggerMode === 'horizontal' ? 'vertical' : triggerMode },
-                React.createElement(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(Overflow.Item, { className: classNames('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, { id: popupId, keyPath: connectedPath, open: open }, children))));
-    if (_internalRenderSubMenuItem) {
-        listNode = _internalRenderSubMenuItem(listNode, props, {
-            active: !!mergedActive,
-            disabled: !!mergedDisabled,
-            open,
-            selected: !!childrenSelected,
-        });
-    }
-    return (React.createElement(NavContextProvider, { expandIcon: mergedExpandIcon, itemIcon: mergedItemIcon, mode: mode === 'horizontal' ? 'vertical' : mode, onItemClick: onMergedItemClick }, listNode));
-}
-// eslint-disable-next-line react/no-multi-comp
-export function Sub({ children, eventKey, ...restProps }) {
+import { PathTrackerContext, useFullPath, useMeasure } from '../../../components/Nav/context';
+import { InternalSubNav } from '../../../components/Nav/Sub/InternalSubNav';
+import { parseChildren } from '../../../components/Nav/utils';
+export const Sub = React.forwardRef(({ children, eventKey, ...props }, ref) => {
     const connectedKeyPath = useFullPath(eventKey);
-    const childList = parseChildren(children, connectedKeyPath);
     const measure = useMeasure();
+    const childList = parseChildren(children, connectedKeyPath);
     React.useEffect(() => {
         if (measure && eventKey) {
             measure.registerPath(eventKey, connectedKeyPath);
@@ -176,8 +16,8 @@ export function Sub({ children, eventKey, ...restProps }) {
         }
         return noop;
     }, [connectedKeyPath, eventKey, measure]);
-    return (React.createElement(PathTrackerContext.Provider, { value: connectedKeyPath }, measure ? childList : React.createElement(InternalSubNav, { eventKey: eventKey, ...restProps }, childList)));
-}
+    return (React.createElement(PathTrackerContext.Provider, { value: connectedKeyPath }, measure ? childList : (React.createElement(InternalSubNav, { ref: ref, eventKey: eventKey, ...props }, childList))));
+});
 if (process.env.NODE_ENV !== 'production') {
     Sub.displayName = 'Nav.Sub';
 }

package/dist/esm/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/esm/components/Nav/context/NavContext.js

@@ -1,7 +1,7 @@
 'use client';
-import useMemo from '@rc-component/util/lib/hooks/useMemo';
+import useMemo from '@rc-component/util/es/hooks/useMemo';
+import isEqual from '@rc-component/util/es/isEqual';
 import * as React from 'react';
-import shallowEqual from 'shallowequal';
 import { useConfig } from '../../../components/ConfigProvider';
 export const NavContext = React.createContext({
     popupPrefixCls: 'dropdown',
@@ -19,16 +19,16 @@ function mergeProps(origin, target) {
     });
     return clone;
 }
-export function NavContextProvider({ children, locked, ...restProps }) {
+export function NavContextProvider({ children, locked, ...props }) {
     const config = useConfig();
     const context = React.useContext(NavContext);
     const inheritableContext = useMemo(() => 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] || !shallowEqual(prev[1], next[1])));
+    }, props), [config.prefixCls, context, props], (prev, next) => !locked && (prev[0] !== next[0]
+        || !isEqual(prev[1], next[1], true)
+        || !isEqual(prev[2], next[2], true)));
     return React.createElement(NavContext.Provider, { value: inheritableContext }, children);
 }
 if (process.env.NODE_ENV !== 'production') {

package/dist/esm/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/esm/components/Nav/context/index.js

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

package/dist/esm/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/esm/components/Nav/hooks/index.js

@@ -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/esm/components/Nav/hooks/useAccessibility.d.ts

@@ -1,3 +1,14 @@
 import * as React from 'react';
 import { type NavMode } from '../../../components/Nav/types';
+/**
+ * Get focusable elements from the element set under provided container
+ */
+export declare function getFocusableElements(container: HTMLElement, elements: Set<HTMLElement>): HTMLElement[];
+type RefreshElements = {
+    element2key: Map<HTMLElement, string>;
+    elements: Set<HTMLElement>;
+    key2element: Map<string, HTMLElement>;
+};
+export declare function refreshElements(keys: string[], id: string): RefreshElements;
 export declare function useAccessibility<T extends HTMLElement>(mode: NavMode, activeKey: string, isRtl: boolean, id: string, containerRef: React.RefObject<HTMLUListElement | null>, getKeys: () => string[], getKeyPath: (key: string, includeOverflow?: boolean) => string[], triggerActiveKey: (key: string) => void, triggerAccessibilityOpen: (key: string, open?: boolean) => void, originOnKeyDown?: React.KeyboardEventHandler<T>): React.KeyboardEventHandler<T>;
+export {};