@broxus/react-uikit 0.22.0 → 0.23.0

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

@@ -3,7 +3,7 @@ export interface DotnavProps extends React.HTMLAttributes<HTMLUListElement> {
     prefixCls?: string;
     vertical?: boolean;
 }
-export declare function Dotnav({ className, vertical, ...props }: DotnavProps): React.JSX.Element;
+export declare function Dotnav({ className, vertical, ...props }: DotnavProps): React.ReactElement;
 export declare namespace Dotnav {
     var displayName: string;
 }

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface DotnavItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'children'> {
     isActive?: boolean;
 }
-export declare function Item({ className, isActive, onClick, ...props }: DotnavItemProps): React.JSX.Element;
+export declare function Item({ className, isActive, onClick, ...props }: DotnavItemProps): React.ReactElement;
 export declare namespace Item {
     var displayName: string;
 }

package/dist/cjs/components/Drawer/index.d.ts

@@ -17,6 +17,6 @@ export interface DrawerProps extends RcDrawerProps {
     defaultOpen?: boolean;
     direction?: Direction;
     size?: DrawerSize;
-    trigger?: (ref: DrawerRef) => React.JSX.Element;
+    trigger?: (ref: DrawerRef) => React.ReactElement;
 }
 export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<DrawerRef>>;

package/dist/cjs/components/Drop/index.d.ts

@@ -1,6 +1,5 @@
 import { type CSSMotionProps } from '@rc-component/motion';
-import { type BuildInPlacements, type TriggerProps } from '@rc-component/trigger';
-import { type AlignType } from '@rc-component/trigger/lib/interface';
+import { type AlignType, type BuildInPlacements, type TriggerProps } from '@rc-component/trigger';
 import * as React from 'react';
 export type DropPlacement = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';
 export interface DropProps extends Pick<TriggerProps, 'alignPoint' | 'action' | 'autoDestroy' | 'blurDelay' | 'children' | 'focusDelay' | 'getPopupContainer' | 'hideAction' | 'mask' | 'maskClosable' | 'maskMotion' | 'mouseEnterDelay' | 'mouseLeaveDelay' | 'prefixCls' | 'showAction' | 'stretch' | 'zIndex'> {

package/dist/cjs/components/Drop/index.js

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drop = void 0;
 const trigger_1 = __importDefault(require("@rc-component/trigger"));
+const util_1 = require("@rc-component/util");
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
@@ -99,7 +100,7 @@ exports.Drop = React.forwardRef(({ action = ['hover'], align, alignPoint, arrow
     if (!triggerHideAction && action.indexOf('contextMenu') > -1) {
         triggerHideAction = ['click'];
     }
-    return (React.createElement(trigger_1.default, { ref: triggerRef, action: action, autoDestroy: autoDestroy, builtinPlacements: builtinPlacements, getPopupContainer: getPopupContainer, hideAction: triggerHideAction || [], maskMotion: (0, utils_1.mergeDropMaskMotion)(prefixCls || config.prefixCls, maskMotion), mouseLeaveDelay: 0.2, popup: getDropElementOrLambda(), popupAlign: align, popupClassName: (0, classnames_1.default)(overlayClassName, {
+    return (React.createElement(trigger_1.default, { ref: triggerRef, action: action, autoDestroy: autoDestroy, builtinPlacements: (0, util_1.merge)(placements_1.default, builtinPlacements), getPopupContainer: getPopupContainer, hideAction: triggerHideAction || [], maskMotion: (0, utils_1.mergeDropMaskMotion)(prefixCls || config.prefixCls, maskMotion), mouseLeaveDelay: 0.2, popup: getDropElementOrLambda(), popupAlign: align, popupClassName: (0, classnames_1.default)(overlayClassName, {
             [`${rootCls}-show-arrow`]: arrow,
             [openClassName ?? '']: mergedVisible,
         }), popupMotion: {

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

@@ -20,5 +20,5 @@ export interface FlexOwnProps extends FlexBreakpoint, FlexBreakpointsConfig {
 }
 export type FlexProps<E extends React.ElementType = React.ElementType> = FlexOwnProps & PolymorphicProps<E> & PolymorphicProps<E, FlexOwnProps>;
 declare const defaultElement = "div";
-export declare function Flex<E extends React.ElementType = typeof defaultElement>({ alignContent, alignItems, className, component, flexDirection, flexWrap, inline, justifyContent, ...props }: React.PropsWithChildren<FlexProps<E>>): React.JSX.Element;
+export declare function Flex<E extends React.ElementType = typeof defaultElement>({ alignContent, alignItems, className, component, flexDirection, flexWrap, inline, justifyContent, ...props }: React.PropsWithChildren<FlexProps<E>>): React.ReactElement;
 export {};

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

@@ -10,5 +10,5 @@ export interface ItemOwnItem {
 }
 export type ItemProps<E extends React.ElementType = React.ElementType> = ItemOwnItem & PolymorphicProps<E> & PolymorphicProps<E, ItemOwnItem>;
 declare const defaultElement = "div";
-export declare function Item<E extends React.ElementType = typeof defaultElement>({ className, component, itemDimensions, order, ...props }: React.PropsWithChildren<ItemProps<E>>): React.JSX.Element;
+export declare function Item<E extends React.ElementType = typeof defaultElement>({ className, component, itemDimensions, order, ...props }: React.PropsWithChildren<ItemProps<E>>): React.ReactElement;
 export {};

package/dist/cjs/components/Flex/index.d.ts

@@ -1,7 +1,7 @@
 import type * as React from 'react';
 import { type FlexAlignContent, type FlexAlignItems, type FlexDirection, type FlexJustifyContent, type FlexProps, type FlexWrap } from '../../components/Flex/Flex';
 import { type ItemProps as FlexItemProps, Item } from '../../components/Flex/Item';
-export type { FlexAlignContent, FlexAlignItems, FlexDirection, FlexJustifyContent, FlexItemProps, FlexProps, FlexWrap };
+export type { FlexAlignContent, FlexAlignItems, FlexDirection, FlexItemProps, FlexJustifyContent, FlexProps, FlexWrap };
 export interface Flex extends React.FunctionComponent<FlexProps> {
     Item: typeof Item;
 }

package/dist/cjs/components/Form/Controls.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface ControlsProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
 }
-export declare function Controls({ className, ...props }: ControlsProps): React.JSX.Element;
+export declare function Controls({ className, ...props }: ControlsProps): React.ReactElement;
 export declare namespace Controls {
     var displayName: string;
 }

package/dist/cjs/components/Form/ControlsText.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface ControlsTextProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
 }
-export declare function ControlsText({ className, ...props }: ControlsTextProps): React.JSX.Element;
+export declare function ControlsText({ className, ...props }: ControlsTextProps): React.ReactElement;
 export declare namespace ControlsText {
     var displayName: string;
 }

package/dist/cjs/components/Form/Fieldset.d.ts

@@ -3,7 +3,7 @@ export interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSet
     layout?: 'stacked' | 'horizontal';
     prefixCls?: string;
 }
-export declare function Fieldset({ className, layout, ...props }: FieldsetProps): React.JSX.Element;
+export declare function Fieldset({ className, layout, ...props }: FieldsetProps): React.ReactElement;
 export declare namespace Fieldset {
     var displayName: string;
 }

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

@@ -6,5 +6,5 @@ export interface FormOwnProps {
 }
 export type FormProps<E extends React.ElementType = React.ElementType> = FormOwnProps & PolymorphicProps<E> & PolymorphicProps<E, FormOwnProps>;
 declare const defaultElement = "form";
-export declare function Form<E extends React.ElementType = typeof defaultElement>({ className, component, layout, ...props }: React.PropsWithChildren<FormProps<E>>): React.JSX.Element;
+export declare function Form<E extends React.ElementType = typeof defaultElement>({ className, component, layout, ...props }: React.PropsWithChildren<FormProps<E>>): React.ReactElement;
 export {};

package/dist/cjs/components/Form/Label.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     prefixCls?: string;
 }
-export declare function Label({ className, ...props }: LabelProps): React.JSX.Element;
+export declare function Label({ className, ...props }: LabelProps): React.ReactElement;
 export declare namespace Label {
     var displayName: string;
 }

package/dist/cjs/components/Form/Legend.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface LegendProps extends React.HTMLAttributes<HTMLLegendElement> {
     prefixCls?: string;
 }
-export declare function Legend({ className, ...props }: LegendProps): React.JSX.Element;
+export declare function Legend({ className, ...props }: LegendProps): React.ReactElement;
 export declare namespace Legend {
     var displayName: string;
 }

package/dist/cjs/components/Grid/index.d.ts

@@ -14,5 +14,5 @@ export interface GridOwnProps {
 }
 export type GridProps<E extends React.ElementType = React.ElementType> = GridOwnProps & PolymorphicProps<E> & PolymorphicProps<E, GridOwnProps>;
 declare const defaultElement = "div";
-export declare function Grid<E extends React.ElementType = typeof defaultElement>({ childWidth, className, columnGap, component, divider, gap, margin, match, rowGap, ...props }: React.PropsWithChildren<GridProps<E>>): React.JSX.Element;
+export declare function Grid<E extends React.ElementType = typeof defaultElement>({ childWidth, className, columnGap, component, divider, gap, margin, match, rowGap, ...props }: React.PropsWithChildren<GridProps<E>>): React.ReactElement;
 export {};

package/dist/cjs/components/Heading/index.d.ts

@@ -7,7 +7,7 @@ export interface HeadingOwnProps {
 }
 export type HeadingProps<E extends React.ElementType = React.ElementType> = HeadingOwnProps & PolymorphicProps<E> & PolymorphicProps<E, HeadingOwnProps>;
 declare const defaultElement = "div";
-export declare function Heading<E extends React.ElementType = typeof defaultElement>({ children, className, decoration, size, ...props }: React.PropsWithChildren<HeadingProps<E>>): React.JSX.Element;
+export declare function Heading<E extends React.ElementType = typeof defaultElement>({ children, className, decoration, size, ...props }: React.PropsWithChildren<HeadingProps<E>>): React.ReactElement;
 export declare namespace Heading {
     var displayName: string;
 }

package/dist/cjs/components/Icon/Button.d.ts

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

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

@@ -9,5 +9,5 @@ export interface IconOwnProps {
 }
 export type IconProps<E extends React.ElementType = React.ElementType> = IconOwnProps & PolymorphicProps<E> & PolymorphicProps<E, IconOwnProps>;
 declare const defaultElement = "span";
-export declare function Icon<E extends React.ElementType = typeof defaultElement>({ children, className, component, icon, material, mode, round, type, ...props }: React.PropsWithChildren<IconProps<E>>): React.JSX.Element | null;
+export declare function Icon<E extends React.ElementType = typeof defaultElement>({ children, className, component, icon, material, mode, round, type, ...props }: React.PropsWithChildren<IconProps<E>>): React.ReactElement | null;
 export {};

package/dist/cjs/components/Icon/Link.d.ts

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

package/dist/cjs/components/Icon/index.d.ts

@@ -4,7 +4,7 @@ import { type IconOwnProps, type IconProps } from '../../components/Icon/Icon';
 import { Link } from '../../components/Icon/Link';
 export * from '../../components/Icon/default-svg-props';
 export * from '../../components/Icon/get-size';
-export type { IconProps, IconOwnProps };
+export type { IconOwnProps, IconProps };
 export interface Icon extends React.FunctionComponent<IconProps> {
     Button: typeof Button;
     Link: typeof Link;

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

@@ -3,4 +3,4 @@ export interface IconnavProps extends React.HTMLAttributes<HTMLUListElement> {
     prefixCls?: string;
     vertical?: boolean;
 }
-export declare function Iconnav({ className, vertical, ...props }: IconnavProps): React.JSX.Element;
+export declare function Iconnav({ className, vertical, ...props }: IconnavProps): React.ReactElement;

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface IconnavItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     isActive?: boolean;
 }
-export declare function Item({ children, className, isActive, ...props }: IconnavItemProps): React.JSX.Element;
+export declare function Item({ children, className, isActive, ...props }: IconnavItemProps): React.ReactElement;
 export declare namespace Item {
     var displayName: string;
 }

package/dist/cjs/components/Inverse/index.d.ts

@@ -16,8 +16,8 @@ export interface InverseProviderProps {
     primaryColorLight?: string;
     storageKey?: string;
 }
-export declare const lib: Record<ColorMode, () => React.JSX.Element>;
+export declare const lib: Record<ColorMode, () => React.ReactElement>;
 export declare const InverseContext: React.Context<InverseConfig | null>;
 export declare function useInverse(): InverseConfig;
 export declare const INVERSE_STORAGE_KEY = "colorMode";
-export declare function InverseProvider({ children, defaultColorMode, globalDarkClassName, globalLightClassName, primaryColorDark, primaryColorLight, storageKey, }: React.PropsWithChildren<InverseProviderProps>): React.JSX.Element;
+export declare function InverseProvider({ children, defaultColorMode, globalDarkClassName, globalLightClassName, primaryColorDark, primaryColorLight, storageKey, }: React.PropsWithChildren<InverseProviderProps>): React.ReactElement;

package/dist/cjs/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({ className, large, type, ...props }: LabelProps): React.JSX.Element;
+export declare function Label({ className, large, type, ...props }: LabelProps): React.ReactElement;

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

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

package/dist/cjs/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({ className, color, size, type, ...props }: ListProps): React.JSX.Element;
+export declare function List({ className, color, size, type, ...props }: ListProps): React.ReactElement;

package/dist/cjs/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({ centered, children, className, closable, closeIcon, focusTriggerAfterClose, full, visible, onClose, onClosed, ...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/cjs/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({ className, style }: DividerProps): React.JSX.Element | null;
+export declare function Divider({ className, style }: DividerProps): React.ReactElement | null;
 export declare namespace Divider {
     var displayName: string;
 }

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

@@ -39,15 +39,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Divider = Divider;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
-const NavContext_1 = require("../../components/Nav/context/NavContext");
-const PathContext_1 = require("../../components/Nav/context/PathContext");
+const context_1 = require("../../components/Nav/context");
 function Divider({ className, style }) {
-    const { prefixCls } = React.useContext(NavContext_1.NavContext);
-    const measure = (0, PathContext_1.useMeasure)();
-    if (measure) {
-        return null;
-    }
-    return React.createElement("li", { className: (0, classnames_1.default)(`${prefixCls}-divider`, className), style: style });
+    const { prefixCls } = React.useContext(context_1.NavContext);
+    const measure = (0, context_1.useMeasure)();
+    return measure ? null : (React.createElement("li", { className: (0, classnames_1.default)(`${prefixCls}-divider`, className), role: "separator", style: style }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Divider.displayName = 'Nav.Divider';

package/dist/cjs/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/cjs/components/Nav/Group/{InternalNavItemGroup.js → InternalNavGroup.js}

@@ -36,20 +36,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InternalNavItemGroup = InternalNavItemGroup;
+exports.InternalNavGroup = void 0;
 const js_utils_1 = require("@broxus/js-utils");
-const omit_1 = __importDefault(require("@rc-component/util/lib/omit"));
+const util_1 = require("@rc-component/util");
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
-const NavContext_1 = require("../../../components/Nav/context/NavContext");
-function InternalNavItemGroup({ children, className, title, ...restProps }) {
-    const { prefixCls } = React.useContext(NavContext_1.NavContext);
+const context_1 = require("../../../components/Nav/context");
+exports.InternalNavGroup = React.forwardRef(({ children, className, title, ...props }, ref) => {
+    const { prefixCls } = React.useContext(context_1.NavContext);
     const groupRootCls = React.useMemo(() => `${prefixCls}-group`, [prefixCls]);
     const subRootCls = React.useMemo(() => `${prefixCls}-sub`, [prefixCls]);
-    return (React.createElement("li", { className: (0, classnames_1.default)(groupRootCls, className), role: "presentation", ...(0, omit_1.default)(restProps, ['eventKey', 'warnKey']), onClick: js_utils_1.stopEventPropagate },
-        React.createElement("div", { className: `${groupRootCls}-header`, role: "presentation", title: typeof title === 'string' ? title : undefined }, title),
+    return (React.createElement("li", { ref: ref, className: (0, classnames_1.default)(groupRootCls, className), role: "presentation", ...(0, util_1.omit)(props, ['eventKey', 'warnKey']), onClick: js_utils_1.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') {
-    InternalNavItemGroup.displayName = 'Nav.InternalNavItemGroup';
+    exports.InternalNavGroup.displayName = 'Nav.InternalNavGroup';
 }

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

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

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

@@ -32,25 +32,22 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Group = Group;
-const omit_1 = __importDefault(require("@rc-component/util/lib/omit"));
+exports.Group = void 0;
+const util_1 = require("@rc-component/util");
 const React = __importStar(require("react"));
-const PathContext_1 = require("../../../components/Nav/context/PathContext");
-const InternalNavItemGroup_1 = require("../../../components/Nav/Group/InternalNavItemGroup");
-const nodeUtil_1 = require("../../../components/Nav/utils/nodeUtil");
-function Group({ children, eventKey, ...restProps }) {
-    const connectedKeyPath = (0, PathContext_1.useFullPath)(eventKey);
-    const measure = (0, PathContext_1.useMeasure)();
-    const childList = (0, nodeUtil_1.parseChildren)(children, connectedKeyPath);
+const context_1 = require("../../../components/Nav/context");
+const InternalNavGroup_1 = require("../../../components/Nav/Group/InternalNavGroup");
+const utils_1 = require("../../../components/Nav/utils");
+exports.Group = React.forwardRef(({ children, eventKey, ...props }, ref) => {
+    const connectedKeyPath = (0, context_1.useFullPath)(eventKey);
+    const measure = (0, context_1.useMeasure)();
+    const childList = (0, utils_1.parseChildren)(children, connectedKeyPath);
     if (measure) {
         return childList;
     }
-    return React.createElement(InternalNavItemGroup_1.InternalNavItemGroup, { ...(0, omit_1.default)(restProps, ['warnKey']) }, childList);
-}
+    return (React.createElement(InternalNavGroup_1.InternalNavGroup, { ref: ref, ...(0, util_1.omit)(props, ['warnKey']) }, childList));
+});
 if (process.env.NODE_ENV !== 'production') {
-    Group.displayName = 'Nav.Group';
+    exports.Group.displayName = 'Nav.Group';
 }

package/dist/cjs/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({ className, ...props }: HeaderProps): React.JSX.Element;
+export declare function Header({ className, ...props }: HeaderProps): React.ReactElement;
 export declare namespace Header {
     var displayName: string;
 }

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

@@ -37,13 +37,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = Header;
-const omit_1 = __importDefault(require("@rc-component/util/lib/omit"));
+const util_1 = require("@rc-component/util");
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
-const NavContext_1 = require("../../components/Nav/context/NavContext");
+const context_1 = require("../../components/Nav/context");
 function Header({ className, ...props }) {
-    const { prefixCls } = React.useContext(NavContext_1.NavContext);
-    return React.createElement("li", { className: (0, classnames_1.default)(`${prefixCls}-header`, className), ...(0, omit_1.default)(props, ['eventKey', 'warnKey']) });
+    const { prefixCls } = React.useContext(context_1.NavContext);
+    return (React.createElement("li", { className: (0, classnames_1.default)(`${prefixCls}-header`, className), role: "presentation", ...(0, util_1.omit)(props, ['eventKey', 'warnKey']) }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Header.displayName = 'Nav.Header';

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

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -34,9 +33,18 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PrivateContext = void 0;
+exports.default = Icon;
 const React = __importStar(require("react"));
-exports.PrivateContext = React.createContext({});
-if (process.env.NODE_ENV !== 'production') {
-    exports.PrivateContext.displayName = 'Nav.PrivateContext';
+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/cjs/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/cjs/components/Nav/Item/InternalNavItem.js

@@ -36,32 +36,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InternalNavItem = InternalNavItem;
-const KeyCode_1 = __importDefault(require("@rc-component/util/lib/KeyCode"));
-const warning_1 = __importDefault(require("@rc-component/util/lib/warning"));
+exports.InternalNavItem = void 0;
+const util_1 = require("@rc-component/util");
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../../components/ConfigProvider");
-const IdContext_1 = require("../../../components/Nav/context/IdContext");
-const NavContext_1 = require("../../../components/Nav/context/NavContext");
-const PathContext_1 = require("../../../components/Nav/context/PathContext");
-const PrivateContext_1 = require("../../../components/Nav/context/PrivateContext");
-const useActive_1 = require("../../../components/Nav/hooks/useActive");
-const useDirectionStyle_1 = require("../../../components/Nav/hooks/useDirectionStyle");
+const context_1 = require("../../../components/Nav/context");
+const hooks_1 = require("../../../components/Nav/hooks");
+const Icon_1 = __importDefault(require("../../../components/Nav/Icon"));
 const LegacyNavItem_1 = require("../../../components/Nav/Item/LegacyNavItem");
-const warnUtil_1 = require("../../../components/Nav/utils/warnUtil");
-function InternalNavItem({ children, className, disabled, eventKey, itemIcon, role, style, warnKey, onClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, ...restProps }) {
+const utils_1 = require("../../../components/Nav/utils");
+const constants_1 = require("../../../constants");
+exports.InternalNavItem = React.forwardRef(({ children, className, disabled, eventKey, itemIcon, role, style, warnKey, onClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, ...props }, ref) => {
     const config = (0, ConfigProvider_1.useConfig)();
-    const domDataId = (0, IdContext_1.useNavId)(eventKey);
-    const { disabled: contextDisabled = disabled, itemIcon: contextItemIcon, overflowDisabled, selectedKeys, onActive, onItemClick, } = React.useContext(NavContext_1.NavContext);
-    const { _internalRenderMenuItem } = React.useContext(PrivateContext_1.PrivateContext);
+    const domDataId = (0, context_1.useNavId)(eventKey);
+    const { disabled: contextDisabled = disabled, itemIcon: contextItemIcon, overflowDisabled, selectedKeys, onActive, onItemClick, } = React.useContext(context_1.NavContext);
     const legacyNavItemRef = React.useRef(null);
     const elementRef = React.useRef(null);
     const mergedDisabled = contextDisabled || disabled;
-    const connectedKeys = (0, PathContext_1.useFullPath)(eventKey);
+    const mergedEleRef = (0, util_1.useComposeRef)(ref, elementRef);
+    const connectedKeys = (0, context_1.useFullPath)(eventKey);
     // ================================ Warn ================================
     if (process.env.NODE_ENV !== 'production' && warnKey) {
-        (0, warning_1.default)(false, 'NavItem should not leave undefined `key`.');
+        (0, util_1.warning)(false, 'NavItem should not leave undefined `key`.');
     }
     // ============================= Info =============================
     const getEventInfo = (event) => ({
@@ -71,27 +68,29 @@ function InternalNavItem({ children, className, disabled, eventKey, itemIcon, ro
         // Note: For legacy code is reversed which not like other antd component
         keyPath: [...connectedKeys].reverse(),
     });
+    // ============================= Icon =============================
+    const mergedItemIcon = itemIcon || contextItemIcon;
     // ============================ Active ============================
-    const { active, ...activeProps } = (0, useActive_1.useActive)(eventKey, disabled, onMouseEnter, onMouseLeave);
+    const { active, ...activeProps } = (0, hooks_1.useActive)(eventKey, disabled, onMouseEnter, onMouseLeave);
     // ============================ Select ============================
     const selected = eventKey ? selectedKeys.includes(eventKey) : false;
     // ======================== DirectionStyle ========================
-    const directionStyle = (0, useDirectionStyle_1.useDirectionStyle)(connectedKeys.length);
+    const directionStyle = (0, hooks_1.useDirectionStyle)(connectedKeys.length);
     // ============================ Events ============================
     const onInternalClick = event => {
         if (mergedDisabled) {
             return;
         }
         const info = getEventInfo(event);
-        onClick?.((0, warnUtil_1.warnItemProp)(info));
+        onClick?.((0, utils_1.warnItemProp)(info));
         onItemClick(info);
     };
     const onInternalKeyDown = event => {
         onKeyDown?.(event);
-        if (event.which === KeyCode_1.default.ENTER) {
+        if (event.code === constants_1.KeyCode.Enter) {
             const info = getEventInfo(event);
             // Legacy. Key will also trigger click event
-            onClick?.((0, warnUtil_1.warnItemProp)(info));
+            onClick?.((0, utils_1.warnItemProp)(info));
             onItemClick(info);
         }
     };
@@ -109,34 +108,14 @@ function InternalNavItem({ children, className, disabled, eventKey, itemIcon, ro
     if (role === 'option') {
         optionRoleProps['aria-selected'] = selected || false;
     }
-    let renderNode = (React.createElement(LegacyNavItem_1.LegacyNavItem, { ref: legacyNavItemRef, "aria-disabled": disabled, className: (0, classnames_1.default)({
+    return (React.createElement(LegacyNavItem_1.LegacyNavItem, { ref: legacyNavItemRef, "data-nav-id": overflowDisabled && domDataId ? null : domDataId, elementRef: mergedEleRef, role: (role === null || disabled) ? 'none' : role || 'menuitem', tabIndex: disabled ? null : -1, ...(0, util_1.omit)(props, ['extra']), ...activeProps, ...optionRoleProps, "aria-disabled": disabled, className: (0, classnames_1.default)(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_1.default, { icon: mergedItemIcon, props: { ...props, isSelected: selected } })));
+});
 if (process.env.NODE_ENV !== 'production') {
-    InternalNavItem.displayName = 'Nav.InternalNavItem';
+    exports.InternalNavItem.displayName = 'Nav.InternalNavItem';
 }