@laser-ui/components 1.6.0 → 2.0.0

package/internal/popup/Popup.js

@@ -1,16 +1,16 @@
 import { useAsync, useEvent, useRefExtra, useResize } from '@laser-ui/hooks';
 import { isUndefined } from 'lodash';
-import { cloneElement, useRef } from 'react';
+import { useRef } from 'react';
 import { useContainerScrolling, useLayout } from '../../hooks';
 export function Popup(props) {
     const { children, visible: visibleProp, trigger, disabled = false, mouseEnterDelay = 150, mouseLeaveDelay = 200, updatePosition, onVisibleChange, } = props;
     const { contentResizeRef } = useLayout();
     const windowRef = useRefExtra(() => window);
-    const dataRef = useRef({});
+    const clearTid = useRef(() => { });
+    const clearClickOut = useRef(() => { });
     const async = useAsync();
     const handleTrigger = (visible, behavior) => {
-        var _a, _b;
-        (_b = (_a = dataRef.current).clearTid) === null || _b === void 0 ? void 0 : _b.call(_a);
+        clearTid.current();
         const changeVisible = () => {
             if (isUndefined(visible)) {
                 onVisibleChange(!visibleProp);
@@ -23,15 +23,15 @@ export function Popup(props) {
             switch (behavior) {
                 case 'hover':
                     if (visible) {
-                        dataRef.current.clearTid = async.setTimeout(() => changeVisible(), mouseEnterDelay);
+                        clearTid.current = async.setTimeout(() => changeVisible(), mouseEnterDelay);
                     }
                     else {
-                        dataRef.current.clearTid = async.setTimeout(() => changeVisible(), mouseLeaveDelay);
+                        clearTid.current = async.setTimeout(() => changeVisible(), mouseLeaveDelay);
                     }
                     break;
                 case 'popup-hover':
                     if (!visible) {
-                        dataRef.current.clearTid = async.setTimeout(() => changeVisible(), mouseLeaveDelay);
+                        clearTid.current = async.setTimeout(() => changeVisible(), mouseLeaveDelay);
                     }
                     break;
                 default:
@@ -47,73 +47,45 @@ export function Popup(props) {
     useResize(updatePosition.popupRef, updatePosition.fn, undefined, disabled || !visibleProp);
     useResize(contentResizeRef, updatePosition.fn, undefined, disabled || !visibleProp);
     useEvent(windowRef, 'click', () => {
-        dataRef.current.clearClickOut = async.requestAnimationFrame(() => {
+        clearClickOut.current = async.requestAnimationFrame(() => {
             handleTrigger(false);
         });
     }, { capture: true }, disabled || !visibleProp || trigger !== 'click');
     return children({
-        renderTrigger: (el) => {
-            if (disabled) {
-                return el;
-            }
-            const triggerProps = {};
-            switch (trigger) {
-                case 'hover':
-                    triggerProps.onMouseEnter = (e) => {
-                        var _a, _b;
-                        (_b = (_a = el.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                        handleTrigger(true, 'hover');
-                    };
-                    triggerProps.onMouseLeave = (e) => {
-                        var _a, _b;
-                        (_b = (_a = el.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                        handleTrigger(false, 'hover');
-                    };
-                    break;
-                case 'click':
-                    triggerProps.onClick = (e) => {
-                        var _a, _b, _c, _d;
-                        (_b = (_a = el.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                        (_d = (_c = dataRef.current).clearClickOut) === null || _d === void 0 ? void 0 : _d.call(_c);
-                        handleTrigger();
-                    };
-                    break;
-                default:
-                    break;
-            }
-            return cloneElement(el, triggerProps);
+        trigger: {
+            onClick: () => {
+                if (!disabled && trigger === 'click') {
+                    clearClickOut.current();
+                    handleTrigger();
+                }
+            },
+            onMouseEnter: () => {
+                if (!disabled && trigger === 'hover') {
+                    handleTrigger(true, 'hover');
+                }
+            },
+            onMouseLeave: () => {
+                if (!disabled && trigger === 'hover') {
+                    handleTrigger(false, 'hover');
+                }
+            },
         },
-        renderPopup: (el) => {
-            if (disabled) {
-                return el;
-            }
-            const popupProps = {};
-            if (visibleProp) {
-                switch (trigger) {
-                    case 'hover':
-                        popupProps.onMouseEnter = (e) => {
-                            var _a, _b;
-                            (_b = (_a = el.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                            handleTrigger(true, 'popup-hover');
-                        };
-                        popupProps.onMouseLeave = (e) => {
-                            var _a, _b;
-                            (_b = (_a = el.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                            handleTrigger(false, 'popup-hover');
-                        };
-                        break;
-                    case 'click':
-                        popupProps.onClick = (e) => {
-                            var _a, _b, _c, _d;
-                            (_b = (_a = el.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                            (_d = (_c = dataRef.current).clearClickOut) === null || _d === void 0 ? void 0 : _d.call(_c);
-                        };
-                        break;
-                    default:
-                        break;
+        popup: {
+            onClick: () => {
+                if (!disabled && visibleProp && trigger === 'click') {
+                    clearClickOut.current();
                 }
-            }
-            return cloneElement(el, popupProps);
+            },
+            onMouseEnter: () => {
+                if (!disabled && visibleProp && trigger === 'hover') {
+                    handleTrigger(true, 'popup-hover');
+                }
+            },
+            onMouseLeave: () => {
+                if (!disabled && visibleProp && trigger === 'hover') {
+                    handleTrigger(false, 'popup-hover');
+                }
+            },
         },
     });
 }

package/internal/popup/types.d.ts

@@ -1,11 +1,18 @@
 /// <reference types="react" />
-import type { CloneHTMLElement } from '../../types';
 export {};
 export interface PopupProps {
     children: (props: {
-        renderTrigger: CloneHTMLElement;
-        renderPopup: CloneHTMLElement;
-    }) => JSX.Element | null;
+        trigger: {
+            onClick: React.MouseEventHandler<HTMLElement>;
+            onMouseEnter: React.MouseEventHandler<HTMLElement>;
+            onMouseLeave: React.MouseEventHandler<HTMLElement>;
+        };
+        popup: {
+            onClick: React.MouseEventHandler<HTMLElement>;
+            onMouseEnter: React.MouseEventHandler<HTMLElement>;
+            onMouseLeave: React.MouseEventHandler<HTMLElement>;
+        };
+    }) => React.ReactElement | null;
     visible: boolean;
     trigger: 'hover' | 'click';
     disabled?: boolean;
@@ -13,8 +20,8 @@ export interface PopupProps {
     mouseLeaveDelay?: number;
     updatePosition: {
         fn: () => void;
-        triggerRef: React.RefObject<HTMLElement>;
-        popupRef: React.RefObject<HTMLElement>;
+        triggerRef: React.RefObject<HTMLElement | null>;
+        popupRef: React.RefObject<HTMLElement | null>;
         scroll?: boolean;
     };
     onVisibleChange: (visible: boolean) => void;

package/internal/portal/Portal.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { PortalProps } from './types';
-export declare const Portal: import("react").ForwardRefExoticComponent<PortalProps & import("react").RefAttributes<HTMLElement>>;
+export declare function Portal<T extends Element = HTMLElement>(props: PortalProps<T>): React.ReactElement | null;

package/internal/portal/Portal.js

@@ -1,14 +1,20 @@
 import { useIsomorphicLayoutEffect } from '@laser-ui/hooks';
 import { isString } from 'lodash';
-import { forwardRef, useImperativeHandle, useState } from 'react';
+import { useImperativeHandle, useState } from 'react';
 import { createPortal } from 'react-dom';
-export const Portal = forwardRef((props, ref) => {
-    const { children, selector } = props;
-    const [container, setContainer] = useState(null);
+export function Portal(props) {
+    const { ref, children, selector } = props;
+    const getContainer = () => (isString(selector) ? document.querySelector(selector) : selector());
+    const [container, setContainer] = useState(() => {
+        if (typeof window !== 'undefined') {
+            return getContainer();
+        }
+        return null;
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useIsomorphicLayoutEffect(() => {
-        setContainer(isString(selector) ? document.querySelector(selector) : selector());
+        setContainer(getContainer());
     });
     useImperativeHandle(ref, () => container, [container]);
     return container && createPortal(children, container);
-});
+}

package/internal/portal/types.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export {};
-export interface PortalProps {
+export interface PortalProps<T extends Element = HTMLElement> {
+    ref?: React.Ref<T | null>;
     children: React.ReactNode;
-    selector: (() => HTMLElement | null) | string;
+    selector: (() => T | null) | string;
 }

package/mask/Mask.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { MaskProps } from './types';
+export declare function Mask(props: MaskProps): React.ReactElement | null;

package/mask/Mask.js

@@ -0,0 +1,31 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CLASSES } from './vars';
+import { useNamespace, useStyled } from '../hooks';
+import { Transition } from '../transition';
+import { mergeCS } from '../utils';
+import { TTANSITION_DURING_FAST } from '../vars';
+export function Mask(props) {
+    const { visible, onClose, afterVisibleChange } = props, restProps = __rest(props, ["visible", "onClose", "afterVisibleChange"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { mask: undefined });
+    return (_jsx(Transition, { enter: visible, name: `${namespace}-fade`, duration: TTANSITION_DURING_FAST, 
+        // TODO: Should it be controllable?
+        skipFirstTransition: false, onAfterEnter: () => {
+            afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
+        }, onAfterLeave: () => {
+            afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
+        }, children: (transitionRef, leaved) => (_jsx("div", Object.assign({}, restProps, mergeCS(styled('mask'), {
+            className: restProps.className,
+            style: Object.assign(Object.assign(Object.assign({}, restProps.style), { '--fade-duration': TTANSITION_DURING_FAST + 'ms' }), (leaved ? { display: 'none' } : undefined)),
+        }), { ref: (instance) => {
+                transitionRef(instance);
+                return () => {
+                    transitionRef(null);
+                };
+            }, onClick: (e) => {
+                var _a;
+                (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            } }))) }));
+}

package/menu/Menu.d.ts

@@ -1,5 +1,3 @@
 /// <reference types="react" />
-import type { MenuItem, MenuProps, MenuRef } from './types';
-declare function MenuFC<ID extends React.Key, T extends MenuItem<ID>>(props: MenuProps<ID, T>, ref: React.ForwardedRef<MenuRef>): JSX.Element | null;
-export declare const Menu: <ID extends React.Key, T extends MenuItem<ID>>(props: MenuProps<ID, T> & React.RefAttributes<MenuRef>) => ReturnType<typeof MenuFC>;
-export {};
+import type { MenuItem, MenuProps } from './types';
+export declare function Menu<ID extends React.Key, T extends MenuItem<ID>>(props: MenuProps<ID, T>): React.ReactElement | null;

package/menu/Menu.js

@@ -1,29 +1,28 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEventCallback } from '@laser-ui/hooks';
 import { findNested } from '@laser-ui/utils';
 import { isNull, isUndefined, nth } from 'lodash';
-import { Fragment, forwardRef, useCallback, useId, useImperativeHandle, useRef, useState } from 'react';
+import { Fragment, 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, useContainerScrolling, useControlled, useFocusVisible, useNamespace, useNestedPopup, useStyled, } from '../hooks';
-import { CollapseTransition } from '../internal/transition';
+import { CollapseTransition } from '../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"]);
+export function Menu(props) {
+    const _a = useComponentProps('Menu', props), { ref, styleOverrides, styleProvider, list, mode = 'vertical', width = 'auto', active: activeProp, defaultActive, expands: expandsProp, defaultExpands, expandOne = false, expandTrigger, escClosable = true, onActiveChange, onExpandsChange } = _a, restProps = __rest(_a, ["ref", "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 menuRef = useRef(null);
-    const dataRef = useRef({
-        mousedown: false,
-        updatePosition: new Map(),
-    });
-    const [focusVisible, focusVisibleWrapper] = useFocusVisible((code) => code.startsWith('Arrow') || ['Home', 'End', 'Enter', 'Space'].includes(code));
+    const mousedown = useRef(false);
+    const updateSubPosition = useRef(new Map());
+    const [focusVisible, focusVisibleProps] = 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));
@@ -290,13 +289,13 @@ function MenuFC(props, ref) {
                 }
                 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);
-                            }
+                        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: (instance) => {
+                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                            const fn = instance;
+                            updateSubPosition.current.set(itemId, fn);
+                            return () => {
+                                updateSubPosition.current.delete(itemId);
+                            };
                         }, namespace: namespace, styled: styled, 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) => {
@@ -325,53 +324,50 @@ function MenuFC(props, ref) {
         };
         return getNodes(list, 0, [], true);
     })();
-    const updatePosition = useCallback(() => {
-        for (const fn of dataRef.current.updatePosition.values()) {
-            fn();
+    const updatePosition = useEventCallback(() => {
+        var _a;
+        for (const { id } of popupIds) {
+            (_a = updateSubPosition.current.get(id)) === null || _a === void 0 ? void 0 : _a();
         }
-    }, []);
+    });
     useContainerScrolling(menuRef, updatePosition);
     useImperativeHandle(ref, () => ({ updatePosition }), [updatePosition]);
-    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: (collapseRef, collapseStyle) => {
+    return (_jsx(CollapseTransition, { width: 64, enter: mode !== 'icon', duration: TTANSITION_DURING_BASE, children: (transitionRef, leaved) => {
             var _a;
             const preventBlur = (e) => {
                 if (document.activeElement === e.currentTarget && e.button === 0) {
                     e.preventDefault();
                 }
             };
-            return focusVisibleWrapper(
+            return (
             // 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: (el) => {
-                    collapseRef.current = el;
-                    menuRef.current = el;
-                }, 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) => {
+                style: Object.assign(Object.assign(Object.assign({}, restProps.style), { width }), (leaved ? { width: 64 } : undefined)),
+            }), { ref: (instance) => {
+                    menuRef.current = instance;
+                    transitionRef(instance);
+                    return () => {
+                        menuRef.current = null;
+                        transitionRef(null);
+                    };
+                }, 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) }, focusVisibleProps, { onFocus: (e) => {
                     var _a;
                     (_a = restProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
-                    if (!dataRef.current.mousedown) {
+                    focusVisibleProps.onFocus(e);
+                    if (!mousedown.current) {
                         initFocus();
                     }
-                    dataRef.current.mousedown = false;
+                    mousedown.current = false;
                 }, onBlur: (e) => {
                     var _a;
                     (_a = restProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    focusVisibleProps.onBlur(e);
                     setPopupIds([]);
                 }, onKeyDown: (e) => {
                     var _a;
                     (_a = restProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    focusVisibleProps.onKeyDown(e);
                     if (popupIds.length > 0 && escClosable && e.code === 'Escape') {
                         e.stopPropagation();
                         e.preventDefault();
@@ -383,7 +379,7 @@ function MenuFC(props, ref) {
                 }, onMouseDown: (e) => {
                     var _a;
                     (_a = restProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
-                    dataRef.current.mousedown = true;
+                    mousedown.current = true;
                     preventBlur(e);
                 }, onMouseUp: (e) => {
                     var _a;
@@ -392,4 +388,3 @@ function MenuFC(props, ref) {
                 }, children: nodes })));
         } }));
 }
-export const Menu = forwardRef(MenuFC);

package/menu/internal/MenuGroup.d.ts

@@ -11,5 +11,5 @@ interface MenuGroupProps {
     list: React.ReactNode;
     empty: boolean;
 }
-export declare function MenuGroup(props: MenuGroupProps): JSX.Element | null;
+export declare function MenuGroup(props: MenuGroupProps): React.ReactElement | null;
 export {};

package/menu/internal/MenuItem.d.ts

@@ -19,5 +19,5 @@ interface MenuItemProps {
     disabled: boolean;
     onClick: () => void;
 }
-export declare function MenuItem(props: MenuItemProps): JSX.Element | null;
+export declare function MenuItem(props: MenuItemProps): React.ReactElement | null;
 export {};

package/menu/internal/MenuItem.js

@@ -6,14 +6,18 @@ 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;
-    const node = (_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 }))] })));
-    return (_jsx(Tooltip, { title: children, placement: "right", children: (render) => (iconMode ? render(node) : node) }));
+    return (_jsx(Tooltip, { title: children, placement: "right", children: (tooltipProps) => (_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 } }), (iconMode ? tooltipProps : undefined), { id: id, role: "menuitem", "aria-disabled": disabled, onClick: (e) => {
+                if (iconMode) {
+                    tooltipProps.onClick(e);
+                }
+                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

@@ -3,6 +3,7 @@ import type { Styled } from '../../hooks/useStyled';
 import type { MenuMode } from '../types';
 import type { CLASSES } from '../vars';
 interface MenuSubProps {
+    ref?: React.RefCallback<() => void>;
     children: React.ReactNode;
     namespace: string;
     styled: Styled<typeof CLASSES>;
@@ -26,5 +27,5 @@ interface MenuSubProps {
     onVisibleChange: (visible: boolean) => void;
     onClick: React.MouseEventHandler<HTMLLIElement>;
 }
-export declare const MenuSub: import("react").ForwardRefExoticComponent<MenuSubProps & import("react").RefAttributes<() => void>>;
+export declare function MenuSub(props: MenuSubProps): React.ReactElement | null;
 export {};