@broxus/react-uikit 0.21.0 → 0.23.0

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

@@ -1,172 +1,12 @@
 import { noop } from '@broxus/js-utils';
-import warning from '@rc-component/util/lib/warning';
-import classNames from 'classnames';
-import Overflow from 'rc-overflow';
 import * as React from 'react';
-import { useNavId } from '../../../components/Nav/context/IdContext';
-import { NavContext, NavContextProvider } from '../../../components/Nav/context/NavContext';
-import { PathTrackerContext, PathUserContext, useFullPath, useMeasure, } from '../../../components/Nav/context/PathContext';
-import { PrivateContext } from '../../../components/Nav/context/PrivateContext';
-import { useActive } from '../../../components/Nav/hooks/useActive';
-import { useDirectionStyle } from '../../../components/Nav/hooks/useDirectionStyle';
-import { useMemoCallback } from '../../../components/Nav/hooks/useMemoCallback';
-import { InlineSubNavList } from '../../../components/Nav/Sub/InlineSubNavList';
-import { PopupTrigger } from '../../../components/Nav/Sub/PopupTrigger';
-import { SubNavList } from '../../../components/Nav/Sub/SubNavList';
-import { parseChildren } from '../../../components/Nav/utils/nodeUtil';
-import { warnItemProp } from '../../../components/Nav/utils/warnUtil';
-function InternalSubNav(props) {
-    const { children, className, disabled, eventKey, expandIcon, internalPopupClose, itemIcon, popupClassName, popupOffset, style, title, warnKey, onClick, onMouseEnter, onMouseLeave, onTitleClick, onTitleMouseEnter, onTitleMouseLeave, ...restProps } = props;
-    const domDataId = useNavId(eventKey);
-    const { activeKey, disabled: contextDisabled, expandIcon: contextExpandIcon, itemIcon: contextItemIcon, mode, openKeys, overflowDisabled, popupPrefixCls, selectedKeys, onActive, onItemClick, onOpenChange, } = React.useContext(NavContext);
-    const pathUser = React.useContext(PathUserContext);
-    const connectedPath = useFullPath();
-    const { _internalRenderSubMenuItem } = React.useContext(PrivateContext);
-    const mergedDisabled = contextDisabled || disabled;
-    const elementRef = React.useRef(null);
-    const popupRef = React.useRef(null);
-    // ================================ 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) {
-            onMouseEnter?.({
-                domEvent,
-                key: eventKey,
-            });
-        }
-    };
-    const onInternalMouseLeave = domEvent => {
-        triggerChildrenActive(false);
-        if (eventKey) {
-            onMouseLeave?.({
-                domEvent,
-                key: eventKey,
-            });
-        }
-    };
-    const mergedActive = React.useMemo(() => {
-        if (active) {
-            return active;
-        }
-        if (mode !== 'inline' && eventKey) {
-            return childrenActive || pathUser?.isSubPathKey([activeKey], eventKey);
-        }
-        return false;
-    }, [active, mode, eventKey, childrenActive, pathUser, activeKey]);
-    // ========================== DirectionStyle ==========================
-    const directionStyle = useDirectionStyle(connectedPath.length);
-    // =============================== 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 keyboard.
-     * We should manually trigger an active
-     */
-    const onInternalFocus = () => {
-        if (eventKey) {
-            onActive(eventKey);
-        }
-    };
-    // =============================== Render ===============================
-    const popupId = domDataId ? `${domDataId}-dropdown` : undefined;
-    // Title
-    let titleNode = (React.createElement("a", { ref: elementRef, "aria-controls": popupId, "aria-disabled": disabled, "aria-expanded": open, "aria-haspopup": true, "data-nav-id": overflowDisabled && domDataId ? null : domDataId, role: disabled ? undefined : 'menuitem', style: { ...directionStyle }, tabIndex: disabled ? undefined : -1, title: typeof title === 'string' ? title : undefined, onClick: onInternalTitleClick, onFocus: onInternalFocus, ...activeProps },
-        React.createElement(React.Fragment, { key: "children" },
-            title,
-            typeof mergedExpandIcon === 'function' ? mergedExpandIcon({
-                disabled,
-                isOpen: open,
-                isSubNav: true,
-            }) : mergedExpandIcon)));
-    // Cache mode if it changes to `inline` which do not have popup motion
-    const triggerModeRef = React.useRef(mode);
-    if (mode !== 'inline' && connectedPath.length > 1) {
-        triggerModeRef.current = 'vertical';
-    }
-    else {
-        triggerModeRef.current = 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, { ref: popupRef, className: `${popupPrefixCls}-nav`, id: popupId }, children))), popupClassName: popupClassName, popupOffset: popupOffset, prefixCls: popupPrefixCls, visible: !internalPopupClose && open && mode !== 'inline', onVisibleChange: onPopupVisibleChange }, titleNode));
-    }
-    // List node
-    let listNode = (React.createElement(Overflow.Item, { className: classNames('uk-parent', className, {
-            'uk-active': childrenSelected,
-            'uk-disabled': disabled,
-            'uk-hover': mergedActive,
-            'uk-open': open,
-        }), role: "none", ...restProps, component: "li", style: style, onMouseEnter: onInternalMouseEnter, onMouseLeave: onInternalMouseLeave },
-        titleNode,
-        !overflowDisabled && (React.createElement(InlineSubNavList, { id: popupId, keyPath: connectedPath, open: open }, children))));
-    if (_internalRenderSubMenuItem) {
-        listNode = _internalRenderSubMenuItem(listNode, props, {
-            active: !!mergedActive,
-            disabled: !!mergedDisabled,
-            open,
-            selected: !!childrenSelected,
-        });
-    }
-    return (React.createElement(NavContextProvider, { expandIcon: mergedExpandIcon, itemIcon: mergedItemIcon, mode: mode === 'horizontal' ? 'vertical' : mode, onItemClick: onMergedItemClick }, listNode));
-}
-// eslint-disable-next-line react/no-multi-comp
-export function Sub({ children, eventKey, ...restProps }) {
+import { PathTrackerContext, useFullPath, useMeasure } from '../../../components/Nav/context';
+import { InternalSubNav } from '../../../components/Nav/Sub/InternalSubNav';
+import { parseChildren } from '../../../components/Nav/utils';
+export const Sub = React.forwardRef(({ children, eventKey, ...props }, ref) => {
     const connectedKeyPath = useFullPath(eventKey);
-    const childList = parseChildren(children, connectedKeyPath);
     const measure = useMeasure();
+    const childList = parseChildren(children, connectedKeyPath);
     React.useEffect(() => {
         if (measure && eventKey) {
             measure.registerPath(eventKey, connectedKeyPath);
@@ -176,8 +16,8 @@ export function Sub({ children, eventKey, ...restProps }) {
         }
         return noop;
     }, [connectedKeyPath, eventKey, measure]);
-    return (React.createElement(PathTrackerContext.Provider, { value: connectedKeyPath }, measure ? childList : React.createElement(InternalSubNav, { eventKey: eventKey, ...restProps }, childList)));
-}
+    return (React.createElement(PathTrackerContext.Provider, { value: connectedKeyPath }, measure ? childList : (React.createElement(InternalSubNav, { ref: ref, eventKey: eventKey, ...props }, childList))));
+});
 if (process.env.NODE_ENV !== 'production') {
     Sub.displayName = 'Nav.Sub';
 }

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

@@ -1,9 +1,11 @@
 import { type CSSMotionProps } from '@rc-component/motion';
 import * as React from 'react';
-import { type BuiltinPlacements, type NavClickEventHandler, type NavMode, type RenderIconType, type TriggerSubNavAction } from '../../../components/Nav/types';
+import { type SemanticName } from '../../../components/Nav/Sub/InternalSubNav';
+import { type BuiltinPlacements, type NavClickEventHandler, type NavMode, type NavPopupRender, type RenderIconType, type TriggerSubNavAction } from '../../../components/Nav/types';
 export interface NavContextProps {
     activeKey: string;
     builtinPlacements?: BuiltinPlacements;
+    classNames?: Partial<Record<SemanticName, string>>;
     defaultMotions?: Partial<{
         [key in NavMode | 'other']: CSSMotionProps;
     }>;
@@ -18,9 +20,12 @@ export interface NavContextProps {
     openKeys: string[];
     overflowDisabled?: boolean;
     popupPrefixCls: string;
+    popupRender?: NavPopupRender;
     prefixCls: string;
+    rootClassName?: string;
     rtl?: boolean;
     selectedKeys: string[];
+    styles?: Partial<Record<SemanticName, React.CSSProperties>>;
     subNavCloseDelay: number;
     subNavOpenDelay: number;
     triggerSubNavAction?: TriggerSubNavAction;
@@ -31,7 +36,6 @@ export interface NavContextProps {
 }
 export declare const NavContext: React.Context<NavContextProps>;
 export interface InheritableContextProps extends Partial<NavContextProps> {
-    children?: React.ReactNode;
     locked?: boolean;
 }
-export declare function NavContextProvider({ children, locked, ...restProps }: InheritableContextProps): React.JSX.Element;
+export declare function NavContextProvider({ children, locked, ...props }: React.PropsWithChildren<InheritableContextProps>): React.ReactElement;

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

@@ -1,7 +1,7 @@
 'use client';
-import useMemo from '@rc-component/util/lib/hooks/useMemo';
+import useMemo from '@rc-component/util/es/hooks/useMemo';
+import isEqual from '@rc-component/util/es/isEqual';
 import * as React from 'react';
-import shallowEqual from 'shallowequal';
 import { useConfig } from '../../../components/ConfigProvider';
 export const NavContext = React.createContext({
     popupPrefixCls: 'dropdown',
@@ -19,16 +19,16 @@ function mergeProps(origin, target) {
     });
     return clone;
 }
-export function NavContextProvider({ children, locked, ...restProps }) {
+export function NavContextProvider({ children, locked, ...props }) {
     const config = useConfig();
     const context = React.useContext(NavContext);
     const inheritableContext = useMemo(() => mergeProps({
         ...context,
         popupPrefixCls: context.popupPrefixCls ?? `${config.prefixCls}-dropdown`,
         prefixCls: context.prefixCls ?? `${config.prefixCls}-nav`,
-    }, restProps), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [context, restProps], (prev, next) => !locked && (prev[0] !== next[0] || !shallowEqual(prev[1], next[1])));
+    }, props), [config.prefixCls, context, props], (prev, next) => !locked && (prev[0] !== next[0]
+        || !isEqual(prev[1], next[1], true)
+        || !isEqual(prev[2], next[2], true)));
     return React.createElement(NavContext.Provider, { value: inheritableContext }, children);
 }
 if (process.env.NODE_ENV !== 'production') {

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

@@ -0,0 +1,3 @@
+export * from '../../../components/Nav/context/IdContext';
+export * from '../../../components/Nav/context/NavContext';
+export * from '../../../components/Nav/context/PathContext';

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

@@ -0,0 +1,3 @@
+export * from '../../../components/Nav/context/IdContext';
+export * from '../../../components/Nav/context/NavContext';
+export * from '../../../components/Nav/context/PathContext';

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

@@ -0,0 +1,5 @@
+export * from '../../../components/Nav/hooks/useAccessibility';
+export * from '../../../components/Nav/hooks/useActive';
+export * from '../../../components/Nav/hooks/useDirectionStyle';
+export * from '../../../components/Nav/hooks/useKeyRecords';
+export * from '../../../components/Nav/hooks/useMemoCallback';

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

@@ -0,0 +1,5 @@
+export * from '../../../components/Nav/hooks/useAccessibility';
+export * from '../../../components/Nav/hooks/useActive';
+export * from '../../../components/Nav/hooks/useDirectionStyle';
+export * from '../../../components/Nav/hooks/useKeyRecords';
+export * from '../../../components/Nav/hooks/useMemoCallback';

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

@@ -1,3 +1,14 @@
 import * as React from 'react';
 import { type NavMode } from '../../../components/Nav/types';
+/**
+ * Get focusable elements from the element set under provided container
+ */
+export declare function getFocusableElements(container: HTMLElement, elements: Set<HTMLElement>): HTMLElement[];
+type RefreshElements = {
+    element2key: Map<HTMLElement, string>;
+    elements: Set<HTMLElement>;
+    key2element: Map<string, HTMLElement>;
+};
+export declare function refreshElements(keys: string[], id: string): RefreshElements;
 export declare function useAccessibility<T extends HTMLElement>(mode: NavMode, activeKey: string, isRtl: boolean, id: string, containerRef: React.RefObject<HTMLUListElement | null>, 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>;
+export {};

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

@@ -1,39 +1,47 @@
-import { getFocusNodeList } from '@rc-component/util/lib/Dom/focus';
-import KeyCode from '@rc-component/util/lib/KeyCode';
-import raf from '@rc-component/util/lib/raf';
+import { getFocusNodeList } from '@rc-component/util/es/Dom/focus';
+import raf from '@rc-component/util/es/raf';
 import * as React from 'react';
-import { getNavId } from '../../../components/Nav/context/IdContext';
-// destruct to reduce minify size
-const { DOWN, ENTER, ESC, LEFT, RIGHT, UP } = KeyCode;
-const ArrowKeys = [UP, DOWN, LEFT, RIGHT];
-function getOffset(mode, isRootLevel, isRtl, which) {
+import { getNavId } from '../../../components/Nav/context';
+import { KeyCode } from '../../../constants';
+const ArrowKeys = [
+    KeyCode.ArrowDown,
+    KeyCode.ArrowLeft,
+    KeyCode.ArrowRight,
+    KeyCode.ArrowUp,
+];
+const EdgeKeys = [KeyCode.Home, KeyCode.End];
+const EnteringKeys = [KeyCode.Enter, KeyCode.Space];
+function getOffset(mode, isRootLevel, isRtl, isShiftKey, keyCode) {
     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,
-        };
+    if (mode === 'inline' && [KeyCode.Enter.toString(), KeyCode.Space.toString()].includes(keyCode)) {
+        return { inlineTrigger: true };
     }
     const inline = {
-        [DOWN]: next,
-        [UP]: prev,
+        [KeyCode.ArrowDown]: next,
+        [KeyCode.ArrowUp]: prev,
+        [KeyCode.Tab]: isShiftKey ? prev : next,
     };
     const horizontal = {
-        [DOWN]: children,
-        [ENTER]: children,
-        [LEFT]: isRtl ? next : prev,
-        [RIGHT]: isRtl ? prev : next,
+        [KeyCode.ArrowDown]: children,
+        [KeyCode.ArrowLeft]: isRtl ? next : prev,
+        [KeyCode.ArrowRight]: isRtl ? prev : next,
+        [KeyCode.Enter]: children,
+        [KeyCode.Space]: children,
+        [KeyCode.Tab]: isShiftKey ? prev : next,
     };
     const vertical = {
-        [DOWN]: next,
-        [ENTER]: children,
-        [ESC]: parent,
-        [LEFT]: isRtl ? children : parent,
-        [RIGHT]: isRtl ? parent : children,
-        [UP]: prev,
+        [KeyCode.ArrowDown]: next,
+        [KeyCode.ArrowLeft]: isRtl ? children : parent,
+        [KeyCode.ArrowRight]: isRtl ? parent : children,
+        [KeyCode.ArrowUp]: prev,
+        [KeyCode.Enter]: children,
+        [KeyCode.Escape]: parent,
+        [KeyCode.Space]: children,
+        [KeyCode.Tab]: isShiftKey ? prev : next,
     };
     const offsets = {
         horizontal,
@@ -43,42 +51,30 @@ function getOffset(mode, isRootLevel, isRtl, which) {
         vertical,
         verticalSub: vertical,
     };
-    const type = offsets[`${mode}${isRootLevel ? '' : 'Sub'}`]?.[which];
+    // @ts-ignore .....
+    const type = offsets[`${mode}${isRootLevel ? '' : 'Sub'}`]?.[keyCode];
     switch (type) {
         case prev:
-            return {
-                offset: -1,
-                sibling: true,
-            };
+            return { offset: -1, sibling: true };
         case next:
-            return {
-                offset: 1,
-                sibling: true,
-            };
+            return { offset: 1, sibling: true };
         case parent:
-            return {
-                offset: -1,
-                sibling: false,
-            };
+            return { offset: -1, sibling: false };
         case children:
-            return {
-                offset: 1,
-                sibling: false,
-            };
+            return { offset: 1, sibling: false };
         default:
-            return null;
+            return undefined;
     }
 }
 function findContainerUL(element) {
     let current = element;
     while (current) {
-        if (current.getAttribute('data-nav-list')) {
+        if (current.hasAttribute('data-nav-list')) {
             return current;
         }
         current = current.parentElement;
     }
     // Normally should not reach this line
-    /* istanbul ignore next */
     return null;
 }
 /**
@@ -92,25 +88,25 @@ function getFocusElement(activeElement, elements) {
         }
         current = current.parentElement;
     }
-    return null;
+    return undefined;
 }
 /**
  * Get focusable elements from the element set under provided container
  */
-function getFocusableElements(container, elements) {
+export function getFocusableElements(container, elements) {
     const list = getFocusNodeList(container, true);
     return list.filter(ele => elements.has(ele));
 }
-function getNextFocusElement(parentQueryContainer, elements, focusMenuElement, offset = 1) {
+function getNextFocusElement(parentQueryContainer, elements, focusNavElement, offset = 1) {
     // Key on the menu item will not get validate parent container
     if (!parentQueryContainer) {
         return undefined;
     }
     // List current level menu item elements
-    const sameLevelFocusableMenuElementList = getFocusableElements(parentQueryContainer, elements);
+    const sameLevelFocusableNavElementList = getFocusableElements(parentQueryContainer, elements);
     // Find next focus index
-    const count = sameLevelFocusableMenuElementList.length;
-    let focusIndex = sameLevelFocusableMenuElementList.findIndex(ele => focusMenuElement === ele);
+    const count = sameLevelFocusableNavElementList.length;
+    let focusIndex = sameLevelFocusableNavElementList.findIndex(ele => focusNavElement === ele);
     if (offset < 0) {
         if (focusIndex === -1) {
             focusIndex = count - 1;
@@ -124,7 +120,21 @@ function getNextFocusElement(parentQueryContainer, elements, focusMenuElement, o
     }
     focusIndex = (focusIndex + count) % count;
     // Focus menu item
-    return sameLevelFocusableMenuElementList[focusIndex];
+    return sameLevelFocusableNavElementList[focusIndex];
+}
+export function refreshElements(keys, id) {
+    const elements = new Set();
+    const key2element = new Map();
+    const element2key = new Map();
+    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 { element2key, elements, key2element };
 }
 export function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, getKeyPath, triggerActiveKey, triggerAccessibilityOpen, originOnKeyDown) {
     const rafRef = React.useRef(undefined);
@@ -137,50 +147,33 @@ export function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKe
         cleanRaf();
     }, []);
     return event => {
-        const { which } = event;
-        if ([...ArrowKeys, ENTER, ESC].includes(which)) {
-            // Convert key to elements
-            let element2key = new Map(), elements = new Set(), key2element = 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();
+        if ([...ArrowKeys, ...EdgeKeys, ...EnteringKeys, KeyCode.Escape, KeyCode.Tab].includes(event.code)) {
+            const keys = getKeys();
+            let refreshedElements = refreshElements(keys, id);
+            const { element2key, elements, key2element } = refreshedElements;
             // 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);
+            const focusMenuKey = focusMenuElement ? element2key.get(focusMenuElement) : null;
+            const offsetObj = getOffset(mode, focusMenuKey != null ? getKeyPath(focusMenuKey, true).length === 1 : true, isRtl, event.shiftKey, event.code);
             // Some mode do not have fully arrow operation like inline
-            if (!offsetObj) {
+            if (!offsetObj && event.code !== KeyCode.Home && event.code !== KeyCode.End) {
                 return;
             }
             // Arrow prevent default to avoid page scroll
-            if (ArrowKeys.includes(which)) {
+            if ([...ArrowKeys, ...EdgeKeys, KeyCode.Enter, KeyCode.Tab].includes(event.code)) {
                 event.preventDefault();
             }
-            const tryFocus = (menuElement) => {
-                if (menuElement) {
-                    let focusTargetElement = menuElement;
+            const tryFocus = (navElement) => {
+                if (navElement) {
+                    let focusTargetElement = navElement;
                     // Focus to link instead of menu item if possible
-                    const link = menuElement.querySelector('a');
+                    const link = navElement.querySelector('a');
                     if (link?.getAttribute('href')) {
                         focusTargetElement = link;
                     }
-                    const targetKey = element2key.get(menuElement);
-                    if (targetKey !== undefined) {
+                    const targetKey = element2key.get(navElement);
+                    if (targetKey != null) {
                         triggerActiveKey(targetKey);
                     }
                     /**
@@ -196,25 +189,28 @@ export function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKe
                     });
                 }
             };
-            if (offsetObj.sibling || !focusMenuElement) {
+            // @ts-ignore .....
+            if (EdgeKeys.includes(event.code) || offsetObj?.sibling || !focusMenuElement) {
                 // ========================== Sibling ==========================
                 // Find walkable focus menu element container
-                let parentQueryContainer;
-                if (!focusMenuElement || mode === 'inline') {
-                    parentQueryContainer = containerRef.current;
-                }
-                else {
-                    parentQueryContainer = findContainerUL(focusMenuElement);
-                }
+                const parentQueryContainer = (!focusMenuElement || mode === 'inline')
+                    ? containerRef.current
+                    : findContainerUL(focusMenuElement);
                 if (parentQueryContainer == null) {
                     return;
                 }
                 // Get next focus element
-                const targetElement = getNextFocusElement(parentQueryContainer, 
-                // @ts-ignore bla bla ts
-                elements, 
-                // @ts-ignore bla bla ts
-                focusMenuElement, offsetObj.offset);
+                let targetElement;
+                const focusableElements = getFocusableElements(parentQueryContainer, elements);
+                if (event.code === KeyCode.Home) {
+                    [targetElement] = focusableElements;
+                }
+                else if (event.code === KeyCode.End) {
+                    targetElement = focusableElements[focusableElements.length - 1];
+                }
+                else {
+                    targetElement = getNextFocusElement(parentQueryContainer, elements, focusMenuElement, offsetObj?.offset);
+                }
                 if (targetElement == null) {
                     return;
                 }
@@ -222,17 +218,17 @@ export function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKe
                 tryFocus(targetElement);
             }
             // ======================= InlineTrigger =======================
-            else if (offsetObj.inlineTrigger && focusMenuKey !== undefined) {
+            else if (offsetObj?.inlineTrigger && focusMenuKey) {
                 // Inline trigger no need switch to sub menu item
                 triggerAccessibilityOpen(focusMenuKey);
             }
             // =========================== Level ===========================
-            else if (offsetObj.offset && focusMenuKey !== undefined) {
+            else if ((offsetObj?.offset ?? 0) > 0 && focusMenuKey) {
                 triggerAccessibilityOpen(focusMenuKey, true);
                 cleanRaf();
                 rafRef.current = raf(() => {
                     // Async should re-sync elements
-                    refreshElements();
+                    refreshedElements = refreshElements(keys, id);
                     const controlId = focusMenuElement.getAttribute('aria-controls');
                     if (controlId == null) {
                         return;
@@ -250,12 +246,12 @@ export function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKe
                     tryFocus(targetElement);
                 }, 5);
             }
-            else if ((!offsetObj.offset || offsetObj.offset < 0) && focusMenuKey !== undefined) {
+            else if ((offsetObj?.offset ?? 0) < 0 && focusMenuKey) {
                 const keyPath = getKeyPath(focusMenuKey, true);
                 const parentKey = keyPath[keyPath.length - 2];
-                const parentMenuElement = key2element.get(parentKey);
                 // Focus menu item
                 triggerAccessibilityOpen(parentKey, false);
+                const parentMenuElement = key2element.get(parentKey);
                 if (parentMenuElement == null) {
                     return;
                 }

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

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