@laser-ui/components 1.6.1 → 2.0.0

package/time-picker/internal/TimePickerPanel.js

@@ -4,12 +4,12 @@ import { useEventCallback } from '@laser-ui/hooks';
 import { scrollTo } from '@laser-ui/utils';
 import { freeze } from 'immer';
 import { isUndefined } from 'lodash';
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { useImperativeHandle, useRef, useState } from 'react';
 import dayjs from '../../dayjs';
 const H12 = freeze(['12', ...Array.from({ length: 11 }).map((_, i) => `${i + 1 < 10 ? '0' : ''}${i + 1}`)]);
 const [H24, M60, S60] = [24, 60, 60].map((num) => freeze(Array.from({ length: num }).map((_, i) => `${i < 10 ? '0' : ''}${i}`)));
-export const TimePickerPanel = forwardRef((props, ref) => {
-    const { styled, time: timeProp, format: formatProp, config, inDatePicker = false, onTimeChange } = props;
+export function TimePickerPanel(props) {
+    const { ref, styled, time: timeProp, format: formatProp, config, inDatePicker = false, onTimeChange } = props;
     const ulHRef = useRef(null);
     const ulMRef = useRef(null);
     const ulSRef = useRef(null);
@@ -78,7 +78,12 @@ export const TimePickerPanel = forwardRef((props, ref) => {
     useImperativeHandle(ref, () => (t) => {
         updateView(t, undefined, 'instant');
     }, [updateView]);
-    return (_jsxs("div", Object.assign({}, styled('time-picker__panel'), { children: [inDatePicker && _jsx("div", Object.assign({}, styled('time-picker__header'), { children: time.format(cols.join(':')) })), cols.includes('HH') && (_jsx("ul", Object.assign({}, styled('time-picker__column'), { ref: ulHRef, children: (is12Hour ? H12 : H24).map((n) => {
+    return (_jsxs("div", Object.assign({}, styled('time-picker__panel'), { children: [inDatePicker && _jsx("div", Object.assign({}, styled('time-picker__header'), { children: time.format(cols.join(':')) })), cols.includes('HH') && (_jsx("ul", Object.assign({}, styled('time-picker__column'), { ref: (instance) => {
+                    ulHRef.current = instance;
+                    return () => {
+                        ulHRef.current = null;
+                    };
+                }, children: (is12Hour ? H12 : H24).map((n) => {
                     var _b;
                     let hour = Number(n);
                     if (is12Hour) {
@@ -98,7 +103,12 @@ export const TimePickerPanel = forwardRef((props, ref) => {
                             updateView(newTime, 'hour');
                             onTimeChange(newTime);
                         } }), n));
-                }) }))), cols.includes('mm') && (_jsx("ul", Object.assign({}, styled('time-picker__column'), { ref: ulMRef, children: M60.map((n) => {
+                }) }))), cols.includes('mm') && (_jsx("ul", Object.assign({}, styled('time-picker__column'), { ref: (instance) => {
+                    ulMRef.current = instance;
+                    return () => {
+                        ulMRef.current = null;
+                    };
+                }, children: M60.map((n) => {
                     var _b;
                     const minute = Number(n);
                     const { disabled, hidden } = (_b = config === null || config === void 0 ? void 0 : config('minute', minute)) !== null && _b !== void 0 ? _b : {};
@@ -110,7 +120,12 @@ export const TimePickerPanel = forwardRef((props, ref) => {
                             updateView(newTime, 'minute');
                             onTimeChange(newTime);
                         } }), n));
-                }) }))), cols.includes('ss') && (_jsx("ul", Object.assign({}, styled('time-picker__column'), { ref: ulSRef, children: S60.map((n) => {
+                }) }))), cols.includes('ss') && (_jsx("ul", Object.assign({}, styled('time-picker__column'), { ref: (instance) => {
+                    ulSRef.current = instance;
+                    return () => {
+                        ulSRef.current = null;
+                    };
+                }, children: S60.map((n) => {
                     var _b;
                     const second = Number(n);
                     const { disabled, hidden } = (_b = config === null || config === void 0 ? void 0 : config('second', second)) !== null && _b !== void 0 ? _b : {};
@@ -135,4 +150,4 @@ export const TimePickerPanel = forwardRef((props, ref) => {
                             setA(A);
                         }
                     } }), A))) })))] })));
-});
+}

package/time-picker/types.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import type { CLASSES } from './vars';
 import type { FormControlProvider } from '../form/types';
-import type { BaseProps, CloneHTMLElement, Size } from '../types';
+import type { BaseProps, Size } from '../types';
 export {};
 export interface TimePickerRef {
     updatePosition: () => void;
 }
 export interface TimePickerProps extends BaseProps<'time-picker' | 'time-picker-popup', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'placeholder'> {
+    ref?: React.Ref<TimePickerRef>;
     formControl?: FormControlProvider;
     model?: Date | [Date, Date] | null;
     defaultModel?: Date | [Date, Date] | null;
@@ -24,8 +25,7 @@ export interface TimePickerProps extends BaseProps<'time-picker' | 'time-picker-
         hidden?: boolean;
     };
     escClosable?: boolean;
-    inputRef?: [React.ForwardedRef<HTMLInputElement>?, React.ForwardedRef<HTMLInputElement>?];
-    inputRender?: [CloneHTMLElement?, CloneHTMLElement?];
+    inputProps?: [React.ComponentPropsWithRef<'input'>?, React.ComponentPropsWithRef<'input'>?];
     onModelChange?: (date: any) => void;
     onVisibleChange?: (visible: boolean) => void;
     onClear?: () => void;

package/timeline/Timeline.d.ts

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

package/toast/Toast.d.ts

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

package/toast/Toast.js

@@ -12,22 +12,24 @@ import { useId, useRef } from 'react';
 import { CLASSES, TTANSITION_DURING } from './vars';
 import { useComponentProps, useNamespace, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
+import { LazyLoading } from '../internal/lazy-loading';
 import { Portal } from '../internal/portal';
-import { Transition } from '../internal/transition';
+import { CollapseTransition } from '../transition';
 import { mergeCS } from '../utils';
 export function Toast(props) {
-    const _a = useComponentProps('Toast', props), { children, styleOverrides, styleProvider, visible, type, placement = 'top', duration = 2, icon, closable = false, escClosable = true, skipFirstTransition = true, destroyAfterClose = true, onClose, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "visible", "type", "placement", "duration", "icon", "closable", "escClosable", "skipFirstTransition", "destroyAfterClose", "onClose", "afterVisibleChange"]);
+    const _a = useComponentProps('Toast', props), { children, styleOverrides, styleProvider, visible, type, placement = 'top', duration = 2, icon, closable = false, escClosable = true, skipFirstTransition = true, destroyAfterClose = false, lazyLoading = true, onClose, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "visible", "type", "placement", "duration", "icon", "closable", "escClosable", "skipFirstTransition", "destroyAfterClose", "lazyLoading", "onClose", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { toast: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.toast }, styleOverrides);
     const { t } = useTranslation();
     const async = useAsync();
     const toastRef = useRef(null);
-    const dataRef = useRef({});
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const clearTid = useRef(() => { });
     const uniqueId = useId();
     const messageId = `${namespace}-toast-content-${uniqueId}`;
     useMount(() => {
         if (duration > 0) {
-            dataRef.current.clearTid = async.setTimeout(() => {
+            clearTid.current = async.setTimeout(() => {
                 onClose === null || onClose === void 0 ? void 0 : onClose();
             }, duration * 1000);
         }
@@ -47,77 +49,47 @@ export function Toast(props) {
                 root.appendChild(el);
             }
             return el;
-        }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING, skipFirstTransition: skipFirstTransition, destroyWhenLeaved: destroyAfterClose, afterEnter: () => {
+        }, children: _jsx(CollapseTransition, { height: 0, enter: visible, name: `${namespace}-toast`, duration: TTANSITION_DURING, skipFirstTransition: skipFirstTransition, onAfterEnter: () => {
                 afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
-            }, afterLeave: () => {
+            }, onAfterLeave: () => {
                 afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
-            }, children: (state) => {
+            }, children: (transitionRef, leaved) => {
                 var _a, _b;
-                let transitionStyle = {};
-                switch (state) {
-                    case 'enter':
-                        transitionStyle = {
-                            transform: placement === 'top' ? 'translate(0, -70%)' : 'translate(0, 70%)',
-                            opacity: 0,
-                        };
-                        break;
-                    case 'entering':
-                        transitionStyle = {
-                            transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING.enter}ms ease-out`).join(', '),
-                        };
-                        break;
-                    case 'leave':
-                        if (toastRef.current) {
-                            const height = toastRef.current.offsetHeight;
-                            transitionStyle = { height, overflow: 'hidden' };
-                        }
-                        break;
-                    case 'leaving':
-                        transitionStyle = {
-                            height: 0,
-                            overflow: 'hidden',
-                            paddingTop: 0,
-                            paddingBottom: 0,
-                            marginTop: 0,
-                            marginBottom: 0,
-                            opacity: 0,
-                            transition: ['height', 'padding', 'margin', 'opacity']
-                                .map((attr) => `${attr} ${TTANSITION_DURING.leave}ms ease-in`)
-                                .join(', '),
-                        };
-                        break;
-                    case 'leaved':
-                        transitionStyle = { display: 'none' };
-                        break;
-                    default:
-                        break;
-                }
-                return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('toast', {
-                    [`toast--${type}`]: type,
-                }), {
-                    className: restProps.className,
-                    style: Object.assign(Object.assign({}, restProps.style), transitionStyle),
-                }), { ref: toastRef, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : -1, role: (_b = restProps.role) !== null && _b !== void 0 ? _b : 'alert', "aria-describedby": messageId, onMouseEnter: (e) => {
-                        var _a, _b, _c;
-                        (_a = restProps.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
-                        (_c = (_b = dataRef.current).clearTid) === null || _c === void 0 ? void 0 : _c.call(_b);
-                    }, onMouseLeave: (e) => {
-                        var _a;
-                        (_a = restProps.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
-                        if (duration > 0) {
-                            dataRef.current.clearTid = async.setTimeout(() => {
+                return (_jsx(LazyLoading, { hidden: leaved, disabled: !lazyLoading, children: leaved && destroyAfterClose ? null : (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('toast', {
+                        [`toast--${type}`]: type,
+                    }), {
+                        className: restProps.className,
+                        style: Object.assign(Object.assign(Object.assign({}, restProps.style), {
+                            '--toast-transform': placement === 'top' ? 'translate(0, -70%)' : 'translate(0, 70%)',
+                        }), (leaved ? { display: 'none' } : undefined)),
+                    }), { ref: (instance) => {
+                            toastRef.current = instance;
+                            transitionRef(instance);
+                            return () => {
+                                toastRef.current = null;
+                                transitionRef(null);
+                            };
+                        }, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : -1, role: (_b = restProps.role) !== null && _b !== void 0 ? _b : 'alert', "aria-describedby": messageId, onMouseEnter: (e) => {
+                            var _a;
+                            (_a = restProps.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                            clearTid.current();
+                        }, onMouseLeave: (e) => {
+                            var _a;
+                            (_a = restProps.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                            if (duration > 0) {
+                                clearTid.current = async.setTimeout(() => {
+                                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                                }, duration * 1000);
+                            }
+                        }, onKeyDown: (e) => {
+                            var _a;
+                            (_a = restProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                            if (visible && escClosable && e.code === 'Escape') {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                clearTid.current();
                                 onClose === null || onClose === void 0 ? void 0 : onClose();
-                            }, duration * 1000);
-                        }
-                    }, onKeyDown: (e) => {
-                        var _a, _b, _c;
-                        (_a = restProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
-                        if (visible && escClosable && e.code === 'Escape') {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            (_c = (_b = dataRef.current).clearTid) === null || _c === void 0 ? void 0 : _c.call(_b);
-                            onClose === null || onClose === void 0 ? void 0 : onClose();
-                        }
-                    }, children: [icon !== false && (!isUndefined(type) || checkNodeExist(icon)) && (_jsx("div", Object.assign({}, styled('toast__icon'), { children: checkNodeExist(icon) ? (icon) : (_jsx(Icon, { children: type === 'success' ? (_jsx(CheckCircleOutlined, {})) : type === 'warning' ? (_jsx(WarningAmberOutlined, {})) : type === 'error' ? (_jsx(HighlightOffOutlined, {})) : (_jsx(InfoOutlined, {})) })) }))), _jsx("div", Object.assign({}, styled('toast__message'), { id: messageId, children: children })), closable && (_jsx("button", Object.assign({}, styled('toast__close'), { "aria-label": t('Close'), onClick: onClose, children: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }) })))] })));
+                            }
+                        }, children: [icon !== false && (!isUndefined(type) || checkNodeExist(icon)) && (_jsx("div", Object.assign({}, styled('toast__icon'), { children: checkNodeExist(icon) ? (icon) : (_jsx(Icon, { children: type === 'success' ? (_jsx(CheckCircleOutlined, {})) : type === 'warning' ? (_jsx(WarningAmberOutlined, {})) : type === 'error' ? (_jsx(HighlightOffOutlined, {})) : (_jsx(InfoOutlined, {})) })) }))), _jsx("div", Object.assign({}, styled('toast__message'), { id: messageId, children: children })), closable && (_jsx("button", Object.assign({}, styled('toast__close'), { "aria-label": t('Close'), onClick: onClose, children: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }) })))] }))) }));
             } }) }));
 }

package/toast/types.d.ts

@@ -12,6 +12,7 @@ export interface ToastProps extends BaseProps<'toast', typeof CLASSES>, React.HT
     escClosable?: boolean;
     skipFirstTransition?: boolean;
     destroyAfterClose?: boolean;
+    lazyLoading?: boolean;
     onClose?: () => void;
     afterVisibleChange?: (visible: boolean) => void;
 }

package/tooltip/Tooltip.d.ts

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

package/tooltip/Tooltip.js

@@ -1,20 +1,20 @@
 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 { isFunction, isUndefined } from 'lodash';
-import { cloneElement, forwardRef, useId, useImperativeHandle, useRef } from 'react';
+import { isUndefined } from 'lodash';
+import { useId, useImperativeHandle, useRef } from 'react';
 import { CLASSES, TTANSITION_DURING } from './vars';
-import { useComponentProps, useControlled, useJSS, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { useComponentProps, useControlled, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { LazyLoading } from '../internal/lazy-loading';
 import { Popup } from '../internal/popup';
 import { Portal } from '../internal/portal';
-import { Transition } from '../internal/transition';
+import { Transition } from '../transition';
 import { getPopupPosition, mergeCS } from '../utils';
-export const Tooltip = forwardRef((props, ref) => {
+export function Tooltip(props) {
     var _a;
-    const _b = useComponentProps('Tooltip', props), { children, styleOverrides, styleProvider, title, visible: visibleProp, defaultVisible, trigger = 'hover', placement: placementProp = 'top', placementFixed = false, arrow = true, escClosable = true, gap = 10, inWindow = false, mouseEnterDelay = 150, mouseLeaveDelay = 200, skipFirstTransition = true, destroyAfterClose = true, zIndex: zIndexProp, onVisibleChange, afterVisibleChange } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "title", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "gap", "inWindow", "mouseEnterDelay", "mouseLeaveDelay", "skipFirstTransition", "destroyAfterClose", "zIndex", "onVisibleChange", "afterVisibleChange"]);
+    const _b = useComponentProps('Tooltip', props), { ref, children, styleOverrides, styleProvider, title, visible: visibleProp, defaultVisible, trigger = 'hover', placement: placementProp = 'top', placementFixed = false, arrow = true, escClosable = true, gap = 10, inWindow = false, mouseEnterDelay = 150, mouseLeaveDelay = 200, skipFirstTransition = true, destroyAfterClose = false, lazyLoading = true, zIndex: zIndexProp, onVisibleChange, afterVisibleChange } = _b, restProps = __rest(_b, ["ref", "children", "styleOverrides", "styleProvider", "title", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "gap", "inWindow", "mouseEnterDelay", "mouseLeaveDelay", "skipFirstTransition", "destroyAfterClose", "lazyLoading", "zIndex", "onVisibleChange", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { tooltip: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.tooltip }, styleOverrides);
-    const sheet = useJSS();
     const uniqueId = useId();
     const id = (_a = restProps.id) !== null && _a !== void 0 ? _a : `${namespace}-tooltip-${uniqueId}`;
     const triggerRef = useRefExtra(() => document.querySelector(`[aria-describedby="${id}"]`));
@@ -22,7 +22,6 @@ export const Tooltip = forwardRef((props, ref) => {
     const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
     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 && tooltipRef.current) {
@@ -33,18 +32,12 @@ export const Tooltip = forwardRef((props, ref) => {
                 gap,
                 inWindow,
             });
-            transformOrigin.current = position.transformOrigin;
+            tooltipRef.current.style.setProperty(`--popup-transform-origin`, position.transformOrigin);
+            tooltipRef.current.style.top = position.top + 'px';
+            tooltipRef.current.style.left = position.left + 'px';
             tooltipRef.current.classList.toggle(`${namespace}-tooltip--${placement.current}`, false);
             placement.current = position.placement;
             tooltipRef.current.classList.toggle(`${namespace}-tooltip--${placement.current}`, true);
-            if (sheet.classes.position) {
-                tooltipRef.current.classList.toggle(sheet.classes.position, false);
-            }
-            sheet.replaceRule('position', {
-                top: position.top,
-                left: position.left,
-            });
-            tooltipRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
     useImperativeHandle(ref, () => ({
@@ -54,61 +47,44 @@ export const Tooltip = forwardRef((props, ref) => {
             fn: updatePosition,
             triggerRef,
             popupRef: tooltipRef,
-        }, onVisibleChange: changeVisible, children: ({ renderTrigger, renderPopup }) => {
-            const render = (el) => renderTrigger(cloneElement(el, {
-                'aria-describedby': id,
-                onKeyDown: (e) => {
-                    var _a, _b;
-                    (_b = (_a = el.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                    if (visible && escClosable && e.code === 'Escape') {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        changeVisible(false);
-                    }
-                },
-            }));
-            return (_jsxs(_Fragment, { children: [isFunction(children) ? children(render) : render(children), _jsx(Portal, { selector: () => {
-                            let el = document.getElementById(`${namespace}-tooltip-root`);
-                            if (!el) {
-                                el = document.createElement('div');
-                                el.id = `${namespace}-tooltip-root`;
-                                document.body.appendChild(el);
+        }, onVisibleChange: changeVisible, children: (popupProps) => (_jsxs(_Fragment, { children: [children(Object.assign(Object.assign({ 'aria-describedby': id }, popupProps.trigger), { onKeyDown: (e) => {
+                        if (visible) {
+                            if (escClosable && e.code === 'Escape') {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                changeVisible(false);
+                            }
+                        }
+                    } })), _jsx(Portal, { selector: () => {
+                        let el = document.getElementById(`${namespace}-tooltip-root`);
+                        if (!el) {
+                            el = document.createElement('div');
+                            el.id = `${namespace}-tooltip-root`;
+                            document.body.appendChild(el);
+                        }
+                        return el;
+                    }, children: _jsx(Transition, { enter: visible, name: `${namespace}-popup`, duration: TTANSITION_DURING, skipFirstTransition: skipFirstTransition, onSkipEnter: updatePosition, onBeforeEnter: (el) => {
+                            updatePosition();
+                            if (el) {
+                                el.style.setProperty(`--popup-duration`, TTANSITION_DURING.enter + 'ms');
+                            }
+                        }, onAfterEnter: () => {
+                            afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
+                        }, onBeforeLeave: (el) => {
+                            if (el) {
+                                el.style.setProperty(`--popup-duration`, TTANSITION_DURING.leave + 'ms');
                             }
-                            return el;
-                        }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING, skipFirstTransition: skipFirstTransition, destroyWhenLeaved: destroyAfterClose, 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: 'scale(0.3)', opacity: 0 };
-                                        break;
-                                    case 'entering':
-                                        transitionStyle = {
-                                            transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING.enter}ms ease-out`).join(', '),
-                                            transformOrigin: transformOrigin.current,
-                                        };
-                                        break;
-                                    case 'leaving':
-                                        transitionStyle = {
-                                            transform: 'scale(0.3)',
-                                            opacity: 0,
-                                            transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING.leave}ms ease-in`).join(', '),
-                                            transformOrigin: transformOrigin.current,
-                                        };
-                                        break;
-                                    case 'leaved':
-                                        transitionStyle = { display: 'none' };
-                                        break;
-                                    default:
-                                        break;
-                                }
-                                return renderPopup(_jsxs("div", Object.assign({}, restProps, mergeCS(styled('tooltip'), {
-                                    className: restProps.className,
-                                    style: Object.assign(Object.assign(Object.assign({}, restProps.style), { zIndex }), transitionStyle),
-                                }), { ref: tooltipRef, id: id, role: "tooltip", children: [arrow && _jsx("div", Object.assign({}, styled('tooltip__arrow'))), title] })));
-                            } }) })] }));
-        } }));
-});
+                        }, onAfterLeave: () => {
+                            afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
+                        }, children: (transitionRef, leaved) => (_jsx(LazyLoading, { hidden: leaved, disabled: !lazyLoading, children: leaved && destroyAfterClose ? null : (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('tooltip'), {
+                                className: restProps.className,
+                                style: Object.assign(Object.assign(Object.assign(Object.assign({}, restProps.style), { '--popup-scale': 0.3 }), { zIndex }), (leaved ? { display: 'none' } : undefined)),
+                            }), { ref: (instance) => {
+                                    tooltipRef.current = instance;
+                                    transitionRef(instance);
+                                    return () => {
+                                        tooltipRef.current = null;
+                                        transitionRef(null);
+                                    };
+                                }, id: id, role: "tooltip" }, popupProps.popup, { children: [arrow && _jsx("div", Object.assign({}, styled('tooltip__arrow'))), title] }))) })) }) })] })) }));
+}

package/tooltip/types.d.ts

@@ -1,12 +1,19 @@
 /// <reference types="react" />
 import type { CLASSES } from './vars';
-import type { BaseProps, CloneHTMLElement, PopupPlacement } from '../types';
+import type { BaseProps, PopupPlacement } from '../types';
 export {};
 export interface TooltipRef {
     updatePosition: () => void;
 }
 export interface TooltipProps extends BaseProps<'tooltip', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
-    children: React.ReactElement | ((render: CloneHTMLElement) => JSX.Element | null);
+    ref?: React.Ref<TooltipRef>;
+    children: (props: {
+        'aria-describedby': string;
+        onClick: React.MouseEventHandler<HTMLElement>;
+        onMouseEnter: React.MouseEventHandler<HTMLElement>;
+        onMouseLeave: React.MouseEventHandler<HTMLElement>;
+        onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+    }) => React.ReactNode;
     title: React.ReactNode;
     visible?: boolean;
     defaultVisible?: boolean;
@@ -21,6 +28,7 @@ export interface TooltipProps extends BaseProps<'tooltip', typeof CLASSES>, Omit
     mouseLeaveDelay?: number;
     skipFirstTransition?: boolean;
     destroyAfterClose?: boolean;
+    lazyLoading?: boolean;
     zIndex?: number | string;
     onVisibleChange?: (visible: boolean) => void;
     afterVisibleChange?: (visible: boolean) => void;

package/transfer/Transfer.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { TransferItem, TransferProps } from './types';
-export declare function Transfer<V extends React.Key, T extends TransferItem<V>>(props: TransferProps<V, T>): JSX.Element | null;
+export declare function Transfer<V extends React.Key, T extends TransferItem<V>>(props: TransferProps<V, T>): React.ReactElement | null;

package/transfer/internal/TransferPanel.d.ts

@@ -18,4 +18,4 @@ export interface TransferPanelProps<V extends React.Key, T extends TransferItem<
     onSearch: (value: string) => void;
     onScrollBottom: () => void;
 }
-export declare function TransferPanel<V extends React.Key, T extends TransferItem<V>>(props: TransferPanelProps<V, T>): JSX.Element | null;
+export declare function TransferPanel<V extends React.Key, T extends TransferItem<V>>(props: TransferPanelProps<V, T>): React.ReactElement | null;

package/transfer/internal/TransferPanel.js

@@ -5,11 +5,11 @@ import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react
 import { isNumber } from 'lodash';
 import { useCallback, useId, useMemo, useRef } from 'react';
 import { Checkbox } from '../../checkbox';
+import { CircularProgress } from '../../circular-progress';
 import { Empty } from '../../empty';
 import { useTranslation } from '../../hooks';
 import { Icon } from '../../icon';
 import { Input } from '../../input';
-import { CircularProgress } from '../../internal/circular-progress';
 import { VirtualScroll } from '../../virtual-scroll';
 import { IS_SELECTED, NO_MATCH } from '../vars';
 export function TransferPanel(props) {
@@ -27,7 +27,12 @@ export function TransferPanel(props) {
     }), [canSelectedItem, list, virtual]);
     return (_jsxs("div", Object.assign({}, styled('transfer__panel'), { children: [_jsxs("div", Object.assign({}, styled('transfer__header'), { children: [_jsxs(Checkbox, { model: state === true, indeterminate: state === 'mixed', disabled: list.length === 0, onModelChange: (checked) => {
                             onAllSelectedChange(checked);
-                        }, children: [selectedCount, "/", list.length] }), checkNodeExist(title) && _jsx("div", Object.assign({}, styled('transfer__header-title'), { children: title }))] })), searchable && (_jsx("div", Object.assign({}, styled('transfer__search'), { children: _jsx(Input, { style: { display: 'flex' }, placeholder: t('Search'), prefix: _jsx(Icon, { children: _jsx(SearchOutlined, {}) }), clearable: true, onModelChange: onSearch }) }))), _jsxs("div", Object.assign({}, styled('transfer__list-container'), { children: [loading && (_jsx("div", Object.assign({}, styled('transfer__loading'), { children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))), _jsx(VirtualScroll, Object.assign({}, vsProps, { ref: vsRef, enable: virtual !== false, listSize: 192, listPadding: 0, itemRender: (item, index, props) => (_createElement("li", Object.assign({}, styled('transfer__option', {
+                        }, children: [selectedCount, "/", list.length] }), checkNodeExist(title) && _jsx("div", Object.assign({}, styled('transfer__header-title'), { children: title }))] })), searchable && (_jsx("div", Object.assign({}, styled('transfer__search'), { children: _jsx(Input, { style: { display: 'flex' }, placeholder: t('Search'), prefix: _jsx(Icon, { children: _jsx(SearchOutlined, {}) }), clearable: true, onModelChange: onSearch }) }))), _jsxs("div", Object.assign({}, styled('transfer__list-container'), { children: [loading && (_jsx("div", Object.assign({}, styled('transfer__loading'), { children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))), _jsx(VirtualScroll, Object.assign({}, vsProps, { ref: (instance) => {
+                            vsRef.current = instance;
+                            return () => {
+                                vsRef.current = null;
+                            };
+                        }, enable: virtual !== false, listSize: 192, listPadding: 0, itemRender: (item, index, props) => (_createElement("li", Object.assign({}, styled('transfer__option', {
                             'transfer__option.is-disabled': item.disabled,
                         }), props, { key: item.value, id: getItemId(item.value), title: item.label, onClick: () => {
                                 if (!item.disabled) {

package/{internal/transition → transition}/CollapseTransition.d.ts

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

package/transition/CollapseTransition.js

@@ -0,0 +1,65 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNumber } from 'lodash';
+import { useRef } from 'react';
+import { Transition } from './Transition';
+import { useNamespace } from '../hooks';
+export function CollapseTransition(props) {
+    const { children, name, onBeforeEnter, onEnter, onEnterCancelled, onBeforeLeave, onLeave, onLeaveCancelled, width = 0, height } = props, restProps = __rest(props, ["children", "name", "onBeforeEnter", "onEnter", "onEnterCancelled", "onBeforeLeave", "onLeave", "onLeaveCancelled", "width", "height"]);
+    const namespace = useNamespace();
+    const el = useRef(null);
+    const cancelled = useRef(false);
+    const offsetWidth = useRef(0);
+    const offsetHeight = useRef(0);
+    const saveSize = (el) => {
+        if (el) {
+            offsetWidth.current = el.offsetWidth;
+            offsetHeight.current = el.offsetHeight;
+        }
+    };
+    const setSize = (el, size) => {
+        if (el) {
+            if (isNumber(height)) {
+                el.style.setProperty(`--${namespace}-collapse-vertical`, size.height + 'px');
+            }
+            else {
+                el.style.setProperty(`--${namespace}-collapse-horizontal`, size.width + 'px');
+            }
+        }
+    };
+    return (_jsx(Transition, Object.assign({}, restProps, { name: name !== null && name !== void 0 ? name : (isNumber(height) ? `${namespace}-collapse-vertical` : `${namespace}-collapse-horizontal`), onBeforeEnter: (el) => {
+            onBeforeEnter === null || onBeforeEnter === void 0 ? void 0 : onBeforeEnter(el);
+            if (cancelled.current) {
+                setSize(el, { width: offsetWidth.current, height: offsetHeight.current });
+            }
+            else {
+                setSize(el, { width, height: height !== null && height !== void 0 ? height : 0 });
+            }
+            cancelled.current = false;
+            saveSize(el);
+        }, onEnter: (el) => {
+            onEnter === null || onEnter === void 0 ? void 0 : onEnter(el);
+            setSize(el, { width: offsetWidth.current, height: offsetHeight.current });
+        }, onEnterCancelled: (el) => {
+            onEnterCancelled === null || onEnterCancelled === void 0 ? void 0 : onEnterCancelled(el);
+            cancelled.current = true;
+            saveSize(el);
+        }, onBeforeLeave: (el) => {
+            onBeforeLeave === null || onBeforeLeave === void 0 ? void 0 : onBeforeLeave(el);
+            if (!cancelled.current) {
+                saveSize(el);
+            }
+            setSize(el, { width: offsetWidth.current, height: offsetHeight.current });
+            cancelled.current = false;
+        }, onLeave: (el) => {
+            onLeave === null || onLeave === void 0 ? void 0 : onLeave(el);
+            setSize(el, { width, height: height !== null && height !== void 0 ? height : 0 });
+        }, onLeaveCancelled: (el) => {
+            onLeaveCancelled === null || onLeaveCancelled === void 0 ? void 0 : onLeaveCancelled(el);
+            cancelled.current = true;
+            saveSize(el);
+        }, children: (ref, leaved) => children((instance) => {
+            el.current = instance;
+            ref(instance);
+        }, leaved) })));
+}

package/transition/Transition.d.ts

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