@broxus/react-uikit 0.1.0

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

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { noop } from '@broxus/js-utils';
+import classNames from 'classnames';
+import Overflow from 'rc-overflow';
+import warning from 'rc-util/lib/warning';
+import { useNavId } from '../context/IdContext';
+import { NavContext, NavContextProvider } from '../context/NavContext';
+import { PathTrackerContext, PathUserContext, useFullPath, useMeasure, } from '../context/PathContext';
+import useActive from '../hooks/useActive';
+import useMemoCallback from '../hooks/useMemoCallback';
+import { InlineSubNavList } from './InlineSubNavList';
+import { PopupTrigger } from './PopupTrigger';
+import { SubNavList } from './SubNavList';
+import { parseChildren } from '../utils/nodeUtil';
+import { warnItemProp } from '../utils/warnUtil';
+function InternalSubNav({ children, className, eventKey, expandIcon, internalPopupClose, itemIcon, popupClassName, popupOffset, style, title, warnKey, onClick, onTitleClick, onTitleMouseEnter, onTitleMouseLeave, ...props }) {
+    const domDataId = useNavId(eventKey);
+    const { activeKey, disabled = props.disabled, expandIcon: contextExpandIcon, itemIcon: contextItemIcon, mode, openKeys, overflowDisabled, popupPrefixCls, selectedKeys, onActive, onItemClick, onOpenChange, } = React.useContext(NavContext);
+    const pathUser = React.useContext(PathUserContext);
+    const connectedPath = useFullPath();
+    const elementRef = React.useRef(null);
+    const popupRef = React.useRef();
+    // ================================ Warn ================================
+    if (process.env.NODE_ENV !== 'production' && warnKey) {
+        warning(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 } = useActive(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 = useMemoCallback((info) => {
+        onClick?.(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, { disabled: disabled, mode: triggerMode, popup: (React.createElement(NavContextProvider
+            // Special handle of horizontal mode
+            , { 
+                // Special handle of horizontal mode
+                mode: triggerMode === 'horizontal' ? 'vertical' : triggerMode },
+                React.createElement(SubNavList, { className: classNames(`${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(NavContextProvider, { expandIcon: mergedExpandIcon, itemIcon: mergedItemIcon, mode: mode === 'horizontal' ? 'vertical' : mode, onItemClick: onMergedItemClick },
+        React.createElement(Overflow.Item, { className: classNames('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, { id: popupId, open: open, keyPath: connectedPath }, children)))));
+}
+// eslint-disable-next-line react/no-multi-comp
+export function Sub(props) {
+    const { eventKey, children } = props;
+    const connectedKeyPath = useFullPath(eventKey);
+    const childList = parseChildren(children, connectedKeyPath);
+    const measure = useMeasure();
+    React.useEffect(() => {
+        if (measure && eventKey) {
+            measure.registerPath(eventKey, connectedKeyPath);
+            return () => {
+                measure.unregisterPath(eventKey, connectedKeyPath);
+            };
+        }
+        return noop;
+    }, [connectedKeyPath]);
+    return (React.createElement(PathTrackerContext.Provider, { value: connectedKeyPath }, measure ? childList : React.createElement(InternalSubNav, { ...props }, childList)));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Sub.displayName = 'Nav.Sub';
+}

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export const IdContext = React.createContext(undefined);
+export function getNavId(uuid, eventKey) {
+    if (uuid === undefined) {
+        return null;
+    }
+    return `${uuid}-${eventKey}`;
+}
+export function useNavId(eventKey) {
+    const id = React.useContext(IdContext);
+    if (eventKey === undefined || id == null) {
+        return null;
+    }
+    return getNavId(id, eventKey);
+}

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import useMemo from 'rc-util/lib/hooks/useMemo';
+import shallowEqual from 'shallowequal';
+import { useConfig } from '../../ConfrigProvider';
+export const 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;
+}
+export function NavContextProvider({ children, locked, ...props }) {
+    const config = useConfig();
+    const context = React.useContext(NavContext);
+    const inheritableContext = useMemo(() => mergeProps({
+        ...context,
+        popupPrefixCls: `${config.prefixCls}-dropdown`,
+        prefixCls: `${config.prefixCls}-nav`,
+    }, props), [context, props], (prev, next) => !locked && (prev[0] !== next[0] || !shallowEqual(prev[1], next[1])));
+    return (React.createElement(NavContext.Provider, { value: inheritableContext }, children));
+}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+const EmptyList = [];
+export const PathRegisterContext = React.createContext(null);
+export function useMeasure() {
+    return React.useContext(PathRegisterContext);
+}
+export const PathTrackerContext = React.createContext(EmptyList);
+export function useFullPath(eventKey) {
+    const parentKeyPath = React.useContext(PathTrackerContext);
+    return React.useMemo(() => (eventKey !== undefined ? [...parentKeyPath, eventKey] : parentKeyPath), [parentKeyPath, eventKey]);
+}
+export const PathUserContext = React.createContext(null);

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

package/dist/esm/components/Nav/hooks/useAccessibility.js

@@ -0,0 +1,268 @@
+import * as React from 'react';
+import KeyCode from 'rc-util/lib/KeyCode';
+import raf from 'rc-util/lib/raf';
+import { getFocusNodeList } from 'rc-util/lib/Dom/focus';
+import { getNavId } from '../context/IdContext';
+// destruct to reduce minify size
+const { LEFT, RIGHT, UP, DOWN, ENTER, ESC } = KeyCode;
+const ArrowKeys = [UP, DOWN, LEFT, RIGHT];
+function getOffset(mode, isRootLevel, isRtl, which) {
+    const prev = 'prev';
+    const next = 'next';
+    const children = 'children';
+    const parent = 'parent';
+    // Inline enter is special that we use unique operation
+    if (mode === 'inline' && which === ENTER) {
+        return {
+            inlineTrigger: true,
+        };
+    }
+    const inline = {
+        [DOWN]: next,
+        [UP]: prev,
+    };
+    const horizontal = {
+        [DOWN]: children,
+        [ENTER]: children,
+        [LEFT]: isRtl ? next : prev,
+        [RIGHT]: isRtl ? prev : next,
+    };
+    const vertical = {
+        [DOWN]: next,
+        [ENTER]: children,
+        [ESC]: parent,
+        [LEFT]: isRtl ? children : parent,
+        [RIGHT]: isRtl ? parent : children,
+        [UP]: prev,
+    };
+    const offsets = {
+        horizontal,
+        horizontalSub: vertical,
+        inline,
+        inlineSub: inline,
+        vertical,
+        verticalSub: vertical,
+    };
+    const type = offsets[`${mode}${isRootLevel ? '' : 'Sub'}`]?.[which];
+    switch (type) {
+        case prev:
+            return {
+                offset: -1,
+                sibling: true,
+            };
+        case next:
+            return {
+                offset: 1,
+                sibling: true,
+            };
+        case parent:
+            return {
+                offset: -1,
+                sibling: false,
+            };
+        case children:
+            return {
+                offset: 1,
+                sibling: false,
+            };
+        default:
+            return null;
+    }
+}
+function findContainerUL(element) {
+    let current = element;
+    while (current) {
+        if (current.getAttribute('data-nav-list')) {
+            return current;
+        }
+        current = current.parentElement;
+    }
+    // Normally should not reach this line
+    /* istanbul ignore next */
+    return null;
+}
+/**
+ * Find focused element within element set provided
+ */
+function getFocusElement(activeElement, elements) {
+    let current = activeElement || document.activeElement;
+    while (current) {
+        if (elements.has(current)) {
+            return current;
+        }
+        current = current.parentElement;
+    }
+    return null;
+}
+/**
+ * Get focusable elements from the element set under provided container
+ */
+function getFocusableElements(container, elements) {
+    const list = getFocusNodeList(container, true);
+    return list.filter(ele => elements.has(ele));
+}
+function getNextFocusElement(parentQueryContainer, elements, focusMenuElement, offset = 1) {
+    // Key on the menu item will not get validate parent container
+    if (!parentQueryContainer) {
+        return null;
+    }
+    // List current level menu item elements
+    const sameLevelFocusableMenuElementList = getFocusableElements(parentQueryContainer, elements);
+    // Find next focus index
+    const count = sameLevelFocusableMenuElementList.length;
+    let focusIndex = sameLevelFocusableMenuElementList.findIndex(ele => focusMenuElement === ele);
+    if (offset < 0) {
+        if (focusIndex === -1) {
+            focusIndex = count - 1;
+        }
+        else {
+            focusIndex -= 1;
+        }
+    }
+    else if (offset > 0) {
+        focusIndex += 1;
+    }
+    focusIndex = (focusIndex + count) % count;
+    // Focus menu item
+    return sameLevelFocusableMenuElementList[focusIndex];
+}
+export default function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, getKeyPath, triggerActiveKey, triggerAccessibilityOpen, originOnKeyDown) {
+    const rafRef = React.useRef();
+    const activeRef = React.useRef();
+    activeRef.current = activeKey;
+    const cleanRaf = () => {
+        raf.cancel(rafRef.current);
+    };
+    React.useEffect(() => () => {
+        cleanRaf();
+    }, []);
+    return event => {
+        const { which } = event;
+        if ([...ArrowKeys, ENTER, ESC].includes(which)) {
+            // Convert key to elements
+            let elements = new Set(), key2element = new Map(), element2key = new Map();
+            // >>> Wrap as function since we use raf for some case
+            const refreshElements = () => {
+                elements = new Set();
+                key2element = new Map();
+                element2key = new Map();
+                const keys = getKeys();
+                keys.forEach(key => {
+                    const element = document.querySelector(`[data-nav-id='${getNavId(id, key)}']`);
+                    if (element) {
+                        elements.add(element);
+                        element2key.set(element, key);
+                        key2element.set(key, element);
+                    }
+                });
+                return elements;
+            };
+            refreshElements();
+            // First we should find current focused MenuItem/SubMenu element
+            const activeElement = key2element.get(activeKey);
+            const focusMenuElement = getFocusElement(activeElement, elements);
+            const focusMenuKey = focusMenuElement ? element2key.get(focusMenuElement) : undefined;
+            const offsetObj = getOffset(mode, focusMenuKey !== undefined && getKeyPath(focusMenuKey, true).length === 1, isRtl, which);
+            // Some mode do not have fully arrow operation like inline
+            if (!offsetObj) {
+                return;
+            }
+            // Arrow prevent default to avoid page scroll
+            if (ArrowKeys.includes(which)) {
+                event.preventDefault();
+            }
+            const tryFocus = (menuElement) => {
+                if (menuElement) {
+                    let focusTargetElement = menuElement;
+                    // Focus to link instead of menu item if possible
+                    const link = menuElement.querySelector('a');
+                    if (link?.getAttribute('href')) {
+                        focusTargetElement = link;
+                    }
+                    const targetKey = element2key.get(menuElement);
+                    if (targetKey !== undefined) {
+                        triggerActiveKey(targetKey);
+                    }
+                    /**
+                     * Do not `useEffect` here since `tryFocus` may trigger async
+                     * which makes React sync update the `activeKey`
+                     * that force render before `useRef` set the next activeKey
+                     */
+                    cleanRaf();
+                    rafRef.current = raf(() => {
+                        if (activeRef.current === targetKey) {
+                            focusTargetElement.focus();
+                        }
+                    });
+                }
+            };
+            if (offsetObj.sibling || !focusMenuElement) {
+                // ========================== Sibling ==========================
+                // Find walkable focus menu element container
+                let parentQueryContainer;
+                if (!focusMenuElement || mode === 'inline') {
+                    parentQueryContainer = containerRef.current;
+                }
+                else {
+                    parentQueryContainer = findContainerUL(focusMenuElement);
+                }
+                if (parentQueryContainer == null) {
+                    return;
+                }
+                // Get next focus element
+                const targetElement = getNextFocusElement(parentQueryContainer, 
+                // @ts-ignore
+                elements, 
+                // @ts-ignore
+                focusMenuElement, offsetObj.offset);
+                if (targetElement == null) {
+                    return;
+                }
+                // Focus menu item
+                tryFocus(targetElement);
+            }
+            // ======================= InlineTrigger =======================
+            else if (offsetObj.inlineTrigger && focusMenuKey !== undefined) {
+                // Inline trigger no need switch to sub menu item
+                triggerAccessibilityOpen(focusMenuKey);
+            }
+            // =========================== Level ===========================
+            else if (offsetObj.offset && focusMenuKey !== undefined) {
+                triggerAccessibilityOpen(focusMenuKey, true);
+                cleanRaf();
+                rafRef.current = raf(() => {
+                    // Async should re-sync elements
+                    refreshElements();
+                    const controlId = focusMenuElement.getAttribute('aria-controls');
+                    if (controlId == null) {
+                        return;
+                    }
+                    const subQueryContainer = document.getElementById(controlId);
+                    if (subQueryContainer == null) {
+                        return;
+                    }
+                    // Get sub focusable menu item
+                    const targetElement = getNextFocusElement(subQueryContainer, elements);
+                    if (targetElement == null) {
+                        return;
+                    }
+                    // Focus menu item
+                    tryFocus(targetElement);
+                }, 5);
+            }
+            else if ((!offsetObj.offset || offsetObj.offset < 0) && focusMenuKey !== undefined) {
+                const keyPath = getKeyPath(focusMenuKey, true);
+                const parentKey = keyPath[keyPath.length - 2];
+                const parentMenuElement = key2element.get(parentKey);
+                // Focus menu item
+                triggerAccessibilityOpen(parentKey, false);
+                if (parentMenuElement == null) {
+                    return;
+                }
+                tryFocus(parentMenuElement);
+            }
+        }
+        // Pass origin key down event
+        originOnKeyDown?.(event);
+    };
+}

package/dist/esm/components/Nav/hooks/useActive.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { NavHoverEventHandler } from '../types';
+interface ActiveObj {
+    active: boolean;
+    onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLElement>;
+}
+export default function useActive(eventKey?: string, disabled?: boolean, onMouseEnter?: NavHoverEventHandler, onMouseLeave?: NavHoverEventHandler): ActiveObj;
+export {};

package/dist/esm/components/Nav/hooks/useActive.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { NavContext } from '../context/NavContext';
+export default function useActive(eventKey, disabled, onMouseEnter, onMouseLeave) {
+    if (eventKey === undefined) {
+        return { active: false };
+    }
+    const { 
+    // Active
+    activeKey, onActive, onInactive, } = React.useContext(NavContext);
+    const ret = {
+        active: activeKey === eventKey,
+    };
+    // Skip when disabled
+    if (!disabled) {
+        ret.onMouseEnter = domEvent => {
+            onMouseEnter?.({
+                domEvent,
+                key: eventKey,
+            });
+            onActive(eventKey);
+        };
+        ret.onMouseLeave = domEvent => {
+            onMouseLeave?.({
+                domEvent,
+                key: eventKey,
+            });
+            onInactive(eventKey);
+        };
+    }
+    return ret;
+}

package/dist/esm/components/Nav/hooks/useKeyRecords.d.ts

@@ -0,0 +1,12 @@
+export declare const OVERFLOW_KEY = "rc-menu-more";
+declare type KeyRecords = {
+    registerPath: (key: string, keyPath: string[]) => void;
+    unregisterPath: (key: string, keyPath: string[]) => void;
+    refreshOverflowKeys: (keys: string[]) => void;
+    isSubPathKey: (pathKeys: string[], eventKey: string) => boolean;
+    getKeyPath: (eventKey: string, includeOverflow?: (boolean | undefined)) => string[];
+    getKeys: () => string[];
+    getSubPathKeys: (key: string) => Set<string>;
+};
+export default function useKeyRecords(): KeyRecords;
+export {};