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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/components/DataTable/components.d.ts +5 -5
  2. package/dist/components/DataTable/hooks.d.ts +7 -8
  3. package/dist/components/DataTable/types.d.ts +1 -9
  4. package/dist/components/DataTable/utils.d.ts +8 -2
  5. package/dist/components/data-display/DataTable.md +25 -27
  6. package/dist/index.browser.js +6 -6
  7. package/dist/index.browser.js.map +3 -3
  8. package/dist/index.cjs +58 -76
  9. package/dist/index.js +186 -204
  10. package/dist/libs/slot-props.d.ts +2 -2
  11. package/framer/index.js +1 -1
  12. package/package.json +1 -1
package/dist/components/DataTable/components.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { ReactNode } from 'react';
2
- import type { ObjectLike, RenderedColumnDef, Sort } from './types';
2
+ import type { ObjectLike, ColumnDef, Sort } from './types';
3
3
  export declare const TextEllipsis: ({ children, lineClamp, ...rest }: {
4
4
  children: ReactNode;
5
5
  lineClamp?: number | undefined;
@@ -7,7 +7,7 @@ export declare const TextEllipsis: ({ children, lineClamp, ...rest }: {
7
7
  export declare const CellTextEllipsis: ({ children }: {
8
8
  children: ReactNode;
9
9
  }) => React.JSX.Element;
10
- export declare const HeadCell: <T extends ObjectLike, GetId>(props: RenderedColumnDef<T, GetId> & {
10
+ export declare const HeadCell: <T extends ObjectLike, GetId>(props: ColumnDef<T, GetId> & {
11
11
  tableId: string;
12
12
  stickyHeader?: boolean | undefined;
13
13
  editMode?: boolean | undefined;
@@ -18,7 +18,7 @@ export declare const HeadCell: <T extends ObjectLike, GetId>(props: RenderedColu
18
18
  currentSort?: Sort | undefined;
19
19
  }) => void) | undefined;
20
20
  sortOrder: Sort[];
21
- onAutoFit?: ((columnId: string) => void) | undefined;
21
+ onAutoFit?: ((field: keyof T) => void) | undefined;
22
22
  }) => React.JSX.Element;
23
23
  export declare const BodyCell: <T extends Record<string, any>, ID>(props: {
24
24
  tableId: string;
@@ -26,14 +26,14 @@ export declare const BodyCell: <T extends Record<string, any>, ID>(props: {
26
26
  rowId: ID;
27
27
  editMode?: boolean | undefined;
28
28
  noWrap?: boolean | undefined;
29
- } & RenderedColumnDef<T, any>) => React.JSX.Element;
29
+ } & ColumnDef<T, any>) => React.JSX.Element;
30
30
  export declare const BodyRow: <T extends Record<string, any>, ID>(props: {
31
31
  tableId: string;
32
32
  row: T;
33
33
  rowId: ID;
34
34
  editMode?: boolean;
35
35
  noWrap?: boolean;
36
- columns: RenderedColumnDef<T, any>[];
36
+ columns: ColumnDef<T, any>[];
37
37
  }) => JSX.Element;
38
38
  export declare const VirtualizedTableRow: React.NamedExoticComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/joy").Theme> & {
39
39
  striped?: boolean | undefined;
package/dist/components/DataTable/hooks.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  /// <reference types="react" />
2
- import type { ObjectLike, RenderedColumnDef, DataTableProps, Sort, InferredIdType } from './types';
3
- export declare function useColumnWidths(columnsById: Record<string, {
4
- field: PropertyKey;
2
+ import type { ObjectLike, ColumnDef, DataTableProps, Sort, InferredIdType } from './types';
3
+ export declare function useColumnWidths(columnsByField: Record<string, {
5
4
  headerRef: React.RefObject<HTMLTableCellElement>;
6
5
  }>): Record<string, number>;
7
6
  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
11
10
  pageSize: number;
12
11
  onPaginationModelChange: (newPage: number) => void;
13
12
  getId: (row: T, index?: number) => InferredIdType<T, GetId>;
14
- HeadCell: <T_1 extends ObjectLike, GetId_1>(props: RenderedColumnDef<T_1, GetId_1> & {
13
+ HeadCell: <T_1 extends ObjectLike, GetId_1>(props: ColumnDef<T_1, GetId_1> & {
15
14
  tableId: string;
16
15
  stickyHeader?: boolean | undefined;
17
16
  editMode?: boolean | undefined;
@@ -22,7 +21,7 @@ export declare function useDataTableRenderer<T extends Record<PropertyKey, unkno
22
21
  currentSort?: Sort | undefined;
23
22
  }) => void) | undefined;
24
23
  sortOrder: Sort[];
25
- onAutoFit?: ((columnId: string) => void) | undefined;
24
+ onAutoFit?: ((field: keyof T_1) => void) | undefined;
26
25
  }) => import("react").JSX.Element;
27
26
  BodyRow: <T_2 extends Record<string, any>, ID>(props: {
28
27
  tableId: string;
@@ -30,7 +29,7 @@ export declare function useDataTableRenderer<T extends Record<PropertyKey, unkno
30
29
  rowId: ID;
31
30
  editMode?: boolean | undefined;
32
31
  noWrap?: boolean | undefined;
33
- columns: RenderedColumnDef<T_2, any>[];
32
+ columns: ColumnDef<T_2, any>[];
34
33
  }) => JSX.Element;
35
34
  dataInPage: T[];
36
35
  handleSortChange: (props: {
@@ -38,7 +37,7 @@ export declare function useDataTableRenderer<T extends Record<PropertyKey, unkno
38
37
  multiple: boolean;
39
38
  currentSort?: Sort | undefined;
40
39
  }) => void;
41
- handleAutoFit: (columnId: string) => void;
40
+ handleAutoFit: (field: keyof T) => void;
42
41
  isAllSelected: boolean;
43
42
  isTotalSelected: boolean;
44
43
  isSelectedRow: (model: InferredIdType<T, GetId>) => boolean;
@@ -47,7 +46,7 @@ export declare function useDataTableRenderer<T extends Record<PropertyKey, unkno
47
46
  onRowFocus: (rowId: InferredIdType<T, GetId>) => void;
48
47
  onAllCheckboxChange: () => void;
49
48
  onCheckboxChange: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, selectedModel: InferredIdType<T, GetId>) => void;
50
- columns: RenderedColumnDef<T, InferredIdType<T, GetId>>[];
49
+ columns: ColumnDef<T, InferredIdType<T, GetId>>[];
51
50
  tableMinWidth: number;
52
51
  processedColumnGroups: {
53
52
  groups: import("./types").ProcessedColumnGroup[][];
package/dist/components/DataTable/types.d.ts CHANGED
@@ -72,6 +72,7 @@ export type FlattenedColumn<T extends Record<PropertyKey, any>, ID> = ColumnDef<
72
72
  };
73
73
  export type BaseColumnDef<T extends Record<PropertyKey, V>, V, ID> = {
74
74
  [K in keyof T]: {
75
+ /** 컬럼의 고유 식별자. 한 테이블 안에서 중복되면 throw 한다. */
75
76
  field: K;
76
77
  headerName?: string;
77
78
  headerRef?: React.RefObject<HTMLTableCellElement>;
@@ -148,15 +149,6 @@ export type ActionsColumnDef<T extends Record<PropertyKey, string>, ID> = BaseCo
148
149
  }) => ReactNode[];
149
150
  };
150
151
  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>;
151
- /**
152
- * 내부 렌더러가 `columnId`를 붙인 컬럼. `columnId`는 `field`를 그대로 쓰고, 같은 `field`가 여러 번
153
- * 정의된 경우에만 두 번째부터 `__2`, `__3` 접미사를 붙인다(이미 쓰인 이름은 건너뛴다).
154
- * 숨긴 컬럼까지 포함한 전체 컬럼 기준으로 매기므로 컬럼을 숨겨도 값이 바뀌지 않는다.
155
- * <col> key와 헤더 ref 매칭에만 쓰는 내부값이라 소비자 `ColumnDef`에는 없다.
156
- */
157
- export type RenderedColumnDef<T extends Record<PropertyKey, any>, ID = unknown> = ColumnDef<T, ID> & {
158
- columnId: string;
159
- };
160
152
  export type ColumnVisibilityModel = Record<string, boolean>;
161
153
  export type Sort = 'asc' | 'desc' | null;
162
154
  export type SortModel<T extends Record<PropertyKey, any>> = {
package/dist/components/DataTable/utils.d.ts CHANGED
@@ -22,6 +22,12 @@ export declare function computeAutoFitWidth(params: {
22
22
  }): number | null;
23
23
  /**
24
24
  * 헤더 셀의 DOM id. `<td headers>`가 이 값을 가리키므로 두 곳이 같은 규칙을 써야 한다.
25
- * 같은 `field`가 여러 번 쓰일 수 있어 `headerName`이 아니라 컬럼 식별자로 만든다.
25
+ * 컬럼마다 달라야 하므로 `headerName`이 아니라 고유한 `field`로 만든다.
26
26
  */
27
- export declare function getHeaderCellId(tableId: string, columnId: string): string;
27
+ export declare function getHeaderCellId(tableId: string, field: PropertyKey): string;
28
+ /**
29
+ * `field`를 DOM id로 쓸 수 있게 정규화한다.
30
+ * `field`는 임의의 object key라 공백이 들어올 수 있는데, 공백이 남으면 `<td headers>`가 다중 IDREF로
31
+ * 파싱되어 헤더-셀 연결이 끊긴다. 중복 검사도 이 값으로 한다 — `'a b'`와 `'a_b'`는 같은 id가 되기 때문이다.
32
+ */
33
+ export declare function sanitizeColumnId(field: PropertyKey): string;
package/dist/components/data-display/DataTable.md CHANGED
@@ -2363,29 +2363,29 @@ interface DataTableApi {
2363
2363
 
2364
2364
  All column types extend `BaseColumnDef` with shared properties:
2365
2365
 
2366
- | Prop | Type | Default | Description |
2367
- | ----------------- | --------------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------ |
2368
- | `field` | `keyof T` | (required) | Row data field to display |
2369
- | `headerName` | `string` | - | Column header text |
2370
- | `type` | `'text' \| 'number' \| 'currency' \| 'date' \| 'select' \| 'autocomplete' \| 'longText' \| 'link' \| 'actions'` | `'text'` | Column type (determines edit UI) |
2371
- | `width` | `string` | - | Column width (e.g., `'200px'`, `'30%'`) |
2372
- | `minWidth` | `string` | - | Minimum column width |
2373
- | `maxWidth` | `string` | - | Maximum column width |
2374
- | `resizable` | `boolean` | `false` | Enables column resizing by dragging |
2375
- | `sortable` | `boolean` | `true` | Enables sorting for this column |
2376
- | `sortComparator` | `(params: { rowA, rowB }) => number` | - | Custom sort logic |
2377
- | `sortOrder` | `('asc' \| 'desc' \| null)[]` | - | Column-specific sort direction cycle |
2378
- | `required` | `boolean` | `false` | Shows required indicator (\*) in header |
2379
- | `headerLineClamp` | `1 \| 2` | `1` | Max header text lines before truncation |
2380
- | `description` | `string` | - | Tooltip text for the column header |
2381
- | `cellClassName` | `string \| ((params: { row, value }) => string)` | - | Dynamic cell CSS class |
2382
- | `headerClassName` | `string \| ((params) => string)` | - | Dynamic header CSS class |
2383
- | `renderCell` | `(params: { row, value, rowIndex, colIndex, id }) => ReactNode` | - | Custom cell renderer |
2384
- | `renderEditCell` | `(params) => ReactNode` | - | Custom edit cell renderer |
2385
- | `isCellEditable` | `boolean \| ((params: { row, value, id }) => boolean)` | `true` | Whether a cell is editable |
2386
- | `componentProps` | `object \| ((params: { row, id }) => object)` | - | Props passed to the column type's edit component |
2387
- | `onCellEditStart` | `(params: { row, originalRow, value }) => void` | - | Callback when cell editing begins |
2388
- | `onCellEditStop` | `(params: { row, originalRow, value }) => void` | - | Callback when cell editing ends |
2366
+ | Prop | Type | Default | Description |
2367
+ | ----------------- | --------------------------------------------------------------------------------------------------------------- | ---------- | ----------------------------------------------------------- |
2368
+ | `field` | `keyof T` | (required) | Row data field to display. Must be unique within the table. |
2369
+ | `headerName` | `string` | - | Column header text |
2370
+ | `type` | `'text' \| 'number' \| 'currency' \| 'date' \| 'select' \| 'autocomplete' \| 'longText' \| 'link' \| 'actions'` | `'text'` | Column type (determines edit UI) |
2371
+ | `width` | `string` | - | Column width (e.g., `'200px'`, `'30%'`) |
2372
+ | `minWidth` | `string` | - | Minimum column width |
2373
+ | `maxWidth` | `string` | - | Maximum column width |
2374
+ | `resizable` | `boolean` | `false` | Enables column resizing by dragging |
2375
+ | `sortable` | `boolean` | `true` | Enables sorting for this column |
2376
+ | `sortComparator` | `(params: { rowA, rowB }) => number` | - | Custom sort logic |
2377
+ | `sortOrder` | `('asc' \| 'desc' \| null)[]` | - | Column-specific sort direction cycle |
2378
+ | `required` | `boolean` | `false` | Shows required indicator (\*) in header |
2379
+ | `headerLineClamp` | `1 \| 2` | `1` | Max header text lines before truncation |
2380
+ | `description` | `string` | - | Tooltip text for the column header |
2381
+ | `cellClassName` | `string \| ((params: { row, value }) => string)` | - | Dynamic cell CSS class |
2382
+ | `headerClassName` | `string \| ((params) => string)` | - | Dynamic header CSS class |
2383
+ | `renderCell` | `(params: { row, value, rowIndex, colIndex, id }) => ReactNode` | - | Custom cell renderer |
2384
+ | `renderEditCell` | `(params) => ReactNode` | - | Custom edit cell renderer |
2385
+ | `isCellEditable` | `boolean \| ((params: { row, value, id }) => boolean)` | `true` | Whether a cell is editable |
2386
+ | `componentProps` | `object \| ((params: { row, id }) => object)` | - | Props passed to the column type's edit component |
2387
+ | `onCellEditStart` | `(params: { row, originalRow, value }) => void` | - | Callback when cell editing begins |
2388
+ | `onCellEditStop` | `(params: { row, originalRow, value }) => void` | - | Callback when cell editing ends |
2389
2389
 
2390
2390
  ### ActionsColumnDef
2391
2391
 
@@ -2424,10 +2424,8 @@ interface DataTableApi {
2424
2424
  ### Feature Combination Constraints
2425
2425
 
2426
2426
  - `pinnedColumns` and `columnGroupingModel` cannot be used simultaneously.
2427
- - 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.
2428
- - 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.
2429
- - `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`.
2430
- - 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.
2427
+ - `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`.
2428
+ - 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.
2431
2429
  - `editMode` must be `true` for editing-related UI to be active.
2432
2430
  - When `paginationMode="server"`, `rowCount` must be specified.
2433
2431