@broxus/react-uikit 0.1.0 → 0.1.1

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

@@ -1,29 +0,0 @@
-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

@@ -1,189 +0,0 @@
-"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

@@ -1,4 +0,0 @@
-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

@@ -1,43 +0,0 @@
-"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

@@ -1,36 +0,0 @@
-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

@@ -1,60 +0,0 @@
-"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

@@ -1,13 +0,0 @@
-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

@@ -1,40 +0,0 @@
-"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

@@ -1,3 +0,0 @@
-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>;