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

package/dist/index.cjs

@@ -2620,8 +2620,8 @@ function computeAutoFitWidth(params) {
   if (!isNaN(maxPx) && maxPx > 0) finalWidth = Math.min(finalWidth, maxPx);
   return finalWidth;
 }
-function getHeaderCellId(tableId, columnId) {
-  return `${tableId}_header_${columnId}`;
+function getHeaderCellId(tableId, field) {
+  return `${tableId}_header_${sanitizeColumnId(field)}`;
 }
 function sanitizeColumnId(field) {
   return String(field).trim().replace(/\s+/g, "_");
@@ -3569,8 +3569,7 @@ var HeadCell = (props) => {
     tableColRef,
     headerClassName,
     headerLineClamp,
-    onAutoFit,
-    columnId
+    onAutoFit
   } = props;
   const theme = (0, import_joy33.useTheme)();
   const ref = headerRef;
@@ -3581,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(
@@ -3590,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)(
     () => ({
@@ -3862,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",
@@ -3928,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)(() => {
@@ -3938,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;
           }
         });
@@ -3950,13 +3949,12 @@ 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);
       }
     });
@@ -3966,7 +3964,7 @@ function useColumnWidths(columnsById) {
       return same ? prev : { ...prev, ...measured };
     });
     return () => roRef.current?.disconnect();
-  }, [columnsById]);
+  }, [columnsByField]);
   return widths;
 }
 function useDataTableRenderer({
@@ -3998,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);
@@ -4019,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)(() => {
@@ -4049,29 +4047,10 @@ function useDataTableRenderer({
     ),
     [reorderedColumns]
   );
-  const allColumnIds = (0, import_react27.useMemo)(() => {
-    const taken = new Set(reorderedColumns.map((column) => sanitizeColumnId(column.field)));
-    const assigned = /* @__PURE__ */ new Set();
-    return reorderedColumns.map((column) => {
-      const field = sanitizeColumnId(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)(),
@@ -4079,7 +4058,7 @@ function useDataTableRenderer({
         }
       ])
     ),
-    [visibleColumns, columnIds]
+    [visibleColumns]
   );
   const sortComparator = (0, import_react27.useCallback)(
     (rowA, rowB) => {
@@ -4172,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;
@@ -4203,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] ?? sanitizeColumnId(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,
@@ -4229,8 +4200,7 @@ function useDataTableRenderer({
     inferredFields,
     effectivePinnedLeft,
     effectivePinnedRight,
-    columnIds,
-    visibleColumnsById,
+    visibleColumnsByField,
     allColumnsByField,
     editMode,
     sortModel,
@@ -4290,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;
@@ -4305,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,
@@ -4992,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"
@@ -5048,7 +5018,7 @@ function Component(props, apiRef) {
           HeadCell2,
           {
             tableId,
-            key: c.columnId,
+            key: c.field.toString(),
             stickyHeader: props.stickyHeader,
             editMode: !!c.isCellEditable,
             onSortChange: handleSortChange,

package/dist/index.js

@@ -2491,8 +2491,8 @@ function computeAutoFitWidth(params) {
   if (!isNaN(maxPx) && maxPx > 0) finalWidth = Math.min(finalWidth, maxPx);
   return finalWidth;
 }
-function getHeaderCellId(tableId, columnId) {
-  return `${tableId}_header_${columnId}`;
+function getHeaderCellId(tableId, field) {
+  return `${tableId}_header_${sanitizeColumnId(field)}`;
 }
 function sanitizeColumnId(field) {
   return String(field).trim().replace(/\s+/g, "_");
@@ -3454,8 +3454,7 @@ var HeadCell = (props) => {
     tableColRef,
     headerClassName,
     headerLineClamp,
-    onAutoFit,
-    columnId
+    onAutoFit
   } = props;
   const theme = useTheme();
   const ref = headerRef;
@@ -3466,7 +3465,7 @@ var HeadCell = (props) => {
   }, [ref]);
   const [isHovered, setIsHovered] = useState8(false);
   const sortable = type === "actions" ? false : _sortable;
-  const headId = useMemo10(() => getHeaderCellId(tableId, columnId), [tableId, columnId]);
+  const headId = useMemo10(() => getHeaderCellId(tableId, field), [tableId, field]);
   const isResizingRef = useRef6(false);
   const resizer = useMemo10(
     () => resizable ?? true ? Resizer(
@@ -3475,9 +3474,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 = useMemo10(
     () => ({
@@ -3747,7 +3746,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",
@@ -3813,7 +3812,7 @@ var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
 
 // src/components/DataTable/hooks.ts
 import { useState as useState9, useLayoutEffect as useLayoutEffect2, useRef as useRef7, useMemo as useMemo11, useCallback as useCallback12, useEffect as useEffect6, createRef } from "react";
-function useColumnWidths(columnsById) {
+function useColumnWidths(columnsByField) {
   const [widths, setWidths] = useState9({});
   const roRef = useRef7();
   useLayoutEffect2(() => {
@@ -3823,11 +3822,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;
           }
         });
@@ -3835,13 +3834,12 @@ 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);
       }
     });
@@ -3851,7 +3849,7 @@ function useColumnWidths(columnsById) {
       return same ? prev : { ...prev, ...measured };
     });
     return () => roRef.current?.disconnect();
-  }, [columnsById]);
+  }, [columnsByField]);
   return widths;
 }
 function useDataTableRenderer({
@@ -3883,6 +3881,13 @@ function useDataTableRenderer({
       "You cannot use both `pinnedColumns` and `columnGroupingModel` at the same time. Please choose one of them."
     );
   }
+  const duplicatedField = useMemo11(() => {
+    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 = useRef7(onSelectionModelChange);
   onSelectionModelChangeRef.current = onSelectionModelChange;
   const [focusedRowId, setFocusedRowId] = useState9(null);
@@ -3904,16 +3909,9 @@ function useDataTableRenderer({
     if (!columnGroupingModel) return columnsProp;
     return reorderColumnsByGroupingModel(columnsProp, columnGroupingModel);
   }, [columnsProp, columnGroupingModel]);
-  const visibleColumnIndexes = useMemo11(
-    () => reorderedColumns.reduce((acc, col, index) => {
-      if (visibilityModel[col.field] !== false) acc.push(index);
-      return acc;
-    }, []),
-    [reorderedColumns, visibilityModel]
-  );
   const visibleColumns = useMemo11(
-    () => visibleColumnIndexes.map((index) => reorderedColumns[index]),
-    [visibleColumnIndexes, reorderedColumns]
+    () => reorderedColumns.filter((col) => visibilityModel[col.field] !== false),
+    [reorderedColumns, visibilityModel]
   );
   const visibleFieldSet = useMemo11(() => new Set(visibleColumns.map((c) => c.field)), [visibleColumns]);
   const tableMinWidth = useMemo11(() => {
@@ -3934,29 +3932,10 @@ function useDataTableRenderer({
     ),
     [reorderedColumns]
   );
-  const allColumnIds = useMemo11(() => {
-    const taken = new Set(reorderedColumns.map((column) => sanitizeColumnId(column.field)));
-    const assigned = /* @__PURE__ */ new Set();
-    return reorderedColumns.map((column) => {
-      const field = sanitizeColumnId(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 = useMemo11(
-    () => visibleColumnIndexes.map((index) => allColumnIds[index]),
-    [visibleColumnIndexes, allColumnIds]
-  );
-  const visibleColumnsById = useMemo11(
+  const visibleColumnsByField = useMemo11(
     () => Object.fromEntries(
-      visibleColumns.map((column, index) => [
-        columnIds[index],
+      visibleColumns.map((column) => [
+        column.field,
         {
           ...column,
           headerRef: createRef(),
@@ -3964,7 +3943,7 @@ function useDataTableRenderer({
         }
       ])
     ),
-    [visibleColumns, columnIds]
+    [visibleColumns]
   );
   const sortComparator = useCallback12(
     (rowA, rowB) => {
@@ -4057,18 +4036,12 @@ function useDataTableRenderer({
     () => _isTotalSelected ?? (selectableRowCount > 0 && (selectionModel?.length || 0) === selectableRowCount),
     [_isTotalSelected, selectionModel, selectableRowCount]
   );
-  const columnWidths = useColumnWidths(visibleColumnsById);
-  const measuredWidthByField = useMemo11(
-    () => Object.fromEntries(
-      Object.entries(visibleColumnsById).map(([columnId, column]) => [column.field, columnWidths[columnId]])
-    ),
-    [visibleColumnsById, columnWidths]
-  );
+  const columnWidths = useColumnWidths(visibleColumnsByField);
   const getWidth = useCallback12(
     // 반환값은 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 = useMemo11(() => {
     if (!columnGroupingModel) return null;
@@ -4088,16 +4061,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] ?? sanitizeColumnId(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,
@@ -4114,8 +4085,7 @@ function useDataTableRenderer({
     inferredFields,
     effectivePinnedLeft,
     effectivePinnedRight,
-    columnIds,
-    visibleColumnsById,
+    visibleColumnsByField,
     allColumnsByField,
     editMode,
     sortModel,
@@ -4175,8 +4145,8 @@ function useDataTableRenderer({
     }
   }, [_rows]);
   const handleAutoFit = useCallback12(
-    (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;
@@ -4190,7 +4160,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,
@@ -4877,7 +4847,7 @@ function Component(props, apiRef) {
         "col",
         {
           ref: c.tableColRef,
-          key: c.columnId,
+          key: c.field.toString(),
           style: {
             width: c.width,
             minWidth: c.minWidth ?? "50px"
@@ -4933,7 +4903,7 @@ function Component(props, apiRef) {
           HeadCell2,
           {
             tableId,
-            key: c.columnId,
+            key: c.field.toString(),
             stickyHeader: props.stickyHeader,
             editMode: !!c.isCellEditable,
             onSortChange: handleSortChange,