@primer/react@38.13.0

Minor Changes

• #7099 4720c2f Thanks @copilot-swe-agent! - Banner: Use aria-labelledby to reference the title for the landmark region instead of generic variant labels.

• #7521 12dda86 Thanks @TylerJDev! - PageLayout: Add PageLayout.Sidebar sub-component

Patch Changes

• #7537 4fd987c Thanks @hectahertz! - perf(ActionList): enable React Compiler

• #7546 86d6897 Thanks @hectahertz! - perf(Announce): skip getComputedStyle when there is no text content to announce

• #7568 aa46098 Thanks @HiroAgustin! - Blankslate: Add text-wrap: balance to Heading and Description

• #7552 551ec63 Thanks @hectahertz! - perf(Button): fix CounterLabel remount and remove conditional DEV hook

• #7504 d91e78e Thanks @TylerJDev! - UnderlineNav: Adds overflow: hidden when the "More" button isn't present

• #7526 0c2358a Thanks @hectahertz! - Add content-visibility: auto to ActionList items to improve rendering performance for large lists by allowing the browser to skip layout and paint for off-screen items.

• #7556 6dc1858 Thanks @hectahertz! - perf(ActionList): replace :has([aria-disabled]) child scan with data-is-disabled attribute for faster style recalculation

• #7548 d4b32c3 Thanks @hectahertz! - perf(useIsMacOS): replace useState+useEffect with useSyncExternalStore to eliminate unnecessary re-render

@primer/mcp@0.2.0

Minor Changes

• #7495 b69325f Thanks @adierkens! - Adds support for fetching docs via the /llms.txt endpoint per-component

Patch Changes

• Updated dependencies [3c160b2, c87db98, d86c970]:
  • @primer/react@38.12.0

@primer/react@38.12.0

Minor Changes

• #7348 3c160b2 Thanks @mattcosta7! - Add currentWidth and onResizeEnd props to PageLayout.Pane for controlled resizable width

  The PageLayout.Pane component now supports controlled width:

  • onResizeEnd — callback fired when a resize operation ends (pointer release or keyboard key up). Replaces localStorage persistence. Requires currentWidth.
  • currentWidth — sets the current displayed width in pixels (number | undefined). Pass undefined when the persisted value hasn't loaded yet. Requires onResizeEnd.

  Both props must be provided together (enforced by TypeScript). resizable remains a plain boolean prop.

  These props are only meaningful when resizable={true} — without it, no drag handle renders so onResizeEnd never fires.

  New export:

  • defaultPaneWidth — Record of preset width values: {small: 256, medium: 296, large: 320}

  Example usage:

  import {PageLayout, defaultPaneWidth} from '@primer/react'
  
  // Default behavior (unchanged) — localStorage persistence
  <PageLayout.Pane resizable />
  
  // Controlled width with custom persistence
  const [width, setWidth] = useState(defaultPaneWidth.medium)
  <PageLayout.Pane
    resizable
    currentWidth={width}
    onResizeEnd={(newWidth) => {
      setWidth(newWidth)
      myStorage.save('pane-width', newWidth)
    }}
  />
  
  // Async load — pass undefined until value is fetched
  <PageLayout.Pane
    resizable
    currentWidth={savedWidth ?? undefined}
    onResizeEnd={handleResizeEnd}
  />

Patch Changes

• #7527 c87db98 Thanks @llastflowers! - Update PageHeader story to have semantic headings

• #7535 d86c970 Thanks @francinelucca! - fix: ActionBar overflow menu not closing on select

@primer/react@38.11.0

Minor Changes

• #7509 2e563b4 Thanks @francinelucca! - feat: implement displayInViewport for ActionMenu and AnchoredOverlay

Patch Changes

• #7501 81ab065 Thanks @copilot-swe-agent! - Fix PageLayout horizontal overflow by adding width constraint to ContentWrapper

• #7483 fe999ca Thanks @francinelucca! - remove primer_react_overlay_overflow FF from the codebase

@primer/styled-react@1.0.3

Patch Changes

• #7499 4f43e82 Thanks @copilot-swe-agent! - Remove deprecated component exports from @primer/styled-react that no longer have usage tracked in primer query

@primer/react@38.10.0

Minor Changes

• #7488 fe85519 Thanks @koesie10! - DataTable: Add externalSorting prop to disable client-side sorting

@primer/react@38.9.0

Permalink to Storybook

Minor Changes

• #7472 661d16f Thanks @copilot-swe-agent! - StateLabel: Add alert status variants (alertOpened, alertFixed, alertClosed, alertDismissed) with corresponding shield icons for displaying security alert states

Patch Changes

• #7471 df4bd30 Thanks @llastflowers! - Add breakpoint to shrink gutter around dialog on very small screen heights

• #7468 731fb71 Thanks @jonrohan! - feat(ActionList): Optimizes CSS selector performance in ActionList by replacing expensive universal selectors (*) and broad :has() queries with targeted class selectors.

@primer/react@38.8.0

Minor Changes

• #7455 a86c183 Thanks @HiroAgustin! - Remove ConfirmationDialog custom renders to ensure visual parity with Dialog

• #7438 160c1c4 Thanks @francinelucca! - feat: make Spinner's delay customizable

• #7436 9a4e46c Thanks @TylerJDev! - FilteredActionList: Adds new prop scrollBehavior to allow customization of scroll behavior

• #7448 838859d Thanks @francinelucca! - feat(SkeletonBox): add customizable delay

Patch Changes

• #7451 0fc4523 Thanks @daantosaurus! - UnderlineNav.Item: Fix layout issues when children contain React elements by extracting only direct text content for the data-content attribute.

@primer/react@38.7.1

Patch Changes

• #7439 ceb4337 Thanks @liuliu-dev! - Fix PageLayout whitespace gap on narrow viewports.

• #7364 d239382 Thanks @francinelucca! - fix(Autocomplete.Overlay): prevent user-defined className from overriding default styles

• #7408 e3592d9 Thanks @TylerJDev! - ActionMenu: Ensures that uncontrolled ActionMenu(s) retain tab-focus when fullscreen

• #7445 4072e44 Thanks @mattcosta7! - Fixed a bug where scroll might jump when resizing by removing content-visibility from dragging elements in PageLayout.

• #7431 43d1d89 Thanks @llastflowers! - Fix positioning of Autocomplete overlay menu when tokens are present

@primer/react@38.7.0

Minor Changes

• #7293 d418509 Thanks @lindseywild! - Adds character counts to TextInput and TextArea components

Patch Changes

• #7354 efbebdf Thanks @llastflowers! - update SelectPanel Multi Select Modal story

• #7426 094be60 Thanks @kelsey-myers! - Add focusPrependedElements prop to useFocusZone, FilteredActionList, and SelectPanel

• #7349 713d5a5 Thanks @mattcosta7! - PageLayout: Optimize drag/resize performance with inline styles and new optimizations

  Refactored:

  • Use direct attribute selectors (.Pane[data-dragging='true']) instead of descendant selectors for CSS containment (O(1) vs O(n) selector matching)
  • Extract optimization utilities to paneUtils.ts
  • Apply drag handle visual feedback via inline styles and CSS variables

  Added:

  • content-visibility: auto during drag/resize to skip off-screen content rendering
  • rAF throttle for drag updates (one update per frame, latest position wins)
  • Containment during window resize (parity with drag)

  These changes improve style recalculation performance on large DOMs (100k+ nodes) by eliminating descendant selector traversal.

• #7337 de970d6 Thanks @mattcosta7! - perf(Autocomplete): Split context to reduce unnecessary re-renders

  Split AutocompleteContext into separate contexts for static values, setters, and dynamic state.
  Components now subscribe only to the context slices they need, reducing re-renders.

• #7325 cc7e10e Thanks @mattcosta7! - perf(BaseStyles): Remove expensive :has([data-color-mode]) selectors

  Remove :has([data-color-mode]) selectors that scanned the entire DOM on every style recalculation.
  Input color-scheme is already handled by global selectors in the codebase.

• #7329 501a41f Thanks @mattcosta7! - perf(Dialog): Add feature flag for CSS :has() selector performance optimization

  • Add primer_react_css_has_selector_perf feature flag (default: false)
  • When flag is OFF: uses legacy body:has(.Dialog.DisableScroll) selector
  • When flag is ON: uses optimized direct body[data-dialog-scroll-disabled] data attribute with ref counting
  • Enables gradual rollout and easy rollback of performance optimization

• #7342 a8b42b2 Thanks @mattcosta7! - perf(hasInteractiveNodes): Optimize with combined selector and early attribute checks

  • Use combined querySelectorAll selector instead of recursive traversal
  • Check attribute-based states (disabled, hidden, inert) before getComputedStyle
  • Only call getComputedStyle when CSS-based visibility check is needed