@tiny-design/react 1.2.0 → 1.3.0

package/es/waterfall/waterfall.js.map

@@ -1 +1 @@
-{"version":3,"file":"waterfall.js","names":[],"sources":["../../src/waterfall/waterfall.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { Breakpoint, WaterfallItem, WaterfallProps } from './types';\nimport useBreakpoint, { responsiveArray } from './hooks/use-breakpoint';\nimport usePositions, { ItemHeightData } from './hooks/use-positions';\n\nconst Waterfall = React.forwardRef<HTMLDivElement, WaterfallProps>((props, ref) => {\n  const {\n    prefixCls: customisedCls,\n    className,\n    style,\n    columns = 3,\n    gutter = 0,\n    items,\n    itemRender,\n    onLayoutChange,\n    ...otherProps\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('waterfall', configContext.prefixCls, customisedCls);\n\n  // ===================== Breakpoint =====================\n  const screens = useBreakpoint();\n\n  const columnCount = React.useMemo<number>(() => {\n    if (typeof columns === 'number') {\n      return columns;\n    }\n\n    const matchingBreakpoint = responsiveArray.find(\n      (bp: Breakpoint) => screens[bp] && columns[bp] !== undefined,\n    );\n\n    if (matchingBreakpoint) {\n      return columns[matchingBreakpoint] as number;\n    }\n\n    return columns.xs ?? 1;\n  }, [columns, screens]);\n\n  // ====================== Gutter ======================\n  const [horizontalGutter, verticalGutter] = Array.isArray(gutter)\n    ? gutter\n    : [gutter, gutter];\n\n  // =================== Item Refs ===================\n  const itemRefsMap = useRef<Map<React.Key, HTMLDivElement | null>>(new Map());\n\n  const setItemRef = useCallback((key: React.Key, el: HTMLDivElement | null) => {\n    itemRefsMap.current.set(key, el);\n  }, []);\n\n  // ================= Item Heights ==================\n  const [itemHeights, setItemHeights] = useState<ItemHeightData[]>([]);\n\n  const collectItemSizes = useCallback(() => {\n    if (!items || items.length === 0) {\n      setItemHeights([]);\n      return;\n    }\n\n    const nextHeights = items.map<ItemHeightData>((item, index) => {\n      const key = item.key ?? index;\n      const el = itemRefsMap.current.get(key);\n      const height = el ? el.getBoundingClientRect().height : 0;\n      return [key, height, item.column];\n    });\n\n    setItemHeights((prev) => {\n      const isSame =\n        prev.length === nextHeights.length &&\n        prev.every((p, i) => p[0] === nextHeights[i][0] && p[1] === nextHeights[i][1]);\n      return isSame ? prev : nextHeights;\n    });\n  }, [items]);\n\n  // ================= Positions ==================\n  const [itemPositions, totalHeight] = usePositions(itemHeights, columnCount, verticalGutter);\n\n  // Collect sizes on items/columns change\n  useEffect(() => {\n    collectItemSizes();\n  }, [items, columnCount, collectItemSizes]);\n\n  // ResizeObserver for dynamic content\n  useEffect(() => {\n    if (typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(() => {\n      collectItemSizes();\n    });\n\n    for (const [, el] of itemRefsMap.current) {\n      if (el) observer.observe(el);\n    }\n\n    return () => observer.disconnect();\n  }, [items, collectItemSizes]);\n\n  // ================ onLayoutChange ================\n  useEffect(() => {\n    if (!onLayoutChange || !items || items.length === 0) return;\n\n    const allPositioned = items.every((item) => itemPositions.has(item.key));\n    if (!allPositioned) return;\n\n    const sortInfo = items.map((item) => ({\n      key: item.key,\n      column: itemPositions.get(item.key)!.column,\n    }));\n    onLayoutChange(sortInfo);\n  }, [itemPositions, items, onLayoutChange]);\n\n  // ==================== Render ====================\n  const cls = classNames(prefixCls, className);\n\n  const containerStyle: React.CSSProperties = {\n    ...style,\n    position: 'relative',\n    height: totalHeight || undefined,\n  };\n\n  const mergedItems = items || [];\n\n  return (\n    <div\n      ref={ref}\n      {...otherProps}\n      className={cls}\n      style={containerStyle}\n      onLoad={collectItemSizes}\n      onError={collectItemSizes}\n    >\n      <TransitionGroup component={null}>\n        {mergedItems.map((item, index) => {\n          const key = item.key ?? index;\n          const position = itemPositions.get(key);\n          const hasPosition = !!position;\n          const columnIndex = position?.column ?? 0;\n\n          const itemStyle: React.CSSProperties = {\n            position: 'absolute',\n            width: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount})`,\n            left: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount} * ${columnIndex} + ${horizontalGutter * columnIndex}px)`,\n            top: position?.top ?? 0,\n            // Only transition position changes after initial placement\n            transition: hasPosition ? 'top 0.3s ease, left 0.3s ease, opacity 0.3s ease' : 'none',\n            // Hide until position is computed so items don't flash at (0,0)\n            opacity: hasPosition ? 1 : 0,\n          };\n\n          const content = item.children ?? itemRender?.({ ...item, index, column: columnIndex });\n\n          return (\n            <CSSTransition\n              key={key}\n              timeout={300}\n              classNames={`${prefixCls}__item-fade`}\n              onExited={() => {\n                itemRefsMap.current.delete(key);\n                collectItemSizes();\n              }}\n            >\n              <div\n                ref={(el) => setItemRef(key, el)}\n                className={`${prefixCls}__item`}\n                style={itemStyle}\n              >\n                {content}\n              </div>\n            </CSSTransition>\n          );\n        })}\n      </TransitionGroup>\n    </div>\n  );\n});\n\nWaterfall.displayName = 'Waterfall';\n\nexport default Waterfall;\n"],"mappings":"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"}
+{"version":3,"file":"waterfall.js","names":["Transition"],"sources":["../../src/waterfall/waterfall.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport Transition from '../transition';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { Breakpoint, WaterfallItem, WaterfallProps } from './types';\nimport useBreakpoint, { responsiveArray } from './hooks/use-breakpoint';\nimport usePositions, { ItemHeightData } from './hooks/use-positions';\n\nconst Waterfall = React.forwardRef<HTMLDivElement, WaterfallProps>((props, ref) => {\n  const {\n    prefixCls: customisedCls,\n    className,\n    style,\n    columns = 3,\n    gutter = 0,\n    items,\n    itemRender,\n    onLayoutChange,\n    ...otherProps\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('waterfall', configContext.prefixCls, customisedCls);\n\n  // ===================== Breakpoint =====================\n  const screens = useBreakpoint();\n\n  const columnCount = React.useMemo<number>(() => {\n    if (typeof columns === 'number') {\n      return columns;\n    }\n\n    const matchingBreakpoint = responsiveArray.find(\n      (bp: Breakpoint) => screens[bp] && columns[bp] !== undefined,\n    );\n\n    if (matchingBreakpoint) {\n      return columns[matchingBreakpoint] as number;\n    }\n\n    return columns.xs ?? 1;\n  }, [columns, screens]);\n\n  // ====================== Gutter ======================\n  const [horizontalGutter, verticalGutter] = Array.isArray(gutter)\n    ? gutter\n    : [gutter, gutter];\n\n  // =================== Item Refs ===================\n  const itemRefsMap = useRef<Map<React.Key, HTMLDivElement | null>>(new Map());\n\n  const setItemRef = useCallback((key: React.Key, el: HTMLDivElement | null) => {\n    itemRefsMap.current.set(key, el);\n  }, []);\n\n  // ================= Item Heights ==================\n  const [itemHeights, setItemHeights] = useState<ItemHeightData[]>([]);\n\n  const collectItemSizes = useCallback(() => {\n    if (!items || items.length === 0) {\n      setItemHeights([]);\n      return;\n    }\n\n    const nextHeights = items.map<ItemHeightData>((item, index) => {\n      const key = item.key ?? index;\n      const el = itemRefsMap.current.get(key);\n      const height = el ? el.getBoundingClientRect().height : 0;\n      return [key, height, item.column];\n    });\n\n    setItemHeights((prev) => {\n      const isSame =\n        prev.length === nextHeights.length &&\n        prev.every((p, i) => p[0] === nextHeights[i][0] && p[1] === nextHeights[i][1]);\n      return isSame ? prev : nextHeights;\n    });\n  }, [items]);\n\n  // ================= Positions ==================\n  const [itemPositions, totalHeight] = usePositions(itemHeights, columnCount, verticalGutter);\n\n  // Collect sizes on items/columns change\n  useEffect(() => {\n    collectItemSizes();\n  }, [items, columnCount, collectItemSizes]);\n\n  // ResizeObserver for dynamic content\n  useEffect(() => {\n    if (typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(() => {\n      collectItemSizes();\n    });\n\n    for (const [, el] of itemRefsMap.current) {\n      if (el) observer.observe(el);\n    }\n\n    return () => observer.disconnect();\n  }, [items, collectItemSizes]);\n\n  // ================ onLayoutChange ================\n  useEffect(() => {\n    if (!onLayoutChange || !items || items.length === 0) return;\n\n    const allPositioned = items.every((item) => itemPositions.has(item.key));\n    if (!allPositioned) return;\n\n    const sortInfo = items.map((item) => ({\n      key: item.key,\n      column: itemPositions.get(item.key)!.column,\n    }));\n    onLayoutChange(sortInfo);\n  }, [itemPositions, items, onLayoutChange]);\n\n  // ============== Exiting items (replaces TransitionGroup) ==============\n  const prevItemsRef = useRef<WaterfallItem[]>(items || []);\n  const [exitingItems, setExitingItems] = useState<Map<React.Key, WaterfallItem>>(new Map());\n\n  useEffect(() => {\n    const currentKeys = new Set((items || []).map((item, i) => item.key ?? i));\n    const removed = new Map<React.Key, WaterfallItem>();\n\n    prevItemsRef.current.forEach((item, index) => {\n      const key = item.key ?? index;\n      if (!currentKeys.has(key)) {\n        removed.set(key, item);\n      }\n    });\n\n    if (removed.size > 0) {\n      setExitingItems((prev) => {\n        const next = new Map(prev);\n        removed.forEach((item, key) => next.set(key, item));\n        return next;\n      });\n    }\n\n    prevItemsRef.current = items || [];\n  }, [items]);\n\n  const handleExited = useCallback((key: React.Key) => {\n    itemRefsMap.current.delete(key);\n    setExitingItems((prev) => {\n      const next = new Map(prev);\n      next.delete(key);\n      return next;\n    });\n    collectItemSizes();\n  }, [collectItemSizes]);\n\n  // ==================== Render ====================\n  const cls = classNames(prefixCls, className);\n\n  const containerStyle: React.CSSProperties = {\n    ...style,\n    position: 'relative',\n    height: totalHeight || undefined,\n  };\n\n  const mergedItems = items || [];\n\n  const renderItem = (item: WaterfallItem, index: number, isExiting: boolean) => {\n    const key = item.key ?? index;\n    const position = itemPositions.get(key);\n    const hasPosition = !!position;\n    const columnIndex = position?.column ?? 0;\n\n    const itemStyle: React.CSSProperties = {\n      position: 'absolute',\n      width: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount})`,\n      left: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount} * ${columnIndex} + ${horizontalGutter * columnIndex}px)`,\n      top: position?.top ?? 0,\n      // Only transition position changes after initial placement\n      transition: hasPosition ? 'top 0.3s ease, left 0.3s ease, opacity 0.3s ease' : 'none',\n      // Hide until position is computed so items don't flash at (0,0)\n      opacity: hasPosition ? 1 : 0,\n    };\n\n    const content = item.children ?? itemRender?.({ ...item, index, column: columnIndex });\n\n    return (\n      <Transition\n        key={key}\n        in={!isExiting}\n        timeout={300}\n        appear={false}\n        unmountOnExit={true}\n        classNames={`${prefixCls}__item-fade`}\n        onExited={() => handleExited(key)}\n      >\n        <div\n          ref={(el) => setItemRef(key, el)}\n          className={`${prefixCls}__item`}\n          style={itemStyle}\n        >\n          {content}\n        </div>\n      </Transition>\n    );\n  };\n\n  return (\n    <div\n      ref={ref}\n      {...otherProps}\n      className={cls}\n      style={containerStyle}\n      onLoad={collectItemSizes}\n      onError={collectItemSizes}\n    >\n      {mergedItems.map((item, index) => renderItem(item, index, false))}\n      {Array.from(exitingItems.entries()).map(([key, item]) =>\n        renderItem(item, Number(key), true)\n      )}\n    </div>\n  );\n});\n\nWaterfall.displayName = 'Waterfall';\n\nexport default Waterfall;\n"],"mappings":"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"}

package/lib/drawer/drawer.js

@@ -1,13 +1,13 @@
 const require_runtime = require("../_virtual/_rolldown/runtime.js");
 const require_config_context = require("../config-provider/config-context.js");
 const require_general = require("../_utils/general.js");
-const require_index = require("../overlay/index.js");
+const require_index = require("../transition/index.js");
+const require_index$1 = require("../overlay/index.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
-let react_transition_group = require("react-transition-group");
 //#region src/drawer/drawer.tsx
 const Drawer = react.default.forwardRef((props, ref) => {
 	const { visible, placement = "right", size = 256, closable = true, unmountOnClose = true, maskType = "default", maskClosable = true, onClose, prefixCls: customisedCls, afterClose, zIndex = 1e3, header, footer, className, maskStyle, style, children } = props;
@@ -54,7 +54,7 @@ const Drawer = react.default.forwardRef((props, ref) => {
 			previousFocusRef.current?.focus();
 		};
 	}, [visible, onClose]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
 		onEnter: () => setDrawerVisible(true),
 		onExit: () => setDrawerVisible(false),
 		zIndex,
@@ -73,11 +73,12 @@ const Drawer = react.default.forwardRef((props, ref) => {
 				...style,
 				...sty
 			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.CSSTransition, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
 				appear: true,
 				nodeRef,
 				in: drawerVisible,
 				timeout: 0,
+				unmountOnExit: false,
 				classNames: `${prefixCls}__content_move`,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					ref: nodeRef,

package/lib/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":["React","getPrefixCls","ConfigContext","Overlay","CSSTransition"],"sources":["../../src/drawer/drawer.tsx"],"sourcesContent":["import React, { useContext, useEffect, useId, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { CSSTransition } from 'react-transition-group';\nimport Overlay from '../overlay';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { DrawerProps } from './types';\n\nconst Drawer = React.forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {\n  const {\n    visible,\n    placement = 'right',\n    size = 256,\n    closable = true,\n    unmountOnClose = true,\n    maskType = 'default',\n    maskClosable = true,\n    onClose,\n    prefixCls: customisedCls,\n    afterClose,\n    zIndex = 1000,\n    header,\n    footer,\n    className,\n    maskStyle,\n    style,\n    children,\n  } = props;\n  const [drawerVisible, setDrawerVisible] = useState(visible);\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('drawer', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, `${prefixCls}_${placement}`);\n  const sty: React.CSSProperties =\n    placement === 'top' || placement === 'bottom' ? { height: size } : { width: size };\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const previousFocusRef = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n\n  // Focus trap + Escape key\n  useEffect(() => {\n    if (!visible) return;\n    previousFocusRef.current = document.activeElement as HTMLElement;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onClose?.(e as unknown as React.MouseEvent);\n        return;\n      }\n      if (e.key === 'Tab' && nodeRef.current) {\n        const focusable = nodeRef.current.querySelectorAll<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n        if (focusable.length === 0) return;\n        const first = focusable[0];\n        const last = focusable[focusable.length - 1];\n        if (e.shiftKey) {\n          if (document.activeElement === first) { e.preventDefault(); last.focus(); }\n        } else {\n          if (document.activeElement === last) { e.preventDefault(); first.focus(); }\n        }\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n\n    requestAnimationFrame(() => {\n      if (nodeRef.current) {\n        const focusable = nodeRef.current.querySelectorAll<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n        if (focusable.length > 0) focusable[0].focus();\n      }\n    });\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      previousFocusRef.current?.focus();\n    };\n  }, [visible, onClose]);\n\n  return (\n    <Overlay\n      onEnter={(): void => setDrawerVisible(true)}\n      onExit={(): void => setDrawerVisible(false)}\n      zIndex={zIndex}\n      type={maskType}\n      unmountOnExit={unmountOnClose}\n      isShow={visible}\n      onExited={afterClose}\n      clickCallback={(e: React.MouseEvent): void => {\n        maskClosable && onClose ? onClose(e) : undefined;\n      }}\n      style={maskStyle}>\n      <div ref={ref} className={cls} style={{ ...style, ...sty }}>\n        <CSSTransition\n          appear={true}\n          nodeRef={nodeRef}\n          in={drawerVisible}\n          timeout={0}\n          classNames={`${prefixCls}__content_move`}>\n          <div\n            ref={nodeRef}\n            className={`${prefixCls}__content`}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={header ? titleId : undefined}\n            onClick={(e) => e.stopPropagation()}>\n            {closable && (\n              <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={onClose} aria-label=\"Close\">\n                ✕\n              </button>\n            )}\n            {header && <div className={`${prefixCls}__header`} id={titleId}>{header}</div>}\n            <div className={`${prefixCls}__body`}>{children}</div>\n            {footer && <div className={`${prefixCls}__footer`}>{footer}</div>}\n          </div>\n        </CSSTransition>\n      </div>\n    </Overlay>\n  );\n});\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"drawer.js","names":["React","getPrefixCls","ConfigContext","Overlay","Transition"],"sources":["../../src/drawer/drawer.tsx"],"sourcesContent":["import React, { useContext, useEffect, useId, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport Transition from '../transition';\nimport Overlay from '../overlay';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { DrawerProps } from './types';\n\nconst Drawer = React.forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {\n  const {\n    visible,\n    placement = 'right',\n    size = 256,\n    closable = true,\n    unmountOnClose = true,\n    maskType = 'default',\n    maskClosable = true,\n    onClose,\n    prefixCls: customisedCls,\n    afterClose,\n    zIndex = 1000,\n    header,\n    footer,\n    className,\n    maskStyle,\n    style,\n    children,\n  } = props;\n  const [drawerVisible, setDrawerVisible] = useState(visible);\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('drawer', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, `${prefixCls}_${placement}`);\n  const sty: React.CSSProperties =\n    placement === 'top' || placement === 'bottom' ? { height: size } : { width: size };\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const previousFocusRef = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n\n  // Focus trap + Escape key\n  useEffect(() => {\n    if (!visible) return;\n    previousFocusRef.current = document.activeElement as HTMLElement;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onClose?.(e as unknown as React.MouseEvent);\n        return;\n      }\n      if (e.key === 'Tab' && nodeRef.current) {\n        const focusable = nodeRef.current.querySelectorAll<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n        if (focusable.length === 0) return;\n        const first = focusable[0];\n        const last = focusable[focusable.length - 1];\n        if (e.shiftKey) {\n          if (document.activeElement === first) { e.preventDefault(); last.focus(); }\n        } else {\n          if (document.activeElement === last) { e.preventDefault(); first.focus(); }\n        }\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n\n    requestAnimationFrame(() => {\n      if (nodeRef.current) {\n        const focusable = nodeRef.current.querySelectorAll<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n        if (focusable.length > 0) focusable[0].focus();\n      }\n    });\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      previousFocusRef.current?.focus();\n    };\n  }, [visible, onClose]);\n\n  return (\n    <Overlay\n      onEnter={(): void => setDrawerVisible(true)}\n      onExit={(): void => setDrawerVisible(false)}\n      zIndex={zIndex}\n      type={maskType}\n      unmountOnExit={unmountOnClose}\n      isShow={visible}\n      onExited={afterClose}\n      clickCallback={(e: React.MouseEvent): void => {\n        maskClosable && onClose ? onClose(e) : undefined;\n      }}\n      style={maskStyle}>\n      <div ref={ref} className={cls} style={{ ...style, ...sty }}>\n        <Transition\n          appear={true}\n          nodeRef={nodeRef}\n          in={drawerVisible}\n          timeout={0}\n          unmountOnExit={false}\n          classNames={`${prefixCls}__content_move`}>\n          <div\n            ref={nodeRef}\n            className={`${prefixCls}__content`}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={header ? titleId : undefined}\n            onClick={(e) => e.stopPropagation()}>\n            {closable && (\n              <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={onClose} aria-label=\"Close\">\n                ✕\n              </button>\n            )}\n            {header && <div className={`${prefixCls}__header`} id={titleId}>{header}</div>}\n            <div className={`${prefixCls}__body`}>{children}</div>\n            {footer && <div className={`${prefixCls}__footer`}>{footer}</div>}\n          </div>\n        </Transition>\n      </div>\n    </Overlay>\n  );\n});\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}

package/lib/message/message.js

@@ -2,12 +2,12 @@ const require_runtime = require("../_virtual/_rolldown/runtime.js");
 const require_config_context = require("../config-provider/config-context.js");
 const require_general = require("../_utils/general.js");
 const require_components = require("../_utils/components.js");
+const require_index = require("../transition/index.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
-let react_transition_group = require("react-transition-group");
 //#region src/message/message.tsx
 const Message = (props) => {
 	const { type, icon, content, duration, willUnmount, extra, className, style, prefixCls: customisedCls } = props;
@@ -52,11 +52,12 @@ const Message = (props) => {
 			window.clearTimeout(timer);
 		};
 	}, [duration, willUnmount]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.CSSTransition, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
 		nodeRef: ref,
 		in: visible,
 		appear: true,
 		timeout: 0,
+		unmountOnExit: false,
 		classNames: `${prefixCls}_fade-slide`,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			role: "alert",

package/lib/message/message.js.map

@@ -1 +1 @@
-{"version":3,"file":"message.js","names":["getPrefixCls","ConfigContext","React","CheckCircle","InfoCircle","WarningCircle","CloseCircle","LoadingCircle","CSSTransition"],"sources":["../../src/message/message.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useContext } from 'react';\nimport classNames from 'classnames';\nimport { CSSTransition } from 'react-transition-group';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport {\n  CheckCircle,\n  CloseCircle,\n  InfoCircle,\n  LoadingCircle,\n  WarningCircle,\n} from '../_utils/components';\nimport { MessageProps } from './types';\n\nconst Message = (props: MessageProps): JSX.Element => {\n  const {\n    type,\n    icon,\n    content,\n    duration,\n    willUnmount,\n    extra,\n    className,\n    style,\n    prefixCls: customisedCls,\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('message', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className);\n  const ref = useRef<HTMLDivElement | null>(null);\n  const [visible, setVisible] = useState(true);\n\n  const renderIcon = (): React.ReactNode => {\n    if (React.isValidElement(icon)) {\n      return icon;\n    } else if (typeof type === 'string') {\n      switch (type) {\n        case 'success':\n          return <CheckCircle size={16} className={`${prefixCls}__icon`} />;\n        case 'info':\n          return <InfoCircle size={16} className={`${prefixCls}__icon`} />;\n        case 'warning':\n          return <WarningCircle size={16} className={`${prefixCls}__icon`} />;\n        case 'error':\n          return <CloseCircle size={16} className={`${prefixCls}__icon`} />;\n        case 'loading':\n          return (\n            <LoadingCircle\n              size={16}\n              className={classNames(`${prefixCls}__icon`, {\n                [`${prefixCls}__icon_loading`]: type === 'loading',\n              })}\n            />\n          );\n      }\n    }\n\n    return null;\n  };\n\n  useEffect(() => {\n    const node = ref.current;\n    const height = (node && node.offsetHeight) || 0;\n    const timer = window.setTimeout(() => {\n      setVisible(false);\n      willUnmount(height);\n    }, duration);\n\n    return (): void => {\n      window.clearTimeout(timer);\n    };\n  }, [duration, willUnmount]);\n\n  return (\n    <CSSTransition nodeRef={ref} in={visible} appear={true} timeout={0} classNames={`${prefixCls}_fade-slide`}>\n      <div role=\"alert\" className={cls} style={style} ref={ref}>\n        {renderIcon()}\n        <span className={`${prefixCls}__content`}>{content}</span>\n        {extra && <div className={`${prefixCls}__extra`}>{extra}</div>}\n      </div>\n    </CSSTransition>\n  );\n};\n\nMessage.displayName = 'Message';\n\nexport default Message;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,WAAW,UAAqC;CACpD,MAAM,EACJ,MACA,MACA,SACA,UACA,aACA,OACA,WACA,OACA,WAAW,kBACT;CAEJ,MAAM,YAAYA,gBAAAA,aAAa,YAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACS,WAAW,cAAc;CACjF,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,UAAU;CAC5C,MAAM,OAAA,GAAA,MAAA,QAAoC,KAAK;CAC/C,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,KAAK;CAE5C,MAAM,mBAAoC;AACxC,MAAIC,MAAAA,QAAM,eAAe,KAAK,CAC5B,QAAO;WACE,OAAO,SAAS,SACzB,SAAQ,MAAR;GACE,KAAK,UACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,aAAD;IAAa,MAAM;IAAI,WAAW,GAAG,UAAU;IAAW,CAAA;GACnE,KAAK,OACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;IAAY,MAAM;IAAI,WAAW,GAAG,UAAU;IAAW,CAAA;GAClE,KAAK,UACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,eAAD;IAAe,MAAM;IAAI,WAAW,GAAG,UAAU;IAAW,CAAA;GACrE,KAAK,QACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,aAAD;IAAa,MAAM;IAAI,WAAW,GAAG,UAAU;IAAW,CAAA;GACnE,KAAK,UACH,QACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,eAAD;IACE,MAAM;IACN,YAAA,GAAA,WAAA,SAAsB,GAAG,UAAU,SAAS,GACzC,GAAG,UAAU,kBAAkB,SAAS,WAC1C,CAAC;IACF,CAAA;;AAKV,SAAO;;AAGT,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,OAAO,IAAI;EACjB,MAAM,SAAU,QAAQ,KAAK,gBAAiB;EAC9C,MAAM,QAAQ,OAAO,iBAAiB;AACpC,cAAW,MAAM;AACjB,eAAY,OAAO;KAClB,SAAS;AAEZ,eAAmB;AACjB,UAAO,aAAa,MAAM;;IAE3B,CAAC,UAAU,YAAY,CAAC;AAE3B,QACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,eAAD;EAAe,SAAS;EAAK,IAAI;EAAS,QAAQ;EAAM,SAAS;EAAG,YAAY,GAAG,UAAU;YAC3F,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,MAAK;GAAQ,WAAW;GAAY;GAAY;aAArD;IACG,YAAY;IACb,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAW,GAAG,UAAU;eAAa;KAAe,CAAA;IACzD,SAAS,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAAW;KAAY,CAAA;IAC1D;;EACQ,CAAA;;AAIpB,QAAQ,cAAc"}
+{"version":3,"file":"message.js","names":["getPrefixCls","ConfigContext","React","CheckCircle","InfoCircle","WarningCircle","CloseCircle","LoadingCircle","Transition"],"sources":["../../src/message/message.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useContext } from 'react';\nimport classNames from 'classnames';\nimport Transition from '../transition';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport {\n  CheckCircle,\n  CloseCircle,\n  InfoCircle,\n  LoadingCircle,\n  WarningCircle,\n} from '../_utils/components';\nimport { MessageProps } from './types';\n\nconst Message = (props: MessageProps): JSX.Element => {\n  const {\n    type,\n    icon,\n    content,\n    duration,\n    willUnmount,\n    extra,\n    className,\n    style,\n    prefixCls: customisedCls,\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('message', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className);\n  const ref = useRef<HTMLDivElement | null>(null);\n  const [visible, setVisible] = useState(true);\n\n  const renderIcon = (): React.ReactNode => {\n    if (React.isValidElement(icon)) {\n      return icon;\n    } else if (typeof type === 'string') {\n      switch (type) {\n        case 'success':\n          return <CheckCircle size={16} className={`${prefixCls}__icon`} />;\n        case 'info':\n          return <InfoCircle size={16} className={`${prefixCls}__icon`} />;\n        case 'warning':\n          return <WarningCircle size={16} className={`${prefixCls}__icon`} />;\n        case 'error':\n          return <CloseCircle size={16} className={`${prefixCls}__icon`} />;\n        case 'loading':\n          return (\n            <LoadingCircle\n              size={16}\n              className={classNames(`${prefixCls}__icon`, {\n                [`${prefixCls}__icon_loading`]: type === 'loading',\n              })}\n            />\n          );\n      }\n    }\n\n    return null;\n  };\n\n  useEffect(() => {\n    const node = ref.current;\n    const height = (node && node.offsetHeight) || 0;\n    const timer = window.setTimeout(() => {\n      setVisible(false);\n      willUnmount(height);\n    }, duration);\n\n    return (): void => {\n      window.clearTimeout(timer);\n    };\n  }, [duration, willUnmount]);\n\n  return (\n    <Transition nodeRef={ref} in={visible} appear={true} timeout={0} unmountOnExit={false} classNames={`${prefixCls}_fade-slide`}>\n      <div role=\"alert\" className={cls} style={style} ref={ref}>\n        {renderIcon()}\n        <span className={`${prefixCls}__content`}>{content}</span>\n        {extra && <div className={`${prefixCls}__extra`}>{extra}</div>}\n      </div>\n    </Transition>\n  );\n};\n\nMessage.displayName = 'Message';\n\nexport default Message;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,WAAW,UAAqC;CACpD,MAAM,EACJ,MACA,MACA,SACA,UACA,aACA,OACA,WACA,OACA,WAAW,kBACT;CAEJ,MAAM,YAAYA,gBAAAA,aAAa,YAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACS,WAAW,cAAc;CACjF,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,UAAU;CAC5C,MAAM,OAAA,GAAA,MAAA,QAAoC,KAAK;CAC/C,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,KAAK;CAE5C,MAAM,mBAAoC;AACxC,MAAIC,MAAAA,QAAM,eAAe,KAAK,CAC5B,QAAO;WACE,OAAO,SAAS,SACzB,SAAQ,MAAR;GACE,KAAK,UACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,aAAD;IAAa,MAAM;IAAI,WAAW,GAAG,UAAU;IAAW,CAAA;GACnE,KAAK,OACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;IAAY,MAAM;IAAI,WAAW,GAAG,UAAU;IAAW,CAAA;GAClE,KAAK,UACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,eAAD;IAAe,MAAM;IAAI,WAAW,GAAG,UAAU;IAAW,CAAA;GACrE,KAAK,QACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,aAAD;IAAa,MAAM;IAAI,WAAW,GAAG,UAAU;IAAW,CAAA;GACnE,KAAK,UACH,QACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,eAAD;IACE,MAAM;IACN,YAAA,GAAA,WAAA,SAAsB,GAAG,UAAU,SAAS,GACzC,GAAG,UAAU,kBAAkB,SAAS,WAC1C,CAAC;IACF,CAAA;;AAKV,SAAO;;AAGT,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,OAAO,IAAI;EACjB,MAAM,SAAU,QAAQ,KAAK,gBAAiB;EAC9C,MAAM,QAAQ,OAAO,iBAAiB;AACpC,cAAW,MAAM;AACjB,eAAY,OAAO;KAClB,SAAS;AAEZ,eAAmB;AACjB,UAAO,aAAa,MAAM;;IAE3B,CAAC,UAAU,YAAY,CAAC;AAE3B,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD;EAAY,SAAS;EAAK,IAAI;EAAS,QAAQ;EAAM,SAAS;EAAG,eAAe;EAAO,YAAY,GAAG,UAAU;YAC9G,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,MAAK;GAAQ,WAAW;GAAY;GAAY;aAArD;IACG,YAAY;IACb,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAW,GAAG,UAAU;eAAa;KAAe,CAAA;IACzD,SAAS,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAAW;KAAY,CAAA;IAC1D;;EACK,CAAA;;AAIjB,QAAQ,cAAc"}

package/lib/modal/modal.js

@@ -1,16 +1,16 @@
 const require_runtime = require("../_virtual/_rolldown/runtime.js");
 const require_config_context = require("../config-provider/config-context.js");
 const require_general = require("../_utils/general.js");
+const require_index = require("../transition/index.js");
 const require_button = require("../button/button.js");
 const require_use_locale = require("../_utils/use-locale.js");
-const require_index = require("../overlay/index.js");
+const require_index$1 = require("../overlay/index.js");
 const require_flex = require("../flex/flex.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
-let react_transition_group = require("react-transition-group");
 //#region src/modal/modal.tsx
 const Modal = react.default.forwardRef((props, ref) => {
 	const locale = require_use_locale.useLocale();
@@ -81,7 +81,7 @@ const Modal = react.default.forwardRef((props, ref) => {
 			})]
 		});
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
 		onEnter: () => setModalVisible(true),
 		onExit: () => setModalVisible(false),
 		zIndex,
@@ -102,11 +102,12 @@ const Modal = react.default.forwardRef((props, ref) => {
 					width,
 					...style
 				},
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.CSSTransition, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
 					appear: true,
 					nodeRef,
 					in: modalVisible,
 					classNames: `${prefixCls}__content_${animation}`,
+					unmountOnExit: false,
 					timeout: 0,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						ref: nodeRef,

package/lib/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":["React","useLocale","getPrefixCls","ConfigContext","Flex","Button","Overlay","CSSTransition"],"sources":["../../src/modal/modal.tsx"],"sourcesContent":["import React, { useContext, useEffect, useId, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { CSSTransition } from 'react-transition-group';\nimport Overlay from '../overlay';\nimport Button from '../button/button';\nimport Flex from '../flex/flex';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { useLocale } from '../_utils/use-locale';\nimport { ModalProps } from './types';\n\nconst Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {\n  const locale = useLocale();\n  const {\n    visible = false,\n    width = 520,\n    centered = false,\n    closable = true,\n    unmountOnClose = true,\n    maskType = 'default',\n    maskClosable = true,\n    confirmText = locale.Modal.okText,\n    cancelText = locale.Modal.cancelText,\n    confirmLoading = false,\n    animation = 'slide',\n    zIndex = 1000,\n    onConfirm,\n    onCancel: onCancelProp,\n    onClose: onCloseProp,\n    top,\n    header,\n    footer,\n    afterClose,\n    confirmButtonProps,\n    cancelButtonProps,\n    className,\n    children,\n    style,\n    maskStyle,\n    headerStyle,\n    bodyStyle,\n    footerStyle,\n    prefixCls: customisedCls,\n  } = props;\n  const onCancel = onCloseProp ?? onCancelProp;\n  const [modalVisible, setModalVisible] = useState(visible);\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('modal', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, { [`${prefixCls}_centered`]: centered });\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const previousFocusRef = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n\n  // Focus trap + Escape key\n  useEffect(() => {\n    if (!visible) return;\n    previousFocusRef.current = document.activeElement as HTMLElement;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onCancel?.(e as unknown as React.MouseEvent);\n        return;\n      }\n      if (e.key === 'Tab' && nodeRef.current) {\n        const focusable = nodeRef.current.querySelectorAll<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n        if (focusable.length === 0) return;\n        const first = focusable[0];\n        const last = focusable[focusable.length - 1];\n        if (e.shiftKey) {\n          if (document.activeElement === first) { e.preventDefault(); last.focus(); }\n        } else {\n          if (document.activeElement === last) { e.preventDefault(); first.focus(); }\n        }\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n\n    // Focus first focusable element\n    requestAnimationFrame(() => {\n      if (nodeRef.current) {\n        const focusable = nodeRef.current.querySelectorAll<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n        if (focusable.length > 0) focusable[0].focus();\n      }\n    });\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      previousFocusRef.current?.focus();\n    };\n  }, [visible, onCancel]);\n\n  const renderFooter = (): React.ReactNode => {\n    if (React.isValidElement(footer)) {\n      return footer;\n    } else if (footer === null) {\n      return null;\n    } else {\n      return (\n        <Flex gap=\"sm\" justify='end' className={`${prefixCls}__footer`} style={footerStyle}>\n          <Button onClick={onCancel} className={`${prefixCls}__footer-btn`} {...cancelButtonProps}>\n            {cancelText}\n          </Button>\n          <Button\n            loading={confirmLoading}\n            onClick={onConfirm}\n            btnType=\"primary\"\n            className={`${prefixCls}__footer-btn`}\n            {...confirmButtonProps}>\n            {confirmText}\n          </Button>\n        </Flex>\n      );\n    }\n  };\n\n  return (\n    <Overlay\n      onEnter={(): void => setModalVisible(true)}\n      onExit={(): void => setModalVisible(false)}\n      zIndex={zIndex}\n      type={maskType}\n      unmountOnExit={unmountOnClose}\n      isShow={visible}\n      onExited={afterClose}\n      clickCallback={(e: React.MouseEvent): void => {\n        maskClosable && onCancel ? onCancel(e) : undefined;\n      }}\n      style={maskStyle}>\n      <div ref={ref} className={cls} style={{ top }}>\n        <div style={{ width, ...style }}>\n          <CSSTransition\n            appear={true}\n            nodeRef={nodeRef}\n            in={modalVisible}\n            classNames={`${prefixCls}__content_${animation}`}\n            timeout={0}>\n            <div\n              ref={nodeRef}\n              className={`${prefixCls}__content`}\n              role=\"dialog\"\n              aria-modal=\"true\"\n              aria-labelledby={header ? titleId : undefined}\n              onClick={(e): void => e.stopPropagation()}>\n              {closable && (\n                <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={onCancel} aria-label=\"Close\">\n                  ✕\n                </button>\n              )}\n              {header && (\n                <div className={`${prefixCls}__header`} style={headerStyle}>\n                  <div className={`${prefixCls}__title`} id={titleId}>{header}</div>\n                </div>\n              )}\n              <div className={`${prefixCls}__body`} style={bodyStyle}>\n                {children}\n              </div>\n              {renderFooter()}\n            </div>\n          </CSSTransition>\n        </div>\n      </div>\n    </Overlay>\n  );\n});\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"modal.js","names":["React","useLocale","getPrefixCls","ConfigContext","Flex","Button","Overlay","Transition"],"sources":["../../src/modal/modal.tsx"],"sourcesContent":["import React, { useContext, useEffect, useId, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport Transition from '../transition';\nimport Overlay from '../overlay';\nimport Button from '../button/button';\nimport Flex from '../flex/flex';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { useLocale } from '../_utils/use-locale';\nimport { ModalProps } from './types';\n\nconst Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {\n  const locale = useLocale();\n  const {\n    visible = false,\n    width = 520,\n    centered = false,\n    closable = true,\n    unmountOnClose = true,\n    maskType = 'default',\n    maskClosable = true,\n    confirmText = locale.Modal.okText,\n    cancelText = locale.Modal.cancelText,\n    confirmLoading = false,\n    animation = 'slide',\n    zIndex = 1000,\n    onConfirm,\n    onCancel: onCancelProp,\n    onClose: onCloseProp,\n    top,\n    header,\n    footer,\n    afterClose,\n    confirmButtonProps,\n    cancelButtonProps,\n    className,\n    children,\n    style,\n    maskStyle,\n    headerStyle,\n    bodyStyle,\n    footerStyle,\n    prefixCls: customisedCls,\n  } = props;\n  const onCancel = onCloseProp ?? onCancelProp;\n  const [modalVisible, setModalVisible] = useState(visible);\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('modal', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, { [`${prefixCls}_centered`]: centered });\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const previousFocusRef = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n\n  // Focus trap + Escape key\n  useEffect(() => {\n    if (!visible) return;\n    previousFocusRef.current = document.activeElement as HTMLElement;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onCancel?.(e as unknown as React.MouseEvent);\n        return;\n      }\n      if (e.key === 'Tab' && nodeRef.current) {\n        const focusable = nodeRef.current.querySelectorAll<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n        if (focusable.length === 0) return;\n        const first = focusable[0];\n        const last = focusable[focusable.length - 1];\n        if (e.shiftKey) {\n          if (document.activeElement === first) { e.preventDefault(); last.focus(); }\n        } else {\n          if (document.activeElement === last) { e.preventDefault(); first.focus(); }\n        }\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n\n    // Focus first focusable element\n    requestAnimationFrame(() => {\n      if (nodeRef.current) {\n        const focusable = nodeRef.current.querySelectorAll<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n        if (focusable.length > 0) focusable[0].focus();\n      }\n    });\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      previousFocusRef.current?.focus();\n    };\n  }, [visible, onCancel]);\n\n  const renderFooter = (): React.ReactNode => {\n    if (React.isValidElement(footer)) {\n      return footer;\n    } else if (footer === null) {\n      return null;\n    } else {\n      return (\n        <Flex gap=\"sm\" justify='end' className={`${prefixCls}__footer`} style={footerStyle}>\n          <Button onClick={onCancel} className={`${prefixCls}__footer-btn`} {...cancelButtonProps}>\n            {cancelText}\n          </Button>\n          <Button\n            loading={confirmLoading}\n            onClick={onConfirm}\n            btnType=\"primary\"\n            className={`${prefixCls}__footer-btn`}\n            {...confirmButtonProps}>\n            {confirmText}\n          </Button>\n        </Flex>\n      );\n    }\n  };\n\n  return (\n    <Overlay\n      onEnter={(): void => setModalVisible(true)}\n      onExit={(): void => setModalVisible(false)}\n      zIndex={zIndex}\n      type={maskType}\n      unmountOnExit={unmountOnClose}\n      isShow={visible}\n      onExited={afterClose}\n      clickCallback={(e: React.MouseEvent): void => {\n        maskClosable && onCancel ? onCancel(e) : undefined;\n      }}\n      style={maskStyle}>\n      <div ref={ref} className={cls} style={{ top }}>\n        <div style={{ width, ...style }}>\n          <Transition\n            appear={true}\n            nodeRef={nodeRef}\n            in={modalVisible}\n            classNames={`${prefixCls}__content_${animation}`}\n            unmountOnExit={false}\n            timeout={0}>\n            <div\n              ref={nodeRef}\n              className={`${prefixCls}__content`}\n              role=\"dialog\"\n              aria-modal=\"true\"\n              aria-labelledby={header ? titleId : undefined}\n              onClick={(e): void => e.stopPropagation()}>\n              {closable && (\n                <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={onCancel} aria-label=\"Close\">\n                  ✕\n                </button>\n              )}\n              {header && (\n                <div className={`${prefixCls}__header`} style={headerStyle}>\n                  <div className={`${prefixCls}__title`} id={titleId}>{header}</div>\n                </div>\n              )}\n              <div className={`${prefixCls}__body`} style={bodyStyle}>\n                {children}\n              </div>\n              {renderFooter()}\n            </div>\n          </Transition>\n        </div>\n      </div>\n    </Overlay>\n  );\n});\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}

package/lib/overlay/overlay.js

@@ -1,12 +1,12 @@
 const require_runtime = require("../_virtual/_rolldown/runtime.js");
 const require_config_context = require("../config-provider/config-context.js");
 const require_general = require("../_utils/general.js");
-const require_index = require("../portal/index.js");
+const require_index = require("../transition/index.js");
+const require_index$1 = require("../portal/index.js");
 let react = require("react");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
-let react_transition_group = require("react-transition-group");
 //#region src/overlay/overlay.tsx
 let scrollLockCount = 0;
 const Overlay = (props) => {
@@ -29,7 +29,7 @@ const Overlay = (props) => {
 			}
 		};
 	}, [isShow]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.CSSTransition, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
 		appear: true,
 		nodeRef,
 		onEnter,

package/lib/overlay/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":["getPrefixCls","ConfigContext","Portal","CSSTransition"],"sources":["../../src/overlay/overlay.tsx"],"sourcesContent":["import { useContext, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport Portal from '../portal';\nimport { CSSTransition } from 'react-transition-group';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { OverlayProps } from './types';\n\nlet scrollLockCount = 0;\n\nconst Overlay = (props: OverlayProps): JSX.Element => {\n  const {\n    isShow = false,\n    blurred = false,\n    unmountOnExit = true,\n    zIndex = 1000,\n    type = 'default',\n    clickCallback,\n    onEnter,\n    onEntered,\n    onExit,\n    onExited,\n    children,\n    style,\n    prefixCls: customisedCls,\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('overlay', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, `${prefixCls}_${type}`, { [`${prefixCls}_blurred`]: blurred });\n  const nodeRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (isShow) {\n      scrollLockCount++;\n      document.body.style.overflow = 'hidden';\n    }\n    return () => {\n      if (isShow) {\n        scrollLockCount--;\n        if (scrollLockCount <= 0) {\n          scrollLockCount = 0;\n          document.body.style.overflow = '';\n        }\n      }\n    };\n  }, [isShow]);\n\n  return (\n    <Portal>\n      <CSSTransition\n        appear={true}\n        nodeRef={nodeRef}\n        onEnter={onEnter}\n        onEntered={onEntered}\n        onExit={onExit}\n        onExited={onExited}\n        in={isShow}\n        mountOnEnter={true}\n        unmountOnExit={unmountOnExit}\n        classNames={`${prefixCls}_fade`}\n        timeout={{ exit: 300, enter: 0 }}>\n        <div ref={nodeRef} tabIndex={-1} className={cls} onClick={clickCallback} style={{ zIndex, ...style }}>\n          {children}\n        </div>\n      </CSSTransition>\n    </Portal>\n  );\n};\n\nOverlay.displayName = 'Overlay';\n\nexport default Overlay;\n"],"mappings":";;;;;;;;;;AAQA,IAAI,kBAAkB;AAEtB,MAAM,WAAW,UAAqC;CACpD,MAAM,EACJ,SAAS,OACT,UAAU,OACV,gBAAgB,MAChB,SAAS,KACT,OAAO,WACP,eACA,SACA,WACA,QACA,UACA,UACA,OACA,WAAW,kBACT;CAEJ,MAAM,YAAYA,gBAAAA,aAAa,YAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACS,WAAW,cAAc;CACjF,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,GAAG,UAAU,YAAY,SAAS,CAAC;CAChG,MAAM,WAAA,GAAA,MAAA,QAAiC,KAAK;AAE5C,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,QAAQ;AACV;AACA,YAAS,KAAK,MAAM,WAAW;;AAEjC,eAAa;AACX,OAAI,QAAQ;AACV;AACA,QAAI,mBAAmB,GAAG;AACxB,uBAAkB;AAClB,cAAS,KAAK,MAAM,WAAW;;;;IAIpC,CAAC,OAAO,CAAC;AAEZ,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,eAAD;EACE,QAAQ;EACC;EACA;EACE;EACH;EACE;EACV,IAAI;EACJ,cAAc;EACC;EACf,YAAY,GAAG,UAAU;EACzB,SAAS;GAAE,MAAM;GAAK,OAAO;GAAG;YAChC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,KAAK;GAAS,UAAU;GAAI,WAAW;GAAK,SAAS;GAAe,OAAO;IAAE;IAAQ,GAAG;IAAO;GACjG;GACG,CAAA;EACQ,CAAA,EACT,CAAA;;AAIb,QAAQ,cAAc"}
+{"version":3,"file":"overlay.js","names":["getPrefixCls","ConfigContext","Portal","Transition"],"sources":["../../src/overlay/overlay.tsx"],"sourcesContent":["import { useContext, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport Portal from '../portal';\nimport Transition from '../transition';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { OverlayProps } from './types';\n\nlet scrollLockCount = 0;\n\nconst Overlay = (props: OverlayProps): JSX.Element => {\n  const {\n    isShow = false,\n    blurred = false,\n    unmountOnExit = true,\n    zIndex = 1000,\n    type = 'default',\n    clickCallback,\n    onEnter,\n    onEntered,\n    onExit,\n    onExited,\n    children,\n    style,\n    prefixCls: customisedCls,\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('overlay', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, `${prefixCls}_${type}`, { [`${prefixCls}_blurred`]: blurred });\n  const nodeRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (isShow) {\n      scrollLockCount++;\n      document.body.style.overflow = 'hidden';\n    }\n    return () => {\n      if (isShow) {\n        scrollLockCount--;\n        if (scrollLockCount <= 0) {\n          scrollLockCount = 0;\n          document.body.style.overflow = '';\n        }\n      }\n    };\n  }, [isShow]);\n\n  return (\n    <Portal>\n      <Transition\n        appear={true}\n        nodeRef={nodeRef}\n        onEnter={onEnter}\n        onEntered={onEntered}\n        onExit={onExit}\n        onExited={onExited}\n        in={isShow}\n        mountOnEnter={true}\n        unmountOnExit={unmountOnExit}\n        classNames={`${prefixCls}_fade`}\n        timeout={{ exit: 300, enter: 0 }}>\n        <div ref={nodeRef} tabIndex={-1} className={cls} onClick={clickCallback} style={{ zIndex, ...style }}>\n          {children}\n        </div>\n      </Transition>\n    </Portal>\n  );\n};\n\nOverlay.displayName = 'Overlay';\n\nexport default Overlay;\n"],"mappings":";;;;;;;;;;AAQA,IAAI,kBAAkB;AAEtB,MAAM,WAAW,UAAqC;CACpD,MAAM,EACJ,SAAS,OACT,UAAU,OACV,gBAAgB,MAChB,SAAS,KACT,OAAO,WACP,eACA,SACA,WACA,QACA,UACA,UACA,OACA,WAAW,kBACT;CAEJ,MAAM,YAAYA,gBAAAA,aAAa,YAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACS,WAAW,cAAc;CACjF,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,GAAG,UAAU,YAAY,SAAS,CAAC;CAChG,MAAM,WAAA,GAAA,MAAA,QAAiC,KAAK;AAE5C,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,QAAQ;AACV;AACA,YAAS,KAAK,MAAM,WAAW;;AAEjC,eAAa;AACX,OAAI,QAAQ;AACV;AACA,QAAI,mBAAmB,GAAG;AACxB,uBAAkB;AAClB,cAAS,KAAK,MAAM,WAAW;;;;IAIpC,CAAC,OAAO,CAAC;AAEZ,QACE,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD;EACE,QAAQ;EACC;EACA;EACE;EACH;EACE;EACV,IAAI;EACJ,cAAc;EACC;EACf,YAAY,GAAG,UAAU;EACzB,SAAS;GAAE,MAAM;GAAK,OAAO;GAAG;YAChC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,KAAK;GAAS,UAAU;GAAI,WAAW;GAAK,SAAS;GAAe,OAAO;IAAE;IAAQ,GAAG;IAAO;GACjG;GACG,CAAA;EACK,CAAA,EACN,CAAA;;AAIb,QAAQ,cAAc"}

package/lib/transition/index.js

@@ -1,5 +1,6 @@
 require('../style/base.css');
 require('./style/index.css');
+require("./use-transition.js");
 //#region src/transition/index.tsx
 var transition_default = require("./transition.js").default;
 //#endregion

package/lib/transition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Transition"],"sources":["../../src/transition/index.tsx"],"sourcesContent":["import Transition from './transition';\n\nexport type { AnimationName, TransitionProps } from './transition';\nexport default Transition;\n"],"mappings":";AAGA,IAAA,gDAAeA"}
+{"version":3,"file":"index.js","names":["Transition"],"sources":["../../src/transition/index.tsx"],"sourcesContent":["import Transition from './transition';\n\nexport type { AnimationName, TransitionProps } from './transition';\nexport { default as useTransition } from './use-transition';\nexport type { TransitionState, UseTransitionOptions, UseTransitionResult } from './use-transition';\nexport default Transition;\n"],"mappings":";;AAKA,IAAA,gDAAeA"}

package/lib/transition/transition.d.ts

@@ -1,16 +1,31 @@
 import React from "react";
-import { CSSTransitionProps } from "react-transition-group/CSSTransition";
 
 //#region src/transition/transition.d.ts
 type AnimationName = 'zoom-center-top' | 'zoom-center-bottom' | 'zoom-center-left' | 'zoom-center-right' | 'zoom-top-start' | 'zoom-top' | 'zoom-top-end' | 'zoom-bottom-start' | 'zoom-bottom' | 'zoom-bottom-end' | 'zoom-left-start' | 'zoom-left' | 'zoom-left-end' | 'zoom-right-start' | 'zoom-right' | 'zoom-right-end' | 'slide-up' | 'slide-down';
 type TransitionProps = {
-  /** Animation prefix */prefix?: string; /** Preset animation name */
-  animation?: AnimationName; /** Prevent the transition conflict with the inner component */
+  in?: boolean;
+  timeout?: number | {
+    enter: number;
+    exit: number;
+  };
+  appear?: boolean;
+  unmountOnExit?: boolean;
+  mountOnEnter?: boolean; /** Animation prefix */
+  prefix?: string; /** Preset animation name */
+  animation?: AnimationName; /** Custom class name base (overrides prefix + animation) */
+  classNames?: string; /** Prevent the transition conflict with the inner component */
   wrapper?: boolean;
+  nodeRef?: React.RefObject<HTMLElement | null>;
+  onEnter?: () => void;
+  onEntering?: () => void;
+  onEntered?: () => void;
+  onExit?: () => void;
+  onExiting?: () => void;
+  onExited?: () => void;
   children?: React.ReactNode;
-} & Partial<CSSTransitionProps<HTMLElement>>;
+};
 declare const Transition: {
-  (props: TransitionProps): React.ReactElement;
+  (props: TransitionProps): React.ReactElement | null;
   displayName: string;
 };
 //#endregion

package/lib/transition/transition.js

@@ -1,20 +1,45 @@
 const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_use_transition = require("./use-transition.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let react_transition_group = require("react-transition-group");
 //#region src/transition/transition.tsx
+function getTransitionClasses(base, state) {
+	switch (state) {
+		case "enter": return `${base}-enter`;
+		case "entering": return `${base}-enter ${base}-enter-active`;
+		case "entered": return `${base}-enter-done`;
+		case "exit": return `${base}-exit`;
+		case "exiting": return `${base}-exit ${base}-exit-active`;
+		case "exited": return `${base}-exit-done`;
+		default: return "";
+	}
+}
 const Transition = (props) => {
-	const { timeout = 300, unmountOnExit = true, appear = true, prefix = "ty", animation, classNames, nodeRef, children, wrapper, ...otherProps } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.CSSTransition, {
-		...otherProps,
+	const { in: inProp = false, timeout = 300, unmountOnExit = true, mountOnEnter, appear = true, prefix = "ty", animation, classNames: classNamesProp, nodeRef, children, wrapper, onEnter, onEntering, onEntered, onExit, onExiting, onExited } = props;
+	const { state, shouldMount } = require_use_transition.default({
+		in: inProp,
 		timeout,
 		appear,
 		unmountOnExit,
-		nodeRef,
-		classNames: classNames ? classNames : `${prefix}-${animation}`,
-		children: wrapper ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children }) : children
+		mountOnEnter,
+		onEnter,
+		onEntering,
+		onEntered,
+		onExit,
+		onExiting,
+		onExited,
+		nodeRef
 	});
+	if (!shouldMount) return null;
+	const transitionClasses = getTransitionClasses(classNamesProp ? classNamesProp : `${prefix}-${animation}`, state);
+	const child = wrapper ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children }) : children;
+	if (react.default.isValidElement(child)) {
+		const existingClassName = child.props.className || "";
+		const mergedClassName = existingClassName ? `${existingClassName} ${transitionClasses}`.trim() : transitionClasses;
+		return react.default.cloneElement(child, { className: mergedClassName || void 0 });
+	}
+	return child;
 };
 Transition.displayName = "Transition";
 //#endregion

package/lib/transition/transition.js.map

@@ -1 +1 @@
-{"version":3,"file":"transition.js","names":["CSSTransition"],"sources":["../../src/transition/transition.tsx"],"sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { CSSTransitionProps } from 'react-transition-group/CSSTransition';\n\nexport type AnimationName =\n  | 'zoom-center-top'\n  | 'zoom-center-bottom'\n  | 'zoom-center-left'\n  | 'zoom-center-right'\n  | 'zoom-top-start'\n  | 'zoom-top'\n  | 'zoom-top-end'\n  | 'zoom-bottom-start'\n  | 'zoom-bottom'\n  | 'zoom-bottom-end'\n  | 'zoom-left-start'\n  | 'zoom-left'\n  | 'zoom-left-end'\n  | 'zoom-right-start'\n  | 'zoom-right'\n  | 'zoom-right-end'\n  | 'slide-up'\n  | 'slide-down';\n\nexport type TransitionProps = {\n  /** Animation prefix */\n  prefix?: string;\n\n  /** Preset animation name */\n  animation?: AnimationName;\n\n  /** Prevent the transition conflict with the inner component */\n  wrapper?: boolean;\n  children?: React.ReactNode;\n} & Partial<CSSTransitionProps<HTMLElement>>;\n\nconst Transition = (props: TransitionProps): React.ReactElement => {\n  const {\n    timeout = 300,\n    unmountOnExit = true,\n    appear = true,\n    prefix = 'ty',\n    animation,\n    classNames,\n    nodeRef,\n    children,\n    wrapper,\n    ...otherProps\n  } = props;\n\n  return (\n    <CSSTransition\n      {...(otherProps as CSSTransitionProps<HTMLElement>)}\n      timeout={timeout}\n      appear={appear}\n      unmountOnExit={unmountOnExit}\n      nodeRef={nodeRef}\n      classNames={classNames ? classNames : `${prefix}-${animation}`}>\n      {wrapper ? <div>{children}</div> : (children as React.ReactElement)}\n    </CSSTransition>\n  );\n};\n\nTransition.displayName = 'Transition';\n\nexport default Transition;\n"],"mappings":";;;;;;AAoCA,MAAM,cAAc,UAA+C;CACjE,MAAM,EACJ,UAAU,KACV,gBAAgB,MAChB,SAAS,MACT,SAAS,MACT,WACA,YACA,SACA,UACA,SACA,GAAG,eACD;AAEJ,QACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,eAAD;EACE,GAAK;EACI;EACD;EACO;EACN;EACT,YAAY,aAAa,aAAa,GAAG,OAAO,GAAG;YAClD,UAAU,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAM,UAAe,CAAA,GAAI;EACtB,CAAA;;AAIpB,WAAW,cAAc"}
+{"version":3,"file":"transition.js","names":["useTransition","React"],"sources":["../../src/transition/transition.tsx"],"sourcesContent":["import React from 'react';\nimport useTransition, { TransitionState } from './use-transition';\n\nexport type AnimationName =\n  | 'zoom-center-top'\n  | 'zoom-center-bottom'\n  | 'zoom-center-left'\n  | 'zoom-center-right'\n  | 'zoom-top-start'\n  | 'zoom-top'\n  | 'zoom-top-end'\n  | 'zoom-bottom-start'\n  | 'zoom-bottom'\n  | 'zoom-bottom-end'\n  | 'zoom-left-start'\n  | 'zoom-left'\n  | 'zoom-left-end'\n  | 'zoom-right-start'\n  | 'zoom-right'\n  | 'zoom-right-end'\n  | 'slide-up'\n  | 'slide-down';\n\nexport type TransitionProps = {\n  in?: boolean;\n  timeout?: number | { enter: number; exit: number };\n  appear?: boolean;\n  unmountOnExit?: boolean;\n  mountOnEnter?: boolean;\n\n  /** Animation prefix */\n  prefix?: string;\n\n  /** Preset animation name */\n  animation?: AnimationName;\n\n  /** Custom class name base (overrides prefix + animation) */\n  classNames?: string;\n\n  /** Prevent the transition conflict with the inner component */\n  wrapper?: boolean;\n\n  nodeRef?: React.RefObject<HTMLElement | null>;\n\n  onEnter?: () => void;\n  onEntering?: () => void;\n  onEntered?: () => void;\n  onExit?: () => void;\n  onExiting?: () => void;\n  onExited?: () => void;\n\n  children?: React.ReactNode;\n};\n\nfunction getTransitionClasses(base: string, state: TransitionState): string {\n  switch (state) {\n    case 'enter':\n      return `${base}-enter`;\n    case 'entering':\n      return `${base}-enter ${base}-enter-active`;\n    case 'entered':\n      return `${base}-enter-done`;\n    case 'exit':\n      return `${base}-exit`;\n    case 'exiting':\n      return `${base}-exit ${base}-exit-active`;\n    case 'exited':\n      return `${base}-exit-done`;\n    default:\n      return '';\n  }\n}\n\nconst Transition = (props: TransitionProps): React.ReactElement | null => {\n  const {\n    in: inProp = false,\n    timeout = 300,\n    unmountOnExit = true,\n    mountOnEnter,\n    appear = true,\n    prefix = 'ty',\n    animation,\n    classNames: classNamesProp,\n    nodeRef,\n    children,\n    wrapper,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n  } = props;\n\n  const { state, shouldMount } = useTransition({\n    in: inProp,\n    timeout,\n    appear,\n    unmountOnExit,\n    mountOnEnter,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n    nodeRef,\n  });\n\n  if (!shouldMount) {\n    return null;\n  }\n\n  const base = classNamesProp ? classNamesProp : `${prefix}-${animation}`;\n  const transitionClasses = getTransitionClasses(base, state);\n\n  const child = wrapper ? <div>{children}</div> : children;\n\n  if (React.isValidElement(child)) {\n    const existingClassName = (child.props as { className?: string }).className || '';\n    const mergedClassName = existingClassName\n      ? `${existingClassName} ${transitionClasses}`.trim()\n      : transitionClasses;\n\n    return React.cloneElement(child as React.ReactElement<{ className?: string }>, {\n      className: mergedClassName || undefined,\n    });\n  }\n\n  return child as React.ReactElement;\n};\n\nTransition.displayName = 'Transition';\n\nexport default Transition;\n"],"mappings":";;;;;;AAsDA,SAAS,qBAAqB,MAAc,OAAgC;AAC1E,SAAQ,OAAR;EACE,KAAK,QACH,QAAO,GAAG,KAAK;EACjB,KAAK,WACH,QAAO,GAAG,KAAK,SAAS,KAAK;EAC/B,KAAK,UACH,QAAO,GAAG,KAAK;EACjB,KAAK,OACH,QAAO,GAAG,KAAK;EACjB,KAAK,UACH,QAAO,GAAG,KAAK,QAAQ,KAAK;EAC9B,KAAK,SACH,QAAO,GAAG,KAAK;EACjB,QACE,QAAO;;;AAIb,MAAM,cAAc,UAAsD;CACxE,MAAM,EACJ,IAAI,SAAS,OACb,UAAU,KACV,gBAAgB,MAChB,cACA,SAAS,MACT,SAAS,MACT,WACA,YAAY,gBACZ,SACA,UACA,SACA,SACA,YACA,WACA,QACA,WACA,aACE;CAEJ,MAAM,EAAE,OAAO,gBAAgBA,uBAAAA,QAAc;EAC3C,IAAI;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,KAAI,CAAC,YACH,QAAO;CAIT,MAAM,oBAAoB,qBADb,iBAAiB,iBAAiB,GAAG,OAAO,GAAG,aACP,MAAM;CAE3D,MAAM,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAM,UAAe,CAAA,GAAG;AAEhD,KAAIC,MAAAA,QAAM,eAAe,MAAM,EAAE;EAC/B,MAAM,oBAAqB,MAAM,MAAiC,aAAa;EAC/E,MAAM,kBAAkB,oBACpB,GAAG,kBAAkB,GAAG,oBAAoB,MAAM,GAClD;AAEJ,SAAOA,MAAAA,QAAM,aAAa,OAAqD,EAC7E,WAAW,mBAAmB,KAAA,GAC/B,CAAC;;AAGJ,QAAO;;AAGT,WAAW,cAAc"}

package/lib/transition/use-transition.js

@@ -0,0 +1,138 @@
+require("../_virtual/_rolldown/runtime.js");
+let react = require("react");
+//#region src/transition/use-transition.ts
+function normalizeTimeout(timeout) {
+	if (timeout == null) return {
+		enter: 300,
+		exit: 300
+	};
+	if (typeof timeout === "number") return {
+		enter: timeout,
+		exit: timeout
+	};
+	return timeout;
+}
+function useTransition(options) {
+	const { in: inProp, timeout, appear = true, unmountOnExit = true, mountOnEnter = false, onEnter, onEntering, onEntered, onExit, onExiting, onExited, nodeRef } = options;
+	const normalizedTimeout = normalizeTimeout(timeout);
+	const getInitialState = () => {
+		if (inProp) return appear ? "enter" : "entered";
+		if (unmountOnExit || mountOnEnter) return "unmounted";
+		return "exited";
+	};
+	const [state, setState] = (0, react.useState)(getInitialState);
+	const rafRef = (0, react.useRef)(0);
+	const timerRef = (0, react.useRef)(0);
+	const transitionEndRef = (0, react.useRef)(null);
+	const initialMountRef = (0, react.useRef)(true);
+	const callbacksRef = (0, react.useRef)({
+		onEnter,
+		onEntering,
+		onEntered,
+		onExit,
+		onExiting,
+		onExited
+	});
+	callbacksRef.current = {
+		onEnter,
+		onEntering,
+		onEntered,
+		onExit,
+		onExiting,
+		onExited
+	};
+	const cleanup = (0, react.useCallback)(() => {
+		if (rafRef.current) {
+			cancelAnimationFrame(rafRef.current);
+			rafRef.current = 0;
+		}
+		if (timerRef.current) {
+			clearTimeout(timerRef.current);
+			timerRef.current = 0;
+		}
+		if (transitionEndRef.current && nodeRef?.current) {
+			nodeRef.current.removeEventListener("transitionend", transitionEndRef.current);
+			transitionEndRef.current = null;
+		}
+	}, [nodeRef]);
+	const waitForTransition = (0, react.useCallback)((phase, done) => {
+		const safetyDuration = phase === "enter" ? normalizedTimeout.enter : normalizedTimeout.exit;
+		if (safetyDuration === 0) {
+			done();
+			return;
+		}
+		const finish = () => {
+			cleanup();
+			done();
+		};
+		const node = nodeRef?.current;
+		if (node) {
+			const handler = (e) => {
+				if (e.target === node) finish();
+			};
+			transitionEndRef.current = handler;
+			node.addEventListener("transitionend", handler);
+		}
+		timerRef.current = window.setTimeout(finish, safetyDuration + 50);
+	}, [
+		cleanup,
+		nodeRef,
+		normalizedTimeout.enter,
+		normalizedTimeout.exit
+	]);
+	(0, react.useLayoutEffect)(() => {
+		if (state === "enter") {
+			callbacksRef.current.onEnter?.();
+			rafRef.current = requestAnimationFrame(() => {
+				setState("entering");
+				callbacksRef.current.onEntering?.();
+				waitForTransition("enter", () => {
+					setState("entered");
+					callbacksRef.current.onEntered?.();
+				});
+			});
+		}
+	}, [state]);
+	(0, react.useLayoutEffect)(() => {
+		if (state === "exit") {
+			callbacksRef.current.onExit?.();
+			rafRef.current = requestAnimationFrame(() => {
+				setState("exiting");
+				callbacksRef.current.onExiting?.();
+				waitForTransition("exit", () => {
+					setState((prev) => {
+						if (prev === "exiting") {
+							callbacksRef.current.onExited?.();
+							return unmountOnExit ? "unmounted" : "exited";
+						}
+						return prev;
+					});
+				});
+			});
+		}
+	}, [state]);
+	(0, react.useEffect)(() => {
+		if (initialMountRef.current) {
+			initialMountRef.current = false;
+			return;
+		}
+		if (inProp) {
+			cleanup();
+			setState("enter");
+		} else {
+			cleanup();
+			setState("exit");
+		}
+	}, [inProp]);
+	(0, react.useEffect)(() => {
+		return cleanup;
+	}, [cleanup]);
+	return {
+		state,
+		shouldMount: state !== "unmounted"
+	};
+}
+//#endregion
+exports.default = useTransition;
+
+//# sourceMappingURL=use-transition.js.map

package/lib/transition/use-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-transition.js","names":[],"sources":["../../src/transition/use-transition.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nexport type TransitionState =\n  | 'unmounted'\n  | 'enter'\n  | 'entering'\n  | 'entered'\n  | 'exit'\n  | 'exiting'\n  | 'exited';\n\nexport interface UseTransitionOptions {\n  in: boolean;\n  timeout?: number | { enter: number; exit: number };\n  appear?: boolean;\n  unmountOnExit?: boolean;\n  mountOnEnter?: boolean;\n  onEnter?: () => void;\n  onEntering?: () => void;\n  onEntered?: () => void;\n  onExit?: () => void;\n  onExiting?: () => void;\n  onExited?: () => void;\n  nodeRef?: React.RefObject<HTMLElement | null>;\n}\n\nexport interface UseTransitionResult {\n  state: TransitionState;\n  shouldMount: boolean;\n}\n\nfunction normalizeTimeout(\n  timeout: number | { enter: number; exit: number } | undefined\n): { enter: number; exit: number } {\n  if (timeout == null) return { enter: 300, exit: 300 };\n  if (typeof timeout === 'number') return { enter: timeout, exit: timeout };\n  return timeout;\n}\n\nfunction useTransition(options: UseTransitionOptions): UseTransitionResult {\n  const {\n    in: inProp,\n    timeout,\n    appear = true,\n    unmountOnExit = true,\n    mountOnEnter = false,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n    nodeRef,\n  } = options;\n\n  const normalizedTimeout = normalizeTimeout(timeout);\n\n  // Determine initial state\n  const getInitialState = (): TransitionState => {\n    if (inProp) {\n      return appear ? 'enter' : 'entered';\n    }\n    if (unmountOnExit || mountOnEnter) {\n      return 'unmounted';\n    }\n    return 'exited';\n  };\n\n  const [state, setState] = useState<TransitionState>(getInitialState);\n  const rafRef = useRef<number>(0);\n  const timerRef = useRef<number>(0);\n  const transitionEndRef = useRef<(() => void) | null>(null);\n  const initialMountRef = useRef(true);\n\n  // Store latest callbacks in refs to avoid re-triggering effects\n  const callbacksRef = useRef({\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n  });\n  callbacksRef.current = {\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n  };\n\n  const cleanup = useCallback(() => {\n    if (rafRef.current) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = 0;\n    }\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = 0;\n    }\n    if (transitionEndRef.current && nodeRef?.current) {\n      nodeRef.current.removeEventListener('transitionend', transitionEndRef.current);\n      transitionEndRef.current = null;\n    }\n  }, [nodeRef]);\n\n  const waitForTransition = useCallback(\n    (phase: 'enter' | 'exit', done: () => void) => {\n      const safetyDuration =\n        phase === 'enter' ? normalizedTimeout.enter : normalizedTimeout.exit;\n\n      // timeout=0 means \"don't wait\" — advance immediately.\n      // This matches react-transition-group's behavior where timeout=0\n      // skips straight to the done state, letting CSS handle the animation\n      // via the base element's transition property.\n      if (safetyDuration === 0) {\n        done();\n        return;\n      }\n\n      const finish = () => {\n        cleanup();\n        done();\n      };\n\n      // Try transitionend listener first\n      const node = nodeRef?.current;\n      if (node) {\n        const handler = (e: Event) => {\n          if ((e as TransitionEvent).target === node) {\n            finish();\n          }\n        };\n        transitionEndRef.current = handler as () => void;\n        node.addEventListener('transitionend', handler);\n      }\n\n      // Safety timeout fallback\n      timerRef.current = window.setTimeout(finish, safetyDuration + 50);\n    },\n    [cleanup, nodeRef, normalizedTimeout.enter, normalizedTimeout.exit]\n  );\n\n  // Continue the enter animation after DOM is committed (state === 'enter').\n  // useLayoutEffect fires synchronously after DOM mutations, guaranteeing\n  // the child is mounted and refs are populated before onEnter runs.\n  useLayoutEffect(() => {\n    if (state === 'enter') {\n      callbacksRef.current.onEnter?.();\n\n      // Single rAF: useLayoutEffect runs before paint, so one rAF is enough\n      // to ensure the browser has painted the -enter class before we add -enter-active.\n      rafRef.current = requestAnimationFrame(() => {\n        setState('entering');\n        callbacksRef.current.onEntering?.();\n\n        waitForTransition('enter', () => {\n          setState('entered');\n          callbacksRef.current.onEntered?.();\n        });\n      });\n    }\n  }, [state]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Continue the exit animation after DOM reflects exit state\n  useLayoutEffect(() => {\n    if (state === 'exit') {\n      callbacksRef.current.onExit?.();\n\n      rafRef.current = requestAnimationFrame(() => {\n        setState('exiting');\n        callbacksRef.current.onExiting?.();\n\n        waitForTransition('exit', () => {\n          setState((prev) => {\n            if (prev === 'exiting') {\n              callbacksRef.current.onExited?.();\n              return unmountOnExit ? 'unmounted' : 'exited';\n            }\n            return prev;\n          });\n        });\n      });\n    }\n  }, [state]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // React to `in` prop changes — only set the initial phase state.\n  // The useLayoutEffect above handles the rest after DOM commit.\n  useEffect(() => {\n    if (initialMountRef.current) {\n      initialMountRef.current = false;\n      // On initial mount with appear=true, state is already 'enter' from getInitialState,\n      // and the useLayoutEffect above will pick it up.\n      return;\n    }\n\n    if (inProp) {\n      cleanup();\n      setState('enter');\n    } else {\n      cleanup();\n      setState('exit');\n    }\n  }, [inProp]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return cleanup;\n  }, [cleanup]);\n\n  const shouldMount = state !== 'unmounted';\n\n  return { state, shouldMount };\n}\n\nexport default useTransition;\n"],"mappings":"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"}