@broxus/react-uikit 0.1.3 → 0.2.0

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';
 }

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { CSSMotionProps } from 'rc-motion';
-import type { Direction } from '../../types';
-import type { BuiltinPlacements, NavClickEventHandler, NavMode, NavModifier, RenderIconType, SelectEventHandler, TriggerSubMenuAction } from './types';
+import { type CSSMotionProps } from 'rc-motion';
+import { type BuiltinPlacements, type ItemType, type NavClickEventHandler, type NavMode, type NavModifier, type NavRef, type RenderIconType, type SelectEventHandler, type TriggerSubNavAction } from '../Nav/types';
+import { type Direction } from '../../types';
 export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onClick' | 'onSelect' | 'dir'> {
     activeKey?: string;
     builtinPlacements?: BuiltinPlacements;
@@ -20,6 +20,7 @@ export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, '
     getPopupContainer?: (node: HTMLElement) => HTMLElement;
     inlineCollapsed?: boolean;
     itemIcon?: RenderIconType;
+    items?: ItemType[];
     mode?: NavMode;
     modifiers?: NavModifier | NavModifier[];
     motion?: CSSMotionProps;
@@ -33,10 +34,27 @@ export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, '
     selectedKeys?: string[];
     subNavCloseDelay?: number;
     subNavOpenDelay?: number;
-    triggerSubNavAction?: TriggerSubMenuAction;
+    triggerSubNavAction?: TriggerSubNavAction;
     onClick?: NavClickEventHandler;
     onDeselect?: SelectEventHandler;
     onOpenChange?: (openKeys: string[]) => void;
     onSelect?: SelectEventHandler;
+    /**
+     * @private Only used for `pro-layout`. Do not use in your prod directly,
+     * and we do not promise any compatibility for this.
+     */
+    _internalRenderMenuItem?: (originNode: React.ReactElement, menuItemProps: any, stateProps: {
+        selected: boolean;
+    }) => React.ReactElement;
+    /**
+     * @private Only used for `pro-layout`. Do not use in your prod directly,
+     * and we do not promise any compatibility for this.
+     */
+    _internalRenderSubMenuItem?: (originNode: React.ReactElement, subMenuItemProps: any, stateProps: {
+        selected: boolean;
+        open: boolean;
+        active: boolean;
+        disabled: boolean;
+    }) => React.ReactElement;
 }
-export declare function Nav(props: NavProps): JSX.Element;
+export declare const Nav: React.MemoExoticComponent<React.ForwardRefExoticComponent<NavProps & React.RefAttributes<NavRef>>>;