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,