@broxus/react-uikit 0.22.0 → 0.23.0

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

@@ -1,39 +1,47 @@
-import { getFocusNodeList } from '@rc-component/util/lib/Dom/focus';
-import KeyCode from '@rc-component/util/lib/KeyCode';
-import raf from '@rc-component/util/lib/raf';
+import { getFocusNodeList } from '@rc-component/util/es/Dom/focus';
+import raf from '@rc-component/util/es/raf';
 import * as React from 'react';
-import { getNavId } from '../../../components/Nav/context/IdContext';
-// destruct to reduce minify size
-const { DOWN, ENTER, ESC, LEFT, RIGHT, UP } = KeyCode;
-const ArrowKeys = [UP, DOWN, LEFT, RIGHT];
-function getOffset(mode, isRootLevel, isRtl, which) {
+import { getNavId } from '../../../components/Nav/context';
+import { KeyCode } from '../../../constants';
+const ArrowKeys = [
+    KeyCode.ArrowDown,
+    KeyCode.ArrowLeft,
+    KeyCode.ArrowRight,
+    KeyCode.ArrowUp,
+];
+const EdgeKeys = [KeyCode.Home, KeyCode.End];
+const EnteringKeys = [KeyCode.Enter, 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' && [KeyCode.Enter.toString(), KeyCode.Space.toString()].includes(keyCode)) {
+        return { inlineTrigger: true };
     }
     const inline = {
-        [DOWN]: next,
-        [UP]: prev,
+        [KeyCode.ArrowDown]: next,
+        [KeyCode.ArrowUp]: prev,
+        [KeyCode.Tab]: isShiftKey ? prev : next,
     };
     const horizontal = {
-        [DOWN]: children,
-        [ENTER]: children,
-        [LEFT]: isRtl ? next : prev,
-        [RIGHT]: isRtl ? prev : next,
+        [KeyCode.ArrowDown]: children,
+        [KeyCode.ArrowLeft]: isRtl ? next : prev,
+        [KeyCode.ArrowRight]: isRtl ? prev : next,
+        [KeyCode.Enter]: children,
+        [KeyCode.Space]: children,
+        [KeyCode.Tab]: isShiftKey ? prev : next,
     };
     const vertical = {
-        [DOWN]: next,
-        [ENTER]: children,
-        [ESC]: parent,
-        [LEFT]: isRtl ? children : parent,
-        [RIGHT]: isRtl ? parent : children,
-        [UP]: prev,
+        [KeyCode.ArrowDown]: next,
+        [KeyCode.ArrowLeft]: isRtl ? children : parent,
+        [KeyCode.ArrowRight]: isRtl ? parent : children,
+        [KeyCode.ArrowUp]: prev,
+        [KeyCode.Enter]: children,
+        [KeyCode.Escape]: parent,
+        [KeyCode.Space]: children,
+        [KeyCode.Tab]: isShiftKey ? prev : next,
     };
     const offsets = {
         horizontal,
@@ -43,42 +51,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;
 }
 /**
@@ -92,25 +88,25 @@ function getFocusElement(activeElement, elements) {
         }
         current = current.parentElement;
     }
-    return null;
+    return undefined;
 }
 /**
  * Get focusable elements from the element set under provided container
  */
-function getFocusableElements(container, elements) {
+export function getFocusableElements(container, elements) {
     const list = 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;
@@ -124,7 +120,21 @@ function getNextFocusElement(parentQueryContainer, elements, focusMenuElement, o
     }
     focusIndex = (focusIndex + count) % count;
     // Focus menu item
-    return sameLevelFocusableMenuElementList[focusIndex];
+    return sameLevelFocusableNavElementList[focusIndex];
+}
+export 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='${getNavId(id, key)}']`);
+        if (element) {
+            elements.add(element);
+            element2key.set(element, key);
+            key2element.set(key, element);
+        }
+    });
+    return { element2key, elements, key2element };
 }
 export function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, getKeyPath, triggerActiveKey, triggerAccessibilityOpen, originOnKeyDown) {
     const rafRef = React.useRef(undefined);
@@ -137,50 +147,33 @@ export function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKe
         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='${getNavId(id, key)}']`);
-                    if (element) {
-                        elements.add(element);
-                        element2key.set(element, key);
-                        key2element.set(key, element);
-                    }
-                });
-                return elements;
-            };
-            refreshElements();
+        if ([...ArrowKeys, ...EdgeKeys, ...EnteringKeys, KeyCode.Escape, 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 !== KeyCode.Home && event.code !== KeyCode.End) {
                 return;
             }
             // Arrow prevent default to avoid page scroll
-            if (ArrowKeys.includes(which)) {
+            if ([...ArrowKeys, ...EdgeKeys, KeyCode.Enter, 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);
                     }
                     /**
@@ -196,25 +189,28 @@ export function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKe
                     });
                 }
             };
-            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 === KeyCode.Home) {
+                    [targetElement] = focusableElements;
+                }
+                else if (event.code === KeyCode.End) {
+                    targetElement = focusableElements[focusableElements.length - 1];
+                }
+                else {
+                    targetElement = getNextFocusElement(parentQueryContainer, elements, focusMenuElement, offsetObj?.offset);
+                }
                 if (targetElement == null) {
                     return;
                 }
@@ -222,17 +218,17 @@ export function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKe
                 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 = raf(() => {
                     // Async should re-sync elements
-                    refreshElements();
+                    refreshedElements = refreshElements(keys, id);
                     const controlId = focusMenuElement.getAttribute('aria-controls');
                     if (controlId == null) {
                         return;
@@ -250,12 +246,12 @@ export function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKe
                     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/esm/components/Nav/hooks/useActive.js

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import { NavContext } from '../../../components/Nav/context/NavContext';
+import { NavContext } from '../../../components/Nav/context';
 export function useActive(eventKey, disabled, onMouseEnter, onMouseLeave) {
-    const { 
-    // Active
-    activeKey, onActive, onInactive, } = React.useContext(NavContext);
-    if (eventKey === undefined) {
+    const { activeKey, onActive, onInactive } = React.useContext(NavContext);
+    if (eventKey == null) {
         return { active: false };
     }
     const ret = {
@@ -13,17 +11,11 @@ export 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/esm/components/Nav/hooks/useDirectionStyle.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { NavContext } from '../../../components/Nav/context/NavContext';
+import { NavContext } from '../../../components/Nav/context';
 export function useDirectionStyle(level) {
     const { inlineIndent, mode, rtl } = React.useContext(NavContext);
     if (mode !== 'inline') {

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

@@ -1,6 +1,6 @@
-import warning from '@rc-component/util/lib/warning';
+import { warning } from '@rc-component/util';
 import * as React from 'react';
-import { nextSlice } from '../../../components/Nav/utils/timeUtil';
+import { nextSlice } from '../../../components/Nav/utils';
 import { useForceUpdate } from '../../../hooks';
 const PATH_SPLIT = '__RC_UTIL_PATH_SPLIT__';
 function getPathStr(keyPath) {
@@ -9,7 +9,7 @@ function getPathStr(keyPath) {
 function getPathKeys(keyPathStr) {
     return keyPathStr.split(PATH_SPLIT);
 }
-export const OVERFLOW_KEY = 'rc-menu-more';
+export const OVERFLOW_KEY = 'uk-nav-more';
 export function useKeyRecords() {
     const forceUpdate = useForceUpdate();
     const key2pathRef = React.useRef(new Map());

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

@@ -1,12 +1,16 @@
 import { type ActionType } from '@rc-component/trigger';
 import type * as React from 'react';
+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;
@@ -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/esm/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/esm/components/Nav/utils/alignUtil.js

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

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

@@ -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/esm/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/esm/components/Nav/utils/nodeUtil.js

@@ -1,59 +1,66 @@
-import toArray from '@rc-component/util/lib/Children/toArray';
+import { toArray } from '@rc-component/util';
 import * as React from 'react';
 import { Divider } from '../../../components/Nav/Divider';
 import { Group } from '../../../components/Nav/Group';
 import { Item } from '../../../components/Nav/Item';
 import { Sub } from '../../../components/Nav/Sub';
-export function parseChildren(children, keyPath) {
-    return 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 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, { 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, { 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, { key: mergedKey, ...restProps });
+                return React.createElement(MergedDivider, { key: mergedKey, ...restProps });
             }
-            return (React.createElement(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);
 }
-export function parseItems(children, items, keyPath) {
+export function parseChildren(children, keyPath) {
+    return 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;
+    });
+}
+export function parseItems(children, items, keyPath, components, prefixCls) {
     let childNodes = children;
+    const mergedComponents = {
+        divider: Divider,
+        group: Group,
+        item: Item,
+        subnav: Sub,
+        ...components,
+    };
     if (items) {
-        childNodes = convertItemsToNodes(items);
+        childNodes = convertItemsToNodes(items, mergedComponents, prefixCls);
     }
     return parseChildren(childNodes, keyPath);
 }

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

@@ -1,4 +1,4 @@
-import warning from '@rc-component/util/lib/warning';
+import { warning } from '@rc-component/util';
 /**
  * `onClick` event return `info.item` which point to react node directly.
  * We should warning this since it will not work on FC.

package/dist/esm/components/Navbar/Center.d.ts

@@ -5,7 +5,7 @@ export interface NavbarCenterOwnProps extends React.HTMLAttributes<HTMLElement>
 }
 export type NavbarCenterProps<E extends React.ElementType = React.ElementType> = NavbarCenterOwnProps & PolymorphicProps<E> & PolymorphicProps<E, NavbarCenterOwnProps>;
 declare const defaultElement = "div";
-export declare function Center<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<NavbarCenterProps<E>>): React.JSX.Element;
+export declare function Center<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<NavbarCenterProps<E>>): React.ReactElement;
 export declare namespace Center {
     var displayName: string;
 }

package/dist/esm/components/Navbar/Container.d.ts

@@ -6,7 +6,7 @@ export interface NavbarContainerOwnProps extends React.HTMLAttributes<HTMLElemen
 }
 export type NavbarContainerProps<E extends React.ElementType = React.ElementType> = NavbarContainerOwnProps & PolymorphicProps<E> & PolymorphicProps<E, NavbarContainerOwnProps>;
 declare const defaultElement = "div";
-export declare function Container<E extends React.ElementType = typeof defaultElement>({ className, component, transparent, ...props }: React.PropsWithChildren<NavbarContainerProps<E>>): React.JSX.Element;
+export declare function Container<E extends React.ElementType = typeof defaultElement>({ className, component, transparent, ...props }: React.PropsWithChildren<NavbarContainerProps<E>>): React.ReactElement;
 export declare namespace Container {
     var displayName: string;
 }

package/dist/esm/components/Navbar/Item.d.ts

@@ -6,7 +6,7 @@ export interface NavbarItemOwnProps extends React.HTMLAttributes<HTMLElement> {
 }
 export type NavbarItemProps<E extends React.ElementType = React.ElementType> = NavbarItemOwnProps & PolymorphicProps<E> & PolymorphicProps<E, NavbarItemOwnProps>;
 declare const defaultElement = "div";
-export declare function Item<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<NavbarItemProps<E>>): React.JSX.Element;
+export declare function Item<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<NavbarItemProps<E>>): React.ReactElement;
 export declare namespace Item {
     var displayName: string;
 }

package/dist/esm/components/Navbar/Left.d.ts

@@ -5,7 +5,7 @@ export interface NavbarLeftOwnProps extends React.HTMLAttributes<HTMLElement> {
 }
 export type NavbarLeftProps<E extends React.ElementType = React.ElementType> = NavbarLeftOwnProps & PolymorphicProps<E> & PolymorphicProps<E, NavbarLeftOwnProps>;
 declare const defaultElement = "div";
-export declare function Left<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<NavbarLeftProps<E>>): React.JSX.Element;
+export declare function Left<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<NavbarLeftProps<E>>): React.ReactElement;
 export declare namespace Left {
     var displayName: string;
 }

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

@@ -4,4 +4,4 @@ export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
     transparent?: boolean;
 }
-export declare function Navbar({ asContainer, className, transparent, ...props }: NavbarProps): React.JSX.Element;
+export declare function Navbar({ asContainer, className, transparent, ...props }: NavbarProps): React.ReactElement;