@ceed/cds 1.40.3-next.6 → 1.40.3-next.7

package/dist/index.cjs

@@ -460,16 +460,25 @@ function useSlotRef(slotProp, ref) {
   const isFunctionForm = typeof slotProp === "function";
   const slotRef = isFunctionForm ? void 0 : slotProp?.ref;
   const mergedRef = useMergedRef(slotRef, ref);
+  const latestSlotRef = (0, import_react6.useRef)(null);
+  const stableMergedRef = (0, import_react6.useCallback)(
+    (value) => {
+      assignRef(latestSlotRef.current, value);
+      assignRef(ref, value);
+    },
+    [ref]
+  );
   return (0, import_react6.useMemo)(() => {
     if (isFunctionForm) {
       return ((ownerState) => {
         const resolved = slotProp(ownerState) ?? {};
-        const merged = mergeRefs(resolved.ref, ref);
-        return merged ? { ...resolved, ref: merged } : { ...resolved };
+        const resolvedRef = resolved.ref;
+        latestSlotRef.current = resolvedRef ?? null;
+        return resolvedRef || ref ? { ...resolved, ref: stableMergedRef } : { ...resolved };
       });
     }
     return mergedRef ? { ...slotProp, ref: mergedRef } : { ...slotProp };
-  }, [isFunctionForm, slotProp, mergedRef, ref]);
+  }, [isFunctionForm, slotProp, mergedRef, ref, stableMergedRef]);
 }
 
 // src/components/Autocomplete/Autocomplete.tsx
@@ -2612,7 +2621,10 @@ function computeAutoFitWidth(params) {
   return finalWidth;
 }
 function getHeaderCellId(tableId, columnId) {
-  return `${tableId}_header_${columnId}`.trim().replace(/\s+/g, "_");
+  return `${tableId}_header_${columnId}`;
+}
+function sanitizeColumnId(field) {
+  return String(field).trim().replace(/\s+/g, "_");
 }
 
 // src/components/DataTable/styled.tsx
@@ -3950,8 +3962,8 @@ function useColumnWidths(columnsById) {
     });
     setWidths((prev) => {
       const keys = Object.keys(measured);
-      const same = keys.length === Object.keys(prev).length && keys.every((key) => prev[key] === measured[key]);
-      return same ? prev : measured;
+      const same = keys.every((key) => prev[key] === measured[key]);
+      return same ? prev : { ...prev, ...measured };
     });
     return () => roRef.current?.disconnect();
   }, [columnsById]);
@@ -4038,10 +4050,10 @@ function useDataTableRenderer({
     [reorderedColumns]
   );
   const allColumnIds = (0, import_react27.useMemo)(() => {
-    const taken = new Set(reorderedColumns.map((column) => String(column.field)));
+    const taken = new Set(reorderedColumns.map((column) => sanitizeColumnId(column.field)));
     const assigned = /* @__PURE__ */ new Set();
     return reorderedColumns.map((column) => {
-      const field = String(column.field);
+      const field = sanitizeColumnId(column.field);
       if (!assigned.has(field)) {
         assigned.add(field);
         return field;
@@ -4192,7 +4204,7 @@ function useDataTableRenderer({
       field: key
     }));
     return baseColumns.map((column, index) => {
-      const columnId = columnIds[index] ?? String(column.field);
+      const columnId = columnIds[index] ?? sanitizeColumnId(column.field);
       const isLeftPinned = effectivePinnedLeft?.includes(column.field);
       const isRightPinned = effectivePinnedRight?.includes(column.field);
       const isPinned = isLeftPinned || isRightPinned;
@@ -5030,13 +5042,13 @@ function Component(props, apiRef) {
           }
         },
         headerCheckboxElement
-      ), columns.map((c, i) => (
+      ), columns.map((c) => (
         // @ts-ignore
         /* @__PURE__ */ import_react30.default.createElement(
           HeadCell2,
           {
             tableId,
-            key: `${c.field.toString()}_${i}`,
+            key: c.columnId,
             stickyHeader: props.stickyHeader,
             editMode: !!c.isCellEditable,
             onSortChange: handleSortChange,