@canva/intents 0.0.0-beta.2
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/LICENSE.md +48 -0
- package/README.md +119 -0
- package/asset/beta.d.ts +1 -0
- package/beta.d.ts +975 -0
- package/data/beta.d.ts +898 -0
- package/design/beta.d.ts +45 -0
- package/lib/cjs/sdk/intents/asset/beta.js +4 -0
- package/lib/cjs/sdk/intents/beta.js +63 -0
- package/lib/cjs/sdk/intents/data/beta.js +14 -0
- package/lib/cjs/sdk/intents/design/beta.js +14 -0
- package/lib/esm/sdk/intents/asset/beta.js +1 -0
- package/lib/esm/sdk/intents/beta.js +5 -0
- package/lib/esm/sdk/intents/data/beta.js +4 -0
- package/lib/esm/sdk/intents/design/beta.js +4 -0
- package/package.json +35 -0
package/data/beta.d.ts
ADDED
|
@@ -0,0 +1,898 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @beta
|
|
3
|
+
* {@link FetchDataTableError} indicating custom error occurred in the app's implementation.
|
|
4
|
+
* This can be used to indicate specific issues that are not covered by other error types.
|
|
5
|
+
*/
|
|
6
|
+
declare type AppError = {
|
|
7
|
+
/**
|
|
8
|
+
* A custom error occurred in your app.
|
|
9
|
+
*
|
|
10
|
+
* Return this for application-specific errors that don't fit
|
|
11
|
+
* the other categories. Include a descriptive message explaining
|
|
12
|
+
* the error to the user.
|
|
13
|
+
*/
|
|
14
|
+
status: "app_error";
|
|
15
|
+
/**
|
|
16
|
+
* Optional message explaining the error.
|
|
17
|
+
*/
|
|
18
|
+
message?: string;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* @beta
|
|
23
|
+
* {@link InvocationContext} indicating a custom error occurred during data refresh.
|
|
24
|
+
* Triggered when fetchDataTable returned 'app_error' status.
|
|
25
|
+
* UI should display the error message and help users recover.
|
|
26
|
+
*/
|
|
27
|
+
declare type AppErrorInvocationContext = {
|
|
28
|
+
/**
|
|
29
|
+
* A custom error occurred during data refresh.
|
|
30
|
+
*
|
|
31
|
+
* This occurs when `fetchDataTable` returned 'app_error' during a refresh attempt.
|
|
32
|
+
* Your UI should display the error message and help users recover from the specific
|
|
33
|
+
* issue.
|
|
34
|
+
*/
|
|
35
|
+
reason: "app_error";
|
|
36
|
+
/**
|
|
37
|
+
* The data source reference that caused the error during refresh.
|
|
38
|
+
*/
|
|
39
|
+
dataSourceRef?: DataSourceRef;
|
|
40
|
+
/**
|
|
41
|
+
* The error message to display to the user.
|
|
42
|
+
*/
|
|
43
|
+
message?: string;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* @beta
|
|
48
|
+
* Cell containing a boolean value.
|
|
49
|
+
*
|
|
50
|
+
* @example Creating a boolean cell
|
|
51
|
+
* ```ts
|
|
52
|
+
* import type { BooleanDataTableCell } from '@canva/intents/data';
|
|
53
|
+
*
|
|
54
|
+
* const isActiveCell: BooleanDataTableCell = {
|
|
55
|
+
* type: 'boolean',
|
|
56
|
+
* value: true
|
|
57
|
+
* };
|
|
58
|
+
* ```
|
|
59
|
+
*
|
|
60
|
+
* @example Creating a boolean cell with false value
|
|
61
|
+
* ```ts
|
|
62
|
+
* import type { BooleanDataTableCell } from '@canva/intents/data';
|
|
63
|
+
*
|
|
64
|
+
* const isCompleteCell: BooleanDataTableCell = {
|
|
65
|
+
* type: 'boolean',
|
|
66
|
+
* value: false
|
|
67
|
+
* };
|
|
68
|
+
* ```
|
|
69
|
+
*
|
|
70
|
+
* @example Creating an empty boolean cell
|
|
71
|
+
* ```ts
|
|
72
|
+
* import type { BooleanDataTableCell } from '@canva/intents/data';
|
|
73
|
+
*
|
|
74
|
+
* const emptyBooleanCell: BooleanDataTableCell = {
|
|
75
|
+
* type: 'boolean',
|
|
76
|
+
* value: undefined
|
|
77
|
+
* };
|
|
78
|
+
* ```
|
|
79
|
+
*/
|
|
80
|
+
export declare type BooleanDataTableCell = {
|
|
81
|
+
/**
|
|
82
|
+
* Indicates this cell contains a boolean value.
|
|
83
|
+
*/
|
|
84
|
+
type: "boolean";
|
|
85
|
+
/**
|
|
86
|
+
* Boolean value (true or false).
|
|
87
|
+
*
|
|
88
|
+
* Use `undefined` for an empty cell.
|
|
89
|
+
*/
|
|
90
|
+
value: boolean | undefined;
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* @beta
|
|
95
|
+
* Configuration for a table column.
|
|
96
|
+
*/
|
|
97
|
+
export declare type ColumnConfig = {
|
|
98
|
+
/**
|
|
99
|
+
* Name for the column, displayed as header text.
|
|
100
|
+
*
|
|
101
|
+
* If `undefined`, the column will have no header text.
|
|
102
|
+
*/
|
|
103
|
+
name: string | undefined;
|
|
104
|
+
/**
|
|
105
|
+
* Expected data type for cells in this column.
|
|
106
|
+
*
|
|
107
|
+
* Use a specific `DataType` for columns with consistent types,
|
|
108
|
+
* or `'variant'` for columns that may contain mixed types.
|
|
109
|
+
*/
|
|
110
|
+
type: DataType | "variant";
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* @beta
|
|
115
|
+
* Main interface for implementing the Data Connector intent.
|
|
116
|
+
*
|
|
117
|
+
* Implementing the Data Connector intent enables apps to import external data into Canva.
|
|
118
|
+
* This allows users to select, preview, and refresh data from external sources.
|
|
119
|
+
*/
|
|
120
|
+
export declare type DataConnectorIntent = {
|
|
121
|
+
/**
|
|
122
|
+
* Fetches structured data from an external source.
|
|
123
|
+
*
|
|
124
|
+
* This action is called in two scenarios:
|
|
125
|
+
*
|
|
126
|
+
* - During data selection to preview data before import (when {@link RenderSelectionUiParams.updateDataRef} is called).
|
|
127
|
+
* - When refreshing previously imported data (when the user requests an update).
|
|
128
|
+
*
|
|
129
|
+
* @param params - Parameters for the data fetching operation.
|
|
130
|
+
* @returns A promise resolving to either a successful result with data or an error.
|
|
131
|
+
*
|
|
132
|
+
* @example Fetching data from an external source
|
|
133
|
+
* ```ts
|
|
134
|
+
* import type { FetchDataTableParams, FetchDataTableResult } from '@canva/intents/data';
|
|
135
|
+
*
|
|
136
|
+
* async function fetchDataTable(params: FetchDataTableParams): Promise<FetchDataTableResult> {
|
|
137
|
+
* const { dataSourceRef, limit, signal } = params;
|
|
138
|
+
*
|
|
139
|
+
* // Check if the operation has been aborted.
|
|
140
|
+
* if (signal.aborted) {
|
|
141
|
+
* return { status: 'app_error', message: 'The data fetch operation was cancelled.' };
|
|
142
|
+
* }
|
|
143
|
+
*
|
|
144
|
+
* // ... data fetching logic using dataSourceRef, limit, and signal ...
|
|
145
|
+
*
|
|
146
|
+
* // Placeholder for a successful result.
|
|
147
|
+
* return {
|
|
148
|
+
* status: 'completed',
|
|
149
|
+
* dataTable: { rows: [{ cells: [{ type: 'string', value: 'Fetched data' }] }] }
|
|
150
|
+
* };
|
|
151
|
+
* }
|
|
152
|
+
* ```
|
|
153
|
+
*/
|
|
154
|
+
fetchDataTable: (
|
|
155
|
+
params: FetchDataTableParams,
|
|
156
|
+
) => Promise<FetchDataTableResult>;
|
|
157
|
+
/**
|
|
158
|
+
* Renders a user interface for selecting and configuring data from your external sources.
|
|
159
|
+
*
|
|
160
|
+
* @param params - Configuration and callbacks for the data selection UI.
|
|
161
|
+
*
|
|
162
|
+
* @example Rendering a data selection UI
|
|
163
|
+
* ```ts
|
|
164
|
+
* import type { RenderSelectionUiParams } from '@canva/intents/data';
|
|
165
|
+
*
|
|
166
|
+
* async function renderSelectionUi(params: RenderSelectionUiParams): Promise<void> {
|
|
167
|
+
* // UI rendering logic.
|
|
168
|
+
* // Example: if user selects data 'ref123'.
|
|
169
|
+
* const selectedRef = { source: 'ref123', title: 'My Selected Table' };
|
|
170
|
+
* try {
|
|
171
|
+
* const result = await params.updateDataRef(selectedRef);
|
|
172
|
+
* if (result.status === 'completed') {
|
|
173
|
+
* console.log('Selection valid and preview updated.');
|
|
174
|
+
* } else {
|
|
175
|
+
* console.error('Selection error:', result.status);
|
|
176
|
+
* }
|
|
177
|
+
* } catch (error) {
|
|
178
|
+
* console.error('An unexpected error occurred during data ref update:', error);
|
|
179
|
+
* }
|
|
180
|
+
* }
|
|
181
|
+
* ```
|
|
182
|
+
*/
|
|
183
|
+
renderSelectionUi: (params: RenderSelectionUiParams) => void;
|
|
184
|
+
};
|
|
185
|
+
|
|
186
|
+
/**
|
|
187
|
+
* @beta
|
|
188
|
+
* {@link InvocationContext} indicating initial data selection flow or edit of existing data.
|
|
189
|
+
*/
|
|
190
|
+
declare type DataSelectionInvocationContext = {
|
|
191
|
+
/**
|
|
192
|
+
* Initial data selection or editing existing data.
|
|
193
|
+
*
|
|
194
|
+
* This is the standard flow when:
|
|
195
|
+
*
|
|
196
|
+
* - A user is selecting data for the first time
|
|
197
|
+
* - A user is editing a previous selection
|
|
198
|
+
*
|
|
199
|
+
* If `dataSourceRef` is provided, this indicates an edit flow, and you should
|
|
200
|
+
* pre-populate your UI with this selection.
|
|
201
|
+
*/
|
|
202
|
+
reason: "data_selection";
|
|
203
|
+
/**
|
|
204
|
+
* If dataSourceRef is provided, this is an edit of existing data flow and UI should be pre-populated.
|
|
205
|
+
*/
|
|
206
|
+
dataSourceRef?: DataSourceRef;
|
|
207
|
+
};
|
|
208
|
+
|
|
209
|
+
/**
|
|
210
|
+
* @beta
|
|
211
|
+
* Reference to an external data source that can be used to fetch data.
|
|
212
|
+
* Created by Data Connector apps and stored by Canva for data refresh operations.
|
|
213
|
+
*
|
|
214
|
+
* You create this object in your data selection UI and pass it to the
|
|
215
|
+
* `updateDataRef` callback. Canva stores this reference and uses it for
|
|
216
|
+
* future data refresh operations.
|
|
217
|
+
*
|
|
218
|
+
* Maximum size: 5KB
|
|
219
|
+
*
|
|
220
|
+
* @example Defining how to locate external data
|
|
221
|
+
* ```ts
|
|
222
|
+
* const dataSourceRef: DataSourceRef = {
|
|
223
|
+
* source: JSON.stringify({
|
|
224
|
+
* reportId: "monthly_sales_001",
|
|
225
|
+
* filters: { year: 2023, region: "NA" }
|
|
226
|
+
* }),
|
|
227
|
+
* title: "Monthly Sales Report (NA, 2023)"
|
|
228
|
+
* };
|
|
229
|
+
* ```
|
|
230
|
+
*/
|
|
231
|
+
export declare type DataSourceRef = {
|
|
232
|
+
/**
|
|
233
|
+
* Information needed to identify and retrieve data from your source.
|
|
234
|
+
*
|
|
235
|
+
* This string should contain all the information your app needs to
|
|
236
|
+
* fetch the exact data selection later. Typically, this is a serialized
|
|
237
|
+
* object with query parameters, identifiers, or filters.
|
|
238
|
+
*
|
|
239
|
+
* You are responsible for encoding and decoding this value appropriately.
|
|
240
|
+
*
|
|
241
|
+
* Maximum size: 5KB
|
|
242
|
+
*/
|
|
243
|
+
source: string;
|
|
244
|
+
/**
|
|
245
|
+
* A human-readable description of the data reference.
|
|
246
|
+
*
|
|
247
|
+
* This title may be displayed to users in the Canva interface to help
|
|
248
|
+
* them identify the data source.
|
|
249
|
+
*
|
|
250
|
+
* Maximum length: 255 characters
|
|
251
|
+
*/
|
|
252
|
+
title?: string;
|
|
253
|
+
};
|
|
254
|
+
|
|
255
|
+
/**
|
|
256
|
+
* @beta
|
|
257
|
+
* {@link ValidationError} indicating the data source reference {@link DataSourceRef} exceeds the 5KB size limit.
|
|
258
|
+
*/
|
|
259
|
+
declare type DataSourceRefLimitExceeded = {
|
|
260
|
+
/**
|
|
261
|
+
* The data source reference exceeds the 5KB size limit.
|
|
262
|
+
*
|
|
263
|
+
* Your app should reduce the size of the `DataSourceRef.source` string.
|
|
264
|
+
*/
|
|
265
|
+
status: "data_source_ref_limit_exceeded";
|
|
266
|
+
};
|
|
267
|
+
|
|
268
|
+
/**
|
|
269
|
+
* @beta
|
|
270
|
+
* {@link ValidationError} indicating the data source title {@link DataSourceRef.title} exceeds the 255 character limit.
|
|
271
|
+
*/
|
|
272
|
+
declare type DataSourceTitleLimitExceed = {
|
|
273
|
+
/**
|
|
274
|
+
* The data source title exceeds the 255 character limit.
|
|
275
|
+
*
|
|
276
|
+
* Your app should provide a shorter title for the data source.
|
|
277
|
+
*/
|
|
278
|
+
status: "data_source_title_limit_exceeded";
|
|
279
|
+
};
|
|
280
|
+
|
|
281
|
+
/**
|
|
282
|
+
* @beta
|
|
283
|
+
* Structured tabular data for import into Canva.
|
|
284
|
+
*
|
|
285
|
+
* This format allows you to provide typed data with proper formatting
|
|
286
|
+
* to ensure it displays correctly in Canva designs.
|
|
287
|
+
*
|
|
288
|
+
* @example Creating a data table
|
|
289
|
+
* ```ts
|
|
290
|
+
* import type { ColumnConfig, DataTableCell, DataTable, DataTableRow } from '@canva/intents/data';
|
|
291
|
+
*
|
|
292
|
+
* const myTable: DataTable = {
|
|
293
|
+
* columnConfigs: [
|
|
294
|
+
* { name: 'Name', type: 'string' },
|
|
295
|
+
* { name: 'Age', type: 'number' },
|
|
296
|
+
* { name: 'Subscribed', type: 'boolean' },
|
|
297
|
+
* { name: 'Join Date', type: 'date' }
|
|
298
|
+
* ],
|
|
299
|
+
* rows: [
|
|
300
|
+
* {
|
|
301
|
+
* cells: [
|
|
302
|
+
* { type: 'string', value: 'Alice' },
|
|
303
|
+
* { type: 'number', value: 30 },
|
|
304
|
+
* { type: 'boolean', value: true },
|
|
305
|
+
* { type: 'date', value: Math.floor(new Date('2023-01-15').getTime() / 1000) }
|
|
306
|
+
* ]
|
|
307
|
+
* },
|
|
308
|
+
* {
|
|
309
|
+
* cells: [
|
|
310
|
+
* { type: 'string', value: 'Bob' },
|
|
311
|
+
* { type: 'number', value: 24 },
|
|
312
|
+
* { type: 'boolean', value: false },
|
|
313
|
+
* { type: 'date', value: Math.floor(new Date('2022-07-20').getTime() / 1000) }
|
|
314
|
+
* ]
|
|
315
|
+
* }
|
|
316
|
+
* ]
|
|
317
|
+
* };
|
|
318
|
+
* ```
|
|
319
|
+
*/
|
|
320
|
+
export declare type DataTable = {
|
|
321
|
+
/**
|
|
322
|
+
* Column definitions with names and data types.
|
|
323
|
+
*
|
|
324
|
+
* These help Canva interpret and display your data correctly.
|
|
325
|
+
*/
|
|
326
|
+
columnConfigs?: ColumnConfig[];
|
|
327
|
+
/**
|
|
328
|
+
* The data rows containing the actual values.
|
|
329
|
+
*
|
|
330
|
+
* Each row contains an array of cells with typed data values.
|
|
331
|
+
*/
|
|
332
|
+
rows: DataTableRow[];
|
|
333
|
+
};
|
|
334
|
+
|
|
335
|
+
/**
|
|
336
|
+
* @beta
|
|
337
|
+
* Generic type for table cells that resolves to a specific cell type.
|
|
338
|
+
*/
|
|
339
|
+
export declare type DataTableCell<T extends DataType = DataType> = {
|
|
340
|
+
date: DateDataTableCell;
|
|
341
|
+
string: StringDataTableCell;
|
|
342
|
+
number: NumberDataTableCell;
|
|
343
|
+
boolean: BooleanDataTableCell;
|
|
344
|
+
}[T];
|
|
345
|
+
|
|
346
|
+
/**
|
|
347
|
+
* @beta
|
|
348
|
+
* {@link ValidationError} indicating the data table format is invalid.
|
|
349
|
+
*
|
|
350
|
+
* This can happen due to:
|
|
351
|
+
*
|
|
352
|
+
* - {@link DataType} mismatches (e.g., a number in a string-typed column, a number value in a string cell type)
|
|
353
|
+
* - Unsupported cell types
|
|
354
|
+
* - Inconsistent column configurations (e.g., the number of columns in the data table does not match the number of {@link ColumnConfig})
|
|
355
|
+
*/
|
|
356
|
+
declare type DataTableInvalidFormat = {
|
|
357
|
+
/**
|
|
358
|
+
* The data table format is invalid.
|
|
359
|
+
*
|
|
360
|
+
* This error occurs due to:
|
|
361
|
+
*
|
|
362
|
+
* - Data type mismatches (e.g., number in string column)
|
|
363
|
+
* - Unsupported cell types
|
|
364
|
+
* - Inconsistent column configurations
|
|
365
|
+
*
|
|
366
|
+
* Your app should ensure the data conforms to the expected format.
|
|
367
|
+
*/
|
|
368
|
+
status: "data_table_invalid_format";
|
|
369
|
+
};
|
|
370
|
+
|
|
371
|
+
/**
|
|
372
|
+
* @beta
|
|
373
|
+
* Maximum dimensions for imported data tables.
|
|
374
|
+
*/
|
|
375
|
+
export declare type DataTableLimit = {
|
|
376
|
+
/**
|
|
377
|
+
* The maximum number of rows allowed.
|
|
378
|
+
*
|
|
379
|
+
* Your app should ensure data does not exceed this limit.
|
|
380
|
+
*/
|
|
381
|
+
row: number;
|
|
382
|
+
/**
|
|
383
|
+
* The maximum number of columns allowed.
|
|
384
|
+
*
|
|
385
|
+
* Your app should ensure data does not exceed this limit.
|
|
386
|
+
*/
|
|
387
|
+
column: number;
|
|
388
|
+
};
|
|
389
|
+
|
|
390
|
+
/**
|
|
391
|
+
* @beta
|
|
392
|
+
* {@link ValidationError} indicating that the data table exceeds the allowed limits.
|
|
393
|
+
*
|
|
394
|
+
* This can happen when:
|
|
395
|
+
* - Number of rows exceeds the row limit
|
|
396
|
+
* - Number of columns exceeds the column limit
|
|
397
|
+
* - Total data size exceeds 200KB
|
|
398
|
+
*/
|
|
399
|
+
declare type DataTableLimitExceeded = {
|
|
400
|
+
/**
|
|
401
|
+
* The data exceeds the maximum allowed limits.
|
|
402
|
+
*
|
|
403
|
+
* This error occurs when:
|
|
404
|
+
*
|
|
405
|
+
* - Number of rows exceeds the row limit
|
|
406
|
+
* - Number of columns exceeds the column limit
|
|
407
|
+
* - Total data size exceeds the allowed size limit
|
|
408
|
+
*
|
|
409
|
+
* Your app should help users select a subset of their data,
|
|
410
|
+
* or provide filtering options to reduce the data size.
|
|
411
|
+
*/
|
|
412
|
+
status: "data_table_limit_exceeded";
|
|
413
|
+
};
|
|
414
|
+
|
|
415
|
+
/**
|
|
416
|
+
* @beta
|
|
417
|
+
* Metadata providing additional context about the imported data.
|
|
418
|
+
*/
|
|
419
|
+
export declare type DataTableMetadata = {
|
|
420
|
+
/**
|
|
421
|
+
* A human-readable description of the dataset.
|
|
422
|
+
*
|
|
423
|
+
* This description helps users understand what data they are importing.
|
|
424
|
+
*/
|
|
425
|
+
description?: string;
|
|
426
|
+
/**
|
|
427
|
+
* Information about the data provider or source.
|
|
428
|
+
*/
|
|
429
|
+
providerInfo?: {
|
|
430
|
+
/**
|
|
431
|
+
* Name of the data provider.
|
|
432
|
+
*/
|
|
433
|
+
name: string;
|
|
434
|
+
/**
|
|
435
|
+
* URL to the provider's website or related resource.
|
|
436
|
+
*/
|
|
437
|
+
url?: string;
|
|
438
|
+
};
|
|
439
|
+
};
|
|
440
|
+
|
|
441
|
+
/**
|
|
442
|
+
* @beta
|
|
443
|
+
* {@link ValidationError} indicating the provided data table metadata is invalid (e.g not a valid OXML formatting string in {@link NumberCellMetadata.formatting}).
|
|
444
|
+
*/
|
|
445
|
+
declare type DataTableMetadataInvalid = {
|
|
446
|
+
/**
|
|
447
|
+
* The provided metadata is invalid.
|
|
448
|
+
*
|
|
449
|
+
* This typically happens with invalid formatting patterns in {@link NumberCellMetadata.formatting} strings.
|
|
450
|
+
*/
|
|
451
|
+
status: "data_table_metadata_invalid";
|
|
452
|
+
};
|
|
453
|
+
|
|
454
|
+
/**
|
|
455
|
+
* @beta
|
|
456
|
+
* A row in the data table.
|
|
457
|
+
*
|
|
458
|
+
* @example Creating a single row of data cells
|
|
459
|
+
* ```ts
|
|
460
|
+
* import type { DataTableCell, DataTableRow } from '@canva/intents/data';
|
|
461
|
+
*
|
|
462
|
+
* const row: DataTableRow = {
|
|
463
|
+
* cells: [
|
|
464
|
+
* { type: 'string', value: 'Product Alpha' },
|
|
465
|
+
* { type: 'number', value: 199.99 },
|
|
466
|
+
* { type: 'boolean', value: true }
|
|
467
|
+
* ]
|
|
468
|
+
* };
|
|
469
|
+
* ```
|
|
470
|
+
*/
|
|
471
|
+
export declare type DataTableRow = {
|
|
472
|
+
/**
|
|
473
|
+
* Array of cells containing the data values.
|
|
474
|
+
*
|
|
475
|
+
* Each cell must have a type that matches the corresponding column definition (if provided).
|
|
476
|
+
*/
|
|
477
|
+
cells: DataTableCell<DataType>[];
|
|
478
|
+
};
|
|
479
|
+
|
|
480
|
+
/**
|
|
481
|
+
* @beta
|
|
482
|
+
* Data types supported for table cells.
|
|
483
|
+
*/
|
|
484
|
+
export declare type DataType = "string" | "number" | "date" | "boolean";
|
|
485
|
+
|
|
486
|
+
/**
|
|
487
|
+
* @beta
|
|
488
|
+
* Cell containing a date value.
|
|
489
|
+
*
|
|
490
|
+
* @example Creating a date cell
|
|
491
|
+
* ```ts
|
|
492
|
+
* import type { DateDataTableCell } from '@canva/intents/data';
|
|
493
|
+
*
|
|
494
|
+
* const todayCell: DateDataTableCell = {
|
|
495
|
+
* type: 'date',
|
|
496
|
+
* value: Math.floor(Date.now() / 1000) // Unix timestamp in seconds
|
|
497
|
+
* };
|
|
498
|
+
*
|
|
499
|
+
* const emptyDateCell: DateDataTableCell = {
|
|
500
|
+
* type: 'date',
|
|
501
|
+
* value: undefined
|
|
502
|
+
* };
|
|
503
|
+
* ```
|
|
504
|
+
*/
|
|
505
|
+
export declare type DateDataTableCell = {
|
|
506
|
+
/**
|
|
507
|
+
* Indicates this cell contains a date value.
|
|
508
|
+
*/
|
|
509
|
+
type: "date";
|
|
510
|
+
/**
|
|
511
|
+
* Unix timestamp in seconds representing the date.
|
|
512
|
+
*
|
|
513
|
+
* Use `undefined` for an empty cell.
|
|
514
|
+
*/
|
|
515
|
+
value: number | undefined;
|
|
516
|
+
};
|
|
517
|
+
|
|
518
|
+
/**
|
|
519
|
+
* @beta
|
|
520
|
+
* Successful result from `fetchDataTable` action.
|
|
521
|
+
*/
|
|
522
|
+
export declare type FetchDataTableCompleted = {
|
|
523
|
+
/**
|
|
524
|
+
* Indicates the fetch operation completed successfully
|
|
525
|
+
*/
|
|
526
|
+
status: "completed";
|
|
527
|
+
/**
|
|
528
|
+
* The fetched data formatted as a data table.
|
|
529
|
+
*/
|
|
530
|
+
dataTable: DataTable;
|
|
531
|
+
/**
|
|
532
|
+
* Optional metadata providing additional context about the data.
|
|
533
|
+
*/
|
|
534
|
+
metadata?: DataTableMetadata;
|
|
535
|
+
};
|
|
536
|
+
|
|
537
|
+
/**
|
|
538
|
+
* @beta
|
|
539
|
+
* Error results that can be returned from `fetchDataTable` method.
|
|
540
|
+
*/
|
|
541
|
+
export declare type FetchDataTableError =
|
|
542
|
+
| OutdatedSourceRefError
|
|
543
|
+
| RemoteRequestFailedError
|
|
544
|
+
| AppError;
|
|
545
|
+
|
|
546
|
+
/**
|
|
547
|
+
* @beta
|
|
548
|
+
* Parameters for the fetchDataTable action.
|
|
549
|
+
*/
|
|
550
|
+
export declare type FetchDataTableParams = {
|
|
551
|
+
/**
|
|
552
|
+
* Reference to the data source to fetch.
|
|
553
|
+
*
|
|
554
|
+
* This contains the information needed to identify and retrieve the specific data
|
|
555
|
+
* that was previously selected by the user.
|
|
556
|
+
*
|
|
557
|
+
* Use this to query your external data service.
|
|
558
|
+
*/
|
|
559
|
+
dataSourceRef: DataSourceRef;
|
|
560
|
+
/**
|
|
561
|
+
* Maximum row and column limits for the imported data.
|
|
562
|
+
*
|
|
563
|
+
* Your app must ensure the returned data does not exceed these limits.
|
|
564
|
+
*
|
|
565
|
+
* If the requested data would exceed these limits, either:
|
|
566
|
+
*
|
|
567
|
+
* - Truncate the data to fit within limits, or
|
|
568
|
+
* - Return a 'data_table_limit_exceeded' error
|
|
569
|
+
*/
|
|
570
|
+
limit: DataTableLimit;
|
|
571
|
+
/**
|
|
572
|
+
* Standard DOM AbortSignal for cancellation support.
|
|
573
|
+
*
|
|
574
|
+
* Your app should monitor this signal and abort any ongoing operations if it becomes aborted.
|
|
575
|
+
*/
|
|
576
|
+
signal: AbortSignal;
|
|
577
|
+
};
|
|
578
|
+
|
|
579
|
+
/**
|
|
580
|
+
* @beta
|
|
581
|
+
* Result returned from the `fetchDataTable` action.
|
|
582
|
+
*/
|
|
583
|
+
export declare type FetchDataTableResult =
|
|
584
|
+
| FetchDataTableCompleted
|
|
585
|
+
| FetchDataTableError;
|
|
586
|
+
|
|
587
|
+
/**
|
|
588
|
+
* @beta
|
|
589
|
+
* System errors that may occur during data operations.
|
|
590
|
+
*/
|
|
591
|
+
export declare type InternalError = {
|
|
592
|
+
/**
|
|
593
|
+
* An unexpected system error occurred.
|
|
594
|
+
*
|
|
595
|
+
* These errors are typically not related to your app's implementation
|
|
596
|
+
* but indicate issues with the platform.
|
|
597
|
+
*/
|
|
598
|
+
status: "internal_error";
|
|
599
|
+
/**
|
|
600
|
+
* The cause of the error.
|
|
601
|
+
*/
|
|
602
|
+
cause?: unknown;
|
|
603
|
+
};
|
|
604
|
+
|
|
605
|
+
/**
|
|
606
|
+
* @beta
|
|
607
|
+
* Information explaining why the data selection UI was launched.
|
|
608
|
+
*/
|
|
609
|
+
export declare type InvocationContext =
|
|
610
|
+
| DataSelectionInvocationContext
|
|
611
|
+
| OutdatedSourceRefInvocationContext
|
|
612
|
+
| AppErrorInvocationContext;
|
|
613
|
+
|
|
614
|
+
/**
|
|
615
|
+
* @beta
|
|
616
|
+
* Formatting metadata for number cells.
|
|
617
|
+
*
|
|
618
|
+
* @example Formatting as currency
|
|
619
|
+
* ```ts
|
|
620
|
+
* import type { NumberDataTableCell } from '@canva/intents/data';
|
|
621
|
+
*
|
|
622
|
+
* const currencyCell: NumberDataTableCell = {
|
|
623
|
+
* type: 'number',
|
|
624
|
+
* value: 1234.57,
|
|
625
|
+
* metadata: { formatting: '[$$]#,##0.00' }
|
|
626
|
+
* };
|
|
627
|
+
* ```
|
|
628
|
+
*
|
|
629
|
+
* @example Formatting as a percentage
|
|
630
|
+
* ```ts
|
|
631
|
+
* import type { NumberDataTableCell } from '@canva/intents/data';
|
|
632
|
+
*
|
|
633
|
+
* const percentCell: NumberDataTableCell = {
|
|
634
|
+
* type: 'number',
|
|
635
|
+
* value: 0.1234,
|
|
636
|
+
* metadata: { formatting: '0.00%' }
|
|
637
|
+
* };
|
|
638
|
+
* ```
|
|
639
|
+
*
|
|
640
|
+
* @example Applying a thousands separator
|
|
641
|
+
* ```ts
|
|
642
|
+
* import type { NumberDataTableCell } from '@canva/intents/data';
|
|
643
|
+
*
|
|
644
|
+
* const largeNumberCell: NumberDataTableCell = {
|
|
645
|
+
* type: 'number',
|
|
646
|
+
* value: 1234567.89234,
|
|
647
|
+
* metadata: { formatting: '#,##0.00' }
|
|
648
|
+
* };
|
|
649
|
+
* ```
|
|
650
|
+
*/
|
|
651
|
+
export declare type NumberCellMetadata = {
|
|
652
|
+
/**
|
|
653
|
+
* Formatting pattern using Office Open XML Format.
|
|
654
|
+
*
|
|
655
|
+
* These patterns control how numbers are displayed to users,
|
|
656
|
+
* including currency symbols, decimal places, and separators.
|
|
657
|
+
*/
|
|
658
|
+
formatting?: string;
|
|
659
|
+
};
|
|
660
|
+
|
|
661
|
+
/**
|
|
662
|
+
* @beta
|
|
663
|
+
* Cell containing a numeric value.
|
|
664
|
+
*
|
|
665
|
+
* @example Creating a number cell
|
|
666
|
+
* ```ts
|
|
667
|
+
* import type { NumberCellMetadata, NumberDataTableCell } from '@canva/intents/data';
|
|
668
|
+
*
|
|
669
|
+
* const priceCell: NumberDataTableCell = {
|
|
670
|
+
* type: 'number',
|
|
671
|
+
* value: 29.99,
|
|
672
|
+
* metadata: { formatting: '[$$]#,##0.00' }
|
|
673
|
+
* };
|
|
674
|
+
*
|
|
675
|
+
* const quantityCell: NumberDataTableCell = {
|
|
676
|
+
* type: 'number',
|
|
677
|
+
* value: 150
|
|
678
|
+
* };
|
|
679
|
+
*
|
|
680
|
+
* const emptyNumberCell: NumberDataTableCell = {
|
|
681
|
+
* type: 'number',
|
|
682
|
+
* value: undefined
|
|
683
|
+
* };
|
|
684
|
+
* ```
|
|
685
|
+
*/
|
|
686
|
+
export declare type NumberDataTableCell = {
|
|
687
|
+
/**
|
|
688
|
+
* Indicates this cell contains a number value.
|
|
689
|
+
*/
|
|
690
|
+
type: "number";
|
|
691
|
+
/**
|
|
692
|
+
* Numeric value within safe integer range.
|
|
693
|
+
*
|
|
694
|
+
* Valid range: `Number.MIN_SAFE_INTEGER` to `Number.MAX_SAFE_INTEGER`
|
|
695
|
+
*
|
|
696
|
+
* Invalid values:
|
|
697
|
+
*
|
|
698
|
+
* - Infinity or -Infinity
|
|
699
|
+
* - NaN
|
|
700
|
+
* - Negative zero (-0)
|
|
701
|
+
* - Denormalized numbers
|
|
702
|
+
*
|
|
703
|
+
* Use `undefined` for an empty cell.
|
|
704
|
+
*/
|
|
705
|
+
value: number | undefined;
|
|
706
|
+
/**
|
|
707
|
+
* Optional formatting information for displaying the number.
|
|
708
|
+
*
|
|
709
|
+
* @example Applying display formatting to a number
|
|
710
|
+
* ```ts
|
|
711
|
+
* import type { NumberCellMetadata } from '@canva/intents/data';
|
|
712
|
+
*
|
|
713
|
+
* const currencyFormatting: NumberCellMetadata = { formatting: '[$USD]#,##0.00' };
|
|
714
|
+
* const percentageFormatting: NumberCellMetadata = { formatting: '0.00%' };
|
|
715
|
+
* ```
|
|
716
|
+
*/
|
|
717
|
+
metadata?: NumberCellMetadata;
|
|
718
|
+
};
|
|
719
|
+
|
|
720
|
+
/**
|
|
721
|
+
* @beta
|
|
722
|
+
* {@link FetchDataTableError} indicating the data source reference is no longer valid.
|
|
723
|
+
* This will trigger a re-selection flow for the user.
|
|
724
|
+
*/
|
|
725
|
+
declare type OutdatedSourceRefError = {
|
|
726
|
+
/**
|
|
727
|
+
* The data source reference is no longer valid.
|
|
728
|
+
*
|
|
729
|
+
* Return this error when the DataSourceRef cannot be used to retrieve data,
|
|
730
|
+
* for example:
|
|
731
|
+
*
|
|
732
|
+
* - The referenced dataset has been deleted
|
|
733
|
+
* - Access permissions have changed
|
|
734
|
+
* - The structure of the data has fundamentally changed
|
|
735
|
+
*
|
|
736
|
+
* This will trigger a re-selection flow, allowing the user to choose a new
|
|
737
|
+
* data source.
|
|
738
|
+
*/
|
|
739
|
+
status: "outdated_source_ref";
|
|
740
|
+
};
|
|
741
|
+
|
|
742
|
+
/**
|
|
743
|
+
* @beta
|
|
744
|
+
* {@link InvocationContext} indicating an error occurred because the previously selected data source reference is no longer valid.
|
|
745
|
+
* Triggered when fetchDataTable returned 'outdated_source_ref' during data refresh.
|
|
746
|
+
* UI should guide the user to reselect or reconfigure their data.
|
|
747
|
+
*/
|
|
748
|
+
declare type OutdatedSourceRefInvocationContext = {
|
|
749
|
+
/**
|
|
750
|
+
* Previously selected data source reference is no longer valid.
|
|
751
|
+
*
|
|
752
|
+
* This occurs when `fetchDataTable` returned 'outdated_source_ref' during a
|
|
753
|
+
* refresh attempt. Your UI should guide the user to select a new data source
|
|
754
|
+
* or update their selection.
|
|
755
|
+
*
|
|
756
|
+
* The outdated reference is provided to help you suggest an appropriate replacement.
|
|
757
|
+
*/
|
|
758
|
+
reason: "outdated_source_ref";
|
|
759
|
+
/**
|
|
760
|
+
* The outdated data source reference that caused the error during refresh.
|
|
761
|
+
*/
|
|
762
|
+
dataSourceRef?: DataSourceRef;
|
|
763
|
+
};
|
|
764
|
+
|
|
765
|
+
/**
|
|
766
|
+
* @beta
|
|
767
|
+
*
|
|
768
|
+
* Prepares the `DataConnectorIntent`.
|
|
769
|
+
*/
|
|
770
|
+
export declare const prepareDataConnector: (
|
|
771
|
+
implementation: DataConnectorIntent,
|
|
772
|
+
) => void;
|
|
773
|
+
|
|
774
|
+
/**
|
|
775
|
+
* @beta
|
|
776
|
+
* {@link FetchDataTableError} indicating failure to fetch data from the external source.
|
|
777
|
+
* Typically due to network issues or API failures.
|
|
778
|
+
*/
|
|
779
|
+
declare type RemoteRequestFailedError = {
|
|
780
|
+
/**
|
|
781
|
+
* Failed to fetch data from the external source.
|
|
782
|
+
*
|
|
783
|
+
* Return this error for network issues, API failures, or other
|
|
784
|
+
* connectivity problems that prevent data retrieval.
|
|
785
|
+
*/
|
|
786
|
+
status: "remote_request_failed";
|
|
787
|
+
};
|
|
788
|
+
|
|
789
|
+
/**
|
|
790
|
+
* @beta
|
|
791
|
+
* Parameters for rendering the data selection UI.
|
|
792
|
+
*/
|
|
793
|
+
export declare type RenderSelectionUiParams = {
|
|
794
|
+
/**
|
|
795
|
+
* Context information about why the data selection UI is being launched.
|
|
796
|
+
*
|
|
797
|
+
* Use this to adapt your UI for different scenarios:
|
|
798
|
+
*
|
|
799
|
+
* - 'data_selection': Initial data selection or editing existing data
|
|
800
|
+
* - 'outdated_source_ref': Previous reference is no longer valid, guide user to reselect
|
|
801
|
+
* - 'app_error': Custom error occurred, show error message and recovery options
|
|
802
|
+
*
|
|
803
|
+
* When `dataSourceRef` is provided, pre-populate your UI with this selection.
|
|
804
|
+
*/
|
|
805
|
+
invocationContext: InvocationContext;
|
|
806
|
+
/**
|
|
807
|
+
* Maximum allowed rows and columns for the imported data.
|
|
808
|
+
*
|
|
809
|
+
* Your UI should inform users of these constraints and prevent or warn about
|
|
810
|
+
* selections that would exceed them. This helps users understand why certain
|
|
811
|
+
* data sets might not be available for selection.
|
|
812
|
+
*/
|
|
813
|
+
limit: DataTableLimit;
|
|
814
|
+
/**
|
|
815
|
+
* Callback to preview selected data before finalizing import.
|
|
816
|
+
*
|
|
817
|
+
* Call this function when the user selects data to:
|
|
818
|
+
*
|
|
819
|
+
* 1. Show a preview of the selected data to the user
|
|
820
|
+
* 2. Validate that the selection meets system requirements
|
|
821
|
+
*
|
|
822
|
+
* Calling this function will trigger your `fetchDataTable` implementation.
|
|
823
|
+
* Wait for the promise to resolve to determine if the selection is valid.
|
|
824
|
+
*
|
|
825
|
+
* @param dataSourceRef - Reference object identifying the selected data
|
|
826
|
+
* @returns Promise resolving to success or an error result
|
|
827
|
+
*/
|
|
828
|
+
updateDataRef: (dataSourceRef: DataSourceRef) => Promise<UpdateDataRefResult>;
|
|
829
|
+
};
|
|
830
|
+
|
|
831
|
+
/**
|
|
832
|
+
* @beta
|
|
833
|
+
* Cell containing a text value.
|
|
834
|
+
*
|
|
835
|
+
* @example Creating a string cell
|
|
836
|
+
* ```ts
|
|
837
|
+
* import type { StringDataTableCell } from '@canva/intents/data';
|
|
838
|
+
*
|
|
839
|
+
* const nameCell: StringDataTableCell = {
|
|
840
|
+
* type: 'string',
|
|
841
|
+
* value: 'John Doe'
|
|
842
|
+
* };
|
|
843
|
+
*
|
|
844
|
+
* const emptyStringCell: StringDataTableCell = {
|
|
845
|
+
* type: 'string',
|
|
846
|
+
* value: undefined
|
|
847
|
+
* };
|
|
848
|
+
* ```
|
|
849
|
+
*/
|
|
850
|
+
export declare type StringDataTableCell = {
|
|
851
|
+
/**
|
|
852
|
+
* Indicates this cell contains a string value.
|
|
853
|
+
*/
|
|
854
|
+
type: "string";
|
|
855
|
+
/**
|
|
856
|
+
* Text content of the cell.
|
|
857
|
+
*
|
|
858
|
+
* Maximum length: 10,000 characters
|
|
859
|
+
*
|
|
860
|
+
* Use `undefined` for an empty cell.
|
|
861
|
+
*/
|
|
862
|
+
value: string | undefined;
|
|
863
|
+
};
|
|
864
|
+
|
|
865
|
+
/**
|
|
866
|
+
* @beta
|
|
867
|
+
* Successful result from the {@link RenderSelectionUiParams.updateDataRef} callback.
|
|
868
|
+
*/
|
|
869
|
+
declare type UpdateDataRefCompleted = {
|
|
870
|
+
/**
|
|
871
|
+
* The data selection was successful and can be previewed.
|
|
872
|
+
*/
|
|
873
|
+
status: "completed";
|
|
874
|
+
};
|
|
875
|
+
|
|
876
|
+
/**
|
|
877
|
+
* @beta
|
|
878
|
+
* Result returned from the {@link RenderSelectionUiParams.updateDataRef} callback.
|
|
879
|
+
* Indicates whether {@link DataSourceRef} update succeeded or failed.
|
|
880
|
+
*/
|
|
881
|
+
export declare type UpdateDataRefResult =
|
|
882
|
+
| UpdateDataRefCompleted
|
|
883
|
+
| FetchDataTableError
|
|
884
|
+
| ValidationError
|
|
885
|
+
| InternalError;
|
|
886
|
+
|
|
887
|
+
/**
|
|
888
|
+
* @beta
|
|
889
|
+
* Validation errors that can occur when processing data.
|
|
890
|
+
*/
|
|
891
|
+
export declare type ValidationError =
|
|
892
|
+
| DataTableLimitExceeded
|
|
893
|
+
| DataTableInvalidFormat
|
|
894
|
+
| DataTableMetadataInvalid
|
|
895
|
+
| DataSourceRefLimitExceeded
|
|
896
|
+
| DataSourceTitleLimitExceed;
|
|
897
|
+
|
|
898
|
+
export {};
|