Remove deprecated ActionList from SelectPanel and FilteredActionList.

.changeset/fluffy-waves-kiss.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": minor
+---
+
+Remove deprecated ActionList from SelectPanel and FilteredActionList.
+
+<!-- Changed components: SelectPanel -->

src/ActionList/Item.tsx

@@ -178,9 +178,10 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
  )
 
  // use props.id if provided, otherwise generate one.
- const labelId = useId(id)
- const inlineDescriptionId = useId(id && `${id}--inline-description`)
- const blockDescriptionId = useId(id && `${id}--block-description`)
+ const _id = id !== undefined ? id.toString() : undefined
+ const labelId = useId(_id)
+ const inlineDescriptionId = useId(_id && `${_id}--inline-description`)
+ const blockDescriptionId = useId(_id && `${_id}--block-description`)
 
  const ItemWrapper = _PrivateItemWrapper || React.Fragment
 

src/ActionList/shared.ts

@@ -37,7 +37,7 @@ export type ActionListItemProps = {
  /**
  * id to attach to the root element of the Item
  */
- id?: string
+ id?: string | number
  /**
  * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
  */

src/Autocomplete/AutocompleteMenu.tsx

@@ -149,7 +149,7 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
  const listContainerRef = useRef<HTMLDivElement>(null)
  const allItemsToRenderRef = useRef<T[]>([])
  const [highlightedItem, setHighlightedItem] = useState<T>()
- const [sortedItemIds, setSortedItemIds] = useState<Array<string>>(items.map(({id: itemId}) => itemId))
+ const [sortedItemIds, setSortedItemIds] = useState<Array<string>>(items.map(({id: itemId}) => itemId.toString()))
  const generatedUniqueId = useSSRSafeId(id)
 
  const selectableItems = useMemo(
@@ -160,18 +160,19 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
  role: 'option',
  id: selectableItem.id,
  active: highlightedItem?.id === selectableItem.id,
- selected: selectionVariant === 'multiple' ? selectedItemIds.includes(selectableItem.id) : undefined,
+ selected:
+ selectionVariant === 'multiple' ? selectedItemIds.includes(selectableItem.id.toString()) : undefined,
  onAction: (item: T) => {
  const otherSelectedItemIds = selectedItemIds.filter(selectedItemId => selectedItemId !== item.id)
- const newSelectedItemIds = selectedItemIds.includes(item.id)
+ const newSelectedItemIds = selectedItemIds.includes(item.id.toString())
  ? otherSelectedItemIds
  : [...otherSelectedItemIds, item.id]
  const onSelectedChangeFn = onSelectedChange
  ? onSelectedChange
  : getdefaultCheckedSelectionChange(setInputValue)
 
  onSelectedChangeFn(
- newSelectedItemIds.map(newSelectedItemId => getItemById(newSelectedItemId, items)) as T[],
+ newSelectedItemIds.map(newSelectedItemId => getItemById(newSelectedItemId.toString(), items)) as T[],
  )
 
  if (selectionVariant === 'multiple') {
@@ -228,7 +229,8 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
  role: 'option',
  key: addNewItem.id,
  active: highlightedItem?.id === addNewItem.id,
- selected: selectionVariant === 'multiple' ? selectedItemIds.includes(addNewItem.id) : undefined,
+ selected:
+ selectionVariant === 'multiple' ? selectedItemIds.includes(addNewItem.id.toString()) : undefined,
  leadingVisual: () => <PlusIcon />,
  onAction: (item: T) => {
  // TODO: make it possible to pass a leadingVisual when using `addNewItem`
@@ -289,7 +291,7 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
  )
 
  useEffect(() => {
- if (highlightedItem?.text?.startsWith(inputValue) && !selectedItemIds.includes(highlightedItem.id)) {
+ if (highlightedItem?.text?.startsWith(inputValue) && !selectedItemIds.includes(highlightedItem.id.toString())) {
  setAutocompleteSuggestion(highlightedItem.text)
  } else {
  setAutocompleteSuggestion('')

src/FilteredActionList/FilteredActionList.stories.tsx

@@ -43,13 +43,13 @@ function getColorCircle(color: string) {
 }
 
 const items = [
- {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
- {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
- {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3},
- {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
- {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
- {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
- {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7},
+ {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: '1'},
+ {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: '2'},
+ {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: '3'},
+ {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: '4'},
+ {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: '5'},
+ {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: '6'},
+ {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: '7'},
 ]
 
 export function Default(): JSX.Element {

src/FilteredActionList/FilteredActionList.tsx

@@ -6,35 +6,78 @@ import Box from '../Box'
 import Spinner from '../Spinner'
 import TextInput, {TextInputProps} from '../TextInput'
 import {get} from '../constants'
-import {ActionList} from '../deprecated/ActionList'
-import {GroupedListProps, ListPropsBase} from '../deprecated/ActionList/List'
+import {ActionList, ActionListProps, ActionListItemProps} from '../ActionList'
 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 {SxProp} from '../sx'
+import {isValidElementType} from 'react-is'
 
 const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
-export interface FilteredActionListProps
- extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>,
- ListPropsBase,
- SxProp {
+export type ItemInput = Partial<
+ ActionListItemProps & {
+ description?: string | React.ReactElement
+ descriptionVariant?: 'inline' | 'block'
+ leadingVisual?: React.ElementType
+ onAction?: (itemFromAction: ItemInput, event: React.MouseEvent) => void
+ selected?: boolean
+ text?: string
+ trailingVisual?: React.ElementType | React.ReactNode
+ }
+>
+
+export interface FilteredActionListProps extends ActionListProps, SxProp {
  loading?: boolean
  placeholderText?: string
  filterValue?: string
  onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void
  textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
  inputRef?: React.RefObject<HTMLInputElement>
+ items: ItemInput[]
 }
 
 const StyledHeader = styled.div`
  box-shadow: 0 1px 0 ${get('colors.border.default')};
  z-index: 1;
 `
 
+const renderFn = ({
+ description,
+ descriptionVariant,
+ id,
+ sx,
+ text,
+ trailingVisual: TrailingVisual,
+ leadingVisual: LeadingVisual,
+ onSelect,
+ selected,
+}: ItemInput): React.ReactElement => {
+ return (
+ <ActionList.Item key={id} sx={sx} role="option" onSelect={onSelect} selected={selected}>
+ {!!LeadingVisual && (
+ <ActionList.LeadingVisual>
+ <LeadingVisual />
+ </ActionList.LeadingVisual>
+ )}
+ <Box>{text ? text : null}</Box>
+ {description ? <ActionList.Description variant={descriptionVariant}>{description}</ActionList.Description> : null}
+ {!!TrailingVisual && (
+ <ActionList.TrailingVisual>
+ {typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? (
+ <TrailingVisual />
+ ) : (
+ TrailingVisual
+ )}
+ </ActionList.TrailingVisual>
+ )}
+ </ActionList.Item>
+ )
+}
+
 export function FilteredActionList({
  loading = false,
  placeholderText,
@@ -57,7 +100,7 @@ export function FilteredActionList({
  )
 
  const scrollContainerRef = useRef<HTMLDivElement>(null)
- const listContainerRef = useRef<HTMLDivElement>(null)
+ const listContainerRef = useRef<HTMLUListElement>(null)
  const inputRef = useProvidedRefOrCreate<HTMLInputElement>(providedInputRef)
  const activeDescendantRef = useRef<HTMLElement>()
  const listId = useId()
@@ -84,7 +127,7 @@ export function FilteredActionList({
  return !(element instanceof HTMLInputElement)
  },
  activeDescendantFocus: inputRef,
- onActiveDescendantChanged: (current, previous, directlyActivated) => {
+ onActiveDescendantChanged: (current, _previous, directlyActivated) => {
  activeDescendantRef.current = current
 
  if (current && scrollContainerRef.current && directlyActivated) {
@@ -132,7 +175,15 @@ export function FilteredActionList({
  <Spinner />
  </Box>
  ) : (
- <ActionList ref={listContainerRef} items={items} {...listProps} role="listbox" id={listId} />
+ <ActionList
+ ref={listContainerRef}
+ {...listProps}
+ role="listbox"
+ id={listId}
+ aria-label={`${placeholderText} options`}
+ >
+ {items.map(renderFn)}
+ </ActionList>
  )}
  </Box>
  </Box>

src/FilteredActionList/index.ts

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

src/SelectPanel/SelectPanel.features.stories.tsx

@@ -3,7 +3,7 @@ import {ComponentMeta} from '@storybook/react'
 
 import Box from '../Box'
 import {Button} from '../Button'
-import {ItemInput} from '../deprecated/ActionList/List'
+import {ItemInput} from '../FilteredActionList'
 import {SelectPanel} from './SelectPanel'
 import {TriangleDownIcon} from '@primer/octicons-react'
 import type {OverlayProps} from '../Overlay'
@@ -31,13 +31,13 @@ function getColorCircle(color: string) {
 }
 
 const items = [
- {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
- {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
- {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3},
- {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
- {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
- {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
- {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7},
+ {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: '1'},
+ {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: '2'},
+ {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: '3'},
+ {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: '4'},
+ {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: '5'},
+ {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: '6'},
+ {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: '7'},
 ]
 
 export const SingleSelectStory = () => {
@@ -63,7 +63,7 @@ export const SingleSelectStory = () => {
  selected={selected}
  onSelectedChange={setSelected}
  onFilterChange={setFilter}
-showItemDividers={true}
+showDividers={true}
  overlayProps={{width: 'small', height: 'xsmall'}}
  />
  </>
@@ -94,7 +94,7 @@ export const ExternalAnchorStory = () => {
  selected={selected}
  onSelectedChange={setSelected}
  onFilterChange={setFilter}
-showItemDividers={true}
+showDividers={true}
  overlayProps={{width: 'small', height: 'xsmall'}}
  />
  </>
@@ -125,7 +125,7 @@ export const SelectPanelHeightInitialWithOverflowingItemsStory = () => {
  selected={selected}
  onSelectedChange={setSelected}
  onFilterChange={setFilter}
-showItemDividers={true}
+showDividers={true}
  overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
  />
  </>
@@ -157,7 +157,7 @@ export const SelectPanelHeightInitialWithUnderflowingItemsStory = () => {
  selected={selected}
  onSelectedChange={setSelected}
  onFilterChange={setFilter}
-showItemDividers={true}
+showDividers={true}
  overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
  />
  </>
@@ -202,7 +202,7 @@ export const SelectPanelHeightInitialWithUnderflowingItemsAfterFetch = () => {
  selected={selected}
  onSelectedChange={setSelected}
  onFilterChange={setFilter}
-showItemDividers={true}
+showDividers={true}
  overlayProps={{width: 'small', height, maxHeight: 'xsmall'}}
  />
  </>
@@ -234,7 +234,7 @@ export const SelectPanelAboveTallBody = () => {
  selected={selected}
  onSelectedChange={setSelected}
  onFilterChange={setFilter}
-showItemDividers={true}
+showDividers={true}
  overlayProps={{width: 'small', height: 'xsmall'}}
  />
  <div
@@ -276,7 +276,7 @@ export const SelectPanelHeightAndScroll = () => {
  selected={selectedA}
  onSelectedChange={setSelectedA}
  onFilterChange={setFilter}
-showItemDividers={true}
+showDividers={true}
  overlayProps={{height: 'medium'}}
  />
  <h2>With height:auto, maxheight:medium</h2>
@@ -293,7 +293,7 @@ export const SelectPanelHeightAndScroll = () => {
  selected={selectedB}
  onSelectedChange={setSelectedB}
  onFilterChange={setFilter}
-showItemDividers={true}
+showDividers={true}
  overlayProps={{
  height: 'auto',
  maxHeight: 'medium',

src/SelectPanel/SelectPanel.stories.tsx

@@ -5,7 +5,7 @@ import React, {useState} from 'react'
 import Box from '../Box'
 import {Button} from '../Button'
 import {SelectPanel} from '../SelectPanel'
-import {ItemInput} from '../deprecated/ActionList/List'
+import {ItemInput} from '../FilteredActionList'
 
 export default {
  title: 'Components/SelectPanel',
@@ -32,13 +32,13 @@ function getColorCircle(color: string) {
 }
 
 const items = [
- {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
- {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
- {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3},
- {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
- {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
- {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
- {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7},
+ {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: '1'},
+ {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: '2'},
+ {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: '3'},
+ {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: '4'},
+ {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: '5'},
+ {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: '6'},
+ {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: '7'},
 ]
 
 export const Default = () => {
@@ -65,7 +65,6 @@ export const Default = () => {
  selected={selected}
  onSelectedChange={setSelected}
  onFilterChange={setFilter}
- showItemDividers={true}
  overlayProps={{width: 'small', height: 'xsmall'}}
  />
  </>

src/SelectPanel/SelectPanel.test.tsx

@@ -5,7 +5,7 @@ import theme from '../theme'
 import {SelectPanel} from '../SelectPanel'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {BaseStyles, SSRProvider, ThemeProvider} from '..'
-import {ItemInput} from '../deprecated/ActionList/List'
+import {ItemInput} from '../FilteredActionList'
 
 expect.extend(toHaveNoViolations)