Use @react-aria/ssr for isomorphic ID generation.

.changeset/fast-coins-worry.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': minor
+---
+
+Use @react-aria/ssr for isomorphic ID generation.

docs/content/ssr.mdx

@@ -0,0 +1,41 @@
+---
+title: Server-side rendering with Primer React
+---
+
+## SSR-safe ID generation
+
+Some Primer components generate their own DOM IDs. Those IDs must be isomorphic (so that server-side rendering and client-side rendering yield the same ID, avoiding hydration issues) and unique across the DOM. We use [@react-aria/ssr](https://react-spectrum.adobe.com/react-aria/ssr.html) to generate those IDs. In client-only rendering, this doesn't require any additional work. In SSR contexts, you must wrap your application with at least one `SSRProvider`:
+
+```
+import {SSRProvider} from '@primer/components';
+
+function App() {
+ return (
+ <SSRProvider>
+ <MyApplication />
+ </SSRProvider>
+ )
+}
+```
+
+`SSRProvider` maintains the context necessary to ensure IDs are consistent. In cases where some parts of the react tree are rendered asynchronously, you should wrap an additional `SSRProvider` around the conditionally rendered elements:
+
+```
+function MyApplication() {
+ const [dataA] = useAsyncData('a');
+ const [dataB] = useAsyncData('b');
+
+ return <>
+ <SSRProvider>
+ {dataA && <MyComponentA data={dataA} />}
+ </SSRProvider>
+ <SSRProvider>
+ {dataB && <MyComponentB data={dataB} />}
+ </SSRProvider>
+ </>
+}
+```
+
+This will ensure that the IDs are consistent for any sequencing of `dataA` and `dataB` being resolved.
+
+See also [React Aria's server side rendering documentation](https://react-spectrum.adobe.com/react-aria/ssr.html).

package.json

@@ -45,6 +45,7 @@
  "dependencies": {
  "@primer/octicons-react": "^13.0.0",
  "@primer/primitives": "4.6.4",
+ "@react-aria/ssr": "3.1.0",
  "@styled-system/css": "5.1.5",
  "@styled-system/props": "5.1.5",
  "@styled-system/theme-get": "5.1.2",

src/ActionList/Item.tsx

@@ -1,5 +1,5 @@
 import {CheckIcon, IconProps} from '@primer/octicons-react'
-import React, {useCallback, useMemo} from 'react'
+import React, {useCallback} from 'react'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import Truncate from '../Truncate'
@@ -13,7 +13,7 @@ import {
  activeDescendantActivatedIndirectly,
  isActiveDescendantAttribute
 } from '../behaviors/focusZone'
-import {uniqueId} from '../utils/uniqueId'
+import {useSSRSafeId} from '@react-aria/ssr'
 
 /**
  * These colors are not yet in our default theme. Need to remove this once they are added.
@@ -336,8 +336,8 @@ export function Item(itemProps: Partial<ItemProps> & {item?: ItemInput}): JSX.El
  ...props
  } = itemProps
 
- const labelId = useMemo(() => uniqueId(), [])
- const descriptionId = useMemo(() => uniqueId(), [])
+ const labelId = useSSRSafeId()
+ const descriptionId = useSSRSafeId()
 
  const keyPressHandler = useCallback(
  event => {

src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -1,9 +1,9 @@
-import React, {useCallback, useEffect, useMemo} from 'react'
+import React, {useCallback, useEffect} from 'react'
 import Overlay, {OverlayProps} from '../Overlay'
 import {FocusTrapHookSettings, useFocusTrap} from '../hooks/useFocusTrap'
 import {FocusZoneHookSettings, useFocusZone} from '../hooks/useFocusZone'
 import {useAnchoredPosition, useProvidedRefOrCreate, useRenderForcingRef} from '../hooks'
-import {uniqueId} from '../utils/uniqueId'
+import {useSSRSafeId} from '@react-aria/ssr'
 
 interface AnchoredOverlayPropsWithAnchor {
  /**
@@ -90,7 +90,7 @@ export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({
 }) => {
  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
  const [overlayRef, updateOverlayRef] = useRenderForcingRef<HTMLDivElement>()
- const anchorId = useMemo(uniqueId, [])
+ const anchorId = useSSRSafeId()
 
  const onClickOutside = useCallback(() => onClose?.('click-outside'), [onClose])
  const onEscape = useCallback(() => onClose?.('escape'), [onClose])

src/Dialog/Dialog.tsx

@@ -11,8 +11,8 @@ import {XIcon} from '@primer/octicons-react'
 import {useFocusZone} from '../hooks/useFocusZone'
 import {FocusKeys} from '../behaviors/focusZone'
 import Portal from '../Portal'
-import {uniqueId} from '../utils/uniqueId'
 import {useCombinedRefs} from '../hooks/useCombinedRefs'
+import {useSSRSafeId} from '@react-aria/ssr'
 
 const ANIMATION_DURATION = '200ms'
 
@@ -252,8 +252,8 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
  width = 'xlarge',
  height = 'auto'
  } = props
- const dialogLabelId = uniqueId()
- const dialogDescriptionId = uniqueId()
+ const dialogLabelId = useSSRSafeId()
+ const dialogDescriptionId = useSSRSafeId()
  const defaultedProps = {...props, title, subtitle, role, dialogLabelId, dialogDescriptionId}
 
  const dialogRef = useRef<HTMLDivElement>(null)

src/FilteredActionList/FilteredActionList.tsx

@@ -1,16 +1,16 @@
-import React, {KeyboardEventHandler, useCallback, useEffect, useMemo, useRef} from 'react'
+import React, {KeyboardEventHandler, useCallback, useEffect, useRef} from 'react'
 import {GroupedListProps, ListPropsBase} from '../ActionList/List'
 import TextInput, {TextInputProps} from '../TextInput'
 import Box from '../Box'
 import {ActionList} from '../ActionList'
 import Spinner from '../Spinner'
 import {useFocusZone} from '../hooks/useFocusZone'
-import {uniqueId} from '../utils/uniqueId'
 import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
 import styled from 'styled-components'
 import {get} from '../constants'
 import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate'
 import useScrollFlash from '../hooks/useScrollFlash'
+import {useSSRSafeId} from '@react-aria/ssr'
 
 export interface FilteredActionListProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase {
  loading?: boolean
@@ -73,7 +73,7 @@ export function FilteredActionList({
  const listContainerRef = useRef<HTMLDivElement>(null)
  const inputRef = useProvidedRefOrCreate<HTMLInputElement>(providedInputRef)
  const activeDescendantRef = useRef<HTMLElement>()
- const listId = useMemo(uniqueId, [])
+ const listId = useSSRSafeId()
  const onInputKeyPress: KeyboardEventHandler = useCallback(
  event => {
  if (event.key === 'Enter' && activeDescendantRef.current) {

src/__tests__/ActionMenu.tsx

@@ -6,7 +6,7 @@ import theme from '../theme'
 import {ActionMenu} from '../ActionMenu'
 import {COMMON} from '../constants'
 import {behavesAsComponent, checkExports} from '../utils/testing'
-import {BaseStyles, ThemeProvider} from '..'
+import {BaseStyles, SSRProvider, ThemeProvider} from '..'
 import {ItemProps} from '../ActionList/Item'
 expect.extend(toHaveNoViolations)
 
@@ -22,11 +22,13 @@ const mockOnActivate = jest.fn()
 function SimpleActionMenu(): JSX.Element {
  return (
  <ThemeProvider theme={theme}>
- <BaseStyles>
- <div id="something-else">X</div>
- <ActionMenu onAction={mockOnActivate} anchorContent="Menu" items={items} />
- <div id="portal-root"></div>
- </BaseStyles>
+ <SSRProvider>
+ <BaseStyles>
+ <div id="something-else">X</div>
+ <ActionMenu onAction={mockOnActivate} anchorContent="Menu" items={items} />
+ <div id="portal-root"></div>
+ </BaseStyles>
+ </SSRProvider>
  </ThemeProvider>
  )
 }
@@ -40,7 +42,11 @@ describe('ActionMenu', () => {
  Component: ActionMenu,
  systemPropArray: [COMMON],
  options: {skipAs: true, skipSx: true},
- toRender: () => <ActionMenu items={[]} />
+ toRender: () => (
+ <SSRProvider>
+ <ActionMenu items={[]} />
+ </SSRProvider>
+ )
  })
 
  checkExports('ActionMenu', {

src/__tests__/AnchoredOverlay.tsx

@@ -4,7 +4,7 @@ import {behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup, fireEvent} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
-import {Button} from '../index'
+import {Button, SSRProvider} from '../index'
 import theme from '../theme'
 import BaseStyles from '../BaseStyles'
 import {ThemeProvider} from '../ThemeProvider'
@@ -38,16 +38,18 @@ const AnchoredOverlayTestComponent = ({
  )
  return (
  <ThemeProvider theme={theme}>
- <BaseStyles>
- <AnchoredOverlay
- open={open}
- onOpen={onOpen}
- onClose={onClose}
- renderAnchor={props => <Button {...props}>Anchor Button</Button>}
- >
- <button type="button">Focusable Child</button>
- </AnchoredOverlay>
- </BaseStyles>
+ <SSRProvider>
+ <BaseStyles>
+ <AnchoredOverlay
+ open={open}
+ onOpen={onOpen}
+ onClose={onClose}
+ renderAnchor={props => <Button {...props}>Anchor Button</Button>}
+ >
+ <button type="button">Focusable Child</button>
+ </AnchoredOverlay>
+ </BaseStyles>
+ </SSRProvider>
  </ThemeProvider>
  )
 }

src/__tests__/DropdownMenu.tsx

@@ -6,7 +6,7 @@ import theme from '../theme'
 import {DropdownMenu, DropdownButton} from '../DropdownMenu'
 import {COMMON} from '../constants'
 import {behavesAsComponent, checkExports} from '../utils/testing'
-import {BaseStyles, ThemeProvider} from '..'
+import {BaseStyles, ThemeProvider, SSRProvider} from '..'
 import {ItemInput} from '../ActionList/List'
 
 expect.extend(toHaveNoViolations)
@@ -18,16 +18,18 @@ function SimpleDropdownMenu(): JSX.Element {
 
  return (
  <ThemeProvider theme={theme}>
- <BaseStyles>
- <div id="something-else">X</div>
- <DropdownMenu
- items={items}
- placeholder="Select an Option"
- selectedItem={selectedItem}
- onChange={setSelectedItem}
- />
- <div id="portal-root"></div>
- </BaseStyles>
+ <SSRProvider>
+ <BaseStyles>
+ <div id="something-else">X</div>
+ <DropdownMenu
+ items={items}
+ placeholder="Select an Option"
+ selectedItem={selectedItem}
+ onChange={setSelectedItem}
+ />
+ <div id="portal-root"></div>
+ </BaseStyles>
+ </SSRProvider>
  </ThemeProvider>
  )
 }
@@ -41,7 +43,11 @@ describe('DropdownMenu', () => {
  Component: DropdownMenu,
  systemPropArray: [COMMON],
  options: {skipAs: true, skipSx: true},
- toRender: () => <DropdownMenu items={[]} />
+ toRender: () => (
+ <SSRProvider>
+ <DropdownMenu items={[]} />
+ </SSRProvider>
+ )
  })
 
  checkExports('DropdownMenu', {

src/__tests__/SelectPanel.tsx

@@ -6,7 +6,7 @@ import theme from '../theme'
 import {SelectPanel} from '../SelectPanel'
 import {COMMON} from '../constants'
 import {behavesAsComponent, checkExports} from '../utils/testing'
-import {BaseStyles, ThemeProvider} from '..'
+import {BaseStyles, SSRProvider, ThemeProvider} from '..'
 import {ItemInput} from '../ActionList/List'
 
 expect.extend(toHaveNoViolations)
@@ -20,19 +20,21 @@ function SimpleSelectPanel(): JSX.Element {
 
  return (
  <ThemeProvider theme={theme}>
- <BaseStyles>
- <SelectPanel
- items={items}
- placeholder="Select Items"
- placeholderText="Filter Items"
- selected={selected}
- onSelectedChange={setSelected}
- onFilterChange={setFilter}
- open={open}
- onOpenChange={setOpen}
- />
- <div id="portal-root"></div>
- </BaseStyles>
+ <SSRProvider>
+ <BaseStyles>
+ <SelectPanel
+ items={items}
+ placeholder="Select Items"
+ placeholderText="Filter Items"
+ selected={selected}
+ onSelectedChange={setSelected}
+ onFilterChange={setFilter}
+ open={open}
+ onOpenChange={setOpen}
+ />
+ <div id="portal-root"></div>
+ </BaseStyles>
+ </SSRProvider>
  </ThemeProvider>
  )
 }

src/__tests__/__snapshots__/ActionMenu.tsx.snap

@@ -70,9 +70,9 @@ exports[`ActionMenu renders consistently 1`] = `
 <button
  aria-haspopup="true"
  aria-label="menu"
- aria-labelledby="__primer_id_10000"
+ aria-labelledby="react-aria-1"
  className="c0"
- id="__primer_id_10000"
+ id="react-aria-1"
  onClick={[Function]}
  onKeyDown={[Function]}
  tabIndex={0}