@broxus/react-uikit 0.21.0 → 0.23.0

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

@@ -4,4 +4,4 @@ export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
     prefixCls?: string;
     type?: 'success' | 'warning' | 'danger';
 }
-export declare function Label(props: LabelProps): React.JSX.Element;
+export declare function Label({ className, large, type, ...props }: LabelProps): React.ReactElement;

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

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export function Label(props) {
+export function Label({ className, large, type, ...props }) {
     const config = useConfig();
-    const { className, large, prefixCls = config.prefixCls, type, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'label'), [config, prefixCls]);
     return (React.createElement("span", { className: classNames(rootCls, {
             [`${rootCls}-${type}`]: type !== undefined,

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

@@ -4,5 +4,5 @@ export interface LinkOwnProps extends React.AnchorHTMLAttributes<HTMLAnchorEleme
     prefixCls?: string;
     type?: 'heading' | 'muted' | 'reset' | 'text' | 'toggle';
 }
-export type LinkProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<LinkOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, LinkOwnProps>;
-export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
+export type LinkProps<E extends React.ElementType = React.ElementType> = LinkOwnProps & PolymorphicProps<E> & PolymorphicProps<E, LinkOwnProps>;
+export declare const Link: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<LinkProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>>, "ref"> & React.RefAttributes<unknown>>;

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

@@ -3,13 +3,13 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'a';
-export const Link = React.forwardRef((props, ref) => {
+export const Link = React.forwardRef(({ children, className, component = defaultElement, type, ...props }, ref) => {
     const config = useConfig();
-    const { children, className, prefixCls = config.prefixCls, type, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'link'), [config, prefixCls]);
     return (React.createElement(Component, { ref: ref, className: classNames({
             [`${rootCls}-${type}`]: type !== undefined,
-        }, className), component: defaultElement, ...restProps }, children));
+        }, className), component: component, ...restProps }, children));
 });
 if (process.env.NODE_ENV !== 'production') {
     Link.displayName = 'Link';

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

@@ -1,7 +1,5 @@
 import * as React from 'react';
-type Props = React.LiHTMLAttributes<HTMLLIElement>;
-export declare function Item(props: Props): React.JSX.Element;
+export declare function Item(props: React.LiHTMLAttributes<HTMLLIElement>): React.ReactElement;
 export declare namespace Item {
     var displayName: string;
 }
-export {};

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

@@ -5,4 +5,4 @@ export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
     size?: 'large' | 'collapse';
     type?: 'bullet' | 'disc' | 'divider' | 'striped' | 'circle' | 'square' | 'decimal' | 'hyphen';
 }
-export declare function List(props: ListProps): React.JSX.Element;
+export declare function List({ className, color, size, type, ...props }: ListProps): React.ReactElement;

package/dist/esm/components/List/List.js

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export function List(props) {
+export function List({ className, color, size, type, ...props }) {
     const config = useConfig();
-    const { className, color, prefixCls = config.prefixCls, size, type, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'list'), [config, prefixCls]);
     return (React.createElement("ul", { className: classNames(rootCls, {
             [`${rootCls}-${color}`]: color !== undefined,

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

@@ -8,4 +8,4 @@ export interface ModalProps extends Omit<DialogProps, 'afterClose'> {
     getContainer?: string | HTMLElement | (() => HTMLElement) | false;
     onClosed?: VoidFunction;
 }
-export declare function Modal(props: ModalProps): React.JSX.Element;
+export declare function Modal({ centered, children, className, closable, closeIcon, focusTriggerAfterClose, full, visible, onClose, onClosed, ...props }: ModalProps): React.ReactElement;

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

@@ -18,9 +18,9 @@ const getClickPosition = (event) => {
 if (canUseDocElement()) {
     document.documentElement.addEventListener('click', getClickPosition, true);
 }
-export function Modal(props) {
+export function Modal({ centered, children, className, closable = true, closeIcon, focusTriggerAfterClose = true, full, visible, onClose, onClosed, ...props }) {
     const config = useConfig();
-    const { centered, children, className, closable = true, closeIcon, focusTriggerAfterClose = true, full, prefixCls = config.prefixCls, visible, onClose, onClosed, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'modal'), [config, prefixCls]);
     const defaultMaskTransitionName = React.useMemo(() => getMotionName(prefixCls || config.prefixCls, 'fade'), [config.prefixCls, prefixCls]);
     const defaultTransitionName = React.useMemo(() => getMotionName(prefixCls || config.prefixCls, 'zoom'), [config.prefixCls, prefixCls]);

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type NavDividerType } from '../../components/Nav/types';
 export type DividerProps = Omit<NavDividerType, 'type'>;
-export declare function Divider(props: DividerProps): React.JSX.Element | null;
+export declare function Divider({ className, style }: DividerProps): React.ReactElement | null;
 export declare namespace Divider {
     var displayName: string;
 }

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

@@ -1,15 +1,10 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import { NavContext } from '../../components/Nav/context/NavContext';
-import { useMeasure } from '../../components/Nav/context/PathContext';
-export function Divider(props) {
-    const { className, style } = props;
+import { NavContext, useMeasure } from '../../components/Nav/context';
+export function Divider({ className, style }) {
     const { prefixCls } = React.useContext(NavContext);
     const measure = useMeasure();
-    if (measure) {
-        return null;
-    }
-    return React.createElement("li", { className: classNames(`${prefixCls}-divider`, className), style: style });
+    return measure ? null : (React.createElement("li", { className: classNames(`${prefixCls}-divider`, className), role: "separator", style: style }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Divider.displayName = 'Nav.Divider';

package/dist/esm/components/Nav/Group/InternalNavGroup.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { type NavItemGroupType } from '../../../components/Nav/types';
+export interface NavGroupProps extends Omit<NavItemGroupType, 'children' | 'type' | 'label'> {
+    eventKey?: string;
+    title?: React.ReactNode;
+    warnKey?: boolean;
+}
+export declare const InternalNavGroup: React.ForwardRefExoticComponent<NavGroupProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLLIElement>>;

package/dist/esm/components/Nav/Group/InternalNavGroup.js

@@ -0,0 +1,16 @@
+import { stopEventPropagate } from '@broxus/js-utils';
+import { omit } from '@rc-component/util';
+import classNames from 'classnames';
+import * as React from 'react';
+import { NavContext } from '../../../components/Nav/context';
+export const InternalNavGroup = React.forwardRef(({ children, className, title, ...props }, ref) => {
+    const { prefixCls } = React.useContext(NavContext);
+    const groupRootCls = React.useMemo(() => `${prefixCls}-group`, [prefixCls]);
+    const subRootCls = React.useMemo(() => `${prefixCls}-sub`, [prefixCls]);
+    return (React.createElement("li", { ref: ref, className: classNames(groupRootCls, className), role: "presentation", ...omit(props, ['eventKey', 'warnKey']), onClick: stopEventPropagate },
+        React.createElement("div", { className: `${groupRootCls}-header`, "data-uk-tooltip": "", role: "presentation" }, title),
+        React.createElement("ul", { className: subRootCls, role: "group" }, children)));
+});
+if (process.env.NODE_ENV !== 'production') {
+    InternalNavGroup.displayName = 'Nav.InternalNavGroup';
+}

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

@@ -1,3 +1,5 @@
 import * as React from 'react';
-import { type NavItemGroupProps } from '../../../components/Nav/Group/InternalNavItemGroup';
-export declare const Group: React.MemoExoticComponent<({ children, eventKey, ...restProps }: NavItemGroupProps) => React.JSX.Element>;
+import { type NavGroupProps } from '../../../components/Nav/Group/InternalNavGroup';
+export declare const Group: React.ForwardRefExoticComponent<NavGroupProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLLIElement>>;

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

@@ -1,16 +1,16 @@
-import omit from '@rc-component/util/lib/omit';
+import { omit } from '@rc-component/util';
 import * as React from 'react';
-import { useFullPath, useMeasure } from '../../../components/Nav/context/PathContext';
-import { InternalNavItemGroup } from '../../../components/Nav/Group/InternalNavItemGroup';
-import { parseChildren } from '../../../components/Nav/utils/nodeUtil';
-export const Group = React.memo(({ children, eventKey, ...restProps }) => {
+import { useFullPath, useMeasure } from '../../../components/Nav/context';
+import { InternalNavGroup } from '../../../components/Nav/Group/InternalNavGroup';
+import { parseChildren } from '../../../components/Nav/utils';
+export const Group = React.forwardRef(({ children, eventKey, ...props }, ref) => {
     const connectedKeyPath = useFullPath(eventKey);
     const measure = useMeasure();
     const childList = parseChildren(children, connectedKeyPath);
     if (measure) {
         return childList;
     }
-    return React.createElement(InternalNavItemGroup, { ...omit(restProps, ['warnKey']) }, childList);
+    return (React.createElement(InternalNavGroup, { ref: ref, ...omit(props, ['warnKey']) }, childList));
 });
 if (process.env.NODE_ENV !== 'production') {
     Group.displayName = 'Nav.Group';

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

@@ -2,13 +2,11 @@ import * as React from 'react';
 export interface HeaderProps {
     children: React.ReactNode;
     className?: string;
-    /** @private Internal filled key. Do not set it directly */
     eventKey?: string;
     style?: React.CSSProperties;
-    /** @private Do not use. Private warning empty usage */
     warnKey?: boolean;
 }
-export declare function Header(props: HeaderProps): React.JSX.Element;
+export declare function Header({ className, ...props }: HeaderProps): React.ReactElement;
 export declare namespace Header {
     var displayName: string;
 }

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

@@ -1,11 +1,10 @@
-import omit from '@rc-component/util/lib/omit';
+import { omit } from '@rc-component/util';
 import classNames from 'classnames';
 import * as React from 'react';
-import { NavContext } from '../../components/Nav/context/NavContext';
-export function Header(props) {
-    const { className, ...restProps } = props;
+import { NavContext } from '../../components/Nav/context';
+export function Header({ className, ...props }) {
     const { prefixCls } = React.useContext(NavContext);
-    return React.createElement("li", { className: classNames(`${prefixCls}-header`, className), ...omit(restProps, ['eventKey', 'warnKey']) });
+    return (React.createElement("li", { className: classNames(`${prefixCls}-header`, className), role: "presentation", ...omit(props, ['eventKey', 'warnKey']) }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Header.displayName = 'Nav.Header';

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type RenderIconInfo, type RenderIconType } from '../../../components/Nav/types';
+export interface IconProps {
+    icon?: RenderIconType;
+    props: RenderIconInfo;
+}
+export default function Icon({ children, icon, props }: React.PropsWithChildren<IconProps>): React.ReactNode;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export default function Icon({ children, icon, props }) {
+    let iconNode;
+    if (icon === null || icon === false) {
+        return null;
+    }
+    if (typeof icon === 'function') {
+        iconNode = React.createElement(icon, { ...props });
+    }
+    else if (typeof icon !== 'boolean') {
+        iconNode = icon;
+    }
+    return iconNode || children || null;
+}

package/dist/esm/components/Nav/Item/InternalNavItem.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { type NavItemType } from '../../../components/Nav/types';
 export interface NavItemProps extends Omit<NavItemType, 'label' | 'key'>, Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'> {
-    children?: React.ReactNode;
     /**
      * Internal filled key. Do not set it directly
      * @private
@@ -13,7 +12,4 @@ export interface NavItemProps extends Omit<NavItemType, 'label' | 'key'>, Omit<R
      */
     warnKey?: boolean;
 }
-export declare function InternalNavItem({ children, className, disabled, eventKey, itemIcon, role, style, warnKey, onClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, ...restProps }: NavItemProps): React.JSX.Element;
-export declare namespace InternalNavItem {
-    var displayName: string;
-}
+export declare const InternalNavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLElement>>;

package/dist/esm/components/Nav/Item/InternalNavItem.js

@@ -1,24 +1,21 @@
-import KeyCode from '@rc-component/util/lib/KeyCode';
-import warning from '@rc-component/util/lib/warning';
+import { omit, useComposeRef, warning } from '@rc-component/util';
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
-import { useNavId } from '../../../components/Nav/context/IdContext';
-import { NavContext } from '../../../components/Nav/context/NavContext';
-import { useFullPath } from '../../../components/Nav/context/PathContext';
-import { PrivateContext } from '../../../components/Nav/context/PrivateContext';
-import { useActive } from '../../../components/Nav/hooks/useActive';
-import { useDirectionStyle } from '../../../components/Nav/hooks/useDirectionStyle';
+import { NavContext, useFullPath, useNavId } from '../../../components/Nav/context';
+import { useActive, useDirectionStyle } from '../../../components/Nav/hooks';
+import Icon from '../../../components/Nav/Icon';
 import { LegacyNavItem } from '../../../components/Nav/Item/LegacyNavItem';
-import { warnItemProp } from '../../../components/Nav/utils/warnUtil';
-export function InternalNavItem({ children, className, disabled, eventKey, itemIcon, role, style, warnKey, onClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, ...restProps }) {
+import { warnItemProp } from '../../../components/Nav/utils';
+import { KeyCode } from '../../../constants';
+export const InternalNavItem = React.forwardRef(({ children, className, disabled, eventKey, itemIcon, role, style, warnKey, onClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, ...props }, ref) => {
     const config = useConfig();
     const domDataId = useNavId(eventKey);
     const { disabled: contextDisabled = disabled, itemIcon: contextItemIcon, overflowDisabled, selectedKeys, onActive, onItemClick, } = React.useContext(NavContext);
-    const { _internalRenderMenuItem } = React.useContext(PrivateContext);
     const legacyNavItemRef = React.useRef(null);
     const elementRef = React.useRef(null);
     const mergedDisabled = contextDisabled || disabled;
+    const mergedEleRef = useComposeRef(ref, elementRef);
     const connectedKeys = useFullPath(eventKey);
     // ================================ Warn ================================
     if (process.env.NODE_ENV !== 'production' && warnKey) {
@@ -32,6 +29,8 @@ export function InternalNavItem({ children, className, disabled, eventKey, itemI
         // Note: For legacy code is reversed which not like other antd component
         keyPath: [...connectedKeys].reverse(),
     });
+    // ============================= Icon =============================
+    const mergedItemIcon = itemIcon || contextItemIcon;
     // ============================ Active ============================
     const { active, ...activeProps } = useActive(eventKey, disabled, onMouseEnter, onMouseLeave);
     // ============================ Select ============================
@@ -49,7 +48,7 @@ export function InternalNavItem({ children, className, disabled, eventKey, itemI
     };
     const onInternalKeyDown = event => {
         onKeyDown?.(event);
-        if (event.which === KeyCode.ENTER) {
+        if (event.code === KeyCode.Enter) {
             const info = getEventInfo(event);
             // Legacy. Key will also trigger click event
             onClick?.(warnItemProp(info));
@@ -70,34 +69,14 @@ export function InternalNavItem({ children, className, disabled, eventKey, itemI
     if (role === 'option') {
         optionRoleProps['aria-selected'] = selected || false;
     }
-    let renderNode = (React.createElement(LegacyNavItem, { ref: legacyNavItemRef, "aria-disabled": disabled, className: classNames({
+    return (React.createElement(LegacyNavItem, { ref: legacyNavItemRef, "data-nav-id": overflowDisabled && domDataId ? null : domDataId, elementRef: mergedEleRef, role: (role === null || disabled) ? 'none' : role || 'menuitem', tabIndex: disabled ? null : -1, ...omit(props, ['extra']), ...activeProps, ...optionRoleProps, "aria-disabled": disabled, className: classNames(className, {
             [`${config.prefixCls}-active`]: selected,
             [`${config.prefixCls}-disabled`]: disabled,
             [`${config.prefixCls}-hover`]: active,
-        }, className), component: "li", "data-nav-id": overflowDisabled && domDataId ? null : domDataId, elementRef: elementRef, role: role === null ? 'none' : role || 'menuitem', style: {
-            ...directionStyle,
-            ...style,
-        }, tabIndex: disabled ? null : -1, ...optionRoleProps, ...restProps, ...activeProps, onClick: onInternalClick, onFocus: onInternalFocus, onKeyDown: onInternalKeyDown },
-        itemIcon || contextItemIcon,
-        children));
-    if (_internalRenderMenuItem) {
-        renderNode = _internalRenderMenuItem(renderNode, {
-            children,
-            className,
-            disabled,
-            itemIcon,
-            role,
-            style,
-            onClick,
-            onFocus,
-            onKeyDown,
-            onMouseEnter,
-            onMouseLeave,
-            ...restProps,
-        }, { selected });
-    }
-    return renderNode;
-}
+        }), component: "li", style: { ...directionStyle, ...style }, onClick: onInternalClick, onFocus: onInternalFocus, onKeyDown: onInternalKeyDown },
+        children,
+        React.createElement(Icon, { icon: mergedItemIcon, props: { ...props, isSelected: selected } })));
+});
 if (process.env.NODE_ENV !== 'production') {
     InternalNavItem.displayName = 'Nav.InternalNavItem';
 }

package/dist/esm/components/Nav/Item/LegacyNavItem.js

@@ -1,12 +1,18 @@
-import omit from '@rc-component/util/lib/omit';
-import warning from '@rc-component/util/lib/warning';
+import { omit, warning } from '@rc-component/util';
 import Overflow from 'rc-overflow';
 import * as React from 'react';
 export class LegacyNavItem extends React.Component {
     render() {
-        const { attribute, elementRef, title, ...restProps } = this.props;
-        const passedProps = omit(restProps, ['eventKey', 'warnKey']);
+        const { attribute, elementRef, ...props } = this.props;
+        const passedProps = omit(props, [
+            'eventKey',
+            'popupClassName',
+            'popupOffset',
+            'title',
+            'warnKey',
+            'onTitleClick',
+        ]);
         warning(!attribute, '`attribute` of Nav.Item is deprecated. Please pass attribute directly.');
-        return (React.createElement(Overflow.Item, { ...attribute, title: typeof title === 'string' ? title : undefined, ...passedProps, ref: elementRef }));
+        return React.createElement(Overflow.Item, { ref: elementRef, ...attribute, ...passedProps });
     }
 }

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

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { type NavItemProps } from '../../../components/Nav/Item/InternalNavItem';
-export declare const Item: React.MemoExoticComponent<({ eventKey, ...restProps }: NavItemProps) => React.JSX.Element | null>;
+export declare const Item: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLElement>>;

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

@@ -1,12 +1,12 @@
 import { noop } from '@broxus/js-utils';
 import * as React from 'react';
-import { useFullPath, useMeasure } from '../../../components/Nav/context/PathContext';
+import { useFullPath, useMeasure } from '../../../components/Nav/context';
 import { InternalNavItem } from '../../../components/Nav/Item/InternalNavItem';
-export const Item = React.memo(({ eventKey, ...restProps }) => {
+export const Item = React.forwardRef(({ eventKey, ...props }, ref) => {
     const measure = useMeasure();
     const connectedKeyPath = useFullPath(eventKey);
     React.useEffect(() => {
-        if (eventKey !== undefined) {
+        if (eventKey) {
             measure?.registerPath(eventKey, connectedKeyPath);
             return () => {
                 measure?.unregisterPath(eventKey, connectedKeyPath);
@@ -14,10 +14,7 @@ export const Item = React.memo(({ eventKey, ...restProps }) => {
         }
         return noop;
     }, [connectedKeyPath, eventKey, measure]);
-    if (measure) {
-        return null;
-    }
-    return React.createElement(InternalNavItem, { eventKey: eventKey, ...restProps });
+    return measure ? null : React.createElement(InternalNavItem, { ref: ref, eventKey: eventKey, ...props });
 });
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Nav.Item';

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

@@ -1,28 +1,12 @@
-import { type CSSMotionProps } from 'rc-motion';
+import { type CSSMotionProps } from '@rc-component/motion';
 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 SemanticName } from '../../components/Nav/Sub/InternalSubNav';
+import { type BuiltinPlacements, type ItemType, type NavClickEventHandler, type NavMode, type NavModifier, type NavPopupRender, 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;
+    classNames?: Partial<Record<SemanticName, string>>;
     defaultActiveFirst?: boolean;
     defaultMotions?: Partial<{
         [key in NavMode | 'other']: CSSMotionProps;
@@ -31,7 +15,6 @@ export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, '
     defaultSelectedKeys?: string[];
     direction?: Direction;
     disabled?: boolean;
-    disabledOverflow?: boolean;
     expandIcon?: RenderIconType;
     forceSubNavRender?: boolean;
     getPopupContainer?: (node: HTMLElement) => HTMLElement;
@@ -43,12 +26,16 @@ export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, '
     motion?: CSSMotionProps;
     multiple?: boolean;
     openKeys?: string[];
+    overflowDisabled?: boolean;
     overflowedIndicator?: React.ReactNode;
     overflowedIndicatorPopupClassName?: string;
     popupPrefixCls?: string;
+    popupRender?: NavPopupRender;
     prefixCls?: string;
+    rootClassName?: string;
     selectable?: boolean;
     selectedKeys?: string[];
+    styles?: Partial<Record<SemanticName, React.CSSProperties>>;
     subNavCloseDelay?: number;
     subNavOpenDelay?: number;
     triggerSubNavAction?: TriggerSubNavAction;