@tiny-design/react 1.1.2 → 1.3.0

package/es/waterfall/hooks/use-positions.js

@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+//#region src/waterfall/hooks/use-positions.ts
+function usePositions(itemHeights, columnCount, verticalGutter) {
+	return useMemo(() => {
+		const columnHeights = new Array(columnCount).fill(0);
+		const positions = /* @__PURE__ */ new Map();
+		for (let i = 0; i < itemHeights.length; i += 1) {
+			const [itemKey, itemHeight, itemColumn] = itemHeights[i];
+			let targetColumn = itemColumn ?? columnHeights.indexOf(Math.min(...columnHeights));
+			targetColumn = Math.min(targetColumn, columnCount - 1);
+			const top = columnHeights[targetColumn];
+			positions.set(itemKey, {
+				column: targetColumn,
+				top
+			});
+			columnHeights[targetColumn] += itemHeight + verticalGutter;
+		}
+		return [positions, Math.max(0, Math.max(...columnHeights) - verticalGutter)];
+	}, [
+		columnCount,
+		itemHeights,
+		verticalGutter
+	]);
+}
+//#endregion
+export { usePositions as default };
+
+//# sourceMappingURL=use-positions.js.map

package/es/waterfall/hooks/use-positions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-positions.js","names":[],"sources":["../../../src/waterfall/hooks/use-positions.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nexport type ItemHeightData = [key: React.Key, height: number, column?: number];\n\nexport type ItemPositions = Map<\n  React.Key,\n  {\n    column: number;\n    top: number;\n  }\n>;\n\nexport default function usePositions(\n  itemHeights: ItemHeightData[],\n  columnCount: number,\n  verticalGutter: number,\n): [ItemPositions, number] {\n  return useMemo(() => {\n    const columnHeights = new Array(columnCount).fill(0) as number[];\n    const positions: ItemPositions = new Map();\n\n    for (let i = 0; i < itemHeights.length; i += 1) {\n      const [itemKey, itemHeight, itemColumn] = itemHeights[i];\n\n      let targetColumn = itemColumn ?? columnHeights.indexOf(Math.min(...columnHeights));\n      targetColumn = Math.min(targetColumn, columnCount - 1);\n\n      const top = columnHeights[targetColumn];\n      positions.set(itemKey, { column: targetColumn, top });\n\n      columnHeights[targetColumn] += itemHeight + verticalGutter;\n    }\n\n    const totalHeight = Math.max(0, Math.max(...columnHeights) - verticalGutter);\n    return [positions, totalHeight];\n  }, [columnCount, itemHeights, verticalGutter]);\n}\n"],"mappings":";;AAYA,SAAwB,aACtB,aACA,aACA,gBACyB;AACzB,QAAO,cAAc;EACnB,MAAM,gBAAgB,IAAI,MAAM,YAAY,CAAC,KAAK,EAAE;EACpD,MAAM,4BAA2B,IAAI,KAAK;AAE1C,OAAK,IAAI,IAAI,GAAG,IAAI,YAAY,QAAQ,KAAK,GAAG;GAC9C,MAAM,CAAC,SAAS,YAAY,cAAc,YAAY;GAEtD,IAAI,eAAe,cAAc,cAAc,QAAQ,KAAK,IAAI,GAAG,cAAc,CAAC;AAClF,kBAAe,KAAK,IAAI,cAAc,cAAc,EAAE;GAEtD,MAAM,MAAM,cAAc;AAC1B,aAAU,IAAI,SAAS;IAAE,QAAQ;IAAc;IAAK,CAAC;AAErD,iBAAc,iBAAiB,aAAa;;AAI9C,SAAO,CAAC,WADY,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,cAAc,GAAG,eAAe,CAC7C;IAC9B;EAAC;EAAa;EAAa;EAAe,CAAC"}

package/es/waterfall/index.d.ts

@@ -0,0 +1,2 @@
+import { Breakpoint, WaterfallItem, WaterfallProps } from "./types.js";
+import { Waterfall } from "./waterfall.js";

package/es/waterfall/index.js

@@ -0,0 +1,9 @@
+import '../style/base.css';
+import './style/index.css';
+import Waterfall from "./waterfall.js";
+//#region src/waterfall/index.tsx
+var waterfall_default = Waterfall;
+//#endregion
+export { waterfall_default as default };
+
+//# sourceMappingURL=index.js.map

package/es/waterfall/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/waterfall/index.tsx"],"sourcesContent":["import Waterfall from './waterfall';\n\nexport type { WaterfallProps, WaterfallItem, Breakpoint } from './types';\n\nexport default Waterfall;\n"],"mappings":";;AAIA,IAAA,oBAAe"}

package/es/waterfall/style/_index.scss

@@ -0,0 +1,22 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-waterfall {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+
+  &__item {
+    position: absolute;
+    box-sizing: border-box;
+  }
+
+  // Exit animation
+  &__item-fade-exit {
+    opacity: 1;
+  }
+
+  &__item-fade-exit-active {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+}

package/es/waterfall/style/index.css

@@ -0,0 +1,16 @@
+.ty-waterfall {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.ty-waterfall__item {
+  position: absolute;
+  box-sizing: border-box;
+}
+.ty-waterfall__item-fade-exit {
+  opacity: 1;
+}
+.ty-waterfall__item-fade-exit-active {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}

package/es/waterfall/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/es/waterfall/style/index.js

@@ -0,0 +1 @@
+import "./_index.css";

package/es/waterfall/types.d.ts

@@ -0,0 +1,35 @@
+import { BaseProps } from "../_utils/props.js";
+import React, { ReactNode } from "react";
+
+//#region src/waterfall/types.d.ts
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+interface WaterfallItem<T = any> {
+  key: React.Key;
+  /** Pin this item to a specific column index */
+  column?: number;
+  /** Direct content — takes priority over itemRender */
+  children?: ReactNode;
+  /** Custom data passed to itemRender */
+  data?: T;
+}
+interface WaterfallProps<T = any> extends BaseProps, Omit<React.PropsWithRef<JSX.IntrinsicElements['div']>, 'children'> {
+  /** Number of columns, or responsive breakpoint config. Default: 3 */
+  columns?: number | Partial<Record<Breakpoint, number>>;
+  /** Spacing between items: number or [horizontal, vertical] */
+  gutter?: number | [number, number];
+  /** Array of items to render */
+  items?: WaterfallItem<T>[];
+  /** Custom render function for each item */
+  itemRender?: (item: WaterfallItem<T> & {
+    index: number;
+    column: number;
+  }) => ReactNode;
+  /** Callback when layout order changes */
+  onLayoutChange?: (sortInfo: {
+    key: React.Key;
+    column: number;
+  }[]) => void;
+}
+//#endregion
+export { Breakpoint, WaterfallItem, WaterfallProps };
+//# sourceMappingURL=types.d.ts.map

package/es/waterfall/waterfall.d.ts

@@ -0,0 +1,8 @@
+import { WaterfallProps } from "./types.js";
+import React from "react";
+
+//#region src/waterfall/waterfall.d.ts
+declare const Waterfall: React.ForwardRefExoticComponent<Omit<WaterfallProps<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Waterfall };
+//# sourceMappingURL=waterfall.d.ts.map

package/es/waterfall/waterfall.js

@@ -0,0 +1,151 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import transition_default from "../transition/index.js";
+import useBreakpoint, { responsiveArray } from "./hooks/use-breakpoint.js";
+import usePositions from "./hooks/use-positions.js";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/waterfall/waterfall.tsx
+const Waterfall = React.forwardRef((props, ref) => {
+	const { prefixCls: customisedCls, className, style, columns = 3, gutter = 0, items, itemRender, onLayoutChange, ...otherProps } = props;
+	const prefixCls = getPrefixCls("waterfall", useContext(ConfigContext).prefixCls, customisedCls);
+	const screens = useBreakpoint();
+	const columnCount = React.useMemo(() => {
+		if (typeof columns === "number") return columns;
+		const matchingBreakpoint = responsiveArray.find((bp) => screens[bp] && columns[bp] !== void 0);
+		if (matchingBreakpoint) return columns[matchingBreakpoint];
+		return columns.xs ?? 1;
+	}, [columns, screens]);
+	const [horizontalGutter, verticalGutter] = Array.isArray(gutter) ? gutter : [gutter, gutter];
+	const itemRefsMap = useRef(/* @__PURE__ */ new Map());
+	const setItemRef = useCallback((key, el) => {
+		itemRefsMap.current.set(key, el);
+	}, []);
+	const [itemHeights, setItemHeights] = useState([]);
+	const collectItemSizes = useCallback(() => {
+		if (!items || items.length === 0) {
+			setItemHeights([]);
+			return;
+		}
+		const nextHeights = items.map((item, index) => {
+			const key = item.key ?? index;
+			const el = itemRefsMap.current.get(key);
+			return [
+				key,
+				el ? el.getBoundingClientRect().height : 0,
+				item.column
+			];
+		});
+		setItemHeights((prev) => {
+			return prev.length === nextHeights.length && prev.every((p, i) => p[0] === nextHeights[i][0] && p[1] === nextHeights[i][1]) ? prev : nextHeights;
+		});
+	}, [items]);
+	const [itemPositions, totalHeight] = usePositions(itemHeights, columnCount, verticalGutter);
+	useEffect(() => {
+		collectItemSizes();
+	}, [
+		items,
+		columnCount,
+		collectItemSizes
+	]);
+	useEffect(() => {
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			collectItemSizes();
+		});
+		for (const [, el] of itemRefsMap.current) if (el) observer.observe(el);
+		return () => observer.disconnect();
+	}, [items, collectItemSizes]);
+	useEffect(() => {
+		if (!onLayoutChange || !items || items.length === 0) return;
+		if (!items.every((item) => itemPositions.has(item.key))) return;
+		onLayoutChange(items.map((item) => ({
+			key: item.key,
+			column: itemPositions.get(item.key).column
+		})));
+	}, [
+		itemPositions,
+		items,
+		onLayoutChange
+	]);
+	const prevItemsRef = useRef(items || []);
+	const [exitingItems, setExitingItems] = useState(/* @__PURE__ */ new Map());
+	useEffect(() => {
+		const currentKeys = new Set((items || []).map((item, i) => item.key ?? i));
+		const removed = /* @__PURE__ */ new Map();
+		prevItemsRef.current.forEach((item, index) => {
+			const key = item.key ?? index;
+			if (!currentKeys.has(key)) removed.set(key, item);
+		});
+		if (removed.size > 0) setExitingItems((prev) => {
+			const next = new Map(prev);
+			removed.forEach((item, key) => next.set(key, item));
+			return next;
+		});
+		prevItemsRef.current = items || [];
+	}, [items]);
+	const handleExited = useCallback((key) => {
+		itemRefsMap.current.delete(key);
+		setExitingItems((prev) => {
+			const next = new Map(prev);
+			next.delete(key);
+			return next;
+		});
+		collectItemSizes();
+	}, [collectItemSizes]);
+	const cls = classNames(prefixCls, className);
+	const containerStyle = {
+		...style,
+		position: "relative",
+		height: totalHeight || void 0
+	};
+	const mergedItems = items || [];
+	const renderItem = (item, index, isExiting) => {
+		const key = item.key ?? index;
+		const position = itemPositions.get(key);
+		const hasPosition = !!position;
+		const columnIndex = position?.column ?? 0;
+		const itemStyle = {
+			position: "absolute",
+			width: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount})`,
+			left: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount} * ${columnIndex} + ${horizontalGutter * columnIndex}px)`,
+			top: position?.top ?? 0,
+			transition: hasPosition ? "top 0.3s ease, left 0.3s ease, opacity 0.3s ease" : "none",
+			opacity: hasPosition ? 1 : 0
+		};
+		const content = item.children ?? itemRender?.({
+			...item,
+			index,
+			column: columnIndex
+		});
+		return /* @__PURE__ */ jsx(transition_default, {
+			in: !isExiting,
+			timeout: 300,
+			appear: false,
+			unmountOnExit: true,
+			classNames: `${prefixCls}__item-fade`,
+			onExited: () => handleExited(key),
+			children: /* @__PURE__ */ jsx("div", {
+				ref: (el) => setItemRef(key, el),
+				className: `${prefixCls}__item`,
+				style: itemStyle,
+				children: content
+			})
+		}, key);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...otherProps,
+		className: cls,
+		style: containerStyle,
+		onLoad: collectItemSizes,
+		onError: collectItemSizes,
+		children: [mergedItems.map((item, index) => renderItem(item, index, false)), Array.from(exitingItems.entries()).map(([key, item]) => renderItem(item, Number(key), true))]
+	});
+});
+Waterfall.displayName = "Waterfall";
+//#endregion
+export { Waterfall as default };
+
+//# sourceMappingURL=waterfall.js.map

package/es/waterfall/waterfall.js.map

@@ -0,0 +1 @@
+{"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/index.d.ts

@@ -80,10 +80,11 @@ import { Transition } from "./transition/transition.js";
 import { Tree } from "./tree/tree.js";
 import { DefaultTypo } from "./typography/index.js";
 import { Upload } from "./upload/upload.js";
+import { Waterfall } from "./waterfall/waterfall.js";
 import { withLocale } from "./intl-provider/with-locale.js";
 import { withSpin } from "./with-spin/with-spin.js";
 import { en_US } from "./locale/en_US.js";
 import { zh_CN } from "./locale/zh_CN.js";
 import { useLocale } from "./_utils/use-locale.js";
 import { ThemeMode, useTheme } from "./_utils/use-theme.js";
-export { Alert, DefaultAnchor as Anchor, AspectRatio, AutoComplete, DefaultAvatar as Avatar, BackTop, Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, Calendar, DefaultCard as Card, DefaultCarousel as Carousel, Cascader, DefaultCheckbox as Checkbox, Col, DefaultCollapse as Collapse, ColorPicker, ConfigProvider, CopyToClipboard, Countdown, DatePicker, DefaultDesc as Descriptions, Divider, Drawer, Dropdown, Empty, Flex, DefaultFlip as Flip, DefaultForm as Form, Image, DefaultInput as Input, InputNumber, InputOTP, InputPassword, IntlProvider, Keyboard, DefaultLayout as Layout, Link, DefaultList as List, Loader, _default as LoadingBar, type Locale, DefaultMenu as Menu, messageContainer as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notificationContainer as Notification, Overlay, Pagination, PopConfirm, Popover, Progress, DefaultRadio as Radio, Rate, Result, Row, ScrollIndicator, Segmented, DefaultSelect$1 as Select, Skeleton, Slider, Space, DefaultSpeedDial as SpeedDial, Split, SplitButton, Statistic, DefaultSteps as Steps, Sticky, StrengthIndicator, Switch, Table, DefaultTabs as Tabs, DefaultTag as Tag, Textarea, type ThemeMode, TimePicker, DefaultTimeline as Timeline, Tooltip, Transfer, Transition, Tree, DefaultTypo as Typography, Upload, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };
+export { Alert, DefaultAnchor as Anchor, AspectRatio, AutoComplete, DefaultAvatar as Avatar, BackTop, Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, Calendar, DefaultCard as Card, DefaultCarousel as Carousel, Cascader, DefaultCheckbox as Checkbox, Col, DefaultCollapse as Collapse, ColorPicker, ConfigProvider, CopyToClipboard, Countdown, DatePicker, DefaultDesc as Descriptions, Divider, Drawer, Dropdown, Empty, Flex, DefaultFlip as Flip, DefaultForm as Form, Image, DefaultInput as Input, InputNumber, InputOTP, InputPassword, IntlProvider, Keyboard, DefaultLayout as Layout, Link, DefaultList as List, Loader, _default as LoadingBar, type Locale, DefaultMenu as Menu, messageContainer as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notificationContainer as Notification, Overlay, Pagination, PopConfirm, Popover, Progress, DefaultRadio as Radio, Rate, Result, Row, ScrollIndicator, Segmented, DefaultSelect$1 as Select, Skeleton, Slider, Space, DefaultSpeedDial as SpeedDial, Split, SplitButton, Statistic, DefaultSteps as Steps, Sticky, StrengthIndicator, Switch, Table, DefaultTabs as Tabs, DefaultTag as Tag, Textarea, type ThemeMode, TimePicker, DefaultTimeline as Timeline, Tooltip, Transfer, Transition, Tree, DefaultTypo as Typography, Upload, Waterfall, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };

package/lib/index.js

@@ -83,6 +83,7 @@ const require_index$77 = require("./transfer/index.js");
 const require_index$78 = require("./tree/index.js");
 const require_index$79 = require("./typography/index.js");
 const require_index$80 = require("./upload/index.js");
+const require_index$81 = require("./waterfall/index.js");
 const require_with_locale = require("./intl-provider/with-locale.js");
 const require_with_spin = require("./with-spin/with-spin.js");
 const require_zh_CN = require("./locale/zh_CN.js");
@@ -168,6 +169,7 @@ exports.Transition = require_index;
 exports.Tree = require_index$78;
 exports.Typography = require_index$79;
 exports.Upload = require_index$80;
+exports.Waterfall = require_index$81;
 exports.en_US = require_en_US;
 exports.useLocale = require_use_locale.useLocale;
 exports.useTheme = require_use_theme.useTheme;

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