@broxus/react-uikit 0.1.3 → 0.2.1

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

@@ -31,12 +31,12 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const ConfrigProvider_1 = require("../ConfrigProvider");
 require("./index.scss");
-function Label(props) {
+exports.Label = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, large, prefixCls = `${config.prefixCls}-label`, type, ...restProps } = props;
-    return (React.createElement("span", { className: (0, classnames_1.default)(prefixCls, {
-            [`${prefixCls}-${type}`]: type !== undefined,
-            [`${prefixCls}-large`]: large,
+    const { className, large, prefixCls = config.prefixCls, type, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'label'), [config, prefixCls]);
+    return (React.createElement("span", { className: (0, classnames_1.default)(rootCls, {
+            [`${rootCls}-${type}`]: type !== undefined,
+            [`${rootCls}-large`]: large,
         }, className), ...restProps }));
-}
-exports.Label = Label;
+});

package/dist/cjs/components/Label/index.scss

@@ -25,7 +25,7 @@
     background: var(--label-background);
     border-radius: var(--label-border-radius);
     color: var(--label-color);
-    display: inline-block;
+    display: inline-flex;
     font-size: var(--label-font-size);
     line-height: var(--label-line-height);
     padding: var(--label-padding-vertical) var(--label-padding-horizontal);

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
 import './index.scss';
 export interface LinkOwnProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     prefixCls?: string;
     type?: 'heading' | 'muted' | 'reset' | 'text' | 'toggle';
 }
-export declare type LinkProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, LinkOwnProps>;
-export declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps<React.ElementType<any>>, string | number | symbol> & React.RefAttributes<unknown>>;
+export type LinkProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<LinkOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, LinkOwnProps>;
+export declare const Link: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>>;

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

@@ -33,10 +33,16 @@ const Component_1 = require("../Component");
 const ConfrigProvider_1 = require("../ConfrigProvider");
 require("./index.scss");
 const defaultElement = 'a';
-exports.Link = React.forwardRef((props, ref) => {
+const ForwardedLink = React.forwardRef((props, ref) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { children, className, prefixCls = `${config.prefixCls}-link`, type, ...restProps } = props;
+    const { children, className, prefixCls = config.prefixCls, type, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'link'), [config, prefixCls]);
     return (React.createElement(Component_1.Component, { ref: ref, className: (0, classnames_1.default)({
-            [`${prefixCls}-${type}`]: type !== undefined,
+            [`${rootCls}-${type}`]: type !== undefined,
         }, className), component: defaultElement, ...restProps }, children));
 });
+exports.Link = React.memo(ForwardedLink);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedLink.displayName = 'Link.Forwarded';
+    exports.Link.displayName = 'Link';
+}

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

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

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

@@ -25,10 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Item = void 0;
 const React = __importStar(require("react"));
-function Item(props) {
-    return React.createElement("li", { ...props });
-}
-exports.Item = Item;
+exports.Item = React.memo((props) => React.createElement("li", { ...props }));
 if (process.env.NODE_ENV !== 'production') {
-    Item.displayName = 'List.Item';
+    exports.Item.displayName = 'List.Item';
 }

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(props: ListProps): JSX.Element;
+export declare const List: React.MemoExoticComponent<(props: ListProps) => JSX.Element>;

package/dist/cjs/components/List/List.js

@@ -30,13 +30,13 @@ exports.List = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const ConfrigProvider_1 = require("../ConfrigProvider");
-function List(props) {
+exports.List = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, color, prefixCls = `${config.prefixCls}-list`, size, type, ...restProps } = props;
-    return (React.createElement("ul", { className: (0, classnames_1.default)(prefixCls, {
-            [`${prefixCls}-${color}`]: color !== undefined,
-            [`${prefixCls}-${size}`]: size !== undefined,
-            [`${prefixCls}-${type}`]: type !== undefined,
+    const { className, color, prefixCls = config.prefixCls, size, type, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'list'), [config, prefixCls]);
+    return (React.createElement("ul", { className: (0, classnames_1.default)(rootCls, {
+            [`${rootCls}-${color}`]: color !== undefined,
+            [`${rootCls}-${size}`]: size !== undefined,
+            [`${rootCls}-${type}`]: type !== undefined,
         }, className), ...restProps }));
-}
-exports.List = List;
+});

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

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { Item } from './Item';
-import type { ListProps } from './List';
+import type * as React from 'react';
+import { type ListProps } from '../List/List';
+import { Item } from '../List/Item';
 import './index.scss';
 export type { ListProps };
-export interface CompoundedList extends React.FunctionComponent<ListProps> {
+export interface List extends React.MemoExoticComponent<React.FunctionComponent<ListProps>> {
     Item: typeof Item;
 }
-export declare const List: CompoundedList;
+export declare const List: List;

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = void 0;
-const List_1 = require("./List");
-const Item_1 = require("./Item");
+const List_1 = require("../List/List");
+const Item_1 = require("../List/Item");
 require("./index.scss");
 exports.List = List_1.List;
 exports.List.Item = Item_1.Item;

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

@@ -1,5 +1,6 @@
-import type { DialogProps } from 'rc-dialog';
-import type { Direction } from '../../types';
+import * as React from 'react';
+import { type DialogProps } from 'rc-dialog';
+import { type Direction } from '../../types';
 export interface ModalProps extends Omit<DialogProps, 'afterClose'> {
     centered?: boolean;
     direction?: Direction;
@@ -8,4 +9,4 @@ export interface ModalProps extends Omit<DialogProps, 'afterClose'> {
     type?: 'info' | 'success' | 'warning' | 'error' | 'confirm';
     onClosed?: () => void;
 }
-export declare function Modal(props: ModalProps): JSX.Element;
+export declare const Modal: React.MemoExoticComponent<(props: ModalProps) => JSX.Element>;

package/dist/cjs/components/Modal/Modal.js

@@ -29,16 +29,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 const React = __importStar(require("react"));
 const js_utils_1 = require("@broxus/js-utils");
-const rc_dialog_1 = __importDefault(require("rc-dialog"));
 const classnames_1 = __importDefault(require("classnames"));
-const utils_1 = require("../../utils");
+const rc_dialog_1 = __importDefault(require("rc-dialog"));
 const Close_1 = require("../Close");
 const ConfrigProvider_1 = require("../ConfrigProvider");
+const utils_1 = require("../../utils");
 let mousePosition;
-const getClickPosition = (e) => {
+const getClickPosition = (event) => {
     mousePosition = {
-        x: e.pageX,
-        y: e.pageY,
+        x: event.pageX,
+        y: event.pageY,
     };
     setTimeout(() => {
         mousePosition = null;
@@ -47,17 +47,20 @@ const getClickPosition = (e) => {
 if ((0, js_utils_1.canUseDocElement)()) {
     document.documentElement.addEventListener('click', getClickPosition, true);
 }
-function Modal(props) {
+exports.Modal = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { centered, children, className, closable = true, closeIcon, focusTriggerAfterClose = true, full, prefixCls = `${config.prefixCls}-modal`, visible, onClose, onClosed, ...restProps } = props;
+    const { centered, children, className, closable = true, closeIcon, focusTriggerAfterClose = true, full, prefixCls = config.prefixCls, visible, onClose, onClosed, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'modal'), [config, prefixCls]);
+    const defaultMaskTransitionName = React.useMemo(() => (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'fade'), [config.prefixCls, prefixCls]);
+    const defaultTransitionName = React.useMemo(() => (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'zoom'), [config.prefixCls, prefixCls]);
     return (React.createElement(rc_dialog_1.default, { className: (0, classnames_1.default)(className, {
-            [`${prefixCls}-centered`]: centered && !full,
-            [`${prefixCls}-full`]: full && !centered,
-        }), focusTriggerAfterClose: focusTriggerAfterClose, maskTransitionName: (0, utils_1.getTransitionName)(`${config.prefixCls}-motion`, 'fade'), mousePosition: mousePosition, prefixCls: prefixCls, transitionName: (0, utils_1.getTransitionName)(`${config.prefixCls}-motion`, 'zoom'), visible: visible, ...restProps, afterClose: onClosed, closable: false, closeIcon: null },
-        closable && (closeIcon || (React.createElement(Close_1.Close, { className: (0, classnames_1.default)({
-                [`${prefixCls}-close-default`]: !full,
-                [`${prefixCls}-close-full`]: full,
-            }), component: "button", onClick: onClose }))),
+            [`${rootCls}-centered`]: centered && !full,
+            [`${rootCls}-full`]: full && !centered,
+        }), focusTriggerAfterClose: focusTriggerAfterClose, maskTransitionName: defaultMaskTransitionName, mousePosition: mousePosition, prefixCls: rootCls, transitionName: defaultTransitionName, visible: visible, ...restProps, afterClose: onClosed, closable: false, closeIcon: null },
+        closable &&
+            (closeIcon || (React.createElement(Close_1.Close, { className: (0, classnames_1.default)({
+                    [`${rootCls}-close-default`]: !full,
+                    [`${rootCls}-close-full`]: full,
+                }), component: "button", onClick: onClose }))),
         children));
-}
-exports.Modal = Modal;
+});

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

@@ -1,2 +1,2 @@
 import './index.scss';
-export * from './Modal';
+export * from '../Modal/Modal';

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

@@ -15,4 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 require("./index.scss");
-__exportStar(require("./Modal"), exports);
+__exportStar(require("../Modal/Modal"), exports);

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

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

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

@@ -29,18 +29,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Divider = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const NavContext_1 = require("./context/NavContext");
-const PathContext_1 = require("./context/PathContext");
-function Divider(props) {
+const NavContext_1 = require("../Nav/context/NavContext");
+const PathContext_1 = require("../Nav/context/PathContext");
+exports.Divider = React.memo((props) => {
     const { className, style } = props;
     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 }));
-}
-exports.Divider = Divider;
+    return React.createElement("li", { className: (0, classnames_1.default)(`${prefixCls}-divider`, className), style: style });
+});
 if (process.env.NODE_ENV !== 'production') {
-    Divider.displayName = 'Nav.Divider';
+    exports.Divider.displayName = 'Nav.Divider';
 }

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type NavItemGroupType } from '../../Nav/types';
+export interface NavItemGroupProps extends Omit<NavItemGroupType, 'children' | 'type' | 'label'> {
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    /** @private Internal filled key. Do not set it directly */
+    eventKey?: string;
+    /** @private Do not use. Private warning empty usage */
+    warnKey?: boolean;
+}
+export declare const InternalNavItemGroup: React.MemoExoticComponent<(props: NavItemGroupProps) => JSX.Element>;

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

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalNavItemGroup = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const js_utils_1 = require("@broxus/js-utils");
+const NavContext_1 = require("../../Nav/context/NavContext");
+exports.InternalNavItemGroup = React.memo((props) => {
+    const { children, className, title, ...restProps } = props;
+    const { prefixCls } = React.useContext(NavContext_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", ...restProps, onClick: js_utils_1.stopEventPropagate },
+        React.createElement("div", { className: `${groupRootCls}-header`, role: "presentation", title: typeof title === 'string' ? title : undefined }, title),
+        React.createElement("ul", { className: subRootCls, role: "group" }, children)));
+});

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { type NavItemGroupProps } from '../../Nav/Group/InternalNavItemGroup';
+export declare const Group: React.MemoExoticComponent<(props: NavItemGroupProps) => JSX.Element>;

package/dist/cjs/components/Nav/{Group.js → Group/index.js}

@@ -28,29 +28,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Group = void 0;
 const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const omit_1 = __importDefault(require("rc-util/lib/omit"));
-const nodeUtil_1 = require("./utils/nodeUtil");
-const NavContext_1 = require("./context/NavContext");
-const PathContext_1 = require("./context/PathContext");
-function InternalNavItemGroup({ children, className, title, ...props }) {
-    const { prefixCls } = React.useContext(NavContext_1.NavContext);
-    const groupPrefixCls = `${prefixCls}-group`;
-    return (React.createElement("li", { className: (0, classnames_1.default)(groupPrefixCls, className), ...props, onClick: e => e.stopPropagation() },
-        React.createElement("div", { className: `${groupPrefixCls}-header`, title: typeof title === 'string' ? title : undefined }, title),
-        React.createElement("ul", { className: "uk-nav-sub" }, children)));
-}
-// eslint-disable-next-line react/no-multi-comp
-function Group({ children, ...props }) {
-    const connectedKeyPath = (0, PathContext_1.useFullPath)(props.eventKey);
-    const childList = (0, nodeUtil_1.parseChildren)(children, connectedKeyPath);
+const PathContext_1 = require("../../Nav/context/PathContext");
+const InternalNavItemGroup_1 = require("../../Nav/Group/InternalNavItemGroup");
+const nodeUtil_1 = require("../../Nav/utils/nodeUtil");
+exports.Group = React.memo((props) => {
+    const { children, eventKey, ...restProps } = props;
+    const connectedKeyPath = (0, PathContext_1.useFullPath)(eventKey);
     const measure = (0, PathContext_1.useMeasure)();
+    const childList = (0, nodeUtil_1.parseChildren)(children, connectedKeyPath);
     if (measure) {
         return childList;
     }
-    return (React.createElement(InternalNavItemGroup, { ...(0, omit_1.default)(props, ['warnKey']) }, childList));
-}
-exports.Group = Group;
+    return React.createElement(InternalNavItemGroup_1.InternalNavItemGroup, { ...(0, omit_1.default)(restProps, ['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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type HeaderProps = {
+export type HeaderProps = {
     children: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;

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

@@ -29,11 +29,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const NavContext_1 = require("./context/NavContext");
+const NavContext_1 = require("../Nav/context/NavContext");
 function Header(props) {
     const { className, ...restProps } = props;
     const { prefixCls } = React.useContext(NavContext_1.NavContext);
-    return (React.createElement("li", { className: (0, classnames_1.default)(`${prefixCls}-header`, className), ...restProps }));
+    return React.createElement("li", { className: (0, classnames_1.default)(`${prefixCls}-header`, className), ...restProps });
 }
 exports.Header = Header;
 if (process.env.NODE_ENV !== 'production') {

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

@@ -1,2 +1,16 @@
-import type { NavItemProps } from './index';
-export declare function InternalNavItem(props: NavItemProps): JSX.Element;
+import * as React from 'react';
+import { type NavItemType } from '../../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
+     */
+    eventKey?: string;
+    /**
+     * Do not use. Private warning empty usage
+     * @private
+     */
+    warnKey?: boolean;
+}
+export declare const InternalNavItem: React.MemoExoticComponent<(props: NavItemProps) => JSX.Element>;

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

@@ -31,68 +31,87 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const KeyCode_1 = __importDefault(require("rc-util/lib/KeyCode"));
 const warning_1 = __importDefault(require("rc-util/lib/warning"));
-const IdContext_1 = require("../context/IdContext");
-const NavContext_1 = require("../context/NavContext");
-const PathContext_1 = require("../context/PathContext");
-const useActive_1 = __importDefault(require("../hooks/useActive"));
-const LegacyNavItem_1 = require("./LegacyNavItem");
-const warnUtil_1 = require("../utils/warnUtil");
-function InternalNavItem(props) {
-    const { className, children, eventKey, itemIcon, role, warnKey, ...restProps } = props;
-    const { disabled = restProps.disabled, itemIcon: contextItemIcon, overflowDisabled, selectedKeys, onActive, onItemClick, } = React.useContext(NavContext_1.NavContext);
+const ConfrigProvider_1 = require("../../ConfrigProvider");
+const IdContext_1 = require("../../Nav/context/IdContext");
+const NavContext_1 = require("../../Nav/context/NavContext");
+const PathContext_1 = require("../../Nav/context/PathContext");
+const PrivateContext_1 = require("../../Nav/context/PrivateContext");
+const useActive_1 = require("../../Nav/hooks/useActive");
+const LegacyNavItem_1 = require("../../Nav/Item/LegacyNavItem");
+const warnUtil_1 = require("../../Nav/utils/warnUtil");
+const useDirectionStyle_1 = require("../../Nav/hooks/useDirectionStyle");
+exports.InternalNavItem = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, children, disabled, eventKey, itemIcon, role, style, warnKey, onClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, ...restProps } = props;
+    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 legacyNavItemRef = React.useRef();
     const elementRef = React.useRef();
-    const { active, ...activeProps } = (0, useActive_1.default)(eventKey, disabled, restProps.onMouseEnter, restProps.onMouseLeave);
+    const mergedDisabled = contextDisabled || disabled;
     const connectedKeys = (0, PathContext_1.useFullPath)(eventKey);
-    const domDataId = (0, IdContext_1.useNavId)(eventKey);
-    const selected = eventKey !== undefined && selectedKeys.includes(eventKey);
+    // ================================ Warn ================================
     if (process.env.NODE_ENV !== 'production' && warnKey) {
         (0, warning_1.default)(false, 'NavItem should not leave undefined `key`.');
     }
-    const getEventInfo = (e) => ({
-        domEvent: e,
+    // ============================= Info =============================
+    const getEventInfo = (event) => ({
+        domEvent: event,
         item: legacyNavItemRef.current,
         key: eventKey,
         // Note: For legacy code is reversed which not like other antd component
         keyPath: [...connectedKeys].reverse(),
     });
-    const onClick = event => {
-        if (disabled) {
+    // ============================ Active ============================
+    const { active, ...activeProps } = (0, useActive_1.useActive)(eventKey, disabled, onMouseEnter, onMouseLeave);
+    // ============================ Select ============================
+    const selected = eventKey ? selectedKeys.includes(eventKey) : false;
+    // ======================== DirectionStyle ========================
+    const directionStyle = (0, useDirectionStyle_1.useDirectionStyle)(connectedKeys.length);
+    // ============================ Events ============================
+    const onInternalClick = event => {
+        if (mergedDisabled) {
             return;
         }
         const info = getEventInfo(event);
-        restProps.onClick?.((0, warnUtil_1.warnItemProp)(info));
-        onItemClick?.(info);
+        onClick?.((0, warnUtil_1.warnItemProp)(info));
+        onItemClick(info);
     };
-    const onKeyDown = event => {
-        restProps.onKeyDown?.(event);
+    const onInternalKeyDown = event => {
+        onKeyDown?.(event);
         if (event.which === KeyCode_1.default.ENTER) {
             const info = getEventInfo(event);
             // Legacy. Key will also trigger click event
-            restProps.onClick?.((0, warnUtil_1.warnItemProp)(info));
-            onItemClick?.(info);
+            onClick?.((0, warnUtil_1.warnItemProp)(info));
+            onItemClick(info);
         }
     };
-    /*
-     * Used for accessibility. Helper will focus element without key board.
+    /**
+     * Used for accessibility. Helper will focus element without keyboard.
      * We should manually trigger an active
      */
-    const onFocus = event => {
-        if (eventKey !== undefined) {
+    const onInternalFocus = event => {
+        if (eventKey) {
             onActive(eventKey);
         }
-        restProps.onFocus?.(event);
+        onFocus?.(event);
     };
     const optionRoleProps = {};
     if (role === 'option') {
-        optionRoleProps['aria-selected'] = selected;
+        optionRoleProps['aria-selected'] = selected || false;
     }
-    return (React.createElement(LegacyNavItem_1.LegacyNavItem, { className: (0, classnames_1.default)({
-            'uk-active': selected,
-            'uk-disabled': disabled,
-            'uk-hover': active,
-        }, className), component: "li", role: role === null ? 'none' : role || 'menuitem', tabIndex: disabled ? null : -1, "aria-disabled": disabled, ...optionRoleProps, "data-nav-id": (overflowDisabled && domDataId) ? null : domDataId, ...restProps, ...activeProps, elementRef: elementRef, ref: legacyNavItemRef, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown },
+    let renderNode = (React.createElement(LegacyNavItem_1.LegacyNavItem, { "aria-disabled": disabled, className: (0, classnames_1.default)({
+            [`${config.prefixCls}-active`]: selected,
+            [`${config.prefixCls}-disabled`]: disabled,
+            [`${config.prefixCls}-hover`]: active,
+        }, className), component: "li", "data-nav-id": overflowDisabled && domDataId ? null : domDataId, elementRef: elementRef, ref: legacyNavItemRef, 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));
-}
-exports.InternalNavItem = InternalNavItem;
+    if (_internalRenderMenuItem) {
+        renderNode = _internalRenderMenuItem(renderNode, props, { selected });
+    }
+    return renderNode;
+});

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

@@ -33,7 +33,7 @@ const omit_1 = __importDefault(require("rc-util/lib/omit"));
 const warning_1 = __importDefault(require("rc-util/lib/warning"));
 class LegacyNavItem extends React.Component {
     render() {
-        const { title, attribute, elementRef, ...restProps } = this.props;
+        const { attribute, elementRef, title, ...restProps } = this.props;
         const passedProps = (0, omit_1.default)(restProps, ['eventKey']);
         (0, warning_1.default)(!attribute, '`attribute` of Nav.Item is deprecated. Please pass attribute directly.');
         return (React.createElement(rc_overflow_1.default.Item, { ...attribute, title: typeof title === 'string' ? title : undefined, ...passedProps, ref: elementRef }));

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

@@ -1,29 +1,3 @@
 import * as React from 'react';
-import type { NavClickEventHandler, NavHoverEventHandler, RenderIconType } from '../types';
-export interface NavItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'> {
-    /**
-     * No place to use this. Should remove
-     * @deprecated
-     */
-    attribute?: Record<string, string>;
-    children?: React.ReactNode;
-    disabled?: boolean;
-    /**
-     * Internal filled key. Do not set it directly
-     * @private
-     */
-    eventKey?: string;
-    itemIcon?: RenderIconType;
-    /**
-     * Do not use. Private warning empty usage
-     * @private
-     */
-    warnKey?: boolean;
-    onClick?: NavClickEventHandler;
-    onMouseEnter?: NavHoverEventHandler;
-    onMouseLeave?: NavHoverEventHandler;
-}
-export declare function Item(props: NavItemProps): JSX.Element | null;
-export declare namespace Item {
-    var displayName: string;
-}
+import { type NavItemProps } from '../../Nav/Item/InternalNavItem';
+export declare const Item: React.MemoExoticComponent<(props: NavItemProps) => JSX.Element | null>;

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

@@ -26,9 +26,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Item = void 0;
 const React = __importStar(require("react"));
 const js_utils_1 = require("@broxus/js-utils");
-const PathContext_1 = require("../context/PathContext");
-const InternalNavItem_1 = require("./InternalNavItem");
-function Item(props) {
+const PathContext_1 = require("../../Nav/context/PathContext");
+const InternalNavItem_1 = require("../../Nav/Item/InternalNavItem");
+exports.Item = React.memo((props) => {
     const { eventKey } = props;
     const measure = (0, PathContext_1.useMeasure)();
     const connectedKeyPath = (0, PathContext_1.useFullPath)(eventKey);
@@ -40,13 +40,12 @@ function Item(props) {
             };
         }
         return js_utils_1.noop;
-    }, [connectedKeyPath]);
+    }, [connectedKeyPath, eventKey, measure]);
     if (measure) {
         return null;
     }
     return React.createElement(InternalNavItem_1.InternalNavItem, { ...props });
-}
-exports.Item = Item;
+});
 if (process.env.NODE_ENV !== 'production') {
-    Item.displayName = 'Nav.Item';
+    exports.Item.displayName = 'Nav.Item';
 }