@broxus/react-uikit 0.1.3 → 0.2.0

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

@@ -28,106 +28,147 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Nav = void 0;
 const React = __importStar(require("react"));
+const ReactDOM = __importStar(require("react-dom"));
 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 shallowequal_1 = __importDefault(require("shallowequal"));
+const isEqual_1 = __importDefault(require("rc-util/lib/isEqual"));
 const ConfrigProvider_1 = require("../ConfrigProvider");
+const hooks_1 = require("../../hooks");
+const IdContext_1 = require("../Nav/context/IdContext");
+const NavContext_1 = require("../Nav/context/NavContext");
+const PathContext_1 = require("../Nav/context/PathContext");
+const PrivateContext_1 = require("../Nav/context/PrivateContext");
+const useAccessibility_1 = require("../Nav/hooks/useAccessibility");
+const useKeyRecords_1 = require("../Nav/hooks/useKeyRecords");
+const useMemoCallback_1 = require("../Nav/hooks/useMemoCallback");
+const useUUID_1 = require("../Nav/hooks/useUUID");
+const Item_1 = require("../Nav/Item");
+const Sub_1 = require("../Nav/Sub");
+const nodeUtil_1 = require("../Nav/utils/nodeUtil");
+const warnUtil_1 = require("../Nav/utils/warnUtil");
 const utils_1 = require("../../utils");
-const IdContext_1 = require("./context/IdContext");
-const NavContext_1 = require("./context/NavContext");
-const PathContext_1 = require("./context/PathContext");
-const useAccessibility_1 = __importDefault(require("./hooks/useAccessibility"));
-const useKeyRecords_1 = __importStar(require("./hooks/useKeyRecords"));
-const useMemoCallback_1 = __importDefault(require("./hooks/useMemoCallback"));
-const useUUID_1 = __importDefault(require("./hooks/useUUID"));
-const Item_1 = require("./Item");
-const Sub_1 = require("./Sub");
-const nodeUtil_1 = require("./utils/nodeUtil");
-const warnUtil_1 = require("./utils/warnUtil");
 const EMPTY_LIST = [];
-function Nav(props) {
+const ForwardedNav = React.forwardRef((props, ref) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { activeKey, builtinPlacements, children, className, defaultActiveFirst, defaultMotions = {
+    const { activeKey, builtinPlacements, children, className, defaultActiveFirst, defaultOpenKeys, defaultSelectedKeys, direction, disabled, disabledOverflow, expandIcon, forceSubNavRender, getPopupContainer, id, inlineCollapsed, itemIcon, items, mode = 'inline', modifiers, motion, multiple = false, openKeys, overflowedIndicator = '...', overflowedIndicatorPopupClassName, popupPrefixCls = `${config.prefixCls}-dropdown`, prefixCls = config.prefixCls, defaultMotions = {
         horizontal: {
-            motionName: `${config.prefixCls}-motion-slide-up`,
+            motionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'),
         },
-        inline: utils_1.collapseMotion,
+        inline: (0, utils_1.getCollapseMotion)(prefixCls || config.prefixCls),
         other: {
-            leavedClassName: `${config.prefixCls}-hidden`,
-            motionName: `${config.prefixCls}-motion-zoom`,
+            leavedClassName: `${prefixCls || config.prefixCls}-hidden`,
+            motionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'zoom'),
         },
-    }, defaultOpenKeys, defaultSelectedKeys, direction, disabled, disabledOverflow, expandIcon, forceSubNavRender, getPopupContainer, id, inlineCollapsed, itemIcon, mode = 'inline', modifiers, motion, multiple = false, openKeys, overflowedIndicator = '...', overflowedIndicatorPopupClassName, popupPrefixCls = `${config.prefixCls}-dropdown`, prefixCls = `${config.prefixCls}-nav`, selectable = false, selectedKeys, style, subNavCloseDelay = 0.1, subNavOpenDelay = 0.1, tabIndex = 0, triggerSubNavAction = 'hover', onClick, onDeselect, onKeyDown, onOpenChange, onSelect, ...restProps } = props;
-    const childList = (0, nodeUtil_1.parseChildren)(children, EMPTY_LIST);
-    const [mounted, setMounted] = React.useState(false);
+    }, selectable = false, selectedKeys, style, subNavCloseDelay = 0.1, subNavOpenDelay = 0.1, tabIndex = 0, triggerSubNavAction = 'hover', onClick, onDeselect, onKeyDown, onOpenChange, onSelect, _internalRenderMenuItem, _internalRenderSubMenuItem, ...restProps } = props;
+    const childList = React.useMemo(() => (0, nodeUtil_1.parseItems)(children, items, EMPTY_LIST), [children, items]);
+    const mounted = (0, hooks_1.useMounted)();
     const containerRef = React.useRef(null);
-    const uuid = (0, useUUID_1.default)(id);
+    const uuid = (0, useUUID_1.useUUID)(id);
     const isRtl = direction === 'rtl';
-    // Mode
-    const [mergedMode] = React.useMemo(() => {
-        if ((mode === 'inline' || mode === 'vertical') && inlineCollapsed) {
-            return ['vertical', inlineCollapsed];
-        }
-        return [mode, false];
-    }, [mode, inlineCollapsed]);
-    // Responsive
-    const [lastVisibleIndex, setLastVisibleIndex] = React.useState(0);
-    const allVisible = lastVisibleIndex >= childList.length - 1 || mergedMode !== 'horizontal' || disabledOverflow;
-    // Open
+    // ========================= Open =========================
     const [mergedOpenKeys, setMergedOpenKeys] = (0, useMergedState_1.default)(defaultOpenKeys, {
         postState: keys => keys || EMPTY_LIST,
         value: openKeys,
     });
-    const triggerOpenKeys = (keys) => {
-        setMergedOpenKeys(keys);
-        onOpenChange?.(keys);
-    };
-    // Cache & Reset open keys when inlineCollapsed changed
+    // 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) => {
+        const doUpdate = () => {
+            setMergedOpenKeys(keys);
+            onOpenChange?.(keys);
+        };
+        if (forceFlush) {
+            ReactDOM.flushSync(doUpdate);
+        }
+        else {
+            doUpdate();
+        }
+    }, [onOpenChange, setMergedOpenKeys]);
+    // >>>>> Cache & Reset open keys when inlineCollapsed changed
     const [inlineCacheOpenKeys, setInlineCacheOpenKeys] = React.useState(mergedOpenKeys);
-    const isInlineMode = mergedMode === 'inline';
     const mountRef = React.useRef(false);
-    // Cache
-    React.useEffect(() => {
-        if (isInlineMode) {
-            setInlineCacheOpenKeys(mergedOpenKeys);
+    // ========================= Mode =========================
+    const [mergedMode, mergedInlineCollapsed] = React.useMemo(() => {
+        if (['inline', 'vertical'].includes(mode) && inlineCollapsed) {
+            return ['vertical', inlineCollapsed];
         }
-    }, [mergedOpenKeys]);
-    // Restore
+        return [mode, false];
+    }, [mode, inlineCollapsed]);
+    const isInlineMode = mergedMode === 'inline';
+    const [internalMode, setInternalMode] = React.useState(mergedMode);
+    const [, setInternalInlineCollapsed] = React.useState(mergedInlineCollapsed);
     React.useEffect(() => {
+        setInternalMode(mergedMode);
+        setInternalInlineCollapsed(mergedInlineCollapsed);
         if (!mountRef.current) {
-            mountRef.current = true;
             return;
         }
+        // Synchronously update MergedOpenKeys
         if (isInlineMode) {
             setMergedOpenKeys(inlineCacheOpenKeys);
         }
         else {
-            // Trigger open event in case it's in control
+            // Trigger open event in case it`s in control
             triggerOpenKeys(EMPTY_LIST);
         }
-    }, [isInlineMode]);
-    // Path
-    const { getKeyPath, getKeys, getSubPathKeys, isSubPathKey, refreshOverflowKeys, registerPath, unregisterPath, } = (0, useKeyRecords_1.default)();
+    }, [
+        mergedMode,
+        mergedInlineCollapsed,
+        isInlineMode,
+        setMergedOpenKeys,
+        inlineCacheOpenKeys,
+        triggerOpenKeys,
+    ]);
+    // ====================== Responsive ======================
+    const [lastVisibleIndex, setLastVisibleIndex] = React.useState(0);
+    const allVisible = lastVisibleIndex >= childList.length - 1 ||
+        internalMode !== 'horizontal' ||
+        disabledOverflow;
+    // Cache
+    React.useEffect(() => {
+        if (isInlineMode) {
+            setInlineCacheOpenKeys(mergedOpenKeys);
+        }
+    }, [isInlineMode, mergedOpenKeys]);
+    React.useEffect(() => {
+        mountRef.current = true;
+        return () => {
+            mountRef.current = false;
+        };
+    }, []);
+    // ========================= Path =========================
+    const { registerPath, unregisterPath, refreshOverflowKeys, isSubPathKey, getKeyPath, getKeys, getSubPathKeys, } = (0, useKeyRecords_1.useKeyRecords)();
     const registerPathContext = React.useMemo(() => ({ registerPath, unregisterPath }), [registerPath, unregisterPath]);
     const pathUserContext = React.useMemo(() => ({ isSubPathKey }), [isSubPathKey]);
     React.useEffect(() => {
         refreshOverflowKeys(allVisible
             ? EMPTY_LIST
-            : childList
-                .slice(lastVisibleIndex + 1)
-                .map(child => child.key));
-    }, [lastVisibleIndex, allVisible]);
-    // Active
-    const [mergedActiveKey, setMergedActiveKey] = (0, useMergedState_1.default)(activeKey || (defaultActiveFirst && childList[0]?.key), { value: activeKey });
-    const onActive = (0, useMemoCallback_1.default)((key) => {
+            : 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) => {
         setMergedActiveKey(key);
     });
-    const onInactive = (0, useMemoCallback_1.default)(() => {
-        setMergedActiveKey('');
+    const onInactive = (0, useMemoCallback_1.useMemoCallback)(() => {
+        setMergedActiveKey(undefined);
     });
-    // Select keys
+    React.useImperativeHandle(ref, () => ({
+        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);
+            }
+        },
+        list: containerRef.current,
+    }));
+    // ======================== Select ========================
+    // >>>>> Select keys
     const [mergedSelectKeys, setMergedSelectKeys] = (0, useMergedState_1.default)(defaultSelectedKeys || [], {
-        // Legacy cast key to array
+        // Legacy convert key to array
         postState: keys => {
             if (Array.isArray(keys)) {
                 return keys;
@@ -139,107 +180,108 @@ function Nav(props) {
         },
         value: selectedKeys,
     });
-    // Trigger select
+    // >>>>> Trigger select
     const triggerSelection = (info) => {
         if (selectable) {
             // Insert or Remove
             const { key: targetKey } = info;
-            const exist = targetKey ? mergedSelectKeys.includes(targetKey) : false;
-            let newSelectKeys = [];
+            const exist = mergedSelectKeys.includes(targetKey);
+            let newSelectKeys;
             if (multiple) {
                 if (exist) {
                     newSelectKeys = mergedSelectKeys.filter(key => key !== targetKey);
                 }
-                else if (targetKey) {
+                else {
                     newSelectKeys = [...mergedSelectKeys, targetKey];
                 }
             }
-            else if (targetKey) {
+            else {
                 newSelectKeys = [targetKey];
             }
-            if (newSelectKeys.length) {
-                setMergedSelectKeys(newSelectKeys);
-                // Trigger event
-                const selectInfo = {
-                    ...info,
-                    selectedKeys: newSelectKeys,
-                };
-                if (exist) {
-                    onDeselect?.(selectInfo);
-                }
-                else {
-                    onSelect?.(selectInfo);
-                }
+            setMergedSelectKeys(newSelectKeys);
+            // Trigger event
+            const selectInfo = {
+                ...info,
+                selectedKeys: newSelectKeys,
+            };
+            if (exist) {
+                onDeselect?.(selectInfo);
+            }
+            else {
+                onSelect?.(selectInfo);
             }
         }
         // Whatever selectable, always close it
-        if (!multiple && mergedOpenKeys?.length && mergedMode !== 'inline') {
+        if (!multiple && mergedOpenKeys?.length && internalMode !== 'inline') {
             triggerOpenKeys(EMPTY_LIST);
         }
     };
-    // Open
-    /* Click for item. SubMenu do not have selection status */
-    const onInternalClick = (0, useMemoCallback_1.default)((info) => {
+    // ========================= Open =========================
+    /**
+     * Click for item. SubMenu do not have selection status
+     */
+    const onInternalClick = (0, useMemoCallback_1.useMemoCallback)((info) => {
         onClick?.((0, warnUtil_1.warnItemProp)(info));
         triggerSelection(info);
     });
-    const onInternalOpenChange = (0, useMemoCallback_1.default)((key, open) => {
-        if (mergedOpenKeys === undefined) {
-            return;
-        }
-        let newOpenKeys = mergedOpenKeys.filter(k => k !== key);
+    const onInternalOpenChange = (0, useMemoCallback_1.useMemoCallback)((key, open) => {
+        let newOpenKeys = mergedOpenKeys?.filter(k => k !== key);
         if (open) {
-            newOpenKeys.push(key);
+            newOpenKeys?.push(key);
         }
-        else if (mergedMode !== 'inline') {
+        else if (internalMode !== 'inline') {
             // We need find all related popup to close
             const subPathKeys = getSubPathKeys(key);
-            newOpenKeys = newOpenKeys.filter(k => !subPathKeys.has(k));
+            newOpenKeys = newOpenKeys?.filter(k => !subPathKeys.has(k));
         }
-        if (!(0, shallowequal_1.default)(mergedOpenKeys, newOpenKeys)) {
-            triggerOpenKeys(newOpenKeys);
+        if (newOpenKeys && !(0, isEqual_1.default)(mergedOpenKeys, newOpenKeys, true)) {
+            triggerOpenKeys(newOpenKeys, true);
         }
     });
-    const getInternalPopupContainer = getPopupContainer ? (0, useMemoCallback_1.default)(getPopupContainer) : undefined;
-    // Accessibility
+    const getInternalPopupContainer = (0, useMemoCallback_1.useMemoCallback)(getPopupContainer);
+    // ==================== Accessibility =====================
     const triggerAccessibilityOpen = (key, open) => {
-        if (mergedOpenKeys === undefined) {
-            return;
-        }
-        const nextOpen = open ?? !mergedOpenKeys.includes(key);
+        const nextOpen = open ?? !mergedOpenKeys?.includes(key);
         onInternalOpenChange(key, nextOpen);
     };
-    const onInternalKeyDown = (0, useAccessibility_1.default)(mergedMode, mergedActiveKey, isRtl, uuid, containerRef, getKeys, getKeyPath, setMergedActiveKey, triggerAccessibilityOpen, onKeyDown);
-    // Effect
-    React.useEffect(() => {
-        setMounted(true);
-    }, []);
-    const wrappedChildList = (mergedMode !== 'horizontal' || disabledOverflow)
+    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]);
+    // ======================== Render ========================
+    // >>>>> Children
+    const wrappedChildList = mergedMode !== 'horizontal' || disabledOverflow
         ? 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)));
+        : // 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, { className: (0, classnames_1.default)({
-            [prefixCls]: mergedMode !== 'horizontal',
-        }, (Array.isArray(modifiers) ? modifiers : [modifiers]).filter(e => e).map(mod => `${prefixCls}-${mod}`), {
-            // [`${prefixCls}-${mergedMode}`]: prefixCls && mergedMode,
-            [`${prefixCls}-rtl`]: prefixCls && isRtl,
-        }, className), component: "ul", data: wrappedChildList, dir: direction, id: id, itemComponent: Item_1.Item, maxCount: (mergedMode !== 'horizontal' || disabledOverflow)
+            [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, ref: containerRef, 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));
-        }, prefixCls: prefixCls, role: "menu", ssr: "full", style: style, tabIndex: tabIndex, onKeyDown: onInternalKeyDown, onVisibleChange: newLastIndex => {
+        }, prefixCls: rootCls, role: "menu", ssr: "full", style: style, tabIndex: tabIndex, onKeyDown: onInternalKeyDown, onVisibleChange: newLastIndex => {
             setLastVisibleIndex(newLastIndex);
         }, ...restProps }));
-    // Render
-    return (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: prefixCls, 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", { style: { display: 'none' }, "aria-hidden": true },
-                React.createElement(PathContext_1.PathRegisterContext.Provider, { value: registerPathContext }, childList)))));
-}
-exports.Nav = Nav;
+    // >>>>> 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", { style: { display: 'none' }, "aria-hidden": true },
+                    React.createElement(PathContext_1.PathRegisterContext.Provider, { value: registerPathContext }, childList))))));
+});
+exports.Nav = React.memo(ForwardedNav);

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

@@ -33,10 +33,10 @@ const motionUtil_1 = require("../utils/motionUtil");
 const NavContext_1 = require("../context/NavContext");
 const SubNavList_1 = require("./SubNavList");
 function InlineSubNavList(props) {
-    const { children, id, keyPath, open, } = props;
+    const { children, id, keyPath, open } = props;
     const fixedMode = 'inline';
-    const { prefixCls, forceSubNavRender, motion, defaultMotions, mode, } = React.useContext(NavContext_1.NavContext);
-    // Always use latest mode check
+    const { prefixCls, forceSubNavRender, motion, defaultMotions, mode } = React.useContext(NavContext_1.NavContext);
+    // Always use the latest mode check
     const sameModeRef = React.useRef(false);
     sameModeRef.current = mode === fixedMode;
     // We record `destroy` mark here since when mode change from `inline` to others.

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import type { NavMode } from '../types';
+import { type NavMode } from '../../Nav/types';
 export interface PopupTriggerProps {
-    prefixCls: string;
-    mode: NavMode;
-    visible: boolean;
     children: React.ReactElement;
+    disabled?: boolean;
+    mode: NavMode;
     popup: React.ReactNode;
     popupClassName?: string;
     popupOffset?: number[];
-    disabled?: boolean;
+    prefixCls: string;
+    visible: boolean;
     onVisibleChange: (visible: boolean) => void;
 }
-export declare function PopupTrigger(props: PopupTriggerProps): JSX.Element;
+export declare const PopupTrigger: React.MemoExoticComponent<(props: PopupTriggerProps) => JSX.Element>;

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

@@ -28,33 +28,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopupTrigger = void 0;
 const React = __importStar(require("react"));
-const rc_trigger_1 = __importDefault(require("rc-trigger"));
 const classnames_1 = __importDefault(require("classnames"));
+const rc_trigger_1 = __importDefault(require("rc-trigger"));
 const raf_1 = __importDefault(require("rc-util/lib/raf"));
-const NavContext_1 = require("../context/NavContext");
-const placements_1 = require("../placements");
-const motionUtil_1 = require("../utils/motionUtil");
+const NavContext_1 = require("../../Nav/context/NavContext");
+const placements_1 = require("../../Nav/placements");
+const motionUtil_1 = require("../../Nav/utils/motionUtil");
+const ConfrigProvider_1 = require("../../ConfrigProvider");
 const popupPlacementMap = {
-    horizontal: 'bottom-left',
-    inline: null,
-    vertical: 'right-top',
+    'horizontal': 'bottom-left',
+    'inline': null,
+    'vertical': 'right-top',
     'vertical-left': 'right-top',
     'vertical-right': 'left-top',
 };
-function PopupTrigger(props) {
+exports.PopupTrigger = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
     const { prefixCls, visible, children, popup, popupClassName, popupOffset, disabled, mode, onVisibleChange, } = props;
-    const { getPopupContainer, rtl, subNavOpenDelay, subNavCloseDelay, builtinPlacements, triggerSubNavAction, forceSubNavRender, 
-    // Motion
-    motion, defaultMotions, } = React.useContext(NavContext_1.NavContext);
+    const { builtinPlacements, defaultMotions, forceSubNavRender, getPopupContainer, motion, rtl, subNavCloseDelay, subNavOpenDelay, triggerSubNavAction, } = React.useContext(NavContext_1.NavContext);
     const [innerVisible, setInnerVisible] = React.useState(false);
     const placement = rtl
         ? { ...placements_1.placementsRtl, ...builtinPlacements }
         : { ...placements_1.placements, ...builtinPlacements };
     const popupPlacement = popupPlacementMap[mode];
     const targetMotion = (0, motionUtil_1.getMotion)(mode, motion, defaultMotions);
+    const targetMotionRef = React.useRef(targetMotion);
+    if (mode !== 'inline') {
+        /**
+         * PopupTrigger is only used for vertical and horizontal types.
+         * When collapsed is unfolded, the inline animation will destroy the vertical animation.
+         */
+        targetMotionRef.current = targetMotion;
+    }
     const mergedMotion = {
         ...targetMotion,
-        leavedClassName: 'uk-hidden',
+        leavedClassName: `${config.prefixCls}-hidden`,
         motionAppear: true,
         removeOnLeave: false,
     };
@@ -73,5 +81,4 @@ function PopupTrigger(props) {
     return (React.createElement(rc_trigger_1.default, { action: disabled ? [] : [triggerSubNavAction], builtinPlacements: placement, forceRender: forceSubNavRender, getPopupContainer: getPopupContainer, 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));
-}
-exports.PopupTrigger = PopupTrigger;
+});

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

@@ -2,4 +2,4 @@ import * as React from 'react';
 export interface SubNavListProps extends React.HTMLAttributes<HTMLUListElement> {
     children?: React.ReactNode;
 }
-export declare const SubNavList: React.ForwardRefExoticComponent<SubNavListProps & React.RefAttributes<HTMLUListElement>>;
+export declare const SubNavList: React.MemoExoticComponent<React.ForwardRefExoticComponent<SubNavListProps & React.RefAttributes<HTMLUListElement>>>;

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

@@ -30,7 +30,7 @@ exports.SubNavList = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const NavContext_1 = require("../context/NavContext");
-function InternalSubNavList(props, ref) {
+const ForwardedSubNavList = React.forwardRef((props, ref) => {
     const { className, children, ...restProps } = props;
     const { mode, prefixCls, rtl } = React.useContext(NavContext_1.NavContext);
     return (React.createElement("ul", { className: (0, classnames_1.default)({
@@ -38,6 +38,8 @@ function InternalSubNavList(props, ref) {
             [`${prefixCls}-sub`]: mode === 'inline',
             [`${prefixCls}-sub-rtl`]: rtl && mode === 'inline',
         }, className), ...restProps, "data-nav-list": "", ref: ref }, children));
+});
+exports.SubNavList = React.memo(ForwardedSubNavList);
+if (process.env.NODE_ENV !== 'production') {
+    exports.SubNavList.displayName = 'Nav.SubNavList';
 }
-exports.SubNavList = React.forwardRef(InternalSubNavList);
-exports.SubNavList.displayName = 'SubNavList';

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

@@ -1,10 +1,7 @@
 import * as React from 'react';
-import type { NavClickEventHandler, NavHoverEventHandler, NavTitleInfo, RenderIconType } from '../types';
-export interface SubNavProps {
-    className?: string;
+import { type SubNavType } from '../../Nav/types';
+export interface SubNavProps extends Omit<SubNavType, 'children' | 'key' | 'label'> {
     children?: React.ReactNode;
-    disabled?: boolean;
-    style?: React.CSSProperties;
     title?: React.ReactNode;
     /** @private Used for rest popup. Do not use in your prod */
     internalPopupClose?: boolean;
@@ -12,18 +9,5 @@ export interface SubNavProps {
     eventKey?: string;
     /** @private Do not use. Private warning empty usage */
     warnKey?: boolean;
-    itemIcon?: RenderIconType;
-    expandIcon?: RenderIconType;
-    onMouseEnter?: NavHoverEventHandler;
-    onMouseLeave?: NavHoverEventHandler;
-    popupClassName?: string;
-    popupOffset?: number[];
-    onClick?: NavClickEventHandler;
-    onTitleClick?: (info: NavTitleInfo) => void;
-    onTitleMouseEnter?: NavHoverEventHandler;
-    onTitleMouseLeave?: NavHoverEventHandler;
-}
-export declare function Sub(props: SubNavProps): JSX.Element;
-export declare namespace Sub {
-    var displayName: string;
 }
+export declare const Sub: React.MemoExoticComponent<(props: SubNavProps) => JSX.Element>;