@ceed/cds 1.31.1-next.2 → 1.31.2-next.1

package/dist/index.cjs

@@ -3795,8 +3795,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 +4504,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 +4560,7 @@ function Component(props, apiRef) {
       noRowsOverlay: NoRowsOverlay = DefaultNoRowsOverlay
     } = {},
     slotProps: {
-      checkbox: checkboxProps = {},
+      checkbox: checkboxProps = EMPTY_CHECKBOX_PROPS,
       toolbar: toolbarProps,
       background: backgroundProps = {},
       noRowsOverlay: noRowsOverlayProps = {}
@@ -4598,6 +4608,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 +4834,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 +4861,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 +4932,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

@@ -3678,8 +3678,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 +4387,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 +4443,7 @@ function Component(props, apiRef) {
       noRowsOverlay: NoRowsOverlay = DefaultNoRowsOverlay
     } = {},
     slotProps: {
-      checkbox: checkboxProps = {},
+      checkbox: checkboxProps = EMPTY_CHECKBOX_PROPS,
       toolbar: toolbarProps,
       background: backgroundProps = {},
       noRowsOverlay: noRowsOverlayProps = {}
@@ -4481,6 +4491,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 +4717,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 +4744,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 +4815,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,