@tiny-design/react 1.2.0 → 1.3.0

package/lib/waterfall/waterfall.js

@@ -1,6 +1,7 @@
 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_use_breakpoint = require("./hooks/use-breakpoint.js");
 const require_use_positions = require("./hooks/use-positions.js");
 let react = require("react");
@@ -8,7 +9,6 @@ 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/waterfall/waterfall.tsx
 const Waterfall = react.default.forwardRef((props, ref) => {
 	const { prefixCls: customisedCls, className, style, columns = 3, gutter = 0, items, itemRender, onLayoutChange, ...otherProps } = props;
@@ -72,6 +72,31 @@ const Waterfall = react.default.forwardRef((props, ref) => {
 		items,
 		onLayoutChange
 	]);
+	const prevItemsRef = (0, react.useRef)(items || []);
+	const [exitingItems, setExitingItems] = (0, react.useState)(/* @__PURE__ */ new Map());
+	(0, react.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 = (0, react.useCallback)((key) => {
+		itemRefsMap.current.delete(key);
+		setExitingItems((prev) => {
+			const next = new Map(prev);
+			next.delete(key);
+			return next;
+		});
+		collectItemSizes();
+	}, [collectItemSizes]);
 	const cls = (0, classnames.default)(prefixCls, className);
 	const containerStyle = {
 		...style,
@@ -79,49 +104,47 @@ const Waterfall = react.default.forwardRef((props, ref) => {
 		height: totalHeight || void 0
 	};
 	const mergedItems = items || [];
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	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__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+			in: !isExiting,
+			timeout: 300,
+			appear: false,
+			unmountOnExit: true,
+			classNames: `${prefixCls}__item-fade`,
+			onExited: () => handleExited(key),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: (el) => setItemRef(key, el),
+				className: `${prefixCls}__item`,
+				style: itemStyle,
+				children: content
+			})
+		}, key);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref,
 		...otherProps,
 		className: cls,
 		style: containerStyle,
 		onLoad: collectItemSizes,
 		onError: collectItemSizes,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.TransitionGroup, {
-			component: null,
-			children: mergedItems.map((item, index) => {
-				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__ */ (0, react_jsx_runtime.jsx)(react_transition_group.CSSTransition, {
-					timeout: 300,
-					classNames: `${prefixCls}__item-fade`,
-					onExited: () => {
-						itemRefsMap.current.delete(key);
-						collectItemSizes();
-					},
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						ref: (el) => setItemRef(key, el),
-						className: `${prefixCls}__item`,
-						style: itemStyle,
-						children: content
-					})
-				}, key);
-			})
-		})
+		children: [mergedItems.map((item, index) => renderItem(item, index, false)), Array.from(exitingItems.entries()).map(([key, item]) => renderItem(item, Number(key), true))]
 	});
 });
 Waterfall.displayName = "Waterfall";

package/lib/waterfall/waterfall.js.map

@@ -1 +1 @@
-{"version":3,"file":"waterfall.js","names":["React","getPrefixCls","ConfigContext","useBreakpoint","responsiveArray","usePositions","TransitionGroup","CSSTransition"],"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":["React","getPrefixCls","ConfigContext","useBreakpoint","responsiveArray","usePositions","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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiny-design/react",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A friendly UI component set for React",
   "license": "MIT",
   "keywords": [
@@ -53,10 +53,9 @@
   "dependencies": {
     "@popperjs/core": "^2.11.4",
     "classnames": "^2.3.1",
-    "react-transition-group": "^4.4.2",
     "tslib": "^2.3.1",
-    "@tiny-design/icons": "1.2.0",
-    "@tiny-design/tokens": "1.2.0"
+    "@tiny-design/icons": "1.3.0",
+    "@tiny-design/tokens": "1.3.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.0.0",
@@ -64,7 +63,6 @@
     "@types/jest": "^29.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@types/react-transition-group": "^4.4.4",
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.0.0",
     "autoprefixer": "^10.4.4",