SelectPanel Select all feature

.changeset/rude-cougars-battle.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add new SelectPanel `Select all` feature

e2e/components/SelectPanel.test.ts

@@ -21,6 +21,7 @@ const scenarios = matrix({
       id: 'components-selectpanel-features--with-placeholder-for-search-input',
       name: 'With Placeholder for Search Input',
     },
+    {id: 'components-selectpanel-features--with-select-all', name: 'With Select All'},
     {id: 'components-selectpanel-examples--above-tall-body', name: 'Above Tall Body'},
     {id: 'components-selectpanel-examples--height-variations-and-scroll', name: 'Height Variations and Scroll'},
     {

packages/react/src/FilteredActionList/FilteredActionList.module.css

@@ -13,3 +13,23 @@
     }
   }
 }
+
+.SelectAllContainer {
+  display: flex;
+  align-items: center;
+  padding-block: var(--base-size-4);
+  padding-inline: var(--base-size-16);
+  background: var(--bgColor-muted);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+.SelectAllCheckbox {
+  /* -1px hack to offset 1px border-bottom causing uneven alignment */
+  /* stylelint-disable-next-line primer/spacing */
+  margin: var(--base-size-4) var(--base-size-8) calc(var(--base-size-4) - 1px) 0;
+}
+
+.SelectAllLabel {
+  font-size: var(--text-body-size-medium);
+  color: var(--fgColor-muted);
+}

packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx

@@ -24,6 +24,8 @@ import {
 } from './FilteredActionListLoaders'
 import {announce} from '@primer/live-region-element'
 import {debounce} from '@github/mini-throttle'
+import classes from './FilteredActionList.module.css'
+import Checkbox from '../Checkbox'
 
 const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
@@ -42,6 +44,7 @@ export interface FilteredActionListProps
   inputRef?: React.RefObject<HTMLInputElement>
   className?: string
   announcementsEnabled?: boolean
+  onSelectAllChange?: (checked: boolean) => void
 }
 
 const StyledHeader = styled.div`
@@ -125,6 +128,7 @@ export function FilteredActionList({
   sx,
   className,
   announcementsEnabled = false,
+  onSelectAllChange,
   ...listProps
 }: FilteredActionListProps): JSX.Element {
   const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '')
@@ -137,13 +141,17 @@ export function FilteredActionList({
     [onFilterChange, setInternalFilterValue],
   )
 
+  const selectAllChecked = items.length > 0 && items.every(item => item.selected)
+  const selectAllIndeterminate = !selectAllChecked && items.some(item => item.selected)
+
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const [listContainerElement, setListContainerElement] = useState<HTMLDivElement | null>(null)
   const inputRef = useProvidedRefOrCreate<HTMLInputElement>(providedInputRef)
   const [needItemsChangedAnnouncement, setNeedItemsChangedAnnouncement] = useState<boolean>(false)
   const activeDescendantRef = useRef<HTMLElement>()
   const listId = useId()
   const inputDescriptionTextId = useId()
+  const selectAllLabelText = selectAllChecked ? 'Deselect all' : 'Select all'
   const onInputKeyPress: KeyboardEventHandler = useCallback(
     event => {
       if (event.key === 'Enter' && activeDescendantRef.current) {
@@ -219,6 +227,15 @@ export function FilteredActionList({
 
   useScrollFlash(scrollContainerRef)
 
+  const handleSelectAllChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (onSelectAllChange) {
+        onSelectAllChange(e.target.checked)
+      }
+    },
+    [onSelectAllChange],
+  )
+
   return (
     <Box
       display="flex"
@@ -249,6 +266,20 @@ export function FilteredActionList({
         />
       </StyledHeader>
       <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
+      {onSelectAllChange !== undefined && (
+        <div className={classes.SelectAllContainer}>
+          <Checkbox
+            id="select-all-checkbox"
+            className={classes.SelectAllCheckbox}
+            checked={selectAllChecked}
+            indeterminate={selectAllIndeterminate}
+            onChange={handleSelectAllChange}
+          />
+          <label className={classes.SelectAllLabel} htmlFor="select-all-checkbox">
+            {selectAllLabelText}
+          </label>
+        </div>
+      )}
       <Box ref={scrollContainerRef} overflow="auto" flexGrow={1}>
         {loading && scrollContainerRef.current && loadingType.appearsInBody ? (
           <FilteredActionListBodyLoader loadingType={loadingType} height={scrollContainerRef.current.clientHeight} />

packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx

@@ -20,6 +20,7 @@ import type {SxProp} from '../sx'
 import type {FilteredActionListLoadingType} from './FilteredActionListLoaders'
 import {FilteredActionListLoadingTypes, FilteredActionListBodyLoader} from './FilteredActionListLoaders'
 import classes from './FilteredActionList.module.css'
+import Checkbox from '../Checkbox'
 
 import {isValidElementType} from 'react-is'
 import type {RenderItemFn} from '../deprecated/ActionList/List'
@@ -45,6 +46,7 @@ export interface FilteredActionListProps
   className?: string
   announcementsEnabled?: boolean
   fullScreenOnNarrow?: boolean
+  onSelectAllChange?: (checked: boolean) => void
 }
 
 const StyledHeader = styled.div`
@@ -70,6 +72,7 @@ export function FilteredActionList({
   className,
   announcementsEnabled = true,
   fullScreenOnNarrow,
+  onSelectAllChange,
   ...listProps
 }: FilteredActionListProps): JSX.Element {
   const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '')
@@ -88,6 +91,11 @@ export function FilteredActionList({
   const activeDescendantRef = useRef<HTMLElement>()
   const listId = useId()
   const inputDescriptionTextId = useId()
+
+  const selectAllChecked = items.length > 0 && items.every(item => item.selected)
+  const selectAllIndeterminate = !selectAllChecked && items.some(item => item.selected)
+
+  const selectAllLabelText = selectAllChecked ? 'Deselect all' : 'Select all'
   const onInputKeyPress: KeyboardEventHandler = useCallback(
     event => {
       if (event.key === 'Enter' && activeDescendantRef.current) {
@@ -150,6 +158,15 @@ export function FilteredActionList({
   useAnnouncements(items, {current: listContainerElement}, inputRef, announcementsEnabled, loading)
   useScrollFlash(scrollContainerRef)
 
+  const handleSelectAllChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (onSelectAllChange) {
+        onSelectAllChange(e.target.checked)
+      }
+    },
+    [onSelectAllChange],
+  )
+
   function getItemListForEachGroup(groupId: string) {
     const itemsInGroup = []
     for (const item of items) {
@@ -232,6 +249,20 @@ export function FilteredActionList({
         />
       </StyledHeader>
       <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
+      {onSelectAllChange !== undefined && (
+        <div className={classes.SelectAllContainer}>
+          <Checkbox
+            id="select-all-checkbox"
+            className={classes.SelectAllCheckbox}
+            checked={selectAllChecked}
+            indeterminate={selectAllIndeterminate}
+            onChange={handleSelectAllChange}
+          />
+          <label className={classes.SelectAllLabel} htmlFor="select-all-checkbox">
+            {selectAllLabelText}
+          </label>
+        </div>
+      )}
       <div ref={scrollContainerRef} className={classes.Container}>
         {getBodyContent()}
       </div>

packages/react/src/SelectPanel/SelectPanel.docs.json

@@ -184,6 +184,12 @@
       "description": "Whether to display the selected items at the top of the list",
       "default": "true"
     },
+    {
+      "name": "showSelectAll",
+      "type": "boolean",
+      "defaultValue": "false",
+      "description": "When `true` and on a multi-select SelectPanel, displays a 'Select all' checkbox that allows users to select or deselect all visible items at once. The checkbox label automatically toggles between 'Select all' and 'Deselect all' based on the current selection state, and shows an indeterminate state when some items are selected."
+    },
     {
       "name": "disableFullscreenOnNarrow",
       "type": "boolean",

packages/react/src/SelectPanel/SelectPanel.features.stories.tsx

@@ -888,3 +888,44 @@ export const WithInactiveItems = () => {
     </FormControl>
   )
 }
+
+export const WithSelectAll = () => {
+  const [selected, setSelected] = useState<ItemInput[]>([])
+  const [filter, setFilter] = useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+
+  const [open, setOpen] = useState(false)
+
+  return (
+    <FormControl>
+      <FormControl.Label>Labels</FormControl.Label>
+      <SelectPanel
+        title="Select labels"
+        placeholder="Select labels" // button text when no items are selected
+        subtitle="Use labels to organize issues and pull requests"
+        renderAnchor={({children, ...anchorProps}) => (
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+            {children}
+          </Button>
+        )}
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        width="medium"
+        showSelectAll={true}
+        message={
+          filteredItems.length === 0
+            ? {
+                variant: 'empty',
+                title: `No language found for \`${filter}\``,
+                body: 'Adjust your search term to find other languages',
+              }
+            : undefined
+        }
+      />
+    </FormControl>
+  )
+}