From f74e7692d7423ac3537ecd393415a08f7d8361ea Mon Sep 17 00:00:00 2001
From: LE SAULNIER Kevin <kevin.lesaulnier@rte-france.com>
Date: Fri, 30 Aug 2024 11:10:12 +0200
Subject: [PATCH 1/4] feat: improve secondary action callback + implement
 handle item click

Signed-off-by: LE SAULNIER Kevin <kevin.lesaulnier@rte-france.com>
---
 demo/src/app.jsx                              | 15 +++++++--------
 .../CheckBoxList/check-box-list-item.tsx      | 10 +++++++---
 .../CheckBoxList/check-box-list-items.tsx     | 19 +++++--------------
 .../CheckBoxList/check-box-list-type.ts       | 19 +++++++++++++------
 .../CheckBoxList/clickable-check-box-item.tsx |  4 ++--
 .../CheckBoxList/clickable-row-item.tsx       | 12 ++++++++----
 .../draggable-check-box-list-item.tsx         |  7 ++++---
 .../draggable-clickable-row-item.tsx          | 13 +++++++++----
 8 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/demo/src/app.jsx b/demo/src/app.jsx
index 2406b011..2a76a58f 100644
--- a/demo/src/app.jsx
+++ b/demo/src/app.jsx
@@ -558,11 +558,12 @@ function AppContent({ language, onLanguageClick }) {
         },
     ]);
 
-    const secondaryAction = () => (
-        <IconButton aria-label="comment">
-            <CommentIcon />
-        </IconButton>
-    );
+    const secondaryAction = (item, isItemHovered) =>
+        isItemHovered && (
+            <IconButton aria-label="comment">
+                <CommentIcon />
+            </IconButton>
+        );
     const defaultTab = (
         <div>
             <Box mt={3}>
@@ -602,8 +603,6 @@ function AppContent({ language, onLanguageClick }) {
                 divider
                 secondaryAction={secondaryAction}
                 addSelectAllCheckbox
-                isCheckboxClickableOnly
-                enableSecondaryActionOnHover
             />
 
             <Button
@@ -628,7 +627,6 @@ function AppContent({ language, onLanguageClick }) {
                 divider
                 secondaryAction={secondaryAction}
                 isDndDragAndDropActive
-                enableSecondaryActionOnHover
                 onDragEnd={({ source, destination }) => {
                     if (destination !== null && source.index !== destination.index) {
                         const res = [...checkBoxListOption];
@@ -637,6 +635,7 @@ function AppContent({ language, onLanguageClick }) {
                         setCheckBoxListOption(res);
                     }
                 }}
+                onItemClick={(item) => console.log('clicked', item)}
             />
 
             <Button
diff --git a/src/components/CheckBoxList/check-box-list-item.tsx b/src/components/CheckBoxList/check-box-list-item.tsx
index 19f1780d..cfa3a854 100644
--- a/src/components/CheckBoxList/check-box-list-item.tsx
+++ b/src/components/CheckBoxList/check-box-list-item.tsx
@@ -17,7 +17,7 @@ export function CheckBoxListItem<T>({
     secondaryAction,
     getItemId,
     divider,
-    isCheckboxClickableOnly,
+    onItemClick,
     ...props
 }: CheckBoxListItemProps<T>) {
     const [hover, setHover] = useState<string>('');
@@ -27,11 +27,15 @@ export function CheckBoxListItem<T>({
             sx={{ minWidth: 0, ...sx?.checkboxList }}
             onMouseEnter={() => setHover(getItemId(item))}
             onMouseLeave={() => setHover('')}
-            disablePadding={!isCheckboxClickableOnly}
+            disablePadding={!!onItemClick}
             disableGutters
             divider={divider}
         >
-            {isCheckboxClickableOnly ? <ClickableCheckBoxItem {...props} /> : <ClickableRowItem {...props} />}
+            {!onItemClick ? (
+                <ClickableCheckBoxItem {...props} />
+            ) : (
+                <ClickableRowItem onItemClick={() => onItemClick(item)} {...props} />
+            )}
         </ListItem>
     );
 }
diff --git a/src/components/CheckBoxList/check-box-list-items.tsx b/src/components/CheckBoxList/check-box-list-items.tsx
index ab906edc..e243b872 100644
--- a/src/components/CheckBoxList/check-box-list-items.tsx
+++ b/src/components/CheckBoxList/check-box-list-items.tsx
@@ -21,7 +21,6 @@ export function CheckBoxListItems<T>({
     getItemId,
     sx,
     secondaryAction,
-    enableSecondaryActionOnHover,
     addSelectAllCheckbox,
     selectAllCheckBoxLabel,
     getItemLabel,
@@ -29,7 +28,7 @@ export function CheckBoxListItems<T>({
     isDndDragAndDropActive,
     isDragDisable,
     divider,
-    isCheckboxClickableOnly,
+    onItemClick,
     ...props
 }: CheckBoxListItemsProps<T>) {
     const handleOnchange = useCallback(
@@ -77,16 +76,8 @@ export function CheckBoxListItems<T>({
         if (!secondaryAction) {
             return null;
         }
-
-        if (!enableSecondaryActionOnHover) {
-            return secondaryAction(item);
-        }
-
-        if (hover === getItemId(item)) {
-            return secondaryAction(item);
-        }
-
-        return null;
+        const isItemHovered = hover === getItemId(item);
+        return secondaryAction(item, isItemHovered);
     };
 
     const selectAllLabel = useMemo(
@@ -149,7 +140,7 @@ export function CheckBoxListItems<T>({
                                     isDragDisable={isDragDisable}
                                     provided={provided}
                                     divider={addDivider}
-                                    isCheckboxClickableOnly={isCheckboxClickableOnly}
+                                    onItemClick={onItemClick}
                                 />
                             )}
                         </Draggable>
@@ -167,7 +158,7 @@ export function CheckBoxListItems<T>({
                         sx={sx}
                         secondaryAction={handleSecondaryAction}
                         divider={addDivider}
-                        isCheckboxClickableOnly={isCheckboxClickableOnly}
+                        onItemClick={onItemClick}
                     />
                 );
             })}
diff --git a/src/components/CheckBoxList/check-box-list-type.ts b/src/components/CheckBoxList/check-box-list-type.ts
index e3311254..7dcd90b6 100644
--- a/src/components/CheckBoxList/check-box-list-type.ts
+++ b/src/components/CheckBoxList/check-box-list-type.ts
@@ -27,7 +27,7 @@ export interface CheckBoxListItemProps<T> {
     disabled?: boolean;
     divider?: boolean;
     checked: boolean;
-    isCheckboxClickableOnly?: boolean;
+    onItemClick?: (item: T) => void;
 }
 
 export interface DraggableCheckBoxListItemProps<T> extends CheckBoxListItemProps<T> {
@@ -41,8 +41,7 @@ export interface CheckBoxListItemsProps<T> {
     onSelectionChange?: (selectedItems: T[]) => void;
     getItemId: (item: T) => string;
     getItemLabel?: (item: T) => string;
-    secondaryAction?: (item: T) => React.ReactElement | null;
-    enableSecondaryActionOnHover?: boolean;
+    secondaryAction?: (item: T, hover: boolean) => React.ReactElement | null;
     isDisabled?: (item: T) => boolean;
     addSelectAllCheckbox?: boolean;
     selectAllCheckBoxLabel?: string;
@@ -50,7 +49,7 @@ export interface CheckBoxListItemsProps<T> {
     isDndDragAndDropActive?: boolean;
     isDragDisable?: boolean;
     divider?: boolean;
-    isCheckboxClickableOnly?: boolean;
+    onItemClick?: (item: T) => void;
 }
 
 export interface CheckboxListProps<T> extends CheckBoxListItemsProps<T> {
@@ -58,7 +57,7 @@ export interface CheckboxListProps<T> extends CheckBoxListItemsProps<T> {
     onDragEnd?: (dropResult: DropResult) => void;
 }
 
-export interface ClickableItemProps {
+export interface ClickableCheckBoxItemProps {
     sx?: CheckBoxListItemSxProps;
     label: string;
     onClick: () => void;
@@ -66,7 +65,15 @@ export interface ClickableItemProps {
     checked: boolean;
 }
 
-export interface DraggableClickableItemProps extends ClickableItemProps {
+export interface DraggableClickableCheckBoxItemProps extends ClickableCheckBoxItemProps {
     provided: DraggableProvided;
     isHighlighted: boolean;
 }
+
+interface ClickableItem {
+    onItemClick: () => void;
+}
+
+export interface ClickableRowItemProps extends ClickableCheckBoxItemProps, ClickableItem {}
+
+export interface DraggableClickableRowItemProps extends DraggableClickableCheckBoxItemProps, ClickableItem {}
diff --git a/src/components/CheckBoxList/clickable-check-box-item.tsx b/src/components/CheckBoxList/clickable-check-box-item.tsx
index 5c8b6ac4..0c8c7913 100644
--- a/src/components/CheckBoxList/clickable-check-box-item.tsx
+++ b/src/components/CheckBoxList/clickable-check-box-item.tsx
@@ -6,9 +6,9 @@
  */
 import { Checkbox, ListItemIcon, ListItemText } from '@mui/material';
 import OverflowableText from '../OverflowableText';
-import { ClickableItemProps } from './check-box-list-type';
+import { ClickableCheckBoxItemProps } from './check-box-list-type';
 
-export function ClickableCheckBoxItem({ sx, label, ...props }: ClickableItemProps) {
+export function ClickableCheckBoxItem({ sx, label, ...props }: ClickableCheckBoxItemProps) {
     return (
         <>
             <ListItemIcon sx={{ minWidth: 0, ...sx?.checkBoxIcon }}>
diff --git a/src/components/CheckBoxList/clickable-row-item.tsx b/src/components/CheckBoxList/clickable-row-item.tsx
index 93dff985..5f2138fc 100644
--- a/src/components/CheckBoxList/clickable-row-item.tsx
+++ b/src/components/CheckBoxList/clickable-row-item.tsx
@@ -6,13 +6,17 @@
  */
 import { Checkbox, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import OverflowableText from '../OverflowableText';
-import { ClickableItemProps } from './check-box-list-type';
+import { ClickableRowItemProps } from './check-box-list-type';
 
-export function ClickableRowItem({ sx, disabled, label, onClick, ...props }: ClickableItemProps) {
+export function ClickableRowItem({ sx, disabled, label, onClick, onItemClick, ...props }: ClickableRowItemProps) {
+    const onCheckboxClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+        onClick();
+    };
     return (
-        <ListItemButton sx={{ paddingLeft: 0, ...sx?.checkboxButton }} disabled={disabled} onClick={onClick}>
+        <ListItemButton sx={{ paddingLeft: 0, ...sx?.checkboxButton }} disabled={disabled} onClick={onItemClick}>
             <ListItemIcon sx={{ minWidth: 0, ...sx?.checkBoxIcon }}>
-                <Checkbox disableRipple sx={{ paddingLeft: 0, ...sx?.checkbox }} {...props} />
+                <Checkbox disableRipple sx={{ paddingLeft: 0, ...sx?.checkbox }} onClick={onCheckboxClick} {...props} />
             </ListItemIcon>
             <ListItemText
                 sx={{
diff --git a/src/components/CheckBoxList/draggable-check-box-list-item.tsx b/src/components/CheckBoxList/draggable-check-box-list-item.tsx
index f8cf8830..9750eff5 100644
--- a/src/components/CheckBoxList/draggable-check-box-list-item.tsx
+++ b/src/components/CheckBoxList/draggable-check-box-list-item.tsx
@@ -19,7 +19,7 @@ export function DraggableCheckBoxListItem<T>({
     isDragDisable,
     provided,
     divider,
-    isCheckboxClickableOnly,
+    onItemClick,
     ...props
 }: DraggableCheckBoxListItemProps<T>) {
     const [hover, setHover] = useState<string>('');
@@ -29,13 +29,13 @@ export function DraggableCheckBoxListItem<T>({
             sx={{ minWidth: 0, ...sx?.checkboxList }}
             onMouseEnter={() => setHover(getItemId(item))}
             onMouseLeave={() => setHover('')}
-            disablePadding={!isCheckboxClickableOnly}
+            disablePadding={!!onItemClick}
             disableGutters
             divider={divider}
             ref={provided.innerRef}
             {...provided.draggableProps}
         >
-            {isCheckboxClickableOnly ? (
+            {!onItemClick ? (
                 <DraggableClickableCheckBoxItem
                     provided={provided}
                     isHighlighted={hover === getItemId(item) && !isDragDisable}
@@ -45,6 +45,7 @@ export function DraggableCheckBoxListItem<T>({
                 <DraggableClickableRowItem
                     provided={provided}
                     isHighlighted={hover === getItemId(item) && !isDragDisable}
+                    onItemClick={() => onItemClick(item)}
                     {...props}
                 />
             )}
diff --git a/src/components/CheckBoxList/draggable-clickable-row-item.tsx b/src/components/CheckBoxList/draggable-clickable-row-item.tsx
index 69afea94..bf9dba6f 100644
--- a/src/components/CheckBoxList/draggable-clickable-row-item.tsx
+++ b/src/components/CheckBoxList/draggable-clickable-row-item.tsx
@@ -8,7 +8,7 @@
 import { Checkbox, IconButton, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import OverflowableText from '../OverflowableText';
-import { DraggableClickableItemProps } from './check-box-list-type';
+import { DraggableClickableRowItemProps } from './check-box-list-type';
 
 const styles = {
     dragIcon: (theme: any) => ({
@@ -26,10 +26,15 @@ export function DraggableClickableRowItem({
     provided,
     isHighlighted,
     label,
+    onItemClick,
     ...props
-}: DraggableClickableItemProps) {
+}: DraggableClickableRowItemProps) {
+    const onCheckboxClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+        onClick();
+    };
     return (
-        <ListItemButton sx={{ paddingLeft: 0, ...sx?.checkboxButton }} disabled={disabled} onClick={onClick}>
+        <ListItemButton sx={{ paddingLeft: 0, ...sx?.checkboxButton }} disabled={disabled} onClick={onItemClick}>
             <IconButton
                 {...provided.dragHandleProps}
                 size="small"
@@ -42,7 +47,7 @@ export function DraggableClickableRowItem({
                 <DragIndicatorIcon spacing={0} />
             </IconButton>
             <ListItemIcon sx={{ minWidth: 0, ...sx?.checkBoxIcon }}>
-                <Checkbox disableRipple sx={{ paddingLeft: 0, ...sx?.checkbox }} {...props} />
+                <Checkbox disableRipple sx={{ paddingLeft: 0, ...sx?.checkbox }} onClick={onCheckboxClick} {...props} />
             </ListItemIcon>
             <ListItemText
                 sx={{

From acd7085a8f4377e13919dc71b3761effa563e413 Mon Sep 17 00:00:00 2001
From: LE SAULNIER Kevin <kevin.lesaulnier@rte-france.com>
Date: Fri, 30 Aug 2024 11:54:08 +0200
Subject: [PATCH 2/4] fix: improve styling when items are not clickable

Signed-off-by: LE SAULNIER Kevin <kevin.lesaulnier@rte-france.com>
---
 demo/src/app.jsx                              |  1 +
 .../CheckBoxList/check-box-list-item.tsx      |  7 ++++-
 .../CheckBoxList/check-box-list-items.tsx     |  3 ++
 .../CheckBoxList/check-box-list-type.ts       |  3 ++
 .../CheckBoxList/clickable-row-item.tsx       | 28 +++++++++++++++++--
 .../draggable-check-box-list-item.tsx         |  2 ++
 .../draggable-clickable-check-box-item.tsx    |  4 +--
 .../draggable-clickable-row-item.tsx          | 19 ++++++++++++-
 8 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/demo/src/app.jsx b/demo/src/app.jsx
index 2a76a58f..49c801fa 100644
--- a/demo/src/app.jsx
+++ b/demo/src/app.jsx
@@ -636,6 +636,7 @@ function AppContent({ language, onLanguageClick }) {
                     }
                 }}
                 onItemClick={(item) => console.log('clicked', item)}
+                isItemClickable={(item) => item.id.indexOf('i') >= 0}
             />
 
             <Button
diff --git a/src/components/CheckBoxList/check-box-list-item.tsx b/src/components/CheckBoxList/check-box-list-item.tsx
index cfa3a854..d5a00862 100644
--- a/src/components/CheckBoxList/check-box-list-item.tsx
+++ b/src/components/CheckBoxList/check-box-list-item.tsx
@@ -18,6 +18,7 @@ export function CheckBoxListItem<T>({
     getItemId,
     divider,
     onItemClick,
+    isItemClickable,
     ...props
 }: CheckBoxListItemProps<T>) {
     const [hover, setHover] = useState<string>('');
@@ -34,7 +35,11 @@ export function CheckBoxListItem<T>({
             {!onItemClick ? (
                 <ClickableCheckBoxItem {...props} />
             ) : (
-                <ClickableRowItem onItemClick={() => onItemClick(item)} {...props} />
+                <ClickableRowItem
+                    isItemClickable={isItemClickable(item)}
+                    onItemClick={() => onItemClick(item)}
+                    {...props}
+                />
             )}
         </ListItem>
     );
diff --git a/src/components/CheckBoxList/check-box-list-items.tsx b/src/components/CheckBoxList/check-box-list-items.tsx
index e243b872..e9023546 100644
--- a/src/components/CheckBoxList/check-box-list-items.tsx
+++ b/src/components/CheckBoxList/check-box-list-items.tsx
@@ -29,6 +29,7 @@ export function CheckBoxListItems<T>({
     isDragDisable,
     divider,
     onItemClick,
+    isItemClickable,
     ...props
 }: CheckBoxListItemsProps<T>) {
     const handleOnchange = useCallback(
@@ -141,6 +142,7 @@ export function CheckBoxListItems<T>({
                                     provided={provided}
                                     divider={addDivider}
                                     onItemClick={onItemClick}
+                                    isItemClickable={isItemClickable}
                                 />
                             )}
                         </Draggable>
@@ -159,6 +161,7 @@ export function CheckBoxListItems<T>({
                         secondaryAction={handleSecondaryAction}
                         divider={addDivider}
                         onItemClick={onItemClick}
+                        isItemClickable={isItemClickable}
                     />
                 );
             })}
diff --git a/src/components/CheckBoxList/check-box-list-type.ts b/src/components/CheckBoxList/check-box-list-type.ts
index 7dcd90b6..f33a5eb3 100644
--- a/src/components/CheckBoxList/check-box-list-type.ts
+++ b/src/components/CheckBoxList/check-box-list-type.ts
@@ -28,6 +28,7 @@ export interface CheckBoxListItemProps<T> {
     divider?: boolean;
     checked: boolean;
     onItemClick?: (item: T) => void;
+    isItemClickable: (item: T) => boolean;
 }
 
 export interface DraggableCheckBoxListItemProps<T> extends CheckBoxListItemProps<T> {
@@ -50,6 +51,7 @@ export interface CheckBoxListItemsProps<T> {
     isDragDisable?: boolean;
     divider?: boolean;
     onItemClick?: (item: T) => void;
+    isItemClickable: (item: T) => boolean;
 }
 
 export interface CheckboxListProps<T> extends CheckBoxListItemsProps<T> {
@@ -72,6 +74,7 @@ export interface DraggableClickableCheckBoxItemProps extends ClickableCheckBoxIt
 
 interface ClickableItem {
     onItemClick: () => void;
+    isItemClickable: boolean;
 }
 
 export interface ClickableRowItemProps extends ClickableCheckBoxItemProps, ClickableItem {}
diff --git a/src/components/CheckBoxList/clickable-row-item.tsx b/src/components/CheckBoxList/clickable-row-item.tsx
index 5f2138fc..a9728f0d 100644
--- a/src/components/CheckBoxList/clickable-row-item.tsx
+++ b/src/components/CheckBoxList/clickable-row-item.tsx
@@ -8,13 +8,37 @@ import { Checkbox, ListItemButton, ListItemIcon, ListItemText } from '@mui/mater
 import OverflowableText from '../OverflowableText';
 import { ClickableRowItemProps } from './check-box-list-type';
 
-export function ClickableRowItem({ sx, disabled, label, onClick, onItemClick, ...props }: ClickableRowItemProps) {
+const styles = {
+    unclickableItem: {
+        '&:hover': {
+            backgroundColor: 'transparent',
+        },
+        cursor: 'inherit',
+    },
+};
+
+export function ClickableRowItem({
+    sx,
+    disabled,
+    label,
+    onClick,
+    onItemClick,
+    isItemClickable,
+    ...props
+}: ClickableRowItemProps) {
     const onCheckboxClick = (event: React.MouseEvent<HTMLButtonElement>) => {
         event.stopPropagation();
         onClick();
     };
+    const handleItemClick = () => isItemClickable && onItemClick();
+
     return (
-        <ListItemButton sx={{ paddingLeft: 0, ...sx?.checkboxButton }} disabled={disabled} onClick={onItemClick}>
+        <ListItemButton
+            disableTouchRipple={!isItemClickable}
+            sx={{ paddingLeft: 0, ...sx?.checkboxButton, ...(!isItemClickable && styles.unclickableItem) }}
+            disabled={disabled}
+            onClick={handleItemClick}
+        >
             <ListItemIcon sx={{ minWidth: 0, ...sx?.checkBoxIcon }}>
                 <Checkbox disableRipple sx={{ paddingLeft: 0, ...sx?.checkbox }} onClick={onCheckboxClick} {...props} />
             </ListItemIcon>
diff --git a/src/components/CheckBoxList/draggable-check-box-list-item.tsx b/src/components/CheckBoxList/draggable-check-box-list-item.tsx
index 9750eff5..bd7999db 100644
--- a/src/components/CheckBoxList/draggable-check-box-list-item.tsx
+++ b/src/components/CheckBoxList/draggable-check-box-list-item.tsx
@@ -20,6 +20,7 @@ export function DraggableCheckBoxListItem<T>({
     provided,
     divider,
     onItemClick,
+    isItemClickable,
     ...props
 }: DraggableCheckBoxListItemProps<T>) {
     const [hover, setHover] = useState<string>('');
@@ -46,6 +47,7 @@ export function DraggableCheckBoxListItem<T>({
                     provided={provided}
                     isHighlighted={hover === getItemId(item) && !isDragDisable}
                     onItemClick={() => onItemClick(item)}
+                    isItemClickable={isItemClickable(item)}
                     {...props}
                 />
             )}
diff --git a/src/components/CheckBoxList/draggable-clickable-check-box-item.tsx b/src/components/CheckBoxList/draggable-clickable-check-box-item.tsx
index f8effc03..43ec0c84 100644
--- a/src/components/CheckBoxList/draggable-clickable-check-box-item.tsx
+++ b/src/components/CheckBoxList/draggable-clickable-check-box-item.tsx
@@ -8,7 +8,7 @@
 import { Checkbox, IconButton, ListItemIcon, ListItemText } from '@mui/material';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import OverflowableText from '../OverflowableText';
-import { DraggableClickableItemProps } from './check-box-list-type';
+import { DraggableClickableCheckBoxItemProps } from './check-box-list-type';
 
 const styles = {
     dragIcon: (theme: any) => ({
@@ -26,7 +26,7 @@ export function DraggableClickableCheckBoxItem({
     isHighlighted,
     label,
     ...props
-}: DraggableClickableItemProps) {
+}: DraggableClickableCheckBoxItemProps) {
     return (
         <>
             <IconButton
diff --git a/src/components/CheckBoxList/draggable-clickable-row-item.tsx b/src/components/CheckBoxList/draggable-clickable-row-item.tsx
index bf9dba6f..846602e5 100644
--- a/src/components/CheckBoxList/draggable-clickable-row-item.tsx
+++ b/src/components/CheckBoxList/draggable-clickable-row-item.tsx
@@ -17,6 +17,12 @@ const styles = {
         borderRadius: theme.spacing(0),
         zIndex: 90,
     }),
+    unclickableItem: {
+        '&:hover': {
+            backgroundColor: 'transparent',
+        },
+        cursor: 'inherit',
+    },
 };
 
 export function DraggableClickableRowItem({
@@ -27,14 +33,25 @@ export function DraggableClickableRowItem({
     isHighlighted,
     label,
     onItemClick,
+    isItemClickable,
     ...props
 }: DraggableClickableRowItemProps) {
     const onCheckboxClick = (event: React.MouseEvent<HTMLButtonElement>) => {
         event.stopPropagation();
         onClick();
     };
+    const handleItemClick = () => isItemClickable && onItemClick();
     return (
-        <ListItemButton sx={{ paddingLeft: 0, ...sx?.checkboxButton }} disabled={disabled} onClick={onItemClick}>
+        <ListItemButton
+            disableTouchRipple={!isItemClickable}
+            sx={{
+                paddingLeft: 0,
+                ...sx?.checkboxButton,
+                ...(!isItemClickable && styles.unclickableItem),
+            }}
+            disabled={disabled}
+            onClick={handleItemClick}
+        >
             <IconButton
                 {...provided.dragHandleProps}
                 size="small"

From 9ecd5fc89814676fe5e304bef74cfb29f803f34f Mon Sep 17 00:00:00 2001
From: LE SAULNIER Kevin <kevin.lesaulnier@rte-france.com>
Date: Fri, 30 Aug 2024 16:59:59 +0200
Subject: [PATCH 3/4] feat: make sx possibly dependent on item

Signed-off-by: LE SAULNIER Kevin <kevin.lesaulnier@rte-france.com>
---
 demo/src/app.jsx                              | 13 ++++++++++++
 .../CheckBoxList/check-box-list-item.tsx      |  7 ++++---
 .../CheckBoxList/check-box-list-items.tsx     |  8 +++++---
 .../CheckBoxList/check-box-list-type.ts       | 20 +++++++++++--------
 .../CheckBoxList/clickable-row-item.tsx       |  4 ++--
 .../draggable-check-box-list-item.tsx         |  6 ++++--
 .../draggable-clickable-check-box-item.tsx    |  2 +-
 .../draggable-clickable-row-item.tsx          |  5 +++--
 8 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/demo/src/app.jsx b/demo/src/app.jsx
index 49c801fa..7df2e614 100644
--- a/demo/src/app.jsx
+++ b/demo/src/app.jsx
@@ -637,6 +637,19 @@ function AppContent({ language, onLanguageClick }) {
                 }}
                 onItemClick={(item) => console.log('clicked', item)}
                 isItemClickable={(item) => item.id.indexOf('i') >= 0}
+                sx={(item) =>
+                    item.id.indexOf('i') >= 0
+                        ? {
+                              label: {
+                                  color: 'blue',
+                              },
+                          }
+                        : {
+                              label: {
+                                  color: 'red',
+                              },
+                          }
+                }
             />
 
             <Button
diff --git a/src/components/CheckBoxList/check-box-list-item.tsx b/src/components/CheckBoxList/check-box-list-item.tsx
index d5a00862..e707b058 100644
--- a/src/components/CheckBoxList/check-box-list-item.tsx
+++ b/src/components/CheckBoxList/check-box-list-item.tsx
@@ -20,7 +20,7 @@ export function CheckBoxListItem<T>({
     onItemClick,
     isItemClickable,
     ...props
-}: CheckBoxListItemProps<T>) {
+}: Readonly<CheckBoxListItemProps<T>>) {
     const [hover, setHover] = useState<string>('');
     return (
         <ListItem
@@ -33,11 +33,12 @@ export function CheckBoxListItem<T>({
             divider={divider}
         >
             {!onItemClick ? (
-                <ClickableCheckBoxItem {...props} />
+                <ClickableCheckBoxItem sx={sx} {...props} />
             ) : (
                 <ClickableRowItem
-                    isItemClickable={isItemClickable(item)}
+                    isItemClickable={isItemClickable?.(item)}
                     onItemClick={() => onItemClick(item)}
+                    sx={sx}
                     {...props}
                 />
             )}
diff --git a/src/components/CheckBoxList/check-box-list-items.tsx b/src/components/CheckBoxList/check-box-list-items.tsx
index e9023546..4e38cf93 100644
--- a/src/components/CheckBoxList/check-box-list-items.tsx
+++ b/src/components/CheckBoxList/check-box-list-items.tsx
@@ -31,7 +31,7 @@ export function CheckBoxListItems<T>({
     onItemClick,
     isItemClickable,
     ...props
-}: CheckBoxListItemsProps<T>) {
+}: Readonly<CheckBoxListItemsProps<T>>) {
     const handleOnchange = useCallback(
         (newValues: T[]) => {
             if (onSelectionChange) {
@@ -118,6 +118,8 @@ export function CheckBoxListItems<T>({
                 const label = getItemLabel ? getItemLabel(item) : getItemId(item);
                 const disabled = isDisabled ? isDisabled(item) : false;
                 const addDivider = divider && index < items.length - 1;
+                // sx can be dependent on item or not
+                const calculatedSx = typeof sx === 'function' ? sx(item) : sx;
 
                 if (isDndDragAndDropActive) {
                     return (
@@ -134,7 +136,7 @@ export function CheckBoxListItems<T>({
                                     checked={isChecked(item)}
                                     label={label}
                                     onClick={() => toggleSelection(getItemId(item))}
-                                    sx={sx}
+                                    sx={calculatedSx}
                                     disabled={disabled}
                                     getItemId={getItemId}
                                     secondaryAction={handleSecondaryAction}
@@ -157,7 +159,7 @@ export function CheckBoxListItems<T>({
                         onClick={() => toggleSelection(getItemId(item))}
                         disabled={disabled}
                         getItemId={getItemId}
-                        sx={sx}
+                        sx={calculatedSx}
                         secondaryAction={handleSecondaryAction}
                         divider={addDivider}
                         onItemClick={onItemClick}
diff --git a/src/components/CheckBoxList/check-box-list-type.ts b/src/components/CheckBoxList/check-box-list-type.ts
index f33a5eb3..82b3497b 100644
--- a/src/components/CheckBoxList/check-box-list-type.ts
+++ b/src/components/CheckBoxList/check-box-list-type.ts
@@ -9,17 +9,21 @@ import React from 'react';
 import { DraggableProvided, DragStart, DropResult } from 'react-beautiful-dnd';
 import { SxProps } from '@mui/system';
 
-export interface CheckBoxListItemSxProps {
+export type CheckBoxListItemSx = {
     checkBoxIcon?: SxProps;
     label?: SxProps;
     checkboxList?: SxProps;
     checkboxButton?: SxProps;
     checkbox?: SxProps;
-}
+};
+
+export type CheckBoxListItemSxMethod<T> = (item: T) => CheckBoxListItemSx;
+
+type CheckBoxListItemSxProps<T> = CheckBoxListItemSx | CheckBoxListItemSxMethod<T>;
 
 export interface CheckBoxListItemProps<T> {
     item: T;
-    sx?: CheckBoxListItemSxProps;
+    sx?: CheckBoxListItemSx;
     label: string;
     onClick: () => void;
     secondaryAction?: (item: T, hover: string) => React.ReactElement | null;
@@ -28,7 +32,7 @@ export interface CheckBoxListItemProps<T> {
     divider?: boolean;
     checked: boolean;
     onItemClick?: (item: T) => void;
-    isItemClickable: (item: T) => boolean;
+    isItemClickable?: (item: T) => boolean;
 }
 
 export interface DraggableCheckBoxListItemProps<T> extends CheckBoxListItemProps<T> {
@@ -46,12 +50,12 @@ export interface CheckBoxListItemsProps<T> {
     isDisabled?: (item: T) => boolean;
     addSelectAllCheckbox?: boolean;
     selectAllCheckBoxLabel?: string;
-    sx?: CheckBoxListItemSxProps;
+    sx?: CheckBoxListItemSxProps<T>;
     isDndDragAndDropActive?: boolean;
     isDragDisable?: boolean;
     divider?: boolean;
     onItemClick?: (item: T) => void;
-    isItemClickable: (item: T) => boolean;
+    isItemClickable?: (item: T) => boolean;
 }
 
 export interface CheckboxListProps<T> extends CheckBoxListItemsProps<T> {
@@ -60,7 +64,7 @@ export interface CheckboxListProps<T> extends CheckBoxListItemsProps<T> {
 }
 
 export interface ClickableCheckBoxItemProps {
-    sx?: CheckBoxListItemSxProps;
+    sx?: CheckBoxListItemSx;
     label: string;
     onClick: () => void;
     disabled?: boolean;
@@ -74,7 +78,7 @@ export interface DraggableClickableCheckBoxItemProps extends ClickableCheckBoxIt
 
 interface ClickableItem {
     onItemClick: () => void;
-    isItemClickable: boolean;
+    isItemClickable?: boolean;
 }
 
 export interface ClickableRowItemProps extends ClickableCheckBoxItemProps, ClickableItem {}
diff --git a/src/components/CheckBoxList/clickable-row-item.tsx b/src/components/CheckBoxList/clickable-row-item.tsx
index a9728f0d..d0e3ef7f 100644
--- a/src/components/CheckBoxList/clickable-row-item.tsx
+++ b/src/components/CheckBoxList/clickable-row-item.tsx
@@ -23,9 +23,9 @@ export function ClickableRowItem({
     label,
     onClick,
     onItemClick,
-    isItemClickable,
+    isItemClickable = true,
     ...props
-}: ClickableRowItemProps) {
+}: Readonly<ClickableRowItemProps>) {
     const onCheckboxClick = (event: React.MouseEvent<HTMLButtonElement>) => {
         event.stopPropagation();
         onClick();
diff --git a/src/components/CheckBoxList/draggable-check-box-list-item.tsx b/src/components/CheckBoxList/draggable-check-box-list-item.tsx
index bd7999db..5e585fe1 100644
--- a/src/components/CheckBoxList/draggable-check-box-list-item.tsx
+++ b/src/components/CheckBoxList/draggable-check-box-list-item.tsx
@@ -22,7 +22,7 @@ export function DraggableCheckBoxListItem<T>({
     onItemClick,
     isItemClickable,
     ...props
-}: DraggableCheckBoxListItemProps<T>) {
+}: Readonly<DraggableCheckBoxListItemProps<T>>) {
     const [hover, setHover] = useState<string>('');
     return (
         <ListItem
@@ -40,6 +40,7 @@ export function DraggableCheckBoxListItem<T>({
                 <DraggableClickableCheckBoxItem
                     provided={provided}
                     isHighlighted={hover === getItemId(item) && !isDragDisable}
+                    sx={sx}
                     {...props}
                 />
             ) : (
@@ -47,7 +48,8 @@ export function DraggableCheckBoxListItem<T>({
                     provided={provided}
                     isHighlighted={hover === getItemId(item) && !isDragDisable}
                     onItemClick={() => onItemClick(item)}
-                    isItemClickable={isItemClickable(item)}
+                    isItemClickable={isItemClickable?.(item)}
+                    sx={sx}
                     {...props}
                 />
             )}
diff --git a/src/components/CheckBoxList/draggable-clickable-check-box-item.tsx b/src/components/CheckBoxList/draggable-clickable-check-box-item.tsx
index 43ec0c84..3c59cefc 100644
--- a/src/components/CheckBoxList/draggable-clickable-check-box-item.tsx
+++ b/src/components/CheckBoxList/draggable-clickable-check-box-item.tsx
@@ -26,7 +26,7 @@ export function DraggableClickableCheckBoxItem({
     isHighlighted,
     label,
     ...props
-}: DraggableClickableCheckBoxItemProps) {
+}: Readonly<DraggableClickableCheckBoxItemProps>) {
     return (
         <>
             <IconButton
diff --git a/src/components/CheckBoxList/draggable-clickable-row-item.tsx b/src/components/CheckBoxList/draggable-clickable-row-item.tsx
index 846602e5..3ec5a325 100644
--- a/src/components/CheckBoxList/draggable-clickable-row-item.tsx
+++ b/src/components/CheckBoxList/draggable-clickable-row-item.tsx
@@ -33,14 +33,15 @@ export function DraggableClickableRowItem({
     isHighlighted,
     label,
     onItemClick,
-    isItemClickable,
+    isItemClickable = true,
     ...props
-}: DraggableClickableRowItemProps) {
+}: Readonly<DraggableClickableRowItemProps>) {
     const onCheckboxClick = (event: React.MouseEvent<HTMLButtonElement>) => {
         event.stopPropagation();
         onClick();
     };
     const handleItemClick = () => isItemClickable && onItemClick();
+
     return (
         <ListItemButton
             disableTouchRipple={!isItemClickable}

From 1b450e3efc9e78bd414c3e734ac5da1895221d01 Mon Sep 17 00:00:00 2001
From: LE SAULNIER Kevin <kevin.lesaulnier@rte-france.com>
Date: Tue, 17 Sep 2024 09:23:11 +0200
Subject: [PATCH 4/4] fix: post merge fix

Signed-off-by: LE SAULNIER Kevin <kevin.lesaulnier@rte-france.com>
---
 demo/src/app.jsx                              | 20 +++++++-----------
 .../checkBoxList/CheckBoxListItems.tsx        |  6 +++---
 .../checkBoxList/checkBoxList.type.ts         | 21 +++++++++++--------
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/demo/src/app.jsx b/demo/src/app.jsx
index b79f88ed..6d355e66 100644
--- a/demo/src/app.jsx
+++ b/demo/src/app.jsx
@@ -648,19 +648,13 @@ function AppContent({ language, onLanguageClick }) {
                 }}
                 onItemClick={(item) => console.log('clicked', item)}
                 isItemClickable={(item) => item.id.indexOf('i') >= 0}
-                sx={(item) =>
-                    item.id.indexOf('i') >= 0
-                        ? {
-                              label: {
-                                  color: 'blue',
-                              },
-                          }
-                        : {
-                              label: {
-                                  color: 'red',
-                              },
-                          }
-                }
+                sx={{
+                    items: (item) => ({
+                        label: {
+                            color: item.id.indexOf('i') >= 0 ? 'blue' : 'red',
+                        },
+                    }),
+                }}
             />
             <div
                 style={{
diff --git a/src/components/checkBoxList/CheckBoxListItems.tsx b/src/components/checkBoxList/CheckBoxListItems.tsx
index 93b6ad7d..cce01af0 100644
--- a/src/components/checkBoxList/CheckBoxListItems.tsx
+++ b/src/components/checkBoxList/CheckBoxListItems.tsx
@@ -119,7 +119,7 @@ export function CheckBoxListItems<T>({
                 const disabled = isDisabled ? isDisabled(item) : false;
                 const addDivider = divider && index < items.length - 1;
                 // sx can be dependent on item or not
-                const calculatedSx = typeof sx === 'function' ? sx(item) : sx;
+                const calculatedItemSx = typeof sx?.items === 'function' ? sx?.items(item) : sx?.items;
 
                 if (isDndDragAndDropActive) {
                     return (
@@ -136,7 +136,7 @@ export function CheckBoxListItems<T>({
                                     checked={isChecked(item)}
                                     label={label}
                                     onClick={() => toggleSelection(getItemId(item))}
-                                    sx={calculatedSx}
+                                    sx={calculatedItemSx}
                                     disabled={disabled}
                                     getItemId={getItemId}
                                     secondaryAction={handleSecondaryAction}
@@ -159,7 +159,7 @@ export function CheckBoxListItems<T>({
                         onClick={() => toggleSelection(getItemId(item))}
                         disabled={disabled}
                         getItemId={getItemId}
-                        sx={calculatedSx}
+                        sx={calculatedItemSx}
                         secondaryAction={handleSecondaryAction}
                         divider={addDivider}
                         onItemClick={onItemClick}
diff --git a/src/components/checkBoxList/checkBoxList.type.ts b/src/components/checkBoxList/checkBoxList.type.ts
index f3689530..46b4d25d 100644
--- a/src/components/checkBoxList/checkBoxList.type.ts
+++ b/src/components/checkBoxList/checkBoxList.type.ts
@@ -8,23 +8,26 @@
 import React from 'react';
 import { DraggableProvided, DragStart, DropResult } from 'react-beautiful-dnd';
 import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material';
 
 export type CheckBoxListItemSx = {
-    checkBoxIcon?: SxProps;
-    label?: SxProps;
-    checkboxListItem?: SxProps;
-    checkboxButton?: SxProps;
-    checkbox?: SxProps;
+    checkBoxIcon?: SxProps<Theme>;
+    label?: SxProps<Theme>;
+    checkboxListItem?: SxProps<Theme>;
+    checkboxButton?: SxProps<Theme>;
+    checkbox?: SxProps<Theme>;
 };
 
-export type CheckBoxListItemsSx = {
-    dragAndDropContainer?: SxProps;
-    checkboxList?: SxProps;
+export type CheckBoxListSx = {
+    dragAndDropContainer?: SxProps<Theme>;
+    checkboxList?: SxProps<Theme>;
 };
 
 export type CheckBoxListItemSxMethod<T> = (item: T) => CheckBoxListItemSx;
 
-type CheckBoxListItemSxProps<T> = (CheckBoxListItemSx | CheckBoxListItemSxMethod<T>) & CheckBoxListItemsSx;
+type CheckBoxListItemSxProps<T> = CheckBoxListSx & {
+    items: CheckBoxListItemSx | CheckBoxListItemSxMethod<T>;
+};
 
 export interface CheckBoxListItemProps<T> {
     item: T;