@broxus/react-uikit 0.1.3 → 0.2.0

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

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { useConfig } from '../ConfrigProvider';
-export function List(props) {
+export const List = React.memo((props) => {
     const config = useConfig();
-    const { className, color, prefixCls = `${config.prefixCls}-list`, size, type, ...restProps } = props;
-    return (React.createElement("ul", { className: classNames(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: classNames(rootCls, {
+            [`${rootCls}-${color}`]: color !== undefined,
+            [`${rootCls}-${size}`]: size !== undefined,
+            [`${rootCls}-${type}`]: type !== undefined,
         }, className), ...restProps }));
-}
+});

package/dist/esm/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/esm/components/List/index.js

@@ -1,5 +1,5 @@
-import { List as InnerList } from './List';
-import { Item } from './Item';
+import { List as InnerList } from '../List/List';
+import { Item } from '../List/Item';
 import './index.scss';
 export const List = InnerList;
 List.Item = Item;

package/dist/esm/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/esm/components/Modal/Modal.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { canUseDocElement } from '@broxus/js-utils';
-import Dialog from 'rc-dialog';
 import classNames from 'classnames';
-import { getTransitionName } from '../../utils';
+import Dialog from 'rc-dialog';
 import { Close } from '../Close';
 import { useConfig } from '../ConfrigProvider';
+import { getMotionName } from '../../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;
@@ -18,16 +18,20 @@ const getClickPosition = (e) => {
 if (canUseDocElement()) {
     document.documentElement.addEventListener('click', getClickPosition, true);
 }
-export function Modal(props) {
+export const Modal = React.memo((props) => {
     const config = 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(() => getMotionName(prefixCls || config.prefixCls, 'fade'), [config.prefixCls, prefixCls]);
+    const defaultTransitionName = React.useMemo(() => getMotionName(prefixCls || config.prefixCls, 'zoom'), [config.prefixCls, prefixCls]);
     return (React.createElement(Dialog, { className: classNames(className, {
-            [`${prefixCls}-centered`]: centered && !full,
-            [`${prefixCls}-full`]: full && !centered,
-        }), focusTriggerAfterClose: focusTriggerAfterClose, maskTransitionName: getTransitionName(`${config.prefixCls}-motion`, 'fade'), mousePosition: mousePosition, prefixCls: prefixCls, transitionName: getTransitionName(`${config.prefixCls}-motion`, 'zoom'), visible: visible, ...restProps, afterClose: onClosed, closable: false, closeIcon: null },
-        closable && (closeIcon || (React.createElement(Close, { className: classNames({
-                [`${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, { className: classNames({
+                    [`${rootCls}-close-default`]: !full,
+                    [`${rootCls}-close-full`]: full,
+                }), component: "button", onClick: onClose }))),
         children));
-}
+});

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

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

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

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

package/dist/esm/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/esm/components/Nav/Divider.js

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

package/dist/esm/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/esm/components/Nav/Group/InternalNavItemGroup.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { stopEventPropagate } from '@broxus/js-utils';
+import { NavContext } from '../../Nav/context/NavContext';
+export const InternalNavItemGroup = React.memo((props) => {
+    const { children, className, title, ...restProps } = props;
+    const { prefixCls } = React.useContext(NavContext);
+    const groupRootCls = React.useMemo(() => `${prefixCls}-group`, [prefixCls]);
+    const subRootCls = React.useMemo(() => `${prefixCls}-sub`, [prefixCls]);
+    return (React.createElement("li", { className: classNames(groupRootCls, className), role: "presentation", ...restProps, onClick: 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/esm/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/esm/components/Nav/Group/index.js

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

package/dist/esm/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/esm/components/Nav/Header.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { NavContext } from './context/NavContext';
+import { NavContext } from '../Nav/context/NavContext';
 export function Header(props) {
     const { className, ...restProps } = props;
     const { prefixCls } = React.useContext(NavContext);
-    return (React.createElement("li", { className: classNames(`${prefixCls}-header`, className), ...restProps }));
+    return React.createElement("li", { className: classNames(`${prefixCls}-header`, className), ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Header.displayName = 'Nav.Header';

package/dist/esm/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/esm/components/Nav/Item/InternalNavItem.js

@@ -2,67 +2,87 @@ import * as React from 'react';
 import classNames from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';
 import warning from 'rc-util/lib/warning';
-import { useNavId } from '../context/IdContext';
-import { NavContext } from '../context/NavContext';
-import { useFullPath } from '../context/PathContext';
-import useActive from '../hooks/useActive';
-import { LegacyNavItem } from './LegacyNavItem';
-import { warnItemProp } from '../utils/warnUtil';
-export 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);
+import { useConfig } from '../../ConfrigProvider';
+import { useNavId } from '../../Nav/context/IdContext';
+import { NavContext } from '../../Nav/context/NavContext';
+import { useFullPath } from '../../Nav/context/PathContext';
+import { PrivateContext } from '../../Nav/context/PrivateContext';
+import { useActive } from '../../Nav/hooks/useActive';
+import { LegacyNavItem } from '../../Nav/Item/LegacyNavItem';
+import { warnItemProp } from '../../Nav/utils/warnUtil';
+import { useDirectionStyle } from '../../Nav/hooks/useDirectionStyle';
+export const InternalNavItem = React.memo((props) => {
+    const config = useConfig();
+    const { className, children, disabled, eventKey, itemIcon, role, style, warnKey, onClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, ...restProps } = props;
+    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();
     const elementRef = React.useRef();
-    const { active, ...activeProps } = useActive(eventKey, disabled, restProps.onMouseEnter, restProps.onMouseLeave);
+    const mergedDisabled = contextDisabled || disabled;
     const connectedKeys = useFullPath(eventKey);
-    const domDataId = useNavId(eventKey);
-    const selected = eventKey !== undefined && selectedKeys.includes(eventKey);
+    // ================================ Warn ================================
     if (process.env.NODE_ENV !== 'production' && warnKey) {
         warning(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 } = useActive(eventKey, disabled, onMouseEnter, onMouseLeave);
+    // ============================ Select ============================
+    const selected = eventKey ? selectedKeys.includes(eventKey) : false;
+    // ======================== DirectionStyle ========================
+    const directionStyle = useDirectionStyle(connectedKeys.length);
+    // ============================ Events ============================
+    const onInternalClick = event => {
+        if (mergedDisabled) {
             return;
         }
         const info = getEventInfo(event);
-        restProps.onClick?.(warnItemProp(info));
-        onItemClick?.(info);
+        onClick?.(warnItemProp(info));
+        onItemClick(info);
     };
-    const onKeyDown = event => {
-        restProps.onKeyDown?.(event);
+    const onInternalKeyDown = event => {
+        onKeyDown?.(event);
         if (event.which === KeyCode.ENTER) {
             const info = getEventInfo(event);
             // Legacy. Key will also trigger click event
-            restProps.onClick?.(warnItemProp(info));
-            onItemClick?.(info);
+            onClick?.(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, { className: classNames({
-            '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, { "aria-disabled": disabled, className: classNames({
+            [`${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));
-}
+    if (_internalRenderMenuItem) {
+        renderNode = _internalRenderMenuItem(renderNode, props, { selected });
+    }
+    return renderNode;
+});

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

@@ -4,7 +4,7 @@ import omit from 'rc-util/lib/omit';
 import warning from 'rc-util/lib/warning';
 export class LegacyNavItem extends React.Component {
     render() {
-        const { title, attribute, elementRef, ...restProps } = this.props;
+        const { attribute, elementRef, title, ...restProps } = this.props;
         const passedProps = omit(restProps, ['eventKey']);
         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 }));

package/dist/esm/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/esm/components/Nav/Item/index.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { noop } from '@broxus/js-utils';
-import { useFullPath, useMeasure } from '../context/PathContext';
-import { InternalNavItem } from './InternalNavItem';
-export function Item(props) {
+import { useFullPath, useMeasure } from '../../Nav/context/PathContext';
+import { InternalNavItem } from '../../Nav/Item/InternalNavItem';
+export const Item = React.memo((props) => {
     const { eventKey } = props;
     const measure = useMeasure();
     const connectedKeyPath = useFullPath(eventKey);
@@ -14,12 +14,12 @@ export function Item(props) {
             };
         }
         return noop;
-    }, [connectedKeyPath]);
+    }, [connectedKeyPath, eventKey, measure]);
     if (measure) {
         return null;
     }
     return React.createElement(InternalNavItem, { ...props });
-}
+});
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Nav.Item';
 }

package/dist/esm/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>>>;