Skip to content

fix(use-size): map logical observer dimensions to physical size - #4260

Open
charan-rathore wants to merge 1 commit into
radix-ui:mainfrom
charan-rathore:fix/use-size-physical-observer-axes
Open

charan-rathore wants to merge 1 commit into
radix-ui:mainfrom
charan-rathore:fix/use-size-physical-observer-axes

Conversation

@charan-rathore

Copy link
Copy Markdown

Description

ResizeObserver reports inlineSize and blockSize on logical axes. useSize currently treats them as physical width and height, which swaps dimensions in vertical and sideways writing modes.

Read the element's writing mode when the observer entry arrives and keep it paired with that entry until the scheduled frame runs. Swap the logical axes for vertical and sideways modes. Keep the offset-dimension fallback unchanged, without a computed-style read. Add regression tests and a patch changeset.

Validation: four regressions fail against the original implementation, with 13 controls passing. The affected six suites pass 178 tests with the fix. Package types, lint, ESM/CJS builds, declarations and changed-file formatting pass. In a browser reproduction using the actual Checkbox consumer, a 240x80 Checkbox's hidden input changes from 80x240 before to 240x80 after.

The full monorepo run is not green: collection/import failures and one missing-workspace RSC import remain. Storybook/E2E and full monorepo build/types/lint were not run. This adds a computed-style read for border-box notifications; it is not a performance-equivalence claim. The change does not add iframe-realm or multi-fragment handling.

@changeset-bot

changeset-bot Bot commented Oct 29, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 5258d9b

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

This PR includes changesets to release 15 packages
Name Type
@radix-ui/react-use-size Patch
@radix-ui/react-checkbox Patch
@radix-ui/react-popper Patch
@radix-ui/react-radio-group Patch
radix-ui Patch
@radix-ui/react-slider Patch
@radix-ui/react-switch Patch
@radix-ui/react-hover-card Patch
@radix-ui/react-menu Patch
@radix-ui/react-popover Patch
@radix-ui/react-select Patch
@radix-ui/react-tooltip Patch
@radix-ui/react-context-menu Patch
@radix-ui/react-dropdown-menu Patch
@radix-ui/react-menubar Patch

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

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant