From 00ac054cc6c7680f49357d295a2c036cd488957a Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Fri, 3 Oct 2025 11:31:01 -0400
Subject: [PATCH] feat(BulkSelect): add dropdownListProps for greater control
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a new dropdownListProps prop to the BulkSelect component to allow users to pass additional props to the DropdownList component, similar to the existing menuToggleCheckboxProps. This provides greater customization and control over the dropdown list portion of the component.

This feature was requested in issue #819 to enable more granular control over the BulkSelect component's dropdown behavior and styling.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../module/src/BulkSelect/BulkSelect.test.tsx | 28 ++++++++++++++++++-
 packages/module/src/BulkSelect/BulkSelect.tsx |  6 +++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/module/src/BulkSelect/BulkSelect.test.tsx b/packages/module/src/BulkSelect/BulkSelect.test.tsx
index b1de4c74..6623dc75 100644
--- a/packages/module/src/BulkSelect/BulkSelect.test.tsx
+++ b/packages/module/src/BulkSelect/BulkSelect.test.tsx
@@ -1,4 +1,5 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import BulkSelect from './BulkSelect';
 
 describe('BulkSelect component', () => {
@@ -14,4 +15,29 @@ describe('BulkSelect component', () => {
         onSelect={() => null}
       />)).toMatchSnapshot();
   });
+
+  test('should render with dropdownListProps', async () => {
+    const user = userEvent.setup();
+    render(
+      <BulkSelect
+        canSelectAll
+        pageCount={5}
+        totalCount={10}
+        selectedCount={2}
+        pageSelected={false}
+        pagePartiallySelected={true}
+        onSelect={() => null}
+        dropdownListProps={{ className: 'custom-dropdown-list' }}
+      />
+    );
+
+    // Open the dropdown by clicking the toggle button
+    const toggleButton = screen.getByLabelText('Bulk select toggle');
+    await user.click(toggleButton);
+
+    // Now the dropdown list should be visible with the custom class
+    const dropdownList = document.querySelector('.custom-dropdown-list');
+    expect(dropdownList).toBeInTheDocument();
+    expect(dropdownList).toHaveClass('pf-v6-c-menu__list');
+  });
 });
\ No newline at end of file
diff --git a/packages/module/src/BulkSelect/BulkSelect.tsx b/packages/module/src/BulkSelect/BulkSelect.tsx
index 64466ec8..85211817 100644
--- a/packages/module/src/BulkSelect/BulkSelect.tsx
+++ b/packages/module/src/BulkSelect/BulkSelect.tsx
@@ -4,6 +4,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
+  DropdownListProps,
   DropdownProps,
   MenuToggle,
   MenuToggleCheckbox,
@@ -44,6 +45,8 @@ export interface BulkSelectProps extends Omit<DropdownProps, 'toggle' | 'onSelec
   ouiaId?: string;
   /** Additional props for MenuToggleCheckbox */
   menuToggleCheckboxProps?: Omit<MenuToggleCheckboxProps, 'onChange' | 'isChecked' | 'instance' | 'ref'>;
+  /** Additional props for DropdownList */
+  dropdownListProps?: Omit<DropdownListProps, 'children'>;
 }
 
 export const BulkSelect: FC<BulkSelectProps> = ({
@@ -57,6 +60,7 @@ export const BulkSelect: FC<BulkSelectProps> = ({
   ouiaId = 'BulkSelect',
   onSelect,
   menuToggleCheckboxProps,
+  dropdownListProps,
   ...props
 }: BulkSelectProps) => {
   const [ isOpen, setOpen ] = useState(false);
@@ -129,7 +133,7 @@ export const BulkSelect: FC<BulkSelectProps> = ({
       )}
       {...props}
     >
-      <DropdownList>{splitButtonDropdownItems}</DropdownList>
+      <DropdownList {...dropdownListProps}>{splitButtonDropdownItems}</DropdownList>
     </Dropdown>)
   );
 };