React 19.2

demo/package.json

@@ -7,13 +7,13 @@
     "dev": "pnpm dev:spa",
     "dev:local": "pnpm install --link-workspace-packages && pnpm dev",
     "dev:published": "pnpm install --no-link-workspace-packages && pnpm dev",
-    "build": "tsc -b && pnpm build:ssr",
+    "build": "tsc -b && pnpm build:spa",
     "lint": "eslint .",
     "dev:ssr": "VITE_APP_MODE=ssr vike dev",
     "dev:spa": "VITE_APP_MODE=spa vike dev",
     "build:ssr": "VITE_APP_MODE=ssr vike build",
-    "build:spa": "VITE_APP_MODE=spa vike build",
-    "preview": "vike preview",
+    "build:spa": "VITE_APP_MODE=spa vite build",
+    "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },

demo/src/App.tsx

@@ -1,15 +1,16 @@
 import "@radix-ui/themes/styles.css";
 import { Theme } from "@radix-ui/themes";
-import { CustomOverflowExample } from "./examples/CustomOverflowExample";
-import { BasicExample } from "./examples/BasicExample";
-import { ChildrenPatternExample } from "./examples/ChildrenPatternExample";
-import { MultiRowExample } from "./examples/MultiRowExample";
-import { CustomHostElementExample } from "./examples/CustomHostElementExample";
-import { RadixVirtualizationExample } from "./examples/RadixVirtualizationExample";
-import { FlushImmediatelyExample } from "./examples/FlushImmediatelyExample";
-import { OneItemWiderExample } from "./examples/OneItemWiderExample";
-import { ReverseOrderExample } from "./examples/ReverseOrderExample";
-import { DynamicSizeExample } from "./examples/DynamicSizeExample";
+// import { CustomOverflowExample } from "./examples/CustomOverflowExample";
+// import { BasicExample } from "./examples/BasicExample";
+// import { ChildrenPatternExample } from "./examples/ChildrenPatternExample";
+// import { MultiRowExample } from "./examples/MultiRowExample";
+// import { CustomHostElementExample } from "./examples/CustomHostElementExample";
+// import { RadixVirtualizationExample } from "./examples/RadixVirtualizationExample";
+// import { FlushImmediatelyExample } from "./examples/FlushImmediatelyExample";
+// import { OneItemWiderExample } from "./examples/OneItemWiderExample";
+// import { ReverseOrderExample } from "./examples/ReverseOrderExample";
+// import { DynamicSizeExample } from "./examples/DynamicSizeExample";
+import { ShrinkingContainerExample } from "./examples/ShrinkingContainerExample";
 import { Github } from "lucide-react";
 import "./App.css";
 
@@ -42,7 +43,8 @@ function App() {
         </header>
 
         <main>
-          <BasicExample />
+          <ShrinkingContainerExample />
+          {/* <BasicExample />
           <ChildrenPatternExample />
           <MultiRowExample />
           <CustomOverflowExample />
@@ -51,7 +53,7 @@ function App() {
           <FlushImmediatelyExample />
           <OneItemWiderExample />
           <ReverseOrderExample />
-          <DynamicSizeExample />
+          <DynamicSizeExample /> */}
         </main>
 
         <footer>

demo/src/examples/ShrinkingContainerExample.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { OverflowList } from "react-responsive-overflow-list";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape", "Honeydew"];
+
+const codeSample = `const [isNarrow, setIsNarrow] = useState(false);
+
+<div style={{ width: isNarrow ? "250px" : "100%" }}>
+  <OverflowList
+    items={fruits}
+    renderItem={(item, index) => (
+      <span key={index} className="fruit-item">
+        {item}
+      </span>
+    )}
+    style={{ gap: "8px" }}
+  />
+</div>
+
+<button onClick={() => setIsNarrow(!isNarrow)}>
+  {isNarrow ? "Expand" : "Shrink"} Container
+</button>`;
+
+export function ShrinkingContainerExample() {
+  const [isNarrow, setIsNarrow] = useState(false);
+
+  return (
+    <section className="demo">
+      <h2 id="shrinking-container-example">Shrinking Container</h2>
+      <p>
+        Click the button to shrink the container width and see how items automatically overflow when space becomes
+        limited. The list seamlessly adapts when the container expands back to full width.
+      </p>
+
+      <div className="code-preview">
+        <SyntaxHighlighter language="tsx" style={tomorrow}>
+          {codeSample}
+        </SyntaxHighlighter>
+      </div>
+
+      <div className="demo-container">
+        <div
+          style={{
+            width: isNarrow ? "250px" : "100%",
+            // transition: "width 0.3s ease",
+            padding: "12px",
+            border: "2px dashed #ccc",
+            borderRadius: "8px",
+            marginBottom: "12px",
+          }}
+        >
+          <OverflowList
+            items={fruits}
+            renderItem={(item, index) => (
+              <span key={index} className="fruit-item">
+                {item}
+              </span>
+            )}
+            style={{ gap: "8px" }}
+          />
+        </div>
+        <button
+          onClick={() => setIsNarrow(!isNarrow)}
+          style={{
+            padding: "8px 16px",
+            fontSize: "14px",
+            fontWeight: "500",
+            backgroundColor: "#0366d6",
+            color: "white",
+            border: "none",
+            borderRadius: "6px",
+            cursor: "pointer",
+            transition: "background-color 0.2s",
+          }}
+          onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "#0256c5")}
+          onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "#0366d6")}
+        >
+          {isNarrow ? "Expand" : "Shrink"} Container
+        </button>
+        <div className="demo-note" style={{ marginTop: "12px" }}>
+          <strong>Current width:</strong> {isNarrow ? "250px (narrow)" : "100% (full)"}
+        </div>
+      </div>
+    </section>
+  );
+}

demo/vite.config.ts

@@ -21,5 +21,9 @@ export default defineConfig(() => {
       // external: ["react-copy-to-clipboard"],
     },
     base,
+    build: {
+      sourcemap: true,
+      minify: false,
+    },
   };
 });

pnpm-workspace.yaml

@@ -12,7 +12,7 @@ onlyBuiltDependencies:
   - puppeteer
 
 catalog:
-  react: ^19.2.0
-  "react-dom": ^19.2.0
-  "@types/react": ^19.2.0
-  "@types/react-dom": ^19.2.0
+  react: ~19.2.0
+  "react-dom": ~19.2.0
+  "@types/react": ~19.2.0
+  "@types/react-dom": ~19.2.0

src/components/OverflowList.tsx

@@ -230,17 +230,6 @@ const OverflowListComponent = React.memo(
     const finalRenderItemVisibility =
       renderItemVisibility ??
       ((node, meta) => {
-        // prefer react 19.2 new activity component to control the visibility of the item while don't forcing mount/unmount of the item
-        const Activity = React?.Activity;
-        if (Activity) {
-          return (
-            <Activity key={meta.index} mode={meta.visible ? "visible" : "hidden"}>
-              {node}
-            </Activity>
-          );
-        }
-
-        // below react 19.2, simply return null if the item is not visible
         if (!meta.visible) return null;
         return <React.Fragment key={meta.index}>{node}</React.Fragment>;
       });