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

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
@@ -2611,8 +2620,11 @@ function computeAutoFitWidth(params) {
   if (!isNaN(maxPx) && maxPx > 0) finalWidth = Math.min(finalWidth, maxPx);
   return finalWidth;
 }
-function getHeaderCellId(tableId, columnId) {
-  return `${tableId}_header_${columnId}`.trim().replace(/\s+/g, "_");
+function getHeaderCellId(tableId, field) {
+  return `${tableId}_header_${sanitizeColumnId(field)}`;
+}
+function sanitizeColumnId(field) {
+  return String(field).trim().replace(/\s+/g, "_");
 }
 
 // src/components/DataTable/styled.tsx
@@ -3557,8 +3569,7 @@ var HeadCell = (props) => {
     tableColRef,
     headerClassName,
     headerLineClamp,
-    onAutoFit,
-    columnId
+    onAutoFit
   } = props;
   const theme = (0, import_joy33.useTheme)();
   const ref = headerRef;
@@ -3569,7 +3580,7 @@ var HeadCell = (props) => {
   }, [ref]);
   const [isHovered, setIsHovered] = (0, import_react26.useState)(false);
   const sortable = type === "actions" ? false : _sortable;
-  const headId = (0, import_react26.useMemo)(() => getHeaderCellId(tableId, columnId), [tableId, columnId]);
+  const headId = (0, import_react26.useMemo)(() => getHeaderCellId(tableId, field), [tableId, field]);
   const isResizingRef = (0, import_react26.useRef)(false);
   const resizer = (0, import_react26.useMemo)(
     () => resizable ?? true ? Resizer(
@@ -3578,9 +3589,9 @@ var HeadCell = (props) => {
       (isResizing) => {
         isResizingRef.current = isResizing;
       },
-      onAutoFit ? () => onAutoFit(columnId) : void 0
+      onAutoFit ? () => onAutoFit(field) : void 0
     ) : null,
-    [resizable, ref, colRef, onAutoFit, columnId]
+    [resizable, ref, colRef, onAutoFit, field]
   );
   const style = (0, import_react26.useMemo)(
     () => ({
@@ -3850,7 +3861,7 @@ var BodyCell = (props) => {
     {
       ref: cellRef,
       key: field,
-      headers: getHeaderCellId(tableId, props.columnId),
+      headers: getHeaderCellId(tableId, field),
       sx: {
         textAlign: getTextAlign({ type }),
         verticalAlign: editMode ? "top" : "middle",
@@ -3916,7 +3927,7 @@ var VirtualizedTableRow = (0, import_react26.memo)(StyledTableRow2, (prevProps,
 
 // src/components/DataTable/hooks.ts
 var import_react27 = require("react");
-function useColumnWidths(columnsById) {
+function useColumnWidths(columnsByField) {
   const [widths, setWidths] = (0, import_react27.useState)({});
   const roRef = (0, import_react27.useRef)();
   (0, import_react27.useLayoutEffect)(() => {
@@ -3926,11 +3937,11 @@ function useColumnWidths(columnsById) {
         let changed = false;
         const next = { ...prev };
         entries.forEach((entry) => {
-          const columnId = entry.target.dataset.hdsColumnId;
+          const field = entry.target.dataset.field;
           const w = Math.round(entry.target.getBoundingClientRect().width);
           if (w === 0) return;
-          if (next[columnId] !== w) {
-            next[columnId] = w;
+          if (next[field] !== w) {
+            next[field] = w;
             changed = true;
           }
         });
@@ -3938,23 +3949,22 @@ function useColumnWidths(columnsById) {
       });
     });
     const measured = {};
-    Object.entries(columnsById).forEach(([columnId, def]) => {
+    Object.entries(columnsByField).forEach(([field, def]) => {
       const el = def.headerRef.current;
       if (el) {
-        el.dataset.hdsColumnId = columnId;
-        el.dataset.field = String(def.field);
+        el.dataset.field = field;
         const w = Math.round(el.getBoundingClientRect().width);
-        if (w > 0) measured[columnId] = w;
+        if (w > 0) measured[field] = w;
         roRef.current.observe(el);
       }
     });
     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]);
+  }, [columnsByField]);
   return widths;
 }
 function useDataTableRenderer({
@@ -3986,6 +3996,13 @@ function useDataTableRenderer({
       "You cannot use both `pinnedColumns` and `columnGroupingModel` at the same time. Please choose one of them."
     );
   }
+  const duplicatedField = (0, import_react27.useMemo)(() => {
+    const ids = columnsProp.map((column) => sanitizeColumnId(column.field));
+    const index = ids.findIndex((id, i) => ids.indexOf(id) !== i);
+    return index === -1 ? void 0 : columnsProp[index].field;
+  }, [columnsProp]);
+  if (duplicatedField !== void 0)
+    throw new Error(`DataTable: column \`field\` must be unique. Duplicated: "${String(duplicatedField)}"`);
   const onSelectionModelChangeRef = (0, import_react27.useRef)(onSelectionModelChange);
   onSelectionModelChangeRef.current = onSelectionModelChange;
   const [focusedRowId, setFocusedRowId] = (0, import_react27.useState)(null);
@@ -4007,16 +4024,9 @@ function useDataTableRenderer({
     if (!columnGroupingModel) return columnsProp;
     return reorderColumnsByGroupingModel(columnsProp, columnGroupingModel);
   }, [columnsProp, columnGroupingModel]);
-  const visibleColumnIndexes = (0, import_react27.useMemo)(
-    () => reorderedColumns.reduce((acc, col, index) => {
-      if (visibilityModel[col.field] !== false) acc.push(index);
-      return acc;
-    }, []),
-    [reorderedColumns, visibilityModel]
-  );
   const visibleColumns = (0, import_react27.useMemo)(
-    () => visibleColumnIndexes.map((index) => reorderedColumns[index]),
-    [visibleColumnIndexes, reorderedColumns]
+    () => reorderedColumns.filter((col) => visibilityModel[col.field] !== false),
+    [reorderedColumns, visibilityModel]
   );
   const visibleFieldSet = (0, import_react27.useMemo)(() => new Set(visibleColumns.map((c) => c.field)), [visibleColumns]);
   const tableMinWidth = (0, import_react27.useMemo)(() => {
@@ -4037,29 +4047,10 @@ function useDataTableRenderer({
     ),
     [reorderedColumns]
   );
-  const allColumnIds = (0, import_react27.useMemo)(() => {
-    const taken = new Set(reorderedColumns.map((column) => String(column.field)));
-    const assigned = /* @__PURE__ */ new Set();
-    return reorderedColumns.map((column) => {
-      const field = String(column.field);
-      if (!assigned.has(field)) {
-        assigned.add(field);
-        return field;
-      }
-      let n = 2;
-      while (taken.has(`${field}__${n}`)) n += 1;
-      taken.add(`${field}__${n}`);
-      return `${field}__${n}`;
-    });
-  }, [reorderedColumns]);
-  const columnIds = (0, import_react27.useMemo)(
-    () => visibleColumnIndexes.map((index) => allColumnIds[index]),
-    [visibleColumnIndexes, allColumnIds]
-  );
-  const visibleColumnsById = (0, import_react27.useMemo)(
+  const visibleColumnsByField = (0, import_react27.useMemo)(
     () => Object.fromEntries(
-      visibleColumns.map((column, index) => [
-        columnIds[index],
+      visibleColumns.map((column) => [
+        column.field,
         {
           ...column,
           headerRef: (0, import_react27.createRef)(),
@@ -4067,7 +4058,7 @@ function useDataTableRenderer({
         }
       ])
     ),
-    [visibleColumns, columnIds]
+    [visibleColumns]
   );
   const sortComparator = (0, import_react27.useCallback)(
     (rowA, rowB) => {
@@ -4160,18 +4151,12 @@ function useDataTableRenderer({
     () => _isTotalSelected ?? (selectableRowCount > 0 && (selectionModel?.length || 0) === selectableRowCount),
     [_isTotalSelected, selectionModel, selectableRowCount]
   );
-  const columnWidths = useColumnWidths(visibleColumnsById);
-  const measuredWidthByField = (0, import_react27.useMemo)(
-    () => Object.fromEntries(
-      Object.entries(visibleColumnsById).map(([columnId, column]) => [column.field, columnWidths[columnId]])
-    ),
-    [visibleColumnsById, columnWidths]
-  );
+  const columnWidths = useColumnWidths(visibleColumnsByField);
   const getWidth = (0, import_react27.useCallback)(
     // 반환값은 pinned offset으로 더해지므로 반드시 숫자여야 한다. width/minWidth는 '500px' 같은 문자열.
-    (f) => measuredWidthByField[f] ?? parsePxValue(allColumnsByField[f]?.width) ?? // Column prop 으로 지정된 width
+    (f) => columnWidths[f] ?? parsePxValue(allColumnsByField[f]?.width) ?? // Column prop 으로 지정된 width
     parsePxValue(allColumnsByField[f]?.minWidth) ?? 0,
-    [measuredWidthByField, allColumnsByField]
+    [columnWidths, allColumnsByField]
   );
   const processedColumnGroups = (0, import_react27.useMemo)(() => {
     if (!columnGroupingModel) return null;
@@ -4191,16 +4176,14 @@ function useDataTableRenderer({
     const baseColumns = visibleColumns.length > 0 ? visibleColumns : reorderedColumns.length > 0 ? [] : inferredFields.map((key) => ({
       field: key
     }));
-    return baseColumns.map((column, index) => {
-      const columnId = columnIds[index] ?? String(column.field);
+    return baseColumns.map((column) => {
       const isLeftPinned = effectivePinnedLeft?.includes(column.field);
       const isRightPinned = effectivePinnedRight?.includes(column.field);
       const isPinned = isLeftPinned || isRightPinned;
       return {
         ...column,
-        columnId,
-        headerRef: visibleColumnsById[columnId]?.headerRef,
-        tableColRef: visibleColumnsById[columnId]?.tableColRef,
+        headerRef: visibleColumnsByField[column.field]?.headerRef,
+        tableColRef: visibleColumnsByField[column.field]?.tableColRef,
         isCellEditable: editMode && (typeof column.isCellEditable === "function" ? column.isCellEditable : column.isCellEditable ?? true),
         sort: sortModel.find((sort) => sort.field === column.field)?.sort,
         sortOrder: allColumnsByField[column.field]?.sortOrder || sortOrder,
@@ -4217,8 +4200,7 @@ function useDataTableRenderer({
     inferredFields,
     effectivePinnedLeft,
     effectivePinnedRight,
-    columnIds,
-    visibleColumnsById,
+    visibleColumnsByField,
     allColumnsByField,
     editMode,
     sortModel,
@@ -4278,8 +4260,8 @@ function useDataTableRenderer({
     }
   }, [_rows]);
   const handleAutoFit = (0, import_react27.useCallback)(
-    (columnId) => {
-      const colDef = visibleColumnsById[columnId];
+    (field) => {
+      const colDef = visibleColumnsByField[field];
       if (!colDef?.headerRef.current) return;
       const columnType = "type" in colDef ? colDef.type : void 0;
       if (columnType === "actions") return;
@@ -4293,7 +4275,7 @@ function useDataTableRenderer({
       colDef.headerRef.current.style.width = widthPx;
       if (colDef.tableColRef.current) colDef.tableColRef.current.style.width = widthPx;
     },
-    [visibleColumnsById, dataInPage]
+    [visibleColumnsByField, dataInPage]
   );
   return {
     rowCount,
@@ -4980,7 +4962,7 @@ function Component(props, apiRef) {
         "col",
         {
           ref: c.tableColRef,
-          key: c.columnId,
+          key: c.field.toString(),
           style: {
             width: c.width,
             minWidth: c.minWidth ?? "50px"
@@ -5030,13 +5012,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.field.toString(),
             stickyHeader: props.stickyHeader,
             editMode: !!c.isCellEditable,
             onSortChange: handleSortChange,