diff --git a/packages/module/src/ListManager/ListManager.test.tsx b/packages/module/src/ListManager/ListManager.test.tsx index 4dd7a3fb..52302ac1 100644 --- a/packages/module/src/ListManager/ListManager.test.tsx +++ b/packages/module/src/ListManager/ListManager.test.tsx @@ -84,6 +84,19 @@ describe('ListManager', () => { }); describe('enableDragDrop prop', () => { + it('places checkboxes in DataListControl so they share spacing with the drag handle', () => { + render(); + const checkbox = screen.getByTestId('column-check-name'); + expect(checkbox.closest('.pf-v6-c-data-list__item-control')).toBeInTheDocument(); + expect(checkbox.closest('.pf-v6-c-data-list__item-row')).not.toBeInTheDocument(); + }); + + it('keeps non-draggable rows in DataListItemRow', () => { + render(); + const checkbox = screen.getByTestId('column-check-name'); + expect(checkbox.closest('.pf-v6-c-data-list__item-row')).toBeInTheDocument(); + }); + it('should sync columns when props change', async () => { const { rerender } = render(); diff --git a/packages/module/src/ListManager/ListManager.tsx b/packages/module/src/ListManager/ListManager.tsx index a2fbf9f3..6a164579 100644 --- a/packages/module/src/ListManager/ListManager.tsx +++ b/packages/module/src/ListManager/ListManager.tsx @@ -5,6 +5,7 @@ import { DataListItem, DataListItemRow, DataListCheck, + DataListControl, DataListCell, DataListItemCells, Button, @@ -111,29 +112,47 @@ const ListManager: FunctionComponent = ( onSelectAll?.(newColumns); }; + const renderColumnCheck = (column: ListManagerItem & { id: string }, index: number, otherControls = false) => ( + handleChange(column.key)} + isDisabled={column.isUntoggleable} + ouiaId={`${ouiaId}-column-${index}-checkbox`} + id={`${ouiaId}-column-${index}-checkbox`} + aria-labelledby={`${ouiaId}-column-${index}-label`} + /> + ); + + const renderColumnCells = (column: ListManagerItem & { id: string }, index: number) => ( + + + + ]} + /> + ); + const renderDataListItem = (column: ListManagerItem & { id: string }, index: number) => ( - handleChange(column.key)} - isDisabled={column.isUntoggleable} - ouiaId={`${ouiaId}-column-${index}-checkbox`} - id={`${ouiaId}-column-${index}-checkbox`} - aria-labelledby={`${ouiaId}-column-${index}-label`} - /> - - - - ]} - /> + {renderColumnCheck(column, index)} + {renderColumnCells(column, index)} ); + const renderDraggableDataListItem = (column: ListManagerItem & { id: string }, index: number) => ( + <> + + {renderColumnCheck(column, index, true)} + + {renderColumnCells(column, index)} + + ); + return ( <>
@@ -152,7 +171,7 @@ const ListManager: FunctionComponent = ( {enableDragDrop ? ( ({ id: column.key, content: renderDataListItem(column, index) }))} + items={currentColumns.map((column, index) => ({ id: column.key, content: renderDraggableDataListItem(column, index) }))} onDrop={onDrag} overlayProps={{ isCompact: true }} >