@ceed/cds 1.4.1 → 1.4.2

package/dist/index.cjs

@@ -2961,7 +2961,7 @@ var VirtualizedTableBody = (0, import_joy33.styled)("tbody", {
     height: "0.01em"
   }
 });
-var VirtualizedTableRow = (0, import_joy33.styled)("tr", {
+var StyledTableRow = (0, import_joy33.styled)("tr", {
   name: "DataTable",
   slot: "tableRow",
   shouldForwardProp: (prop) => prop !== "striped"
@@ -2980,6 +2980,12 @@ var VirtualizedTableRow = (0, import_joy33.styled)("tr", {
     }
   }
 }));
+var VirtualizedTableRow = (0, import_react25.memo)(StyledTableRow, (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;
+});
 var Asterisk = (0, import_joy33.styled)("span", {
   name: "DataTable",
   slot: "headCellAsterisk"
@@ -3713,6 +3719,31 @@ function Component(props, apiRef) {
   const paginationModel = (0, import_react25.useMemo)(() => ({ page, pageSize }), [page, pageSize]);
   const totalSize = virtualizer.getTotalSize();
   const virtualizedItems = virtualizer.getVirtualItems();
+  const getRowClickHandler = (0, import_react25.useCallback)(
+    (row, rowId) => (e) => {
+      onRowClick?.({ row, rowId }, e);
+      checkboxSelection && !disableSelectionOnClick && onCheckboxChange(e, rowId);
+    },
+    [onRowClick, checkboxSelection, disableSelectionOnClick, onCheckboxChange]
+  );
+  const getRowFocusHandler = (0, import_react25.useCallback)(
+    (rowId) => () => {
+      onRowFocus(rowId);
+    },
+    [onRowFocus]
+  );
+  const getCheckboxClickHandler = (0, import_react25.useCallback)(
+    () => (e) => {
+      e.stopPropagation();
+    },
+    []
+  );
+  const getCheckboxChangeHandler = (0, import_react25.useCallback)(
+    (rowId) => (e) => {
+      onCheckboxChange(e, rowId);
+    },
+    [onCheckboxChange]
+  );
   (0, import_react25.useImperativeHandle)(apiRef, () => ({
     getRowIndexRelativeToVisibleRows(rowId) {
       return dataInPage.findIndex((row) => String(getId(row)) === rowId);
@@ -3851,12 +3882,9 @@ function Component(props, apiRef) {
               "data-index": rowIndex,
               role: checkboxSelection && !disableSelectionOnClick ? "checkbox" : void 0,
               tabIndex: focusedRowId === rowId ? 0 : -1,
-              onClick: (e) => {
-                onRowClick?.({ row, rowId }, e);
-                checkboxSelection && !disableSelectionOnClick && onCheckboxChange(e, rowId);
-              },
-              onFocus: () => onRowFocus(rowId),
-              "aria-checked": checkboxSelection && !disableSelectionOnClick ? isSelectedRow(rowId) : void 0,
+              onClick: getRowClickHandler(row, rowId),
+              onFocus: getRowFocusHandler(rowId),
+              "aria-checked": checkboxSelection ? isSelectedRow(rowId) : void 0,
               striped,
               style: {
                 height: `${virtualizedRow.size}px`,
@@ -3874,8 +3902,8 @@ function Component(props, apiRef) {
               /* @__PURE__ */ import_react25.default.createElement(
                 RenderCheckbox,
                 {
-                  onClick: (e) => e.stopPropagation(),
-                  onChange: (e) => onCheckboxChange(e, rowId),
+                  onClick: getCheckboxClickHandler(),
+                  onChange: getCheckboxChangeHandler(rowId),
                   checked: isSelectedRow(rowId),
                   ...checkboxProps
                 }

package/dist/index.js

@@ -2922,7 +2922,7 @@ var VirtualizedTableBody = styled12("tbody", {
     height: "0.01em"
   }
 });
-var VirtualizedTableRow = styled12("tr", {
+var StyledTableRow = styled12("tr", {
   name: "DataTable",
   slot: "tableRow",
   shouldForwardProp: (prop) => prop !== "striped"
@@ -2941,6 +2941,12 @@ var VirtualizedTableRow = styled12("tr", {
     }
   }
 }));
+var VirtualizedTableRow = memo(StyledTableRow, (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;
+});
 var Asterisk = styled12("span", {
   name: "DataTable",
   slot: "headCellAsterisk"
@@ -3674,6 +3680,31 @@ function Component(props, apiRef) {
   const paginationModel = useMemo8(() => ({ page, pageSize }), [page, pageSize]);
   const totalSize = virtualizer.getTotalSize();
   const virtualizedItems = virtualizer.getVirtualItems();
+  const getRowClickHandler = useCallback9(
+    (row, rowId) => (e) => {
+      onRowClick?.({ row, rowId }, e);
+      checkboxSelection && !disableSelectionOnClick && onCheckboxChange(e, rowId);
+    },
+    [onRowClick, checkboxSelection, disableSelectionOnClick, onCheckboxChange]
+  );
+  const getRowFocusHandler = useCallback9(
+    (rowId) => () => {
+      onRowFocus(rowId);
+    },
+    [onRowFocus]
+  );
+  const getCheckboxClickHandler = useCallback9(
+    () => (e) => {
+      e.stopPropagation();
+    },
+    []
+  );
+  const getCheckboxChangeHandler = useCallback9(
+    (rowId) => (e) => {
+      onCheckboxChange(e, rowId);
+    },
+    [onCheckboxChange]
+  );
   useImperativeHandle2(apiRef, () => ({
     getRowIndexRelativeToVisibleRows(rowId) {
       return dataInPage.findIndex((row) => String(getId(row)) === rowId);
@@ -3812,12 +3843,9 @@ function Component(props, apiRef) {
               "data-index": rowIndex,
               role: checkboxSelection && !disableSelectionOnClick ? "checkbox" : void 0,
               tabIndex: focusedRowId === rowId ? 0 : -1,
-              onClick: (e) => {
-                onRowClick?.({ row, rowId }, e);
-                checkboxSelection && !disableSelectionOnClick && onCheckboxChange(e, rowId);
-              },
-              onFocus: () => onRowFocus(rowId),
-              "aria-checked": checkboxSelection && !disableSelectionOnClick ? isSelectedRow(rowId) : void 0,
+              onClick: getRowClickHandler(row, rowId),
+              onFocus: getRowFocusHandler(rowId),
+              "aria-checked": checkboxSelection ? isSelectedRow(rowId) : void 0,
               striped,
               style: {
                 height: `${virtualizedRow.size}px`,
@@ -3835,8 +3863,8 @@ function Component(props, apiRef) {
               /* @__PURE__ */ React23.createElement(
                 RenderCheckbox,
                 {
-                  onClick: (e) => e.stopPropagation(),
-                  onChange: (e) => onCheckboxChange(e, rowId),
+                  onClick: getCheckboxClickHandler(),
+                  onChange: getCheckboxChangeHandler(rowId),
                   checked: isSelectedRow(rowId),
                   ...checkboxProps
                 }