@gridsuite/commons-ui 0.65.1 → 0.65.2

package/dist/components/checkBoxList/DraggableCheckBoxListItem.js

@@ -11,7 +11,8 @@ function DraggableCheckBoxListItem({
   isDragDisable,
   provided,
   divider,
-  isCheckboxClickableOnly,
+  onItemClick,
+  isItemClickable,
   ...props
 }) {
   const [hover, setHover] = useState("");
@@ -22,16 +23,17 @@ function DraggableCheckBoxListItem({
       sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkboxListItem },
       onMouseEnter: () => setHover(getItemId(item)),
       onMouseLeave: () => setHover(""),
-      disablePadding: !isCheckboxClickableOnly,
+      disablePadding: !!onItemClick,
       disableGutters: true,
       divider,
       ref: provided.innerRef,
       ...provided.draggableProps,
-      children: isCheckboxClickableOnly ? /* @__PURE__ */ jsx(
+      children: !onItemClick ? /* @__PURE__ */ jsx(
         DraggableClickableCheckBoxItem,
         {
           provided,
           isHighlighted: hover === getItemId(item) && !isDragDisable,
+          sx,
           ...props
         }
       ) : /* @__PURE__ */ jsx(
@@ -39,6 +41,9 @@ function DraggableCheckBoxListItem({
         {
           provided,
           isHighlighted: hover === getItemId(item) && !isDragDisable,
+          onItemClick: () => onItemClick(item),
+          isItemClickable: isItemClickable == null ? void 0 : isItemClickable(item),
+          sx,
           ...props
         }
       )

package/dist/components/checkBoxList/DraggableClickableCheckBoxItem.d.ts

@@ -1,4 +1,4 @@
-import { DraggableClickableItemProps } from './checkBoxList.type';
+import { DraggableClickableCheckBoxItemProps } from './checkBoxList.type';
 
-export declare function DraggableClickableCheckBoxItem({ sx, disabled, provided, isHighlighted, label, ...props }: DraggableClickableItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DraggableClickableCheckBoxItem({ sx, disabled, provided, isHighlighted, label, ...props }: Readonly<DraggableClickableCheckBoxItemProps>): import("react/jsx-runtime").JSX.Element;
 export default DraggableClickableCheckBoxItem;

package/dist/components/checkBoxList/DraggableClickableRowItem.d.ts

@@ -1,4 +1,4 @@
-import { DraggableClickableItemProps } from './checkBoxList.type';
+import { DraggableClickableRowItemProps } from './checkBoxList.type';
 
-export declare function DraggableClickableRowItem({ sx, disabled, onClick, provided, isHighlighted, label, ...props }: DraggableClickableItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DraggableClickableRowItem({ sx, disabled, onClick, provided, isHighlighted, label, onItemClick, isItemClickable, ...props }: Readonly<DraggableClickableRowItemProps>): import("react/jsx-runtime").JSX.Element;
 export default DraggableClickableRowItem;

package/dist/components/checkBoxList/DraggableClickableRowItem.js

@@ -8,7 +8,13 @@ const styles = {
     border: theme.spacing(0),
     borderRadius: theme.spacing(0),
     zIndex: 90
-  })
+  }),
+  unclickableItem: {
+    "&:hover": {
+      backgroundColor: "transparent"
+    },
+    cursor: "inherit"
+  }
 };
 function DraggableClickableRowItem({
   sx,
@@ -17,34 +23,54 @@ function DraggableClickableRowItem({
   provided,
   isHighlighted,
   label,
+  onItemClick,
+  isItemClickable = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(ListItemButton, { sx: { paddingLeft: 0, ...sx == null ? void 0 : sx.checkboxButton }, disabled, onClick, children: [
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        ...provided.dragHandleProps,
-        size: "small",
-        sx: {
-          opacity: isHighlighted ? "1" : "0",
-          padding: "unset",
-          ...styles.dragIcon
-        },
-        children: /* @__PURE__ */ jsx(DragIndicatorIcon, { spacing: 0 })
-      }
-    ),
-    /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkBoxIcon }, children: /* @__PURE__ */ jsx(Checkbox, { disableRipple: true, sx: { paddingLeft: 0, ...sx == null ? void 0 : sx.checkbox }, ...props }) }),
-    /* @__PURE__ */ jsx(
-      ListItemText,
-      {
-        sx: {
-          display: "flex"
-        },
-        disableTypography: true,
-        children: /* @__PURE__ */ jsx(OverflowableText, { sx: sx == null ? void 0 : sx.label, text: label })
-      }
-    )
-  ] });
+  const onCheckboxClick = (event) => {
+    event.stopPropagation();
+    onClick();
+  };
+  const handleItemClick = () => isItemClickable && onItemClick();
+  return /* @__PURE__ */ jsxs(
+    ListItemButton,
+    {
+      disableTouchRipple: !isItemClickable,
+      sx: {
+        paddingLeft: 0,
+        ...sx == null ? void 0 : sx.checkboxButton,
+        ...!isItemClickable && styles.unclickableItem
+      },
+      disabled,
+      onClick: handleItemClick,
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            ...provided.dragHandleProps,
+            size: "small",
+            sx: {
+              opacity: isHighlighted ? "1" : "0",
+              padding: "unset",
+              ...styles.dragIcon
+            },
+            children: /* @__PURE__ */ jsx(DragIndicatorIcon, { spacing: 0 })
+          }
+        ),
+        /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0, ...sx == null ? void 0 : sx.checkBoxIcon }, children: /* @__PURE__ */ jsx(Checkbox, { disableRipple: true, sx: { paddingLeft: 0, ...sx == null ? void 0 : sx.checkbox }, onClick: onCheckboxClick, ...props }) }),
+        /* @__PURE__ */ jsx(
+          ListItemText,
+          {
+            sx: {
+              display: "flex"
+            },
+            disableTypography: true,
+            children: /* @__PURE__ */ jsx(OverflowableText, { sx: sx == null ? void 0 : sx.label, text: label })
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   DraggableClickableRowItem,

package/dist/components/checkBoxList/checkBoxList.type.d.ts

@@ -1,19 +1,26 @@
+import { Theme } from '@mui/material';
 import { SxProps } from '@mui/system';
 import { DraggableProvided, DragStart, DropResult } from 'react-beautiful-dnd';
 import { default as React } from 'react';
 
-export interface CheckBoxListItemSxProps {
-    checkBoxIcon?: SxProps;
-    label?: SxProps;
-    checkboxListItem?: SxProps;
-    checkboxButton?: SxProps;
-    checkbox?: SxProps;
-    dragAndDropContainer?: SxProps;
-    checkboxList?: SxProps;
-}
+export type CheckBoxListItemSx = {
+    checkBoxIcon?: SxProps<Theme>;
+    label?: SxProps<Theme>;
+    checkboxListItem?: SxProps<Theme>;
+    checkboxButton?: SxProps<Theme>;
+    checkbox?: SxProps<Theme>;
+};
+export type CheckBoxListSx = {
+    dragAndDropContainer?: SxProps<Theme>;
+    checkboxList?: SxProps<Theme>;
+};
+export type CheckBoxListItemSxMethod<T> = (item: T) => CheckBoxListItemSx;
+type CheckBoxListItemSxProps<T> = CheckBoxListSx & {
+    items: 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;
@@ -21,7 +28,8 @@ export interface CheckBoxListItemProps<T> {
     disabled?: boolean;
     divider?: boolean;
     checked: boolean;
-    isCheckboxClickableOnly?: boolean;
+    onItemClick?: (item: T) => void;
+    isItemClickable?: (item: T) => boolean;
 }
 export interface DraggableCheckBoxListItemProps<T> extends CheckBoxListItemProps<T> {
     isDragDisable?: boolean;
@@ -33,29 +41,38 @@ 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;
-    sx?: CheckBoxListItemSxProps;
+    sx?: CheckBoxListItemSxProps<T>;
     isDndDragAndDropActive?: boolean;
     isDragDisable?: boolean;
     divider?: boolean;
-    isCheckboxClickableOnly?: boolean;
+    onItemClick?: (item: T) => void;
+    isItemClickable?: (item: T) => boolean;
 }
 export interface CheckboxListProps<T> extends CheckBoxListItemsProps<T> {
     onDragStart?: (dragStart: DragStart) => void;
     onDragEnd?: (dropResult: DropResult) => void;
 }
-export interface ClickableItemProps {
-    sx?: CheckBoxListItemSxProps;
+export interface ClickableCheckBoxItemProps {
+    sx?: CheckBoxListItemSx;
     label: string;
     onClick: () => void;
     disabled?: boolean;
     checked: boolean;
 }
-export interface DraggableClickableItemProps extends ClickableItemProps {
+export interface DraggableClickableCheckBoxItemProps extends ClickableCheckBoxItemProps {
     provided: DraggableProvided;
     isHighlighted: boolean;
 }
+interface ClickableItem {
+    onItemClick: () => void;
+    isItemClickable?: boolean;
+}
+export interface ClickableRowItemProps extends ClickableCheckBoxItemProps, ClickableItem {
+}
+export interface DraggableClickableRowItemProps extends DraggableClickableCheckBoxItemProps, ClickableItem {
+}
+export {};