@laser-ui/components 1.6.0 → 2.0.0

package/dropdown/Dropdown.js

@@ -2,39 +2,36 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEventCallback, useRefExtra } from '@laser-ui/hooks';
 import { scrollIntoViewIfNeeded } from '@laser-ui/utils';
-import { isFunction, isNull, isNumber, isUndefined, nth } from 'lodash';
-import { Fragment, cloneElement, forwardRef, useId, useImperativeHandle, useRef, useState } from 'react';
+import { isNumber, isUndefined, nth } from 'lodash';
+import { Fragment, useId, useImperativeHandle, useRef, useState } from 'react';
 import { DropdownGroup } from './internal/DropdownGroup';
 import { DropdownItem as DropdownItemFC } from './internal/DropdownItem';
 import { DropdownSub } from './internal/DropdownSub';
 import { checkEnableItem, getSameLevelEnableItems } from './utils';
 import { CLASSES } from './vars';
-import { useComponentProps, useContainerScrolling, useControlled, useFocusVisible, useJSS, useMaxIndex, useNamespace, useNestedPopup, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useFocusVisible, useMaxIndex, useNamespace, useNestedPopup, useStyled, useTranslation, } from '../hooks';
 import { Popup } from '../internal/popup';
 import { Portal } from '../internal/portal';
-import { Transition } from '../internal/transition';
 import { Separator } from '../separator';
+import { Transition } from '../transition';
 import { getVerticalSidePosition, mergeCS } from '../utils';
 import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../vars';
-function DropdownFC(props, ref) {
+export function Dropdown(props) {
     var _a;
-    const _b = useComponentProps('Dropdown', props), { children, styleOverrides, styleProvider, list, visible: visibleProp, defaultVisible, trigger = 'hover', placement: placementProp = 'bottom-right', placementFixed = false, arrow = false, escClosable = true, zIndex: zIndexProp, popupRender, onVisibleChange, afterVisibleChange, onClick } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "list", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "zIndex", "popupRender", "onVisibleChange", "afterVisibleChange", "onClick"]);
+    const _b = useComponentProps('Dropdown', props), { ref, children, styleOverrides, styleProvider, list, visible: visibleProp, defaultVisible, trigger = 'hover', placement: placementProp = 'bottom-right', placementFixed = false, arrow = false, escClosable = true, zIndex: zIndexProp, popupRender, onVisibleChange, afterVisibleChange, onClick } = _b, restProps = __rest(_b, ["ref", "children", "styleOverrides", "styleProvider", "list", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "zIndex", "popupRender", "onVisibleChange", "afterVisibleChange", "onClick"]);
     const namespace = useNamespace();
     const { t } = useTranslation();
     const styled = useStyled(CLASSES, { dropdown: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.dropdown, 'dropdown-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['dropdown-popup'] }, styleOverrides);
-    const sheet = useJSS();
     const uniqueId = useId();
     const id = (_a = restProps.id) !== null && _a !== void 0 ? _a : `${namespace}-dropdown-${uniqueId}`;
-    let triggerId;
+    const triggerId = `${namespace}-dropdown-trigger-${uniqueId}`;
     const getItemId = (id) => `${namespace}-dropdown-item-${id}-${uniqueId}`;
     const triggerRef = useRefExtra(() => document.getElementById(triggerId));
     const popupRef = useRef(null);
     const ulRef = useRef(null);
     const dropdownRef = useRef(null);
-    const dataRef = useRef({
-        updatePosition: new Map(),
-    });
-    const [focusVisible, focusVisibleWrapper] = useFocusVisible((code) => code.startsWith('Arrow') || ['Home', 'End', 'Enter', 'Space'].includes(code));
+    const updateSubPosition = useRef(new Map());
+    const [focusVisible, focusVisibleProps] = useFocusVisible((code) => code.startsWith('Arrow') || ['Home', 'End', 'Enter', 'Space'].includes(code));
     const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
     const { popupIdsRef, setPopupIds, addPopupId, removePopupId } = useNestedPopup();
     if (!visible) {
@@ -92,7 +89,6 @@ function DropdownFC(props, ref) {
     };
     const maxZIndex = useMaxIndex(visible);
     const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
-    const transformOrigin = useRef();
     const placement = useRef(placementProp);
     const updatePosition = useEventCallback(() => {
         if (visible && triggerRef.current && dropdownRef.current && popupRef.current) {
@@ -102,18 +98,12 @@ function DropdownFC(props, ref) {
                 placementFixed,
                 inWindow: WINDOW_SPACE,
             });
-            transformOrigin.current = position.transformOrigin;
+            popupRef.current.style.setProperty(`--popup-down-transform-origin`, position.transformOrigin);
+            popupRef.current.style.top = position.top + 'px';
+            popupRef.current.style.left = position.left + 'px';
             dropdownRef.current.classList.toggle(`${namespace}-dropdown--${placement.current}`, false);
             placement.current = position.placement;
             dropdownRef.current.classList.toggle(`${namespace}-dropdown--${placement.current}`, true);
-            if (sheet.classes.position) {
-                popupRef.current.classList.toggle(sheet.classes.position, false);
-            }
-            sheet.replaceRule('position', {
-                top: position.top,
-                left: position.left,
-            });
-            popupRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
     const preventBlur = (e) => {
@@ -227,13 +217,13 @@ function DropdownFC(props, ref) {
                     }
                 };
             }
-            return (_jsxs(Fragment, { children: [itemSeparator && _jsx(Separator, { style: { margin: '2px 0' } }), itemType === 'item' ? (_jsx(DropdownItemFC, { namespace: namespace, styled: styled, id: id, level: level, icon: itemIcon, focus: focusVisible && isFocus, disabled: itemDisabled, onClick: handleItemClick, children: itemTitle })) : itemType === 'group' ? (_jsx(DropdownGroup, { styled: styled, id: id, level: level, list: children && getNodes(children, level + 1, newSubParents), empty: isEmpty, children: itemTitle })) : (_jsx(DropdownSub, { ref: (fn) => {
-                            if (isNull(fn)) {
-                                dataRef.current.updatePosition.delete(itemId);
-                            }
-                            else {
-                                dataRef.current.updatePosition.set(itemId, fn);
-                            }
+            return (_jsxs(Fragment, { children: [itemSeparator && _jsx(Separator, { style: { margin: '2px 0' } }), itemType === 'item' ? (_jsx(DropdownItemFC, { namespace: namespace, styled: styled, id: id, level: level, icon: itemIcon, focus: focusVisible && isFocus, disabled: itemDisabled, onClick: handleItemClick, children: itemTitle })) : itemType === 'group' ? (_jsx(DropdownGroup, { styled: styled, id: id, level: level, list: children && getNodes(children, level + 1, newSubParents), empty: isEmpty, children: itemTitle })) : (_jsx(DropdownSub, { 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, icon: itemIcon, list: children && getNodes(children, 0, newSubParents), popupState: popupState === null || popupState === void 0 ? void 0 : popupState.visible, trigger: trigger, empty: isEmpty, focus: focusVisible && isFocus, disabled: itemDisabled, zIndex: isUndefined(zIndex)
                             ? zIndex
                             : isNumber(zIndex)
@@ -255,40 +245,43 @@ function DropdownFC(props, ref) {
         return getNodes(list, 0, []);
     })();
     const updateAllPosition = useEventCallback(() => {
+        var _a;
         updatePosition();
-        for (const fn of dataRef.current.updatePosition.values()) {
-            fn();
+        for (const { id } of popupIds) {
+            (_a = updateSubPosition.current.get(id)) === null || _a === void 0 ? void 0 : _a();
         }
     });
     useContainerScrolling(triggerRef, updateAllPosition, !visible);
-    useImperativeHandle(ref, () => ({ updatePosition: updateAllPosition }), [updateAllPosition]);
+    useImperativeHandle(ref, () => ({ updatePosition: updateAllPosition }), []);
     return (_jsx(Popup, { visible: visible, trigger: trigger, updatePosition: {
             fn: updatePosition,
             triggerRef,
             popupRef,
-        }, onVisibleChange: changeVisible, children: ({ renderTrigger, renderPopup }) => {
-            const render = (el) => {
-                var _a, _b;
-                triggerId = (_a = el.props.id) !== null && _a !== void 0 ? _a : `${namespace}-dropdown-trigger-${uniqueId}`;
-                return renderTrigger(focusVisibleWrapper(cloneElement(el, {
+        }, onVisibleChange: changeVisible, children: (popupProps) => (_jsxs(_Fragment, { children: [children({
                     id: triggerId,
-                    tabIndex: (_b = el.props.tabIndex) !== null && _b !== void 0 ? _b : 0,
+                    tabIndex: 0,
                     'aria-haspopup': 'menu',
                     'aria-expanded': visible,
                     'aria-controls': id,
+                    onClick: (e) => {
+                        popupProps.trigger.onClick(e);
+                    },
+                    onMouseEnter: (e) => {
+                        popupProps.trigger.onMouseEnter(e);
+                    },
+                    onMouseLeave: (e) => {
+                        popupProps.trigger.onMouseLeave(e);
+                    },
                     onFocus: (e) => {
-                        var _a, _b;
-                        (_b = (_a = el.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                        focusVisibleProps.onFocus(e);
                         focusFirst();
                     },
                     onBlur: (e) => {
-                        var _a, _b;
-                        (_b = (_a = el.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                        focusVisibleProps.onBlur(e);
                         changeVisible(false);
                     },
                     onKeyDown: (e) => {
-                        var _a, _b;
-                        (_b = (_a = el.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                        focusVisibleProps.onKeyDown(e);
                         if (visible) {
                             if (escClosable && e.code === 'Escape') {
                                 e.stopPropagation();
@@ -318,64 +311,50 @@ function DropdownFC(props, ref) {
                             }
                         }
                     },
-                })));
-            };
-            return (_jsxs(_Fragment, { children: [isFunction(children) ? children(render) : render(children), _jsx(Portal, { selector: () => {
-                            let el = document.getElementById(`${namespace}-dropdown-root`);
-                            if (!el) {
-                                el = document.createElement('div');
-                                el.id = `${namespace}-dropdown-root`;
-                                document.body.appendChild(el);
-                            }
-                            return el;
-                        }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: updatePosition, afterEnter: () => {
-                                afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
-                            }, afterLeave: () => {
-                                afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
-                            }, children: (state) => {
-                                let transitionStyle = {};
-                                switch (state) {
-                                    case 'enter':
-                                        transitionStyle = { transform: 'scaleY(0.7)', opacity: 0 };
-                                        break;
-                                    case 'entering':
-                                        transitionStyle = {
-                                            transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
-                                            transformOrigin: transformOrigin.current,
-                                        };
-                                        break;
-                                    case 'leaving':
-                                        transitionStyle = {
-                                            transform: 'scaleY(0.7)',
-                                            opacity: 0,
-                                            transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
-                                            transformOrigin: transformOrigin.current,
-                                        };
-                                        break;
-                                    case 'leaved':
-                                        transitionStyle = { display: 'none' };
-                                        break;
-                                    default:
-                                        break;
-                                }
-                                return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('dropdown'), {
-                                    className: restProps.className,
-                                    style: restProps.style,
-                                }), { ref: dropdownRef, 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: renderPopup(_jsxs("div", Object.assign({}, mergeCS(styled('dropdown-popup'), {
-                                        style: Object.assign({ zIndex }, transitionStyle),
-                                    }), { ref: popupRef, children: [(() => {
-                                                const el = (_jsx("ul", Object.assign({}, styled('dropdown__list'), { ref: ulRef, id: id, tabIndex: -1, role: "menu", "aria-labelledby": triggerId, "aria-activedescendant": isUndefined(focusId) ? undefined : getItemId(focusId), children: list.length === 0 ? _jsx("div", Object.assign({}, styled('dropdown__empty'), { children: t('No data') })) : nodes })));
-                                                return popupRender ? popupRender(el) : el;
-                                            })(), arrow && _jsx("div", Object.assign({}, styled('dropdown__arrow')))] }))) })));
-                            } }) })] }));
-        } }));
+                }), _jsx(Portal, { selector: () => {
+                        let el = document.getElementById(`${namespace}-dropdown-root`);
+                        if (!el) {
+                            el = document.createElement('div');
+                            el.id = `${namespace}-dropdown-root`;
+                            document.body.appendChild(el);
+                        }
+                        return el;
+                    }, children: _jsx(Transition, { enter: visible, name: `${namespace}-popup-down`, duration: TTANSITION_DURING_POPUP, onSkipEnter: updatePosition, onBeforeEnter: updatePosition, 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('dropdown'), {
+                            className: restProps.className,
+                            style: Object.assign(Object.assign({}, restProps.style), (leaved ? { display: 'none' } : undefined)),
+                        }), { ref: (instance) => {
+                                dropdownRef.current = instance;
+                                return () => {
+                                    dropdownRef.current = null;
+                                };
+                            }, 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: _jsxs("div", Object.assign({}, mergeCS(styled('dropdown-popup'), {
+                                style: Object.assign({ zIndex }, (leaved ? { display: 'none' } : undefined)),
+                            }), { ref: (instance) => {
+                                    popupRef.current = instance;
+                                    transitionRef(instance);
+                                    return () => {
+                                        popupRef.current = null;
+                                        transitionRef(null);
+                                    };
+                                } }, popupProps.popup, { children: [(() => {
+                                        const el = (_jsx("ul", Object.assign({}, styled('dropdown__list'), { ref: (instance) => {
+                                                ulRef.current = instance;
+                                                return () => {
+                                                    ulRef.current = null;
+                                                };
+                                            }, id: id, tabIndex: -1, role: "menu", "aria-labelledby": triggerId, "aria-activedescendant": isUndefined(focusId) ? undefined : getItemId(focusId), children: list.length === 0 ? _jsx("div", Object.assign({}, styled('dropdown__empty'), { children: t('No data') })) : nodes })));
+                                        return popupRender ? popupRender(el) : el;
+                                    })(), arrow && _jsx("div", Object.assign({}, styled('dropdown__arrow')))] })) }))) }) })] })) }));
 }
-export const Dropdown = forwardRef(DropdownFC);

package/dropdown/internal/DropdownGroup.d.ts

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

package/dropdown/internal/DropdownItem.d.ts

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

package/dropdown/internal/DropdownSub.d.ts

@@ -2,6 +2,7 @@
 import type { Styled } from '../../hooks/useStyled';
 import type { CLASSES } from '../vars';
 interface DropdownSubProps {
+    ref?: React.RefCallback<() => void>;
     children: React.ReactNode;
     namespace: string;
     styled: Styled<typeof CLASSES>;
@@ -17,5 +18,5 @@ interface DropdownSubProps {
     zIndex: number | string | undefined;
     onVisibleChange: (visible: boolean) => void;
 }
-export declare const DropdownSub: import("react").ForwardRefExoticComponent<DropdownSubProps & import("react").RefAttributes<() => void>>;
+export declare function DropdownSub(props: DropdownSubProps): React.ReactElement | null;
 export {};

package/dropdown/internal/DropdownSub.js

@@ -3,22 +3,20 @@ import { useEventCallback } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
 import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isUndefined } from 'lodash';
-import { forwardRef, useImperativeHandle, useRef } from 'react';
-import { useJSS, useTranslation } from '../../hooks';
+import { useImperativeHandle, useRef } from 'react';
+import { useTranslation } from '../../hooks';
 import { Icon } from '../../icon';
 import { Popup } from '../../internal/popup';
 import { Portal } from '../../internal/portal';
-import { Transition } from '../../internal/transition';
+import { Transition } from '../../transition';
 import { getHorizontalSidePosition, mergeCS } from '../../utils';
 import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../vars';
-export const DropdownSub = forwardRef((props, ref) => {
-    const { children, namespace, styled, id, level, icon, list, popupState, trigger, empty, focus, disabled, zIndex, onVisibleChange } = props;
-    const sheet = useJSS();
+export function DropdownSub(props) {
+    const { ref, children, namespace, styled, id, level, icon, list, popupState, trigger, empty, focus, disabled, zIndex, onVisibleChange } = props;
     const triggerRef = useRef(null);
     const popupRef = useRef(null);
     const { t } = useTranslation();
     const visible = !isUndefined(popupState);
-    const transformOrigin = useRef();
     const updatePosition = useEventCallback(() => {
         if (!disabled && visible && popupRef.current && triggerRef.current) {
             const [width, height] = [popupRef.current.offsetWidth, popupRef.current.offsetHeight];
@@ -26,15 +24,9 @@ export const DropdownSub = forwardRef((props, ref) => {
                 placement: 'right',
                 inWindow: WINDOW_SPACE,
             });
-            transformOrigin.current = position.transformOrigin;
-            if (sheet.classes.position) {
-                popupRef.current.classList.toggle(sheet.classes.position, false);
-            }
-            sheet.replaceRule('position', {
-                top: position.top,
-                left: position.left,
-            });
-            popupRef.current.classList.toggle(sheet.classes.position, true);
+            popupRef.current.style.setProperty(`--popup-transform-origin`, position.transformOrigin);
+            popupRef.current.style.top = position.top + 'px';
+            popupRef.current.style.left = position.left + 'px';
         }
     });
     useImperativeHandle(ref, () => updatePosition, [updatePosition]);
@@ -43,10 +35,15 @@ export const DropdownSub = forwardRef((props, ref) => {
             triggerRef,
             popupRef,
             scroll: false,
-        }, onVisibleChange: onVisibleChange, children: ({ renderTrigger, renderPopup }) => (_jsxs(_Fragment, { children: [renderTrigger(_jsxs("li", Object.assign({}, mergeCS(styled('dropdown__item', 'dropdown__item--sub', {
+        }, onVisibleChange: onVisibleChange, children: (popupProps) => (_jsxs(_Fragment, { children: [_jsxs("li", Object.assign({}, mergeCS(styled('dropdown__item', 'dropdown__item--sub', {
                     'dropdown__item.is-expand': visible,
                     'dropdown__item.is-disabled': disabled,
-                }), { style: { paddingLeft: 12 + level * 16 } }), { ref: triggerRef, id: id, role: "menuitem", "aria-haspopup": true, "aria-expanded": visible, "aria-disabled": disabled, children: [focus && _jsx("div", { className: `${namespace}-focus-outline` }), checkNodeExist(icon) && _jsx("div", Object.assign({}, styled('dropdown__item-icon'), { children: icon })), _jsx("div", Object.assign({}, styled('dropdown__item-content'), { children: children })), _jsx("div", Object.assign({}, styled('dropdown__sub-arrow'), { children: _jsx(Icon, { children: _jsx(KeyboardArrowRightOutlined, {}) }) }))] }))), _jsx(Portal, { selector: () => {
+                }), { style: { paddingLeft: 12 + level * 16 } }), { ref: (instance) => {
+                        triggerRef.current = instance;
+                        return () => {
+                            triggerRef.current = null;
+                        };
+                    }, id: id, role: "menuitem", "aria-haspopup": true, "aria-expanded": visible, "aria-disabled": disabled }, popupProps.trigger, { children: [focus && _jsx("div", { className: `${namespace}-focus-outline` }), checkNodeExist(icon) && _jsx("div", Object.assign({}, styled('dropdown__item-icon'), { children: icon })), _jsx("div", Object.assign({}, styled('dropdown__item-content'), { children: children })), _jsx("div", Object.assign({}, styled('dropdown__sub-arrow'), { children: _jsx(Icon, { children: _jsx(KeyboardArrowRightOutlined, {}) }) }))] })), _jsx(Portal, { selector: () => {
                         let el = document.getElementById(`${namespace}-dropdown-root`);
                         if (!el) {
                             el = document.createElement('div');
@@ -54,34 +51,14 @@ export const DropdownSub = forwardRef((props, ref) => {
                             document.body.appendChild(el);
                         }
                         return el;
-                    }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: updatePosition, children: (state) => {
-                            let transitionStyle = {};
-                            switch (state) {
-                                case 'enter':
-                                    transitionStyle = { transform: 'scale(0)', opacity: 0 };
-                                    break;
-                                case 'entering':
-                                    transitionStyle = {
-                                        transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
-                                        transformOrigin: transformOrigin.current,
-                                    };
-                                    break;
-                                case 'leaving':
-                                    transitionStyle = {
-                                        transform: 'scale(0)',
-                                        opacity: 0,
-                                        transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
-                                        transformOrigin: transformOrigin.current,
-                                    };
-                                    break;
-                                case 'leaved':
-                                    transitionStyle = { display: 'none' };
-                                    break;
-                                default:
-                                    break;
-                            }
-                            return renderPopup(_jsx("div", Object.assign({}, mergeCS(styled('dropdown-popup'), {
-                                style: Object.assign({ zIndex }, transitionStyle),
-                            }), { ref: popupRef, children: _jsx("ul", Object.assign({}, styled('dropdown__list'), { role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('dropdown__empty'), { style: { paddingLeft: 12 + level * 16 } }), { children: t('No data') }))) : (list) })) })));
-                        } }) })] })) }));
-});
+                    }, children: _jsx(Transition, { enter: visible, name: `${namespace}-popup`, duration: TTANSITION_DURING_POPUP, onSkipEnter: updatePosition, onBeforeEnter: updatePosition, children: (transitionRef, leaved) => (_jsx("div", Object.assign({}, mergeCS(styled('dropdown-popup'), {
+                            style: Object.assign({ zIndex }, (leaved ? { display: 'none' } : undefined)),
+                        }), { ref: (instance) => {
+                                popupRef.current = instance;
+                                transitionRef(instance);
+                                return () => {
+                                    popupRef.current = null;
+                                    transitionRef(null);
+                                };
+                            } }, popupProps.popup, { children: _jsx("ul", Object.assign({}, styled('dropdown__list'), { role: "menu", "aria-labelledby": id, children: empty ? (_jsx("div", Object.assign({}, mergeCS(styled('dropdown__empty'), { style: { paddingLeft: 12 + level * 16 } }), { children: t('No data') }))) : (list) })) }))) }) })] })) }));
+}

package/dropdown/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { CLASSES } from './vars';
-import type { BaseProps, CloneHTMLElement, VerticalSidePlacement } from '../types';
+import type { BaseProps, VerticalSidePlacement } from '../types';
 export {};
 export interface DropdownRef {
     updatePosition: () => void;
@@ -15,7 +15,20 @@ export interface DropdownItem<ID extends React.Key> {
     children?: DropdownItem<ID>[];
 }
 export interface DropdownProps<ID extends React.Key, T extends DropdownItem<ID>> extends BaseProps<'dropdown' | 'dropdown-popup', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onClick'> {
-    children: React.ReactElement | ((render: CloneHTMLElement) => React.ReactNode);
+    ref?: React.Ref<DropdownRef>;
+    children: (props: {
+        id: string;
+        tabIndex: number;
+        'aria-haspopup': 'menu';
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        onClick: React.MouseEventHandler<HTMLElement>;
+        onMouseEnter: React.MouseEventHandler<HTMLElement>;
+        onMouseLeave: React.MouseEventHandler<HTMLElement>;
+        onFocus: React.FocusEventHandler<HTMLElement>;
+        onBlur: React.FocusEventHandler<HTMLElement>;
+        onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+    }) => React.ReactNode;
     list: T[];
     visible?: boolean;
     defaultVisible?: boolean;

package/empty/Empty.d.ts

@@ -2,6 +2,6 @@
 import type { EmptyProps } from './types';
 import { SIMPLE_IMG } from './vars';
 export declare const Empty: {
-    (props: EmptyProps): JSX.Element | null;
+    (props: EmptyProps): React.ReactElement | null;
     SIMPLE_IMG: typeof SIMPLE_IMG;
 };

package/fab/Fab.d.ts

@@ -3,7 +3,7 @@ import type { FabProps } from './types';
 import { FabBacktop } from './FabBacktop';
 import { FabButton } from './FabButton';
 export declare const Fab: {
-    (props: FabProps): JSX.Element | null;
+    (props: FabProps): React.ReactElement | null;
     Button: typeof FabButton;
     Backtop: typeof FabBacktop;
 };

package/fab/Fab.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement } from 'react';
+import { has } from 'lodash';
 import { FabBacktop } from './FabBacktop';
 import { FabButton } from './FabButton';
-import { CLASSES } from './vars';
+import { CLASSES, FabContext, FabListContext } from './vars';
 import { useComponentProps, useControlled, useStyled } from '../hooks';
 import { mergeCS } from '../utils';
 export const Fab = (props) => {
@@ -13,19 +13,24 @@ export const Fab = (props) => {
     return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('fab'), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: [cloneElement(children, Object.assign({ _expand: expand }, { onClick: (e) => {
-                    var _a, _b;
-                    (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                    if (list) {
-                        changeExpand((draft) => !draft);
-                    }
-                } })), expand &&
+    }), { children: [_jsx(FabContext, { value: {
+                    expand,
+                    onClick: () => {
+                        if (list) {
+                            changeExpand((prev) => !prev);
+                        }
+                    },
+                }, children: children }), expand &&
                 list &&
-                list.map(({ placement, actions }, key) => (_jsx("div", Object.assign({}, styled('fab__actions', `fab__actions--${placement}`), { children: Children.map(actions, (action, index) => cloneElement(action, Object.assign({ _action: true }, { style: Object.assign(Object.assign({}, action.props.style), { animationDelay: `${index * 33}ms` }), onClick: (e) => {
-                            var _a, _b;
-                            (_b = (_a = action.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                            changeExpand(false);
-                        } }))) }), key)))] })));
+                list.map(({ placement, actions }) => (_jsx("div", Object.assign({}, styled('fab__actions', `fab__actions--${placement}`), { children: actions.map((node, index) => {
+                        const { id, action } = (has(node, ['id', 'action']) ? node : { id: index, action: node });
+                        return (_jsx(FabListContext, { value: {
+                                index,
+                                onClick: () => {
+                                    changeExpand(false);
+                                },
+                            }, children: action }, id));
+                    }) }), placement)))] })));
 };
 Fab.Button = FabButton;
 Fab.Backtop = FabBacktop;

package/fab/FabBacktop.d.ts

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

package/fab/FabBacktop.js

@@ -1,32 +1,24 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEvent, useIsomorphicLayoutEffect, useRefExtra, useResize } from '@laser-ui/hooks';
+import { useEvent, useIsomorphicLayoutEffect, useRefExtra, useResize, useUnmount } from '@laser-ui/hooks';
 import { scrollTo, toPx } from '@laser-ui/utils';
 import VerticalAlignTopOutlined from '@material-design-icons/svg/outlined/vertical_align_top.svg?react';
 import { isString } from 'lodash';
-import { cloneElement, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { FabButton } from './FabButton';
-import { useComponentProps, useLayout } from '../hooks';
+import { FabBacktopContext } from './vars';
+import { useComponentProps, useLayout, useNamespace } from '../hooks';
 import { Icon } from '../icon';
-import { Transition } from '../internal/transition';
+import { Transition } from '../transition';
 import { TTANSITION_DURING_BASE } from '../vars';
 export function FabBacktop(props) {
     const _a = useComponentProps('FabBacktop', props), { children, page, distance: distanceProp = 400, scrollBehavior = 'instant' } = _a, restProps = __rest(_a, ["children", "page", "distance", "scrollBehavior"]);
+    const namespace = useNamespace();
     const { pageScrollRef, contentResizeRef } = useLayout();
     const pageRef = useRefExtra(page !== null && page !== void 0 ? page : (() => pageScrollRef.current));
-    const dataRef = useRef({});
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const clearTid = useRef(() => { });
     const [visible, setVisible] = useState(false);
-    const transitionStyles = {
-        enter: { opacity: 0 },
-        entering: {
-            transition: ['opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms linear`).join(', '),
-        },
-        leaving: {
-            opacity: 0,
-            transition: ['opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms linear`).join(', '),
-        },
-        leaved: { display: 'none' },
-    };
     const updateBackTop = () => {
         if (pageRef.current) {
             const distance = isString(distanceProp) ? toPx(distanceProp, true) : distanceProp;
@@ -39,19 +31,20 @@ export function FabBacktop(props) {
     }, []);
     useEvent(pageRef, 'scroll', updateBackTop, { passive: true });
     useResize(contentResizeRef, updateBackTop);
-    const node = (_jsx(FabButton, Object.assign({}, restProps, { children: children !== null && children !== void 0 ? children : (_jsx(Icon, { children: _jsx(VerticalAlignTopOutlined, {}) })) })));
-    return (_jsx(Transition, { enter: visible, during: TTANSITION_DURING_BASE, children: (state) => cloneElement(node, {
-            style: Object.assign(Object.assign({}, node.props.style), transitionStyles[state]),
-            onClick: (e) => {
-                var _a, _b, _c, _d;
-                (_b = (_a = node.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                if (pageRef.current) {
-                    (_d = (_c = dataRef.current).clearTid) === null || _d === void 0 ? void 0 : _d.call(_c);
-                    dataRef.current.clearTid = scrollTo(pageRef.current, {
-                        top: 0,
-                        behavior: scrollBehavior,
-                    });
-                }
-            },
-        }) }));
+    useUnmount(() => {
+        clearTid.current();
+    });
+    return (_jsx(Transition, { enter: visible, name: `${namespace}-fade`, duration: TTANSITION_DURING_BASE, children: (transitionRef, leaved) => (_jsx(FabBacktopContext, { value: {
+                ref: transitionRef,
+                leaved,
+                onClick: () => {
+                    if (pageRef.current) {
+                        clearTid.current();
+                        clearTid.current = scrollTo(pageRef.current, {
+                            top: 0,
+                            behavior: scrollBehavior,
+                        });
+                    }
+                },
+            }, children: _jsx(FabButton, Object.assign({}, restProps, { children: children !== null && children !== void 0 ? children : (_jsx(Icon, { children: _jsx(VerticalAlignTopOutlined, {}) })) })) })) }));
 }

package/fab/FabButton.d.ts

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