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>