fix(filtered-action-list): respect item renderers

.changeset/filtered-action-list-item-renderer.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+FilteredActionList: Respect item-level custom renderers

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

@@ -484,7 +484,7 @@ export function CustomItemRendering() {
       <div>Use renderItem to customize how each item is displayed.</div>
       <FilteredActionList
         aria-label="Labels"
-        className={classes.FeatureListContainer}
+        className={classes.FilteredActionListContainer}
         items={visibleItems}
         onFilterChange={setFilter}
         placeholderText="Filter labels"

packages/react/src/FilteredActionList/FilteredActionList.test.tsx

@@ -99,6 +99,51 @@ describe('FilteredActionList', () => {
       ).toBeInTheDocument()
     })
   })
+
+  describe('custom item rendering', () => {
+    it('uses an item-level renderer', () => {
+      const renderItem = vi.fn(() => <li>Custom item</li>)
+
+      const {getByText} = render(
+        <FilteredActionList items={[{id: 1, text: 'Item 1', renderItem}]} onFilterChange={vi.fn()} />,
+      )
+
+      expect(getByText('Custom item')).toBeInTheDocument()
+      expect(renderItem).toHaveBeenCalled()
+    })
+
+    it('prefers an item-level renderer over the list-level renderer', () => {
+      const listRenderItem = vi.fn(() => <li>List renderer</li>)
+      const itemRenderItem = vi.fn(() => <li>Item renderer</li>)
+
+      const {getByText} = render(
+        <FilteredActionList
+          renderItem={listRenderItem}
+          items={[{id: 1, text: 'Item 1', renderItem: itemRenderItem}]}
+          onFilterChange={vi.fn()}
+        />,
+      )
+
+      expect(getByText('Item renderer')).toBeInTheDocument()
+      expect(itemRenderItem).toHaveBeenCalled()
+      expect(listRenderItem).not.toHaveBeenCalled()
+    })
+
+    it('uses an item-level renderer for grouped items', () => {
+      const itemRenderItem = vi.fn(() => <li>Item renderer</li>)
+
+      const {getByText} = render(
+        <FilteredActionList
+          groupMetadata={[{groupId: 'group'}]}
+          items={[{groupId: 'group', id: 1, text: 'Item 1', renderItem: itemRenderItem}]}
+          onFilterChange={vi.fn()}
+        />,
+      )
+
+      expect(getByText('Item renderer')).toBeInTheDocument()
+      expect(itemRenderItem).toHaveBeenCalled()
+    })
+  })
 })
 
 describe('FilteredActionListBodyLoader', () => {

packages/react/src/FilteredActionList/FilteredActionList.tsx

@@ -160,6 +160,7 @@ export function FilteredActionList({
   focusPrependedElements,
   scrollBehavior,
   virtualized = false,
+  renderItem: listRenderItem,
   ...listProps
 }: FilteredActionListProps): JSX.Element {
   if (__DEV__) {
@@ -449,7 +450,7 @@ export function FilteredActionList({
                     data-input-focused={isInputFocused ? '' : undefined}
                     data-first-child={index === firstGroupIndex && itemIndex === 0 ? '' : undefined}
                     {...item}
-                    renderItem={listProps.renderItem}
+                    renderItem={'renderItem' in item ? item.renderItem : listRenderItem}
                   />
                 )
               })}
@@ -481,7 +482,7 @@ export function FilteredActionList({
                 transform: `translateY(${virtualItem.start}px)`,
               }}
               {...item}
-              renderItem={listProps.renderItem}
+              renderItem={'renderItem' in item ? item.renderItem : listRenderItem}
             />
           )
         })
@@ -496,7 +497,7 @@ export function FilteredActionList({
             data-input-focused={isInputFocused ? '' : undefined}
             data-first-child={index === 0 ? '' : undefined}
             {...item}
-            renderItem={listProps.renderItem}
+            renderItem={'renderItem' in item ? item.renderItem : listRenderItem}
           />
         )
       })