Extract ResponsiveValue types from useResponsiveValue hook to SSR-safe module

[Copilot]

PageLayout and SplitPageLayout imported ResponsiveValue types from hooks/useResponsiveValue, creating ambiguity about whether they use the SSR-unsafe hook. These components already follow ADR-018's CSS-based responsive pattern, never calling useResponsiveValue(), but the import structure obscured this.

Changes

Extracted SSR-safe types and utilities to dedicated module:

• Created internal/utils/responsiveTypes.ts with ResponsiveValue, FlattenResponsiveValue, and isResponsiveValue
• Updated PageLayout, getResponsiveAttributes, and getResponsiveControlValues to import from new module
• Maintained backward compatibility via re-exports in useResponsiveValue.ts
• Fixed null handling bug in isResponsiveValue type guard

Before:

import type {ResponsiveValue} from '../hooks/useResponsiveValue'
import {isResponsiveValue} from '../hooks/useResponsiveValue'

After:

import type {ResponsiveValue} from '../internal/utils/responsiveTypes'
import {isResponsiveValue} from '../internal/utils/responsiveTypes'

Changelog

New

• internal/utils/responsiveTypes.ts - SSR-safe module for responsive types and utilities with comprehensive JSDoc
• Test suite with 16 tests covering type guards, edge cases, and SSR-safety verification

Changed

• PageLayout.tsx imports from responsiveTypes instead of useResponsiveValue
• getResponsiveAttributes and getResponsiveControlValues import from new module
• isResponsiveValue now properly handles null/undefined values

Removed

• None (backward compatibility maintained via re-exports)

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

No breaking changes. All existing imports continue to work through re-exports.

Testing & Reviewing

Verify PageLayout responsive props work correctly:

<PageLayout>
  <PageLayout.Pane 
    position={{narrow: 'start', regular: 'end'}}
    divider={{narrow: 'filled', regular: 'line'}}
  />
</PageLayout>

Check that data attributes are correctly applied and CSS media queries handle responsiveness without hydration mismatches.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

Original prompt

Problem

The PageLayout and SplitPageLayout components currently use useResponsiveValue in some places, which is not SSR-safe because it relies on matchMedia which doesn't work on the server. This can cause hydration mismatches and layout shift when the server-rendered HTML doesn't match the client-rendered output.

Context

• ADR-018 (contributor-docs/adrs/adr-018-responsive-values.md) documents the preferred approach: use CSS data attributes and media queries instead of JavaScript-driven responsive values
• The codebase already has getResponsiveAttributes helper that generates data attributes for CSS-based responsive behavior
• Many parts of PageLayout already use this pattern correctly, but there are still places using useResponsiveValue

Requirements

1. Migrate away from useResponsiveValue in PageLayout and SplitPageLayout components
2. Use the CSS data attributes pattern via getResponsiveAttributes (or similar) as documented in ADR-018
3. Ensure all responsive props (position, divider, hidden, etc.) are handled via CSS media queries rather than JS-based viewport detection
4. Ignore resizable functionality - the resizable pane localStorage hydration issue is tracked separately in PageLayout resizable is not SSR Safe #7311

Files likely affected

• packages/react/src/PageLayout/PageLayout.tsx
• packages/react/src/SplitPageLayout/SplitPageLayout.tsx
• Related CSS/styled-components files
• Related tests

Acceptance Criteria

• No usage of useResponsiveValue hook in PageLayout or SplitPageLayout for responsive layout behavior
• All responsive props continue to work correctly using CSS-based approach
• No hydration mismatches during SSR
• Existing tests pass (update as needed)
• Visual behavior remains the same

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[changeset-bot]

⚠️ No Changeset found

Latest commit: a37e9cc

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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