@ceed/cds 1.31.1 → 1.31.2-next.2

package/dist/index.cjs

@@ -3600,12 +3600,13 @@ var BodyCell = (props) => {
     [props.editMode, isCellEditable, params]
   );
   const propsComponentProps = "componentProps" in props ? props.componentProps : null;
+  const hasComponentProps = "componentProps" in props;
   const componentProps = (0, import_react24.useMemo)(
     () => ({
-      ..."componentProps" in props && (typeof propsComponentProps === "function" ? propsComponentProps(params) : propsComponentProps || {}),
+      ...hasComponentProps && (typeof propsComponentProps === "function" ? propsComponentProps(params) : propsComponentProps || {}),
       size: "sm"
     }),
-    [props, propsComponentProps, params]
+    [hasComponentProps, propsComponentProps, params]
   );
   const editModeComponentProps = (0, import_react24.useMemo)(
     () => ({
@@ -3669,9 +3670,11 @@ var BodyCell = (props) => {
     }),
     [params, row, field, value, componentProps, type, onCellEditStop, onCellEditStart]
   );
+  const MemoizedRenderEditCell = (0, import_react24.useMemo)(() => renderEditCell ? (0, import_react24.memo)(renderEditCell) : null, [renderEditCell]);
+  const MemoizedRenderCell = (0, import_react24.useMemo)(() => renderCell ? (0, import_react24.memo)(renderCell) : null, [renderCell]);
   const EditModeComponent = (0, import_react24.useMemo)(() => {
-    if (renderEditCell) {
-      return (0, import_react24.createElement)((0, import_react24.memo)(renderEditCell), params);
+    if (MemoizedRenderEditCell) {
+      return (0, import_react24.createElement)(MemoizedRenderEditCell, params);
     }
     return {
       date: /* @__PURE__ */ import_react24.default.createElement(DatePicker_default, { value, ...editModeComponentProps }),
@@ -3702,11 +3705,11 @@ var BodyCell = (props) => {
         }
       )
     }[type || "text"];
-  }, [value, editModeComponentProps, type, renderEditCell, params]);
+  }, [value, editModeComponentProps, type, MemoizedRenderEditCell, params]);
   const linkComponentFromProps = props.component;
   const ReadModeComponent = (0, import_react24.useMemo)(() => {
-    if (renderCell) {
-      return (0, import_react24.createElement)((0, import_react24.memo)(renderCell), params);
+    if (MemoizedRenderCell) {
+      return (0, import_react24.createElement)(MemoizedRenderCell, params);
     }
     const innerText = value;
     const typedComponent = {
@@ -3716,7 +3719,7 @@ var BodyCell = (props) => {
       })
     }[type || "text"];
     return typedComponent || innerText;
-  }, [value, renderCell, params, type, componentProps, linkComponentFromProps]);
+  }, [value, MemoizedRenderCell, params, type, componentProps, linkComponentFromProps]);
   const getActions = props.getActions;
   const CellComponent = (0, import_react24.useMemo)(() => {
     if (type === "actions") {
@@ -3795,8 +3798,9 @@ var StyledTableRow2 = (0, import_joy32.styled)("tr", {
 var VirtualizedTableRow = (0, import_react24.memo)(StyledTableRow2, (prevProps, nextProps) => {
   return prevProps.striped === nextProps.striped && prevProps.style?.height === nextProps.style?.height && prevProps.style?.transform === nextProps.style?.transform && // @ts-ignore
   prevProps["data-row-id"] === nextProps["data-row-id"] && // @ts-ignore
-  prevProps["data-index"] === nextProps["data-index"] && prevProps.tabIndex === nextProps.tabIndex && prevProps["aria-checked"] === nextProps["aria-checked"] && // Include children check to handle isCellEditable changes
-  prevProps.children === nextProps.children;
+  prevProps["data-index"] === nextProps["data-index"] && prevProps.tabIndex === nextProps.tabIndex && prevProps["aria-checked"] === nextProps["aria-checked"] && // Track column structure changes (e.g. isCellEditable toggled, columns added/removed)
+  // @ts-ignore
+  prevProps["data-columns-key"] === nextProps["data-columns-key"];
 });
 
 // src/components/DataTable/hooks.ts
@@ -4503,6 +4507,15 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/DataTable/DataTable.tsx
+var _columnsVersionCache = /* @__PURE__ */ new WeakMap();
+var _columnsVersionCounter = 0;
+function getColumnsVersion(columns) {
+  if (!_columnsVersionCache.has(columns)) {
+    _columnsVersionCache.set(columns, ++_columnsVersionCounter);
+  }
+  return _columnsVersionCache.get(columns);
+}
+var EMPTY_CHECKBOX_PROPS = {};
 function Component(props, apiRef) {
   const {
     rows,
@@ -4550,7 +4563,7 @@ function Component(props, apiRef) {
       noRowsOverlay: NoRowsOverlay = DefaultNoRowsOverlay
     } = {},
     slotProps: {
-      checkbox: checkboxProps = {},
+      checkbox: checkboxProps = EMPTY_CHECKBOX_PROPS,
       toolbar: toolbarProps,
       background: backgroundProps = {},
       noRowsOverlay: noRowsOverlayProps = {}
@@ -4598,6 +4611,28 @@ function Component(props, apiRef) {
     overscan: 10
   });
   const paginationModel = (0, import_react28.useMemo)(() => ({ page, pageSize }), [page, pageSize]);
+  const columnsKey = getColumnsVersion(columns);
+  const headerCheckboxElement = (0, import_react28.useMemo)(
+    () => /* @__PURE__ */ import_react28.default.createElement(
+      RenderCheckbox,
+      {
+        onChange: onAllCheckboxChange,
+        checked: isAllSelected,
+        indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
+        disabled: dataInPage.length > 0 && !selectableRowCount,
+        ...checkboxProps
+      }
+    ),
+    [
+      RenderCheckbox,
+      onAllCheckboxChange,
+      isAllSelected,
+      selectionModel,
+      selectableRowCount,
+      dataInPage.length,
+      checkboxProps
+    ]
+  );
   const totalSize = virtualizer.getTotalSize();
   const virtualizedItems = virtualizer.getVirtualItems();
   const showNoRowsOverlay = !loading && rowCount === 0;
@@ -4802,16 +4837,7 @@ function Component(props, apiRef) {
             verticalAlign: "middle"
           }
         },
-        /* @__PURE__ */ import_react28.default.createElement(
-          RenderCheckbox,
-          {
-            onChange: onAllCheckboxChange,
-            checked: isAllSelected,
-            indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
-            disabled: dataInPage.length > 0 && !selectableRowCount,
-            ...checkboxProps
-          }
-        )
+        headerCheckboxElement
       ), level > 0 && Array.from({ length: levelGroups[0]?.startIndex || 0 }).map((_2, i) => /* @__PURE__ */ import_react28.default.createElement("th", { key: `empty-${level}-${i}` })), levelGroups.filter((g) => g.colspan > 0).map((group, groupIndex) => {
         const nextGroup = levelGroups[groupIndex + 1];
         const emptyCells = nextGroup ? nextGroup.startIndex - (group.startIndex + group.colspan) : columns.length - (group.startIndex + group.colspan);
@@ -4838,16 +4864,7 @@ function Component(props, apiRef) {
             textAlign: "center"
           }
         },
-        /* @__PURE__ */ import_react28.default.createElement(
-          RenderCheckbox,
-          {
-            onChange: onAllCheckboxChange,
-            checked: isAllSelected,
-            indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
-            disabled: dataInPage.length > 0 && !selectableRowCount,
-            ...checkboxProps
-          }
-        )
+        headerCheckboxElement
       ), columns.map((c, i) => (
         // @ts-ignore
         /* @__PURE__ */ import_react28.default.createElement(
@@ -4918,6 +4935,7 @@ function Component(props, apiRef) {
               key: virtualizedRow.key,
               "data-row-id": rowId,
               "data-index": rowIndex,
+              "data-columns-key": columnsKey,
               "aria-rowindex": rowIndex + 1,
               role: checkboxSelection && !disableSelectionOnClick ? "checkbox" : void 0,
               tabIndex: focusedRowId === rowId ? 0 : -1,

package/dist/index.js

@@ -3483,12 +3483,13 @@ var BodyCell = (props) => {
     [props.editMode, isCellEditable, params]
   );
   const propsComponentProps = "componentProps" in props ? props.componentProps : null;
+  const hasComponentProps = "componentProps" in props;
   const componentProps = useMemo8(
     () => ({
-      ..."componentProps" in props && (typeof propsComponentProps === "function" ? propsComponentProps(params) : propsComponentProps || {}),
+      ...hasComponentProps && (typeof propsComponentProps === "function" ? propsComponentProps(params) : propsComponentProps || {}),
       size: "sm"
     }),
-    [props, propsComponentProps, params]
+    [hasComponentProps, propsComponentProps, params]
   );
   const editModeComponentProps = useMemo8(
     () => ({
@@ -3552,9 +3553,11 @@ var BodyCell = (props) => {
     }),
     [params, row, field, value, componentProps, type, onCellEditStop, onCellEditStart]
   );
+  const MemoizedRenderEditCell = useMemo8(() => renderEditCell ? memo(renderEditCell) : null, [renderEditCell]);
+  const MemoizedRenderCell = useMemo8(() => renderCell ? memo(renderCell) : null, [renderCell]);
   const EditModeComponent = useMemo8(() => {
-    if (renderEditCell) {
-      return createElement(memo(renderEditCell), params);
+    if (MemoizedRenderEditCell) {
+      return createElement(MemoizedRenderEditCell, params);
     }
     return {
       date: /* @__PURE__ */ React22.createElement(DatePicker_default, { value, ...editModeComponentProps }),
@@ -3585,11 +3588,11 @@ var BodyCell = (props) => {
         }
       )
     }[type || "text"];
-  }, [value, editModeComponentProps, type, renderEditCell, params]);
+  }, [value, editModeComponentProps, type, MemoizedRenderEditCell, params]);
   const linkComponentFromProps = props.component;
   const ReadModeComponent = useMemo8(() => {
-    if (renderCell) {
-      return createElement(memo(renderCell), params);
+    if (MemoizedRenderCell) {
+      return createElement(MemoizedRenderCell, params);
     }
     const innerText = value;
     const typedComponent = {
@@ -3599,7 +3602,7 @@ var BodyCell = (props) => {
       })
     }[type || "text"];
     return typedComponent || innerText;
-  }, [value, renderCell, params, type, componentProps, linkComponentFromProps]);
+  }, [value, MemoizedRenderCell, params, type, componentProps, linkComponentFromProps]);
   const getActions = props.getActions;
   const CellComponent = useMemo8(() => {
     if (type === "actions") {
@@ -3678,8 +3681,9 @@ var StyledTableRow2 = styled12("tr", {
 var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
   return prevProps.striped === nextProps.striped && prevProps.style?.height === nextProps.style?.height && prevProps.style?.transform === nextProps.style?.transform && // @ts-ignore
   prevProps["data-row-id"] === nextProps["data-row-id"] && // @ts-ignore
-  prevProps["data-index"] === nextProps["data-index"] && prevProps.tabIndex === nextProps.tabIndex && prevProps["aria-checked"] === nextProps["aria-checked"] && // Include children check to handle isCellEditable changes
-  prevProps.children === nextProps.children;
+  prevProps["data-index"] === nextProps["data-index"] && prevProps.tabIndex === nextProps.tabIndex && prevProps["aria-checked"] === nextProps["aria-checked"] && // Track column structure changes (e.g. isCellEditable toggled, columns added/removed)
+  // @ts-ignore
+  prevProps["data-columns-key"] === nextProps["data-columns-key"];
 });
 
 // src/components/DataTable/hooks.ts
@@ -4386,6 +4390,15 @@ Pagination.displayName = "Pagination";
 var Pagination_default = Pagination;
 
 // src/components/DataTable/DataTable.tsx
+var _columnsVersionCache = /* @__PURE__ */ new WeakMap();
+var _columnsVersionCounter = 0;
+function getColumnsVersion(columns) {
+  if (!_columnsVersionCache.has(columns)) {
+    _columnsVersionCache.set(columns, ++_columnsVersionCounter);
+  }
+  return _columnsVersionCache.get(columns);
+}
+var EMPTY_CHECKBOX_PROPS = {};
 function Component(props, apiRef) {
   const {
     rows,
@@ -4433,7 +4446,7 @@ function Component(props, apiRef) {
       noRowsOverlay: NoRowsOverlay = DefaultNoRowsOverlay
     } = {},
     slotProps: {
-      checkbox: checkboxProps = {},
+      checkbox: checkboxProps = EMPTY_CHECKBOX_PROPS,
       toolbar: toolbarProps,
       background: backgroundProps = {},
       noRowsOverlay: noRowsOverlayProps = {}
@@ -4481,6 +4494,28 @@ function Component(props, apiRef) {
     overscan: 10
   });
   const paginationModel = useMemo10(() => ({ page, pageSize }), [page, pageSize]);
+  const columnsKey = getColumnsVersion(columns);
+  const headerCheckboxElement = useMemo10(
+    () => /* @__PURE__ */ React25.createElement(
+      RenderCheckbox,
+      {
+        onChange: onAllCheckboxChange,
+        checked: isAllSelected,
+        indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
+        disabled: dataInPage.length > 0 && !selectableRowCount,
+        ...checkboxProps
+      }
+    ),
+    [
+      RenderCheckbox,
+      onAllCheckboxChange,
+      isAllSelected,
+      selectionModel,
+      selectableRowCount,
+      dataInPage.length,
+      checkboxProps
+    ]
+  );
   const totalSize = virtualizer.getTotalSize();
   const virtualizedItems = virtualizer.getVirtualItems();
   const showNoRowsOverlay = !loading && rowCount === 0;
@@ -4685,16 +4720,7 @@ function Component(props, apiRef) {
             verticalAlign: "middle"
           }
         },
-        /* @__PURE__ */ React25.createElement(
-          RenderCheckbox,
-          {
-            onChange: onAllCheckboxChange,
-            checked: isAllSelected,
-            indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
-            disabled: dataInPage.length > 0 && !selectableRowCount,
-            ...checkboxProps
-          }
-        )
+        headerCheckboxElement
       ), level > 0 && Array.from({ length: levelGroups[0]?.startIndex || 0 }).map((_2, i) => /* @__PURE__ */ React25.createElement("th", { key: `empty-${level}-${i}` })), levelGroups.filter((g) => g.colspan > 0).map((group, groupIndex) => {
         const nextGroup = levelGroups[groupIndex + 1];
         const emptyCells = nextGroup ? nextGroup.startIndex - (group.startIndex + group.colspan) : columns.length - (group.startIndex + group.colspan);
@@ -4721,16 +4747,7 @@ function Component(props, apiRef) {
             textAlign: "center"
           }
         },
-        /* @__PURE__ */ React25.createElement(
-          RenderCheckbox,
-          {
-            onChange: onAllCheckboxChange,
-            checked: isAllSelected,
-            indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
-            disabled: dataInPage.length > 0 && !selectableRowCount,
-            ...checkboxProps
-          }
-        )
+        headerCheckboxElement
       ), columns.map((c, i) => (
         // @ts-ignore
         /* @__PURE__ */ React25.createElement(
@@ -4801,6 +4818,7 @@ function Component(props, apiRef) {
               key: virtualizedRow.key,
               "data-row-id": rowId,
               "data-index": rowIndex,
+              "data-columns-key": columnsKey,
               "aria-rowindex": rowIndex + 1,
               role: checkboxSelection && !disableSelectionOnClick ? "checkbox" : void 0,
               tabIndex: focusedRowId === rowId ? 0 : -1,