@broxus/react-uikit 0.1.2 → 0.2.0

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

@@ -3,21 +3,26 @@ import { noop } from '@broxus/js-utils';
 import classNames from 'classnames';
 import Overflow from 'rc-overflow';
 import warning from 'rc-util/lib/warning';
-import { useNavId } from '../context/IdContext';
-import { NavContext, NavContextProvider } from '../context/NavContext';
-import { PathTrackerContext, PathUserContext, useFullPath, useMeasure, } from '../context/PathContext';
-import useActive from '../hooks/useActive';
-import useMemoCallback from '../hooks/useMemoCallback';
-import { InlineSubNavList } from './InlineSubNavList';
-import { PopupTrigger } from './PopupTrigger';
-import { SubNavList } from './SubNavList';
-import { parseChildren } from '../utils/nodeUtil';
-import { warnItemProp } from '../utils/warnUtil';
-function InternalSubNav({ children, className, eventKey, expandIcon, internalPopupClose, itemIcon, popupClassName, popupOffset, style, title, warnKey, onClick, onTitleClick, onTitleMouseEnter, onTitleMouseLeave, ...props }) {
+import { useNavId } from '../../Nav/context/IdContext';
+import { NavContext, NavContextProvider } from '../../Nav/context/NavContext';
+import { PathTrackerContext, PathUserContext, useFullPath, useMeasure, } from '../../Nav/context/PathContext';
+import { PrivateContext } from '../../Nav/context/PrivateContext';
+import { useActive } from '../../Nav/hooks/useActive';
+import { useDirectionStyle } from '../../Nav/hooks/useDirectionStyle';
+import { useMemoCallback } from '../../Nav/hooks/useMemoCallback';
+import { InlineSubNavList } from '../../Nav/Sub/InlineSubNavList';
+import { PopupTrigger } from '../../Nav/Sub/PopupTrigger';
+import { SubNavList } from '../../Nav/Sub/SubNavList';
+import { parseChildren } from '../../Nav/utils/nodeUtil';
+import { warnItemProp } from '../../Nav/utils/warnUtil';
+const InternalSubNav = React.memo((props) => {
+    const { children, className, disabled, eventKey, expandIcon, internalPopupClose, itemIcon, popupClassName, popupOffset, style, title, warnKey, onClick, onMouseEnter, onMouseLeave, onTitleClick, onTitleMouseEnter, onTitleMouseLeave, ...restProps } = props;
     const domDataId = useNavId(eventKey);
-    const { activeKey, disabled = props.disabled, expandIcon: contextExpandIcon, itemIcon: contextItemIcon, mode, openKeys, overflowDisabled, popupPrefixCls, selectedKeys, onActive, onItemClick, onOpenChange, } = React.useContext(NavContext);
+    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();
     // ================================ Warn ================================
@@ -44,7 +49,7 @@ function InternalSubNav({ children, className, eventKey, expandIcon, internalPop
     const onInternalMouseEnter = domEvent => {
         triggerChildrenActive(true);
         if (eventKey) {
-            props.onMouseEnter?.({
+            onMouseEnter?.({
                 domEvent,
                 key: eventKey,
             });
@@ -53,7 +58,7 @@ function InternalSubNav({ children, className, eventKey, expandIcon, internalPop
     const onInternalMouseLeave = domEvent => {
         triggerChildrenActive(false);
         if (eventKey) {
-            props.onMouseLeave?.({
+            onMouseLeave?.({
                 domEvent,
                 key: eventKey,
             });
@@ -67,7 +72,9 @@ function InternalSubNav({ children, className, eventKey, expandIcon, internalPop
             return childrenActive || pathUser?.isSubPathKey([activeKey], eventKey);
         }
         return false;
-    }, [mode, active, activeKey, childrenActive, eventKey, pathUser?.isSubPathKey]);
+    }, [active, mode, eventKey, childrenActive, pathUser, activeKey]);
+    // ========================== DirectionStyle ==========================
+    const directionStyle = useDirectionStyle(connectedPath.length);
     // =============================== Events ===============================
     // Title click
     const onInternalTitleClick = e => {
@@ -98,7 +105,7 @@ function InternalSubNav({ children, className, eventKey, expandIcon, internalPop
         }
     };
     /**
-     * Used for accessibility. Helper will focus element without key board.
+     * Used for accessibility. Helper will focus element without keyboard.
      * We should manually trigger an active
      */
     const onInternalFocus = () => {
@@ -107,38 +114,49 @@ function InternalSubNav({ children, className, eventKey, expandIcon, internalPop
         }
     };
     // =============================== Render ===============================
-    const popupId = domDataId ? `${domDataId}-popup` : undefined;
+    const popupId = domDataId ? `${domDataId}-dropdown` : undefined;
     // Title
-    let titleNode = (React.createElement("a", { role: disabled ? undefined : 'menuitem', tabIndex: disabled ? undefined : -1, ref: elementRef, title: typeof title === 'string' ? title : undefined, "aria-controls": popupId, "aria-disabled": disabled, "aria-expanded": open, "aria-haspopup": true, "data-nav-id": overflowDisabled && domDataId ? null : domDataId, onClick: onInternalTitleClick, onFocus: onInternalFocus, ...activeProps }, title));
-    // Cache mode if it change to `inline` which do not have popup motion
+    let titleNode = (React.createElement("a", { role: disabled ? undefined : 'menuitem', tabIndex: disabled ? undefined : -1, ref: elementRef, title: typeof title === 'string' ? title : undefined, "aria-controls": popupId, "aria-disabled": disabled, "aria-expanded": open, "aria-haspopup": true, "data-nav-id": overflowDisabled && domDataId ? null : domDataId, style: { ...directionStyle }, onClick: onInternalTitleClick, onFocus: onInternalFocus, ...activeProps }, title));
+    // Cache mode if it changes to `inline` which do not have popup motion
     const triggerModeRef = React.useRef(mode);
-    if (mode !== 'inline') {
-        triggerModeRef.current = connectedPath.length > 1 ? 'vertical' : 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
+        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, { className: classNames(`${popupPrefixCls}-nav`), id: popupId, ref: popupRef }, children))), popupClassName: popupClassName, popupOffset: popupOffset, prefixCls: popupPrefixCls, visible: !internalPopupClose && open && mode !== 'inline', onVisibleChange: onPopupVisibleChange }, titleNode));
+                React.createElement(SubNavList, { className: `${popupPrefixCls}-nav`, id: popupId, ref: popupRef }, children)), popupClassName: popupClassName, popupOffset: popupOffset, prefixCls: popupPrefixCls, visible: !internalPopupClose && open && mode !== 'inline', onVisibleChange: onPopupVisibleChange }, titleNode));
     }
-    // Render
-    return (React.createElement(NavContextProvider, { expandIcon: mergedExpandIcon, itemIcon: mergedItemIcon, mode: mode === 'horizontal' ? 'vertical' : mode, onItemClick: onMergedItemClick },
-        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, open: open, keyPath: connectedPath }, children)))));
-}
+    // 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", ...restProps, component: "li", style: style, onMouseEnter: onInternalMouseEnter, onMouseLeave: onInternalMouseLeave },
+        titleNode,
+        !overflowDisabled && (React.createElement(InlineSubNavList, { id: popupId, open: open, keyPath: connectedPath }, 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(props) {
+export const Sub = React.memo((props) => {
     const { eventKey, children } = props;
     const connectedKeyPath = useFullPath(eventKey);
     const childList = parseChildren(children, connectedKeyPath);
@@ -151,9 +169,9 @@ export function Sub(props) {
             };
         }
         return noop;
-    }, [connectedKeyPath]);
+    }, [connectedKeyPath, eventKey, measure]);
     return (React.createElement(PathTrackerContext.Provider, { value: connectedKeyPath }, measure ? childList : React.createElement(InternalSubNav, { ...props }, childList)));
-}
+});
 if (process.env.NODE_ENV !== 'production') {
     Sub.displayName = 'Nav.Sub';
 }

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

@@ -13,3 +13,6 @@ export function useNavId(eventKey) {
     }
     return getNavId(id, eventKey);
 }
+if (process.env.NODE_ENV !== 'production') {
+    IdContext.displayName = 'IdContext';
+}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { CSSMotionProps } from 'rc-motion';
-import type { BuiltinPlacements, NavClickEventHandler, NavMode, RenderIconType, TriggerSubMenuAction } from '../types';
+import { type CSSMotionProps } from 'rc-motion';
+import { type BuiltinPlacements, type NavClickEventHandler, type NavMode, type RenderIconType, type TriggerSubNavAction } from '../../Nav/types';
 export interface NavContextProps {
     activeKey: string;
     builtinPlacements?: BuiltinPlacements;
@@ -11,6 +11,7 @@ export interface NavContextProps {
     expandIcon?: RenderIconType;
     forceSubNavRender?: boolean;
     getPopupContainer: (node: HTMLElement) => HTMLElement;
+    inlineIndent?: number;
     itemIcon?: RenderIconType;
     mode: NavMode;
     motion?: CSSMotionProps;
@@ -22,7 +23,7 @@ export interface NavContextProps {
     selectedKeys: string[];
     subNavOpenDelay: number;
     subNavCloseDelay: number;
-    triggerSubNavAction?: TriggerSubMenuAction;
+    triggerSubNavAction?: TriggerSubNavAction;
     onActive: (key: string) => void;
     onInactive: (key: string) => void;
     onItemClick: NavClickEventHandler;
@@ -33,4 +34,4 @@ export interface InheritableContextProps extends Partial<NavContextProps> {
     children?: React.ReactNode;
     locked?: boolean;
 }
-export declare function NavContextProvider({ children, locked, ...props }: InheritableContextProps): JSX.Element;
+export declare function NavContextProvider(props: InheritableContextProps): JSX.Element;

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

@@ -18,13 +18,19 @@ function mergeProps(origin, target) {
     });
     return clone;
 }
-export function NavContextProvider({ children, locked, ...props }) {
+export function NavContextProvider(props) {
     const config = useConfig();
     const context = React.useContext(NavContext);
+    const { children, locked, ...restProps } = props;
     const inheritableContext = useMemo(() => mergeProps({
         ...context,
         popupPrefixCls: `${config.prefixCls}-dropdown`,
         prefixCls: `${config.prefixCls}-nav`,
-    }, props), [context, props], (prev, next) => !locked && (prev[0] !== next[0] || !shallowEqual(prev[1], next[1])));
-    return (React.createElement(NavContext.Provider, { value: inheritableContext }, children));
+    }, restProps), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [context, restProps], (prev, next) => !locked && (prev[0] !== next[0] || !shallowEqual(prev[1], next[1])));
+    return React.createElement(NavContext.Provider, { value: inheritableContext }, children);
+}
+if (process.env.NODE_ENV !== 'production') {
+    NavContext.displayName = 'NavContext';
 }

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

@@ -10,3 +10,8 @@ export function useFullPath(eventKey) {
     return React.useMemo(() => (eventKey !== undefined ? [...parentKeyPath, eventKey] : parentKeyPath), [parentKeyPath, eventKey]);
 }
 export const PathUserContext = React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+    PathRegisterContext.displayName = 'PathRegisterContext';
+    PathTrackerContext.displayName = 'PathTrackerContext';
+    PathUserContext.displayName = 'PathUserContext';
+}

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type NavProps } from '../../Nav/Nav';
+export interface PrivateContextProps {
+    _internalRenderMenuItem?: NavProps['_internalRenderMenuItem'];
+    _internalRenderSubMenuItem?: NavProps['_internalRenderSubMenuItem'];
+}
+export declare const PrivateContext: React.Context<PrivateContextProps>;

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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export const PrivateContext = React.createContext({});

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

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import type { NavMode } from '../types';
-export default function useAccessibility<T extends HTMLElement>(mode: NavMode, activeKey: string, isRtl: boolean, id: string, containerRef: React.RefObject<HTMLUListElement>, 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>;
+import { type NavMode } from '../../Nav/types';
+export declare function useAccessibility<T extends HTMLElement>(mode: NavMode, activeKey: string, isRtl: boolean, id: string, containerRef: React.RefObject<HTMLUListElement>, 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>;

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { getFocusNodeList } from 'rc-util/lib/Dom/focus';
 import KeyCode from 'rc-util/lib/KeyCode';
 import raf from 'rc-util/lib/raf';
-import { getFocusNodeList } from 'rc-util/lib/Dom/focus';
-import { getNavId } from '../context/IdContext';
+import { getNavId } from '../../Nav/context/IdContext';
 // destruct to reduce minify size
 const { LEFT, RIGHT, UP, DOWN, ENTER, ESC } = KeyCode;
 const ArrowKeys = [UP, DOWN, LEFT, RIGHT];
@@ -126,7 +126,7 @@ function getNextFocusElement(parentQueryContainer, elements, focusMenuElement, o
     // Focus menu item
     return sameLevelFocusableMenuElementList[focusIndex];
 }
-export default function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, getKeyPath, triggerActiveKey, triggerAccessibilityOpen, originOnKeyDown) {
+export function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, getKeyPath, triggerActiveKey, triggerAccessibilityOpen, originOnKeyDown) {
     const rafRef = React.useRef();
     const activeRef = React.useRef();
     activeRef.current = activeKey;

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import type { NavHoverEventHandler } from '../types';
+import { type NavHoverEventHandler } from '../../Nav/types';
 interface ActiveObj {
     active: boolean;
     onMouseEnter?: React.MouseEventHandler<HTMLElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLElement>;
 }
-export default function useActive(eventKey?: string, disabled?: boolean, onMouseEnter?: NavHoverEventHandler, onMouseLeave?: NavHoverEventHandler): ActiveObj;
+export declare function useActive(eventKey?: string, disabled?: boolean, onMouseEnter?: NavHoverEventHandler, onMouseLeave?: NavHoverEventHandler): ActiveObj;
 export {};

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { NavContext } from '../context/NavContext';
-export default function useActive(eventKey, disabled, onMouseEnter, onMouseLeave) {
-    if (eventKey === undefined) {
-        return { active: false };
-    }
+import { NavContext } from '../../Nav/context/NavContext';
+export function useActive(eventKey, disabled, onMouseEnter, onMouseLeave) {
     const { 
     // Active
     activeKey, onActive, onInactive, } = React.useContext(NavContext);
+    if (eventKey === undefined) {
+        return { active: false };
+    }
     const ret = {
         active: activeKey === eventKey,
     };

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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function useDirectionStyle(level: number): React.CSSProperties | null;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { NavContext } from '../../Nav/context/NavContext';
+export function useDirectionStyle(level) {
+    const { mode, rtl, inlineIndent } = React.useContext(NavContext);
+    if (mode !== 'inline') {
+        return null;
+    }
+    const len = level;
+    return rtl ? { paddingRight: len * (inlineIndent ?? 0) } : { paddingLeft: len * (inlineIndent ?? 0) };
+}

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

@@ -1,12 +1,12 @@
 export declare const OVERFLOW_KEY = "rc-menu-more";
-declare type KeyRecords = {
+type KeyRecords = {
     registerPath: (key: string, keyPath: string[]) => void;
     unregisterPath: (key: string, keyPath: string[]) => void;
     refreshOverflowKeys: (keys: string[]) => void;
     isSubPathKey: (pathKeys: string[], eventKey: string) => boolean;
-    getKeyPath: (eventKey: string, includeOverflow?: (boolean | undefined)) => string[];
+    getKeyPath: (eventKey: string, includeOverflow?: boolean | undefined) => string[];
     getKeys: () => string[];
     getSubPathKeys: (key: string) => Set<string>;
 };
-export default function useKeyRecords(): KeyRecords;
+export declare function useKeyRecords(): KeyRecords;
 export {};

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

@@ -1,22 +1,22 @@
 import * as React from 'react';
 import warning from 'rc-util/lib/warning';
-import { nextSlice } from '../utils/timeUtil';
+import { nextSlice } from '../../Nav/utils/timeUtil';
+import { useForceUpdate } from '../../../hooks';
 const PATH_SPLIT = '__RC_UTIL_PATH_SPLIT__';
-const getPathStr = (keyPath) => keyPath.join(PATH_SPLIT);
-const getPathKeys = (keyPathStr) => keyPathStr.split(PATH_SPLIT);
+function getPathStr(keyPath) {
+    return keyPath.join(PATH_SPLIT);
+}
+function getPathKeys(keyPathStr) {
+    return keyPathStr.split(PATH_SPLIT);
+}
 export const OVERFLOW_KEY = 'rc-menu-more';
-export default function useKeyRecords() {
-    const [, internalForceUpdate] = React.useState({});
+export function useKeyRecords() {
+    const forceUpdate = useForceUpdate();
     const key2pathRef = React.useRef(new Map());
     const path2keyRef = React.useRef(new Map());
-    const [overflowKeys, setOverflowKeys] = React.useState([]);
     const updateRef = React.useRef(0);
     const destroyRef = React.useRef(false);
-    const forceUpdate = () => {
-        if (!destroyRef.current) {
-            internalForceUpdate({});
-        }
-    };
+    const [overflowKeys, setOverflowKeys] = React.useState([]);
     const registerPath = React.useCallback((key, keyPath) => {
         // Warning for invalidate or duplicated `key`
         if (process.env.NODE_ENV !== 'production') {
@@ -29,11 +29,11 @@ export default function useKeyRecords() {
         updateRef.current += 1;
         const id = updateRef.current;
         nextSlice(() => {
-            if (id === updateRef.current) {
+            if (id === updateRef.current && !destroyRef.current) {
                 forceUpdate();
             }
         });
-    }, []);
+    }, [forceUpdate]);
     const unregisterPath = React.useCallback((key, keyPath) => {
         const connectedPath = getPathStr(keyPath);
         path2keyRef.current.delete(connectedPath);

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

@@ -2,4 +2,4 @@
  * Cache callback function that always return same ref instead.
  * This is used for context optimization.
  */
-export default function useMemoCallback<T extends (...args: any[]) => void>(func: T): T;
+export declare function useMemoCallback<T extends (...args: any[]) => void>(func: T): T;

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

@@ -3,9 +3,10 @@ import * as React from 'react';
  * Cache callback function that always return same ref instead.
  * This is used for context optimization.
  */
-export default function useMemoCallback(func) {
+export function useMemoCallback(func) {
     const funRef = React.useRef(func);
     funRef.current = func;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const callback = React.useCallback(((...args) => funRef.current?.(...args)), []);
     return typeof func === 'function' ? callback : undefined;
 }

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

@@ -1 +1 @@
-export default function useUUID(id?: string): string | undefined;
+export declare function useUUID(id?: string): string | undefined;

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 const uniquePrefix = Math.random().toFixed(5).toString().slice(2);
 let internalId = 0;
-export default function useUUID(id) {
+export function useUUID(id) {
     const [uuid, setUUID] = useMergedState(id, {
         value: id,
     });
@@ -12,6 +12,6 @@ export default function useUUID(id) {
             ? 'test'
             : `${uniquePrefix}-${internalId}`;
         setUUID(`uk-nav-uuid-${newId}`);
-    }, []);
+    }, [setUUID]);
     return uuid;
 }

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

@@ -1,17 +1,17 @@
-import * as React from 'react';
-import { Divider } from './Divider';
-import { Group } from './Group';
-import { Header } from './Header';
-import { Item } from './Item';
-import { Sub } from './Sub';
-import type { NavProps } from './Nav';
+import type * as React from 'react';
+import { Divider } from '../Nav/Divider';
+import { Group } from '../Nav/Group';
+import { Header } from '../Nav/Header';
+import { Item } from '../Nav/Item';
+import { type NavProps } from '../Nav/Nav';
+import { Sub } from '../Nav/Sub';
 import './index.scss';
 export type { NavProps };
-export interface CompoundedNav extends React.FunctionComponent<NavProps> {
+export interface Nav extends React.MemoExoticComponent<React.ForwardRefExoticComponent<NavProps>> {
     Divider: typeof Divider;
     Group: typeof Group;
     Header: typeof Header;
     Item: typeof Item;
     Sub: typeof Sub;
 }
-export declare const Nav: CompoundedNav;
+export declare const Nav: Nav;

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

@@ -1,9 +1,9 @@
-import { Divider } from './Divider';
-import { Group } from './Group';
-import { Header } from './Header';
-import { Item } from './Item';
-import { Nav as InternalNav } from './Nav';
-import { Sub } from './Sub';
+import { Divider } from '../Nav/Divider';
+import { Group } from '../Nav/Group';
+import { Header } from '../Nav/Header';
+import { Item } from '../Nav/Item';
+import { Nav as InternalNav } from '../Nav/Nav';
+import { Sub } from '../Nav/Sub';
 import './index.scss';
 export const Nav = InternalNav;
 Nav.Divider = Divider;

package/dist/esm/components/Nav/index.scss

@@ -90,13 +90,13 @@
 .uk-nav-item {
     position: relative;
     white-space: nowrap;
+}
 
-    /* Disabled */
-    &-disabled {
-        cursor: not-allowed;
-        opacity: 0.85;
-        pointer-events: none;
-    }
+/* Disabled */
+.uk-nav-item-disabled {
+    cursor: not-allowed;
+    opacity: 0.85;
+    pointer-events: none;
 }
 
 
@@ -258,7 +258,7 @@
         }
     }
 
-    &-placement-rightTop::before {
+    &-placement-right-top::before {
         left: -7px;
         top: 0;
     }
@@ -320,6 +320,7 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-divider {
+    border-top: var(--nav-divider-border-width) solid var(--nav-divider-border);
     margin: var(--nav-divider-margin-vertical) var(--nav-divider-margin-horizontal);
     @if mixin-exists(hook-nav-divider) {
         @include hook-nav-divider;
@@ -547,6 +548,8 @@ ul.uk-nav-sub {
     --nav-header-font-size: var(--global-small-font-size);
     --nav-header-text-transform: #{$nav-header-text-transform};
     --nav-header-margin-top: var(--global-margin);
+    --nav-divider-border-width: var(--global-border-width);
+    --nav-divider-border: var(--global-border);
     --nav-divider-margin-vertical: #{$nav-divider-margin-vertical};
     --nav-divider-margin-horizontal: #{$nav-divider-margin-horizontal};
     --nav-default-item-color: var(--global-muted-color);

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

@@ -1,18 +1,65 @@
 import type * as React from 'react';
-export declare type NavMode = 'inline' | 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal';
-export declare type NavModifier = 'default' | 'primary' | 'center' | 'divider';
-export declare type BuiltinPlacements = Record<string, any>;
-export declare type TriggerSubMenuAction = 'click' | 'hover';
+export type NavRef = {
+    /**
+     * Focus active child if any, or the first child which is not disabled will be focused.
+     * @param {FocusOptions} [options]
+     */
+    focus: (options?: FocusOptions) => void;
+    list: HTMLUListElement | null;
+};
+interface ItemSharedProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface SubNavType extends ItemSharedProps {
+    label?: React.ReactNode;
+    children: ItemType[];
+    disabled?: boolean;
+    key: string;
+    rootClassName?: string;
+    itemIcon?: RenderIconType;
+    expandIcon?: RenderIconType;
+    onMouseEnter?: NavHoverEventHandler;
+    onMouseLeave?: NavHoverEventHandler;
+    popupClassName?: string;
+    popupOffset?: number[];
+    onClick?: NavClickEventHandler;
+    onTitleClick?: (info: NavTitleInfo) => void;
+    onTitleMouseEnter?: NavHoverEventHandler;
+    onTitleMouseLeave?: NavHoverEventHandler;
+}
+export interface NavItemType extends ItemSharedProps {
+    label?: React.ReactNode;
+    disabled?: boolean;
+    itemIcon?: RenderIconType;
+    key: React.Key;
+    onMouseEnter?: NavHoverEventHandler;
+    onMouseLeave?: NavHoverEventHandler;
+    onClick?: NavClickEventHandler;
+}
+export interface NavItemGroupType extends ItemSharedProps {
+    type: 'group';
+    label?: React.ReactNode;
+    children?: ItemType[];
+}
+export interface NavDividerType extends ItemSharedProps {
+    type: 'divider';
+}
+export type ItemType = SubNavType | NavItemType | NavItemGroupType | NavDividerType | null;
+export type NavMode = 'inline' | 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal';
+export type NavModifier = 'default' | 'primary' | 'center' | 'divider';
+export type BuiltinPlacements = Record<string, any>;
+export type TriggerSubNavAction = 'click' | 'hover';
 export interface RenderIconInfo {
     disabled?: boolean;
     isOpen?: boolean;
     isSelected?: boolean;
-    isSubMenu?: boolean;
+    isSubNav?: boolean;
 }
-export declare type RenderIconType = React.ReactNode | ((props: RenderIconInfo) => React.ReactNode);
+export type RenderIconType = React.ReactNode | ((props: RenderIconInfo) => React.ReactNode);
 export interface NavInfo {
     domEvent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
-    /** @deprecated This will not support in future. You should avoid to use this */
+    /** @deprecated This will not support in the future. You should avoid to use this */
     item: React.ReactInstance;
     key: string;
     keyPath: string[];
@@ -21,12 +68,13 @@ export interface NavTitleInfo {
     domEvent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
     key: string;
 }
-export declare type NavHoverEventHandler = (info: {
+export type NavHoverEventHandler = (info: {
     domEvent: React.MouseEvent<HTMLElement>;
     key: string;
 }) => void;
 export interface SelectInfo extends NavInfo {
     selectedKeys: string[];
 }
-export declare type SelectEventHandler = (info: SelectInfo) => void;
-export declare type NavClickEventHandler = (info: NavInfo) => void;
+export type SelectEventHandler = (info: SelectInfo) => void;
+export type NavClickEventHandler = (info: NavInfo) => void;
+export {};

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

@@ -1,3 +1,3 @@
-import type { AlignType, BuildInPlacements } from 'rc-trigger/lib/interface';
+import { type AlignType, type BuildInPlacements } from 'rc-trigger/lib/interface';
 export declare function getAlignFromPlacement(builtinPlacements: BuildInPlacements, placementStr: string, align: AlignType): AlignType;
 export declare function getAlignPopupClassName(builtinPlacements: BuildInPlacements, prefixCls: string, align: AlignType, isAlignPoint: boolean): string;

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

@@ -1,2 +1,2 @@
-import type { CSSMotionProps } from 'rc-motion';
+import { type CSSMotionProps } from 'rc-motion';
 export declare function getMotion(mode: string, motion?: CSSMotionProps, defaultMotions?: Record<string, CSSMotionProps>): CSSMotionProps | undefined;

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

@@ -1,2 +1,4 @@
 import * as React from 'react';
-export declare function parseChildren(children: React.ReactNode, keyPath: string[]): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];
+import { type ItemType } from '../../Nav/types';
+export declare function parseChildren(children: React.ReactNode | undefined, keyPath: string[]): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];
+export declare function parseItems(children: React.ReactNode | undefined, items: ItemType[] | undefined, keyPath: string[]): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];