@broxus/react-uikit 0.1.1 → 0.1.2

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

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

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import warning from 'rc-util/lib/warning';
+import { nextSlice } from '../utils/timeUtil';
+const PATH_SPLIT = '__RC_UTIL_PATH_SPLIT__';
+const getPathStr = (keyPath) => keyPath.join(PATH_SPLIT);
+const getPathKeys = (keyPathStr) => keyPathStr.split(PATH_SPLIT);
+export const OVERFLOW_KEY = 'rc-menu-more';
+export default function useKeyRecords() {
+    const [, internalForceUpdate] = React.useState({});
+    const key2pathRef = React.useRef(new Map());
+    const path2keyRef = React.useRef(new Map());
+    const [overflowKeys, setOverflowKeys] = React.useState([]);
+    const updateRef = React.useRef(0);
+    const destroyRef = React.useRef(false);
+    const forceUpdate = () => {
+        if (!destroyRef.current) {
+            internalForceUpdate({});
+        }
+    };
+    const registerPath = React.useCallback((key, keyPath) => {
+        // Warning for invalidate or duplicated `key`
+        if (process.env.NODE_ENV !== 'production') {
+            warning(!key2pathRef.current.has(key), `Duplicated key '${key}' used in Menu by path [${keyPath.join(' > ')}]`);
+        }
+        // Fill map
+        const connectedPath = getPathStr(keyPath);
+        path2keyRef.current.set(connectedPath, key);
+        key2pathRef.current.set(key, connectedPath);
+        updateRef.current += 1;
+        const id = updateRef.current;
+        nextSlice(() => {
+            if (id === updateRef.current) {
+                forceUpdate();
+            }
+        });
+    }, []);
+    const unregisterPath = React.useCallback((key, keyPath) => {
+        const connectedPath = getPathStr(keyPath);
+        path2keyRef.current.delete(connectedPath);
+        key2pathRef.current.delete(key);
+    }, []);
+    const refreshOverflowKeys = React.useCallback((keys) => {
+        setOverflowKeys(keys);
+    }, []);
+    const getKeyPath = React.useCallback((eventKey, includeOverflow) => {
+        const fullPath = key2pathRef.current.get(eventKey) || '';
+        const keys = getPathKeys(fullPath);
+        if (includeOverflow && overflowKeys.includes(keys[0])) {
+            keys.unshift(OVERFLOW_KEY);
+        }
+        return keys;
+    }, [overflowKeys]);
+    const isSubPathKey = React.useCallback((pathKeys, eventKey) => pathKeys.some(pathKey => {
+        const pathKeyList = getKeyPath(pathKey, true);
+        return pathKeyList.includes(eventKey);
+    }), [getKeyPath]);
+    const getKeys = () => {
+        const keys = [...key2pathRef.current.keys()];
+        if (overflowKeys.length) {
+            keys.push(OVERFLOW_KEY);
+        }
+        return keys;
+    };
+    /** Find current key related child path keys */
+    const getSubPathKeys = React.useCallback((key) => {
+        const connectedPath = `${key2pathRef.current.get(key)}${PATH_SPLIT}`;
+        const pathKeys = new Set();
+        [...path2keyRef.current.keys()].forEach(pathKey => {
+            if (pathKey.startsWith(connectedPath)) {
+                pathKeys.add(path2keyRef.current.get(pathKey));
+            }
+        });
+        return pathKeys;
+    }, []);
+    React.useEffect(() => () => {
+        destroyRef.current = true;
+    }, []);
+    return {
+        getKeyPath,
+        getKeys,
+        getSubPathKeys,
+        isSubPathKey,
+        refreshOverflowKeys,
+        registerPath,
+        unregisterPath,
+    };
+}

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

@@ -0,0 +1,5 @@
+/**
+ * Cache callback function that always return same ref instead.
+ * This is used for context optimization.
+ */
+export default function useMemoCallback<T extends (...args: any[]) => void>(func: T): T;

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+/**
+ * Cache callback function that always return same ref instead.
+ * This is used for context optimization.
+ */
+export default function useMemoCallback(func) {
+    const funRef = React.useRef(func);
+    funRef.current = func;
+    const callback = React.useCallback(((...args) => funRef.current?.(...args)), []);
+    return typeof func === 'function' ? callback : undefined;
+}

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

@@ -0,0 +1 @@
+export default function useUUID(id?: string): string | undefined;

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+const uniquePrefix = Math.random().toFixed(5).toString().slice(2);
+let internalId = 0;
+export default function useUUID(id) {
+    const [uuid, setUUID] = useMergedState(id, {
+        value: id,
+    });
+    React.useEffect(() => {
+        internalId += 1;
+        const newId = process.env.NODE_ENV === 'test'
+            ? 'test'
+            : `${uniquePrefix}-${internalId}`;
+        setUUID(`uk-nav-uuid-${newId}`);
+    }, []);
+    return uuid;
+}

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Divider } from './Divider';
+import { Group } from './Group';
+import { Header } from './Header';
+import { Item } from './Item';
+import { Sub } from './Sub';
+import type { NavProps } from './Nav';
+import './index.scss';
+export type { NavProps };
+export interface CompoundedNav extends React.FunctionComponent<NavProps> {
+    Divider: typeof Divider;
+    Group: typeof Group;
+    Header: typeof Header;
+    Item: typeof Item;
+    Sub: typeof Sub;
+}
+export declare const Nav: CompoundedNav;

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

@@ -0,0 +1,13 @@
+import { Divider } from './Divider';
+import { Group } from './Group';
+import { Header } from './Header';
+import { Item } from './Item';
+import { Nav as InternalNav } from './Nav';
+import { Sub } from './Sub';
+import './index.scss';
+export const Nav = InternalNav;
+Nav.Divider = Divider;
+Nav.Group = Group;
+Nav.Header = Header;
+Nav.Item = Item;
+Nav.Sub = Sub;

package/dist/esm/components/Nav/placements.d.ts

@@ -0,0 +1,69 @@
+export declare const placements: {
+    'bottom-left': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+    'left-top': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+    'right-top': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+    'top-left': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+};
+export declare const placementsRtl: {
+    'bottom-left': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+    'left-top': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+    'right-top': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+    'top-left': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+};
+export default placements;

package/dist/esm/components/Nav/placements.js

@@ -0,0 +1,49 @@
+const autoAdjustOverflow = {
+    adjustX: 1,
+    adjustY: 1,
+};
+export const placements = {
+    'bottom-left': {
+        offset: [0, 7],
+        overflow: autoAdjustOverflow,
+        points: ['tl', 'bl'],
+    },
+    'left-top': {
+        offset: [-4, 0],
+        overflow: autoAdjustOverflow,
+        points: ['tr', 'tl'],
+    },
+    'right-top': {
+        offset: [4, 0],
+        overflow: autoAdjustOverflow,
+        points: ['tl', 'tr'],
+    },
+    'top-left': {
+        offset: [0, -7],
+        overflow: autoAdjustOverflow,
+        points: ['bl', 'tl'],
+    },
+};
+export const placementsRtl = {
+    'bottom-left': {
+        offset: [0, 7],
+        overflow: autoAdjustOverflow,
+        points: ['tl', 'bl'],
+    },
+    'left-top': {
+        offset: [4, 0],
+        overflow: autoAdjustOverflow,
+        points: ['tl', 'tr'],
+    },
+    'right-top': {
+        offset: [-4, 0],
+        overflow: autoAdjustOverflow,
+        points: ['tr', 'tl'],
+    },
+    'top-left': {
+        offset: [0, -7],
+        overflow: autoAdjustOverflow,
+        points: ['bl', 'tl'],
+    },
+};
+export default placements;

package/dist/esm/components/Nav/types.d.ts

@@ -0,0 +1,32 @@
+import type * as React from 'react';
+export declare type NavMode = 'inline' | 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal';
+export declare type NavModifier = 'default' | 'primary' | 'center' | 'divider';
+export declare type BuiltinPlacements = Record<string, any>;
+export declare type TriggerSubMenuAction = 'click' | 'hover';
+export interface RenderIconInfo {
+    disabled?: boolean;
+    isOpen?: boolean;
+    isSelected?: boolean;
+    isSubMenu?: boolean;
+}
+export declare type RenderIconType = React.ReactNode | ((props: RenderIconInfo) => React.ReactNode);
+export interface NavInfo {
+    domEvent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
+    /** @deprecated This will not support in future. You should avoid to use this */
+    item: React.ReactInstance;
+    key: string;
+    keyPath: string[];
+}
+export interface NavTitleInfo {
+    domEvent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
+    key: string;
+}
+export declare type NavHoverEventHandler = (info: {
+    domEvent: React.MouseEvent<HTMLElement>;
+    key: string;
+}) => void;
+export interface SelectInfo extends NavInfo {
+    selectedKeys: string[];
+}
+export declare type SelectEventHandler = (info: SelectInfo) => void;
+export declare type NavClickEventHandler = (info: NavInfo) => void;

package/dist/esm/components/Nav/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Nav/utils/alignUtil.d.ts

@@ -0,0 +1,3 @@
+import type { AlignType, BuildInPlacements } from 'rc-trigger/lib/interface';
+export declare function getAlignFromPlacement(builtinPlacements: BuildInPlacements, placementStr: string, align: AlignType): AlignType;
+export declare function getAlignPopupClassName(builtinPlacements: BuildInPlacements, prefixCls: string, align: AlignType, isAlignPoint: boolean): string;

package/dist/esm/components/Nav/utils/alignUtil.js

@@ -0,0 +1,25 @@
+function isPointsEq(a1, a2, isAlignPoint) {
+    if (isAlignPoint) {
+        return a1[0] === a2[0];
+    }
+    return a1[0] === a2[0] && a1[1] === a2[1];
+}
+export function getAlignFromPlacement(builtinPlacements, placementStr, align) {
+    const baseAlign = builtinPlacements[placementStr] || {};
+    return {
+        ...baseAlign,
+        ...align,
+    };
+}
+export function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
+    const { points } = align;
+    const placements = Object.keys(builtinPlacements);
+    for (let i = 0; i < placements.length; i += 1) {
+        const placement = placements[i];
+        // @ts-ignore
+        if (isPointsEq(builtinPlacements[placement].points, points, isAlignPoint)) {
+            return `${prefixCls}-${placement}`;
+        }
+    }
+    return '';
+}

package/dist/esm/components/Nav/utils/motionUtil.d.ts

@@ -0,0 +1,2 @@
+import type { CSSMotionProps } from 'rc-motion';
+export declare function getMotion(mode: string, motion?: CSSMotionProps, defaultMotions?: Record<string, CSSMotionProps>): CSSMotionProps | undefined;