Fix: add sx props to list and container in checkbox list (#568)

Signed-off-by: Seddik Yengui <[email protected]>

Author: YenguiSeddik

src/components/checkBoxList/CheckBoxList.tsx

@@ -16,6 +16,7 @@ export function CheckBoxList<T>({
     onDragStart,
     onDragEnd,
     isDragDisable = false,
+    sx,
     ...props
 }: CheckboxListProps<T>) {
     const [isDragging, setIsDragging] = useState(false);
@@ -24,6 +25,7 @@ export function CheckBoxList<T>({
         <CheckBoxListItems
             isDndDragAndDropActive={isDndDragAndDropActive}
             isDragDisable={isDragDisable || isDragging}
+            sx={sx}
             {...props}
         />
     );
@@ -45,7 +47,7 @@ export function CheckBoxList<T>({
         >
             <Droppable droppableId="droppable-checkbox-list" isDropDisabled={isDragDisable}>
                 {(provided) => (
-                    <Box {...provided.droppableProps} ref={provided.innerRef}>
+                    <Box {...provided.droppableProps} ref={provided.innerRef} sx={sx?.dragAndDropContainer}>
                         {checkBoxField}
                         {provided.placeholder}
                     </Box>

src/components/checkBoxList/CheckBoxListItem.tsx

@@ -24,7 +24,7 @@ export function CheckBoxListItem<T>({
     return (
         <ListItem
             secondaryAction={secondaryAction?.(item, hover)}
-            sx={{ minWidth: 0, ...sx?.checkboxList }}
+            sx={{ minWidth: 0, ...sx?.checkboxListItem }}
             onMouseEnter={() => setHover(getItemId(item))}
             onMouseLeave={() => setHover('')}
             disablePadding={!isCheckboxClickableOnly}

src/components/checkBoxList/CheckBoxListItems.tsx

@@ -95,7 +95,7 @@ export function CheckBoxListItems<T>({
     );
 
     return (
-        <List key="droppable-checkbox-list" dense disablePadding {...props}>
+        <List key="droppable-checkbox-list" sx={sx?.checkboxList} dense disablePadding {...props}>
             {addSelectAllCheckbox && (
                 <ListItem
                     disablePadding

src/components/checkBoxList/DraggableCheckBoxListItem.tsx

@@ -26,7 +26,7 @@ export function DraggableCheckBoxListItem<T>({
     return (
         <ListItem
             secondaryAction={secondaryAction?.(item, hover)}
-            sx={{ minWidth: 0, ...sx?.checkboxList }}
+            sx={{ minWidth: 0, ...sx?.checkboxListItem }}
             onMouseEnter={() => setHover(getItemId(item))}
             onMouseLeave={() => setHover('')}
             disablePadding={!isCheckboxClickableOnly}

src/components/checkBoxList/checkBoxList.type.ts

@@ -12,9 +12,11 @@ import { SxProps } from '@mui/system';
 export interface CheckBoxListItemSxProps {
     checkBoxIcon?: SxProps;
     label?: SxProps;
-    checkboxList?: SxProps;
+    checkboxListItem?: SxProps;
     checkboxButton?: SxProps;
     checkbox?: SxProps;
+    dragAndDropContainer?: SxProps;
+    checkboxList?: SxProps;
 }
 
 export interface CheckBoxListItemProps<T> {