Selectpanel2: Remove SelectPanel.ActionList API

src/ActionList/ActionListContainerContext.tsx

@@ -6,7 +6,7 @@ import {AriaRole} from '../utils/types'
 type ContextProps = {
   container?: string
   listRole?: AriaRole
-  selectionVariant?: 'single' | 'multiple' // TODO: Remove after DropdownMenu2 deprecation
+  selectionVariant?: 'single' | 'multiple'
   selectionAttribute?: 'aria-selected' | 'aria-checked'
   listLabelledBy?: string
   // This can be any function, we don't know anything about the arguments

src/ActionList/Item.tsx

@@ -38,7 +38,12 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       trailingVisual: TrailingVisual,
       description: Description,
     })
-    const {variant: listVariant, showDividers, selectionVariant: listSelectionVariant} = React.useContext(ListContext)
+    const {
+      variant: listVariant,
+      role: listRole,
+      showDividers,
+      selectionVariant: listSelectionVariant,
+    } = React.useContext(ListContext)
     const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
     const {container, afterSelect, selectionAttribute} = React.useContext(ActionListContainerContext)
 
@@ -65,6 +70,8 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       if (selectionVariant === 'single') itemRole = 'menuitemradio'
       else if (selectionVariant === 'multiple') itemRole = 'menuitemcheckbox'
       else itemRole = 'menuitem'
+    } else if (container === 'SelectPanel' && listRole === 'listbox') {
+      if (selectionVariant !== undefined) itemRole = 'option'
     }
 
     const {theme} = useTheme()

src/drafts/SelectPanel2/SelectPanel.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {SelectPanel} from './SelectPanel'
-import {ActionList, ActionMenu, Avatar, Box, Button} from '../../../src/index'
-import {ArrowRightIcon, EyeIcon, GitBranchIcon, TriangleDownIcon} from '@primer/octicons-react'
+import {ActionList, ActionMenu, Avatar, Box, Button, Flash} from '../../../src/index'
+import {ArrowRightIcon, AlertIcon, EyeIcon, GitBranchIcon, TriangleDownIcon} from '@primer/octicons-react'
 import data from './mock-data'
 
 const getCircle = (color: string) => (
@@ -97,11 +97,12 @@ export const AControlled = () => {
         <SelectPanel.Header>
           <SelectPanel.SearchInput onChange={onSearchInputChange} />
         </SelectPanel.Header>
-        <SelectPanel.ActionList>
-          {itemsToShow.length === 0 ? (
-            <SelectPanel.EmptyMessage>No labels found for &quot;{query}&quot;</SelectPanel.EmptyMessage>
-          ) : (
-            itemsToShow.map(label => (
+
+        {itemsToShow.length === 0 ? (
+          <SelectPanel.EmptyMessage>No labels found for &quot;{query}&quot;</SelectPanel.EmptyMessage>
+        ) : (
+          <ActionList>
+            {itemsToShow.map(label => (
               <ActionList.Item
                 key={label.id}
                 onSelect={() => onLabelSelect(label.id)}
@@ -111,9 +112,10 @@ export const AControlled = () => {
                 {label.name}
                 <ActionList.Description variant="block">{label.description}</ActionList.Description>
               </ActionList.Item>
-            ))
-          )}
-        </SelectPanel.ActionList>
+            ))}
+          </ActionList>
+        )}
+
         <SelectPanel.Footer>
           <SelectPanel.SecondaryButton>Edit labels</SelectPanel.SecondaryButton>
         </SelectPanel.Footer>
@@ -186,24 +188,22 @@ const SuspendedActionList: React.FC<{query: string}> = ({query}) => {
 
   const itemsToShow = query ? filteredLabels : data.labels.sort(sortingFn)
 
-  return (
-    <SelectPanel.ActionList>
-      {itemsToShow.length === 0 ? (
-        <SelectPanel.EmptyMessage>No labels found for &quot;{query}&quot;</SelectPanel.EmptyMessage>
-      ) : (
-        itemsToShow.map(label => (
-          <ActionList.Item
-            key={label.id}
-            onSelect={() => onLabelSelect(label.id)}
-            selected={selectedLabelIds.includes(label.id)}
-          >
-            <ActionList.LeadingVisual>{getCircle(label.color)}</ActionList.LeadingVisual>
-            {label.name}
-            <ActionList.Description variant="block">{label.description}</ActionList.Description>
-          </ActionList.Item>
-        ))
-      )}
-    </SelectPanel.ActionList>
+  return itemsToShow.length === 0 ? (
+    <SelectPanel.EmptyMessage>No labels found for &quot;{query}&quot;</SelectPanel.EmptyMessage>
+  ) : (
+    <ActionList>
+      {itemsToShow.map(label => (
+        <ActionList.Item
+          key={label.id}
+          onSelect={() => onLabelSelect(label.id)}
+          selected={selectedLabelIds.includes(label.id)}
+        >
+          <ActionList.LeadingVisual>{getCircle(label.color)}</ActionList.LeadingVisual>
+          {label.name}
+          <ActionList.Description variant="block">{label.description}</ActionList.Description>
+        </ActionList.Item>
+      ))}
+    </ActionList>
   )
 }
 
@@ -287,26 +287,24 @@ const SearchableUserList: React.FC<{
   }
   const itemsToShow = query ? filteredUsers : repository.collaborators.sort(sortingFn)
 
-  return (
-    <SelectPanel.ActionList>
-      {itemsToShow.length === 0 ? (
-        <SelectPanel.EmptyMessage>No users found for &quot;{query}&quot;</SelectPanel.EmptyMessage>
-      ) : (
-        itemsToShow.map(user => (
-          <ActionList.Item
-            key={user.id}
-            onSelect={() => onUserSelect(user.id)}
-            selected={selectedUserIds.includes(user.id)}
-          >
-            <ActionList.LeadingVisual>
-              <Avatar src={`https://github.com/${user.login}.png`} />
-            </ActionList.LeadingVisual>
-            {user.login}
-            <ActionList.Description>{user.name}</ActionList.Description>
-          </ActionList.Item>
-        ))
-      )}
-    </SelectPanel.ActionList>
+  return itemsToShow.length === 0 ? (
+    <SelectPanel.EmptyMessage>No users found for &quot;{query}&quot;</SelectPanel.EmptyMessage>
+  ) : (
+    <ActionList>
+      {itemsToShow.map(user => (
+        <ActionList.Item
+          key={user.id}
+          onSelect={() => onUserSelect(user.id)}
+          selected={selectedUserIds.includes(user.id)}
+        >
+          <ActionList.LeadingVisual>
+            <Avatar src={`https://github.com/${user.login}.png`} />
+          </ActionList.LeadingVisual>
+          {user.login}
+          <ActionList.Description>{user.name}</ActionList.Description>
+        </ActionList.Item>
+      ))}
+    </ActionList>
   )
 }
 
@@ -401,15 +399,15 @@ export const TODO1Uncontrolled = () => {
           <SelectPanel.SearchInput />
         </SelectPanel.Header>
 
-        <SelectPanel.ActionList>
+        <ActionList>
           {data.labels.map(label => (
             <ActionList.Item key={label.id}>
               <ActionList.LeadingVisual>{getCircle(label.color)}</ActionList.LeadingVisual>
               {label.name}
               <ActionList.Description variant="block">{label.description}</ActionList.Description>
             </ActionList.Item>
           ))}
-        </SelectPanel.ActionList>
+        </ActionList>
 
         <SelectPanel.Footer>
           <SelectPanel.SecondaryButton>Edit labels</SelectPanel.SecondaryButton>
@@ -506,11 +504,11 @@ export const HWithFilterButtons = () => {
           </Box>
         </SelectPanel.Header>
 
-        <SelectPanel.ActionList selectionVariant="single">
-          {itemsToShow.length === 0 ? (
-            <SelectPanel.EmptyMessage>No labels found for &quot;{'query'}&quot;</SelectPanel.EmptyMessage>
-          ) : (
-            itemsToShow.map(item => (
+        {itemsToShow.length === 0 ? (
+          <SelectPanel.EmptyMessage>No labels found for &quot;{'query'}&quot;</SelectPanel.EmptyMessage>
+        ) : (
+          <ActionList selectionVariant="single">
+            {itemsToShow.map(item => (
               <ActionList.Item
                 key={item.id}
                 selected={selectedRef === item.id}
@@ -519,9 +517,9 @@ export const HWithFilterButtons = () => {
                 {item.name}
                 <ActionList.TrailingVisual>{item.trailingInfo}</ActionList.TrailingVisual>
               </ActionList.Item>
-            ))
-          )}
-        </SelectPanel.ActionList>
+            ))}
+          </ActionList>
+        )}
 
         <SelectPanel.Footer>
           <SelectPanel.SecondaryButton as="a" href={`/${selectedFilter}`}>
@@ -569,7 +567,7 @@ export const EMinimal = () => {
         {/* @ts-ignore todo */}
         <SelectPanel.Button>Assign label</SelectPanel.Button>
 
-        <SelectPanel.ActionList>
+        <ActionList>
           {itemsToShow.map(label => (
             <ActionList.Item
               key={label.id}
@@ -581,7 +579,8 @@ export const EMinimal = () => {
               <ActionList.Description variant="block">{label.description}</ActionList.Description>
             </ActionList.Item>
           ))}
-        </SelectPanel.ActionList>
+        </ActionList>
+        <SelectPanel.Footer />
       </SelectPanel>
     </>
   )
@@ -645,7 +644,7 @@ export const FExternalAnchor = () => {
         }}
         onCancel={() => setOpen(false)} // close on cancel
       >
-        <SelectPanel.ActionList>
+        <ActionList>
           {itemsToShow.map(label => (
             <ActionList.Item
               key={label.id}
@@ -657,7 +656,8 @@ export const FExternalAnchor = () => {
               <ActionList.Description variant="block">{label.description}</ActionList.Description>
             </ActionList.Item>
           ))}
-        </SelectPanel.ActionList>
+        </ActionList>
+        <SelectPanel.Footer />
       </SelectPanel>
     </>
   )
@@ -687,6 +687,13 @@ export const GOpenFromMenu = () => {
   return (
     <>
       <h1>Open from ActionMenu</h1>
+      <Flash variant="danger">
+        <AlertIcon />
+        This implementation will most likely change.{' '}
+        <a href="https://github.com/github/primer/discussions/2614#discussioncomment-6879407">
+          See decision log for more details.
+        </a>
+      </Flash>
       <p>
         To open SelectPanel from a menu, you would need to use an external anchor and pass `anchorRef` to `SelectPanel`.
         You would also need to control the `open` state for both ActionMenu and SelectPanel.
@@ -761,13 +768,14 @@ export const GOpenFromMenu = () => {
         }}
         height="medium"
       >
-        <SelectPanel.ActionList>
+        <ActionList>
           {itemsToShow.map(item => (
             <ActionList.Item key={item} onSelect={() => onEventSelect(item)} selected={selectedEvents.includes(item)}>
               {item}
             </ActionList.Item>
           ))}
-        </SelectPanel.ActionList>
+        </ActionList>
+        <SelectPanel.Footer />
       </SelectPanel>
     </>
   )

src/drafts/SelectPanel2/SelectPanel.tsx

@@ -11,11 +11,10 @@ import {
   Tooltip,
   TextInput,
   AnchoredOverlayProps,
-  ActionList,
-  ActionListProps,
   Spinner,
   Text,
 } from '../../../src/index'
+import {ActionListContainerContext} from '../../../src/ActionList/ActionListContainerContext'
 import {useSlots} from '../../hooks/useSlots'
 import {ClearIcon} from './tmp-ClearIcon'
 import {useProvidedRefOrCreate} from '../../hooks'
@@ -55,13 +54,13 @@ const SelectPanel = props => {
   React.useEffect(() => setInternalOpen(props.open), [props.open])
 
   const onInternalClose = () => {
-    if (props.open === 'undefined') setInternalOpen(false)
+    if (props.open === undefined) setInternalOpen(false)
     if (typeof props.onCancel === 'function') props.onCancel()
   }
   // @ts-ignore todo
   const onInternalSubmit = event => {
     event.preventDefault()
-    if (props.open === 'undefined') setInternalOpen(false)
+    if (props.open === undefined) setInternalOpen(false)
     if (typeof props.onSubmit === 'function') props.onSubmit(event)
   }
 
@@ -100,12 +99,41 @@ const SelectPanel = props => {
             setSearchQuery,
           }}
         >
-          <Box as="form" onSubmit={onInternalSubmit} sx={{display: 'flex', flexDirection: 'column', height: '100%'}}>
+          <Box
+            as="form"
+            onSubmit={onInternalSubmit}
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100%',
+            }}
+          >
             {/* render default header as fallback */}
             {slots.header || <SelectPanel.Header />}
-            {childrenInBody}
-            {/* render default footer as fallback */}
-            {slots.footer || <SelectPanel.Footer />}
+            <Box
+              sx={{
+                flexShrink: 1,
+                flexGrow: 1,
+                overflow: 'hidden',
+
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                ul: {overflowY: 'auto', flexGrow: 1},
+              }}
+            >
+              <ActionListContainerContext.Provider
+                value={{
+                  container: 'SelectPanel',
+                  listRole: 'listbox',
+                  selectionAttribute: 'aria-selected',
+                  selectionVariant: props.selectionVariant || 'multiple',
+                }}
+              >
+                {childrenInBody}
+              </ActionListContainerContext.Provider>
+            </Box>
+            {slots.footer}
           </Box>
         </SelectPanelContext.Provider>
       </AnchoredOverlay>
@@ -215,25 +243,6 @@ const SelectPanelSearchInput = props => {
 }
 SelectPanel.SearchInput = SelectPanelSearchInput
 
-const SelectPanelActionList: React.FC<React.PropsWithChildren<ActionListProps>> = props => {
-  /* features to implement for uncontrolled:
-     1. select
-     2. sort
-     3. divider
-     4. search
-     5. different results view
-  */
-
-  return (
-    <>
-      <ActionList sx={{flexShrink: 1, flexGrow: 1, overflowY: 'auto'}} selectionVariant="multiple" {...props}>
-        {props.children}
-      </ActionList>
-    </>
-  )
-}
-SelectPanel.ActionList = SelectPanelActionList
-
 const SelectPanelFooter = ({...props}) => {
   const {onCancel} = React.useContext(SelectPanelContext)
 
@@ -277,7 +286,7 @@ const SelectPanelLoading: React.FC<{children: string}> = ({children = 'Fetching
         flexDirection: 'column',
         justifyContent: 'center',
         alignItems: 'center',
-        flexGrow: 1,
+        height: '100%',
         gap: 3,
       }}
     >