Skip to content

Commit 0788ed2

Browse files
fix(BulkSelect): expose correct additional props
Replace dropdownListProps with menuToggleProps in the component's API. This is necessary for the Content Services use case, as we need to programmatically disable the split button toggle. Previously, we were mistakenly exposing dropdownListProps, which are not needed for this.
1 parent 4c7688e commit 0788ed2

File tree

2 files changed

+14
-18
lines changed

2 files changed

+14
-18
lines changed
Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { render, screen } from '@testing-library/react';
2-
import userEvent from '@testing-library/user-event';
32
import BulkSelect from './BulkSelect';
43

54
describe('BulkSelect component', () => {
@@ -16,8 +15,7 @@ describe('BulkSelect component', () => {
1615
/>)).toMatchSnapshot();
1716
});
1817

19-
test('should render with dropdownListProps', async () => {
20-
const user = userEvent.setup();
18+
test('should render with menuToggleProps', () => {
2119
render(
2220
<BulkSelect
2321
canSelectAll
@@ -27,17 +25,14 @@ describe('BulkSelect component', () => {
2725
pageSelected={false}
2826
pagePartiallySelected={true}
2927
onSelect={() => null}
30-
dropdownListProps={{ className: 'custom-dropdown-list' }}
28+
menuToggleProps={{ isDisabled: true, className: 'custom-menu-toggle' }}
3129
/>
3230
);
3331

34-
// Open the dropdown by clicking the toggle button
32+
// Confirm the split button toggle receives the custom props
3533
const toggleButton = screen.getByLabelText('Bulk select toggle');
36-
await user.click(toggleButton);
37-
38-
// Now the dropdown list should be visible with the custom class
39-
const dropdownList = document.querySelector('.custom-dropdown-list');
40-
expect(dropdownList).toBeInTheDocument();
41-
expect(dropdownList).toHaveClass('pf-v6-c-menu__list');
34+
expect(toggleButton).toBeInTheDocument();
35+
expect(toggleButton).toBeDisabled();
36+
expect(toggleButton).toHaveClass('custom-menu-toggle');
4237
});
4338
});

packages/module/src/BulkSelect/BulkSelect.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import {
44
Dropdown,
55
DropdownItem,
66
DropdownList,
7-
DropdownListProps,
87
DropdownProps,
98
MenuToggle,
109
MenuToggleCheckbox,
1110
MenuToggleCheckboxProps,
12-
MenuToggleElement
11+
MenuToggleElement,
12+
MenuToggleProps
1313
} from '@patternfly/react-core';
1414

1515
export const BulkSelectValue = {
@@ -45,8 +45,8 @@ export interface BulkSelectProps extends Omit<DropdownProps, 'toggle' | 'onSelec
4545
ouiaId?: string;
4646
/** Additional props for MenuToggleCheckbox */
4747
menuToggleCheckboxProps?: Omit<MenuToggleCheckboxProps, 'onChange' | 'isChecked' | 'instance' | 'ref'>;
48-
/** Additional props for DropdownList */
49-
dropdownListProps?: Omit<DropdownListProps, 'children'>;
48+
/** Additional props for MenuToggleProps */
49+
menuToggleProps?: Omit<MenuToggleProps, 'children' | 'splitButtonItems' | 'ref' | 'isExpanded' | 'onClick'>;
5050
}
5151

5252
export const BulkSelect: FC<BulkSelectProps> = ({
@@ -60,7 +60,7 @@ export const BulkSelect: FC<BulkSelectProps> = ({
6060
ouiaId = 'BulkSelect',
6161
onSelect,
6262
menuToggleCheckboxProps,
63-
dropdownListProps,
63+
menuToggleProps,
6464
...props
6565
}: BulkSelectProps) => {
6666
const [ isOpen, setOpen ] = useState(false);
@@ -116,7 +116,7 @@ export const BulkSelect: FC<BulkSelectProps> = ({
116116
aria-label={`Select ${allOption}`}
117117
isChecked={
118118
(isDataPaginated && pagePartiallySelected) ||
119-
(!isDataPaginated && selectedCount > 0 && selectedCount < totalCount)
119+
(!isDataPaginated && selectedCount > 0 && selectedCount < totalCount)
120120
? null
121121
: pageSelected || (selectedCount === totalCount && totalCount > 0)
122122
}
@@ -129,11 +129,12 @@ export const BulkSelect: FC<BulkSelectProps> = ({
129129
</span>
130130
) : null
131131
]}
132+
{...menuToggleProps}
132133
/>
133134
)}
134135
{...props}
135136
>
136-
<DropdownList {...dropdownListProps}>{splitButtonDropdownItems}</DropdownList>
137+
<DropdownList>{splitButtonDropdownItems}</DropdownList>
137138
</Dropdown>)
138139
);
139140
};

0 commit comments

Comments
 (0)