SelectPanel: Update SelectPanel to use modern ActionList

packages/react/src/FilteredActionList/FilteredActionList.tsx

@@ -8,8 +8,8 @@ import Spinner from '../Spinner'
 import type {TextInputProps} from '../TextInput'
 import TextInput from '../TextInput'
 import {get} from '../constants'
-import {ActionList} from '../deprecated/ActionList'
-import type {GroupedListProps, ListPropsBase} from '../deprecated/ActionList/List'
+import {ActionList} from '../ActionList'
+import type {GroupedListProps, ListPropsBase, ItemInput} from '../deprecated/ActionList/List'
 import {useFocusZone} from '../hooks/useFocusZone'
 import {useId} from '../hooks/useId'
 import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate'
@@ -18,6 +18,8 @@ import useScrollFlash from '../hooks/useScrollFlash'
 import {VisuallyHidden} from '../internal/components/VisuallyHidden'
 import type {SxProp} from '../sx'
 
+import {isValidElementType} from 'react-is'
+
 const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
 export interface FilteredActionListProps
@@ -59,7 +61,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()
@@ -109,6 +111,61 @@ export function FilteredActionList({
 
   useScrollFlash(scrollContainerRef)
 
+  function MappedActionList(item: ItemInput) {
+    const {
+      description,
+      descriptionVariant,
+      sx,
+      text,
+      variant,
+      disabled,
+      trailingVisual: TrailingVisual,
+      leadingVisual: LeadingVisual,
+      trailingText,
+      trailingIcon: TrailingIcon,
+      onAction,
+      selected,
+    } = item
+
+    return (
+      <ActionList.Item
+        sx={sx}
+        role="option"
+        onSelect={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
+          if (typeof onAction === 'function')
+            onAction(item, e as React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>)
+        }}
+        selected={selected}
+        variant={variant}
+        disabled={disabled}
+      >
+        {LeadingVisual ? (
+          <ActionList.LeadingVisual>
+            <LeadingVisual />
+          </ActionList.LeadingVisual>
+        ) : null}
+        {text}
+        {description ? (
+          <ActionList.Description variant={descriptionVariant}>{description}</ActionList.Description>
+        ) : null}
+        {TrailingVisual ? (
+          <ActionList.TrailingVisual>
+            {typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? (
+              <TrailingVisual />
+            ) : (
+              TrailingVisual
+            )}
+          </ActionList.TrailingVisual>
+        ) : TrailingIcon || trailingText ? (
+          <ActionList.TrailingVisual>
+            {trailingText}
+            {TrailingIcon && <TrailingIcon />}
+          </ActionList.TrailingVisual>
+        ) : null}
+      </ActionList.Item>
+    )
+  }
+
   return (
     <Box display="flex" flexDirection="column" overflow="hidden" sx={sx}>
       <StyledHeader>
@@ -134,7 +191,11 @@ export function FilteredActionList({
             <Spinner />
           </Box>
         ) : (
-          <ActionList ref={listContainerRef} items={items} {...listProps} role="listbox" id={listId} />
+          <ActionList ref={listContainerRef} {...listProps} role="listbox" id={listId}>
+            {items.map((item, index) => {
+              return <MappedActionList key={index} {...item} />
+            })}
+          </ActionList>
         )}
       </Box>
     </Box>