@broxus/react-uikit 0.21.0 → 0.23.0

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

@@ -36,43 +36,53 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFocusableElements = getFocusableElements;
+exports.refreshElements = refreshElements;
 exports.useAccessibility = useAccessibility;
-const focus_1 = require("@rc-component/util/lib/Dom/focus");
-const KeyCode_1 = __importDefault(require("@rc-component/util/lib/KeyCode"));
-const raf_1 = __importDefault(require("@rc-component/util/lib/raf"));
+const focus_1 = require("@rc-component/util/es/Dom/focus");
+const raf_1 = __importDefault(require("@rc-component/util/es/raf"));
 const React = __importStar(require("react"));
-const IdContext_1 = require("../../../components/Nav/context/IdContext");
-// destruct to reduce minify size
-const { DOWN, ENTER, ESC, LEFT, RIGHT, UP } = KeyCode_1.default;
-const ArrowKeys = [UP, DOWN, LEFT, RIGHT];
-function getOffset(mode, isRootLevel, isRtl, which) {
+const context_1 = require("../../../components/Nav/context");
+const constants_1 = require("../../../constants");
+const ArrowKeys = [
+    constants_1.KeyCode.ArrowDown,
+    constants_1.KeyCode.ArrowLeft,
+    constants_1.KeyCode.ArrowRight,
+    constants_1.KeyCode.ArrowUp,
+];
+const EdgeKeys = [constants_1.KeyCode.Home, constants_1.KeyCode.End];
+const EnteringKeys = [constants_1.KeyCode.Enter, constants_1.KeyCode.Space];
+function getOffset(mode, isRootLevel, isRtl, isShiftKey, keyCode) {
     const prev = 'prev';
     const next = 'next';
     const children = 'children';
     const parent = 'parent';
     // Inline enter is special that we use unique operation
-    if (mode === 'inline' && which === ENTER) {
-        return {
-            inlineTrigger: true,
-        };
+    if (mode === 'inline' && [constants_1.KeyCode.Enter.toString(), constants_1.KeyCode.Space.toString()].includes(keyCode)) {
+        return { inlineTrigger: true };
     }
     const inline = {
-        [DOWN]: next,
-        [UP]: prev,
+        [constants_1.KeyCode.ArrowDown]: next,
+        [constants_1.KeyCode.ArrowUp]: prev,
+        [constants_1.KeyCode.Tab]: isShiftKey ? prev : next,
     };
     const horizontal = {
-        [DOWN]: children,
-        [ENTER]: children,
-        [LEFT]: isRtl ? next : prev,
-        [RIGHT]: isRtl ? prev : next,
+        [constants_1.KeyCode.ArrowDown]: children,
+        [constants_1.KeyCode.ArrowLeft]: isRtl ? next : prev,
+        [constants_1.KeyCode.ArrowRight]: isRtl ? prev : next,
+        [constants_1.KeyCode.Enter]: children,
+        [constants_1.KeyCode.Space]: children,
+        [constants_1.KeyCode.Tab]: isShiftKey ? prev : next,
     };
     const vertical = {
-        [DOWN]: next,
-        [ENTER]: children,
-        [ESC]: parent,
-        [LEFT]: isRtl ? children : parent,
-        [RIGHT]: isRtl ? parent : children,
-        [UP]: prev,
+        [constants_1.KeyCode.ArrowDown]: next,
+        [constants_1.KeyCode.ArrowLeft]: isRtl ? children : parent,
+        [constants_1.KeyCode.ArrowRight]: isRtl ? parent : children,
+        [constants_1.KeyCode.ArrowUp]: prev,
+        [constants_1.KeyCode.Enter]: children,
+        [constants_1.KeyCode.Escape]: parent,
+        [constants_1.KeyCode.Space]: children,
+        [constants_1.KeyCode.Tab]: isShiftKey ? prev : next,
     };
     const offsets = {
         horizontal,
@@ -82,42 +92,30 @@ function getOffset(mode, isRootLevel, isRtl, which) {
         vertical,
         verticalSub: vertical,
     };
-    const type = offsets[`${mode}${isRootLevel ? '' : 'Sub'}`]?.[which];
+    // @ts-ignore .....
+    const type = offsets[`${mode}${isRootLevel ? '' : 'Sub'}`]?.[keyCode];
     switch (type) {
         case prev:
-            return {
-                offset: -1,
-                sibling: true,
-            };
+            return { offset: -1, sibling: true };
         case next:
-            return {
-                offset: 1,
-                sibling: true,
-            };
+            return { offset: 1, sibling: true };
         case parent:
-            return {
-                offset: -1,
-                sibling: false,
-            };
+            return { offset: -1, sibling: false };
         case children:
-            return {
-                offset: 1,
-                sibling: false,
-            };
+            return { offset: 1, sibling: false };
         default:
-            return null;
+            return undefined;
     }
 }
 function findContainerUL(element) {
     let current = element;
     while (current) {
-        if (current.getAttribute('data-nav-list')) {
+        if (current.hasAttribute('data-nav-list')) {
             return current;
         }
         current = current.parentElement;
     }
     // Normally should not reach this line
-    /* istanbul ignore next */
     return null;
 }
 /**
@@ -131,7 +129,7 @@ function getFocusElement(activeElement, elements) {
         }
         current = current.parentElement;
     }
-    return null;
+    return undefined;
 }
 /**
  * Get focusable elements from the element set under provided container
@@ -140,16 +138,16 @@ function getFocusableElements(container, elements) {
     const list = (0, focus_1.getFocusNodeList)(container, true);
     return list.filter(ele => elements.has(ele));
 }
-function getNextFocusElement(parentQueryContainer, elements, focusMenuElement, offset = 1) {
+function getNextFocusElement(parentQueryContainer, elements, focusNavElement, offset = 1) {
     // Key on the menu item will not get validate parent container
     if (!parentQueryContainer) {
         return undefined;
     }
     // List current level menu item elements
-    const sameLevelFocusableMenuElementList = getFocusableElements(parentQueryContainer, elements);
+    const sameLevelFocusableNavElementList = getFocusableElements(parentQueryContainer, elements);
     // Find next focus index
-    const count = sameLevelFocusableMenuElementList.length;
-    let focusIndex = sameLevelFocusableMenuElementList.findIndex(ele => focusMenuElement === ele);
+    const count = sameLevelFocusableNavElementList.length;
+    let focusIndex = sameLevelFocusableNavElementList.findIndex(ele => focusNavElement === ele);
     if (offset < 0) {
         if (focusIndex === -1) {
             focusIndex = count - 1;
@@ -163,7 +161,21 @@ function getNextFocusElement(parentQueryContainer, elements, focusMenuElement, o
     }
     focusIndex = (focusIndex + count) % count;
     // Focus menu item
-    return sameLevelFocusableMenuElementList[focusIndex];
+    return sameLevelFocusableNavElementList[focusIndex];
+}
+function refreshElements(keys, id) {
+    const elements = new Set();
+    const key2element = new Map();
+    const element2key = new Map();
+    keys.forEach(key => {
+        const element = document.querySelector(`[data-nav-id='${(0, context_1.getNavId)(id, key)}']`);
+        if (element) {
+            elements.add(element);
+            element2key.set(element, key);
+            key2element.set(key, element);
+        }
+    });
+    return { element2key, elements, key2element };
 }
 function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, getKeyPath, triggerActiveKey, triggerAccessibilityOpen, originOnKeyDown) {
     const rafRef = React.useRef(undefined);
@@ -176,50 +188,33 @@ function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, get
         cleanRaf();
     }, []);
     return event => {
-        const { which } = event;
-        if ([...ArrowKeys, ENTER, ESC].includes(which)) {
-            // Convert key to elements
-            let element2key = new Map(), elements = new Set(), key2element = new Map();
-            // >>> Wrap as function since we use raf for some case
-            const refreshElements = () => {
-                elements = new Set();
-                key2element = new Map();
-                element2key = new Map();
-                const keys = getKeys();
-                keys.forEach(key => {
-                    const element = document.querySelector(`[data-nav-id='${(0, IdContext_1.getNavId)(id, key)}']`);
-                    if (element) {
-                        elements.add(element);
-                        element2key.set(element, key);
-                        key2element.set(key, element);
-                    }
-                });
-                return elements;
-            };
-            refreshElements();
+        if ([...ArrowKeys, ...EdgeKeys, ...EnteringKeys, constants_1.KeyCode.Escape, constants_1.KeyCode.Tab].includes(event.code)) {
+            const keys = getKeys();
+            let refreshedElements = refreshElements(keys, id);
+            const { element2key, elements, key2element } = refreshedElements;
             // First we should find current focused MenuItem/SubMenu element
             const activeElement = key2element.get(activeKey);
             const focusMenuElement = getFocusElement(activeElement, elements);
-            const focusMenuKey = focusMenuElement ? element2key.get(focusMenuElement) : undefined;
-            const offsetObj = getOffset(mode, focusMenuKey !== undefined && getKeyPath(focusMenuKey, true).length === 1, isRtl, which);
+            const focusMenuKey = focusMenuElement ? element2key.get(focusMenuElement) : null;
+            const offsetObj = getOffset(mode, focusMenuKey != null ? getKeyPath(focusMenuKey, true).length === 1 : true, isRtl, event.shiftKey, event.code);
             // Some mode do not have fully arrow operation like inline
-            if (!offsetObj) {
+            if (!offsetObj && event.code !== constants_1.KeyCode.Home && event.code !== constants_1.KeyCode.End) {
                 return;
             }
             // Arrow prevent default to avoid page scroll
-            if (ArrowKeys.includes(which)) {
+            if ([...ArrowKeys, ...EdgeKeys, constants_1.KeyCode.Enter, constants_1.KeyCode.Tab].includes(event.code)) {
                 event.preventDefault();
             }
-            const tryFocus = (menuElement) => {
-                if (menuElement) {
-                    let focusTargetElement = menuElement;
+            const tryFocus = (navElement) => {
+                if (navElement) {
+                    let focusTargetElement = navElement;
                     // Focus to link instead of menu item if possible
-                    const link = menuElement.querySelector('a');
+                    const link = navElement.querySelector('a');
                     if (link?.getAttribute('href')) {
                         focusTargetElement = link;
                     }
-                    const targetKey = element2key.get(menuElement);
-                    if (targetKey !== undefined) {
+                    const targetKey = element2key.get(navElement);
+                    if (targetKey != null) {
                         triggerActiveKey(targetKey);
                     }
                     /**
@@ -235,25 +230,28 @@ function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, get
                     });
                 }
             };
-            if (offsetObj.sibling || !focusMenuElement) {
+            // @ts-ignore .....
+            if (EdgeKeys.includes(event.code) || offsetObj?.sibling || !focusMenuElement) {
                 // ========================== Sibling ==========================
                 // Find walkable focus menu element container
-                let parentQueryContainer;
-                if (!focusMenuElement || mode === 'inline') {
-                    parentQueryContainer = containerRef.current;
-                }
-                else {
-                    parentQueryContainer = findContainerUL(focusMenuElement);
-                }
+                const parentQueryContainer = (!focusMenuElement || mode === 'inline')
+                    ? containerRef.current
+                    : findContainerUL(focusMenuElement);
                 if (parentQueryContainer == null) {
                     return;
                 }
                 // Get next focus element
-                const targetElement = getNextFocusElement(parentQueryContainer, 
-                // @ts-ignore bla bla ts
-                elements, 
-                // @ts-ignore bla bla ts
-                focusMenuElement, offsetObj.offset);
+                let targetElement;
+                const focusableElements = getFocusableElements(parentQueryContainer, elements);
+                if (event.code === constants_1.KeyCode.Home) {
+                    [targetElement] = focusableElements;
+                }
+                else if (event.code === constants_1.KeyCode.End) {
+                    targetElement = focusableElements[focusableElements.length - 1];
+                }
+                else {
+                    targetElement = getNextFocusElement(parentQueryContainer, elements, focusMenuElement, offsetObj?.offset);
+                }
                 if (targetElement == null) {
                     return;
                 }
@@ -261,17 +259,17 @@ function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, get
                 tryFocus(targetElement);
             }
             // ======================= InlineTrigger =======================
-            else if (offsetObj.inlineTrigger && focusMenuKey !== undefined) {
+            else if (offsetObj?.inlineTrigger && focusMenuKey) {
                 // Inline trigger no need switch to sub menu item
                 triggerAccessibilityOpen(focusMenuKey);
             }
             // =========================== Level ===========================
-            else if (offsetObj.offset && focusMenuKey !== undefined) {
+            else if ((offsetObj?.offset ?? 0) > 0 && focusMenuKey) {
                 triggerAccessibilityOpen(focusMenuKey, true);
                 cleanRaf();
                 rafRef.current = (0, raf_1.default)(() => {
                     // Async should re-sync elements
-                    refreshElements();
+                    refreshedElements = refreshElements(keys, id);
                     const controlId = focusMenuElement.getAttribute('aria-controls');
                     if (controlId == null) {
                         return;
@@ -289,12 +287,12 @@ function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, get
                     tryFocus(targetElement);
                 }, 5);
             }
-            else if ((!offsetObj.offset || offsetObj.offset < 0) && focusMenuKey !== undefined) {
+            else if ((offsetObj?.offset ?? 0) < 0 && focusMenuKey) {
                 const keyPath = getKeyPath(focusMenuKey, true);
                 const parentKey = keyPath[keyPath.length - 2];
-                const parentMenuElement = key2element.get(parentKey);
                 // Focus menu item
                 triggerAccessibilityOpen(parentKey, false);
+                const parentMenuElement = key2element.get(parentKey);
                 if (parentMenuElement == null) {
                     return;
                 }

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

@@ -35,12 +35,10 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useActive = useActive;
 const React = __importStar(require("react"));
-const NavContext_1 = require("../../../components/Nav/context/NavContext");
+const context_1 = require("../../../components/Nav/context");
 function useActive(eventKey, disabled, onMouseEnter, onMouseLeave) {
-    const { 
-    // Active
-    activeKey, onActive, onInactive, } = React.useContext(NavContext_1.NavContext);
-    if (eventKey === undefined) {
+    const { activeKey, onActive, onInactive } = React.useContext(context_1.NavContext);
+    if (eventKey == null) {
         return { active: false };
     }
     const ret = {
@@ -49,17 +47,11 @@ function useActive(eventKey, disabled, onMouseEnter, onMouseLeave) {
     // Skip when disabled
     if (!disabled) {
         ret.onMouseEnter = domEvent => {
-            onMouseEnter?.({
-                domEvent,
-                key: eventKey,
-            });
+            onMouseEnter?.({ domEvent, key: eventKey });
             onActive(eventKey);
         };
         ret.onMouseLeave = domEvent => {
-            onMouseLeave?.({
-                domEvent,
-                key: eventKey,
-            });
+            onMouseLeave?.({ domEvent, key: eventKey });
             onInactive(eventKey);
         };
     }

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

@@ -35,9 +35,9 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDirectionStyle = useDirectionStyle;
 const React = __importStar(require("react"));
-const NavContext_1 = require("../../../components/Nav/context/NavContext");
+const context_1 = require("../../../components/Nav/context");
 function useDirectionStyle(level) {
-    const { inlineIndent, mode, rtl } = React.useContext(NavContext_1.NavContext);
+    const { inlineIndent, mode, rtl } = React.useContext(context_1.NavContext);
     if (mode !== 'inline') {
         return null;
     }

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

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

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

@@ -32,15 +32,12 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-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 = useKeyRecords;
-const warning_1 = __importDefault(require("@rc-component/util/lib/warning"));
+const util_1 = require("@rc-component/util");
 const React = __importStar(require("react"));
-const timeUtil_1 = require("../../../components/Nav/utils/timeUtil");
+const utils_1 = require("../../../components/Nav/utils");
 const hooks_1 = require("../../../hooks");
 const PATH_SPLIT = '__RC_UTIL_PATH_SPLIT__';
 function getPathStr(keyPath) {
@@ -49,7 +46,7 @@ function getPathStr(keyPath) {
 function getPathKeys(keyPathStr) {
     return keyPathStr.split(PATH_SPLIT);
 }
-exports.OVERFLOW_KEY = 'rc-menu-more';
+exports.OVERFLOW_KEY = 'uk-nav-more';
 function useKeyRecords() {
     const forceUpdate = (0, hooks_1.useForceUpdate)();
     const key2pathRef = React.useRef(new Map());
@@ -60,7 +57,7 @@ function useKeyRecords() {
     const registerPath = React.useCallback((key, keyPath) => {
         // Warning for invalidate or duplicated `key`
         if (process.env.NODE_ENV !== 'production') {
-            (0, warning_1.default)(!key2pathRef.current.has(key), `Duplicated key '${key}' used in Menu by path [${keyPath.join(' > ')}]`);
+            (0, util_1.warning)(!key2pathRef.current.has(key), `Duplicated key '${key}' used in Menu by path [${keyPath.join(' > ')}]`);
         }
         // Fill map
         const connectedPath = getPathStr(keyPath);
@@ -68,7 +65,7 @@ function useKeyRecords() {
         key2pathRef.current.set(key, connectedPath);
         updateRef.current += 1;
         const id = updateRef.current;
-        (0, timeUtil_1.nextSlice)(() => {
+        (0, utils_1.nextSlice)(() => {
             if (id === updateRef.current && !destroyRef.current) {
                 forceUpdate();
             }

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

@@ -1,13 +1,17 @@
 import { type ActionType } from '@rc-component/trigger';
 import type * as React from 'react';
-export type NavRef = {
+import { type SubNavProps } from '../../components/Nav/Sub/InternalSubNav';
+export interface NavRef {
+    findItem: (params: {
+        key: string;
+    }) => HTMLElement | null;
     /**
      * 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;
-};
+    list?: HTMLUListElement | null;
+}
 interface ItemSharedProps {
     className?: string;
     style?: React.CSSProperties;
@@ -21,6 +25,7 @@ export interface SubNavType extends ItemSharedProps {
     label?: React.ReactNode;
     popupClassName?: string;
     popupOffset?: number[];
+    popupStyle?: React.CSSProperties;
     rootClassName?: string;
     onClick?: NavClickEventHandler;
     onMouseEnter?: NavHoverEventHandler;
@@ -31,9 +36,11 @@ export interface SubNavType extends ItemSharedProps {
 }
 export interface NavItemType extends ItemSharedProps {
     disabled?: boolean;
+    extra?: React.ReactNode;
     itemIcon?: RenderIconType;
     key: React.Key;
     label?: React.ReactNode;
+    type?: 'item';
     onClick?: NavClickEventHandler;
     onMouseEnter?: NavHoverEventHandler;
     onMouseLeave?: NavHoverEventHandler;
@@ -78,4 +85,10 @@ export interface SelectInfo extends NavInfo {
 }
 export type SelectEventHandler = (info: SelectInfo) => void;
 export type NavClickEventHandler = (info: NavInfo) => void;
+export type NavComponentType = 'subnav' | 'item' | 'group' | 'divider';
+export type NavComponents = Partial<Record<NavComponentType, React.ComponentType<any>>>;
+export type NavPopupRender = (node: React.ReactElement, info: {
+    item: SubNavProps;
+    keys: string[];
+}) => React.ReactNode;
 export {};

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

@@ -1,3 +1,3 @@
-import { type AlignType, type BuildInPlacements } from '@rc-component/trigger/lib/interface';
+import { type AlignType, type BuildInPlacements } from '@rc-component/trigger/es/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/cjs/components/Nav/utils/alignUtil.js

@@ -10,10 +10,7 @@ function isPointsEq(a1, a2, isAlignPoint) {
 }
 function getAlignFromPlacement(builtinPlacements, placementStr, align) {
     const baseAlign = builtinPlacements[placementStr] || {};
-    return {
-        ...baseAlign,
-        ...align,
-    };
+    return { ...baseAlign, ...align };
 }
 function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
     const { points } = align;

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

@@ -0,0 +1,5 @@
+export * from '../../../components/Nav/utils/alignUtil';
+export * from '../../../components/Nav/utils/motionUtil';
+export * from '../../../components/Nav/utils/nodeUtil';
+export * from '../../../components/Nav/utils/timeUtil';
+export * from '../../../components/Nav/utils/warnUtil';

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

@@ -0,0 +1,21 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../../components/Nav/utils/alignUtil"), exports);
+__exportStar(require("../../../components/Nav/utils/motionUtil"), exports);
+__exportStar(require("../../../components/Nav/utils/nodeUtil"), exports);
+__exportStar(require("../../../components/Nav/utils/timeUtil"), exports);
+__exportStar(require("../../../components/Nav/utils/warnUtil"), exports);

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

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

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

@@ -32,68 +32,72 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseChildren = parseChildren;
 exports.parseItems = parseItems;
-const toArray_1 = __importDefault(require("@rc-component/util/lib/Children/toArray"));
+const util_1 = require("@rc-component/util");
 const React = __importStar(require("react"));
 const Divider_1 = require("../../../components/Nav/Divider");
 const Group_1 = require("../../../components/Nav/Group");
 const Item_1 = require("../../../components/Nav/Item");
 const Sub_1 = require("../../../components/Nav/Sub");
-function parseChildren(children, keyPath) {
-    return (0, toArray_1.default)(children).map((child, index) => {
-        if (React.isValidElement(child)) {
-            const { key } = child;
-            let eventKey = child.props?.eventKey ?? key;
-            const emptyKey = eventKey === null || eventKey === undefined;
-            if (emptyKey) {
-                eventKey = `tmp_key-${[...keyPath, index].join('-')}`;
-            }
-            const cloneProps = {
-                eventKey,
-                key: eventKey,
-            };
-            if (process.env.NODE_ENV !== 'production' && emptyKey) {
-                cloneProps.warnKey = true;
-            }
-            return React.cloneElement(child, cloneProps);
-        }
-        return child;
-    });
-}
-function convertItemsToNodes(list) {
+function convertItemsToNodes(list, components, prefixCls) {
+    const { divider: MergedDivider, group: MergedNavGroup, item: MergedNavItem, subnav: MergedSubNav, } = components;
     return (list || [])
         .map((opt, index) => {
         if (opt && typeof opt === 'object') {
-            const { children, key, label, type, ...restProps } = opt;
+            const { children, extra, key, label, type, ...restProps } = opt;
             const mergedKey = key ?? `tmp-${index}`;
-            // MenuItemGroup & SubMenuItem
+            // NavItemGroup & SubNavItem
             if (children || type === 'group') {
                 if (type === 'group') {
                     // Group
-                    return (React.createElement(Group_1.Group, { key: mergedKey, ...restProps, title: label }, convertItemsToNodes(children)));
+                    return (React.createElement(MergedNavGroup, { key: mergedKey, ...restProps, title: label }, convertItemsToNodes(children, components, prefixCls)));
                 }
                 // Sub Menu
-                return (React.createElement(Sub_1.Sub, { key: mergedKey, ...restProps, title: label }, convertItemsToNodes(children)));
+                return (React.createElement(MergedSubNav, { key: mergedKey, ...restProps, title: label }, convertItemsToNodes(children, components, prefixCls)));
             }
             // MenuItem & Divider
             if (type === 'divider') {
-                return React.createElement(Divider_1.Divider, { key: mergedKey, ...restProps });
+                return React.createElement(MergedDivider, { key: mergedKey, ...restProps });
             }
-            return (React.createElement(Item_1.Item, { key: mergedKey, ...restProps }, label));
+            return (React.createElement(MergedNavItem, { key: mergedKey, ...restProps, extra: extra },
+                label,
+                (!!extra || extra === 0) && (React.createElement("span", { className: `${prefixCls}-item-extra` }, extra))));
         }
         return null;
     })
         .filter(opt => opt);
 }
-function parseItems(children, items, keyPath) {
+function parseChildren(children, keyPath) {
+    return (0, util_1.toArray)(children).map((child, index) => {
+        if (React.isValidElement(child)) {
+            const { key } = child;
+            let eventKey = child.props?.eventKey ?? key;
+            const emptyKey = eventKey === null || eventKey === undefined;
+            if (emptyKey) {
+                eventKey = `tmp_key-${[...keyPath, index].join('-')}`;
+            }
+            const cloneProps = { eventKey, key: eventKey };
+            if (process.env.NODE_ENV !== 'production' && emptyKey) {
+                cloneProps.warnKey = true;
+            }
+            return React.cloneElement(child, cloneProps);
+        }
+        return child;
+    });
+}
+function parseItems(children, items, keyPath, components, prefixCls) {
     let childNodes = children;
+    const mergedComponents = {
+        divider: Divider_1.Divider,
+        group: Group_1.Group,
+        item: Item_1.Item,
+        subnav: Sub_1.Sub,
+        ...components,
+    };
     if (items) {
-        childNodes = convertItemsToNodes(items);
+        childNodes = convertItemsToNodes(items, mergedComponents, prefixCls);
     }
     return parseChildren(childNodes, keyPath);
 }