@broxus/react-uikit 0.1.2 → 0.2.0

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

@@ -32,21 +32,26 @@ const js_utils_1 = require("@broxus/js-utils");
 const classnames_1 = __importDefault(require("classnames"));
 const rc_overflow_1 = __importDefault(require("rc-overflow"));
 const warning_1 = __importDefault(require("rc-util/lib/warning"));
-const IdContext_1 = require("../context/IdContext");
-const NavContext_1 = require("../context/NavContext");
-const PathContext_1 = require("../context/PathContext");
-const useActive_1 = __importDefault(require("../hooks/useActive"));
-const useMemoCallback_1 = __importDefault(require("../hooks/useMemoCallback"));
-const InlineSubNavList_1 = require("./InlineSubNavList");
-const PopupTrigger_1 = require("./PopupTrigger");
-const SubNavList_1 = require("./SubNavList");
-const nodeUtil_1 = require("../utils/nodeUtil");
-const warnUtil_1 = require("../utils/warnUtil");
-function InternalSubNav({ children, className, eventKey, expandIcon, internalPopupClose, itemIcon, popupClassName, popupOffset, style, title, warnKey, onClick, onTitleClick, onTitleMouseEnter, onTitleMouseLeave, ...props }) {
+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 useActive_1 = require("../../Nav/hooks/useActive");
+const useDirectionStyle_1 = require("../../Nav/hooks/useDirectionStyle");
+const useMemoCallback_1 = require("../../Nav/hooks/useMemoCallback");
+const InlineSubNavList_1 = require("../../Nav/Sub/InlineSubNavList");
+const PopupTrigger_1 = require("../../Nav/Sub/PopupTrigger");
+const SubNavList_1 = require("../../Nav/Sub/SubNavList");
+const nodeUtil_1 = require("../../Nav/utils/nodeUtil");
+const warnUtil_1 = require("../../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 = (0, IdContext_1.useNavId)(eventKey);
-    const { activeKey, disabled = props.disabled, expandIcon: contextExpandIcon, itemIcon: contextItemIcon, mode, openKeys, overflowDisabled, popupPrefixCls, selectedKeys, onActive, onItemClick, onOpenChange, } = React.useContext(NavContext_1.NavContext);
+    const { activeKey, disabled: contextDisabled, expandIcon: contextExpandIcon, itemIcon: contextItemIcon, mode, openKeys, overflowDisabled, popupPrefixCls, selectedKeys, onActive, onItemClick, onOpenChange, } = React.useContext(NavContext_1.NavContext);
     const pathUser = React.useContext(PathContext_1.PathUserContext);
     const connectedPath = (0, PathContext_1.useFullPath)();
+    const { _internalRenderSubMenuItem } = React.useContext(PrivateContext_1.PrivateContext);
+    const mergedDisabled = contextDisabled || disabled;
     const elementRef = React.useRef(null);
     const popupRef = React.useRef();
     // ================================ Warn ================================
@@ -62,7 +67,7 @@ function InternalSubNav({ children, className, eventKey, expandIcon, internalPop
     // =============================== Select ===============================
     const childrenSelected = eventKey ? pathUser?.isSubPathKey(selectedKeys, eventKey) : false;
     // =============================== Active ===============================
-    const { active, ...activeProps } = (0, useActive_1.default)(eventKey, disabled, onTitleMouseEnter, onTitleMouseLeave);
+    const { active, ...activeProps } = (0, useActive_1.useActive)(eventKey, disabled, onTitleMouseEnter, onTitleMouseLeave);
     // Fallback of active check to avoid hover on menu title or disabled item
     const [childrenActive, setChildrenActive] = React.useState(false);
     const triggerChildrenActive = (newActive) => {
@@ -73,7 +78,7 @@ function InternalSubNav({ children, className, eventKey, expandIcon, internalPop
     const onInternalMouseEnter = domEvent => {
         triggerChildrenActive(true);
         if (eventKey) {
-            props.onMouseEnter?.({
+            onMouseEnter?.({
                 domEvent,
                 key: eventKey,
             });
@@ -82,7 +87,7 @@ function InternalSubNav({ children, className, eventKey, expandIcon, internalPop
     const onInternalMouseLeave = domEvent => {
         triggerChildrenActive(false);
         if (eventKey) {
-            props.onMouseLeave?.({
+            onMouseLeave?.({
                 domEvent,
                 key: eventKey,
             });
@@ -96,7 +101,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 = (0, useDirectionStyle_1.useDirectionStyle)(connectedPath.length);
     // =============================== Events ===============================
     // Title click
     const onInternalTitleClick = e => {
@@ -116,7 +123,7 @@ function InternalSubNav({ children, className, eventKey, expandIcon, internalPop
         }
     };
     // Context for children click
-    const onMergedItemClick = (0, useMemoCallback_1.default)((info) => {
+    const onMergedItemClick = (0, useMemoCallback_1.useMemoCallback)((info) => {
         onClick?.((0, warnUtil_1.warnItemProp)(info));
         onItemClick?.(info);
     });
@@ -127,7 +134,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 = () => {
@@ -136,38 +143,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_1.PopupTrigger, { disabled: disabled, mode: triggerMode, popup: (React.createElement(NavContext_1.NavContextProvider
+        titleNode = (React.createElement(PopupTrigger_1.PopupTrigger, { disabled: disabled, mode: triggerMode, popup: React.createElement(NavContext_1.NavContextProvider
             // Special handle of horizontal mode
             , { 
                 // Special handle of horizontal mode
                 mode: triggerMode === 'horizontal' ? 'vertical' : triggerMode },
-                React.createElement(SubNavList_1.SubNavList, { className: (0, classnames_1.default)(`${popupPrefixCls}-nav`), id: popupId, ref: popupRef }, children))), popupClassName: popupClassName, popupOffset: popupOffset, prefixCls: popupPrefixCls, visible: !internalPopupClose && open && mode !== 'inline', onVisibleChange: onPopupVisibleChange }, titleNode));
+                React.createElement(SubNavList_1.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(NavContext_1.NavContextProvider, { expandIcon: mergedExpandIcon, itemIcon: mergedItemIcon, mode: mode === 'horizontal' ? 'vertical' : mode, onItemClick: onMergedItemClick },
-        React.createElement(rc_overflow_1.default.Item, { className: (0, classnames_1.default)('uk-parent', className, {
-                'uk-active': childrenSelected,
-                'uk-disabled': disabled,
-                'uk-hover': mergedActive,
-                'uk-open': open,
-            }), role: "none", ...props, component: "li", style: style, onMouseEnter: onInternalMouseEnter, onMouseLeave: onInternalMouseLeave },
-            titleNode,
-            !overflowDisabled && (React.createElement(InlineSubNavList_1.InlineSubNavList, { id: popupId, open: open, keyPath: connectedPath }, children)))));
-}
+    // List node
+    let listNode = (React.createElement(rc_overflow_1.default.Item, { className: (0, classnames_1.default)('uk-parent', className, {
+            'uk-active': childrenSelected,
+            'uk-disabled': disabled,
+            'uk-hover': mergedActive,
+            'uk-open': open,
+        }), role: "none", ...restProps, component: "li", style: style, onMouseEnter: onInternalMouseEnter, onMouseLeave: onInternalMouseLeave },
+        titleNode,
+        !overflowDisabled && (React.createElement(InlineSubNavList_1.InlineSubNavList, { id: popupId, open: open, keyPath: connectedPath }, children))));
+    if (_internalRenderSubMenuItem) {
+        listNode = _internalRenderSubMenuItem(listNode, props, {
+            active: !!mergedActive,
+            disabled: !!mergedDisabled,
+            open,
+            selected: !!childrenSelected,
+        });
+    }
+    return (React.createElement(NavContext_1.NavContextProvider, { expandIcon: mergedExpandIcon, itemIcon: mergedItemIcon, mode: mode === 'horizontal' ? 'vertical' : mode, onItemClick: onMergedItemClick }, listNode));
+});
 // eslint-disable-next-line react/no-multi-comp
-function Sub(props) {
+exports.Sub = React.memo((props) => {
     const { eventKey, children } = props;
     const connectedKeyPath = (0, PathContext_1.useFullPath)(eventKey);
     const childList = (0, nodeUtil_1.parseChildren)(children, connectedKeyPath);
@@ -180,10 +198,9 @@ function Sub(props) {
             };
         }
         return js_utils_1.noop;
-    }, [connectedKeyPath]);
+    }, [connectedKeyPath, eventKey, measure]);
     return (React.createElement(PathContext_1.PathTrackerContext.Provider, { value: connectedKeyPath }, measure ? childList : React.createElement(InternalSubNav, { ...props }, childList)));
-}
-exports.Sub = Sub;
+});
 if (process.env.NODE_ENV !== 'production') {
-    Sub.displayName = 'Nav.Sub';
+    exports.Sub.displayName = 'Nav.Sub';
 }

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

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

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

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

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

@@ -38,3 +38,8 @@ function useFullPath(eventKey) {
 }
 exports.useFullPath = useFullPath;
 exports.PathUserContext = React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+    exports.PathRegisterContext.displayName = 'PathRegisterContext';
+    exports.PathTrackerContext.displayName = 'PathTrackerContext';
+    exports.PathUserContext.displayName = 'PathUserContext';
+}

package/dist/cjs/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/cjs/components/{Component/Component.js → Nav/context/PrivateContext.js}

@@ -23,7 +23,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Component = void 0;
+exports.PrivateContext = void 0;
 const React = __importStar(require("react"));
-const defaultElement = 'div';
-exports.Component = React.forwardRef(({ component: El = defaultElement, ...props }, ref) => React.createElement(El, { ref: ref, ...props }));
+exports.PrivateContext = React.createContext({});

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

@@ -26,11 +26,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAccessibility = void 0;
 const React = __importStar(require("react"));
+const focus_1 = require("rc-util/lib/Dom/focus");
 const KeyCode_1 = __importDefault(require("rc-util/lib/KeyCode"));
 const raf_1 = __importDefault(require("rc-util/lib/raf"));
-const focus_1 = require("rc-util/lib/Dom/focus");
-const IdContext_1 = require("../context/IdContext");
+const IdContext_1 = require("../../Nav/context/IdContext");
 // destruct to reduce minify size
 const { LEFT, RIGHT, UP, DOWN, ENTER, ESC } = KeyCode_1.default;
 const ArrowKeys = [UP, DOWN, LEFT, RIGHT];
@@ -294,4 +295,4 @@ function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, get
         originOnKeyDown?.(event);
     };
 }
-exports.default = useAccessibility;
+exports.useAccessibility = useAccessibility;

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

@@ -23,15 +23,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useActive = void 0;
 const React = __importStar(require("react"));
-const NavContext_1 = require("../context/NavContext");
+const NavContext_1 = require("../../Nav/context/NavContext");
 function useActive(eventKey, disabled, onMouseEnter, onMouseLeave) {
-    if (eventKey === undefined) {
-        return { active: false };
-    }
     const { 
     // Active
     activeKey, onActive, onInactive, } = React.useContext(NavContext_1.NavContext);
+    if (eventKey === undefined) {
+        return { active: false };
+    }
     const ret = {
         active: activeKey === eventKey,
     };
@@ -54,4 +55,4 @@ function useActive(eventKey, disabled, onMouseEnter, onMouseLeave) {
     }
     return ret;
 }
-exports.default = useActive;
+exports.useActive = useActive;

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

@@ -0,0 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDirectionStyle = void 0;
+const React = __importStar(require("react"));
+const NavContext_1 = require("../../Nav/context/NavContext");
+function useDirectionStyle(level) {
+    const { mode, rtl, inlineIndent } = React.useContext(NavContext_1.NavContext);
+    if (mode !== 'inline') {
+        return null;
+    }
+    const len = level;
+    return rtl ? { paddingRight: len * (inlineIndent ?? 0) } : { paddingLeft: len * (inlineIndent ?? 0) };
+}
+exports.useDirectionStyle = useDirectionStyle;

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

@@ -26,26 +26,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OVERFLOW_KEY = void 0;
+exports.useKeyRecords = exports.OVERFLOW_KEY = void 0;
 const React = __importStar(require("react"));
 const warning_1 = __importDefault(require("rc-util/lib/warning"));
-const timeUtil_1 = require("../utils/timeUtil");
+const timeUtil_1 = require("../../Nav/utils/timeUtil");
+const hooks_1 = require("../../../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);
+}
 exports.OVERFLOW_KEY = 'rc-menu-more';
 function useKeyRecords() {
-    const [, internalForceUpdate] = React.useState({});
+    const forceUpdate = (0, hooks_1.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') {
@@ -58,11 +58,11 @@ function useKeyRecords() {
         updateRef.current += 1;
         const id = updateRef.current;
         (0, timeUtil_1.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);
@@ -114,4 +114,4 @@ function useKeyRecords() {
         unregisterPath,
     };
 }
-exports.default = useKeyRecords;
+exports.useKeyRecords = useKeyRecords;

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

@@ -23,6 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMemoCallback = void 0;
 const React = __importStar(require("react"));
 /**
  * Cache callback function that always return same ref instead.
@@ -31,7 +32,8 @@ const React = __importStar(require("react"));
 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;
 }
-exports.default = useMemoCallback;
+exports.useMemoCallback = useMemoCallback;

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

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUUID = void 0;
 const React = __importStar(require("react"));
 const useMergedState_1 = __importDefault(require("rc-util/lib/hooks/useMergedState"));
 const uniquePrefix = Math.random().toFixed(5).toString().slice(2);
@@ -40,7 +41,7 @@ function useUUID(id) {
             ? 'test'
             : `${uniquePrefix}-${internalId}`;
         setUUID(`uk-nav-uuid-${newId}`);
-    }, []);
+    }, [setUUID]);
     return uuid;
 }
-exports.default = useUUID;
+exports.useUUID = useUUID;

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

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Nav = void 0;
-const Divider_1 = require("./Divider");
-const Group_1 = require("./Group");
-const Header_1 = require("./Header");
-const Item_1 = require("./Item");
-const Nav_1 = require("./Nav");
-const Sub_1 = require("./Sub");
+const Divider_1 = require("../Nav/Divider");
+const Group_1 = require("../Nav/Group");
+const Header_1 = require("../Nav/Header");
+const Item_1 = require("../Nav/Item");
+const Nav_1 = require("../Nav/Nav");
+const Sub_1 = require("../Nav/Sub");
 require("./index.scss");
 exports.Nav = Nav_1.Nav;
 exports.Nav.Divider = Divider_1.Divider;

package/dist/cjs/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);