Merge branch 'main' into select-panel-active-descendant

Author: dgreif

.changeset/lucky-ducks-camp.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Use `Item` `index` as fallback key within `List` groups

.changeset/nine-boxes-change.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Allow focus to move to an input outside an overlay on mousedown

src/ActionList/List.tsx

@@ -1,12 +1,11 @@
-import React, {useMemo} from 'react'
+import React from 'react'
 import type {AriaRole} from '../utils/types'
 import {Group, GroupProps} from './Group'
 import {Item, ItemProps} from './Item'
 import {Divider} from './Divider'
 import styled from 'styled-components'
 import {get} from '../constants'
 import {SystemCssProperties} from '@styled-system/css'
-import {uniqueId} from '../utils/uniqueId'
 
 export type ItemInput = ItemProps | (Partial<ItemProps> & {renderItem: typeof Item})
 
@@ -156,10 +155,10 @@ export function List(props: ListProps): JSX.Element {
    * An `Item`-level, `Group`-level, or `List`-level custom `Item` renderer,
    * or the default `Item` renderer.
    */
-  const renderItem = (itemProps: ItemInput, item: ItemInput) => {
+  const renderItem = (itemProps: ItemInput, item: ItemInput, itemIndex: number) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const ItemComponent = ('renderItem' in itemProps && itemProps.renderItem) || props.renderItem || Item
-    const key = itemProps.key ?? itemProps.id?.toString() ?? uniqueId()
+    const key = itemProps.key ?? itemProps.id?.toString() ?? itemIndex.toString()
     return (
       <ItemComponent
         showDivider={props.showItemDividers}
@@ -178,11 +177,9 @@ export function List(props: ListProps): JSX.Element {
   let groups: (GroupProps | (Partial<GroupProps> & {renderItem?: typeof Item; renderGroup?: typeof Group}))[] = []
 
   // Collect rendered `Item`s into `Group`s, avoiding excess iteration over the lists of `items` and `groupMetadata`:
-  const singleGroupId = useMemo(uniqueId, [])
-
   if (!isGroupedListProps(props)) {
     // When no `groupMetadata`s is provided, collect rendered `Item`s into a single anonymous `Group`.
-    groups = [{items: props.items.map(item => renderItem(item, item)), groupId: singleGroupId}]
+    groups = [{items: props.items.map((item, index) => renderItem(item, item, index)), groupId: '0'}]
   } else {
     // When `groupMetadata` is provided, collect rendered `Item`s into their associated `Group`s.
 
@@ -197,6 +194,7 @@ export function List(props: ListProps): JSX.Element {
     for (const itemProps of props.items) {
       // Look up the group associated with the current item.
       const group = groupMap.get(itemProps.groupId)
+      const itemIndex = group?.items?.length ?? 0
 
       // Upsert the group to include the current item (rendered).
       groupMap.set(itemProps.groupId, {
@@ -209,7 +207,8 @@ export function List(props: ListProps): JSX.Element {
               ...(group && 'renderItem' in group && {renderItem: group.renderItem}),
               ...itemProps
             },
-            itemProps
+            itemProps,
+            itemIndex
           )
         ]
       })

src/__tests__/ActionMenu.tsx

@@ -104,7 +104,7 @@ describe('ActionMenu', () => {
     expect(portalRoot).toBeTruthy()
     const somethingElse = (await menu.baseElement.querySelector('#something-else')) as HTMLElement
     act(() => {
-      fireEvent.click(somethingElse)
+      fireEvent.mouseDown(somethingElse)
     })
     expect(portalRoot?.textContent).toEqual('') // menu items are hidden
   })

src/__tests__/AnchoredOverlay.tsx

@@ -110,7 +110,7 @@ describe('AnchoredOverlay', () => {
         onCloseCallback={mockCloseCallback}
       />
     )
-    fireEvent.click(anchoredOverlay.baseElement)
+    fireEvent.mouseDown(anchoredOverlay.baseElement)
 
     expect(mockOpenCallback).toHaveBeenCalledTimes(0)
     expect(mockCloseCallback).toHaveBeenCalledTimes(1)

src/__tests__/DropdownMenu.tsx

@@ -124,7 +124,7 @@ describe('DropdownMenu', () => {
     expect(portalRoot).toBeTruthy()
     const somethingElse = (await menu.baseElement.querySelector('#something-else')) as HTMLElement
     act(() => {
-      fireEvent.click(somethingElse)
+      fireEvent.mouseDown(somethingElse)
     })
     // portal is closed after click
     expect(portalRoot?.textContent).toEqual('') // menu items are hidden

src/behaviors/focusTrap.ts

@@ -142,11 +142,12 @@ export function focusTrap(
 
   // Prevent focus leaving the trap container
   document.addEventListener(
-    'focusin',
-    (event: FocusEvent) => {
+    'focus',
+    event => {
       ensureTrapZoneHasFocus(event.target)
     },
-    {signal: wrappingController.signal}
+    // use capture to ensure we get all events.  focus events do not bubble
+    {signal: wrappingController.signal, capture: true}
   )
 
   // focus the first element

src/hooks/useOnOutsideClick.tsx

@@ -49,9 +49,10 @@ export const useOnOutsideClick = ({containerRef, ignoreClickRefs, onClickOutside
   )
 
   useEffect(() => {
-    document.addEventListener('click', onOutsideClickInternal)
+    // use capture to ensure we get all events
+    document.addEventListener('mousedown', onOutsideClickInternal, {capture: true})
     return () => {
-      document.removeEventListener('click', onOutsideClickInternal)
+      document.removeEventListener('mousedown', onOutsideClickInternal, {capture: true})
     }
   }, [onOutsideClickInternal])
 }

src/stories/DropdownMenu.stories.tsx

@@ -4,6 +4,7 @@ import {theme, ThemeProvider} from '..'
 import {ItemInput} from '../ActionList/List'
 import BaseStyles from '../BaseStyles'
 import {DropdownMenu, DropdownButton} from '../DropdownMenu'
+import TextInput from '../TextInput'
 
 const meta: Meta = {
   title: 'Composite components/DropdownMenu',
@@ -34,6 +35,7 @@ export function FavoriteColorStory(): JSX.Element {
   return (
     <>
       <h1>Favorite Color</h1>
+      <TextInput placeholder="Input for focus testing" mb={2} />
       <div id="favorite-color-label">Please select your favorite color:</div>
       <DropdownMenu
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (