@broxus/react-uikit 0.20.1 → 0.22.0

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

@@ -33,12 +33,12 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Item = void 0;
+exports.Item = Item;
 const js_utils_1 = require("@broxus/js-utils");
 const React = __importStar(require("react"));
 const PathContext_1 = require("../../../components/Nav/context/PathContext");
 const InternalNavItem_1 = require("../../../components/Nav/Item/InternalNavItem");
-exports.Item = React.memo(({ eventKey, ...restProps }) => {
+function Item({ eventKey, ...restProps }) {
     const measure = (0, PathContext_1.useMeasure)();
     const connectedKeyPath = (0, PathContext_1.useFullPath)(eventKey);
     React.useEffect(() => {
@@ -54,7 +54,7 @@ exports.Item = React.memo(({ eventKey, ...restProps }) => {
         return null;
     }
     return React.createElement(InternalNavItem_1.InternalNavItem, { eventKey: eventKey, ...restProps });
-});
+}
 if (process.env.NODE_ENV !== 'production') {
-    exports.Item.displayName = 'Nav.Item';
+    Item.displayName = 'Nav.Item';
 }

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

@@ -3,6 +3,23 @@ import * as React from 'react';
 import { type BuiltinPlacements, type ItemType, type NavClickEventHandler, type NavMode, type NavModifier, type NavRef, type RenderIconType, type SelectEventHandler, type TriggerSubNavAction } from '../../components/Nav/types';
 import { type Direction } from '../../types';
 export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onClick' | 'onSelect' | 'dir'> {
+    /**
+     * @private Only used for `pro-layout`. Do not use in your prod directly,
+     * and we do not promise any compatibility for this.
+     */
+    _internalRenderMenuItem?: (originNode: React.ReactElement, menuItemProps: any, stateProps: {
+        selected: boolean;
+    }) => React.ReactElement;
+    /**
+     * @private Only used for `pro-layout`. Do not use in your prod directly,
+     * and we do not promise any compatibility for this.
+     */
+    _internalRenderSubMenuItem?: (originNode: React.ReactElement, subMenuItemProps: any, stateProps: {
+        active: boolean;
+        disabled: boolean;
+        open: boolean;
+        selected: boolean;
+    }) => React.ReactElement;
     activeKey?: string;
     builtinPlacements?: BuiltinPlacements;
     children?: React.ReactNode;
@@ -39,22 +56,5 @@ export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, '
     onDeselect?: SelectEventHandler;
     onOpenChange?: (openKeys: string[]) => void;
     onSelect?: SelectEventHandler;
-    /**
-     * @private Only used for `pro-layout`. Do not use in your prod directly,
-     * and we do not promise any compatibility for this.
-     */
-    _internalRenderMenuItem?: (originNode: React.ReactElement, menuItemProps: any, stateProps: {
-        selected: boolean;
-    }) => React.ReactElement;
-    /**
-     * @private Only used for `pro-layout`. Do not use in your prod directly,
-     * and we do not promise any compatibility for this.
-     */
-    _internalRenderSubMenuItem?: (originNode: React.ReactElement, subMenuItemProps: any, stateProps: {
-        selected: boolean;
-        open: boolean;
-        active: boolean;
-        disabled: boolean;
-    }) => React.ReactElement;
 }
 export declare const Nav: React.ForwardRefExoticComponent<NavProps & React.RefAttributes<NavRef>>;

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

@@ -59,9 +59,9 @@ const warnUtil_1 = require("../../components/Nav/utils/warnUtil");
 const hooks_1 = require("../../hooks");
 const utils_1 = require("../../utils");
 const EMPTY_LIST = [];
-exports.Nav = React.forwardRef((props, ref) => {
+exports.Nav = React.forwardRef(({ _internalRenderMenuItem, _internalRenderSubMenuItem, activeKey, builtinPlacements, children, className, defaultActiveFirst, defaultOpenKeys, defaultSelectedKeys, direction, disabled, disabledOverflow, expandIcon, forceSubNavRender, id, inlineCollapsed, itemIcon, items, mode = 'inline', modifiers, motion, multiple = false, openKeys, overflowedIndicator = '...', overflowedIndicatorPopupClassName, selectable = false, selectedKeys, style, subNavCloseDelay = 0.1, subNavOpenDelay = 0.1, tabIndex = 0, triggerSubNavAction = 'hover', onClick, onDeselect, onKeyDown, onOpenChange, onSelect, ...props }, ref) => {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { activeKey, builtinPlacements, children, className, defaultActiveFirst, defaultOpenKeys, defaultSelectedKeys, direction, disabled, disabledOverflow, expandIcon, forceSubNavRender, getPopupContainer = config.getPopupContainer, id, inlineCollapsed, itemIcon, items, mode = 'inline', modifiers, motion, multiple = false, openKeys, overflowedIndicator = '...', overflowedIndicatorPopupClassName, popupPrefixCls = `${config.prefixCls}-dropdown`, prefixCls = config.prefixCls, defaultMotions = {
+    const { prefixCls = config.prefixCls, defaultMotions = {
         horizontal: {
             motionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'),
         },
@@ -70,7 +70,7 @@ exports.Nav = React.forwardRef((props, ref) => {
             leavedClassName: `${prefixCls || config.prefixCls}-hidden`,
             motionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'zoom'),
         },
-    }, selectable = false, selectedKeys, style, subNavCloseDelay = 0.1, subNavOpenDelay = 0.1, tabIndex = 0, triggerSubNavAction = 'hover', onClick, onDeselect, onKeyDown, onOpenChange, onSelect, _internalRenderMenuItem, _internalRenderSubMenuItem, ...restProps } = props;
+    }, getPopupContainer = config.getPopupContainer, popupPrefixCls = `${config.prefixCls}-dropdown`, ...restProps } = props;
     const childList = React.useMemo(() => (0, nodeUtil_1.parseItems)(children, items, EMPTY_LIST), [children, items]);
     const mounted = (0, hooks_1.useMounted)();
     const containerRef = React.useRef(null);
@@ -148,7 +148,7 @@ exports.Nav = React.forwardRef((props, ref) => {
         };
     }, []);
     // ========================= Path =========================
-    const { registerPath, unregisterPath, refreshOverflowKeys, isSubPathKey, getKeyPath, getKeys, getSubPathKeys, } = (0, useKeyRecords_1.useKeyRecords)();
+    const { getKeyPath, getKeys, getSubPathKeys, isSubPathKey, refreshOverflowKeys, registerPath, unregisterPath, } = (0, useKeyRecords_1.useKeyRecords)();
     const registerPathContext = React.useMemo(() => ({ registerPath, unregisterPath }), [registerPath, unregisterPath]);
     const pathUserContext = React.useMemo(() => ({ isSubPathKey }), [isSubPathKey]);
     React.useEffect(() => {
@@ -157,7 +157,6 @@ exports.Nav = React.forwardRef((props, ref) => {
             : childList.slice(lastVisibleIndex + 1).map(child => child.key));
     }, [lastVisibleIndex, allVisible, refreshOverflowKeys, childList]);
     // ======================== Active ========================
-    // eslint-disable-next-line function-paren-newline
     const [mergedActiveKey, setMergedActiveKey] = (0, useMergedState_1.default)(activeKey || ((defaultActiveFirst && childList[0]?.key)), { value: activeKey });
     const onActive = (0, useMemoCallback_1.useMemoCallback)((key) => {
         setMergedActiveKey(key);
@@ -167,7 +166,8 @@ exports.Nav = React.forwardRef((props, ref) => {
     });
     React.useImperativeHandle(ref, () => ({
         focus: options => {
-            const shouldFocusKey = mergedActiveKey ?? childList.find(node => !node.props.disabled)?.key;
+            const shouldFocusKey = mergedActiveKey
+                ?? childList.find(node => !node.props.disabled)?.key;
             if (shouldFocusKey) {
                 containerRef.current
                     ?.querySelector(`li[data-nav-id='${(0, IdContext_1.getNavId)(uuid, shouldFocusKey)}']`)
@@ -270,7 +270,7 @@ exports.Nav = React.forwardRef((props, ref) => {
         // Always wrap provider to avoid sub node re-mount
         React.createElement(NavContext_1.NavContextProvider, { key: child.key, overflowDisabled: index > lastVisibleIndex }, child)));
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'nav'), [config, prefixCls]);
-    const container = (React.createElement(rc_overflow_1.default, { className: (0, classnames_1.default)({
+    const container = (React.createElement(rc_overflow_1.default, { ref: containerRef, className: (0, classnames_1.default)({
             [rootCls]: mergedMode !== 'horizontal',
         }, (Array.isArray(modifiers) ? modifiers : [modifiers])
             .filter(e => e)
@@ -279,12 +279,12 @@ exports.Nav = React.forwardRef((props, ref) => {
             [`${rootCls}-rtl`]: rootCls && isRtl,
         }, className), component: "ul", data: wrappedChildList, "data-menu-list": true, dir: direction, id: id, itemComponent: Item_1.Item, maxCount: (mergedMode !== 'horizontal' || disabledOverflow)
             ? rc_overflow_1.default.INVALIDATE
-            : rc_overflow_1.default.RESPONSIVE, ref: containerRef, renderRawItem: node => node, renderRawRest: omitItems => {
+            : rc_overflow_1.default.RESPONSIVE, prefixCls: rootCls, renderRawItem: node => node, renderRawRest: omitItems => {
             // We use origin list since wrapped list use context to prevent open
             const len = omitItems.length;
             const originOmitItems = len ? childList.slice(-len) : null;
             return (React.createElement(Sub_1.Sub, { disabled: allVisible, eventKey: useKeyRecords_1.OVERFLOW_KEY, internalPopupClose: len === 0, popupClassName: overflowedIndicatorPopupClassName, title: overflowedIndicator }, originOmitItems));
-        }, prefixCls: rootCls, role: "menu", ssr: "full", style: style, tabIndex: tabIndex, onKeyDown: onInternalKeyDown, onVisibleChange: newLastIndex => {
+        }, role: "menu", ssr: "full", style: style, tabIndex: tabIndex, onKeyDown: onInternalKeyDown, onVisibleChange: newLastIndex => {
             setLastVisibleIndex(newLastIndex);
         }, ...restProps }));
     // >>>>> Render
@@ -292,6 +292,6 @@ exports.Nav = React.forwardRef((props, ref) => {
         React.createElement(IdContext_1.IdContext.Provider, { value: uuid },
             React.createElement(NavContext_1.NavContextProvider, { activeKey: mergedActiveKey, builtinPlacements: builtinPlacements, defaultMotions: mounted ? defaultMotions : undefined, disabled: disabled, expandIcon: expandIcon, forceSubNavRender: forceSubNavRender, getPopupContainer: getInternalPopupContainer, itemIcon: itemIcon, mode: mergedMode, motion: mounted ? motion : undefined, openKeys: mergedOpenKeys, popupPrefixCls: popupPrefixCls, prefixCls: rootCls, rtl: isRtl, selectedKeys: mergedSelectKeys, subNavCloseDelay: subNavCloseDelay, subNavOpenDelay: subNavOpenDelay, triggerSubNavAction: triggerSubNavAction, onActive: onActive, onInactive: onInactive, onItemClick: onInternalClick, onOpenChange: onInternalOpenChange },
                 React.createElement(PathContext_1.PathUserContext.Provider, { value: pathUserContext }, container),
-                React.createElement("div", { style: { display: 'none' }, "aria-hidden": true },
+                React.createElement("div", { "aria-hidden": true, style: { display: 'none' } },
                     React.createElement(PathContext_1.PathRegisterContext.Provider, { value: registerPathContext }, childList))))));
 });

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

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

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

@@ -46,7 +46,7 @@ const motionUtil_1 = require("../../../components/Nav/utils/motionUtil");
 function InlineSubNavList({ children, id, keyPath, open }) {
     const config = (0, ConfigProvider_1.useConfig)();
     const fixedMode = 'inline';
-    const { prefixCls, forceSubNavRender, motion, defaultMotions, mode, } = React.useContext(NavContext_1.NavContext);
+    const { defaultMotions, forceSubNavRender, mode, motion, prefixCls, } = React.useContext(NavContext_1.NavContext);
     // Always use the latest mode check
     const sameModeRef = React.useRef(false);
     sameModeRef.current = mode === fixedMode;
@@ -78,7 +78,7 @@ function InlineSubNavList({ children, id, keyPath, open }) {
     if (destroy) {
         return null;
     }
-    return (React.createElement(NavContext_1.NavContextProvider, { mode: fixedMode, locked: !sameModeRef.current, prefixCls: prefixCls },
+    return (React.createElement(NavContext_1.NavContextProvider, { locked: !sameModeRef.current, mode: fixedMode, prefixCls: prefixCls },
         React.createElement(motion_1.default, { visible: mergedOpen, ...mergedMotion, forceRender: forceSubNavRender, leavedClassName: `${config.prefixCls}-hidden`, removeOnLeave: false }, ({ className: motionClassName, style: motionStyle }) => (React.createElement(SubNavList_1.SubNavList, { className: motionClassName, id: id, style: motionStyle }, children)))));
 }
 if (process.env.NODE_ENV !== 'production') {

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

@@ -11,7 +11,7 @@ export interface PopupTriggerProps {
     visible: boolean;
     onVisibleChange: (visible: boolean) => void;
 }
-export declare function PopupTrigger({ prefixCls, visible, children, popup, popupClassName, popupOffset, disabled, mode, onVisibleChange, }: PopupTriggerProps): React.JSX.Element;
+export declare function PopupTrigger({ children, disabled, mode, popup, popupClassName, popupOffset, prefixCls, visible, onVisibleChange, }: PopupTriggerProps): React.JSX.Element;
 export declare namespace PopupTrigger {
     var displayName: string;
 }

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

@@ -52,7 +52,7 @@ const popupPlacementMap = {
     'vertical-left': 'right-top',
     'vertical-right': 'left-top',
 };
-function PopupTrigger({ prefixCls, visible, children, popup, popupClassName, popupOffset, disabled, mode, onVisibleChange, }) {
+function PopupTrigger({ children, disabled, mode, popup, popupClassName, popupOffset, prefixCls, visible, onVisibleChange, }) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { builtinPlacements, defaultMotions, forceSubNavRender, getPopupContainer, motion, rtl, subNavCloseDelay = 300, subNavOpenDelay, triggerSubNavAction = 'hover', } = React.useContext(NavContext_1.NavContext);
     const [innerVisible, setInnerVisible] = React.useState(false);

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

@@ -43,10 +43,10 @@ const NavContext_1 = require("../../../components/Nav/context/NavContext");
 exports.SubNavList = React.forwardRef(({ children, className, ...restProps }, ref) => {
     const { mode, prefixCls, rtl } = React.useContext(NavContext_1.NavContext);
     return (React.createElement("ul", { className: (0, classnames_1.default)({
-            [prefixCls]: mode !== 'inline',
-            [`${prefixCls}-sub`]: mode === 'inline',
             [`${prefixCls}-sub-rtl`]: rtl && mode === 'inline',
-        }, className), ...restProps, "data-nav-list": "", ref: ref }, children));
+            [`${prefixCls}-sub`]: mode === 'inline',
+            [prefixCls]: mode !== 'inline',
+        }, className), ...restProps, ref: ref, "data-nav-list": "" }, children));
 });
 if (process.env.NODE_ENV !== 'production') {
     exports.SubNavList.displayName = 'Nav.SubNavList';

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

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { type SubNavType } from '../../../components/Nav/types';
 export interface SubNavProps extends Omit<SubNavType, 'children' | 'key' | 'label'> {
     children?: React.ReactNode;
-    title?: React.ReactNode;
-    /** @private Used for rest popup. Do not use in your prod */
-    internalPopupClose?: boolean;
     /** @private Internal filled key. Do not set it directly */
     eventKey?: string;
+    /** @private Used for rest popup. Do not use in your prod */
+    internalPopupClose?: boolean;
+    title?: React.ReactNode;
     /** @private Do not use. Private warning empty usage */
     warnKey?: boolean;
 }

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

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sub = Sub;
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
 const js_utils_1 = require("@broxus/js-utils");
 const warning_1 = __importDefault(require("@rc-component/util/lib/warning"));
 const classnames_1 = __importDefault(require("classnames"));
@@ -54,8 +55,7 @@ const PopupTrigger_1 = require("../../../components/Nav/Sub/PopupTrigger");
 const SubNavList_1 = require("../../../components/Nav/Sub/SubNavList");
 const nodeUtil_1 = require("../../../components/Nav/utils/nodeUtil");
 const warnUtil_1 = require("../../../components/Nav/utils/warnUtil");
-function InternalSubNav(props) {
-    const { children, className, disabled, eventKey, expandIcon, internalPopupClose, itemIcon, popupClassName, popupOffset, style, title, warnKey, onClick, onMouseEnter, onMouseLeave, onTitleClick, onTitleMouseEnter, onTitleMouseLeave, ...restProps } = props;
+function InternalSubNav({ children, className, disabled, eventKey, expandIcon, internalPopupClose, itemIcon, popupClassName, popupOffset, style, title, warnKey, onClick, onMouseEnter, onMouseLeave, onTitleClick, onTitleMouseEnter, onTitleMouseLeave, ...props }) {
     const domDataId = (0, IdContext_1.useNavId)(eventKey);
     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);
@@ -155,7 +155,7 @@ function InternalSubNav(props) {
     // =============================== Render ===============================
     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, style: { ...directionStyle }, onClick: onInternalTitleClick, onFocus: onInternalFocus, ...activeProps },
+    let titleNode = (React.createElement("a", { ref: elementRef, "aria-controls": popupId, "aria-disabled": disabled, "aria-expanded": open, "aria-haspopup": true, "data-nav-id": overflowDisabled && domDataId ? null : domDataId, role: disabled ? undefined : 'menuitem', style: { ...directionStyle }, tabIndex: disabled ? undefined : -1, title: typeof title === 'string' ? title : undefined, onClick: onInternalTitleClick, onFocus: onInternalFocus, ...activeProps },
         React.createElement(React.Fragment, { key: "children" },
             title,
             typeof mergedExpandIcon === 'function' ? mergedExpandIcon({
@@ -180,7 +180,7 @@ function InternalSubNav(props) {
             , { 
                 // Special handle of horizontal mode
                 mode: triggerMode === 'horizontal' ? 'vertical' : triggerMode },
-                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));
+                React.createElement(SubNavList_1.SubNavList, { ref: popupRef, className: `${popupPrefixCls}-nav`, id: popupId }, children))), popupClassName: popupClassName, popupOffset: popupOffset, prefixCls: popupPrefixCls, visible: !internalPopupClose && open && mode !== 'inline', onVisibleChange: onPopupVisibleChange }, titleNode));
     }
     // List node
     let listNode = (React.createElement(rc_overflow_1.default.Item, { className: (0, classnames_1.default)('uk-parent', className, {
@@ -188,9 +188,9 @@ function InternalSubNav(props) {
             'uk-disabled': disabled,
             'uk-hover': mergedActive,
             'uk-open': open,
-        }), role: "none", ...restProps, component: "li", style: style, onMouseEnter: onInternalMouseEnter, onMouseLeave: onInternalMouseLeave },
+        }), 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))));
+        !overflowDisabled && (React.createElement(InlineSubNavList_1.InlineSubNavList, { id: popupId, keyPath: connectedPath, open: open }, children))));
     if (_internalRenderSubMenuItem) {
         listNode = _internalRenderSubMenuItem(listNode, props, {
             active: !!mergedActive,

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

@@ -21,8 +21,8 @@ export interface NavContextProps {
     prefixCls: string;
     rtl?: boolean;
     selectedKeys: string[];
-    subNavOpenDelay: number;
     subNavCloseDelay: number;
+    subNavOpenDelay: number;
     triggerSubNavAction?: TriggerSubNavAction;
     onActive: (key: string) => void;
     onInactive: (key: string) => void;

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

@@ -50,10 +50,10 @@ exports.NavContext = React.createContext({
 function mergeProps(origin, target) {
     const clone = { ...origin };
     Object.keys(target).forEach(key => {
-        // @ts-ignore
+        // @ts-ignore bla bla ts
         const value = target[key];
         if (value !== undefined) {
-            // @ts-ignore
+            // @ts-ignore bla bla ts
             clone[key] = value;
         }
     });

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

@@ -43,7 +43,7 @@ const raf_1 = __importDefault(require("@rc-component/util/lib/raf"));
 const React = __importStar(require("react"));
 const IdContext_1 = require("../../../components/Nav/context/IdContext");
 // destruct to reduce minify size
-const { LEFT, RIGHT, UP, DOWN, ENTER, ESC } = KeyCode_1.default;
+const { DOWN, ENTER, ESC, LEFT, RIGHT, UP } = KeyCode_1.default;
 const ArrowKeys = [UP, DOWN, LEFT, RIGHT];
 function getOffset(mode, isRootLevel, isRtl, which) {
     const prev = 'prev';
@@ -179,7 +179,7 @@ function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, get
         const { which } = event;
         if ([...ArrowKeys, ENTER, ESC].includes(which)) {
             // Convert key to elements
-            let elements = new Set(), key2element = new Map(), element2key = new Map();
+            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();
@@ -250,9 +250,9 @@ function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, get
                 }
                 // Get next focus element
                 const targetElement = getNextFocusElement(parentQueryContainer, 
-                // @ts-ignore
+                // @ts-ignore bla bla ts
                 elements, 
-                // @ts-ignore
+                // @ts-ignore bla bla ts
                 focusMenuElement, offsetObj.offset);
                 if (targetElement == null) {
                     return;

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

@@ -37,7 +37,7 @@ exports.useDirectionStyle = useDirectionStyle;
 const React = __importStar(require("react"));
 const NavContext_1 = require("../../../components/Nav/context/NavContext");
 function useDirectionStyle(level) {
-    const { mode, rtl, inlineIndent } = React.useContext(NavContext_1.NavContext);
+    const { inlineIndent, mode, rtl } = React.useContext(NavContext_1.NavContext);
     if (mode !== 'inline') {
         return null;
     }

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

@@ -1,12 +1,12 @@
 export declare const OVERFLOW_KEY = "rc-menu-more";
 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[];
     getKeys: () => string[];
     getSubPathKeys: (key: string) => Set<string>;
+    isSubPathKey: (pathKeys: string[], eventKey: string) => boolean;
+    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/useMemoCallback.js

@@ -42,7 +42,6 @@ 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;
 }

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

@@ -1,47 +1,47 @@
 import { type ActionType } from '@rc-component/trigger';
 import type * as React from 'react';
-export type NavRef = {
+export interface NavRef {
     /**
      * Focus active child if any, or the first child which is not disabled will be focused.
      * @param {FocusOptions} [options]
      */
     focus: (options?: FocusOptions) => void;
     list: HTMLUListElement | null;
-};
+}
 interface ItemSharedProps {
     className?: string;
     style?: React.CSSProperties;
 }
 export interface SubNavType extends ItemSharedProps {
-    label?: React.ReactNode;
     children: ItemType[];
     disabled?: boolean;
-    key: string;
-    rootClassName?: string;
-    itemIcon?: RenderIconType;
     expandIcon?: RenderIconType;
-    onMouseEnter?: NavHoverEventHandler;
-    onMouseLeave?: NavHoverEventHandler;
+    itemIcon?: RenderIconType;
+    key: string;
+    label?: React.ReactNode;
     popupClassName?: string;
     popupOffset?: number[];
+    rootClassName?: string;
     onClick?: NavClickEventHandler;
+    onMouseEnter?: NavHoverEventHandler;
+    onMouseLeave?: NavHoverEventHandler;
     onTitleClick?: (info: NavTitleInfo) => void;
     onTitleMouseEnter?: NavHoverEventHandler;
     onTitleMouseLeave?: NavHoverEventHandler;
 }
 export interface NavItemType extends ItemSharedProps {
-    label?: React.ReactNode;
     disabled?: boolean;
     itemIcon?: RenderIconType;
     key: React.Key;
+    label?: React.ReactNode;
+    onClick?: NavClickEventHandler;
     onMouseEnter?: NavHoverEventHandler;
     onMouseLeave?: NavHoverEventHandler;
-    onClick?: NavClickEventHandler;
 }
 export interface NavItemGroupType extends ItemSharedProps {
-    type: 'group';
-    label?: React.ReactNode;
     children?: ItemType[];
+    label?: React.ReactNode;
+    type: 'group';
 }
 export interface NavDividerType extends ItemSharedProps {
     type: 'divider';

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

@@ -20,7 +20,7 @@ function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoin
     const placements = Object.keys(builtinPlacements);
     for (let i = 0; i < placements.length; i += 1) {
         const placement = placements[i];
-        // @ts-ignore
+        // @ts-ignore bla bla ts
         if (isPointsEq(builtinPlacements[placement].points, points, isAlignPoint)) {
             return `${prefixCls}-${placement}`;
         }

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

@@ -69,7 +69,7 @@ function convertItemsToNodes(list) {
     return (list || [])
         .map((opt, index) => {
         if (opt && typeof opt === 'object') {
-            const { label, children, key, type, ...restProps } = opt;
+            const { children, key, label, type, ...restProps } = opt;
             const mergedKey = key ?? `tmp-${index}`;
             // MenuItemGroup & SubMenuItem
             if (children || type === 'group') {

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

@@ -3,9 +3,9 @@ import { type PolymorphicProps } from '../../components/Component';
 export interface NavbarCenterOwnProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
 }
-export type NavbarCenterProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarCenterOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarCenterOwnProps>;
+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>(props: NavbarCenterProps<E>): React.JSX.Element;
+export declare function Center<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<NavbarCenterProps<E>>): React.JSX.Element;
 export declare namespace Center {
     var displayName: string;
 }

package/dist/cjs/components/Navbar/Center.js

@@ -42,11 +42,11 @@ const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'div';
-function Center(props) {
+function Center({ className, component = defaultElement, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar-center'), [config, prefixCls]);
-    return React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Center.displayName = 'Navbar.Center';

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

@@ -4,9 +4,9 @@ export interface NavbarContainerOwnProps extends React.HTMLAttributes<HTMLElemen
     prefixCls?: string;
     transparent?: boolean;
 }
-export type NavbarContainerProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarContainerOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarContainerOwnProps>;
+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>(props: NavbarContainerProps<E>): React.JSX.Element;
+export declare function Container<E extends React.ElementType = typeof defaultElement>({ className, component, transparent, ...props }: React.PropsWithChildren<NavbarContainerProps<E>>): React.JSX.Element;
 export declare namespace Container {
     var displayName: string;
 }

package/dist/cjs/components/Navbar/Container.js

@@ -42,13 +42,13 @@ const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'div';
-function Container(props) {
+function Container({ className, component = defaultElement, transparent, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { className, prefixCls = config.prefixCls, transparent, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar'), [config, prefixCls]);
     return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(`${rootCls}-container`, {
             [`${rootCls}-transparent`]: transparent,
-        }, className), component: defaultElement, ...restProps }));
+        }, className), component: component, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Container.displayName = 'Navbar.Container';

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

@@ -4,9 +4,9 @@ export interface NavbarItemOwnProps extends React.HTMLAttributes<HTMLElement> {
     align?: 'left' | 'right' | 'center';
     prefixCls?: string;
 }
-export type NavbarItemProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarItemOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarItemOwnProps>;
+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>(props: NavbarItemProps<E>): React.JSX.Element;
+export declare function Item<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<NavbarItemProps<E>>): React.JSX.Element;
 export declare namespace Item {
     var displayName: string;
 }

package/dist/cjs/components/Navbar/Item.js

@@ -42,11 +42,11 @@ const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'div';
-function Item(props) {
+function Item({ className, component = defaultElement, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar-item'), [config, prefixCls]);
-    return React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Navbar.Item';

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

@@ -3,9 +3,9 @@ import { type PolymorphicProps } from '../../components/Component';
 export interface NavbarLeftOwnProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
 }
-export type NavbarLeftProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarLeftOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarLeftOwnProps>;
+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>(props: NavbarLeftProps<E>): React.JSX.Element;
+export declare function Left<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<NavbarLeftProps<E>>): React.JSX.Element;
 export declare namespace Left {
     var displayName: string;
 }

package/dist/cjs/components/Navbar/Left.js

@@ -42,11 +42,11 @@ const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'div';
-function Left(props) {
+function Left({ className, component = defaultElement, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar-left'), [config, prefixCls]);
-    return React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Left.displayName = 'Navbar.Left';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type NavProps } from '../../components/Nav';
-export declare function Nav(props: NavProps): React.JSX.Element;
+export declare function Nav({ className, ...props }: NavProps): React.JSX.Element;
 export declare namespace Nav {
     var displayName: string;
 }

package/dist/cjs/components/Navbar/Nav.js

@@ -41,11 +41,11 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const Nav_1 = require("../../components/Nav");
-function Nav(props) {
+function Nav({ className, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar'), [config, prefixCls]);
-    return (React.createElement(Nav_1.Nav, { className: (0, classnames_1.default)(`${rootCls}-nav`, className), popupPrefixCls: `${rootCls}-dropdown`, mode: "horizontal", ...restProps }));
+    return (React.createElement(Nav_1.Nav, { className: (0, classnames_1.default)(`${rootCls}-nav`, className), mode: "horizontal", popupPrefixCls: `${rootCls}-dropdown`, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Nav.displayName = 'Navbar.Nav';

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

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