SelectPanel: Update SelectPanel to use modern ActionList

.changeset/sour-cooks-dress.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+SelectPanel: Update SelectPanel to use modern ActionList behind a feature flag `primer_react_select_panel_with_modern_action_list`

e2e/components/SelectPanel.test.ts

@@ -5,6 +5,7 @@ import {matrix} from '../test-helpers/matrix'
 
 const scenarios = matrix({
  theme: themes,
+ modernActionList: [false, true],
  story: [
  {id: 'components-selectpanel--default', name: 'Default'},
  {id: 'components-selectpanel-features--single-select', name: 'Single Select'},
@@ -38,21 +39,23 @@ test.describe('SelectPanel', () => {
  for (const scenario of scenarios) {
  const name = scenario.story.name
  const theme = scenario.theme
+ const flag = scenario.modernActionList ? `.modern-action-list--${scenario.modernActionList}` : ''
 
  const globals = {
  colorScheme: scenario.theme,
+ featureFlags: {primer_react_select_panel_with_modern_action_list: scenario.modernActionList},
  }
 
- test(`${name} @vrt ${theme}`, async ({page}) => {
+ test(`${name} @vrt ${theme} ${flag}`, async ({page}) => {
  await visit(page, {id: scenario.story.id, globals})
 
  // Open select panel
  await page.keyboard.press('Tab')
  await page.keyboard.press('Enter')
- expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SelectPanel.${name}.${theme}.png`)
+ expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SelectPanel.${name}.${theme}${flag}.png`)
  })
 
- test(`${name} axe @aat ${theme}`, async ({page}) => {
+ test(`${name} axe @aat ${theme} ${flag}`, async ({page}) => {
  await visit(page, {id: scenario.story.id, globals})
  await expect(page).toHaveNoViolations()
  })

packages/react/src/ActionList/Item.tsx

@@ -229,7 +229,11 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
  '&:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + &, &[data-focus-visible-added] + li': {
  '--divider-color': 'transparent',
  },
- ...(active ? activeStyles : {}),
+
+ /** Active styles */
+ ...(active ? activeStyles : {}), // NavList
+ '&[data-is-active-descendant]': activeStyles, // SelectPanel
+
  ...(!buttonSemantics ? hoverStyles : {}),
  }
 

packages/react/src/FeatureFlags/DefaultFeatureFlags.ts

@@ -5,4 +5,5 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({
  primer_react_css_modules_staff: false,
  primer_react_css_modules_ga: false,
  primer_react_action_list_item_as_button: false,
+ primer_react_select_panel_with_modern_action_list: false,
 })

packages/react/src/FilteredActionList/FilteredActionListEntry.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import type {FilteredActionListProps} from './FilteredActionListWithDeprecatedActionList'
+import {FilteredActionList as WithDeprecatedActionList} from './FilteredActionListWithDeprecatedActionList'
+import {FilteredActionList as WithStableActionList} from './FilteredActionListWithModernActionList'
+import {useFeatureFlag} from '../FeatureFlags'
+
+export function FilteredActionList(props: FilteredActionListProps): JSX.Element {
+ const enabled = useFeatureFlag('primer_react_select_panel_with_modern_action_list')
+
+ if (enabled) return <WithStableActionList {...props} />
+ else return <WithDeprecatedActionList {...props} />
+}
+
+FilteredActionList.displayName = 'FilteredActionList'
+
+export type {FilteredActionListProps}

packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx

@@ -0,0 +1,233 @@
+import type {ScrollIntoViewOptions} from '@primer/behaviors'
+import {scrollIntoView} from '@primer/behaviors'
+import type {KeyboardEventHandler} from 'react'
+import React, {useCallback, useEffect, useRef} from 'react'
+import styled from 'styled-components'
+import Box from '../Box'
+import Spinner from '../Spinner'
+import type {TextInputProps} from '../TextInput'
+import TextInput from '../TextInput'
+import {get} from '../constants'
+import {ActionList} from '../ActionList'
+import type {GroupedListProps, ListPropsBase, ItemInput} from '../SelectPanel/types'
+import {useFocusZone} from '../hooks/useFocusZone'
+import {useId} from '../hooks/useId'
+import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate'
+import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
+import useScrollFlash from '../hooks/useScrollFlash'
+import {VisuallyHidden} from '../internal/components/VisuallyHidden'
+import type {SxProp} from '../sx'
+
+import {isValidElementType} from 'react-is'
+import type {RenderItemFn} from '../deprecated/ActionList/List'
+
+const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
+
+export interface FilteredActionListProps
+ extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>,
+ ListPropsBase,
+ SxProp {
+ loading?: boolean
+ placeholderText?: string
+ filterValue?: string
+ onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void
+ textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
+ inputRef?: React.RefObject<HTMLInputElement>
+}
+
+const StyledHeader = styled.div`
+ box-shadow: 0 1px 0 ${get('colors.border.default')};
+ z-index: 1;
+`
+
+export function FilteredActionList({
+ loading = false,
+ placeholderText,
+ filterValue: externalFilterValue,
+ onFilterChange,
+ items,
+ textInputProps,
+ inputRef: providedInputRef,
+ sx,
+ groupMetadata,
+ showItemDividers,
+ ...listProps
+}: FilteredActionListProps): JSX.Element {
+ const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '')
+ const onInputChange = useCallback(
+ (e: React.ChangeEvent<HTMLInputElement>) => {
+ const value = e.target.value
+ onFilterChange(value, e)
+ setInternalFilterValue(value)
+ },
+ [onFilterChange, setInternalFilterValue],
+ )
+
+ const scrollContainerRef = useRef<HTMLDivElement>(null)
+ const listContainerRef = useRef<HTMLUListElement>(null)
+ const inputRef = useProvidedRefOrCreate<HTMLInputElement>(providedInputRef)
+ const activeDescendantRef = useRef<HTMLElement>()
+ const listId = useId()
+ const inputDescriptionTextId = useId()
+ const onInputKeyPress: KeyboardEventHandler = useCallback(
+ event => {
+ if (event.key === 'Enter' && activeDescendantRef.current) {
+ event.preventDefault()
+ event.nativeEvent.stopImmediatePropagation()
+
+ // Forward Enter key press to active descendant so that item gets activated
+ const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent)
+ activeDescendantRef.current.dispatchEvent(activeDescendantEvent)
+ }
+ },
+ [activeDescendantRef],
+ )
+
+ useFocusZone(
+ {
+ containerRef: listContainerRef,
+ focusOutBehavior: 'wrap',
+ focusableElementFilter: element => {
+ return !(element instanceof HTMLInputElement)
+ },
+ activeDescendantFocus: inputRef,
+ onActiveDescendantChanged: (current, previous, directlyActivated) => {
+ activeDescendantRef.current = current
+
+ if (current && scrollContainerRef.current && directlyActivated) {
+ scrollIntoView(current, scrollContainerRef.current, menuScrollMargins)
+ }
+ },
+ },
+ [
+ // List ref isn't set while loading. Need to re-bind focus zone when it changes
+ loading,
+ ],
+ )
+
+ useEffect(() => {
+ // if items changed, we want to instantly move active descendant into view
+ if (activeDescendantRef.current && scrollContainerRef.current) {
+ scrollIntoView(activeDescendantRef.current, scrollContainerRef.current, {...menuScrollMargins, behavior: 'auto'})
+ }
+ }, [items])
+
+ useScrollFlash(scrollContainerRef)
+
+ function getItemListForEachGroup(groupId: string) {
+ const itemsInGroup = []
+ for (const item of items) {
+ // Look up the group associated with the current item.
+ if (item.groupId === groupId) {
+ itemsInGroup.push(item)
+ }
+ }
+ return itemsInGroup
+ }
+
+ return (
+ <Box display="flex" flexDirection="column" overflow="hidden" sx={sx}>
+ <StyledHeader>
+ <TextInput
+ ref={inputRef}
+ block
+ width="auto"
+ color="fg.default"
+ value={filterValue}
+ onChange={onInputChange}
+ onKeyPress={onInputKeyPress}
+ placeholder={placeholderText}
+ aria-label={placeholderText}
+ aria-controls={listId}
+ aria-describedby={inputDescriptionTextId}
+ {...textInputProps}
+ />
+ </StyledHeader>
+ <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
+ <Box ref={scrollContainerRef} overflow="auto">
+ {loading ? (
+ <Box width="100%" display="flex" flexDirection="row" justifyContent="center" pt={6} pb={7}>
+ <Spinner />
+ </Box>
+ ) : (
+ <ActionList ref={listContainerRef} showDividers={showItemDividers} {...listProps} role="listbox" id={listId}>
+ {groupMetadata?.length
+ ? groupMetadata.map((group, index) => {
+ return (
+ <ActionList.Group key={index}>
+ <ActionList.GroupHeading variant={group.header?.variant ? group.header.variant : undefined}>
+ {group.header?.title ? group.header.title : `Group ${group.groupId}`}
+ </ActionList.GroupHeading>
+ {getItemListForEachGroup(group.groupId).map((item, index) => {
+ return <MappedActionListItem key={index} {...item} renderItem={listProps.renderItem} />
+ })}
+ </ActionList.Group>
+ )
+ })
+ : items.map((item, index) => {
+ return <MappedActionListItem key={index} {...item} renderItem={listProps.renderItem} />
+ })}
+ </ActionList>
+ )}
+ </Box>
+ </Box>
+ )
+}
+
+function MappedActionListItem(item: ItemInput & {renderItem?: RenderItemFn}) {
+ // keep backward compatibility for renderItem
+ // escape hatch for custom Item rendering
+ if (typeof item.renderItem === 'function') return item.renderItem(item)
+
+ const {
+ id,
+ description,
+ descriptionVariant,
+ text,
+ trailingVisual: TrailingVisual,
+ leadingVisual: LeadingVisual,
+ trailingText,
+ trailingIcon: TrailingIcon,
+ onAction,
+ children,
+ ...rest
+ } = item
+
+ return (
+ <ActionList.Item
+ role="option"
+ // @ts-ignore - for now
+ onSelect={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
+ if (typeof onAction === 'function')
+ onAction(item, e as React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>)
+ }}
+ data-id={id}
+ {...rest}
+ >
+ {LeadingVisual ? (
+ <ActionList.LeadingVisual>
+ <LeadingVisual />
+ </ActionList.LeadingVisual>
+ ) : null}
+ {children}
+ {text}
+ {description ? <ActionList.Description variant={descriptionVariant}>{description}</ActionList.Description> : null}
+ {TrailingVisual ? (
+ <ActionList.TrailingVisual>
+ {typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? (
+ <TrailingVisual />
+ ) : (
+ TrailingVisual
+ )}
+ </ActionList.TrailingVisual>
+ ) : TrailingIcon || trailingText ? (
+ <ActionList.TrailingVisual>
+ {trailingText}
+ {TrailingIcon && <TrailingIcon />}
+ </ActionList.TrailingVisual>
+ ) : null}
+ </ActionList.Item>
+ )
+}
+
+FilteredActionList.displayName = 'FilteredActionList'

packages/react/src/FilteredActionList/index.ts

@@ -1,2 +1,2 @@
-export {FilteredActionList} from './FilteredActionList'
-export type {FilteredActionListProps} from './FilteredActionList'
+export {FilteredActionList} from './FilteredActionListEntry'
+export type {FilteredActionListProps} from './FilteredActionListEntry'