@laser-ui/components 1.6.1 → 2.0.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0](https://github.com/laser-ui/laser-ui/compare/v1.6.1...v2.0.0) (2024-12-17)
+
+### Bug Fixes
+
+- **components:** fix nested drawer ([7175bd1](https://github.com/laser-ui/laser-ui/commit/7175bd11c19831f1c2cc272a60440bbe3de295c9))
+
+### Features
+
+- **components:** add `Transition` component ([61f28b0](https://github.com/laser-ui/laser-ui/commit/61f28b06e97235dec80982117b483f1c65b811ef))
+
 ## [1.6.1](https://github.com/laser-ui/laser-ui/compare/v1.6.0...v1.6.1) (2024-11-17)
 
 ### Bug Fixes

package/accordion/Accordion.d.ts

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

package/accordion/Accordion.js

@@ -7,11 +7,12 @@ import { useId } from 'react';
 import { CLASSES } from './vars';
 import { useComponentProps, useControlled, useNamespace, useStyled } from '../hooks';
 import { Icon } from '../icon';
-import { CollapseTransition } from '../internal/transition';
+import { LazyLoading } from '../internal/lazy-loading';
+import { CollapseTransition } from '../transition';
 import { mergeCS } from '../utils';
 import { TTANSITION_DURING_BASE } from '../vars';
 export function Accordion(props) {
-    const _a = useComponentProps('Accordion', props), { styleOverrides, styleProvider, list, active: activeProp, defaultActive, activeOne, arrow = 'right', onActiveChange, afterActiveChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "active", "defaultActive", "activeOne", "arrow", "onActiveChange", "afterActiveChange"]);
+    const _a = useComponentProps('Accordion', props), { styleOverrides, styleProvider, list, active: activeProp, defaultActive, activeOne, arrow = 'right', lazyLoading = true, onActiveChange, afterActiveChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "active", "defaultActive", "activeOne", "arrow", "lazyLoading", "onActiveChange", "afterActiveChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { accordion: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.accordion }, styleOverrides);
     const uniqueId = useId();
@@ -133,30 +134,17 @@ export function Accordion(props) {
                                 transform: isUndefined(iconRotate) ? undefined : `rotate(${iconRotate}deg)`,
                             },
                         }), { children: _jsx(Icon, { children: _jsx(KeyboardArrowDownOutlined, {}) }) })))] })),
-                _jsx(CollapseTransition, { originalSize: {
-                        height: 'auto',
-                    }, collapsedSize: {
-                        height: 0,
-                    }, enter: isActive, during: TTANSITION_DURING_BASE, styles: {
-                        enter: { opacity: 0 },
-                        entering: {
-                            transition: ['height', 'padding', 'margin', 'opacity']
-                                .map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`)
-                                .join(', '),
-                        },
-                        leaving: {
-                            opacity: 0,
-                            transition: ['height', 'padding', 'margin', 'opacity']
-                                .map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`)
-                                .join(', '),
-                        },
-                        leaved: { display: 'none' },
-                    }, afterEnter: () => {
+                _jsx(CollapseTransition, { height: 0, enter: isActive, name: `${namespace}-accordion`, duration: TTANSITION_DURING_BASE, onAfterEnter: () => {
                         afterActiveChange === null || afterActiveChange === void 0 ? void 0 : afterActiveChange(itemId, item, true);
-                    }, afterLeave: () => {
+                    }, onAfterLeave: () => {
                         afterActiveChange === null || afterActiveChange === void 0 ? void 0 : afterActiveChange(itemId, item, false);
-                    }, children: (regionRef, collapseStyle) => (_jsx("div", Object.assign({}, mergeCS(styled('accordion__item-region'), {
-                        style: collapseStyle,
-                    }), { ref: regionRef, id: regionId, role: "region", "aria-labelledby": getButtonId(itemId), children: itemRegion }))) })));
+                    }, children: (transitionRef, leaved) => (_jsx(LazyLoading, { hidden: leaved, disabled: !lazyLoading, children: _jsx("div", { ref: (instance) => {
+                                transitionRef(instance);
+                                return () => {
+                                    transitionRef(null);
+                                };
+                            }, children: _jsx("div", Object.assign({}, mergeCS(styled('accordion__item-region'), {
+                                style: Object.assign({}, (leaved ? { display: 'none' } : undefined)),
+                            }), { id: regionId, role: "region", "aria-labelledby": getButtonId(itemId), children: itemRegion })) }) })) })));
         }) })));
 }

package/accordion/types.d.ts

@@ -15,6 +15,7 @@ export interface AccordionProps<ID extends React.Key, T extends AccordionItem<ID
     defaultActive?: ID | null | ID[];
     activeOne?: boolean;
     arrow?: 'left' | 'right' | false;
+    lazyLoading?: boolean;
     onActiveChange?: (id: any, origin: any) => void;
     afterActiveChange?: (id: ID, origin: T, active: boolean) => void;
 }

package/affix/Affix.d.ts

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

package/affix/Affix.js

@@ -1,13 +1,12 @@
 import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEventCallback, useMount, useRefExtra, useResize } from '@laser-ui/hooks';
+import { useEventCallback, useIsomorphicLayoutEffect, useRefExtra, useResize } from '@laser-ui/hooks';
 import { getOffsetToRoot, toPx } from '@laser-ui/utils';
-import { isFunction, isString, isUndefined } from 'lodash';
-import { cloneElement, forwardRef, useId, useImperativeHandle, useState } from 'react';
-import { useComponentProps, useContainerScrolling, useJSS, useLayout, useNamespace } from '../hooks';
-export const Affix = forwardRef((props, ref) => {
-    const { children, top = 0, target, zIndex } = useComponentProps('Affix', props);
+import { isString, isUndefined } from 'lodash';
+import { useId, useImperativeHandle, useState } from 'react';
+import { useComponentProps, useContainerScrolling, useLayout, useNamespace } from '../hooks';
+export function Affix(props) {
+    const { ref, children, top = 0, target, zIndex } = useComponentProps('Affix', props);
     const namespace = useNamespace();
-    const sheet = useJSS();
     const { pageScrollRef, contentResizeRef } = useLayout();
     const uniqueId = useId();
     const affixRef = useRefExtra(() => document.querySelector(`[data-l-affix="${uniqueId}"]`));
@@ -20,32 +19,31 @@ export const Affix = forwardRef((props, ref) => {
             const offsetRect = offsetEl.getBoundingClientRect();
             const targetTop = getOffsetToRoot(targetRef.current);
             const distance = isString(top) ? toPx(top, true) : top;
-            const newSticky = Math.ceil(targetRef.current.scrollTop) + distance >= getOffsetToRoot(offsetEl) - targetTop;
-            setSticky(newSticky);
-            if (sheet.classes.position) {
-                affixRef.current.classList.toggle(sheet.classes.position, false);
-            }
-            if (newSticky) {
-                sheet.replaceRule('position', {
-                    width: offsetRect.width,
-                    height: offsetRect.height,
-                    position: 'fixed',
-                    top: (isUndefined(target) ? targetTop : targetRef.current.getBoundingClientRect().top) + distance,
-                    left: offsetRect.left,
-                    zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : `var(--${namespace}-zindex-sticky)`,
-                });
-                affixRef.current.classList.toggle(sheet.classes.position, true);
+            const s = Math.ceil(targetRef.current.scrollTop) + distance >= getOffsetToRoot(offsetEl) - targetTop;
+            setSticky(s);
+            if (s) {
+                affixRef.current.style.position = 'fixed';
+                affixRef.current.style.top = (isUndefined(target) ? targetTop : targetRef.current.getBoundingClientRect().top) + distance + 'px';
+                affixRef.current.style.left = offsetRect.left + 'px';
+                affixRef.current.style.width = offsetRect.width + 'px';
+                affixRef.current.style.height = offsetRect.height + 'px';
+                affixRef.current.style.zIndex = zIndex ? String(zIndex) : `var(--${namespace}-zindex-sticky)`;
                 placeholderRef.current.style.display = '';
             }
             else {
-                sheet.deleteRule('position');
+                affixRef.current.style.position = '';
+                affixRef.current.style.top = '';
+                affixRef.current.style.left = '';
+                affixRef.current.style.width = '';
+                affixRef.current.style.height = '';
+                affixRef.current.style.zIndex = '';
                 placeholderRef.current.style.display = 'none';
             }
         }
     });
-    useMount(() => {
+    useIsomorphicLayoutEffect(() => {
         updatePosition();
-    });
+    }, []);
     useContainerScrolling(affixRef, updatePosition);
     useResize(sticky ? placeholderRef : affixRef, updatePosition);
     useResize(contentResizeRef, updatePosition);
@@ -53,12 +51,9 @@ export const Affix = forwardRef((props, ref) => {
         sticky,
         updatePosition,
     }), [sticky, updatePosition]);
-    const render = (el) => (_jsxs(_Fragment, { children: [cloneElement(el, {
-                style: Object.assign(Object.assign({}, el.props.style), { visibility: 'hidden' }),
+    return (_jsxs(_Fragment, { children: [children({
+                style: { visibility: 'hidden' },
                 'aria-hidden': true,
                 'data-l-affix-placeholder': uniqueId,
-            }), cloneElement(el, {
-                'data-l-affix': uniqueId,
-            })] }));
-    return isFunction(children) ? children(render) : render(children);
-});
+            }), children({ 'data-l-affix': uniqueId })] }));
+}

package/affix/types.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import type { CloneHTMLElement } from '../types';
 import type { RefExtra } from '@laser-ui/hooks/useRefExtra';
 export {};
 export interface AffixRef {
@@ -7,7 +6,13 @@ export interface AffixRef {
     updatePosition: () => void;
 }
 export interface AffixProps {
-    children: React.ReactElement | ((render: CloneHTMLElement) => JSX.Element | null);
+    ref?: React.Ref<AffixRef>;
+    children: (props: {
+        style?: React.CSSProperties;
+        'aria-hidden'?: true;
+        'data-l-affix-placeholder'?: string;
+        'data-l-affix'?: string;
+    }) => React.ReactElement | null;
     top?: number | string;
     target?: RefExtra;
     zIndex?: number | string;

package/alert/Alert.d.ts

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

package/alert/Alert.js

@@ -10,7 +10,7 @@ import { isUndefined } from 'lodash';
 import { CLASSES } from './vars';
 import { useComponentProps, useControlled, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
-import { CollapseTransition } from '../internal/transition';
+import { CollapseTransition } from '../transition';
 import { mergeCS } from '../utils';
 import { TTANSITION_DURING_BASE } from '../vars';
 export function Alert(props) {
@@ -22,32 +22,23 @@ export function Alert(props) {
     const closeNode = closable && (_jsx("button", Object.assign({}, styled('alert__close'), { "aria-label": t('Close'), onClick: () => {
             changeVisible(false);
         }, children: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }) })));
-    return (_jsx(CollapseTransition, { originalSize: {
-            height: 'auto',
-        }, collapsedSize: {
-            height: 0,
-        }, enter: visible, during: TTANSITION_DURING_BASE, styles: {
-            enter: { opacity: 0 },
-            entering: {
-                transition: ['height', 'padding', 'margin', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
-            },
-            leaving: {
-                opacity: 0,
-                transition: ['height', 'padding', 'margin', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
-            },
-            leaved: { display: 'none' },
-        }, destroyWhenLeaved: true, afterEnter: () => {
+    return (_jsx(CollapseTransition, { height: 0, enter: visible, duration: TTANSITION_DURING_BASE, onAfterEnter: () => {
             afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
-        }, afterLeave: () => {
+        }, onAfterLeave: () => {
             afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
-        }, children: (alertRef, collapseStyle) => {
+        }, children: (transitionRef, leaved) => {
             var _a;
-            return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('alert', {
+            return leaved ? null : (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('alert', {
                 'alert--with-title': hasTitle,
                 [`alert--${type}`]: type,
             }), {
                 className: restProps.className,
-                style: Object.assign(Object.assign({}, restProps.style), collapseStyle),
-            }), { ref: alertRef, role: (_a = restProps.role) !== null && _a !== void 0 ? _a : 'alert', children: [icon !== false && (!isUndefined(type) || checkNodeExist(icon)) && (_jsx("div", Object.assign({}, styled('alert__icon'), { children: checkNodeExist(icon) ? (icon) : (_jsx(Icon, { children: type === 'success' ? (_jsx(CheckCircleOutlined, {})) : type === 'warning' ? (_jsx(WarningAmberOutlined, {})) : type === 'error' ? (_jsx(HighlightOffOutlined, {})) : (_jsx(InfoOutlined, {})) })) }))), _jsxs("div", Object.assign({}, styled('alert__content'), { children: [hasTitle && (_jsxs("div", Object.assign({}, styled('alert__header'), { children: [_jsx("div", Object.assign({}, styled('alert__title'), { children: title })), closeNode] }))), checkNodeExist(children) && _jsx("div", Object.assign({}, styled('alert__message'), { children: children })), !hasTitle && closeNode] }))] })));
+                style: Object.assign({}, restProps.style),
+            }), { ref: (instance) => {
+                    transitionRef(instance);
+                    return () => {
+                        transitionRef(null);
+                    };
+                }, role: (_a = restProps.role) !== null && _a !== void 0 ? _a : 'alert', children: [icon !== false && (!isUndefined(type) || checkNodeExist(icon)) && (_jsx("div", Object.assign({}, styled('alert__icon'), { children: checkNodeExist(icon) ? (icon) : (_jsx(Icon, { children: type === 'success' ? (_jsx(CheckCircleOutlined, {})) : type === 'warning' ? (_jsx(WarningAmberOutlined, {})) : type === 'error' ? (_jsx(HighlightOffOutlined, {})) : (_jsx(InfoOutlined, {})) })) }))), _jsxs("div", Object.assign({}, styled('alert__content'), { children: [hasTitle && (_jsxs("div", Object.assign({}, styled('alert__header'), { children: [_jsx("div", Object.assign({}, styled('alert__title'), { children: title })), closeNode] }))), checkNodeExist(children) && _jsx("div", Object.assign({}, styled('alert__message'), { children: children })), !hasTitle && closeNode] }))] })));
         } }));
 }

package/anchor/Anchor.d.ts

@@ -1,10 +1,8 @@
 /// <reference types="react" />
-import type { AnchorItem, AnchorProps, AnchorRef } from './types';
+import type { AnchorItem, AnchorProps } from './types';
 import { DOT_INDICATOR, LINE_INDICATOR } from './vars';
-declare function AnchorFC<T extends AnchorItem>(props: AnchorProps<T>, ref: React.ForwardedRef<AnchorRef>): JSX.Element | null;
 export declare const Anchor: {
-    <T extends AnchorItem>(props: AnchorProps<T> & React.RefAttributes<AnchorRef>): ReturnType<typeof AnchorFC>;
+    <T extends AnchorItem>(props: AnchorProps<T>): React.ReactElement | null;
     DOT_INDICATOR: typeof DOT_INDICATOR;
     LINE_INDICATOR: typeof LINE_INDICATOR;
 };
-export {};

package/anchor/Anchor.js

@@ -1,20 +1,21 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEvent, useEventCallback, useMount, useRefExtra, useResize } from '@laser-ui/hooks';
+import { useEvent, useEventCallback, useIsomorphicLayoutEffect, useRefExtra, useResize } from '@laser-ui/hooks';
 import { getOffsetToRoot, scrollTo, toPx } from '@laser-ui/utils';
 import { isArray, isString, isUndefined } from 'lodash';
-import { Fragment, forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { Fragment, useImperativeHandle, useRef, useState } from 'react';
 import { CLASSES, DOT_INDICATOR, LINE_INDICATOR } from './vars';
 import { useComponentProps, useLayout, useStyled } from '../hooks';
 import { mergeCS } from '../utils';
-function AnchorFC(props, ref) {
-    const _a = useComponentProps('Anchor', props), { styleOverrides, styleProvider, list, page, distance: distanceProp = 0, scrollBehavior = 'instant', indicator = DOT_INDICATOR, onClick } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "page", "distance", "scrollBehavior", "indicator", "onClick"]);
+export const Anchor = (props) => {
+    const _a = useComponentProps('Anchor', props), { ref, styleOverrides, styleProvider, list, page, distance: distanceProp = 0, scrollBehavior = 'instant', indicator = DOT_INDICATOR, onClick } = _a, restProps = __rest(_a, ["ref", "styleOverrides", "styleProvider", "list", "page", "distance", "scrollBehavior", "indicator", "onClick"]);
     const styled = useStyled(CLASSES, { anchor: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.anchor }, styleOverrides);
     const { pageScrollRef, contentResizeRef } = useLayout();
     const pageRef = useRefExtra(page !== null && page !== void 0 ? page : (() => pageScrollRef.current));
     const anchorRef = useRef(null);
     const indicatorRef = useRef(null);
-    const dataRef = useRef({});
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const clearTid = useRef(() => { });
     const [active, setActive] = useState(null);
     const updateAnchor = useEventCallback(() => {
         if (pageRef.current && anchorRef.current && indicatorRef.current) {
@@ -53,9 +54,9 @@ function AnchorFC(props, ref) {
             }
         }
     });
-    useMount(() => {
+    useIsomorphicLayoutEffect(() => {
         updateAnchor();
-    });
+    }, []);
     useEvent(pageRef, 'scroll', updateAnchor, { passive: true });
     useResize(contentResizeRef, updateAnchor);
     useImperativeHandle(ref, () => ({
@@ -63,7 +64,6 @@ function AnchorFC(props, ref) {
         updateAnchor,
     }), [active, updateAnchor]);
     const handleLinkClick = (href) => {
-        var _a, _b;
         if (pageRef.current) {
             const pageTop = getOffsetToRoot(pageRef.current);
             const scrollTop = pageRef.current.scrollTop;
@@ -73,32 +73,40 @@ function AnchorFC(props, ref) {
             if (el) {
                 const top = getOffsetToRoot(el);
                 const distance = isString(distanceProp) ? toPx(distanceProp, true) : distanceProp;
-                (_b = (_a = dataRef.current).clearTid) === null || _b === void 0 ? void 0 : _b.call(_a);
-                dataRef.current.clearTid = scrollTo(pageRef.current, {
+                clearTid.current();
+                clearTid.current = scrollTo(pageRef.current, {
                     top: top - pageTop - distance,
                     behavior: scrollBehavior,
                 });
             }
         }
     };
-    const linkNodes = (() => {
-        const getNodes = (arr, level = 0) => arr.map((link) => {
-            const { title: linkTitle, href: linkHref, target: linkTarget, children } = link;
-            return (_jsxs(Fragment, { children: [_jsx("li", Object.assign({}, styled('anchor__link', {
-                        'anchor__link.is-active': linkHref === active,
-                    }), { "data-l-href": linkHref, children: _jsx("a", { style: { paddingLeft: 16 + level * 16 }, href: `#${linkHref}`, target: linkTarget, onClick: (e) => {
-                                e.preventDefault();
-                                handleLinkClick(linkHref);
-                                onClick === null || onClick === void 0 ? void 0 : onClick(linkHref, link);
-                            }, children: linkTitle !== null && linkTitle !== void 0 ? linkTitle : linkHref }) })), children && getNodes(children, level + 1)] }, `${linkHref}-${level}`));
-        });
-        return getNodes(list);
-    })();
     return (_jsxs("ul", Object.assign({}, restProps, mergeCS(styled('anchor'), {
         className: restProps.className,
         style: restProps.style,
-    }), { ref: anchorRef, children: [_jsx("div", Object.assign({}, styled('anchor__indicator-track'), { children: _jsx("div", Object.assign({}, styled('anchor__indicator-wrapper'), { ref: indicatorRef, children: indicator === DOT_INDICATOR ? (_jsx("div", Object.assign({}, styled('anchor__dot-indicator')))) : indicator === LINE_INDICATOR ? (_jsx("div", Object.assign({}, styled('anchor__line-indicator')))) : (indicator) })) })), linkNodes] })));
-}
-export const Anchor = forwardRef(AnchorFC);
+    }), { ref: (instance) => {
+            anchorRef.current = instance;
+            return () => {
+                anchorRef.current = null;
+            };
+        }, children: [_jsx("div", Object.assign({}, styled('anchor__indicator-track'), { children: _jsx("div", Object.assign({}, styled('anchor__indicator-wrapper'), { ref: (instance) => {
+                        indicatorRef.current = instance;
+                        return () => {
+                            indicatorRef.current = null;
+                        };
+                    }, children: indicator === DOT_INDICATOR ? (_jsx("div", Object.assign({}, styled('anchor__dot-indicator')))) : indicator === LINE_INDICATOR ? (_jsx("div", Object.assign({}, styled('anchor__line-indicator')))) : (indicator) })) })), (() => {
+                const getNodes = (arr, level = 0) => arr.map((link) => {
+                    const { title: linkTitle, href: linkHref, target: linkTarget, children } = link;
+                    return (_jsxs(Fragment, { children: [_jsx("li", Object.assign({}, styled('anchor__link', {
+                                'anchor__link.is-active': linkHref === active,
+                            }), { "data-l-href": linkHref, children: _jsx("a", { style: { paddingLeft: 16 + level * 16 }, href: `#${linkHref}`, target: linkTarget, onClick: (e) => {
+                                        e.preventDefault();
+                                        handleLinkClick(linkHref);
+                                        onClick === null || onClick === void 0 ? void 0 : onClick(linkHref, link);
+                                    }, children: linkTitle !== null && linkTitle !== void 0 ? linkTitle : linkHref }) })), children && getNodes(children, level + 1)] }, `${linkHref}-${level}`));
+                });
+                return getNodes(list);
+            })()] })));
+};
 Anchor.DOT_INDICATOR = DOT_INDICATOR;
 Anchor.LINE_INDICATOR = LINE_INDICATOR;

package/anchor/types.d.ts

@@ -14,6 +14,7 @@ export interface AnchorItem {
     children?: AnchorItem[];
 }
 export interface AnchorProps<T extends AnchorItem> extends BaseProps<'anchor', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLUListElement>, 'children' | 'onClick'> {
+    ref?: React.Ref<AnchorRef>;
     list: T[];
     page?: RefExtra;
     distance?: number | string;

package/avatar/Avatar.d.ts

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

package/avatar/Avatar.js

@@ -1,8 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useIsomorphicLayoutEffect } from '@laser-ui/hooks';
 import { toPx } from '@laser-ui/utils';
 import { isNumber } from 'lodash';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';
 import { mergeCS } from '../utils';
@@ -12,7 +13,7 @@ export function Avatar(props) {
     const textRef = useRef(null);
     const [imgError, setImgError] = useState(false);
     const type = img && !imgError ? 'img' : icon ? 'icon' : text ? 'text' : 'img';
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (textRef.current) {
             const maxWidth = Math.sqrt(Math.pow((isNumber(size) ? size : toPx(size, true)) / 2, 2) - Math.pow(textRef.current.scrollHeight / 2, 2)) * 2;
             if (textRef.current.scrollWidth > maxWidth) {
@@ -39,5 +40,10 @@ export function Avatar(props) {
                 var _a;
                 (_a = img === null || img === void 0 ? void 0 : img.onError) === null || _a === void 0 ? void 0 : _a.call(img, e);
                 setImgError(true);
-            } }))) : type === 'icon' ? (icon) : (_jsx("div", { ref: textRef, children: text })) })));
+            } }))) : type === 'icon' ? (icon) : (_jsx("div", { ref: (instance) => {
+                textRef.current = instance;
+                return () => {
+                    textRef.current = null;
+                };
+            }, children: text })) })));
 }

package/badge/Badge.d.ts

@@ -2,6 +2,6 @@
 import type { BadgeProps } from './types';
 import { BadgeText } from './BadgeText';
 export declare const Badge: {
-    (props: BadgeProps): JSX.Element | null;
+    (props: BadgeProps): React.ReactElement | null;
     Text: typeof BadgeText;
 };

package/badge/Badge.js

@@ -1,61 +1,42 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { BadgeText } from './BadgeText';
 import { BadgeNumber } from './internal/BadgeNumber';
 import { CLASSES } from './vars';
-import { useComponentProps, useStyled } from '../hooks';
-import { Transition } from '../internal/transition';
+import { useComponentProps, useNamespace, useStyled } from '../hooks';
+import { Transition } from '../transition';
 import { mergeCS } from '../utils';
 import { TTANSITION_DURING_BASE } from '../vars';
 export const Badge = (props) => {
     var _a;
     const _b = useComponentProps('Badge', props), { styleOverrides, styleProvider, value: valueProp, theme = 'danger', max = Infinity, dot = false, showZero = false, offset = [0, '100%'], alone = false } = _b, restProps = __rest(_b, ["styleOverrides", "styleProvider", "value", "theme", "max", "dot", "showZero", "offset", "alone"]);
+    const namespace = useNamespace();
     const styled = useStyled(CLASSES, { badge: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.badge }, styleOverrides);
-    const dataRef = useRef({
-        prevValue: valueProp,
-        valueDown: false,
-    });
+    const valueSaved = useRef(undefined);
     const show = showZero || valueProp > 0;
-    const value = show ? valueProp : ((_a = dataRef.current.saveValue) !== null && _a !== void 0 ? _a : 0);
-    dataRef.current.saveValue = value;
-    const nums = (value > max ? max : value)
-        .toString()
-        .split('')
-        .map((n) => Number(n));
-    if (value !== dataRef.current.prevValue) {
-        dataRef.current.valueDown = value < dataRef.current.prevValue;
-        dataRef.current.prevValue = value;
-    }
-    return (_jsx(Transition, { enter: show, during: TTANSITION_DURING_BASE, children: (state) => {
+    const value = show ? valueProp : ((_a = valueSaved.current) !== null && _a !== void 0 ? _a : 0);
+    const num = value > max ? max : value;
+    useEffect(() => {
+        valueSaved.current = value;
+    });
+    return (_jsx(Transition, { enter: show, name: `${namespace}-badge`, duration: TTANSITION_DURING_BASE, children: (transitionRef, leaved) => {
             var _a;
-            let transitionStyle = {};
-            switch (state) {
-                case 'enter':
-                    transitionStyle = { transform: 'scale(0)', opacity: 0 };
-                    break;
-                case 'entering':
-                    transitionStyle = {
-                        transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
-                    };
-                    break;
-                case 'leaving':
-                    transitionStyle = {
-                        transform: 'scale(0)',
-                        opacity: 0,
-                        transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
-                    };
-                    break;
-                default:
-                    break;
-            }
-            return state === 'leaved' ? null : (_jsx("div", Object.assign({}, restProps, mergeCS(styled('badge', `badge.t-${theme}`, {
+            return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('badge', `badge.t-${theme}`, {
                 'badge--dot': dot,
                 'badge--alone': alone,
             }), {
                 className: restProps.className,
-                style: Object.assign(Object.assign({}, restProps.style), (alone ? undefined : { top: offset[0], left: offset[1] })),
-            }), { title: (_a = restProps.title) !== null && _a !== void 0 ? _a : (dot ? undefined : valueProp.toString()), children: _jsx("div", Object.assign({}, mergeCS(styled('badge__wrapper'), { style: transitionStyle }), { children: dot ? null : (_jsxs(_Fragment, { children: [nums.map((n, i) => (_jsx(BadgeNumber, { styled: styled, value: n, valueDown: dataRef.current.valueDown }, nums.length - i))), value > max ? '+' : ''] })) })) })));
+                style: Object.assign(Object.assign(Object.assign({}, restProps.style), (alone ? undefined : { top: offset[0], left: offset[1] })), (leaved ? { display: 'none' } : undefined)),
+            }), { title: (_a = restProps.title) !== null && _a !== void 0 ? _a : (dot ? undefined : valueProp.toString()), children: _jsx("div", Object.assign({}, styled('badge__wrapper'), { ref: (instance) => {
+                        transitionRef(instance);
+                        return () => {
+                            transitionRef(null);
+                        };
+                    }, children: dot ? null : (_jsxs(_Fragment, { children: [num
+                                .toString()
+                                .split('')
+                                .map((n, i, arr) => (_jsx(BadgeNumber, { styled: styled, value: Number(n), num: num }, arr.length - i))), value > max ? '+' : ''] })) })) })));
         } }));
 };
 Badge.Text = BadgeText;

package/badge/BadgeText.js

@@ -1,40 +1,26 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CLASSES } from './vars';
-import { useComponentProps, useStyled } from '../hooks';
-import { Transition } from '../internal/transition';
+import { useComponentProps, useNamespace, useStyled } from '../hooks';
+import { Transition } from '../transition';
 import { mergeCS } from '../utils';
 import { TTANSITION_DURING_BASE } from '../vars';
 export function BadgeText(props) {
     const _a = useComponentProps('BadgeText', props), { styleOverrides, styleProvider, text, theme = 'danger', offset = [0, '100%'], alone = false } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "text", "theme", "offset", "alone"]);
+    const namespace = useNamespace();
     const styled = useStyled(CLASSES, { badge: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.badge }, styleOverrides);
-    return (_jsx(Transition, { enter: text.length > 0, during: TTANSITION_DURING_BASE, children: (state) => {
+    return (_jsx(Transition, { enter: text.length > 0, name: `${namespace}-badge`, duration: TTANSITION_DURING_BASE, children: (transitionRef, leaved) => {
             var _a;
-            let transitionStyle = {};
-            switch (state) {
-                case 'enter':
-                    transitionStyle = { transform: 'scale(0)', opacity: 0 };
-                    break;
-                case 'entering':
-                    transitionStyle = {
-                        transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
-                    };
-                    break;
-                case 'leaving':
-                    transitionStyle = {
-                        transform: 'scale(0)',
-                        opacity: 0,
-                        transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
-                    };
-                    break;
-                default:
-                    break;
-            }
-            return state === 'leaved' ? null : (_jsx("div", Object.assign({}, restProps, mergeCS(styled('badge', `badge.t-${theme}`, {
+            return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('badge', `badge.t-${theme}`, {
                 'badge--alone': alone,
             }), {
                 className: restProps.className,
-                style: Object.assign(Object.assign({}, restProps.style), (alone ? undefined : { top: offset[0], left: offset[1] })),
-            }), { title: (_a = restProps.title) !== null && _a !== void 0 ? _a : text, children: _jsx("div", Object.assign({}, mergeCS(styled('badge__wrapper'), { style: transitionStyle }), { children: text })) })));
+                style: Object.assign(Object.assign(Object.assign({}, restProps.style), (alone ? undefined : { top: offset[0], left: offset[1] })), (leaved ? { display: 'none' } : undefined)),
+            }), { title: (_a = restProps.title) !== null && _a !== void 0 ? _a : text, children: _jsx("div", Object.assign({}, styled('badge__wrapper'), { ref: (instance) => {
+                        transitionRef(instance);
+                        return () => {
+                            transitionRef(null);
+                        };
+                    }, children: text })) })));
         } }));
 }

package/badge/internal/BadgeNumber.d.ts

@@ -4,7 +4,7 @@ import type { CLASSES } from '../vars';
 interface BadgeNumberProps {
     styled: Styled<typeof CLASSES>;
     value: number;
-    valueDown: boolean;
+    num: number;
 }
-export declare function BadgeNumber(props: BadgeNumberProps): JSX.Element | null;
+export declare function BadgeNumber(props: BadgeNumberProps): React.ReactElement | null;
 export {};