diff --git a/cypress/component/BulkSelect.cy.tsx b/cypress/component/BulkSelect.cy.tsx index 1a1e3da1..52733694 100644 --- a/cypress/component/BulkSelect.cy.tsx +++ b/cypress/component/BulkSelect.cy.tsx @@ -14,10 +14,15 @@ const BulkSelectTestComponent = ({ canSelectAll, isDataPaginated }: Omit selected.find(selectedItem => selectedItem.name === item)); const handleBulkSelect = (value: BulkSelectValue) => { + if (value === BulkSelectValue.page) { + const updatedSelection = [ ...selected ]; + pageData.forEach(item => !updatedSelection.some(selectedItem => selectedItem.name === item.name) && updatedSelection.push(item)); + setSelected(updatedSelection); + } + value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageDataNames.includes(item.name))) value === BulkSelectValue.none && setSelected([]); - value === BulkSelectValue.page && setSelected(pageData); value === BulkSelectValue.all && setSelected(allData); - value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageDataNames.includes(item.name)))}; + }; return ( { // Select page cy.get('[data-ouia-component-id="BulkSelect-toggle"]').first().click({ force: true }); cy.get('[data-ouia-component-id="BulkSelect-select-page"]').first().click(); - cy.contains('5 selected').should('exist'); + cy.contains('6 selected').should('exist'); }); }); \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectAllExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectAllExample.tsx index b1dda1a1..be687819 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectAllExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectAllExample.tsx @@ -11,7 +11,7 @@ export const BasicExample: React.FunctionComponent = () => { value === BulkSelectValue.none && setSelected([]); value === BulkSelectValue.all && setSelected(allData); value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageData.includes(item))); - value === BulkSelectValue.page && setSelected(pageData); + value === BulkSelectValue.page && setSelected(Array.from(new Set([ ...selected, ...pageData ]))); }; return ( diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectExample.tsx index a69a21df..1e33d4bc 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelectExample.tsx @@ -11,7 +11,7 @@ export const BasicExample: React.FunctionComponent = () => { value === BulkSelectValue.none && setSelected([]); value === BulkSelectValue.all && setSelected(allData); value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageData.includes(item))); - value === BulkSelectValue.page && setSelected(pageData); + value === BulkSelectValue.page && setSelected(Array.from(new Set([ ...selected, ...pageData ]))); }; return ( diff --git a/packages/module/src/BulkSelect/BulkSelect.tsx b/packages/module/src/BulkSelect/BulkSelect.tsx index a2bd4ce3..5fb5dcc5 100644 --- a/packages/module/src/BulkSelect/BulkSelect.tsx +++ b/packages/module/src/BulkSelect/BulkSelect.tsx @@ -7,8 +7,7 @@ import { MenuToggle, MenuToggleCheckbox, MenuToggleCheckboxProps, - MenuToggleElement, - Text + MenuToggleElement } from '@patternfly/react-core'; export const BulkSelectValue = { @@ -52,7 +51,7 @@ export const BulkSelect: React.FC = ({ pagePartiallySelected, pageCount, selectedCount = 0, - totalCount, + totalCount = 0, ouiaId = 'BulkSelect', onSelect, menuToggleCheckboxProps, @@ -84,6 +83,8 @@ export const BulkSelect: React.FC = ({ const allOption = isDataPaginated ? BulkSelectValue.page : BulkSelectValue.all; const noneOption = isDataPaginated ? BulkSelectValue.nonePage : BulkSelectValue.none; + const onToggleClick = () => setOpen(!isOpen); + return ( = ({ setOpen(!isOpen)} + onClick={onToggleClick} aria-label="Bulk select toggle" data-ouia-component-id={`${ouiaId}-toggle`} splitButtonOptions={{ @@ -110,7 +111,7 @@ export const BulkSelect: React.FC = ({ aria-label={`Select ${allOption}`} isChecked={ (isDataPaginated && pagePartiallySelected) || - (!isDataPaginated && selectedCount > 0) + (!isDataPaginated && selectedCount > 0 && selectedCount < totalCount) ? null : pageSelected || selectedCount === totalCount } @@ -118,9 +119,9 @@ export const BulkSelect: React.FC = ({ {...menuToggleCheckboxProps} />, selectedCount > 0 ? ( - + {`${selectedCount} selected`} - + ) : null ] }} diff --git a/packages/module/src/BulkSelect/__snapshots__/BulkSelect.test.tsx.snap b/packages/module/src/BulkSelect/__snapshots__/BulkSelect.test.tsx.snap index 6ea114cf..6b73dce7 100644 --- a/packages/module/src/BulkSelect/__snapshots__/BulkSelect.test.tsx.snap +++ b/packages/module/src/BulkSelect/__snapshots__/BulkSelect.test.tsx.snap @@ -23,15 +23,11 @@ exports[`BulkSelect component should render 1`] = ` type="checkbox" /> -

2 selected -

+