perf(ActionList): replace :has() selector with JS-computed attribute

.changeset/clever-geckos-sleep.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+perf(ActionList): replace :has() selector with JS-computed attribute

packages/react/src/ActionList/ActionList.module.css

@@ -87,7 +87,7 @@
  }
 
  /* if a list has a mix of items with and without descriptions, reset the label font-weight to normal */
- &:has([data-has-description='true']):has([data-has-description='false']) {
+ &[data-mixed-descriptions='true'] {
  & .ItemLabel {
  font-weight: var(--base-text-weight-normal);
  }

packages/react/src/ActionList/ActionList.stress.dev.stories.tsx

@@ -16,6 +16,11 @@ const projects = Array.from({length: totalIterations}, (_, i) => ({
  scope: `Scope ${i + 1}`,
 }))
 
+const mixedProjects = Array.from({length: totalIterations}, (_, i) => ({
+ name: `Project ${i + 1}`,
+ scope: i % 2 === 0 ? `Scope ${i + 1}` : undefined,
+}))
+
 export const SingleSelect = () => {
  return (
  <StressTest
@@ -48,3 +53,38 @@ export const SingleSelect = () => {
  />
  )
 }
+
+export const MixedDescriptions = () => {
+ return (
+ <StressTest
+ componentName="ActionList"
+ title="Mixed Descriptions"
+ description="Stress test with a mix of items with and without descriptions to test :has() selector perf."
+ totalIterations={totalIterations}
+ renderIteration={count => {
+ return (
+ <>
+ <ActionList selectionVariant="single" showDividers role="menu" aria-label="Project">
+ {mixedProjects.map((project, index) => (
+ <ActionList.Item
+ key={index}
+ role="menuitemradio"
+ selected={index === count}
+ aria-checked={index === count}
+ >
+ <ActionList.LeadingVisual>
+ <TableIcon />
+ </ActionList.LeadingVisual>
+ {project.name}
+ {project.scope ? (
+ <ActionList.Description variant="block">{project.scope}</ActionList.Description>
+ ) : null}
+ </ActionList.Item>
+ ))}
+ </ActionList>
+ </>
+ )
+ }}
+ />
+ )
+}

packages/react/src/ActionList/List.tsx

@@ -9,6 +9,7 @@ import {useProvidedRefOrCreate} from '../hooks'
 import {FocusKeys, useFocusZone} from '../hooks/useFocusZone'
 import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
+import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 const UnwrappedList = <As extends React.ElementType = 'ul'>(
  props: ActionListProps<As>,
@@ -66,6 +67,34 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
  [variant, selectionVariant, containerSelectionVariant, showDividers, listRole, headingId],
  )
 
+ // Replaces a CSS `:has([data-has-description])` selector that caused full-subtree
+ // style recalculation on every DOM mutation (~674ms on 100 items, 10-20s freezes on Safari).
+ //
+ // Ideally we'd derive this from children during render, but each Item's description is
+ // detected via `useSlots` at render time, so the List can't know which Items have
+ // descriptions without duplicating slot detection or deeply inspecting children trees
+ // (fragile with Groups, conditional rendering, wrapper components, etc.).
+ //
+ // A context-based approach (Items registering their description state with the List) would
+ // work but adds registration/unregistration callbacks, a new provider, and re-renders when
+ // the count changes. Not worth the complexity for a derived boolean.
+ //
+ // Two querySelector calls after render is trivially cheap compared to what the browser
+ // was doing on every DOM mutation with `:has()`.
+ useIsomorphicLayoutEffect(() => {
+ const list = listRef.current
+ if (!list) return
+ const hasMixed =
+ list.querySelector('[data-has-description="true"]') !== null &&
+ list.querySelector('[data-has-description="false"]') !== null
+ const current = list.getAttribute('data-mixed-descriptions')
+ if (hasMixed && current !== 'true') {
+ list.setAttribute('data-mixed-descriptions', 'true')
+ } else if (!hasMixed && current !== null) {
+ list.removeAttribute('data-mixed-descriptions')
+ }
+ })
+
  return (
  <ListContext.Provider value={listContextValue}>
  {slots.heading}