@broxus/react-uikit 0.1.0

package/dist/esm/components/Nav/Divider.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { NavContext } from './context/NavContext';
+import { useMeasure } from './context/PathContext';
+export function Divider(props) {
+    const { className, style } = props;
+    const { prefixCls } = React.useContext(NavContext);
+    const measure = useMeasure();
+    if (measure) {
+        return null;
+    }
+    return (React.createElement("li", { className: classNames(`${prefixCls}-divider`, className), style: style }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Divider.displayName = 'Nav.Divider';
+}

package/dist/esm/components/Nav/Group.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface NavItemGroupProps {
+    className?: string;
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    /** @private Internal filled key. Do not set it directly */
+    eventKey?: string;
+    /** @private Do not use. Private warning empty usage */
+    warnKey?: boolean;
+}
+export declare function Group({ children, ...props }: NavItemGroupProps): JSX.Element;
+export declare namespace Group {
+    var displayName: string;
+}

package/dist/esm/components/Nav/Group.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import omit from 'rc-util/lib/omit';
+import { parseChildren } from './utils/nodeUtil';
+import { NavContext } from './context/NavContext';
+import { useFullPath, useMeasure } from './context/PathContext';
+function InternalNavItemGroup({ children, className, title, ...props }) {
+    const { prefixCls } = React.useContext(NavContext);
+    const groupPrefixCls = `${prefixCls}-group`;
+    return (React.createElement("li", { className: classNames(groupPrefixCls, className), ...props, onClick: e => e.stopPropagation() },
+        React.createElement("div", { className: `${groupPrefixCls}-header`, title: typeof title === 'string' ? title : undefined }, title),
+        React.createElement("ul", { className: "uk-nav-sub" }, children)));
+}
+// eslint-disable-next-line react/no-multi-comp
+export function Group({ children, ...props }) {
+    const connectedKeyPath = useFullPath(props.eventKey);
+    const childList = parseChildren(children, connectedKeyPath);
+    const measure = useMeasure();
+    if (measure) {
+        return childList;
+    }
+    return (React.createElement(InternalNavItemGroup, { ...omit(props, ['warnKey']) }, childList));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Group.displayName = 'Nav.Group';
+}

package/dist/esm/components/Nav/Header.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export declare type HeaderProps = {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare function Header(props: HeaderProps): JSX.Element;
+export declare namespace Header {
+    var displayName: string;
+}

package/dist/esm/components/Nav/Header.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { NavContext } from './context/NavContext';
+export function Header(props) {
+    const { className, ...restProps } = props;
+    const { prefixCls } = React.useContext(NavContext);
+    return (React.createElement("li", { className: classNames(`${prefixCls}-header`, className), ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Header.displayName = 'Nav.Header';
+}

package/dist/esm/components/Nav/Item/InternalNavItem.d.ts

@@ -0,0 +1,2 @@
+import type { NavItemProps } from './index';
+export declare function InternalNavItem(props: NavItemProps): JSX.Element;

package/dist/esm/components/Nav/Item/InternalNavItem.js

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import KeyCode from 'rc-util/lib/KeyCode';
+import warning from 'rc-util/lib/warning';
+import { useNavId } from '../context/IdContext';
+import { NavContext } from '../context/NavContext';
+import { useFullPath } from '../context/PathContext';
+import useActive from '../hooks/useActive';
+import { LegacyNavItem } from './LegacyNavItem';
+import { warnItemProp } from '../utils/warnUtil';
+export function InternalNavItem(props) {
+    const { className, children, eventKey, itemIcon, role, warnKey, ...restProps } = props;
+    const { disabled = restProps.disabled, itemIcon: contextItemIcon, overflowDisabled, selectedKeys, onActive, onItemClick, } = React.useContext(NavContext);
+    const legacyNavItemRef = React.useRef();
+    const elementRef = React.useRef();
+    const { active, ...activeProps } = useActive(eventKey, disabled, restProps.onMouseEnter, restProps.onMouseLeave);
+    const connectedKeys = useFullPath(eventKey);
+    const domDataId = useNavId(eventKey);
+    const selected = eventKey !== undefined && selectedKeys.includes(eventKey);
+    if (process.env.NODE_ENV !== 'production' && warnKey) {
+        warning(false, 'NavItem should not leave undefined `key`.');
+    }
+    const getEventInfo = (e) => ({
+        domEvent: e,
+        item: legacyNavItemRef.current,
+        key: eventKey,
+        // Note: For legacy code is reversed which not like other antd component
+        keyPath: [...connectedKeys].reverse(),
+    });
+    const onClick = event => {
+        if (disabled) {
+            return;
+        }
+        const info = getEventInfo(event);
+        restProps.onClick?.(warnItemProp(info));
+        onItemClick?.(info);
+    };
+    const onKeyDown = event => {
+        restProps.onKeyDown?.(event);
+        if (event.which === KeyCode.ENTER) {
+            const info = getEventInfo(event);
+            // Legacy. Key will also trigger click event
+            restProps.onClick?.(warnItemProp(info));
+            onItemClick?.(info);
+        }
+    };
+    /*
+     * Used for accessibility. Helper will focus element without key board.
+     * We should manually trigger an active
+     */
+    const onFocus = event => {
+        if (eventKey !== undefined) {
+            onActive(eventKey);
+        }
+        restProps.onFocus?.(event);
+    };
+    const optionRoleProps = {};
+    if (role === 'option') {
+        optionRoleProps['aria-selected'] = selected;
+    }
+    return (React.createElement(LegacyNavItem, { className: classNames({
+            'uk-active': selected,
+            'uk-disabled': disabled,
+            'uk-hover': active,
+        }, className), component: "li", role: role === null ? 'none' : role || 'menuitem', tabIndex: disabled ? null : -1, "aria-disabled": disabled, ...optionRoleProps, "data-nav-id": (overflowDisabled && domDataId) ? null : domDataId, ...restProps, ...activeProps, elementRef: elementRef, ref: legacyNavItemRef, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown },
+        itemIcon || contextItemIcon,
+        children));
+}

package/dist/esm/components/Nav/Item/LegacyNavItem.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare class LegacyNavItem extends React.Component<any> {
+    render(): React.ReactNode;
+}

package/dist/esm/components/Nav/Item/LegacyNavItem.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Overflow from 'rc-overflow';
+import omit from 'rc-util/lib/omit';
+import warning from 'rc-util/lib/warning';
+export class LegacyNavItem extends React.Component {
+    render() {
+        const { title, attribute, elementRef, ...restProps } = this.props;
+        const passedProps = omit(restProps, ['eventKey']);
+        warning(!attribute, '`attribute` of Nav.Item is deprecated. Please pass attribute directly.');
+        return (React.createElement(Overflow.Item, { ...attribute, title: typeof title === 'string' ? title : undefined, ...passedProps, ref: elementRef }));
+    }
+}

package/dist/esm/components/Nav/Item/index.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { NavClickEventHandler, NavHoverEventHandler, RenderIconType } from '../types';
+export interface NavItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'> {
+    /**
+     * No place to use this. Should remove
+     * @deprecated
+     */
+    attribute?: Record<string, string>;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    /**
+     * Internal filled key. Do not set it directly
+     * @private
+     */
+    eventKey?: string;
+    itemIcon?: RenderIconType;
+    /**
+     * Do not use. Private warning empty usage
+     * @private
+     */
+    warnKey?: boolean;
+    onClick?: NavClickEventHandler;
+    onMouseEnter?: NavHoverEventHandler;
+    onMouseLeave?: NavHoverEventHandler;
+}
+export declare function Item(props: NavItemProps): JSX.Element | null;
+export declare namespace Item {
+    var displayName: string;
+}

package/dist/esm/components/Nav/Item/index.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { noop } from '@broxus/js-utils';
+import { useFullPath, useMeasure } from '../context/PathContext';
+import { InternalNavItem } from './InternalNavItem';
+export function Item(props) {
+    const { eventKey } = props;
+    const measure = useMeasure();
+    const connectedKeyPath = useFullPath(eventKey);
+    React.useEffect(() => {
+        if (eventKey !== undefined) {
+            measure?.registerPath(eventKey, connectedKeyPath);
+            return () => {
+                measure?.unregisterPath(eventKey, connectedKeyPath);
+            };
+        }
+        return noop;
+    }, [connectedKeyPath]);
+    if (measure) {
+        return null;
+    }
+    return React.createElement(InternalNavItem, { ...props });
+}
+if (process.env.NODE_ENV !== 'production') {
+    Item.displayName = 'Nav.Item';
+}

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import type { CSSMotionProps } from 'rc-motion';
+import type { Direction } from '../../types';
+import type { BuiltinPlacements, NavClickEventHandler, NavMode, NavModifier, RenderIconType, SelectEventHandler, TriggerSubMenuAction } from './types';
+export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onClick' | 'onSelect' | 'dir'> {
+    activeKey?: string;
+    builtinPlacements?: BuiltinPlacements;
+    children?: React.ReactNode;
+    defaultActiveFirst?: boolean;
+    defaultMotions?: Partial<{
+        [key in NavMode | 'other']: CSSMotionProps;
+    }>;
+    defaultOpenKeys?: string[];
+    defaultSelectedKeys?: string[];
+    direction?: Direction;
+    disabled?: boolean;
+    disabledOverflow?: boolean;
+    expandIcon?: RenderIconType;
+    forceSubNavRender?: boolean;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    inlineCollapsed?: boolean;
+    itemIcon?: RenderIconType;
+    mode?: NavMode;
+    modifiers?: NavModifier | NavModifier[];
+    motion?: CSSMotionProps;
+    multiple?: boolean;
+    openKeys?: string[];
+    overflowedIndicator?: React.ReactNode;
+    overflowedIndicatorPopupClassName?: string;
+    popupPrefixCls?: string;
+    prefixCls?: string;
+    selectable?: boolean;
+    selectedKeys?: string[];
+    subNavCloseDelay?: number;
+    subNavOpenDelay?: number;
+    triggerSubNavAction?: TriggerSubMenuAction;
+    onClick?: NavClickEventHandler;
+    onDeselect?: SelectEventHandler;
+    onOpenChange?: (openKeys: string[]) => void;
+    onSelect?: SelectEventHandler;
+}
+export declare function Nav(props: NavProps): JSX.Element;

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

@@ -0,0 +1,215 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import Overflow from 'rc-overflow';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import shallowEqual from 'shallowequal';
+import { useConfig } from '../ConfrigProvider';
+import { collapseMotion } from '../../utils';
+import { IdContext } from './context/IdContext';
+import { NavContextProvider } from './context/NavContext';
+import { PathRegisterContext, PathUserContext } from './context/PathContext';
+import useAccessibility from './hooks/useAccessibility';
+import useKeyRecords, { OVERFLOW_KEY } from './hooks/useKeyRecords';
+import useMemoCallback from './hooks/useMemoCallback';
+import useUUID from './hooks/useUUID';
+import { Item } from './Item';
+import { Sub } from './Sub';
+import { parseChildren } from './utils/nodeUtil';
+import { warnItemProp } from './utils/warnUtil';
+const EMPTY_LIST = [];
+export function Nav(props) {
+    const config = useConfig();
+    const { activeKey, builtinPlacements, children, className, defaultActiveFirst, defaultMotions = {
+        horizontal: {
+            motionName: `${config.prefixCls}-motion-slide-up`,
+        },
+        inline: collapseMotion,
+        other: {
+            leavedClassName: `${config.prefixCls}-hidden`,
+            motionName: `${config.prefixCls}-motion-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 = parseChildren(children, EMPTY_LIST);
+    const [mounted, setMounted] = React.useState(false);
+    const containerRef = React.useRef(null);
+    const uuid = 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
+    const [mergedOpenKeys, setMergedOpenKeys] = useMergedState(defaultOpenKeys, {
+        postState: keys => keys || EMPTY_LIST,
+        value: openKeys,
+    });
+    const triggerOpenKeys = (keys) => {
+        setMergedOpenKeys(keys);
+        onOpenChange?.(keys);
+    };
+    // 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);
+        }
+    }, [mergedOpenKeys]);
+    // Restore
+    React.useEffect(() => {
+        if (!mountRef.current) {
+            mountRef.current = true;
+            return;
+        }
+        if (isInlineMode) {
+            setMergedOpenKeys(inlineCacheOpenKeys);
+        }
+        else {
+            // Trigger open event in case it's in control
+            triggerOpenKeys(EMPTY_LIST);
+        }
+    }, [isInlineMode]);
+    // Path
+    const { getKeyPath, getKeys, getSubPathKeys, isSubPathKey, refreshOverflowKeys, registerPath, unregisterPath, } = 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] = useMergedState(activeKey || (defaultActiveFirst && childList[0]?.key), { value: activeKey });
+    const onActive = useMemoCallback((key) => {
+        setMergedActiveKey(key);
+    });
+    const onInactive = useMemoCallback(() => {
+        setMergedActiveKey('');
+    });
+    // Select keys
+    const [mergedSelectKeys, setMergedSelectKeys] = useMergedState(defaultSelectedKeys || [], {
+        // Legacy cast key to array
+        postState: keys => {
+            if (Array.isArray(keys)) {
+                return keys;
+            }
+            if (keys === null || keys === undefined) {
+                return EMPTY_LIST;
+            }
+            return [keys];
+        },
+        value: selectedKeys,
+    });
+    // Trigger select
+    const triggerSelection = (info) => {
+        if (selectable) {
+            // Insert or Remove
+            const { key: targetKey } = info;
+            const exist = targetKey ? mergedSelectKeys.includes(targetKey) : false;
+            let newSelectKeys = [];
+            if (multiple) {
+                if (exist) {
+                    newSelectKeys = mergedSelectKeys.filter(key => key !== targetKey);
+                }
+                else if (targetKey) {
+                    newSelectKeys = [...mergedSelectKeys, targetKey];
+                }
+            }
+            else if (targetKey) {
+                newSelectKeys = [targetKey];
+            }
+            if (newSelectKeys.length) {
+                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') {
+            triggerOpenKeys(EMPTY_LIST);
+        }
+    };
+    // Open
+    /* Click for item. SubMenu do not have selection status */
+    const onInternalClick = useMemoCallback((info) => {
+        onClick?.(warnItemProp(info));
+        triggerSelection(info);
+    });
+    const onInternalOpenChange = useMemoCallback((key, open) => {
+        if (mergedOpenKeys === undefined) {
+            return;
+        }
+        let newOpenKeys = mergedOpenKeys.filter(k => k !== key);
+        if (open) {
+            newOpenKeys.push(key);
+        }
+        else if (mergedMode !== 'inline') {
+            // We need find all related popup to close
+            const subPathKeys = getSubPathKeys(key);
+            newOpenKeys = newOpenKeys.filter(k => !subPathKeys.has(k));
+        }
+        if (!shallowEqual(mergedOpenKeys, newOpenKeys)) {
+            triggerOpenKeys(newOpenKeys);
+        }
+    });
+    const getInternalPopupContainer = getPopupContainer ? useMemoCallback(getPopupContainer) : undefined;
+    // Accessibility
+    const triggerAccessibilityOpen = (key, open) => {
+        if (mergedOpenKeys === undefined) {
+            return;
+        }
+        const nextOpen = open ?? !mergedOpenKeys.includes(key);
+        onInternalOpenChange(key, nextOpen);
+    };
+    const onInternalKeyDown = useAccessibility(mergedMode, mergedActiveKey, isRtl, uuid, containerRef, getKeys, getKeyPath, setMergedActiveKey, triggerAccessibilityOpen, onKeyDown);
+    // Effect
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+    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(NavContextProvider, { key: child.key, overflowDisabled: index > lastVisibleIndex }, child)));
+    const container = (React.createElement(Overflow, { className: classNames({
+            [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, maxCount: (mergedMode !== 'horizontal' || disabledOverflow)
+            ? Overflow.INVALIDATE
+            : Overflow.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, { disabled: allVisible, eventKey: OVERFLOW_KEY, internalPopupClose: len === 0, popupClassName: overflowedIndicatorPopupClassName, title: overflowedIndicator }, originOmitItems));
+        }, prefixCls: prefixCls, role: "menu", ssr: "full", style: style, tabIndex: tabIndex, onKeyDown: onInternalKeyDown, onVisibleChange: newLastIndex => {
+            setLastVisibleIndex(newLastIndex);
+        }, ...restProps }));
+    // Render
+    return (React.createElement(IdContext.Provider, { value: uuid },
+        React.createElement(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(PathUserContext.Provider, { value: pathUserContext }, container),
+            React.createElement("div", { style: { display: 'none' }, "aria-hidden": true },
+                React.createElement(PathRegisterContext.Provider, { value: registerPathContext }, childList)))));
+}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface InlineSubNavListProps {
+    id?: string;
+    open: boolean;
+    keyPath: string[];
+    children: React.ReactNode;
+}
+export declare function InlineSubNavList(props: InlineSubNavListProps): JSX.Element | null;

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import CSSMotion from 'rc-motion';
+import { getMotion } from '../utils/motionUtil';
+import { NavContext, NavContextProvider } from '../context/NavContext';
+import { SubNavList } from './SubNavList';
+export function InlineSubNavList(props) {
+    const { children, id, keyPath, open, } = props;
+    const fixedMode = 'inline';
+    const { prefixCls, forceSubNavRender, motion, defaultMotions, mode, } = React.useContext(NavContext);
+    // Always use 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.
+    // The inline list should remove when motion end.
+    const [destroy, setDestroy] = React.useState(!sameModeRef.current);
+    const mergedOpen = sameModeRef.current ? open : false;
+    // ================================= Effect =================================
+    // Reset destroy state when mode change back
+    React.useEffect(() => {
+        if (sameModeRef.current) {
+            setDestroy(false);
+        }
+    }, [mode]);
+    // ================================= Render =================================
+    const mergedMotion = { ...getMotion(fixedMode, motion, defaultMotions) };
+    // No need appear since nest inlineCollapse changed
+    if (keyPath.length > 1) {
+        mergedMotion.motionAppear = false;
+    }
+    // Hide inline list when mode changed and motion end
+    const originOnVisibleChanged = mergedMotion.onVisibleChanged;
+    mergedMotion.onVisibleChanged = newVisible => {
+        if (!sameModeRef.current && !newVisible) {
+            setDestroy(true);
+        }
+        return originOnVisibleChanged?.(newVisible);
+    };
+    if (destroy) {
+        return null;
+    }
+    return (React.createElement(NavContextProvider, { mode: fixedMode, locked: !sameModeRef.current, prefixCls: prefixCls },
+        React.createElement(CSSMotion, { visible: mergedOpen, ...mergedMotion, forceRender: forceSubNavRender, leavedClassName: "uk-hidden", removeOnLeave: false }, ({ className: motionClassName, style: motionStyle }) => (React.createElement(SubNavList, { className: motionClassName, id: id, style: motionStyle }, children)))));
+}

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

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

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Trigger from 'rc-trigger';
+import classNames from 'classnames';
+import raf from 'rc-util/lib/raf';
+import { NavContext } from '../context/NavContext';
+import { placements, placementsRtl } from '../placements';
+import { getMotion } from '../utils/motionUtil';
+const popupPlacementMap = {
+    horizontal: 'bottom-left',
+    inline: null,
+    vertical: 'right-top',
+    'vertical-left': 'right-top',
+    'vertical-right': 'left-top',
+};
+export function PopupTrigger(props) {
+    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);
+    const [innerVisible, setInnerVisible] = React.useState(false);
+    const placement = rtl
+        ? { ...placementsRtl, ...builtinPlacements }
+        : { ...placements, ...builtinPlacements };
+    const popupPlacement = popupPlacementMap[mode];
+    const targetMotion = getMotion(mode, motion, defaultMotions);
+    const mergedMotion = {
+        ...targetMotion,
+        leavedClassName: 'uk-hidden',
+        motionAppear: true,
+        removeOnLeave: false,
+    };
+    // Delay to change visible
+    const visibleRef = React.useRef();
+    React.useEffect(() => {
+        visibleRef.current = raf(() => {
+            setInnerVisible(visible);
+        });
+        return () => {
+            if (visibleRef.current) {
+                raf.cancel(visibleRef.current);
+            }
+        };
+    }, [visible]);
+    return (React.createElement(Trigger, { action: disabled ? [] : [triggerSubNavAction], builtinPlacements: placement, forceRender: forceSubNavRender, getPopupContainer: getPopupContainer, 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));
+}

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

@@ -0,0 +1,5 @@
+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>>;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { NavContext } from '../context/NavContext';
+function InternalSubNavList(props, ref) {
+    const { className, children, ...restProps } = props;
+    const { mode, prefixCls, rtl } = React.useContext(NavContext);
+    return (React.createElement("ul", { className: classNames({
+            [prefixCls]: mode !== 'inline',
+            [`${prefixCls}-sub`]: mode === 'inline',
+            [`${prefixCls}-sub-rtl`]: rtl && mode === 'inline',
+        }, className), ...restProps, "data-nav-list": "", ref: ref }, children));
+}
+export const SubNavList = React.forwardRef(InternalSubNavList);
+SubNavList.displayName = 'SubNavList';

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { NavClickEventHandler, NavHoverEventHandler, NavTitleInfo, RenderIconType } from '../types';
+export interface SubNavProps {
+    className?: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+    title?: React.ReactNode;
+    /** @private Used for rest popup. Do not use in your prod */
+    internalPopupClose?: boolean;
+    /** @private Internal filled key. Do not set it directly */
+    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;
+}