@omniumretail/component-library 1.3.29 → 1.3.30

package/dist/component-library.es.js

@@ -24861,7 +24861,10 @@ const ResponsiveTable = (props) => {
     useOrderedCellSelection = true,
     initialSelectedCells,
     selectedCellColor,
-    disableCellSelection
+    disableCellSelection,
+    templateEditMode,
+    currentTemplateType,
+    currentTemplateColor
   } = props;
   const [customFilters, setCustomFilters] = useState([]);
   const [customColumns, setCustomColumns] = useState([]);
@@ -24889,36 +24892,62 @@ const ResponsiveTable = (props) => {
     secondCell: { ...defaultCellStyle.secondCell, ...cellSelectionStyle?.secondCell }
   };
   const handleCellClick = (record, columnKey, value) => {
-    if (!enableCellSelection || !selectableColumns?.includes(columnKey) || disableCellSelection) return;
-    const isAlreadySelected = selectedCells.some(
-      (cell) => cell.rowKey === record[rowKeyValue] && cell.columnKey === columnKey
-    );
-    let newSelectedCells;
-    if (isAlreadySelected) {
-      newSelectedCells = selectedCells.filter(
-        (cell) => !(cell.rowKey === record[rowKeyValue] && cell.columnKey === columnKey)
+    if (!enableCellSelection || !selectableColumns?.includes(columnKey)) return;
+    if (disableCellSelection) return;
+    const rowKey = record[rowKeyValue];
+    if (useOrderedCellSelection) {
+      const isAlreadySelected = selectedCells.some(
+        (cell) => cell.rowKey === rowKey && cell.columnKey === columnKey
       );
+      let newSelectedCells;
+      if (isAlreadySelected) {
+        newSelectedCells = selectedCells.filter(
+          (cell) => !(cell.rowKey === rowKey && cell.columnKey === columnKey)
+        );
+      } else {
+        const cellData = {
+          rowKey,
+          columnKey,
+          value: {
+            type: "X",
+            color: selectedCellColor || "grey"
+          },
+          rowData: record
+        };
+        const maxSelection = maxCellSelection || 2;
+        if (cellSelectionMode === "single") {
+          newSelectedCells = [cellData];
+        } else if (selectedCells.length >= maxSelection) {
+          newSelectedCells = [...selectedCells.slice(1), cellData];
+        } else {
+          newSelectedCells = [...selectedCells, cellData];
+        }
+      }
+      setSelectedCells(newSelectedCells);
+      onCellsSelected?.(newSelectedCells);
     } else {
-      const cellData = {
-        rowKey: record[rowKeyValue],
-        columnKey,
-        value: {
-          type: "X",
-          color: selectedCellColor || "grey"
-        },
-        rowData: record
-      };
-      const maxSelection = maxCellSelection || 2;
-      if (cellSelectionMode === "single") {
-        newSelectedCells = [cellData];
-      } else if (selectedCells.length >= maxSelection) {
-        newSelectedCells = [...selectedCells.slice(1), cellData];
+      const cellIndex = selectedCells.findIndex(
+        (cell) => cell.rowKey === rowKey && cell.columnKey === columnKey
+      );
+      let newSelectedCells;
+      if (cellIndex >= 0) {
+        newSelectedCells = selectedCells.filter((_, index) => index !== cellIndex);
       } else {
-        newSelectedCells = [...selectedCells, cellData];
+        const newCell = {
+          rowKey,
+          columnKey,
+          value: templateEditMode ? { type: currentTemplateType, color: currentTemplateColor } : { type: "X", color: selectedCellColor || "grey" },
+          rowData: record
+        };
+        if (cellSelectionMode === "single") {
+          newSelectedCells = [newCell];
+        } else {
+          newSelectedCells = [...selectedCells, newCell];
+        }
       }
+      setSelectedCells(newSelectedCells);
+      onCellsSelected?.(newSelectedCells);
     }
-    setSelectedCells(newSelectedCells);
-    onCellsSelected?.(newSelectedCells);
   };
   useEffect(() => {
     if (cleanCellSelection) {
@@ -25055,7 +25084,7 @@ const ResponsiveTable = (props) => {
                   (cell) => cell.rowKey === record[rowKeyValue] && cell.columnKey === key
                 );
                 const isSelected2 = cellIndex2 !== -1;
-                if (isDisabled) {
+                if (isDisabled && !templateEditMode) {
                   if (originalCellContent2?.type === "I" || isReadonly || originalCellContent2?.type === "L" || disableCellSelection) {
                     return /* @__PURE__ */ jsx(Tag, { color: originalCellContent2.color, style: { margin: -4, cursor: "not-allowed" }, children: originalCellContent2.type });
                   } else {
@@ -25075,6 +25104,31 @@ const ResponsiveTable = (props) => {
                     );
                   }
                 }
+                if (isDisabled && templateEditMode) {
+                  const cellContent = isSelected2 ? /* @__PURE__ */ jsx(
+                    Tag,
+                    {
+                      color: selectedCells[cellIndex2]?.value?.color || selectedCellColor,
+                      style: { margin: -4, cursor: "pointer" },
+                      children: selectedCells[cellIndex2]?.value?.type || "X"
+                    }
+                  ) : originalCellContent2?.type ? /* @__PURE__ */ jsx(Tag, { color: originalCellContent2.color, style: { margin: -4 }, children: originalCellContent2.type }) : null;
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleCellClick(record, key);
+                      },
+                      className: classNames(
+                        styles$7.selectableCell,
+                        isSelected2 && styles$7.selected,
+                        isSelected2 && styles$7.uniformSelection
+                      ),
+                      children: cellContent
+                    }
+                  );
+                }
                 if (isSelectable2) {
                   const cellContent = (() => {
                     if (isSelected2) {
@@ -25083,7 +25137,14 @@ const ResponsiveTable = (props) => {
                       const cellType = selectedCell?.value?.type || "X";
                       const isLicenseType = cellType === "L";
                       const isReadonlyCell = selectedCell?.value?.readonly || disableCellSelection;
-                      return /* @__PURE__ */ jsx(Tag, { color: cellColor, style: { margin: -4, cursor: isLicenseType || isReadonlyCell ? "not-allowed" : "pointer" }, children: cellType });
+                      return /* @__PURE__ */ jsx(
+                        Tag,
+                        {
+                          color: cellColor,
+                          style: { margin: -4, cursor: (isLicenseType || isReadonlyCell) && !templateEditMode ? "not-allowed" : "pointer" },
+                          children: cellType
+                        }
+                      );
                     }
                     if (originalCellContent2) {
                       return /* @__PURE__ */ jsx(Tag, { color: originalCellContent2.color, style: { margin: -4 }, children: originalCellContent2.type });
@@ -25096,7 +25157,7 @@ const ResponsiveTable = (props) => {
                       onClick: (e) => {
                         e.stopPropagation();
                         if (disableCellSelection) return;
-                        if (isSelected2 && selectedCells[cellIndex2]?.value?.type === "L") {
+                        if (!templateEditMode && isSelected2 && selectedCells[cellIndex2]?.value?.type === "L") {
                           return;
                         }
                         handleCellClick(record, key);