@laser-ui/components 0.0.1

package/menu/Menu.js

@@ -0,0 +1,386 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { findNested } from '@laser-ui/utils';
+import { isNull, isUndefined, nth } from 'lodash';
+import { Fragment, forwardRef, useId, useImperativeHandle, useRef, useState } from 'react';
+import { MenuGroup } from './internal/MenuGroup';
+import { MenuItem as MenuItemFC } from './internal/MenuItem';
+import { MenuSub } from './internal/MenuSub';
+import { checkEnableItem, getSameLevelEnableItems } from './utils';
+import { CLASSES } from './vars';
+import { useComponentProps, useControlled, useFocusVisible, useNamespace, useNestedPopup, useStyled } from '../hooks';
+import { CollapseTransition } from '../internal/transition';
+import { mergeCS } from '../utils';
+import { TTANSITION_DURING_BASE } from '../vars';
+function MenuFC(props, ref) {
+    const _a = useComponentProps('Menu', props), { styleOverrides, styleProvider, list, mode = 'vertical', width = 'auto', active: activeProp, defaultActive, expands: expandsProp, defaultExpands, expandOne = false, expandTrigger, escClosable = true, onActiveChange, onExpandsChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "mode", "width", "active", "defaultActive", "expands", "defaultExpands", "expandOne", "expandTrigger", "escClosable", "onActiveChange", "onExpandsChange"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { menu: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.menu, 'menu-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['menu-popup'] }, styleOverrides);
+    const uniqueId = useId();
+    const getItemId = (id) => `${namespace}-menu-item-${id}-${uniqueId}`;
+    const dataRef = useRef({
+        updatePosition: new Map(),
+    });
+    const [focusVisible, focusVisibleWrapper] = useFocusVisible((code) => code.startsWith('Arrow') || ['Home', 'End', 'Enter', 'Space'].includes(code));
+    const [active, changeActive] = useControlled(defaultActive !== null && defaultActive !== void 0 ? defaultActive : null, activeProp, (id) => {
+        if (onActiveChange) {
+            onActiveChange(id, findNested(list, (item) => item.id === id));
+        }
+    });
+    const actives = (() => {
+        let ids;
+        const reduceArr = (arr, subParent = []) => {
+            for (const item of arr) {
+                if (ids) {
+                    break;
+                }
+                if (item.children) {
+                    reduceArr(item.children, item.type === 'sub' ? subParent.concat([item.id]) : subParent);
+                }
+                else if (item.id === active) {
+                    ids = subParent.concat([item.id]);
+                }
+            }
+        };
+        if (!isNull(active)) {
+            reduceArr(list);
+        }
+        return ids !== null && ids !== void 0 ? ids : [];
+    })();
+    const [expands, changeExpands] = useControlled(defaultExpands !== null && defaultExpands !== void 0 ? defaultExpands : [], expandsProp, (ids) => {
+        if (onExpandsChange) {
+            let length = ids.length;
+            const items = [];
+            const reduceArr = (arr) => {
+                for (const item of arr) {
+                    if (length === 0) {
+                        break;
+                    }
+                    if (item.children) {
+                        reduceArr(item.children);
+                    }
+                    else {
+                        const index = ids.findIndex((id) => id === item.id);
+                        if (index !== -1) {
+                            items[index] = item;
+                            length -= 1;
+                        }
+                    }
+                }
+            };
+            reduceArr(list);
+            onExpandsChange(ids, items);
+        }
+    });
+    const { popupIdsRef, setPopupIds, addPopupId, removePopupId } = useNestedPopup();
+    const popupIds = popupIdsRef.current;
+    const [focusIds, setFocusIds] = useState([]);
+    const focusId = (() => {
+        var _a;
+        if (mode === 'vertical') {
+            return nth(focusIds, -1);
+        }
+        else {
+            let id;
+            for (const [index, focusId] of focusIds.entries()) {
+                id = focusId;
+                if (((_a = nth(popupIds, index)) === null || _a === void 0 ? void 0 : _a.id) !== focusId) {
+                    break;
+                }
+            }
+            return id;
+        }
+    })();
+    const initFocus = () => {
+        let firstId;
+        const ids = [];
+        const reduceArr = (arr) => {
+            for (const item of arr) {
+                if (ids.length === 1) {
+                    break;
+                }
+                if ((item.type === 'group' || (mode === 'vertical' && item.type === 'sub' && expands.includes(item.id))) && item.children) {
+                    reduceArr(item.children);
+                }
+                else if (checkEnableItem(item)) {
+                    if (isUndefined(firstId)) {
+                        firstId = item.id;
+                    }
+                    if (actives.includes(item.id)) {
+                        ids.push(item.id);
+                    }
+                }
+            }
+        };
+        reduceArr(list);
+        setFocusIds(ids.length === 0 ? (isUndefined(firstId) ? [] : [firstId]) : ids);
+    };
+    let handleKeyDown;
+    const nodes = (menuRef) => {
+        const getNodes = (arr, level, subParents, inNav = false) => {
+            const posinset = new Map();
+            let noGroup = [];
+            for (const item of arr) {
+                if (item.type === 'group') {
+                    for (const [i, o] of noGroup.entries()) {
+                        posinset.set(o.id, [i, noGroup.length]);
+                    }
+                    noGroup = [];
+                }
+                else {
+                    noGroup.push(item);
+                }
+            }
+            for (const [i, o] of noGroup.entries()) {
+                posinset.set(o.id, [i, noGroup.length]);
+            }
+            return arr.map((item) => {
+                const { id: itemId, title: itemTitle, type: itemType, icon: itemIcon, disabled: itemDisabled = false, children } = item;
+                const nextSubParents = itemType === 'sub' ? subParents.concat([item]) : subParents;
+                const id = getItemId(itemId);
+                const isExpand = expands.includes(itemId);
+                const isFocus = itemId === focusId;
+                const isEmpty = !(children && children.length > 0);
+                const popupState = popupIds.find((v) => v.id === itemId);
+                let step = 20;
+                let space = 16;
+                if (mode === 'horizontal' && inNav) {
+                    space = 20;
+                }
+                if (mode !== 'vertical' && !inNav) {
+                    step = 12;
+                    space = 10;
+                }
+                const handleItemClick = () => {
+                    changeActive(itemId);
+                    setFocusIds(subParents.map((parentItem) => parentItem.id).concat([itemId]));
+                };
+                const handleSubExpand = (sameLevelItems) => {
+                    if (isExpand) {
+                        changeExpands((draft) => {
+                            const index = draft.findIndex((id) => id === itemId);
+                            draft.splice(index, 1);
+                        });
+                    }
+                    else {
+                        if (expandOne) {
+                            const ids = expands.filter((id) => sameLevelItems.findIndex((sameLevelItem) => sameLevelItem.id === id) === -1);
+                            ids.push(itemId);
+                            changeExpands(ids);
+                        }
+                        else {
+                            changeExpands((draft) => {
+                                draft.push(itemId);
+                            });
+                        }
+                    }
+                };
+                if (isFocus) {
+                    handleKeyDown = (e) => {
+                        var _a, _b, _c, _d;
+                        const sameLevelItems = getSameLevelEnableItems((_b = (_a = nth(subParents, -1)) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : list);
+                        const focusItem = (val) => {
+                            if (val) {
+                                setFocusIds(subParents.map((parentItem) => parentItem.id).concat([val.id]));
+                            }
+                        };
+                        const handleOpenSub = () => {
+                            if (mode === 'vertical') {
+                                if (!isExpand) {
+                                    handleSubExpand(sameLevelItems);
+                                }
+                            }
+                            else {
+                                addPopupId(itemId);
+                            }
+                            if (children) {
+                                const newFocusItem = nth(getSameLevelEnableItems(children), 0);
+                                if (newFocusItem) {
+                                    setFocusIds(nextSubParents.map((parentItem) => parentItem.id).concat([newFocusItem.id]));
+                                }
+                            }
+                        };
+                        let code = e.code;
+                        if (mode === 'horizontal' && inNav) {
+                            switch (e.code) {
+                                case 'ArrowUp':
+                                    code = 'ArrowLeft';
+                                    break;
+                                case 'ArrowLeft':
+                                    code = 'ArrowUp';
+                                    break;
+                                case 'ArrowDown':
+                                    code = 'ArrowRight';
+                                    break;
+                                case 'ArrowRight':
+                                    code = 'ArrowDown';
+                                    break;
+                                default:
+                                    break;
+                            }
+                        }
+                        switch (code) {
+                            case 'ArrowUp': {
+                                e.preventDefault();
+                                const index = sameLevelItems.findIndex((sameLevelItem) => sameLevelItem.id === itemId);
+                                const newFocusItem = nth(sameLevelItems, index - 1);
+                                focusItem(newFocusItem);
+                                if (mode !== 'vertical' && newFocusItem && ((_c = nth(popupIds, -1)) === null || _c === void 0 ? void 0 : _c.id) === itemId) {
+                                    setPopupIds(popupIds.slice(0, -1));
+                                }
+                                break;
+                            }
+                            case 'ArrowDown': {
+                                e.preventDefault();
+                                const index = sameLevelItems.findIndex((sameLevelItem) => sameLevelItem.id === itemId);
+                                const newFocusItem = nth(sameLevelItems, (index + 1) % sameLevelItems.length);
+                                focusItem(newFocusItem);
+                                if (mode !== 'vertical' && newFocusItem && ((_d = nth(popupIds, -1)) === null || _d === void 0 ? void 0 : _d.id) === itemId) {
+                                    setPopupIds(popupIds.slice(0, -1));
+                                }
+                                break;
+                            }
+                            case 'ArrowLeft': {
+                                e.preventDefault();
+                                if (mode === 'vertical') {
+                                    changeExpands((draft) => {
+                                        const index = draft.findIndex((id) => { var _a; return id === ((_a = nth(subParents, -1)) === null || _a === void 0 ? void 0 : _a.id); });
+                                        draft.splice(index, 1);
+                                    });
+                                }
+                                else {
+                                    setPopupIds(popupIds.slice(0, -1));
+                                }
+                                const ids = subParents.map((item) => item.id);
+                                if (ids.length > 0) {
+                                    setFocusIds(ids);
+                                }
+                                break;
+                            }
+                            case 'ArrowRight':
+                                e.preventDefault();
+                                if (itemType === 'sub') {
+                                    handleOpenSub();
+                                }
+                                break;
+                            case 'Home':
+                                e.preventDefault();
+                                focusItem(nth(sameLevelItems, 0));
+                                break;
+                            case 'End':
+                                e.preventDefault();
+                                focusItem(nth(sameLevelItems, -1));
+                                break;
+                            case 'Enter':
+                            case 'Space':
+                                e.preventDefault();
+                                if (itemType === 'item') {
+                                    handleItemClick();
+                                }
+                                else if (itemType === 'sub') {
+                                    handleOpenSub();
+                                }
+                                break;
+                            default:
+                                break;
+                        }
+                    };
+                }
+                return (_jsx(Fragment, { children: itemType === 'item' ? (_jsx(MenuItemFC, { namespace: namespace, styled: styled, id: id, level: level, space: space, step: step, icon: itemIcon, 
+                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                        posinset: posinset.get(itemId), mode: mode, inNav: inNav, active: active === itemId, focus: focusVisible && isFocus, disabled: itemDisabled, onClick: handleItemClick, children: itemTitle })) : itemType === 'group' ? (_jsx(MenuGroup, { styled: styled, id: id, level: level, space: space, step: step, list: children && getNodes(children, level + 1, nextSubParents), empty: isEmpty, children: itemTitle })) : (_jsx(MenuSub, { ref: (fn) => {
+                            if (isNull(fn)) {
+                                dataRef.current.updatePosition.delete(itemId);
+                            }
+                            else {
+                                dataRef.current.updatePosition.set(itemId, fn);
+                            }
+                        }, namespace: namespace, styled: styled, menuRef: menuRef, id: id, level: level, space: space, step: step, icon: itemIcon, list: children && getNodes(children, mode === 'vertical' ? level + 1 : 0, nextSubParents), popupState: popupState === null || popupState === void 0 ? void 0 : popupState.visible, trigger: expandTrigger !== null && expandTrigger !== void 0 ? expandTrigger : (mode === 'vertical' ? 'click' : 'hover'), 
+                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                        posinset: posinset.get(itemId), mode: mode, inNav: inNav, active: (mode === 'vertical' ? !isExpand : isUndefined(popupState)) && actives.includes(itemId), includeActive: actives.includes(itemId), expand: isExpand, empty: isEmpty, focus: focusVisible && isFocus, disabled: itemDisabled, onVisibleChange: (visible) => {
+                            if (visible) {
+                                if (subParents.length === 0) {
+                                    setPopupIds([{ id: itemId, visible: true }]);
+                                }
+                                else {
+                                    addPopupId(itemId);
+                                }
+                            }
+                            else {
+                                removePopupId(itemId);
+                            }
+                        }, onClick: () => {
+                            var _a, _b;
+                            if (!itemDisabled) {
+                                setFocusIds(subParents.map((parentItem) => parentItem.id).concat([itemId]));
+                                if (mode === 'vertical') {
+                                    const sameLevelItems = getSameLevelEnableItems((_b = (_a = nth(subParents, -1)) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : list);
+                                    handleSubExpand(sameLevelItems);
+                                }
+                            }
+                        }, children: itemTitle })) }, itemId));
+            });
+        };
+        return getNodes(list, 0, [], true);
+    };
+    useImperativeHandle(ref, () => ({
+        updatePosition: () => {
+            for (const fn of dataRef.current.updatePosition.values()) {
+                fn();
+            }
+        },
+    }), []);
+    return (_jsx(CollapseTransition, { originalSize: {
+            width,
+        }, collapsedSize: {
+            width: 64,
+        }, enter: mode !== 'icon', during: TTANSITION_DURING_BASE, styles: {
+            entering: {
+                transition: ['width', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms linear`).join(', '),
+            },
+            leaving: {
+                transition: ['width', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms linear`).join(', '),
+            },
+        }, children: (menuRef, collapseStyle) => {
+            var _a;
+            const preventBlur = (e) => {
+                if (document.activeElement === e.currentTarget && e.button === 0) {
+                    e.preventDefault();
+                }
+            };
+            return focusVisibleWrapper(
+            // eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex
+            _jsx("nav", Object.assign({}, restProps, mergeCS(styled('menu', { 'menu--horizontal': mode === 'horizontal' }), {
+                className: restProps.className,
+                style: Object.assign(Object.assign(Object.assign({}, restProps.style), { width }), collapseStyle),
+            }), { ref: menuRef, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : 0, role: "menubar", "aria-orientation": mode === 'horizontal' ? 'horizontal' : 'vertical', "aria-activedescendant": isUndefined(focusId) ? undefined : getItemId(focusId), onFocus: (e) => {
+                    var _a;
+                    (_a = restProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    initFocus();
+                }, onBlur: (e) => {
+                    var _a;
+                    (_a = restProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    setPopupIds([]);
+                }, onKeyDown: (e) => {
+                    var _a;
+                    (_a = restProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    if (popupIds.length > 0 && escClosable && e.code === 'Escape') {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        setPopupIds([]);
+                    }
+                    else {
+                        handleKeyDown === null || handleKeyDown === void 0 ? void 0 : handleKeyDown(e);
+                    }
+                }, onMouseDown: (e) => {
+                    var _a;
+                    (_a = restProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    preventBlur(e);
+                }, onMouseUp: (e) => {
+                    var _a;
+                    (_a = restProps.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    preventBlur(e);
+                }, children: nodes(menuRef) })));
+        } }));
+}
+export const Menu = forwardRef(MenuFC);

package/menu/index.d.ts

@@ -0,0 +1,2 @@
+export type { MenuRef, MenuProps } from './types';
+export { Menu } from './Menu';

package/menu/index.js

@@ -0,0 +1 @@
+export { Menu } from './Menu';

package/menu/internal/MenuGroup.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { Styled } from '../../hooks/useStyled';
+import type { CLASSES } from '../vars';
+interface MenuGroupProps {
+    children: React.ReactNode;
+    styled: Styled<typeof CLASSES>;
+    id: string;
+    level: number;
+    space: number;
+    step: number;
+    list: React.ReactNode;
+    empty: boolean;
+}
+export declare function MenuGroup(props: MenuGroupProps): JSX.Element | null;
+export {};

package/menu/internal/MenuGroup.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from '../../hooks';
+import { mergeCS } from '../../utils';
+export function MenuGroup(props) {
+    const { children, styled, id, level, space, step, list, empty } = props;
+    const { t } = useTranslation();
+    return (_jsxs("ul", Object.assign({}, styled('menu__group-list'), { role: "group", "aria-labelledby": id, children: [_jsx("li", Object.assign({}, mergeCS(styled('menu__group-title'), { style: { paddingLeft: space + level * step } }), { id: id, role: "presentation", children: children })), empty ? _jsx("div", Object.assign({}, mergeCS(styled('menu__empty'), { style: { paddingLeft: space + (level + 1) * step } }), { children: t('No Data') })) : list] })));
+}

package/menu/internal/MenuItem.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { Styled } from '../../hooks/useStyled';
+import type { MenuMode } from '../types';
+import type { CLASSES } from '../vars';
+interface MenuItemProps {
+    children: React.ReactNode;
+    namespace: string;
+    styled: Styled<typeof CLASSES>;
+    id: string;
+    level: number;
+    space: number;
+    step: number;
+    icon: React.ReactNode;
+    posinset: [number, number];
+    mode: MenuMode;
+    inNav: boolean;
+    active: boolean;
+    focus: boolean;
+    disabled: boolean;
+    onClick: () => void;
+}
+export declare function MenuItem(props: MenuItemProps): JSX.Element | null;
+export {};

package/menu/internal/MenuItem.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { checkNodeExist } from '@laser-ui/utils';
+import { Tooltip } from '../../tooltip';
+import { mergeCS } from '../../utils';
+export function MenuItem(props) {
+    const { children, namespace, styled, id, level, space, step, icon, posinset, mode, inNav, active, focus, disabled, onClick } = props;
+    const inHorizontalNav = mode === 'horizontal' && inNav;
+    const iconMode = mode === 'icon' && inNav;
+    return (_jsx(Tooltip, { title: children, visible: iconMode ? undefined : false, placement: "right", children: _jsxs("li", Object.assign({}, mergeCS(styled('menu__item', 'menu__item--item', {
+            'menu__item--horizontal': inHorizontalNav,
+            'menu__item--icon': iconMode,
+            'menu__item.is-active': active,
+            'menu__item.is-disabled': disabled,
+        }), { style: { paddingLeft: space + level * step } }), { id: id, role: "menuitem", "aria-disabled": disabled, onClick: onClick, children: [focus && _jsx("div", { className: `${namespace}-focus-outline` }), _jsxs("div", Object.assign({}, styled('menu__indicator', {
+                    'menu__indicator--first': posinset[0] === 0 && posinset[1] > 1,
+                    'menu__indicator--last': posinset[0] === posinset[1] - 1 && posinset[1] > 1,
+                }), { children: [_jsx("div", Object.assign({}, styled('menu__indicator-track', { 'menu__indicator-track--hidden': level === 0 }))), _jsx("div", Object.assign({}, styled('menu__indicator-thumb')))] })), checkNodeExist(icon) && _jsx("div", Object.assign({}, styled('menu__item-icon'), { children: icon })), _jsx("div", Object.assign({}, styled('menu__item-content'), { children: children }))] })) }));
+}

package/menu/internal/MenuSub.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { Styled } from '../../hooks/useStyled';
+import type { MenuMode } from '../types';
+import type { CLASSES } from '../vars';
+interface MenuSubProps {
+    children: React.ReactNode;
+    namespace: string;
+    styled: Styled<typeof CLASSES>;
+    menuRef: React.RefObject<HTMLElement>;
+    id: string;
+    level: number;
+    space: number;
+    step: number;
+    icon: React.ReactNode | undefined;
+    list: React.ReactNode;
+    popupState: boolean | undefined;
+    trigger: 'hover' | 'click';
+    posinset: [number, number];
+    mode: MenuMode;
+    inNav: boolean;
+    active: boolean;
+    includeActive: boolean;
+    expand: boolean;
+    empty: boolean;
+    focus: boolean;
+    disabled: boolean;
+    onVisibleChange: (visible: boolean) => void;
+    onClick: React.MouseEventHandler<HTMLLIElement>;
+}
+export declare const MenuSub: import("react").ForwardRefExoticComponent<MenuSubProps & import("react").RefAttributes<() => void>>;
+export {};

package/menu/internal/MenuSub.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEventCallback } from '@laser-ui/hooks';
+import { checkNodeExist } from '@laser-ui/utils';
+import { isUndefined } from 'lodash';
+import { cloneElement, forwardRef, isValidElement, useImperativeHandle, useRef, useState } from 'react';
+import { useMaxIndex, useTranslation } from '../../hooks';
+import { Popup } from '../../internal/popup';
+import { Portal } from '../../internal/portal';
+import { CollapseTransition, Transition } from '../../internal/transition';
+import { getHorizontalSidePosition, getVerticalSidePosition, mergeCS } from '../../utils';
+import { TTANSITION_DURING_BASE, TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../vars';
+export const MenuSub = forwardRef((props, ref) => {
+    const { children, namespace, styled, menuRef, id, level, space, step, icon, list, popupState, trigger, posinset, mode, inNav, active, includeActive, expand, empty, focus, disabled, onVisibleChange, onClick, } = props;
+    const triggerRef = useRef(null);
+    const popupRef = useRef(null);
+    const dataRef = useRef({});
+    const { t } = useTranslation();
+    const visible = !isUndefined(popupState);
+    const inHorizontalNav = mode === 'horizontal' && inNav;
+    const iconMode = mode === 'icon' && inNav;
+    const [popupPositionStyle, setPopupPositionStyle] = useState({
+        top: '-200vh',
+        left: '-200vw',
+    });
+    const [transformOrigin, setTransformOrigin] = useState();
+    const updatePosition = useEventCallback(() => {
+        if (visible && popupRef.current && triggerRef.current) {
+            const height = popupRef.current.offsetHeight;
+            let width = popupRef.current.offsetWidth;
+            if (inHorizontalNav) {
+                width = triggerRef.current.offsetWidth - 32;
+            }
+            const { top, left, transformOrigin } = inHorizontalNav
+                ? getVerticalSidePosition(triggerRef.current, { width, height }, {
+                    placement: 'bottom',
+                    gap: 12,
+                    inWindow: WINDOW_SPACE,
+                })
+                : getHorizontalSidePosition(triggerRef.current, { width, height }, {
+                    placement: 'right',
+                    gap: inNav ? 10 : 14,
+                    inWindow: WINDOW_SPACE,
+                });
+            setPopupPositionStyle({
+                top,
+                left,
+                width: inHorizontalNav ? width : undefined,
+            });
+            setTransformOrigin(transformOrigin);
+        }
+    });
+    const maxZIndex = useMaxIndex(visible);
+    useImperativeHandle(ref, () => updatePosition, [updatePosition]);
+    return (_jsxs(_Fragment, { children: [_jsx(Popup, { visible: popupState !== null && popupState !== void 0 ? popupState : false, trigger: trigger, disabled: disabled || mode === 'vertical', updatePosition: {
+                    fn: updatePosition,
+                    triggerRef,
+                    popupRef,
+                    containerRefs: [],
+                }, onVisibleChange: onVisibleChange, children: ({ renderTrigger, renderPopup }) => (_jsxs(_Fragment, { children: [renderTrigger(_jsxs("li", Object.assign({}, mergeCS(styled('menu__item', 'menu__item--sub', {
+                            'menu__item--horizontal': inHorizontalNav,
+                            'menu__item--icon': iconMode,
+                            'menu__item.is-active': active,
+                            'menu__item.is-expand': mode === 'vertical' ? expand && includeActive : visible,
+                            'menu__item.is-disabled': disabled,
+                        }), { style: { paddingLeft: space + level * step } }), { ref: triggerRef, id: id, role: "menuitem", "aria-haspopup": true, "aria-expanded": mode === 'vertical' ? expand : visible, "aria-disabled": disabled, onClick: (e) => {
+                                onClick(e);
+                            }, children: [focus && _jsx("div", { className: `${namespace}-focus-outline` }), _jsxs("div", Object.assign({}, styled('menu__indicator', {
+                                    'menu__indicator--first': posinset[0] === 0 && posinset[1] > 1,
+                                    'menu__indicator--last': posinset[0] === posinset[1] - 1 && posinset[1] > 1,
+                                }), { children: [_jsx("div", Object.assign({}, styled('menu__indicator-track', { 'menu__indicator-track--hidden': level === 0 }))), _jsx("div", Object.assign({}, styled('menu__indicator-thumb')))] })), checkNodeExist(icon) && _jsx("div", Object.assign({}, styled('menu__item-icon'), { children: icon })), _jsx("div", Object.assign({}, styled('menu__item-content'), { children: children })), !inHorizontalNav && (_jsxs("div", Object.assign({}, styled('menu__sub-arrow', {
+                                    'menu__sub-arrow--horizontal': mode !== 'vertical' && !inHorizontalNav,
+                                    'menu__sub-arrow.is-expand': mode === 'vertical' && expand,
+                                }), { "aria-hidden": true, children: [_jsx("div", {}), _jsx("div", {})] })))] }))), mode !== 'vertical' && (_jsx(Portal, { selector: () => menuRef.current, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: updatePosition, children: (state) => {
+                                    let transitionStyle = {};
+                                    switch (state) {
+                                        case 'enter':
+                                            transitionStyle = { transform: inHorizontalNav ? 'scaleY(0.7)' : 'scale(0)', opacity: 0 };
+                                            break;
+                                        case 'entering':
+                                            transitionStyle = {
+                                                transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
+                                                transformOrigin,
+                                            };
+                                            break;
+                                        case 'leaving':
+                                            transitionStyle = {
+                                                transform: inHorizontalNav ? 'scaleY(0.7)' : 'scale(0)',
+                                                opacity: 0,
+                                                transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
+                                                transformOrigin,
+                                            };
+                                            break;
+                                        case 'leaved':
+                                            transitionStyle = { display: 'none' };
+                                            break;
+                                        default:
+                                            break;
+                                    }
+                                    return renderPopup(_jsx("div", Object.assign({}, mergeCS(styled('menu-popup'), {
+                                        style: Object.assign(Object.assign({ minWidth: inHorizontalNav ? undefined : 160, zIndex: `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})` }, popupPositionStyle), transitionStyle),
+                                    }), { ref: popupRef, children: _jsx("ul", Object.assign({}, styled('menu__sub-list'), { role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('menu__empty'), { style: { paddingLeft: space + level * step } }), { children: t('No Data') }))) : (list) })) })));
+                                } }) }))] })) }), _jsx(CollapseTransition, { originalSize: {
+                    height: 'auto',
+                }, collapsedSize: {
+                    height: 0,
+                }, enter: mode === 'vertical' ? expand : inNav ? false : (prev) => prev, defaultEnter: expand, during: TTANSITION_DURING_BASE, styles: {
+                    entering: {
+                        transition: ['height', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
+                    },
+                    leaving: {
+                        transition: ['height', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
+                    },
+                    leaved: { display: 'none' },
+                }, children: (listRef, collapseStyle, state) => {
+                    if (mode !== 'vertical') {
+                        if (inNav && state !== 'leaved' && isValidElement(dataRef.current.nodeCache)) {
+                            return cloneElement(dataRef.current.nodeCache, {
+                                style: Object.assign(Object.assign({}, dataRef.current.nodeCache.props.style), collapseStyle),
+                            });
+                        }
+                        return null;
+                    }
+                    const node = (_jsx("ul", Object.assign({}, mergeCS(styled('menu__sub-list'), { style: collapseStyle }), { ref: listRef, role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('menu__empty'), { style: { paddingLeft: space + (level + 1) * step } }), { children: t('No Data') }))) : (list) })));
+                    if (mode === 'vertical' && inNav) {
+                        dataRef.current.nodeCache = node;
+                    }
+                    return node;
+                } })] }));
+});

package/menu/types.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface MenuRef {
+    updatePosition: () => void;
+}
+export type MenuMode = 'horizontal' | 'vertical' | 'popup' | 'icon';
+export interface MenuItem<ID extends React.Key> {
+    id: ID;
+    title: React.ReactNode;
+    type: 'item' | 'group' | 'sub';
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    children?: MenuItem<ID>[];
+}
+export interface MenuProps<ID extends React.Key, T extends MenuItem<ID>> extends BaseProps<'menu' | 'menu-popup', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    list: T[];
+    mode?: MenuMode;
+    width?: string | number;
+    active?: ID | null;
+    defaultActive?: ID;
+    expands?: ID[];
+    defaultExpands?: ID[];
+    expandOne?: boolean;
+    expandTrigger?: 'hover' | 'click';
+    escClosable?: boolean;
+    onActiveChange?: (id: ID, origin: T) => void;
+    onExpandsChange?: (ids: ID[], origins: T[]) => void;
+}