@krak-stack/registry 0.1.29 → 0.1.31
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.
- package/dist/components/ui/data-table.d.ts +153 -45
- package/dist/components/ui/data-table.js +810 -764
- package/package.json +1 -1
|
@@ -13,7 +13,141 @@ export interface DataTableValueGetterParams<TData extends RowData> {
|
|
|
13
13
|
export interface DataTableCellRendererParams<TData extends RowData> extends DataTableValueGetterParams<TData> {
|
|
14
14
|
value: unknown;
|
|
15
15
|
}
|
|
16
|
-
export interface
|
|
16
|
+
export interface DataTableListItem {
|
|
17
|
+
icon?: ReactNode;
|
|
18
|
+
imageSrc?: string;
|
|
19
|
+
label: string;
|
|
20
|
+
value?: string;
|
|
21
|
+
}
|
|
22
|
+
export interface DataTableListOption extends DataTableListItem {
|
|
23
|
+
value: string;
|
|
24
|
+
}
|
|
25
|
+
export type DataTableItemAction<TItem> = DataTableRowAction<TItem> & {
|
|
26
|
+
closeOnClick?: boolean;
|
|
27
|
+
disabled?: (item: TItem) => boolean;
|
|
28
|
+
};
|
|
29
|
+
export interface DataTableListItemContext<TData> {
|
|
30
|
+
item: DataTableListItem;
|
|
31
|
+
row: TData;
|
|
32
|
+
}
|
|
33
|
+
export interface DataTableListOptions {
|
|
34
|
+
emptyLabel: ReactNode;
|
|
35
|
+
display?: "list" | "icon";
|
|
36
|
+
visibleCount?: number;
|
|
37
|
+
}
|
|
38
|
+
export type DataTableListColumn<TData> = DataTableListOptions & {
|
|
39
|
+
/** Includes items not loaded in the preview; the dropdown only shows supplied items. */
|
|
40
|
+
getTotalCount?: (row: TData) => number;
|
|
41
|
+
/** Actions open from an explicit roster button; list items remain passive. */
|
|
42
|
+
itemActions?: readonly DataTableItemAction<DataTableListItemContext<TData>>[];
|
|
43
|
+
actionsLabel?: string;
|
|
44
|
+
} & ({
|
|
45
|
+
getItems: (row: TData) => readonly DataTableListItem[];
|
|
46
|
+
getOptions?: never;
|
|
47
|
+
manageLabel?: never;
|
|
48
|
+
onAdd?: never;
|
|
49
|
+
onRemove?: never;
|
|
50
|
+
} | {
|
|
51
|
+
/** Editable lists require stable values for selected and available items. */
|
|
52
|
+
getItems: (row: TData) => readonly DataTableListOption[];
|
|
53
|
+
getOptions: (row: TData) => readonly DataTableListOption[];
|
|
54
|
+
manageLabel: string;
|
|
55
|
+
onAdd?: (input: {
|
|
56
|
+
value: string;
|
|
57
|
+
row: TData;
|
|
58
|
+
}) => void;
|
|
59
|
+
onRemove?: (input: {
|
|
60
|
+
value: string;
|
|
61
|
+
row: TData;
|
|
62
|
+
}) => void;
|
|
63
|
+
});
|
|
64
|
+
export interface DataTableListSummaryProps extends DataTableListOptions {
|
|
65
|
+
items: readonly (string | DataTableListItem)[];
|
|
66
|
+
totalCount?: number | undefined;
|
|
67
|
+
}
|
|
68
|
+
interface EditableDataTableListCellProps extends DataTableListOptions {
|
|
69
|
+
manageLabel: string;
|
|
70
|
+
onAdd?: ((value: string) => void) | undefined;
|
|
71
|
+
onRemove?: ((value: string) => void) | undefined;
|
|
72
|
+
options: readonly DataTableListOption[];
|
|
73
|
+
items: readonly DataTableListOption[];
|
|
74
|
+
totalCount?: number | undefined;
|
|
75
|
+
}
|
|
76
|
+
interface DataTableListCellActionsProps {
|
|
77
|
+
actionsLabel?: string;
|
|
78
|
+
itemActions?: readonly DataTableItemAction<DataTableListItem>[];
|
|
79
|
+
}
|
|
80
|
+
export type DataTableListCellProps = DataTableListCellActionsProps & (EditableDataTableListCellProps | (DataTableListSummaryProps & {
|
|
81
|
+
options?: never;
|
|
82
|
+
manageLabel?: never;
|
|
83
|
+
onAdd?: never;
|
|
84
|
+
onRemove?: never;
|
|
85
|
+
}));
|
|
86
|
+
export interface DataTableDateOptions {
|
|
87
|
+
/** Defaults to the current Paraglide locale. */
|
|
88
|
+
locale?: string;
|
|
89
|
+
/** Defaults to UTC. Calendar-only strings retain their date in every zone. */
|
|
90
|
+
timeZone?: string;
|
|
91
|
+
dateStyle?: Intl.DateTimeFormatOptions["dateStyle"];
|
|
92
|
+
emptyLabel?: ReactNode;
|
|
93
|
+
/** Placement of missing or invalid dates, independent of sort direction. */
|
|
94
|
+
nulls?: "first" | "last";
|
|
95
|
+
/** ISO by default; applies to both CSV and JSON exports. */
|
|
96
|
+
exportFormat?: "iso" | "formatted";
|
|
97
|
+
}
|
|
98
|
+
export interface DataTableDateTimeOptions extends DataTableDateOptions {
|
|
99
|
+
timeStyle?: Intl.DateTimeFormatOptions["timeStyle"];
|
|
100
|
+
hour12?: boolean;
|
|
101
|
+
}
|
|
102
|
+
type DataTableDateType = {
|
|
103
|
+
type: "date";
|
|
104
|
+
typeOptions?: DataTableDateOptions;
|
|
105
|
+
} | {
|
|
106
|
+
type: "dateTime";
|
|
107
|
+
typeOptions?: DataTableDateTimeOptions;
|
|
108
|
+
};
|
|
109
|
+
export type DataTableNumberOptions = Omit<Intl.NumberFormatOptions, "style" | "currency"> & {
|
|
110
|
+
locale?: string;
|
|
111
|
+
emptyLabel?: ReactNode;
|
|
112
|
+
nulls?: "first" | "last";
|
|
113
|
+
exportFormat?: "raw" | "formatted";
|
|
114
|
+
} & ({
|
|
115
|
+
style?: "decimal" | "percent";
|
|
116
|
+
currency?: never;
|
|
117
|
+
} | {
|
|
118
|
+
style: "currency";
|
|
119
|
+
currency: string;
|
|
120
|
+
});
|
|
121
|
+
export interface DataTableBooleanOptions<TData> {
|
|
122
|
+
/** Optional localized labels for search and formatted exports. */
|
|
123
|
+
trueLabel?: string;
|
|
124
|
+
falseLabel?: string;
|
|
125
|
+
emptyLabel?: ReactNode;
|
|
126
|
+
nulls?: "first" | "last";
|
|
127
|
+
exportFormat?: "raw" | "formatted";
|
|
128
|
+
getAriaLabel?: (row: TData) => string;
|
|
129
|
+
/** Without a callback, the checkbox is read-only. Updates remain caller-owned. */
|
|
130
|
+
onChange?: (input: {
|
|
131
|
+
value: boolean;
|
|
132
|
+
row: TData;
|
|
133
|
+
}) => void;
|
|
134
|
+
disabled?: (row: TData) => boolean;
|
|
135
|
+
}
|
|
136
|
+
type DataTableColumnType<TData> = {
|
|
137
|
+
type?: undefined;
|
|
138
|
+
typeOptions?: never;
|
|
139
|
+
} | DataTableDateType | {
|
|
140
|
+
type: "number";
|
|
141
|
+
typeOptions?: DataTableNumberOptions;
|
|
142
|
+
} | {
|
|
143
|
+
type: "boolean";
|
|
144
|
+
typeOptions?: DataTableBooleanOptions<TData>;
|
|
145
|
+
} | {
|
|
146
|
+
type: "list";
|
|
147
|
+
typeOptions: DataTableListColumn<TData>;
|
|
148
|
+
};
|
|
149
|
+
export type DataTableColDef<TData extends RowData> = DataTableBaseColDef<TData> & DataTableColumnType<TData>;
|
|
150
|
+
export interface DataTableBaseColDef<TData extends RowData> {
|
|
17
151
|
field?: keyof TData & string;
|
|
18
152
|
colId?: string;
|
|
19
153
|
headerName: ReactNode;
|
|
@@ -43,21 +177,8 @@ export type DataTableRowAction<TData> = {
|
|
|
43
177
|
onClick: (data: TData) => void;
|
|
44
178
|
visible?: (data: TData) => boolean;
|
|
45
179
|
};
|
|
46
|
-
export type DataTableBulkAction<TData> =
|
|
47
|
-
|
|
48
|
-
name: string;
|
|
49
|
-
icon?: ReactNode;
|
|
50
|
-
variant?: "default" | "destructive";
|
|
51
|
-
onClick: (rows: TData[]) => void;
|
|
52
|
-
visible?: (rows: TData[]) => boolean;
|
|
53
|
-
};
|
|
54
|
-
export type DataTableGroupAction = {
|
|
55
|
-
name: string;
|
|
56
|
-
icon?: ReactNode;
|
|
57
|
-
variant?: "default" | "destructive";
|
|
58
|
-
onClick: (groupId: string) => void;
|
|
59
|
-
visible?: (groupId: string) => boolean;
|
|
60
|
-
};
|
|
180
|
+
export type DataTableBulkAction<TData> = DataTableRowAction<TData[]>;
|
|
181
|
+
export type DataTableGroupAction = Omit<DataTableRowAction<string>, "id">;
|
|
61
182
|
export interface DataTableGroupingField<TData> {
|
|
62
183
|
id: string;
|
|
63
184
|
label: string;
|
|
@@ -84,6 +205,10 @@ export type DataTablePaginationFeature = false | {
|
|
|
84
205
|
pageSizes?: readonly number[];
|
|
85
206
|
};
|
|
86
207
|
export interface DataTableFeatures<TData> {
|
|
208
|
+
toolbar?: false | {
|
|
209
|
+
/** Additional `MenubarMenu` controls rendered at the start of the toolbar. */
|
|
210
|
+
items: ReactNode;
|
|
211
|
+
};
|
|
87
212
|
search?: boolean;
|
|
88
213
|
sorting?: boolean;
|
|
89
214
|
pagination?: DataTablePaginationFeature;
|
|
@@ -121,6 +246,7 @@ export interface DataTableFeatures<TData> {
|
|
|
121
246
|
}
|
|
122
247
|
export type DataTableMessages = PaginationMessages & {
|
|
123
248
|
actions: string;
|
|
249
|
+
addItem: string;
|
|
124
250
|
empty: string;
|
|
125
251
|
loading: string;
|
|
126
252
|
filter: string;
|
|
@@ -139,10 +265,11 @@ export type DataTableMessages = PaginationMessages & {
|
|
|
139
265
|
sortBy: string;
|
|
140
266
|
hideColumn: string;
|
|
141
267
|
reorder: string;
|
|
268
|
+
removeItem: string;
|
|
142
269
|
moveUp: string;
|
|
143
270
|
moveDown: string;
|
|
144
271
|
resizeColumn: (column: string) => string;
|
|
145
|
-
|
|
272
|
+
listDetails: string;
|
|
146
273
|
selectAllRows: string;
|
|
147
274
|
selectRow: string;
|
|
148
275
|
selected: string;
|
|
@@ -158,6 +285,7 @@ export declare const dataTableMessages: (overrides?: DataTableMessageOverrides)
|
|
|
158
285
|
goToNextPage: string;
|
|
159
286
|
goToLastPage: string;
|
|
160
287
|
actions: string;
|
|
288
|
+
addItem: string;
|
|
161
289
|
empty: string;
|
|
162
290
|
loading: string;
|
|
163
291
|
filter: string;
|
|
@@ -176,10 +304,11 @@ export declare const dataTableMessages: (overrides?: DataTableMessageOverrides)
|
|
|
176
304
|
sortBy: string;
|
|
177
305
|
hideColumn: string;
|
|
178
306
|
reorder: string;
|
|
307
|
+
removeItem: string;
|
|
179
308
|
moveUp: string;
|
|
180
309
|
moveDown: string;
|
|
181
310
|
resizeColumn: (column: string) => string;
|
|
182
|
-
|
|
311
|
+
listDetails: string;
|
|
183
312
|
selectAllRows: string;
|
|
184
313
|
selectRow: string;
|
|
185
314
|
selected: string;
|
|
@@ -193,6 +322,7 @@ export declare const dataTableMessages: (overrides?: DataTableMessageOverrides)
|
|
|
193
322
|
goToNextPage: string;
|
|
194
323
|
goToLastPage: string;
|
|
195
324
|
actions: string;
|
|
325
|
+
addItem: string;
|
|
196
326
|
empty: string;
|
|
197
327
|
loading: string;
|
|
198
328
|
filter: string;
|
|
@@ -211,10 +341,11 @@ export declare const dataTableMessages: (overrides?: DataTableMessageOverrides)
|
|
|
211
341
|
sortBy: string;
|
|
212
342
|
hideColumn: string;
|
|
213
343
|
reorder: string;
|
|
344
|
+
removeItem: string;
|
|
214
345
|
moveUp: string;
|
|
215
346
|
moveDown: string;
|
|
216
347
|
resizeColumn: (column: string) => string;
|
|
217
|
-
|
|
348
|
+
listDetails: string;
|
|
218
349
|
selectAllRows: string;
|
|
219
350
|
selectRow: string;
|
|
220
351
|
selected: string;
|
|
@@ -255,6 +386,7 @@ export interface DataTableModel<TData extends RowData> {
|
|
|
255
386
|
export declare const normalizeDataTableColumns: <TData extends RowData>(columnDefs: readonly DataTableColDef<TData>[], columnSizing?: Readonly<Record<string, number>>) => DataTableColumn<TData>[];
|
|
256
387
|
export declare const getDataTableWidth: <TData extends RowData>(columns: readonly DataTableColumn<TData>[], utilityColumns?: number) => number;
|
|
257
388
|
export declare const buildDataTableRows: <TData extends RowData>(rowData: readonly TData[], columns: readonly DataTableColumn<TData>[], getRowId?: (row: TData) => string) => DataTableModelRow<TData>[];
|
|
389
|
+
export declare const getDataTableExportValue: <TData extends RowData>(row: DataTableModelRow<TData>, column: DataTableColumn<TData>) => unknown;
|
|
258
390
|
export declare const filterDataTableRows: <TData extends RowData>(rows: readonly DataTableModelRow<TData>[], columns: readonly DataTableColumn<TData>[], globalFilter: string) => DataTableModelRow<TData>[];
|
|
259
391
|
export declare const sortDataTableRows: <TData extends RowData>(rows: readonly DataTableModelRow<TData>[], columns: readonly DataTableColumn<TData>[], sorting: NonNullable<QueryType["sort"]>) => DataTableModelRow<TData>[];
|
|
260
392
|
export declare const paginateDataTableRows: <TData extends RowData>(rows: readonly DataTableModelRow<TData>[], pagination: Pick<QueryType, "page" | "pageSize">) => DataTableModelRow<TData>[];
|
|
@@ -278,30 +410,6 @@ export declare const DataTableRowActions: <TData>({ actions, row, title, }: {
|
|
|
278
410
|
title?: string;
|
|
279
411
|
}) => import("react").JSX.Element | null;
|
|
280
412
|
export declare const DataTable: <TData extends RowData>(props: DataTableProps<TData>) => import("react").JSX.Element;
|
|
281
|
-
export
|
|
282
|
-
|
|
283
|
-
label: string;
|
|
284
|
-
value: string;
|
|
285
|
-
}
|
|
286
|
-
export declare const DataTableRelationshipCell: ({ emptyLabel, manageLabel, onAdd, onRemove, options, value, }: {
|
|
287
|
-
emptyLabel: string;
|
|
288
|
-
manageLabel: string;
|
|
289
|
-
onAdd?: (value: string) => void;
|
|
290
|
-
onRemove?: (value: string) => void;
|
|
291
|
-
options: readonly DataTableRelationshipOption[];
|
|
292
|
-
value: readonly DataTableRelationshipOption[];
|
|
293
|
-
}) => import("react").JSX.Element;
|
|
294
|
-
export declare const DataTableListSummary: ({ emptyLabel, expandable, items, overflowLabel, totalCount, variant, visibleCount, }: {
|
|
295
|
-
emptyLabel: ReactNode;
|
|
296
|
-
expandable?: boolean;
|
|
297
|
-
items: readonly (string | {
|
|
298
|
-
icon?: ReactNode;
|
|
299
|
-
label: string;
|
|
300
|
-
value?: string;
|
|
301
|
-
})[];
|
|
302
|
-
overflowLabel?: (remaining: number) => ReactNode;
|
|
303
|
-
totalCount?: number;
|
|
304
|
-
variant?: "icon" | "text";
|
|
305
|
-
visibleCount?: number;
|
|
306
|
-
}) => import("react").JSX.Element;
|
|
413
|
+
export declare const DataTableListCell: (props: DataTableListCellProps) => import("react").JSX.Element;
|
|
414
|
+
export declare const DataTableListSummary: (props: DataTableListSummaryProps) => import("react").JSX.Element;
|
|
307
415
|
export {};
|