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

package/dist/components/DataTable/components.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import type { ObjectLike, RenderedColumnDef, Sort } from './types';
+import type { ObjectLike, ColumnDef, Sort } from './types';
 export declare const TextEllipsis: ({ children, lineClamp, ...rest }: {
     children: ReactNode;
     lineClamp?: number | undefined;
@@ -7,7 +7,7 @@ export declare const TextEllipsis: ({ children, lineClamp, ...rest }: {
 export declare const CellTextEllipsis: ({ children }: {
     children: ReactNode;
 }) => React.JSX.Element;
-export declare const HeadCell: <T extends ObjectLike, GetId>(props: RenderedColumnDef<T, GetId> & {
+export declare const HeadCell: <T extends ObjectLike, GetId>(props: ColumnDef<T, GetId> & {
     tableId: string;
     stickyHeader?: boolean | undefined;
     editMode?: boolean | undefined;
@@ -18,7 +18,7 @@ export declare const HeadCell: <T extends ObjectLike, GetId>(props: RenderedColu
         currentSort?: Sort | undefined;
     }) => void) | undefined;
     sortOrder: Sort[];
-    onAutoFit?: ((columnId: string) => void) | undefined;
+    onAutoFit?: ((field: keyof T) => void) | undefined;
 }) => React.JSX.Element;
 export declare const BodyCell: <T extends Record<string, any>, ID>(props: {
     tableId: string;
@@ -26,14 +26,14 @@ export declare const BodyCell: <T extends Record<string, any>, ID>(props: {
     rowId: ID;
     editMode?: boolean | undefined;
     noWrap?: boolean | undefined;
-} & RenderedColumnDef<T, any>) => React.JSX.Element;
+} & ColumnDef<T, any>) => React.JSX.Element;
 export declare const BodyRow: <T extends Record<string, any>, ID>(props: {
     tableId: string;
     row: T;
     rowId: ID;
     editMode?: boolean;
     noWrap?: boolean;
-    columns: RenderedColumnDef<T, any>[];
+    columns: ColumnDef<T, any>[];
 }) => JSX.Element;
 export declare const VirtualizedTableRow: React.NamedExoticComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/joy").Theme> & {
     striped?: boolean | undefined;

package/dist/components/DataTable/hooks.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import type { ObjectLike, RenderedColumnDef, DataTableProps, Sort, InferredIdType } from './types';
-export declare function useColumnWidths(columnsById: Record<string, {
-    field: PropertyKey;
+import type { ObjectLike, ColumnDef, DataTableProps, Sort, InferredIdType } from './types';
+export declare function useColumnWidths(columnsByField: Record<string, {
     headerRef: React.RefObject<HTMLTableCellElement>;
 }>): Record<string, number>;
 export declare function useDataTableRenderer<T extends Record<PropertyKey, unknown>, GetId extends ((row: T) => any) | undefined = undefined>({ rows: _rows, columns: columnsProp, pinnedColumns, rowCount: totalRowsProp, initialState, pagination, paginationMode, paginationModel, onPaginationModelChange, sortModel: controlledSortModel, sortOrder: _sortOrder, selectionModel, onSortModelChange, onSelectionModelChange, editMode, getId: _getId, isTotalSelected: _isTotalSelected, isRowSelectable, columnGroupingModel, columnVisibilityModel, onColumnVisibilityModelChange, checkboxSelection, }: DataTableProps<T, GetId>): {
@@ -11,7 +10,7 @@ export declare function useDataTableRenderer<T extends Record<PropertyKey, unkno
     pageSize: number;
     onPaginationModelChange: (newPage: number) => void;
     getId: (row: T, index?: number) => InferredIdType<T, GetId>;
-    HeadCell: <T_1 extends ObjectLike, GetId_1>(props: RenderedColumnDef<T_1, GetId_1> & {
+    HeadCell: <T_1 extends ObjectLike, GetId_1>(props: ColumnDef<T_1, GetId_1> & {
         tableId: string;
         stickyHeader?: boolean | undefined;
         editMode?: boolean | undefined;
@@ -22,7 +21,7 @@ export declare function useDataTableRenderer<T extends Record<PropertyKey, unkno
             currentSort?: Sort | undefined;
         }) => void) | undefined;
         sortOrder: Sort[];
-        onAutoFit?: ((columnId: string) => void) | undefined;
+        onAutoFit?: ((field: keyof T_1) => void) | undefined;
     }) => import("react").JSX.Element;
     BodyRow: <T_2 extends Record<string, any>, ID>(props: {
         tableId: string;
@@ -30,7 +29,7 @@ export declare function useDataTableRenderer<T extends Record<PropertyKey, unkno
         rowId: ID;
         editMode?: boolean | undefined;
         noWrap?: boolean | undefined;
-        columns: RenderedColumnDef<T_2, any>[];
+        columns: ColumnDef<T_2, any>[];
     }) => JSX.Element;
     dataInPage: T[];
     handleSortChange: (props: {
@@ -38,7 +37,7 @@ export declare function useDataTableRenderer<T extends Record<PropertyKey, unkno
         multiple: boolean;
         currentSort?: Sort | undefined;
     }) => void;
-    handleAutoFit: (columnId: string) => void;
+    handleAutoFit: (field: keyof T) => void;
     isAllSelected: boolean;
     isTotalSelected: boolean;
     isSelectedRow: (model: InferredIdType<T, GetId>) => boolean;
@@ -47,7 +46,7 @@ export declare function useDataTableRenderer<T extends Record<PropertyKey, unkno
     onRowFocus: (rowId: InferredIdType<T, GetId>) => void;
     onAllCheckboxChange: () => void;
     onCheckboxChange: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, selectedModel: InferredIdType<T, GetId>) => void;
-    columns: RenderedColumnDef<T, InferredIdType<T, GetId>>[];
+    columns: ColumnDef<T, InferredIdType<T, GetId>>[];
     tableMinWidth: number;
     processedColumnGroups: {
         groups: import("./types").ProcessedColumnGroup[][];

package/dist/components/DataTable/types.d.ts

@@ -72,6 +72,7 @@ export type FlattenedColumn<T extends Record<PropertyKey, any>, ID> = ColumnDef<
 };
 export type BaseColumnDef<T extends Record<PropertyKey, V>, V, ID> = {
     [K in keyof T]: {
+        /** 컬럼의 고유 식별자. 한 테이블 안에서 중복되면 throw 한다. */
         field: K;
         headerName?: string;
         headerRef?: React.RefObject<HTMLTableCellElement>;
@@ -148,15 +149,6 @@ export type ActionsColumnDef<T extends Record<PropertyKey, string>, ID> = BaseCo
     }) => ReactNode[];
 };
 export type ColumnDef<T extends Record<PropertyKey, any>, ID = unknown> = AutocompleteColumnDef<T, ID> | CurrencyColumnDef<T, ID> | DateColumnDef<T, ID> | NumberColumnDef<T, ID> | TextColumnDef<T, ID> | LongTextColumnDef<T, ID> | LinkColumnDef<T, ID> | SelectColumnDef<T, ID> | ActionsColumnDef<T, ID>;
-/**
- * 내부 렌더러가 `columnId`를 붙인 컬럼. `columnId`는 `field`를 그대로 쓰고, 같은 `field`가 여러 번
- * 정의된 경우에만 두 번째부터 `__2`, `__3` 접미사를 붙인다(이미 쓰인 이름은 건너뛴다).
- * 숨긴 컬럼까지 포함한 전체 컬럼 기준으로 매기므로 컬럼을 숨겨도 값이 바뀌지 않는다.
- * <col> key와 헤더 ref 매칭에만 쓰는 내부값이라 소비자 `ColumnDef`에는 없다.
- */
-export type RenderedColumnDef<T extends Record<PropertyKey, any>, ID = unknown> = ColumnDef<T, ID> & {
-    columnId: string;
-};
 export type ColumnVisibilityModel = Record<string, boolean>;
 export type Sort = 'asc' | 'desc' | null;
 export type SortModel<T extends Record<PropertyKey, any>> = {

package/dist/components/DataTable/utils.d.ts

@@ -22,12 +22,12 @@ export declare function computeAutoFitWidth(params: {
 }): number | null;
 /**
  * 헤더 셀의 DOM id. `<td headers>`가 이 값을 가리키므로 두 곳이 같은 규칙을 써야 한다.
- * 같은 `field`가 여러 번 쓰일 수 있어 `headerName`이 아니라 컬럼 식별자로 만든다.
+ * 컬럼마다 달라야 하므로 `headerName`이 아니라 고유한 `field`로 만든다.
  */
-export declare function getHeaderCellId(tableId: string, columnId: string): string;
+export declare function getHeaderCellId(tableId: string, field: PropertyKey): string;
 /**
- * `field`를 컬럼 식별자로 쓸 수 있게 정규화한다.
+ * `field`를 DOM id로 쓸 수 있게 정규화한다.
  * `field`는 임의의 object key라 공백이 들어올 수 있는데, 공백이 남으면 `<td headers>`가 다중 IDREF로
- * 파싱되어 헤더-셀 연결이 끊긴다. 유일성을 매기기 *전에* 접어야 `'a b'`와 `'a_b'`가 같은 id로 다시 뭉개지지 않는다.
+ * 파싱되어 헤더-셀 연결이 끊긴다. 중복 검사도 이 값으로 한다 — `'a b'`와 `'a_b'`는 같은 id가 되기 때문이다.
  */
 export declare function sanitizeColumnId(field: PropertyKey): string;

package/dist/components/data-display/DataTable.md

@@ -2363,29 +2363,29 @@ interface DataTableApi {
 
 All column types extend `BaseColumnDef` with shared properties:
 
-| Prop              | Type                                                                                                            | Default    | Description                                      |
-| ----------------- | --------------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------ |
-| `field`           | `keyof T`                                                                                                       | (required) | Row data field to display                        |
-| `headerName`      | `string`                                                                                                        | -          | Column header text                               |
-| `type`            | `'text' \| 'number' \| 'currency' \| 'date' \| 'select' \| 'autocomplete' \| 'longText' \| 'link' \| 'actions'` | `'text'`   | Column type (determines edit UI)                 |
-| `width`           | `string`                                                                                                        | -          | Column width (e.g., `'200px'`, `'30%'`)          |
-| `minWidth`        | `string`                                                                                                        | -          | Minimum column width                             |
-| `maxWidth`        | `string`                                                                                                        | -          | Maximum column width                             |
-| `resizable`       | `boolean`                                                                                                       | `false`    | Enables column resizing by dragging              |
-| `sortable`        | `boolean`                                                                                                       | `true`     | Enables sorting for this column                  |
-| `sortComparator`  | `(params: { rowA, rowB }) => number`                                                                            | -          | Custom sort logic                                |
-| `sortOrder`       | `('asc' \| 'desc' \| null)[]`                                                                                   | -          | Column-specific sort direction cycle             |
-| `required`        | `boolean`                                                                                                       | `false`    | Shows required indicator (\*) in header          |
-| `headerLineClamp` | `1 \| 2`                                                                                                        | `1`        | Max header text lines before truncation          |
-| `description`     | `string`                                                                                                        | -          | Tooltip text for the column header               |
-| `cellClassName`   | `string \| ((params: { row, value }) => string)`                                                                | -          | Dynamic cell CSS class                           |
-| `headerClassName` | `string \| ((params) => string)`                                                                                | -          | Dynamic header CSS class                         |
-| `renderCell`      | `(params: { row, value, rowIndex, colIndex, id }) => ReactNode`                                                 | -          | Custom cell renderer                             |
-| `renderEditCell`  | `(params) => ReactNode`                                                                                         | -          | Custom edit cell renderer                        |
-| `isCellEditable`  | `boolean \| ((params: { row, value, id }) => boolean)`                                                          | `true`     | Whether a cell is editable                       |
-| `componentProps`  | `object \| ((params: { row, id }) => object)`                                                                   | -          | Props passed to the column type's edit component |
-| `onCellEditStart` | `(params: { row, originalRow, value }) => void`                                                                 | -          | Callback when cell editing begins                |
-| `onCellEditStop`  | `(params: { row, originalRow, value }) => void`                                                                 | -          | Callback when cell editing ends                  |
+| Prop              | Type                                                                                                            | Default    | Description                                                 |
+| ----------------- | --------------------------------------------------------------------------------------------------------------- | ---------- | ----------------------------------------------------------- |
+| `field`           | `keyof T`                                                                                                       | (required) | Row data field to display. Must be unique within the table. |
+| `headerName`      | `string`                                                                                                        | -          | Column header text                                          |
+| `type`            | `'text' \| 'number' \| 'currency' \| 'date' \| 'select' \| 'autocomplete' \| 'longText' \| 'link' \| 'actions'` | `'text'`   | Column type (determines edit UI)                            |
+| `width`           | `string`                                                                                                        | -          | Column width (e.g., `'200px'`, `'30%'`)                     |
+| `minWidth`        | `string`                                                                                                        | -          | Minimum column width                                        |
+| `maxWidth`        | `string`                                                                                                        | -          | Maximum column width                                        |
+| `resizable`       | `boolean`                                                                                                       | `false`    | Enables column resizing by dragging                         |
+| `sortable`        | `boolean`                                                                                                       | `true`     | Enables sorting for this column                             |
+| `sortComparator`  | `(params: { rowA, rowB }) => number`                                                                            | -          | Custom sort logic                                           |
+| `sortOrder`       | `('asc' \| 'desc' \| null)[]`                                                                                   | -          | Column-specific sort direction cycle                        |
+| `required`        | `boolean`                                                                                                       | `false`    | Shows required indicator (\*) in header                     |
+| `headerLineClamp` | `1 \| 2`                                                                                                        | `1`        | Max header text lines before truncation                     |
+| `description`     | `string`                                                                                                        | -          | Tooltip text for the column header                          |
+| `cellClassName`   | `string \| ((params: { row, value }) => string)`                                                                | -          | Dynamic cell CSS class                                      |
+| `headerClassName` | `string \| ((params) => string)`                                                                                | -          | Dynamic header CSS class                                    |
+| `renderCell`      | `(params: { row, value, rowIndex, colIndex, id }) => ReactNode`                                                 | -          | Custom cell renderer                                        |
+| `renderEditCell`  | `(params) => ReactNode`                                                                                         | -          | Custom edit cell renderer                                   |
+| `isCellEditable`  | `boolean \| ((params: { row, value, id }) => boolean)`                                                          | `true`     | Whether a cell is editable                                  |
+| `componentProps`  | `object \| ((params: { row, id }) => object)`                                                                   | -          | Props passed to the column type's edit component            |
+| `onCellEditStart` | `(params: { row, originalRow, value }) => void`                                                                 | -          | Callback when cell editing begins                           |
+| `onCellEditStop`  | `(params: { row, originalRow, value }) => void`                                                                 | -          | Callback when cell editing ends                             |
 
 ### ActionsColumnDef
 
@@ -2424,10 +2424,8 @@ interface DataTableApi {
 ### Feature Combination Constraints
 
 - `pinnedColumns` and `columnGroupingModel` cannot be used simultaneously.
-- Two columns may share the same `field`. DataTable derives an internal per-column id so each duplicate keeps its own header/`<col>` element, measured width, and header `id`. The first column with a given `field` uses the `field` itself; each later duplicate gets a `__2`, `__3`, … suffix, skipping any name that is already a real `field`. The id is deliberately field-derived rather than positional: a positional id renumbers when a column is hidden, which would move a resized column's inline `<col>` width onto its neighbour. `sortModel` and `columnVisibilityModel` still match by `field`, so they apply to every column sharing it.
-- The header cell `id` (`<th id>`, referenced by each `<td headers>`) is built from that internal column id. It is stable across visibility changes, but it is an implementation detail — do not target it from external selectors, CSS, or `aria-labelledby`. The same applies to `data-hds-column-id` on the header cell, which carries the raw internal id.
-- `data-field` on the header cell holds the column's `field`. Like the ids above it is an implementation detail for debugging — do not target it from external selectors or CSS. It is not unique when two columns share a `field`.
-- Do not pin a duplicated `field`. `pinnedColumns` matches by `field` and cannot address one of the duplicates, so every column sharing it resolves to the same offset and they render stacked on top of each other.
+- `field` must be unique within a table. DataTable throws when two columns share one, because duplicates would collide on the header/`<col>` element, the measured width, and the header `id`. Whitespace is collapsed before the check, so `'order total'` and `'order_total'` also count as duplicates. To render several values in one cell, map them into `rows` first; to render a cell with no backing data, reference a `field` that is not in `rows` and draw it with `renderCell`.
+- The header cell `id` (`<th id>`, referenced by each `<td headers>`) is derived from `field`, with whitespace collapsed. It is an implementation detail — do not target it from external selectors, CSS, or `aria-labelledby`. The same applies to `data-field` on the header cell.
 - `editMode` must be `true` for editing-related UI to be active.
 - When `paginationMode="server"`, `rowCount` must be specified.