chore: add ActionList primitives exports

.changeset/metal-pumas-itch.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+feat: add ActionList, SelectPanel primitives exports and new FilteredActionList.Input components

packages/react/src/ActionList/index.ts

@@ -1,5 +1,5 @@
 import {List} from './List'
-import {Group, GroupHeading} from './Group'
+import {Group, GroupContext, GroupHeading} from './Group'
 import {Item} from './Item'
 import {LinkItem} from './LinkItem'
 import {Divider} from './Divider'
@@ -46,6 +46,9 @@ export const ActionList = Object.assign(List, {
  /** Heading for an `ActionList`. */
  Heading,
 
+ /** Context for `ActionList.Group` to propagate selectionVariant and other group-level props. */
+ GroupContext,
+
  /** Heading for `ActionList.Group` */
  GroupHeading,
 

packages/react/src/FilteredActionList/FilteredActionList.tsx

@@ -4,7 +4,6 @@ import type {KeyboardEventHandler, JSX} from 'react'
 import type React from 'react'
 import {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import type {TextInputProps} from '../TextInput'
-import TextInput from '../TextInput'
 import {ActionList, type ActionListProps} from '../ActionList'
 import type {GroupedListProps, ListPropsBase, ItemInput, RenderItemFn} from './'
 import {useFocusZone} from '../hooks/useFocusZone'
@@ -22,6 +21,7 @@ import {isValidElementType} from 'react-is'
 import {useAnnouncements} from './useAnnouncements'
 import {clsx} from 'clsx'
 import {useVirtualizer} from '@tanstack/react-virtual'
+import {FilteredActionListInput} from './FilteredActionListInput'
 
 const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
@@ -543,39 +543,26 @@ export function FilteredActionList({
  }
  }
 
- const {className: textInputClassName, ...restTextInputProps} = textInputProps || {}
-
  return (
  <div
  ref={inputAndListContainerRef}
  className={clsx(className, classes.Root)}
  data-testid="filtered-action-list"
  data-component="FilteredActionList"
  >
- <div className={classes.Header} data-component="FilteredActionList.Header">
- <TextInput
- // @ts-expect-error it needs a non nullable ref
- ref={inputRef}
- block
- width="auto"
- color="fg.default"
- value={filterValue}
- onChange={onInputChange}
- onKeyPress={onInputKeyPress}
- onKeyDown={usingRovingTabindex ? onInputKeyDown : () => {}}
- placeholder={placeholderText}
- role="combobox"
- aria-expanded="true"
- aria-autocomplete="list"
- aria-controls={listId}
- aria-label={placeholderText}
- aria-describedby={inputDescriptionTextId}
- loaderPosition={'leading'}
- loading={loading && !loadingType.appearsInBody}
- className={clsx(textInputClassName, {[classes.FullScreenTextInput]: fullScreenOnNarrow})}
- {...restTextInputProps}
- />
- </div>
+ <FilteredActionListInput
+ inputRef={inputRef}
+ value={filterValue}
+ onInputChange={onInputChange}
+ onInputKeyPress={onInputKeyPress}
+ onInputKeyDown={usingRovingTabindex ? onInputKeyDown : undefined}
+ placeholderText={placeholderText}
+ listId={listId}
+ inputDescriptionTextId={inputDescriptionTextId}
+ loading={loading && !loadingType.appearsInBody}
+ fullScreenOnNarrow={fullScreenOnNarrow}
+ {...textInputProps}
+ />
  <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
  {onSelectAllChange !== undefined && (
  <div className={classes.SelectAllContainer} data-component="FilteredActionList.SelectAll">

packages/react/src/FilteredActionList/FilteredActionListInput.tsx

@@ -0,0 +1,59 @@
+import type React from 'react'
+import {clsx} from 'clsx'
+import TextInput from '../TextInput'
+import type {TextInputProps} from '../TextInput'
+import classes from './FilteredActionList.module.css'
+
+export interface FilteredActionListInputProps extends Partial<Omit<TextInputProps, 'onChange' | 'onKeyDown'>> {
+ inputRef: React.RefObject<HTMLInputElement | null>
+ onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+ onInputKeyPress?: React.KeyboardEventHandler<HTMLInputElement>
+ onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement>
+ placeholderText?: string
+ listId: string
+ inputDescriptionTextId: string
+ loading: boolean
+ fullScreenOnNarrow?: boolean
+}
+
+export function FilteredActionListInput({
+ inputRef,
+ value,
+ onInputChange,
+ onInputKeyPress,
+ onInputKeyDown,
+ placeholderText,
+ listId,
+ inputDescriptionTextId,
+ loading,
+ fullScreenOnNarrow,
+ className,
+ ...restTextInputProps
+}: FilteredActionListInputProps): React.JSX.Element {
+ return (
+ <div className={classes.Header} data-component="FilteredActionList.Header">
+ <TextInput
+ // @ts-expect-error it needs a non nullable ref
+ ref={inputRef}
+ block
+ width="auto"
+ color="fg.default"
+ value={value}
+ onChange={onInputChange}
+ onKeyPress={onInputKeyPress}
+ onKeyDown={onInputKeyDown}
+ placeholder={placeholderText}
+ role="combobox"
+ aria-expanded="true"
+ aria-autocomplete="list"
+ aria-controls={listId}
+ aria-label={placeholderText}
+ aria-describedby={inputDescriptionTextId}
+ loaderPosition={'leading'}
+ loading={loading}
+ className={clsx(className, {[classes.FullScreenTextInput]: fullScreenOnNarrow})}
+ {...restTextInputProps}
+ />
+ </div>
+ )
+}

packages/react/src/FilteredActionList/index.ts

@@ -1,6 +1,10 @@
-export {FilteredActionList} from './FilteredActionList'
+import {FilteredActionList as FilteredList} from './FilteredActionList'
+import {FilteredActionListInput} from './FilteredActionListInput'
+import {FilteredActionListBodyLoader} from './FilteredActionListLoaders'
 
 export type {FilteredActionListProps} from './FilteredActionList'
+export type {FilteredActionListInputProps} from './FilteredActionListInput'
+export {FilteredActionListLoadingTypes} from './FilteredActionListLoaders'
 
 export type {
  FilteredActionListItemProps as ItemProps,
@@ -9,3 +13,8 @@ export type {
  ListPropsBase,
  RenderItemFn,
 } from './types'
+
+export const FilteredActionList = Object.assign(FilteredList, {
+ BodyLoader: FilteredActionListBodyLoader,
+ Input: FilteredActionListInput,
+})

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -1053,4 +1053,5 @@ export const SelectPanel = Object.assign(Panel, {
  __SLOT__: Symbol('SelectPanel'),
  SecondaryActionButton: SecondaryButton,
  SecondaryActionLink: SecondaryLink,
+ Message: SelectPanelMessage,
 })

packages/react/src/SelectPanel/index.ts

@@ -1,4 +1,5 @@
 export {SelectPanel} from './SelectPanel'
+export {SelectPanelMessage} from './SelectPanelMessage'
 export type {SelectPanelProps} from './SelectPanel'
 
 export type {ItemProps, ItemInput, GroupedListProps, ListPropsBase} from '../FilteredActionList'

packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -7,6 +7,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
  "ActionList",
  "type ActionListDescriptionProps",
  "type ActionListDividerProps",
+ "type ActionListGroupHeadingProps",
  "type ActionListGroupProps",
  "type ActionListItemProps",
  "type ActionListLeadingVisualProps",
@@ -68,6 +69,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
  "type DialogWidth",
  "Flash",
  "type FlashProps",
+ "FocusKeys",
  "type FocusTrapHookSettings",
  "type FocusZoneHookSettings",
  "FormControl",
@@ -308,6 +310,8 @@ exports[`@primer/react/experimental > should not update exports without a semver
  "FeatureFlags",
  "type FeatureFlagsProps",
  "FilteredActionList",
+ "type FilteredActionListInputProps",
+ "FilteredActionListLoadingTypes",
  "type FilteredActionListProps",
  "getAccessibleKeybindingHintString",
  "Hidden",

packages/react/src/experimental/index.ts

@@ -98,8 +98,8 @@ export type {SkeletonAvatarProps} from '../SkeletonAvatar'
 export {FeatureFlags, DefaultFeatureFlags, useFeatureFlag} from '../FeatureFlags'
 export type {FeatureFlagsProps} from '../FeatureFlags'
 
-export {FilteredActionList} from '../FilteredActionList'
-export type {FilteredActionListProps} from '../FilteredActionList'
+export {FilteredActionList, FilteredActionListLoadingTypes} from '../FilteredActionList'
+export type {FilteredActionListProps, FilteredActionListInputProps} from '../FilteredActionList'
 export {IssueLabel} from './IssueLabel'
 export type {IssueLabelProps} from './IssueLabel'
 

packages/react/src/index.ts

@@ -36,7 +36,7 @@ export {useOverlay} from './hooks/useOverlay'
 export {useConfirm} from './ConfirmationDialog/ConfirmationDialog'
 export {useFocusTrap} from './hooks/useFocusTrap'
 export type {FocusTrapHookSettings} from './hooks/useFocusTrap'
-export {useFocusZone} from './hooks/useFocusZone'
+export {FocusKeys, useFocusZone} from './hooks/useFocusZone'
 export type {FocusZoneHookSettings} from './hooks/useFocusZone'
 export {useRefObjectAsForwardedRef} from './hooks/useRefObjectAsForwardedRef'
 export {useMergedRefs} from './hooks/useMergedRefs'
@@ -59,6 +59,7 @@ export {ActionList} from './ActionList'
 export type {
  ActionListProps,
  ActionListGroupProps,
+ ActionListGroupHeadingProps,
  ActionListItemProps,
  ActionListLinkItemProps,
  ActionListDividerProps,