feat(BulkSelect): add dropdownListProps for greater control

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');
+  });
 });

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>)
   );
 };