Enhanced Transfer List Support

[adamdriscoll]

Summary of the new feature / enhancement

https://mui.com/material-ui/react-transfer-list/#enhanced-transfer-list

To compare the changes between the regular and enhanced transfer list, let's look at the key differences:

Import Statements:

Regular: Imports Paper from '@mui/material/Paper'.

Enhanced: Imports Card, CardHeader, and Divider from '@mui/material', but does not import Paper.

Additional Function in Enhanced Version:

Enhanced version includes an additional function union which is used for combining two arrays while removing duplicates from the second array based on the first array.

Custom List Function:

Regular: customList function takes one parameter (items) and returns a Paper component containing the list.

Enhanced: customList function takes two parameters (title, items) and returns a Card component with a CardHeader and Divider. The CardHeader includes a Checkbox for selecting/deselecting all items.

Checkbox for Select/Deselect All:

Enhanced: The CardHeader's Checkbox in the customList function is used for selecting or deselecting all items. This is controlled by handleToggleAll function which toggles the checked state of all items in a list.

List Item Label ID:

Regular: The label ID for list items is formatted as transfer-list-item-${value}-label.

Enhanced: The label ID for list items is formatted as transfer-list-all-item-${value}-label.

Title and Subheader in Enhanced List:

Enhanced: The customList function includes a title and a subheader that shows the count of selected items.

Functionality for Moving All Items:

Regular: Includes handleAllRight and handleAllLeft functions for moving all items to the right or left list.

Enhanced: These functions are removed, focusing only on moving selected items.

UI Layout:

Both versions use a similar Grid layout but with different container elements (Paper vs Card) for the lists.

State Management and Logic:

The core state management and logic (like handleToggle, handleCheckedRight, handleCheckedLeft) remain largely the same in both versions.

These changes enhance the functionality and user interface of the transfer list, particularly with the addition of select/deselect all functionality and an improved visual layout using Card and CardHeader.

Proposed technical implementation details (optional)

No response

[adamdriscoll]

This was someone how overwritten or never merged to the main branch. This will be included in 4.4.0