kelt-ui-kit-react 1.8.5 → 1.8.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.8.5",
+  "version": "1.8.9",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/dataTable/DataTable.tsx

@@ -55,15 +55,28 @@ export function DataTable<T>(props: DataTableProps<T>) {
 
   const loaderRef = useRef<HTMLDivElement | null>(null);
   const [selectedRowIds, setSelectedRowIds] = useState<Set<string | number>>(
-    new Set()
+    new Set(),
   );
+
+  const isInteractiveClick = useCallback((target: EventTarget | null) => {
+    if (!(target instanceof HTMLElement)) {
+      return false;
+    }
+
+    return Boolean(
+      target.closest(
+        "input,button,a,select,textarea,label,[role='button'],[role='checkbox'],[data-stop-row-click='true']",
+      ),
+    );
+  }, []);
+
   const toggleSelectAll = useCallback(() => {
     if (selectedRowIds.size === data.length) {
       setSelectedRowIds(new Set());
       onSelectionChange?.([]);
     } else {
       let allIds = data.map((d) =>
-        getRowId ? getRowId(d) : (d as any).id ?? d
+        getRowId ? getRowId(d) : ((d as any).id ?? d),
       );
 
       if (limitSelect && allIds.length > limitSelect) {
@@ -74,8 +87,8 @@ export function DataTable<T>(props: DataTableProps<T>) {
       setSelectedRowIds(newSelection);
       onSelectionChange?.(
         data.filter((d) =>
-          newSelection.has(getRowId ? getRowId(d) : (d as any).id ?? d)
-        )
+          newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
+        ),
       );
     }
   }, [data, onSelectionChange, limitSelect, getRowId, selectedRowIds.size]);
@@ -83,16 +96,29 @@ export function DataTable<T>(props: DataTableProps<T>) {
   const handleClickRow = useCallback(
     (e: React.MouseEvent, row: T) => {
       e.stopPropagation();
+
+      if (isInteractiveClick(e.target)) {
+        return;
+      }
+
+      const selectedText =
+        typeof window !== "undefined"
+          ? window.getSelection?.()?.toString().trim()
+          : "";
+      if (selectedText) {
+        return;
+      }
+
       if (onRowClick) {
         onRowClick?.(row);
       }
     },
-    [onRowClick]
+    [isInteractiveClick, onRowClick],
   );
   const toggleRow = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>, row: T) => {
       e.stopPropagation();
-      const rowId = getRowId ? getRowId(row) : (row as any).id ?? row;
+      const rowId = getRowId ? getRowId(row) : ((row as any).id ?? row);
       const newSelection = new Set(selectedRowIds);
 
       if (newSelection.has(rowId)) {
@@ -107,11 +133,11 @@ export function DataTable<T>(props: DataTableProps<T>) {
 
       setSelectedRowIds(newSelection);
       const selectedItems = data.filter((d) =>
-        newSelection.has(getRowId ? getRowId(d) : (d as any).id ?? d)
+        newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
       );
       onSelectionChange?.(selectedItems);
     },
-    [data, getRowId, limitSelect, onSelectionChange, selectedRowIds]
+    [data, getRowId, limitSelect, onSelectionChange, selectedRowIds],
   );
   useEffect(() => {
     if (!onLoadMore || !hasMore) return;
@@ -126,7 +152,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
         root: null,
         rootMargin: "0px",
         threshold: 1.0,
-      }
+      },
     );
 
     if (loaderRef.current) {
@@ -198,9 +224,17 @@ export function DataTable<T>(props: DataTableProps<T>) {
           )}
           {!loading &&
             data.map((row, rowIndex) => (
-              <tr key={rowIndex} onClick={(e) => handleClickRow?.(e, row)}>
+              <tr
+                key={rowIndex}
+                className={rowIndex % 2 === 0 ? "even" : "odd"}
+                onClick={(e) => handleClickRow?.(e, row)}
+              >
                 {onSelectionChange && (
-                  <td className="select-cell" style={{ textAlign: "center" }}>
+                  <td
+                    className="select-cell"
+                    style={{ textAlign: "center" }}
+                    onClick={(e) => e.stopPropagation()}
+                  >
                     <Input
                       id={`select-row-${rowIndex}`}
                       name={`select-row-${rowIndex}`}
@@ -209,11 +243,11 @@ export function DataTable<T>(props: DataTableProps<T>) {
                         limitSelect !== undefined &&
                         selectedRowIds.size >= limitSelect &&
                         !selectedRowIds.has(
-                          getRowId ? getRowId(row) : (row as any).id ?? row
+                          getRowId ? getRowId(row) : ((row as any).id ?? row),
                         )
                       }
                       checked={selectedRowIds.has(
-                        getRowId ? getRowId(row) : (row as any).id ?? row
+                        getRowId ? getRowId(row) : ((row as any).id ?? row),
                       )}
                       onChange={(e) => toggleRow(e, row)} // empêche le clic de déclencher onRowClick
                     />
@@ -223,7 +257,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
                   <DataTableRow column={column} idx={idx} row={row} key={idx} />
                 ))}
                 {actions.length > 0 && (
-                  <td align="right">
+                  <td align="right" onClick={(e) => e.stopPropagation()}>
                     <div className="d-flex align-items-center justify-content-end">
                       {actions.map((action, index) => (
                         <DataTableAction

package/src/dataTable/dataTable.css

@@ -1,14 +1,18 @@
 .data-table-container {
   overflow: auto;
+
   .data-table {
     width: 100%;
-    border-spacing: 5px;
+    border-spacing: 0;
     font-size: 14px;
     color: #333;
+
     .select-cell {
       min-width: 40px !important;
+
       .input-container {
         min-width: 20px;
+
         input {
           min-width: 20px;
           width: 20px;
@@ -16,15 +20,35 @@
         }
       }
     }
+
     thead {
       margin-bottom: 1rem;
       position: sticky;
       top: 0;
       background-color: #fff;
+
       th {
         color: #bdbaba;
         min-width: 100px;
       }
     }
+
+    tbody {
+      td {
+        padding: 0.5rem;
+
+        &:not(:first-child) {
+          padding-left: 0 !important;
+        }
+      }
+
+      tr.even {
+        background-color: #ffffff;
+      }
+
+      tr.odd {
+        background-color: #f5f5f5;
+      }
+    }
   }
-}
+}

package/src/dataTable/dataTable.interface.ts

@@ -16,7 +16,10 @@ export interface dataTableColumnsInterface<T> {
   onEdit?: (value: any, row: T) => void;
   onDisable?: (row: T) => boolean;
   onRowStyle?: (row: T) => React.CSSProperties;
-  type: HTMLInputTypeAttribute | "select";
+  type: HTMLInputTypeAttribute | "select" | "image";
+  imageAlt?: (row: T) => string;
+  imageStyle?: React.CSSProperties;
+  imageSrc?: (row: T) => string;
 }
 export interface dataTableActionsInterface<T> {
   id: string;

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "../..";
 import { Select } from "../../select/Select";
 import { dataTableColumnsInterface } from "../dataTable.interface";
 
@@ -10,6 +11,7 @@ export const DataTableRow = ({ column, idx, row }: DataTableRowProps) => {
   const value = (row as any)[column.id]; // On utilise [column.id] pour accéder aux bonnes propriétés
   const style = column.onRowStyle ? column.onRowStyle(row) : {};
   const isDisabled = column.onDisable?.(row) ?? false;
+
   return (
     <td
       className={`${isDisabled ? "disabled" : ""}`}
@@ -22,7 +24,17 @@ export const DataTableRow = ({ column, idx, row }: DataTableRowProps) => {
       }}
       key={`row-${column.id}-${idx}`}
     >
-      {column.editable ? (
+      {column.type === "image" ? (
+        value ? (
+          <img
+            src={column.imageSrc ? column.imageSrc(row) : ""}
+            alt={column.imageAlt ? column.imageAlt(row) : ""}
+            style={column.imageStyle}
+          />
+        ) : (
+          <Icon classIcon="bi-image" />
+        )
+      ) : column.editable ? (
         column.type === "select" ? (
           <Select
             options={column.options ?? []}