@broxus/react-uikit 0.1.0

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { NavClickEventHandler, NavHoverEventHandler, NavTitleInfo, RenderIconType } from '../types';
+export interface SubNavProps {
+    className?: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+    title?: React.ReactNode;
+    /** @private Used for rest popup. Do not use in your prod */
+    internalPopupClose?: boolean;
+    /** @private Internal filled key. Do not set it directly */
+    eventKey?: string;
+    /** @private Do not use. Private warning empty usage */
+    warnKey?: boolean;
+    itemIcon?: RenderIconType;
+    expandIcon?: RenderIconType;
+    onMouseEnter?: NavHoverEventHandler;
+    onMouseLeave?: NavHoverEventHandler;
+    popupClassName?: string;
+    popupOffset?: number[];
+    onClick?: NavClickEventHandler;
+    onTitleClick?: (info: NavTitleInfo) => void;
+    onTitleMouseEnter?: NavHoverEventHandler;
+    onTitleMouseLeave?: NavHoverEventHandler;
+}
+export declare function Sub(props: SubNavProps): JSX.Element;
+export declare namespace Sub {
+    var displayName: string;
+}

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

@@ -0,0 +1,189 @@
+"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.Sub = void 0;
+const React = __importStar(require("react"));
+const js_utils_1 = require("@broxus/js-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const rc_overflow_1 = __importDefault(require("rc-overflow"));
+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 useMemoCallback_1 = __importDefault(require("../hooks/useMemoCallback"));
+const InlineSubNavList_1 = require("./InlineSubNavList");
+const PopupTrigger_1 = require("./PopupTrigger");
+const SubNavList_1 = require("./SubNavList");
+const nodeUtil_1 = require("../utils/nodeUtil");
+const warnUtil_1 = require("../utils/warnUtil");
+function InternalSubNav({ children, className, eventKey, expandIcon, internalPopupClose, itemIcon, popupClassName, popupOffset, style, title, warnKey, onClick, onTitleClick, onTitleMouseEnter, onTitleMouseLeave, ...props }) {
+    const domDataId = (0, IdContext_1.useNavId)(eventKey);
+    const { activeKey, disabled = props.disabled, expandIcon: contextExpandIcon, itemIcon: contextItemIcon, mode, openKeys, overflowDisabled, popupPrefixCls, selectedKeys, onActive, onItemClick, onOpenChange, } = React.useContext(NavContext_1.NavContext);
+    const pathUser = React.useContext(PathContext_1.PathUserContext);
+    const connectedPath = (0, PathContext_1.useFullPath)();
+    const elementRef = React.useRef(null);
+    const popupRef = React.useRef();
+    // ================================ Warn ================================
+    if (process.env.NODE_ENV !== 'production' && warnKey) {
+        (0, warning_1.default)(false, 'SubNav should not leave undefined `key`.');
+    }
+    // ================================ Icon ================================
+    const mergedItemIcon = itemIcon || contextItemIcon;
+    const mergedExpandIcon = expandIcon || contextExpandIcon;
+    // ================================ Open ================================
+    const originOpen = eventKey ? openKeys.includes(eventKey) : false;
+    const open = !overflowDisabled && originOpen;
+    // =============================== Select ===============================
+    const childrenSelected = eventKey ? pathUser?.isSubPathKey(selectedKeys, eventKey) : false;
+    // =============================== Active ===============================
+    const { active, ...activeProps } = (0, useActive_1.default)(eventKey, disabled, onTitleMouseEnter, onTitleMouseLeave);
+    // Fallback of active check to avoid hover on menu title or disabled item
+    const [childrenActive, setChildrenActive] = React.useState(false);
+    const triggerChildrenActive = (newActive) => {
+        if (!disabled) {
+            setChildrenActive(newActive);
+        }
+    };
+    const onInternalMouseEnter = domEvent => {
+        triggerChildrenActive(true);
+        if (eventKey) {
+            props.onMouseEnter?.({
+                domEvent,
+                key: eventKey,
+            });
+        }
+    };
+    const onInternalMouseLeave = domEvent => {
+        triggerChildrenActive(false);
+        if (eventKey) {
+            props.onMouseLeave?.({
+                domEvent,
+                key: eventKey,
+            });
+        }
+    };
+    const mergedActive = React.useMemo(() => {
+        if (active) {
+            return active;
+        }
+        if (mode !== 'inline' && eventKey) {
+            return childrenActive || pathUser?.isSubPathKey([activeKey], eventKey);
+        }
+        return false;
+    }, [mode, active, activeKey, childrenActive, eventKey, pathUser?.isSubPathKey]);
+    // =============================== Events ===============================
+    // Title click
+    const onInternalTitleClick = e => {
+        // Skip if disabled
+        if (disabled) {
+            return;
+        }
+        if (eventKey) {
+            onTitleClick?.({
+                domEvent: e,
+                key: eventKey,
+            });
+        }
+        // Trigger open by click when mode is `inline`
+        if (mode === 'inline' && eventKey) {
+            onOpenChange(eventKey, !originOpen);
+        }
+    };
+    // Context for children click
+    const onMergedItemClick = (0, useMemoCallback_1.default)((info) => {
+        onClick?.((0, warnUtil_1.warnItemProp)(info));
+        onItemClick?.(info);
+    });
+    // Visible change
+    const onPopupVisibleChange = (newVisible) => {
+        if (mode !== 'inline' && eventKey) {
+            onOpenChange(eventKey, newVisible);
+        }
+    };
+    /**
+     * Used for accessibility. Helper will focus element without key board.
+     * We should manually trigger an active
+     */
+    const onInternalFocus = () => {
+        if (eventKey) {
+            onActive(eventKey);
+        }
+    };
+    // =============================== Render ===============================
+    const popupId = domDataId ? `${domDataId}-popup` : undefined;
+    // Title
+    let titleNode = (React.createElement("a", { role: disabled ? undefined : 'menuitem', tabIndex: disabled ? undefined : -1, ref: elementRef, title: typeof title === 'string' ? title : undefined, "aria-controls": popupId, "aria-disabled": disabled, "aria-expanded": open, "aria-haspopup": true, "data-nav-id": overflowDisabled && domDataId ? null : domDataId, onClick: onInternalTitleClick, onFocus: onInternalFocus, ...activeProps }, title));
+    // Cache mode if it change to `inline` which do not have popup motion
+    const triggerModeRef = React.useRef(mode);
+    if (mode !== 'inline') {
+        triggerModeRef.current = connectedPath.length > 1 ? 'vertical' : mode;
+    }
+    if (!overflowDisabled) {
+        const triggerMode = triggerModeRef.current;
+        // Still wrap with Trigger here since we need avoid react re-mount dom node
+        // Which makes motion failed
+        titleNode = (React.createElement(PopupTrigger_1.PopupTrigger, { disabled: disabled, mode: triggerMode, popup: (React.createElement(NavContext_1.NavContextProvider
+            // Special handle of horizontal mode
+            , { 
+                // Special handle of horizontal mode
+                mode: triggerMode === 'horizontal' ? 'vertical' : triggerMode },
+                React.createElement(SubNavList_1.SubNavList, { className: (0, classnames_1.default)(`${popupPrefixCls}-nav`), id: popupId, ref: popupRef }, children))), popupClassName: popupClassName, popupOffset: popupOffset, prefixCls: popupPrefixCls, visible: !internalPopupClose && open && mode !== 'inline', onVisibleChange: onPopupVisibleChange }, titleNode));
+    }
+    // Render
+    return (React.createElement(NavContext_1.NavContextProvider, { expandIcon: mergedExpandIcon, itemIcon: mergedItemIcon, mode: mode === 'horizontal' ? 'vertical' : mode, onItemClick: onMergedItemClick },
+        React.createElement(rc_overflow_1.default.Item, { className: (0, classnames_1.default)('uk-parent', className, {
+                'uk-active': childrenSelected,
+                'uk-disabled': disabled,
+                'uk-hover': mergedActive,
+                'uk-open': open,
+            }), role: "none", ...props, component: "li", style: style, onMouseEnter: onInternalMouseEnter, onMouseLeave: onInternalMouseLeave },
+            titleNode,
+            !overflowDisabled && (React.createElement(InlineSubNavList_1.InlineSubNavList, { id: popupId, open: open, keyPath: connectedPath }, children)))));
+}
+// eslint-disable-next-line react/no-multi-comp
+function Sub(props) {
+    const { eventKey, children } = props;
+    const connectedKeyPath = (0, PathContext_1.useFullPath)(eventKey);
+    const childList = (0, nodeUtil_1.parseChildren)(children, connectedKeyPath);
+    const measure = (0, PathContext_1.useMeasure)();
+    React.useEffect(() => {
+        if (measure && eventKey) {
+            measure.registerPath(eventKey, connectedKeyPath);
+            return () => {
+                measure.unregisterPath(eventKey, connectedKeyPath);
+            };
+        }
+        return js_utils_1.noop;
+    }, [connectedKeyPath]);
+    return (React.createElement(PathContext_1.PathTrackerContext.Provider, { value: connectedKeyPath }, measure ? childList : React.createElement(InternalSubNav, { ...props }, childList)));
+}
+exports.Sub = Sub;
+if (process.env.NODE_ENV !== 'production') {
+    Sub.displayName = 'Nav.Sub';
+}

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const IdContext: React.Context<string | undefined>;
+export declare function getNavId(uuid: string | undefined, eventKey: string): string | null;
+export declare function useNavId(eventKey: string | undefined): string | null;

package/dist/cjs/components/Nav/context/IdContext.js

@@ -0,0 +1,43 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavId = exports.getNavId = exports.IdContext = void 0;
+const React = __importStar(require("react"));
+exports.IdContext = React.createContext(undefined);
+function getNavId(uuid, eventKey) {
+    if (uuid === undefined) {
+        return null;
+    }
+    return `${uuid}-${eventKey}`;
+}
+exports.getNavId = getNavId;
+function useNavId(eventKey) {
+    const id = React.useContext(exports.IdContext);
+    if (eventKey === undefined || id == null) {
+        return null;
+    }
+    return getNavId(id, eventKey);
+}
+exports.useNavId = useNavId;

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { CSSMotionProps } from 'rc-motion';
+import type { BuiltinPlacements, NavClickEventHandler, NavMode, RenderIconType, TriggerSubMenuAction } from '../types';
+export interface NavContextProps {
+    activeKey: string;
+    builtinPlacements?: BuiltinPlacements;
+    defaultMotions?: Partial<{
+        [key in NavMode | 'other']: CSSMotionProps;
+    }>;
+    disabled?: boolean;
+    expandIcon?: RenderIconType;
+    forceSubNavRender?: boolean;
+    getPopupContainer: (node: HTMLElement) => HTMLElement;
+    itemIcon?: RenderIconType;
+    mode: NavMode;
+    motion?: CSSMotionProps;
+    openKeys: string[];
+    overflowDisabled?: boolean;
+    popupPrefixCls: string;
+    prefixCls: string;
+    rtl?: boolean;
+    selectedKeys: string[];
+    subNavOpenDelay: number;
+    subNavCloseDelay: number;
+    triggerSubNavAction?: TriggerSubMenuAction;
+    onActive: (key: string) => void;
+    onInactive: (key: string) => void;
+    onItemClick: NavClickEventHandler;
+    onOpenChange: (key: string, open: boolean) => void;
+}
+export declare const NavContext: React.Context<NavContextProps>;
+export interface InheritableContextProps extends Partial<NavContextProps> {
+    children?: React.ReactNode;
+    locked?: boolean;
+}
+export declare function NavContextProvider({ children, locked, ...props }: InheritableContextProps): JSX.Element;

package/dist/cjs/components/Nav/context/NavContext.js

@@ -0,0 +1,60 @@
+"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.NavContextProvider = exports.NavContext = void 0;
+const React = __importStar(require("react"));
+const useMemo_1 = __importDefault(require("rc-util/lib/hooks/useMemo"));
+const shallowequal_1 = __importDefault(require("shallowequal"));
+const ConfrigProvider_1 = require("../../ConfrigProvider");
+exports.NavContext = React.createContext({
+    popupPrefixCls: 'dropdown',
+    prefixCls: 'nav',
+});
+function mergeProps(origin, target) {
+    const clone = { ...origin };
+    Object.keys(target).forEach(key => {
+        // @ts-ignore
+        const value = target[key];
+        if (value !== undefined) {
+            // @ts-ignore
+            clone[key] = value;
+        }
+    });
+    return clone;
+}
+function NavContextProvider({ children, locked, ...props }) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const context = React.useContext(exports.NavContext);
+    const inheritableContext = (0, useMemo_1.default)(() => mergeProps({
+        ...context,
+        popupPrefixCls: `${config.prefixCls}-dropdown`,
+        prefixCls: `${config.prefixCls}-nav`,
+    }, props), [context, props], (prev, next) => !locked && (prev[0] !== next[0] || !(0, shallowequal_1.default)(prev[1], next[1])));
+    return (React.createElement(exports.NavContext.Provider, { value: inheritableContext }, children));
+}
+exports.NavContextProvider = NavContextProvider;

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface PathRegisterContextProps {
+    registerPath: (key: string, keyPath: string[]) => void;
+    unregisterPath: (key: string, keyPath: string[]) => void;
+}
+export declare const PathRegisterContext: React.Context<PathRegisterContextProps | null>;
+export declare function useMeasure(): PathRegisterContextProps | null;
+export declare const PathTrackerContext: React.Context<string[]>;
+export declare function useFullPath(eventKey?: string): string[];
+export interface PathUserContextProps {
+    isSubPathKey: (pathKeys: string[], eventKey: string) => boolean;
+}
+export declare const PathUserContext: React.Context<PathUserContextProps | null>;

package/dist/cjs/components/Nav/context/PathContext.js

@@ -0,0 +1,40 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PathUserContext = exports.useFullPath = exports.PathTrackerContext = exports.useMeasure = exports.PathRegisterContext = void 0;
+const React = __importStar(require("react"));
+const EmptyList = [];
+exports.PathRegisterContext = React.createContext(null);
+function useMeasure() {
+    return React.useContext(exports.PathRegisterContext);
+}
+exports.useMeasure = useMeasure;
+exports.PathTrackerContext = React.createContext(EmptyList);
+function useFullPath(eventKey) {
+    const parentKeyPath = React.useContext(exports.PathTrackerContext);
+    return React.useMemo(() => (eventKey !== undefined ? [...parentKeyPath, eventKey] : parentKeyPath), [parentKeyPath, eventKey]);
+}
+exports.useFullPath = useFullPath;
+exports.PathUserContext = React.createContext(null);

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { NavMode } from '../types';
+export default function useAccessibility<T extends HTMLElement>(mode: NavMode, activeKey: string, isRtl: boolean, id: string, containerRef: React.RefObject<HTMLUListElement>, getKeys: () => string[], getKeyPath: (key: string, includeOverflow?: boolean) => string[], triggerActiveKey: (key: string) => void, triggerAccessibilityOpen: (key: string, open?: boolean) => void, originOnKeyDown?: React.KeyboardEventHandler<T>): React.KeyboardEventHandler<T>;