chore: 🤖 replace react dom server render to static markup by create root

[punkbit]

Why?

The following PR removes react-dom/server renderToStaticMarkup from copy grid elements of Grid to favour the recommended createRoot approach suggested by React's official documentation, because react dom's server version is not recommended by react themselves and shouldn't be surfacing publicly in the context of a component library.

According to React renderToStaticMarkup "The renderToStaticMarkup works in the browser, but using it in the client code is not recommended. If you need to render a component to HTML in the browser" and React renderToString "Importing react-dom/server on the client unnecessarily increases your bundle size and should be avoided. If you need to render some component to HTML in the browser, use createRoot and read HTML from the DOM".

How?

• Adapted the react documented snippted locally

Preview?

Screen.Recording.2026-03-12.at.16.13.03.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: 97d804b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clickhouse/click-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Claude finished @punkbit's task in 1m 7s —— View job

---

PR Review

Good change! Removing react-dom/server from client-side code reduces bundle size and follows React's official guidance. The createRoot + flushSync pattern used here matches exactly what the React docs recommend for rendering to static HTML in the browser.

• Gather context
• Review changed files
• Post findings

---

🚨 Must Fix

• Changeset type: The changeset is marked as minor but this is a purely internal refactor with no public API changes. It should be patch to avoid an unwarranted minor version bump.
  Fix this →

💡 Suggestions (non-blocking)

• Performance (copyGridElements.ts:24): A new React root is created and unmounted for every single cell in the selection. For large copy operations this means potentially hundreds of createRoot/flushSync/unmount cycles, which is heavier than the old synchronous renderToStaticMarkup. This was the trade-off accepted by following React's guidance, but worth documenting or profiling with large datasets.

• container never attached to the DOM: createRoot on a detached node is fine per React docs (the flushSync ensures synchronous render), but React may log a warning in some versions. This is fine as-is.

[workflow-authentication-public]

📚 Storybook Preview Deployed

✅ Preview URL: https://click-m42xretyr-clickhouse.vercel.app

Built from commit: aedb947a36d2929b8051f3dd35070e6a101727ed