primer · TylerJDev · Mar 26, 2025
@@ -20,7 +20,7 @@ const scenarios = matrix({
       name: 'With Placeholder for Search Input',
     },
     {id: 'components-selectpanel-examples--above-tall-body', name: 'Above Tall Body'},
-    {id: 'components-selectpanel-examples--height-variations-and-scroll', name: 'Height Variations and Scroll'},
+    {id: 'components-selectpanel-examples--height-variantions-and-scroll', name: 'Height Variantions and Scroll'},
     {
       id: 'components-selectpanel-examples--height-initial-with-overflowing-items-story',
       name: 'Height Initial with Overflowing Items',

@@ -14,7 +14,6 @@ import {VisuallyHidden} from '../VisuallyHidden'
 import type {SxProp} from '../sx'
 import type {FilteredActionListLoadingType} from './FilteredActionListLoaders'
 import {FilteredActionListLoadingTypes, FilteredActionListBodyLoader} from './FilteredActionListLoaders'
-import classes from './FilteredActionList.module.css'
 import {ActionListContainerContext} from '../ActionList/ActionListContainerContext'
 
 import {isValidElementType} from 'react-is'
@@ -33,7 +32,6 @@ export interface FilteredActionListProps
   onInputRefChanged?: (ref: React.RefObject<HTMLInputElement>) => void
   textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
   inputRef?: React.RefObject<HTMLInputElement>
-  message?: React.ReactNode
   className?: string
   announcementsEnabled?: boolean
 }
@@ -56,7 +54,6 @@ export function FilteredActionList({
   sx,
   groupMetadata,
   showItemDividers,
-  message,
   className,
   selectionVariant,
   announcementsEnabled = true,
@@ -153,47 +150,6 @@ export function FilteredActionList({
     return itemsInGroup
   }
 
-  function getBodyContent() {
-    if (loading && scrollContainerRef.current && loadingType.appearsInBody) {
-      return <FilteredActionListBodyLoader loadingType={loadingType} height={scrollContainerRef.current.clientHeight} />
-    }
-    if (message) {
-      return message
-    }
-
-    return (
-      <ActionListContainerContext.Provider
-        value={{
-          container: 'FilteredActionList',
-          listRole: 'listbox',
-          selectionAttribute: 'aria-selected',
-          selectionVariant,
-          enableFocusZone: true,
-        }}
-      >
-        <ActionList ref={listRef} showDividers={showItemDividers} {...listProps} id={listId} sx={{flexGrow: 1}}>
-          {groupMetadata?.length
-            ? groupMetadata.map((group, index) => {
-                return (
-                  <ActionList.Group key={index}>
-                    <ActionList.GroupHeading variant={group.header?.variant ? group.header.variant : undefined}>
-                      {group.header?.title ? group.header.title : `Group ${group.groupId}`}
-                    </ActionList.GroupHeading>
-                    {getItemListForEachGroup(group.groupId).map((item, index) => {
-                      const key = item.key ?? item.id?.toString() ?? index.toString()
-                      return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
-                    })}
-                  </ActionList.Group>
-                )
-              })
-            : items.map((item, index) => {
-                const key = item.key ?? item.id?.toString() ?? index.toString()
-                return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
-              })}
-        </ActionList>
-      </ActionListContainerContext.Provider>
-    )
-  }
   useAnnouncements(items, listRef, inputRef, enableAnnouncements)
 
   return (
@@ -227,9 +183,42 @@ export function FilteredActionList({
         />
       </StyledHeader>
       <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
-      <div ref={scrollContainerRef} className={classes.Container}>
-        {getBodyContent()}
-      </div>
+      <Box ref={scrollContainerRef} overflow="auto" display="flex" flexGrow={1}>
+        {loading && scrollContainerRef.current && loadingType.appearsInBody ? (
+          <FilteredActionListBodyLoader loadingType={loadingType} height={scrollContainerRef.current.clientHeight} />
+        ) : (
+          <ActionListContainerContext.Provider
+            value={{
+              container: 'FilteredActionList',
+              listRole: 'listbox',
+              selectionAttribute: 'aria-selected',
+              selectionVariant,
+              enableFocusZone: true,
+            }}
+          >
+            <ActionList ref={listRef} showDividers={showItemDividers} {...listProps} id={listId} sx={{flexGrow: 1}}>
+              {groupMetadata?.length
+                ? groupMetadata.map((group, index) => {
+                    return (
+                      <ActionList.Group key={index}>
+                        <ActionList.GroupHeading variant={group.header?.variant ? group.header.variant : undefined}>
+                          {group.header?.title ? group.header.title : `Group ${group.groupId}`}
+                        </ActionList.GroupHeading>
+                        {getItemListForEachGroup(group.groupId).map((item, index) => {
+                          const key = item.key ?? item.id?.toString() ?? index.toString()
+                          return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
+                        })}
+                      </ActionList.Group>
+                    )
+                  })
+                : items.map((item, index) => {
+                    const key = item.key ?? item.id?.toString() ?? index.toString()
+                    return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
+                  })}
+            </ActionList>
+          </ActionListContainerContext.Provider>
+        )}
+      </Box>
     </Box>
   )
 }

@@ -9,21 +9,13 @@ import type {ItemInput} from '../deprecated/ActionList/List'
 import {FeatureFlags} from '../FeatureFlags'
 import FormControl from '../FormControl'
 
-const meta: Meta<typeof SelectPanel> = {
+const meta = {
   title: 'Components/SelectPanel/Dev',
   component: SelectPanel,
 } satisfies Meta<typeof SelectPanel>
 
 export default meta
 
-const NoResultsMessage = (filter: string): {variant: 'empty'; title: string; body: string} => {
-  return {
-    variant: 'empty',
-    title: `No language found for \`${filter}\``,
-    body: 'Adjust your search term to find other languages',
-  }
-}
-
 function getColorCircle(color: string) {
   return function () {
     return (
@@ -116,7 +108,6 @@ export const WithCss = () => {
           onSelectedChange={setSelected}
           onFilterChange={setFilter}
           className="testCustomClassnameMono"
-          message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </FormControl>
     </FeatureFlags>
@@ -168,7 +159,6 @@ export const WithSx = () => {
           onSelectedChange={setSelected}
           onFilterChange={setFilter}
           sx={{fontFamily: 'Times New Roman'}}
-          message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </FormControl>
     </FeatureFlags>
@@ -221,7 +211,6 @@ export const WithSxAndCSS = () => {
           onFilterChange={setFilter}
           sx={{fontFamily: 'Times New Roman'}}
           className="testCustomClassnameMono"
-          message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </FormControl>
     </FeatureFlags>

@@ -150,48 +150,7 @@
       "type": "string | React.ReactElement",
       "defaultValue": "null",
       "description": "Footer rendered at the end of the panel"
-    },
-    {
-      "name": "message",
-      "type": "{title: string | React.ReactElement; variant: 'empty' | 'error' | 'warning';  body: React.ReactNode;}",
-      "defaultValue": "A default empty message is provided by default if this option is not supplied",
-      "description": "Message to display in the panel in case of error or empty results"
-    },
-    {
-      "name": "notice",
-      "type": "{text: string | React.ReactElement; variant: 'empty' | 'error' | 'warning';}",
-      "description": "Optional notice to display on top of the panel"
     }
   ],
-  "subcomponents": [
-    {
-      "name": "SelectPanel.Message",
-      "props": [
-        {
-          "name": "title",
-          "type": "string",
-          "description": "A title for the message"
-        },
-        {
-          "name": "variant",
-          "type": "'empty' | 'error' | 'warning'",
-          "description": "The variant of the message",
-          "required": true
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "defaultValue": "",
-          "description": "Custom className"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "defaultValue": "",
-          "required": true,
-          "description": "The message to display"
-        }
-      ]
-    }
-  ]
+  "subcomponents": []
 }
@@ -11,21 +11,13 @@ import FormControl from '../FormControl'
 import {Stack} from '../Stack'
 import {Dialog} from '../experimental'
 
-const meta: Meta<typeof SelectPanel> = {
+const meta = {
   title: 'Components/SelectPanel/Examples',
   component: SelectPanel,
 } satisfies Meta<typeof SelectPanel>
 
 export default meta
 
-const NoResultsMessage = (filter: string): {variant: 'empty'; title: string; body: string} => {
-  return {
-    variant: 'empty',
-    title: `No language found for \`${filter}\``,
-    body: 'Adjust your search term to find other languages',
-  }
-}
-
 function getColorCircle(color: string) {
   return function () {
     return (
@@ -90,7 +82,6 @@ export const HeightInitialWithOverflowingItemsStory = () => {
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -136,7 +127,6 @@ export const HeightInitialWithUnderflowingItemsStory = () => {
         onFilterChange={setFilter}
         showItemDividers={true}
         overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -159,7 +149,7 @@ export const HeightInitialWithUnderflowingItemsAfterFetch = () => {
     [fetchedItems, filter, selected],
   )
   // design guidelines say to sort selected items first
-  const selectedItemsSortedFirst = filteredItems.sort((a, b) => {
+  const selectedItemsSortedFirst = fetchedItems.sort((a, b) => {
     const aIsSelected = selected.some(selectedItem => selectedItem.text === a.text)
     const bIsSelected = selected.some(selectedItem => selectedItem.text === b.text)
     if (aIsSelected && !bIsSelected) return -1
@@ -189,14 +179,13 @@ export const HeightInitialWithUnderflowingItemsAfterFetch = () => {
         placeholder="Select labels" // button text when no items are selected
         open={open}
         onOpenChange={onOpenChange}
-        loading={filteredItems.length === 0 && !filter}
+        loading={filteredItems.length === 0}
         items={selectedItemsSortedFirst}
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         showItemDividers={true}
         overlayProps={{width: 'small', height, maxHeight: 'xsmall'}}
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -239,7 +228,6 @@ export const AboveTallBody = () => {
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         showItemDividers={true}
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
       <div
         style={{
@@ -257,7 +245,7 @@ export const AboveTallBody = () => {
   )
 }
 
-export const HeightVariationsAndScroll = () => {
+export const HeightVariantionsAndScroll = () => {
   const longItems = [...items, ...items, ...items, ...items, ...items, ...items, ...items, ...items]
   const [filter, setFilter] = useState('')
   // Example A
@@ -305,7 +293,6 @@ export const HeightVariationsAndScroll = () => {
           onFilterChange={setFilter}
           showItemDividers={true}
           overlayProps={{height: 'medium'}}
-          message={selectedItemsSortedFirstA.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </FormControl>
       <br />
@@ -329,7 +316,6 @@ export const HeightVariationsAndScroll = () => {
             height: 'auto',
             maxHeight: 'medium',
           }}
-          message={selectedItemsSortedFirstB.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </FormControl>
     </>
@@ -404,7 +390,6 @@ export const CustomItemRenderer = () => {
             </Box>
           </ActionList.Item>
         )}
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -454,7 +439,6 @@ export const ItemsInScope = () => {
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -500,7 +484,6 @@ export const RepositionAfterLoading = () => {
           selected={selected}
           onSelectedChange={setSelected}
           onFilterChange={setFilter}
-          message={filteredItems.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </Stack>
     </>
@@ -548,7 +531,6 @@ export const SelectPanelRepositionInsideDialog = () => {
           onSelectedChange={setSelected}
           onFilterChange={setFilter}
           overlayProps={{anchorSide: 'outside-top'}}
-          message={filteredItems.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </Stack>
     </Dialog>