fix(react-table): treat React elements as atomic values in mergeProps

lodash's deep merge recursed into React elements passed through cell
props and transform results. With React 19 an element's owner chain is
made of plain objects instead of FiberNode instances, so the merge
walked the entire rendered tree per cell and server-side rendering of
the deprecated Table hung or ran out of memory (this also stalled the
docs prerender). Elements are now kept by reference: never spread into
plain objects and never merged into.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: SamTV12345

packages/react-table/src/components/Table/base/__tests__/merge-props.test.tsx

@@ -0,0 +1,38 @@
+import { isValidElement } from 'react';
+import { mergeProps } from '../merge-props';
+
+test('merges plain props deeply', () => {
+  const result = mergeProps({ style: { color: 'red' }, id: 'a' }, { style: { background: 'blue' } });
+
+  expect(result).toEqual({ style: { color: 'red', background: 'blue' }, id: 'a' });
+});
+
+test('merges class names into a single string', () => {
+  expect(mergeProps({ className: 'foo' }, { className: 'bar' })).toEqual({ className: 'foo bar' });
+});
+
+test('composes children when both sides provide them', () => {
+  const result = mergeProps({ children: <div id="outer" /> }, { children: <span id="inner" /> });
+
+  expect(isValidElement(result.children)).toBe(true);
+  expect(result.children.type).toBe('div');
+  expect(result.children.props.children.type).toBe('span');
+});
+
+test('keeps a lone React element child by reference instead of spreading it', () => {
+  const child = <button type="button">toggle</button>;
+  const result = mergeProps({ className: 'cell' }, { children: child });
+
+  // Spreading the element into a plain object would expose React internals
+  // (e.g. the React 19 owner chain) to lodash's deep merge and hang SSR.
+  expect(result.children).toBe(child);
+});
+
+test('treats React elements under arbitrary keys as atomic values', () => {
+  const icon = <svg data-id="first" />;
+  const replacement = <svg data-id="second" />;
+  const result = mergeProps({ title: icon }, { title: replacement });
+
+  expect(result.title).toBe(replacement);
+  expect(mergeProps({ title: icon }, { other: 1 }).title).toBe(icon);
+});

packages/react-table/src/components/Table/base/merge-props.ts

@@ -4,10 +4,46 @@
  * Forked from reactabular-table version 8.14.0
  * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src
  */
-import { cloneElement } from 'react';
+import { cloneElement, isValidElement } from 'react';
 import mergeWith from 'lodash/mergeWith';
 import { css } from '@patternfly/react-styles';
 
+const customizer = (a: any, b: any, key: any) => {
+  if (key === 'children') {
+    if (a && b) {
+      // compose the two
+      return cloneElement(a, {
+        children: b
+      });
+    }
+
+    // React elements must be kept as-is; spreading them into plain objects
+    // exposes their internals (e.g. the React 19 owner chain) to lodash's
+    // deep merge, which then walks the entire element graph.
+    if (isValidElement(a) || isValidElement(b) || a === undefined || b === undefined) {
+      return b === undefined ? a : b;
+    }
+
+    // Children have to be merged in reverse order for Reactabular
+    // logic to work.
+    return { ...b, ...a };
+  }
+
+  if (key === 'className') {
+    // Process class names through classNames to merge properly
+    // as a string.
+    return css(a, b);
+  }
+
+  // React elements are atomic values; letting lodash recurse into their
+  // internals hangs the merge under React 19.
+  if (isValidElement(a) || isValidElement(b)) {
+    return b === undefined ? a : b;
+  }
+
+  return undefined;
+};
+
 /**
  * @param {any} props - Props
  */
@@ -16,30 +52,9 @@ export function mergeProps(...props: any) {
   const restProps = props.slice(1);
 
   if (!restProps.length) {
-    return mergeWith({}, firstProps);
+    return mergeWith({}, firstProps, customizer);
   }
 
   // Avoid mutating the first prop collection
-  return mergeWith(mergeWith({}, firstProps), ...restProps, (a: any, b: any, key: any) => {
-    if (key === 'children') {
-      if (a && b) {
-        // compose the two
-        return cloneElement(a, {
-          children: b
-        });
-      }
-
-      // Children have to be merged in reverse order for Reactabular
-      // logic to work.
-      return { ...b, ...a };
-    }
-
-    if (key === 'className') {
-      // Process class names through classNames to merge properly
-      // as a string.
-      return css(a, b);
-    }
-
-    return undefined;
-  });
+  return mergeWith(mergeWith({}, firstProps, customizer), ...restProps, customizer);
 }