fix(common): Support both resize observer export shapes

[minwookshin]

Summary

Fixes #4190 using the compatibility approach proposed in the issue. Resolve either the v9 default export or the v10 named export through a namespace helper, and keep the public hook declaration independent of the installed dependency.

The dependency stays at ^9.1.0, preserving React 17 support. Consumers on React 19 still need to override/resolution-pin use-resize-observer to v10; this removes the additional source patch.

Release Category

Components

Release Note

The useResizeObserver export now accepts either v9 or v10 of the underlying package. Overriding to v10 retains that version's behavior, including reporting a measured zero as 0.

Checklist

• No MDX documentation changes
• Label ready for review has been added to PR

For the Reviewer

• PR title and summary describe the change and link the issue
• Release note explains the opt-in behavior; no dependency or React peer range change

Where Should the Reviewer Start?

modules/react/common/lib/utils/useResizeObserver.ts. The structural ref type accepts the nullable refs used by React 17, 18 and 19 without tying declarations to either dependency version.

Testing Manually

Tested isolated installations of React 17.0.2/v9.1.0, React 18.3.1/v9.1.0, React 18.3.1/v10.0.0 and React 19.2.0/v10.0.0. Both webpack and esbuild build without missing-export warnings; the original wrapper produces that warning with v10.

Browser checks cover initial size, resizing, rounding, callback refs/object refs, zero size and unmount. All four combinations pass in Chromium; React 19/v10 also passes in Firefox and WebKit. Strict declaration checks, three export-shape unit tests, repository source/spec/type checks and scoped ESLint pass.

Summary by CodeRabbit

• Bug Fixes

  • Improved compatibility with both named and default exports of the resize observer hook, preferring the named export when both are available.

• Tests

  • Added coverage for supported export formats and export selection.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: Workday/canvas-kit/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: 5c2c8e0a-625f-411c-9864-a1092a3a60c0

📥 Commits

Reviewing files that changed from the base of the PR and between e552df4 and d1b231b.

📒 Files selected for processing (2)

• modules/react/common/lib/utils/useResizeObserver.ts
• modules/react/common/spec/useResizeObserver.spec.ts

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 1 remain after this review.

---

📝 Walkthrough

Walkthrough

The useResizeObserver wrapper resolves the hook from the dependency’s named or default export, preferring the named export. Tests cover both export shapes, option forwarding, and named-export precedence.

Changes

useResizeObserver Export Compatibility

Layer / File(s)	Summary
Hook export resolution and tests modules/react/common/lib/utils/useResizeObserver.ts, modules/react/common/spec/useResizeObserver.spec.ts	The wrapper defines a local hook type and selects the named export before falling back to the default export. Tests verify both export shapes, option forwarding, and named-export precedence.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Suggested reviewers: alanbsmith

Merge Risk: ⚪ Minimal · up to d1b23

The supported dependency and build paths have no identified compatibility failure. This change is mergeable after normal checks.

Security Architecture Review

Security architecture risk: ⚪ Minimal · up to d1b23

The compatibility adapter preserves the existing package boundary and does not give callers new authority or control over dependency selection. No material security risk was identified in the changed behavior.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — The demonstrated exposure is the existing in-process React hook and its UI measurement consumers. The changed adapter supplies no new mechanism for reaching a privileged service, tenant resource, credential store, or persistent data store.

Trust Boundaries and Controls

• inferred — Compared with the base, accepting a named export does not transfer dependency-resolution authority to hook callers. The dependency remains trusted executable package code, while refs and callbacks remain caller-owned inputs within the existing API boundary.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: support for both resize-observer export shapes.
Linked Issues check	✅ Passed	Issue [#4190] asks useResizeObserver to support the v10 named export for React 19. useResizeObserver.ts resolves the named export first and falls back to the v9 default export. The new tests cover…
Out of Scope Changes check	✅ Passed	The changes are limited to the useResizeObserver utility and its tests. The export-shape tests and local public hook type support the compatibility change for issue [#4190]. No unrelated changes app…
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 2 files.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

modules/react/common/lib/utils/useResizeObserver.ts

(node:2) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///eslint.config.js?mtime=1791216040873 is not specified and it doesn't parse as CommonJS.
Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
To eliminate this warning, add "type": "module" to /package.json.
(Use node --trace-warnings ... to show where the warning was created)

Oops! Something went wrong! :(

ESLint: 10.12.0

TypeError: scopeManager.addGlobals is not a function
at addDeclaredGlobals (/.eslint-tmp/modules/react/node_modules/eslint/lib/languages/js/source-code/source-code.js:261:15)
at SourceCode.finalize (/.eslint-tmp/modules/react/node_modules/eslint/lib/languages/js/source-code/source-code.js:1136:3)
at #flatVerifyWithoutProcessors (/.eslint-tmp/modules/react/node_modules/eslint/lib/linter/linter.js:1294:24)
at Linter._verifyWithFlatConfigArrayAndWithoutProcessors (/.eslint-tmp/modules/react/node_modules/eslint/lib/linter/linter.js:1382:43)
at Linter._verifyWithFlatConfigArray (/.eslint-tmp/modules/react/node_modules/eslint/lib/linter/linter.js:1449:15)
at Linter.verify (/.eslint-tmp/modules/react/node_modules/eslint/lib/linter/linter.js:894:9)
at Linter.verifyAndFix (/.eslint-tmp/modules/react/node_modules/eslint/lib/linter/linter.js:1569:20)
at verifyText (/.eslint-tmp/modules/react/node_modules/eslint/lib/eslint/eslint-helpers.js:1155:45)
at readAndVerifyFile (/.eslint-tmp/modules/react/node_modules/eslint/lib/eslint/eslint-helpers.js:1299:10)

modules/react/common/spec/useResizeObserver.spec.ts

ESLint skipped: the matched ESLint configuration already failed (plugin-compatibility).

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}