@ceed/ads 1.41.3-next.7 → 1.41.3-next.8

package/dist/index.cjs

@@ -2618,8 +2618,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, "_");
@@ -3567,8 +3567,7 @@ var HeadCell = (props) => {
     tableColRef,
     headerClassName,
     headerLineClamp,
-    onAutoFit,
-    columnId
+    onAutoFit
   } = props;
   const theme = (0, import_joy33.useTheme)();
   const ref = headerRef;
@@ -3579,7 +3578,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(
@@ -3588,9 +3587,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)(
     () => ({
@@ -3860,7 +3859,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",
@@ -3926,7 +3925,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)(() => {
@@ -3936,11 +3935,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;
           }
         });
@@ -3948,13 +3947,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);
       }
     });
@@ -3964,7 +3962,7 @@ function useColumnWidths(columnsById) {
       return same ? prev : { ...prev, ...measured };
     });
     return () => roRef.current?.disconnect();
-  }, [columnsById]);
+  }, [columnsByField]);
   return widths;
 }
 function useDataTableRenderer({
@@ -3996,6 +3994,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);
@@ -4017,16 +4022,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)(() => {
@@ -4047,29 +4045,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)(),
@@ -4077,7 +4056,7 @@ function useDataTableRenderer({
         }
       ])
     ),
-    [visibleColumns, columnIds]
+    [visibleColumns]
   );
   const sortComparator = (0, import_react27.useCallback)(
     (rowA, rowB) => {
@@ -4170,18 +4149,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;
@@ -4201,16 +4174,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,
@@ -4227,8 +4198,7 @@ function useDataTableRenderer({
     inferredFields,
     effectivePinnedLeft,
     effectivePinnedRight,
-    columnIds,
-    visibleColumnsById,
+    visibleColumnsByField,
     allColumnsByField,
     editMode,
     sortModel,
@@ -4288,8 +4258,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;
@@ -4303,7 +4273,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,
@@ -4990,7 +4960,7 @@ function Component(props, apiRef) {
         "col",
         {
           ref: c.tableColRef,
-          key: c.columnId,
+          key: c.field.toString(),
           style: {
             width: c.width,
             minWidth: c.minWidth ?? "50px"
@@ -5046,7 +5016,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

@@ -2481,8 +2481,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, "_");
@@ -3444,8 +3444,7 @@ var HeadCell = (props) => {
     tableColRef,
     headerClassName,
     headerLineClamp,
-    onAutoFit,
-    columnId
+    onAutoFit
   } = props;
   const theme = useTheme();
   const ref = headerRef;
@@ -3456,7 +3455,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(
@@ -3465,9 +3464,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(
     () => ({
@@ -3737,7 +3736,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",
@@ -3803,7 +3802,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(() => {
@@ -3813,11 +3812,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;
           }
         });
@@ -3825,13 +3824,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);
       }
     });
@@ -3841,7 +3839,7 @@ function useColumnWidths(columnsById) {
       return same ? prev : { ...prev, ...measured };
     });
     return () => roRef.current?.disconnect();
-  }, [columnsById]);
+  }, [columnsByField]);
   return widths;
 }
 function useDataTableRenderer({
@@ -3873,6 +3871,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);
@@ -3894,16 +3899,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(() => {
@@ -3924,29 +3922,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(),
@@ -3954,7 +3933,7 @@ function useDataTableRenderer({
         }
       ])
     ),
-    [visibleColumns, columnIds]
+    [visibleColumns]
   );
   const sortComparator = useCallback12(
     (rowA, rowB) => {
@@ -4047,18 +4026,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;
@@ -4078,16 +4051,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,
@@ -4104,8 +4075,7 @@ function useDataTableRenderer({
     inferredFields,
     effectivePinnedLeft,
     effectivePinnedRight,
-    columnIds,
-    visibleColumnsById,
+    visibleColumnsByField,
     allColumnsByField,
     editMode,
     sortModel,
@@ -4165,8 +4135,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;
@@ -4180,7 +4150,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,
@@ -4867,7 +4837,7 @@ function Component(props, apiRef) {
         "col",
         {
           ref: c.tableColRef,
-          key: c.columnId,
+          key: c.field.toString(),
           style: {
             width: c.width,
             minWidth: c.minWidth ?? "50px"
@@ -4923,7 +4893,7 @@ function Component(props, apiRef) {
           HeadCell2,
           {
             tableId,
-            key: c.columnId,
+            key: c.field.toString(),
             stickyHeader: props.stickyHeader,
             editMode: !!c.isCellEditable,
             onSortChange: handleSortChange,