@broxus/react-uikit 0.1.0 → 0.1.1

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

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

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

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

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

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

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

@@ -1,5 +0,0 @@
-/**
- * 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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