@canva/intents 2.1.3-beta.0 → 2.2.0
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/CHANGELOG.md +23 -11
- package/asset/index.d.ts +1 -1
- package/content/index.d.ts +1510 -1
- package/data/index.d.ts +1229 -1
- package/design/index.d.ts +41 -1
- package/index.d.ts +2895 -1
- package/lib/cjs/sdk/intents/asset/index.js +1 -15
- package/lib/cjs/sdk/intents/fake/{create_beta.js → create.js} +6 -9
- package/lib/cjs/sdk/intents/index.js +4 -2
- package/lib/cjs/sdk/intents/test/index.js +14 -13
- package/lib/cjs/sdk/intents/version.js +1 -1
- package/lib/esm/sdk/intents/asset/index.js +1 -1
- package/lib/esm/sdk/intents/fake/{create_beta.js → create.js} +4 -7
- package/lib/esm/sdk/intents/index.js +3 -1
- package/lib/esm/sdk/intents/test/index.js +9 -1
- package/lib/esm/sdk/intents/version.js +1 -1
- package/package.json +23 -23
- package/test/index.d.ts +11 -1
- package/asset/beta.d.ts +0 -190
- package/beta.d.ts +0 -2995
- package/content/beta.d.ts +0 -1606
- package/data/beta.d.ts +0 -1229
- package/design/beta.d.ts +0 -41
- package/lib/cjs/sdk/intents/asset/beta.js +0 -14
- package/lib/cjs/sdk/intents/beta.js +0 -20
- package/lib/cjs/sdk/intents/content/beta.js +0 -20
- package/lib/cjs/sdk/intents/data/beta.js +0 -20
- package/lib/cjs/sdk/intents/design/beta.js +0 -20
- package/lib/cjs/sdk/intents/test/beta.js +0 -19
- package/lib/esm/sdk/intents/asset/beta.js +0 -4
- package/lib/esm/sdk/intents/beta.js +0 -3
- package/lib/esm/sdk/intents/content/beta.js +0 -3
- package/lib/esm/sdk/intents/data/beta.js +0 -3
- package/lib/esm/sdk/intents/design/beta.js +0 -3
- package/lib/esm/sdk/intents/test/beta.js +0 -9
- package/test/beta.d.ts +0 -11
package/data/beta.d.ts
DELETED
|
@@ -1,1229 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @public
|
|
3
|
-
* A disclosure identifying if the app generated this asset using AI.
|
|
4
|
-
*
|
|
5
|
-
* @remarks
|
|
6
|
-
* Helps users make informed decisions about the content they interact with.
|
|
7
|
-
*
|
|
8
|
-
* AI is generally defined as any machine system that, given an objective, infers how to generate an output from an input.
|
|
9
|
-
* Some examples include "generative AI", "large language models", and "machine learning".
|
|
10
|
-
*
|
|
11
|
-
* **App Generated**
|
|
12
|
-
*
|
|
13
|
-
* 'app_generated' indicates when the app creates or significantly alters an asset using AI. Includes when
|
|
14
|
-
* the app makes a request to a third-party service to do so.
|
|
15
|
-
*
|
|
16
|
-
* A significantly altered asset means the AI changes key information or details, such as
|
|
17
|
-
* removing or replacing key components in the original content, which can include applying style transfer, or changing facial expressions.
|
|
18
|
-
*
|
|
19
|
-
* Label this asset as 'app_generated' under these conditions:
|
|
20
|
-
*
|
|
21
|
-
* The following is true:
|
|
22
|
-
*
|
|
23
|
-
* - The app generates the asset in response to a user's request (including past requests), for example, the asset is not from an asset library.
|
|
24
|
-
*
|
|
25
|
-
* And any of these conditions are also true:
|
|
26
|
-
*
|
|
27
|
-
* - The AI creates entirely new content from scratch.
|
|
28
|
-
* - The AI introduces new multimedia, details, or creative elements not originally present.
|
|
29
|
-
* - The AI removes and replaces the asset's key components.
|
|
30
|
-
* - The AI alters the asset's appearance, meaning, or context in a way that conveys a different message than the original.
|
|
31
|
-
*
|
|
32
|
-
* **None**
|
|
33
|
-
*
|
|
34
|
-
* 'none' indicates when the asset wasn't generated by the app as a part of any user's specific request, for example, a third-party
|
|
35
|
-
* request, or when the asset wasn't significantly altered by AI.
|
|
36
|
-
*/
|
|
37
|
-
declare type AiDisclosure = 'app_generated' | 'none';
|
|
38
|
-
|
|
39
|
-
declare type AllOrNone<T> = T | Never<T>;
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
* @public
|
|
43
|
-
* {@link GetDataTableError} indicating custom error occurred in the app's implementation.
|
|
44
|
-
* This can be used to indicate specific issues that are not covered by other error types.
|
|
45
|
-
*/
|
|
46
|
-
declare type AppError = {
|
|
47
|
-
/**
|
|
48
|
-
* A custom error occurred in your app.
|
|
49
|
-
*
|
|
50
|
-
* Return this for application-specific errors that don't fit
|
|
51
|
-
* the other categories. Include a descriptive message explaining
|
|
52
|
-
* the error to the user.
|
|
53
|
-
*/
|
|
54
|
-
status: 'app_error';
|
|
55
|
-
/**
|
|
56
|
-
* Optional message explaining the error.
|
|
57
|
-
*/
|
|
58
|
-
message?: string;
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* @public
|
|
63
|
-
* {@link InvocationContext} indicating a custom error occurred during data refresh.
|
|
64
|
-
* Triggered when getDataTable returned 'app_error' status.
|
|
65
|
-
* UI should display the error message and help users recover.
|
|
66
|
-
*/
|
|
67
|
-
declare type AppErrorInvocationContext = {
|
|
68
|
-
/**
|
|
69
|
-
* A custom error occurred during data refresh.
|
|
70
|
-
*
|
|
71
|
-
* This occurs when `getDataTable` returned 'app_error' during a refresh attempt.
|
|
72
|
-
* Your UI should display the error message and help users recover from the specific
|
|
73
|
-
* issue.
|
|
74
|
-
*/
|
|
75
|
-
reason: 'app_error';
|
|
76
|
-
/**
|
|
77
|
-
* The data source reference that caused the error during refresh.
|
|
78
|
-
*/
|
|
79
|
-
dataSourceRef?: DataSourceRef;
|
|
80
|
-
/**
|
|
81
|
-
* The error message to display to the user.
|
|
82
|
-
*/
|
|
83
|
-
message?: string;
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
/**
|
|
87
|
-
* @public
|
|
88
|
-
* Cell containing a boolean value.
|
|
89
|
-
*
|
|
90
|
-
* @example Creating a boolean cell
|
|
91
|
-
* ```ts
|
|
92
|
-
* import type { BooleanDataTableCell } from '@canva/intents/data';
|
|
93
|
-
*
|
|
94
|
-
* const isActiveCell: BooleanDataTableCell = {
|
|
95
|
-
* type: 'boolean',
|
|
96
|
-
* value: true
|
|
97
|
-
* };
|
|
98
|
-
* ```
|
|
99
|
-
*
|
|
100
|
-
* @example Creating a boolean cell with false value
|
|
101
|
-
* ```ts
|
|
102
|
-
* import type { BooleanDataTableCell } from '@canva/intents/data';
|
|
103
|
-
*
|
|
104
|
-
* const isCompleteCell: BooleanDataTableCell = {
|
|
105
|
-
* type: 'boolean',
|
|
106
|
-
* value: false
|
|
107
|
-
* };
|
|
108
|
-
* ```
|
|
109
|
-
*
|
|
110
|
-
* @example Creating an empty boolean cell
|
|
111
|
-
* ```ts
|
|
112
|
-
* import type { BooleanDataTableCell } from '@canva/intents/data';
|
|
113
|
-
*
|
|
114
|
-
* const emptyBooleanCell: BooleanDataTableCell = {
|
|
115
|
-
* type: 'boolean',
|
|
116
|
-
* value: undefined
|
|
117
|
-
* };
|
|
118
|
-
* ```
|
|
119
|
-
*/
|
|
120
|
-
export declare type BooleanDataTableCell = {
|
|
121
|
-
/**
|
|
122
|
-
* Indicates this cell contains a boolean value.
|
|
123
|
-
*/
|
|
124
|
-
type: 'boolean';
|
|
125
|
-
/**
|
|
126
|
-
* Boolean value (true or false).
|
|
127
|
-
*
|
|
128
|
-
* Use `undefined` for an empty cell.
|
|
129
|
-
*/
|
|
130
|
-
value: boolean | undefined;
|
|
131
|
-
};
|
|
132
|
-
|
|
133
|
-
/**
|
|
134
|
-
* @public
|
|
135
|
-
* Configuration for a table column.
|
|
136
|
-
*/
|
|
137
|
-
export declare type ColumnConfig = {
|
|
138
|
-
/**
|
|
139
|
-
* Name for the column, displayed as header text.
|
|
140
|
-
*
|
|
141
|
-
* If `undefined`, the column will have no header text.
|
|
142
|
-
*/
|
|
143
|
-
name: string | undefined;
|
|
144
|
-
/**
|
|
145
|
-
* Expected data type for cells in this column.
|
|
146
|
-
*
|
|
147
|
-
* Use a specific `DataType` for columns with consistent types,
|
|
148
|
-
* or `'variant'` for columns that may contain mixed types.
|
|
149
|
-
*/
|
|
150
|
-
type: DataType | 'variant';
|
|
151
|
-
};
|
|
152
|
-
|
|
153
|
-
/**
|
|
154
|
-
* @public
|
|
155
|
-
* Main interface for implementing the Data Connector intent.
|
|
156
|
-
*
|
|
157
|
-
* Implementing the Data Connector intent enables apps to import external data into Canva.
|
|
158
|
-
* This allows users to select, preview, and refresh data from external sources.
|
|
159
|
-
*/
|
|
160
|
-
export declare type DataConnectorIntent = {
|
|
161
|
-
/**
|
|
162
|
-
* Gets structured data from an external source.
|
|
163
|
-
*
|
|
164
|
-
* This action is called in two scenarios:
|
|
165
|
-
*
|
|
166
|
-
* - During data selection to preview data before import (when {@link RenderSelectionUiRequest.updateDataRef} is called).
|
|
167
|
-
* - When refreshing previously imported data (when the user requests an update).
|
|
168
|
-
*
|
|
169
|
-
* @param request - Parameters for the data fetching operation.
|
|
170
|
-
* @returns A promise resolving to either a successful result with data or an error.
|
|
171
|
-
*
|
|
172
|
-
* @example Getting data from an external source
|
|
173
|
-
* ```ts
|
|
174
|
-
* import type { GetDataTableRequest, GetDataTableResponse } from '@canva/intents/data';
|
|
175
|
-
*
|
|
176
|
-
* async function getDataTable(request: GetDataTableRequest): Promise<GetDataTableResponse> {
|
|
177
|
-
* const { dataSourceRef, limit, signal } = request;
|
|
178
|
-
*
|
|
179
|
-
* // Check if the operation has been aborted.
|
|
180
|
-
* if (signal.aborted) {
|
|
181
|
-
* return { status: 'app_error', message: 'The data fetch operation was cancelled.' };
|
|
182
|
-
* }
|
|
183
|
-
*
|
|
184
|
-
* // ... data fetching logic using dataSourceRef, limit, and signal ...
|
|
185
|
-
*
|
|
186
|
-
* // Placeholder for a successful result.
|
|
187
|
-
* return {
|
|
188
|
-
* status: 'completed',
|
|
189
|
-
* dataTable: { rows: [{ cells: [{ type: 'string', value: 'Fetched data' }] }] }
|
|
190
|
-
* };
|
|
191
|
-
* }
|
|
192
|
-
* ```
|
|
193
|
-
*/
|
|
194
|
-
getDataTable: (request: GetDataTableRequest) => Promise<GetDataTableResponse>;
|
|
195
|
-
|
|
196
|
-
/**
|
|
197
|
-
* Renders a user interface for selecting and configuring data from your external sources.
|
|
198
|
-
*
|
|
199
|
-
* @param request - Configuration and callbacks for the data selection UI.
|
|
200
|
-
*
|
|
201
|
-
* @example Rendering a data selection UI
|
|
202
|
-
* ```ts
|
|
203
|
-
* import type { RenderSelectionUiRequest } from '@canva/intents/data';
|
|
204
|
-
*
|
|
205
|
-
* async function renderSelectionUi(request: RenderSelectionUiRequest): Promise<void> {
|
|
206
|
-
* // UI rendering logic.
|
|
207
|
-
* // Example: if user selects data 'ref123'.
|
|
208
|
-
* const selectedRef = { source: 'ref123', title: 'My Selected Table' };
|
|
209
|
-
* try {
|
|
210
|
-
* const result = await request.updateDataRef(selectedRef);
|
|
211
|
-
* if (result.status === 'completed') {
|
|
212
|
-
* console.log('Selection valid and preview updated.');
|
|
213
|
-
* } else {
|
|
214
|
-
* console.error('Selection error:', result.status);
|
|
215
|
-
* }
|
|
216
|
-
* } catch (error) {
|
|
217
|
-
* console.error('An unexpected error occurred during data ref update:', error);
|
|
218
|
-
* }
|
|
219
|
-
* }
|
|
220
|
-
* ```
|
|
221
|
-
*/
|
|
222
|
-
renderSelectionUi: (request: RenderSelectionUiRequest) => void;
|
|
223
|
-
};
|
|
224
|
-
|
|
225
|
-
/**
|
|
226
|
-
* @public
|
|
227
|
-
* {@link InvocationContext} indicating initial data selection flow or edit of existing data.
|
|
228
|
-
*/
|
|
229
|
-
declare type DataSelectionInvocationContext = {
|
|
230
|
-
/**
|
|
231
|
-
* Initial data selection or editing existing data.
|
|
232
|
-
*
|
|
233
|
-
* This is the standard flow when:
|
|
234
|
-
*
|
|
235
|
-
* - A user is selecting data for the first time
|
|
236
|
-
* - A user is editing a previous selection
|
|
237
|
-
*
|
|
238
|
-
* If `dataSourceRef` is provided, this indicates an edit flow, and you should
|
|
239
|
-
* pre-populate your UI with this selection.
|
|
240
|
-
*/
|
|
241
|
-
reason: 'data_selection';
|
|
242
|
-
/**
|
|
243
|
-
* If dataSourceRef is provided, this is an edit of existing data flow and UI should be pre-populated.
|
|
244
|
-
*/
|
|
245
|
-
dataSourceRef?: DataSourceRef;
|
|
246
|
-
};
|
|
247
|
-
|
|
248
|
-
/**
|
|
249
|
-
* @public
|
|
250
|
-
* Reference to an external data source that can be used to fetch data.
|
|
251
|
-
* Created by Data Connector apps and stored by Canva for data refresh operations.
|
|
252
|
-
*
|
|
253
|
-
* You create this object in your data selection UI and pass it to the
|
|
254
|
-
* `updateDataRef` callback. Canva stores this reference and uses it for
|
|
255
|
-
* future data refresh operations.
|
|
256
|
-
*
|
|
257
|
-
* Maximum size: 5KB
|
|
258
|
-
*
|
|
259
|
-
* @example Defining how to locate external data
|
|
260
|
-
* ```ts
|
|
261
|
-
* const dataSourceRef: DataSourceRef = {
|
|
262
|
-
* source: JSON.stringify({
|
|
263
|
-
* reportId: "monthly_sales_001",
|
|
264
|
-
* filters: { year: 2023, region: "NA" }
|
|
265
|
-
* }),
|
|
266
|
-
* title: "Monthly Sales Report (NA, 2023)"
|
|
267
|
-
* };
|
|
268
|
-
* ```
|
|
269
|
-
*/
|
|
270
|
-
export declare type DataSourceRef = {
|
|
271
|
-
/**
|
|
272
|
-
* Information needed to identify and retrieve data from your source.
|
|
273
|
-
*
|
|
274
|
-
* This string should contain all the information your app needs to
|
|
275
|
-
* fetch the exact data selection later. Typically, this is a serialized
|
|
276
|
-
* object with query parameters, identifiers, or filters.
|
|
277
|
-
*
|
|
278
|
-
* You are responsible for encoding and decoding this value appropriately.
|
|
279
|
-
*
|
|
280
|
-
* Maximum size: 5KB
|
|
281
|
-
*/
|
|
282
|
-
source: string;
|
|
283
|
-
/**
|
|
284
|
-
* A human-readable description of the data reference.
|
|
285
|
-
*
|
|
286
|
-
* This title may be displayed to users in the Canva interface to help
|
|
287
|
-
* them identify the data source.
|
|
288
|
-
*
|
|
289
|
-
* Maximum length: 255 characters
|
|
290
|
-
*/
|
|
291
|
-
title?: string;
|
|
292
|
-
};
|
|
293
|
-
|
|
294
|
-
/**
|
|
295
|
-
* @public
|
|
296
|
-
* Structured tabular data for import into Canva.
|
|
297
|
-
*
|
|
298
|
-
* This format allows you to provide typed data with proper formatting
|
|
299
|
-
* to ensure it displays correctly in Canva designs.
|
|
300
|
-
*
|
|
301
|
-
* @example Creating a data table
|
|
302
|
-
* ```ts
|
|
303
|
-
* import type { ColumnConfig, DataTableCell, DataTable, DataTableRow } from '@canva/intents/data';
|
|
304
|
-
*
|
|
305
|
-
* const myTable: DataTable = {
|
|
306
|
-
* columnConfigs: [
|
|
307
|
-
* { name: 'Name', type: 'string' },
|
|
308
|
-
* { name: 'Age', type: 'number' },
|
|
309
|
-
* { name: 'Subscribed', type: 'boolean' },
|
|
310
|
-
* { name: 'Join Date', type: 'date' }
|
|
311
|
-
* ],
|
|
312
|
-
* rows: [
|
|
313
|
-
* {
|
|
314
|
-
* cells: [
|
|
315
|
-
* { type: 'string', value: 'Alice' },
|
|
316
|
-
* { type: 'number', value: 30 },
|
|
317
|
-
* { type: 'boolean', value: true },
|
|
318
|
-
* { type: 'date', value: Math.floor(new Date('2023-01-15').getTime() / 1000) }
|
|
319
|
-
* ]
|
|
320
|
-
* },
|
|
321
|
-
* {
|
|
322
|
-
* cells: [
|
|
323
|
-
* { type: 'string', value: 'Bob' },
|
|
324
|
-
* { type: 'number', value: 24 },
|
|
325
|
-
* { type: 'boolean', value: false },
|
|
326
|
-
* { type: 'date', value: Math.floor(new Date('2022-07-20').getTime() / 1000) }
|
|
327
|
-
* ]
|
|
328
|
-
* }
|
|
329
|
-
* ]
|
|
330
|
-
* };
|
|
331
|
-
* ```
|
|
332
|
-
*/
|
|
333
|
-
export declare type DataTable = {
|
|
334
|
-
/**
|
|
335
|
-
* Column definitions with names and data types.
|
|
336
|
-
*
|
|
337
|
-
* These help Canva interpret and display your data correctly.
|
|
338
|
-
*/
|
|
339
|
-
columnConfigs?: ColumnConfig[];
|
|
340
|
-
/**
|
|
341
|
-
* The data rows containing the actual values.
|
|
342
|
-
*
|
|
343
|
-
* Each row contains an array of cells with typed data values.
|
|
344
|
-
*/
|
|
345
|
-
rows: DataTableRow[];
|
|
346
|
-
};
|
|
347
|
-
|
|
348
|
-
/**
|
|
349
|
-
* @public
|
|
350
|
-
* Generic type for table cells that resolves to a specific cell type.
|
|
351
|
-
*/
|
|
352
|
-
export declare type DataTableCell<T extends DataType = DataType> = {
|
|
353
|
-
date: DateDataTableCell;
|
|
354
|
-
string: StringDataTableCell;
|
|
355
|
-
number: NumberDataTableCell;
|
|
356
|
-
boolean: BooleanDataTableCell;
|
|
357
|
-
media: MediaCollectionDataTableCell;
|
|
358
|
-
}[T];
|
|
359
|
-
|
|
360
|
-
/**
|
|
361
|
-
* @public
|
|
362
|
-
* Options for uploading an image asset to the user's private media library.
|
|
363
|
-
*/
|
|
364
|
-
export declare type DataTableImageUpload = Omit<ImageUploadOptions, 'type' | 'parentRef'> & {
|
|
365
|
-
/**
|
|
366
|
-
* Indicates this value contains options for image uploading.
|
|
367
|
-
*/
|
|
368
|
-
type: 'image_upload';
|
|
369
|
-
};
|
|
370
|
-
|
|
371
|
-
/**
|
|
372
|
-
* @public
|
|
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
|
-
* @public
|
|
392
|
-
* Metadata providing additional context about the imported data.
|
|
393
|
-
*/
|
|
394
|
-
export declare type DataTableMetadata = {
|
|
395
|
-
/**
|
|
396
|
-
* A human-readable description of the dataset.
|
|
397
|
-
*
|
|
398
|
-
* This description helps users understand what data they are importing.
|
|
399
|
-
*/
|
|
400
|
-
description?: string;
|
|
401
|
-
/**
|
|
402
|
-
* Information about the data provider or source.
|
|
403
|
-
*/
|
|
404
|
-
providerInfo?: {
|
|
405
|
-
/**
|
|
406
|
-
* Name of the data provider.
|
|
407
|
-
*/
|
|
408
|
-
name: string;
|
|
409
|
-
/**
|
|
410
|
-
* URL to the provider's website or related resource.
|
|
411
|
-
*/
|
|
412
|
-
url?: string;
|
|
413
|
-
};
|
|
414
|
-
};
|
|
415
|
-
|
|
416
|
-
/**
|
|
417
|
-
* @public
|
|
418
|
-
* A row in the data table.
|
|
419
|
-
*
|
|
420
|
-
* @example Creating a single row of data cells
|
|
421
|
-
* ```ts
|
|
422
|
-
* import type { DataTableCell, DataTableRow } from '@canva/intents/data';
|
|
423
|
-
*
|
|
424
|
-
* const row: DataTableRow = {
|
|
425
|
-
* cells: [
|
|
426
|
-
* { type: 'string', value: 'Product Alpha' },
|
|
427
|
-
* { type: 'number', value: 199.99 },
|
|
428
|
-
* { type: 'boolean', value: true }
|
|
429
|
-
* ]
|
|
430
|
-
* };
|
|
431
|
-
* ```
|
|
432
|
-
*/
|
|
433
|
-
export declare type DataTableRow = {
|
|
434
|
-
/**
|
|
435
|
-
* Array of cells containing the data values.
|
|
436
|
-
*
|
|
437
|
-
* Each cell must have a type that matches the corresponding column definition (if provided).
|
|
438
|
-
*/
|
|
439
|
-
cells: DataTableCell<DataType>[];
|
|
440
|
-
};
|
|
441
|
-
|
|
442
|
-
/**
|
|
443
|
-
* @public
|
|
444
|
-
* Options for uploading a video asset to the user's private media library.
|
|
445
|
-
*/
|
|
446
|
-
export declare type DataTableVideoUpload = Omit<VideoUploadOptions, 'type' | 'parentRef'> & {
|
|
447
|
-
/**
|
|
448
|
-
* Indicates this value contains options for video uploading.
|
|
449
|
-
*/
|
|
450
|
-
type: 'video_upload';
|
|
451
|
-
};
|
|
452
|
-
|
|
453
|
-
/**
|
|
454
|
-
* @public
|
|
455
|
-
* Data types supported for table cells.
|
|
456
|
-
*/
|
|
457
|
-
export declare type DataType = 'string' | 'number' | 'date' | 'boolean' | 'media';
|
|
458
|
-
|
|
459
|
-
/**
|
|
460
|
-
* @public
|
|
461
|
-
* Cell containing a date value.
|
|
462
|
-
*
|
|
463
|
-
* @example Creating a date cell
|
|
464
|
-
* ```ts
|
|
465
|
-
* import type { DateDataTableCell } from '@canva/intents/data';
|
|
466
|
-
*
|
|
467
|
-
* const todayCell: DateDataTableCell = {
|
|
468
|
-
* type: 'date',
|
|
469
|
-
* value: Math.floor(Date.now() / 1000) // Unix timestamp in seconds
|
|
470
|
-
* };
|
|
471
|
-
*
|
|
472
|
-
* const emptyDateCell: DateDataTableCell = {
|
|
473
|
-
* type: 'date',
|
|
474
|
-
* value: undefined
|
|
475
|
-
* };
|
|
476
|
-
* ```
|
|
477
|
-
*/
|
|
478
|
-
export declare type DateDataTableCell = {
|
|
479
|
-
/**
|
|
480
|
-
* Indicates this cell contains a date value.
|
|
481
|
-
*/
|
|
482
|
-
type: 'date';
|
|
483
|
-
/**
|
|
484
|
-
* Unix timestamp in seconds representing the date.
|
|
485
|
-
*
|
|
486
|
-
* Use `undefined` for an empty cell.
|
|
487
|
-
*/
|
|
488
|
-
value: number | undefined;
|
|
489
|
-
};
|
|
490
|
-
|
|
491
|
-
/**
|
|
492
|
-
* @public
|
|
493
|
-
* A set of dimensions.
|
|
494
|
-
*/
|
|
495
|
-
declare type Dimensions = {
|
|
496
|
-
/**
|
|
497
|
-
* A width, in pixels.
|
|
498
|
-
*/
|
|
499
|
-
width: number;
|
|
500
|
-
/**
|
|
501
|
-
* A height, in pixels.
|
|
502
|
-
*/
|
|
503
|
-
height: number;
|
|
504
|
-
};
|
|
505
|
-
|
|
506
|
-
/**
|
|
507
|
-
* @public
|
|
508
|
-
* Successful result from `getDataTable` action.
|
|
509
|
-
*/
|
|
510
|
-
export declare type GetDataTableCompleted = {
|
|
511
|
-
/**
|
|
512
|
-
* Indicates the operation completed successfully
|
|
513
|
-
*/
|
|
514
|
-
status: 'completed';
|
|
515
|
-
/**
|
|
516
|
-
* The fetched data formatted as a data table.
|
|
517
|
-
*/
|
|
518
|
-
dataTable: DataTable;
|
|
519
|
-
/**
|
|
520
|
-
* Optional metadata providing additional context about the data.
|
|
521
|
-
*/
|
|
522
|
-
metadata?: DataTableMetadata;
|
|
523
|
-
};
|
|
524
|
-
|
|
525
|
-
/**
|
|
526
|
-
* @public
|
|
527
|
-
* Error results that can be returned from `getDataTable` method.
|
|
528
|
-
*/
|
|
529
|
-
export declare type GetDataTableError = OutdatedSourceRefError | RemoteRequestFailedError | AppError;
|
|
530
|
-
|
|
531
|
-
/**
|
|
532
|
-
* @public
|
|
533
|
-
* Parameters for the getDataTable action.
|
|
534
|
-
*/
|
|
535
|
-
export declare type GetDataTableRequest = {
|
|
536
|
-
/**
|
|
537
|
-
* Reference to the data source to fetch.
|
|
538
|
-
*
|
|
539
|
-
* This contains the information needed to identify and retrieve the specific data
|
|
540
|
-
* that was previously selected by the user.
|
|
541
|
-
*
|
|
542
|
-
* Use this to query your external data service.
|
|
543
|
-
*/
|
|
544
|
-
dataSourceRef: DataSourceRef;
|
|
545
|
-
/**
|
|
546
|
-
* Maximum row and column limits for the imported data.
|
|
547
|
-
*
|
|
548
|
-
* Your app must ensure the returned data does not exceed these limits.
|
|
549
|
-
*
|
|
550
|
-
* If the requested data would exceed these limits, either:
|
|
551
|
-
*
|
|
552
|
-
* - Truncate the data to fit within limits, or
|
|
553
|
-
* - Return a 'data_table_limit_exceeded' error
|
|
554
|
-
*/
|
|
555
|
-
limit: DataTableLimit;
|
|
556
|
-
/**
|
|
557
|
-
* Standard DOM AbortSignal for cancellation support.
|
|
558
|
-
*
|
|
559
|
-
* Your app should monitor this signal and abort any ongoing operations if it becomes aborted.
|
|
560
|
-
*/
|
|
561
|
-
signal: AbortSignal;
|
|
562
|
-
};
|
|
563
|
-
|
|
564
|
-
/**
|
|
565
|
-
* @public
|
|
566
|
-
* Result returned from the `getDataTable` action.
|
|
567
|
-
*/
|
|
568
|
-
export declare type GetDataTableResponse = GetDataTableCompleted | GetDataTableError;
|
|
569
|
-
|
|
570
|
-
/**
|
|
571
|
-
* @public
|
|
572
|
-
* The MIME type of an image file that's supported by Canva's backend.
|
|
573
|
-
*/
|
|
574
|
-
declare type ImageMimeType = 'image/jpeg' | 'image/heic' | 'image/png' | 'image/svg+xml' | 'image/webp' | 'image/tiff';
|
|
575
|
-
|
|
576
|
-
/**
|
|
577
|
-
* @public
|
|
578
|
-
* A unique identifier that points to an image asset in Canva's backend.
|
|
579
|
-
*/
|
|
580
|
-
declare type ImageRef = string & {
|
|
581
|
-
__imageRef: never;
|
|
582
|
-
};
|
|
583
|
-
|
|
584
|
-
/**
|
|
585
|
-
* @public
|
|
586
|
-
* Options for uploading an image asset to the user's private media library.
|
|
587
|
-
*/
|
|
588
|
-
declare type ImageUploadOptions = {
|
|
589
|
-
/**
|
|
590
|
-
* The type of asset.
|
|
591
|
-
*/
|
|
592
|
-
type: 'image';
|
|
593
|
-
/**
|
|
594
|
-
* A human-readable name for the image asset.
|
|
595
|
-
*
|
|
596
|
-
* @remarks
|
|
597
|
-
* This name is displayed in the user's media library and helps users identify
|
|
598
|
-
* and find the asset later. If not provided, Canva will generate a name based
|
|
599
|
-
* on the asset's URL or a unique identifier.
|
|
600
|
-
*
|
|
601
|
-
* Requirements:
|
|
602
|
-
* - Minimum length: 1 character (empty strings are not allowed)
|
|
603
|
-
* - Maximum length: 255 characters
|
|
604
|
-
*/
|
|
605
|
-
name?: string;
|
|
606
|
-
/**
|
|
607
|
-
* The ref of the original asset from which this new asset was derived.
|
|
608
|
-
*
|
|
609
|
-
* @remarks
|
|
610
|
-
* For example, if an app applies an effect to an image, `parentRef` should contain the ref of the original image.
|
|
611
|
-
*/
|
|
612
|
-
parentRef?: ImageRef;
|
|
613
|
-
/**
|
|
614
|
-
* The URL of the image file to upload.
|
|
615
|
-
* This can be an external URL or a data URL.
|
|
616
|
-
*
|
|
617
|
-
* @remarks
|
|
618
|
-
* Requirements for external URLs:
|
|
619
|
-
*
|
|
620
|
-
* - Must use HTTPS
|
|
621
|
-
* - Must return a `200` status code
|
|
622
|
-
* - `Content-Type` must match the file's MIME type
|
|
623
|
-
* - Must be publicly accessible (i.e. not a localhost URL)
|
|
624
|
-
* - Must not redirect
|
|
625
|
-
* - Must not contain an IP address
|
|
626
|
-
* - Maximum length: 4096 characters
|
|
627
|
-
* - Must not contain whitespace
|
|
628
|
-
* - Must not contain these characters: `>`, `<`, `{`, `}`, `^`, backticks
|
|
629
|
-
* - Maximum file size: 50MB
|
|
630
|
-
*
|
|
631
|
-
* Requirements for data URLs:
|
|
632
|
-
*
|
|
633
|
-
* - Must include `;base64` for base64-encoded data
|
|
634
|
-
* - Maximum size: 10MB (10 × 1024 × 1024 characters)
|
|
635
|
-
*
|
|
636
|
-
* Requirements for SVGs:
|
|
637
|
-
*
|
|
638
|
-
* - Disallowed elements:
|
|
639
|
-
* - `a`
|
|
640
|
-
* - `altglyph`
|
|
641
|
-
* - `altglyphdef`
|
|
642
|
-
* - `altglyphitem`
|
|
643
|
-
* - `animate`
|
|
644
|
-
* - `animatemotion`
|
|
645
|
-
* - `animatetransform`
|
|
646
|
-
* - `cursor`
|
|
647
|
-
* - `discard`
|
|
648
|
-
* - `font`
|
|
649
|
-
* - `font-face`
|
|
650
|
-
* - `font-face-format`
|
|
651
|
-
* - `font-face-name`
|
|
652
|
-
* - `font-face-src`
|
|
653
|
-
* - `font-face-uri`
|
|
654
|
-
* - `foreignobject`
|
|
655
|
-
* - `glyph`
|
|
656
|
-
* - `glyphref`
|
|
657
|
-
* - `missing-glyph`
|
|
658
|
-
* - `mpath`
|
|
659
|
-
* - `script`
|
|
660
|
-
* - `set`
|
|
661
|
-
* - `switch`
|
|
662
|
-
* - `tref`
|
|
663
|
-
* - Disallowed attributes:
|
|
664
|
-
* - `crossorigin`
|
|
665
|
-
* - `lang`
|
|
666
|
-
* - `media`
|
|
667
|
-
* - `onload`
|
|
668
|
-
* - `ping`
|
|
669
|
-
* - `referrerpolicy`
|
|
670
|
-
* - `rel`
|
|
671
|
-
* - `rendering-intent`
|
|
672
|
-
* - `requiredextensions`
|
|
673
|
-
* - `requiredfeatures`
|
|
674
|
-
* - `systemlanguage`
|
|
675
|
-
* - `tabindex`
|
|
676
|
-
* - `transform-origin`
|
|
677
|
-
* - `unicode`
|
|
678
|
-
* - `vector-effect`
|
|
679
|
-
* - The `href` attribute of an `image` element only supports data URLs for PNG and JPEG images.
|
|
680
|
-
* - The URL in the `href` attribute must not point to a location outside of the SVG.
|
|
681
|
-
* - The `style` attribute must not use the `mix-blend-mode` property.
|
|
682
|
-
*/
|
|
683
|
-
url: string;
|
|
684
|
-
/**
|
|
685
|
-
* The MIME type of the image file.
|
|
686
|
-
*/
|
|
687
|
-
mimeType: ImageMimeType;
|
|
688
|
-
/**
|
|
689
|
-
* The URL of a thumbnail image to display while the image is queued for upload.
|
|
690
|
-
* This can be an external URL or a data URL.
|
|
691
|
-
*
|
|
692
|
-
* @remarks
|
|
693
|
-
* Requirements for external URLs:
|
|
694
|
-
*
|
|
695
|
-
* - Must use HTTPS
|
|
696
|
-
* - Must support [Cross-Origin Resource Sharing](https://www.canva.dev/docs/apps/cross-origin-resource-sharing/)
|
|
697
|
-
* - Must be a PNG, JPEG, or SVG file
|
|
698
|
-
* - Maximum length: 4096 characters
|
|
699
|
-
*
|
|
700
|
-
* Requirements for data URLs:
|
|
701
|
-
*
|
|
702
|
-
* - Must include `;base64` for base64-encoded data
|
|
703
|
-
* - Maximum size: 10MB (10 × 1024 × 1024 characters)
|
|
704
|
-
*/
|
|
705
|
-
thumbnailUrl: string;
|
|
706
|
-
/**
|
|
707
|
-
* A disclosure identifying if the app generated this image using AI
|
|
708
|
-
*
|
|
709
|
-
* @remarks
|
|
710
|
-
* Helps users make informed decisions about the content they interact with.
|
|
711
|
-
* See {@link AiDisclosure} for the full definition.
|
|
712
|
-
*
|
|
713
|
-
* **App Generated**
|
|
714
|
-
*
|
|
715
|
-
* 'app_generated' indicates when the app creates or significantly alters an asset using AI. Includes when
|
|
716
|
-
* the app requests a third-party service to take similar action on an image using AI.
|
|
717
|
-
*
|
|
718
|
-
* Required for the following cases (this list is not exhaustive):
|
|
719
|
-
* | Case | Reason |
|
|
720
|
-
* | -- | -- |
|
|
721
|
-
* | AI generates a new image from scratch | Creates new creative content |
|
|
722
|
-
* | AI changes the style of the image e.g. makes it cartoon | Significantly alters the style |
|
|
723
|
-
* | AI removes an object and replaces it with new content | Creates new creative content |
|
|
724
|
-
* | AI changes the facial expression of a person in an image | Can alter content's original meaning |
|
|
725
|
-
* | AI composites multiple images together | Significantly alters context |
|
|
726
|
-
* | AI expands an image by generating new content to fill the edges | Creates new creative content |
|
|
727
|
-
* | AI replaces background by generating new content | Creates new creative content |
|
|
728
|
-
*
|
|
729
|
-
* **None**
|
|
730
|
-
*
|
|
731
|
-
* 'none' indicates when the app doesn't create or significantly alter an asset using AI, or as a part of a request
|
|
732
|
-
* to third-party hosted content.
|
|
733
|
-
*
|
|
734
|
-
* Required for the following cases (this list is not exhaustive):
|
|
735
|
-
* | Case | Reason |
|
|
736
|
-
* | -- | -- |
|
|
737
|
-
* | Asset comes from an asset library | Didn't generate the asset itself |
|
|
738
|
-
* | AI corrects red eyes | A minor correction |
|
|
739
|
-
* | AI removes background without replacement | Doesn't change original meaning by itself |
|
|
740
|
-
* | AI changes the color of an object in an image | Doesn't change original meaning by itself |
|
|
741
|
-
* | AI detects image defects and suggests manual fixes | Didn't change the asset itself |
|
|
742
|
-
* | AI adjusts brightness and contrast on an image | Doesn't change original meaning by itself |
|
|
743
|
-
* | AI upscales an image | Doesn't change original meaning by itself |
|
|
744
|
-
*/
|
|
745
|
-
aiDisclosure: AiDisclosure;
|
|
746
|
-
|
|
747
|
-
} & AllOrNone<Dimensions>;
|
|
748
|
-
|
|
749
|
-
/**
|
|
750
|
-
* @public
|
|
751
|
-
* Information explaining why the data selection UI was launched.
|
|
752
|
-
*/
|
|
753
|
-
export declare type InvocationContext = DataSelectionInvocationContext | OutdatedSourceRefInvocationContext | AppErrorInvocationContext;
|
|
754
|
-
|
|
755
|
-
/**
|
|
756
|
-
* @public
|
|
757
|
-
* Cell containing a media collection (images) value.
|
|
758
|
-
*
|
|
759
|
-
* @example Creating a media cell with an image
|
|
760
|
-
* ```ts
|
|
761
|
-
* import type { MediaCollectionDataTableCell } from '@canva/intents/data';
|
|
762
|
-
*
|
|
763
|
-
* const mediaCell: MediaCollectionDataTableCell = {
|
|
764
|
-
* type: 'media',
|
|
765
|
-
* value: [{
|
|
766
|
-
* type: 'image_upload',
|
|
767
|
-
* url: 'https://www.canva.dev/example-assets/image-import/image.jpg',
|
|
768
|
-
* mimeType: 'image/jpeg',
|
|
769
|
-
* thumbnailUrl: 'https://www.canva.dev/example-assets/image-import/thumbnail.jpg',
|
|
770
|
-
* aiDisclosure: 'none'
|
|
771
|
-
* }]
|
|
772
|
-
* };
|
|
773
|
-
* ```
|
|
774
|
-
*
|
|
775
|
-
* @example Creating an empty media cell
|
|
776
|
-
* ```ts
|
|
777
|
-
* import type { MediaCollectionDataTableCell } from '@canva/intents/data';
|
|
778
|
-
*
|
|
779
|
-
* const emptyMediaCell: MediaCollectionDataTableCell = {
|
|
780
|
-
* type: 'media',
|
|
781
|
-
* value: []
|
|
782
|
-
* };
|
|
783
|
-
* ```
|
|
784
|
-
*/
|
|
785
|
-
export declare type MediaCollectionDataTableCell = {
|
|
786
|
-
/**
|
|
787
|
-
* Indicates this cell contains a media collection.
|
|
788
|
-
*/
|
|
789
|
-
type: 'media';
|
|
790
|
-
/**
|
|
791
|
-
* Media collection values.
|
|
792
|
-
*
|
|
793
|
-
* Use empty array for an empty cell.
|
|
794
|
-
*/
|
|
795
|
-
value: (DataTableImageUpload | DataTableVideoUpload)[];
|
|
796
|
-
};
|
|
797
|
-
|
|
798
|
-
declare type Never<T> = {
|
|
799
|
-
[key in keyof T]?: never;
|
|
800
|
-
};
|
|
801
|
-
|
|
802
|
-
/**
|
|
803
|
-
* @public
|
|
804
|
-
* Formatting metadata for number cells.
|
|
805
|
-
*
|
|
806
|
-
* @example Formatting as currency
|
|
807
|
-
* ```ts
|
|
808
|
-
* import type { NumberDataTableCell } from '@canva/intents/data';
|
|
809
|
-
*
|
|
810
|
-
* const currencyCell: NumberDataTableCell = {
|
|
811
|
-
* type: 'number',
|
|
812
|
-
* value: 1234.57,
|
|
813
|
-
* metadata: { formatting: '[$$]#,##0.00' }
|
|
814
|
-
* };
|
|
815
|
-
* ```
|
|
816
|
-
*
|
|
817
|
-
* @example Formatting as a percentage
|
|
818
|
-
* ```ts
|
|
819
|
-
* import type { NumberDataTableCell } from '@canva/intents/data';
|
|
820
|
-
*
|
|
821
|
-
* const percentCell: NumberDataTableCell = {
|
|
822
|
-
* type: 'number',
|
|
823
|
-
* value: 0.1234,
|
|
824
|
-
* metadata: { formatting: '0.00%' }
|
|
825
|
-
* };
|
|
826
|
-
* ```
|
|
827
|
-
*
|
|
828
|
-
* @example Applying a thousands separator
|
|
829
|
-
* ```ts
|
|
830
|
-
* import type { NumberDataTableCell } from '@canva/intents/data';
|
|
831
|
-
*
|
|
832
|
-
* const largeNumberCell: NumberDataTableCell = {
|
|
833
|
-
* type: 'number',
|
|
834
|
-
* value: 1234567.89234,
|
|
835
|
-
* metadata: { formatting: '#,##0.00' }
|
|
836
|
-
* };
|
|
837
|
-
* ```
|
|
838
|
-
*/
|
|
839
|
-
export declare type NumberCellMetadata = {
|
|
840
|
-
/**
|
|
841
|
-
* Formatting pattern using Office Open XML Format.
|
|
842
|
-
*
|
|
843
|
-
* These patterns control how numbers are displayed to users,
|
|
844
|
-
* including currency symbols, decimal places, and separators.
|
|
845
|
-
*/
|
|
846
|
-
formatting?: string;
|
|
847
|
-
};
|
|
848
|
-
|
|
849
|
-
/**
|
|
850
|
-
* @public
|
|
851
|
-
* Cell containing a numeric value.
|
|
852
|
-
*
|
|
853
|
-
* @example Creating a number cell
|
|
854
|
-
* ```ts
|
|
855
|
-
* import type { NumberCellMetadata, NumberDataTableCell } from '@canva/intents/data';
|
|
856
|
-
*
|
|
857
|
-
* const priceCell: NumberDataTableCell = {
|
|
858
|
-
* type: 'number',
|
|
859
|
-
* value: 29.99,
|
|
860
|
-
* metadata: { formatting: '[$$]#,##0.00' }
|
|
861
|
-
* };
|
|
862
|
-
*
|
|
863
|
-
* const quantityCell: NumberDataTableCell = {
|
|
864
|
-
* type: 'number',
|
|
865
|
-
* value: 150
|
|
866
|
-
* };
|
|
867
|
-
*
|
|
868
|
-
* const emptyNumberCell: NumberDataTableCell = {
|
|
869
|
-
* type: 'number',
|
|
870
|
-
* value: undefined
|
|
871
|
-
* };
|
|
872
|
-
* ```
|
|
873
|
-
*/
|
|
874
|
-
export declare type NumberDataTableCell = {
|
|
875
|
-
/**
|
|
876
|
-
* Indicates this cell contains a number value.
|
|
877
|
-
*/
|
|
878
|
-
type: 'number';
|
|
879
|
-
/**
|
|
880
|
-
* Numeric value within safe integer range.
|
|
881
|
-
*
|
|
882
|
-
* Valid range: `Number.MIN_SAFE_INTEGER` to `Number.MAX_SAFE_INTEGER`
|
|
883
|
-
*
|
|
884
|
-
* Invalid values:
|
|
885
|
-
*
|
|
886
|
-
* - Infinity or -Infinity
|
|
887
|
-
* - NaN
|
|
888
|
-
* - Negative zero (-0)
|
|
889
|
-
* - Denormalized numbers
|
|
890
|
-
*
|
|
891
|
-
* Use `undefined` for an empty cell.
|
|
892
|
-
*/
|
|
893
|
-
value: number | undefined;
|
|
894
|
-
/**
|
|
895
|
-
* Optional formatting information for displaying the number.
|
|
896
|
-
*
|
|
897
|
-
* @example Applying display formatting to a number
|
|
898
|
-
* ```ts
|
|
899
|
-
* import type { NumberCellMetadata } from '@canva/intents/data';
|
|
900
|
-
*
|
|
901
|
-
* const currencyFormatting: NumberCellMetadata = { formatting: '[$USD]#,##0.00' };
|
|
902
|
-
* const percentageFormatting: NumberCellMetadata = { formatting: '0.00%' };
|
|
903
|
-
* ```
|
|
904
|
-
*/
|
|
905
|
-
metadata?: NumberCellMetadata;
|
|
906
|
-
};
|
|
907
|
-
|
|
908
|
-
/**
|
|
909
|
-
* @public
|
|
910
|
-
* {@link GetDataTableError} indicating the data source reference is no longer valid.
|
|
911
|
-
* This will trigger a re-selection flow for the user.
|
|
912
|
-
*/
|
|
913
|
-
declare type OutdatedSourceRefError = {
|
|
914
|
-
/**
|
|
915
|
-
* The data source reference is no longer valid.
|
|
916
|
-
*
|
|
917
|
-
* Return this error when the DataSourceRef cannot be used to retrieve data,
|
|
918
|
-
* for example:
|
|
919
|
-
*
|
|
920
|
-
* - The referenced dataset has been deleted
|
|
921
|
-
* - Access permissions have changed
|
|
922
|
-
* - The structure of the data has fundamentally changed
|
|
923
|
-
*
|
|
924
|
-
* This will trigger a re-selection flow, allowing the user to choose a new
|
|
925
|
-
* data source.
|
|
926
|
-
*/
|
|
927
|
-
status: 'outdated_source_ref';
|
|
928
|
-
};
|
|
929
|
-
|
|
930
|
-
/**
|
|
931
|
-
* @public
|
|
932
|
-
* {@link InvocationContext} indicating an error occurred because the previously selected data source reference is no longer valid.
|
|
933
|
-
* Triggered when getDataTable returned 'outdated_source_ref' during data refresh.
|
|
934
|
-
* UI should guide the user to reselect or reconfigure their data.
|
|
935
|
-
*/
|
|
936
|
-
declare type OutdatedSourceRefInvocationContext = {
|
|
937
|
-
/**
|
|
938
|
-
* Previously selected data source reference is no longer valid.
|
|
939
|
-
*
|
|
940
|
-
* This occurs when `getDataTable` returned 'outdated_source_ref' during a
|
|
941
|
-
* refresh attempt. Your UI should guide the user to select a new data source
|
|
942
|
-
* or update their selection.
|
|
943
|
-
*
|
|
944
|
-
* The outdated reference is provided to help you suggest an appropriate replacement.
|
|
945
|
-
*/
|
|
946
|
-
reason: 'outdated_source_ref';
|
|
947
|
-
/**
|
|
948
|
-
* The outdated data source reference that caused the error during refresh.
|
|
949
|
-
*/
|
|
950
|
-
dataSourceRef?: DataSourceRef;
|
|
951
|
-
};
|
|
952
|
-
|
|
953
|
-
/**
|
|
954
|
-
* @public
|
|
955
|
-
*
|
|
956
|
-
* Prepares a {@link DataConnectorIntent|DataConnector Intent}.
|
|
957
|
-
*
|
|
958
|
-
* @example
|
|
959
|
-
* ```tsx
|
|
960
|
-
* import { prepareDataConnector } from "@canva/intents/data";
|
|
961
|
-
*
|
|
962
|
-
* prepareDataConnector({
|
|
963
|
-
* getDataTable: async (params) => {
|
|
964
|
-
* // Implement the logic to fetch the data table
|
|
965
|
-
* },
|
|
966
|
-
* renderSelectionUi: (params) => {
|
|
967
|
-
* // Implement the UI for the data table selection
|
|
968
|
-
* },
|
|
969
|
-
* });
|
|
970
|
-
* ```
|
|
971
|
-
*/
|
|
972
|
-
export declare const prepareDataConnector: (implementation: DataConnectorIntent) => void;
|
|
973
|
-
|
|
974
|
-
/**
|
|
975
|
-
* @public
|
|
976
|
-
* {@link GetDataTableError} indicating failure to fetch data from the external source.
|
|
977
|
-
* Typically due to network issues or API failures.
|
|
978
|
-
*/
|
|
979
|
-
declare type RemoteRequestFailedError = {
|
|
980
|
-
/**
|
|
981
|
-
* Failed to fetch data from the external source.
|
|
982
|
-
*
|
|
983
|
-
* Return this error for network issues, API failures, or other
|
|
984
|
-
* connectivity problems that prevent data retrieval.
|
|
985
|
-
*/
|
|
986
|
-
status: 'remote_request_failed';
|
|
987
|
-
};
|
|
988
|
-
|
|
989
|
-
/**
|
|
990
|
-
* @public
|
|
991
|
-
* Parameters for rendering the data selection UI.
|
|
992
|
-
*/
|
|
993
|
-
export declare type RenderSelectionUiRequest = {
|
|
994
|
-
/**
|
|
995
|
-
* Context information about why the data selection UI is being launched.
|
|
996
|
-
*
|
|
997
|
-
* Use this to adapt your UI for different scenarios:
|
|
998
|
-
*
|
|
999
|
-
* - 'data_selection': Initial data selection or editing existing data
|
|
1000
|
-
* - 'outdated_source_ref': Previous reference is no longer valid, guide user to reselect
|
|
1001
|
-
* - 'app_error': Custom error occurred, show error message and recovery options
|
|
1002
|
-
*
|
|
1003
|
-
* When `dataSourceRef` is provided, pre-populate your UI with this selection.
|
|
1004
|
-
*/
|
|
1005
|
-
invocationContext: InvocationContext;
|
|
1006
|
-
/**
|
|
1007
|
-
* Maximum allowed rows and columns for the imported data.
|
|
1008
|
-
*
|
|
1009
|
-
* Your UI should inform users of these constraints and prevent or warn about
|
|
1010
|
-
* selections that would exceed them. This helps users understand why certain
|
|
1011
|
-
* data sets might not be available for selection.
|
|
1012
|
-
*/
|
|
1013
|
-
limit: DataTableLimit;
|
|
1014
|
-
/**
|
|
1015
|
-
* Callback to preview selected data before finalizing import.
|
|
1016
|
-
*
|
|
1017
|
-
* Call this function when the user selects data to:
|
|
1018
|
-
*
|
|
1019
|
-
* 1. Show a preview of the selected data to the user
|
|
1020
|
-
* 2. Validate that the selection meets system requirements
|
|
1021
|
-
*
|
|
1022
|
-
* Calling this function will trigger your `getDataTable` implementation.
|
|
1023
|
-
* Wait for the promise to resolve to determine if the selection is valid.
|
|
1024
|
-
*
|
|
1025
|
-
* @param dataSourceRef - Reference object identifying the selected data
|
|
1026
|
-
* @returns Promise resolving to success or an error result
|
|
1027
|
-
* @throws Will throw CanvaError('bad_request') if
|
|
1028
|
-
* 1. {@link DataSourceRef.source} exceeds 5kb.
|
|
1029
|
-
* 2. {@link DataSourceRef.title} exceeds 255 characters.
|
|
1030
|
-
* 3. {@link GetDataTableCompleted.dataTable} exceeds {@link DataTableLimit} or contains invalid data.
|
|
1031
|
-
*/
|
|
1032
|
-
updateDataRef: (dataSourceRef: DataSourceRef) => Promise<UpdateDataRefResponse>;
|
|
1033
|
-
};
|
|
1034
|
-
|
|
1035
|
-
/**
|
|
1036
|
-
* @public
|
|
1037
|
-
* Cell containing a text value.
|
|
1038
|
-
*
|
|
1039
|
-
* @example Creating a string cell
|
|
1040
|
-
* ```ts
|
|
1041
|
-
* import type { StringDataTableCell } from '@canva/intents/data';
|
|
1042
|
-
*
|
|
1043
|
-
* const nameCell: StringDataTableCell = {
|
|
1044
|
-
* type: 'string',
|
|
1045
|
-
* value: 'John Doe'
|
|
1046
|
-
* };
|
|
1047
|
-
*
|
|
1048
|
-
* const emptyStringCell: StringDataTableCell = {
|
|
1049
|
-
* type: 'string',
|
|
1050
|
-
* value: undefined
|
|
1051
|
-
* };
|
|
1052
|
-
* ```
|
|
1053
|
-
*/
|
|
1054
|
-
export declare type StringDataTableCell = {
|
|
1055
|
-
/**
|
|
1056
|
-
* Indicates this cell contains a string value.
|
|
1057
|
-
*/
|
|
1058
|
-
type: 'string';
|
|
1059
|
-
/**
|
|
1060
|
-
* Text content of the cell.
|
|
1061
|
-
*
|
|
1062
|
-
* Maximum length: 10,000 characters
|
|
1063
|
-
*
|
|
1064
|
-
* Use `undefined` for an empty cell.
|
|
1065
|
-
*/
|
|
1066
|
-
value: string | undefined;
|
|
1067
|
-
};
|
|
1068
|
-
|
|
1069
|
-
/**
|
|
1070
|
-
* @public
|
|
1071
|
-
* Successful result from the {@link RenderSelectionUiRequest.updateDataRef} callback.
|
|
1072
|
-
*/
|
|
1073
|
-
declare type UpdateDataRefCompleted = {
|
|
1074
|
-
/**
|
|
1075
|
-
* The data selection was successful and can be previewed.
|
|
1076
|
-
*/
|
|
1077
|
-
status: 'completed';
|
|
1078
|
-
};
|
|
1079
|
-
|
|
1080
|
-
/**
|
|
1081
|
-
* @public
|
|
1082
|
-
* Result returned from the {@link RenderSelectionUiRequest.updateDataRef} callback.
|
|
1083
|
-
* Indicates whether {@link DataSourceRef} update succeeded or failed.
|
|
1084
|
-
*/
|
|
1085
|
-
export declare type UpdateDataRefResponse = UpdateDataRefCompleted | GetDataTableError;
|
|
1086
|
-
|
|
1087
|
-
/**
|
|
1088
|
-
* @public
|
|
1089
|
-
* The MIME type of a video file that's supported by Canva's backend.
|
|
1090
|
-
*
|
|
1091
|
-
* @remarks
|
|
1092
|
-
* - GIFs are treated as videos, not images.
|
|
1093
|
-
* - `"application/json"` is only used for Lottie files.
|
|
1094
|
-
*/
|
|
1095
|
-
declare type VideoMimeType = 'video/avi' | 'video/x-msvideo' | 'image/gif' | 'video/x-m4v' | 'video/x-matroska' | 'video/quicktime' | 'video/mp4' | 'video/mpeg' | 'video/webm' | 'application/json';
|
|
1096
|
-
|
|
1097
|
-
/**
|
|
1098
|
-
* @public
|
|
1099
|
-
* A unique identifier that points to a video asset in Canva's backend.
|
|
1100
|
-
*/
|
|
1101
|
-
declare type VideoRef = string & {
|
|
1102
|
-
__videoRef: never;
|
|
1103
|
-
};
|
|
1104
|
-
|
|
1105
|
-
/**
|
|
1106
|
-
* @public
|
|
1107
|
-
* Options for uploading a video asset to the user's private media library.
|
|
1108
|
-
*/
|
|
1109
|
-
declare type VideoUploadOptions = {
|
|
1110
|
-
/**
|
|
1111
|
-
* The type of asset.
|
|
1112
|
-
*/
|
|
1113
|
-
type: 'video';
|
|
1114
|
-
/**
|
|
1115
|
-
* A human-readable name for the video asset.
|
|
1116
|
-
*
|
|
1117
|
-
* @remarks
|
|
1118
|
-
* This name is displayed in the user's media library and helps users identify
|
|
1119
|
-
* and find the asset later. If not provided, Canva will generate a name based
|
|
1120
|
-
* on the asset's URL or a unique identifier.
|
|
1121
|
-
*
|
|
1122
|
-
* Requirements:
|
|
1123
|
-
* - Minimum length: 1 character (empty strings are not allowed)
|
|
1124
|
-
* - Maximum length: 255 characters
|
|
1125
|
-
*/
|
|
1126
|
-
name?: string;
|
|
1127
|
-
/**
|
|
1128
|
-
* The ref of the original asset from which this new asset was derived.
|
|
1129
|
-
*
|
|
1130
|
-
* @remarks
|
|
1131
|
-
* For example, if an app applies an effect to a video, `parentRef` should contain the ref of the original video.
|
|
1132
|
-
*/
|
|
1133
|
-
parentRef?: VideoRef;
|
|
1134
|
-
/**
|
|
1135
|
-
* The URL of the video file to upload.
|
|
1136
|
-
*
|
|
1137
|
-
* @remarks
|
|
1138
|
-
* Requirements:
|
|
1139
|
-
*
|
|
1140
|
-
* - Must use HTTPS
|
|
1141
|
-
* - Must return a `200` status code
|
|
1142
|
-
* - `Content-Type` must match the file's MIME type
|
|
1143
|
-
* - Must be publicly accessible (i.e. not a localhost URL)
|
|
1144
|
-
* - Must not redirect
|
|
1145
|
-
* - Must not contain an IP address
|
|
1146
|
-
* - Maximum length: 4096 characters
|
|
1147
|
-
* - Must not contain whitespace
|
|
1148
|
-
* - Must not contain these characters: `>`, `<`, `{`, `}`, `^`, backticks
|
|
1149
|
-
* - Maximum file size: 1000MB (1GB)
|
|
1150
|
-
*/
|
|
1151
|
-
url: string;
|
|
1152
|
-
/**
|
|
1153
|
-
* The MIME type of the video file.
|
|
1154
|
-
*/
|
|
1155
|
-
mimeType: VideoMimeType;
|
|
1156
|
-
/**
|
|
1157
|
-
* The URL of a thumbnail video to display while the video is queued for upload.
|
|
1158
|
-
*
|
|
1159
|
-
* @remarks
|
|
1160
|
-
* Requirements:
|
|
1161
|
-
*
|
|
1162
|
-
* - Must use HTTPS
|
|
1163
|
-
* - Must support [Cross-Origin Resource Sharing](https://www.canva.dev/docs/apps/cross-origin-resource-sharing/)
|
|
1164
|
-
* - Maximum length: 4096 characters
|
|
1165
|
-
* - The dimensions of the thumbnail video must match the video's aspect ratio to prevent the thumbnail from appearing squashed or stretched
|
|
1166
|
-
* - Must not be an AVI file. Although our APIs support uploading AVI videos, Canva can't preview them because of native support of browsers
|
|
1167
|
-
*/
|
|
1168
|
-
thumbnailVideoUrl?: string;
|
|
1169
|
-
/**
|
|
1170
|
-
* The URL of a thumbnail image to use as a fallback if `thumbnailVideoUrl` isn't provided.
|
|
1171
|
-
* This can be an external URL or a data URL.
|
|
1172
|
-
*
|
|
1173
|
-
* @remarks
|
|
1174
|
-
* Requirements for external URLs:
|
|
1175
|
-
*
|
|
1176
|
-
* - Must use HTTPS
|
|
1177
|
-
* - Must support [Cross-Origin Resource Sharing](https://www.canva.dev/docs/apps/cross-origin-resource-sharing/)
|
|
1178
|
-
* - Must be a PNG, JPEG, or SVG file
|
|
1179
|
-
* - Maximum length: 4096 characters
|
|
1180
|
-
*
|
|
1181
|
-
* Requirements for data URLs:
|
|
1182
|
-
*
|
|
1183
|
-
* - Must include `;base64` for base64-encoded data
|
|
1184
|
-
* - Maximum size: 10MB (10 × 1024 × 1024 characters)
|
|
1185
|
-
* - The dimensions of the thumbnail must match the video's aspect ratio to prevent the thumbnail from appearing squashed or stretched
|
|
1186
|
-
*/
|
|
1187
|
-
thumbnailImageUrl: string;
|
|
1188
|
-
/**
|
|
1189
|
-
* A disclosure identifying if the app generated this video using AI.
|
|
1190
|
-
*
|
|
1191
|
-
* @remarks
|
|
1192
|
-
* Helps users make informed decisions about the content they interact with.
|
|
1193
|
-
* See {@link AiDisclosure} for the full definition.
|
|
1194
|
-
*
|
|
1195
|
-
* **App Generated**
|
|
1196
|
-
*
|
|
1197
|
-
* 'app_generated' indicates when the app creates or significantly alters an asset using AI. Includes when
|
|
1198
|
-
* the app requests a third-party service to take similar action on a video using AI.
|
|
1199
|
-
*
|
|
1200
|
-
* Required for the following cases (this list is not exhaustive):
|
|
1201
|
-
* | Case | Reason |
|
|
1202
|
-
* | -- | -- |
|
|
1203
|
-
* | AI generates a new video from scratch | Creates new creative content |
|
|
1204
|
-
* | AI changes the style of the video e.g. makes it cartoon | Significantly alters the style |
|
|
1205
|
-
* | AI adds subtitles that rely on subjective interpretation | Creates new creative content |
|
|
1206
|
-
* | AI expands a video by generating new content to fill the edges | Creates new creative content |
|
|
1207
|
-
* | AI animates an image | Creates new creative content |
|
|
1208
|
-
* | AI fixes defects e.g. blur in a video by generating details | Creates new creative content |
|
|
1209
|
-
* | AI generates a talking head presenter | Creates new creative content |
|
|
1210
|
-
*
|
|
1211
|
-
* **None**
|
|
1212
|
-
*
|
|
1213
|
-
* 'none' indicates when the app doesn't create or significantly alter an asset using AI, or as a part of
|
|
1214
|
-
* a request to third-party hosted content.
|
|
1215
|
-
*
|
|
1216
|
-
* Required for the following cases (this list is not exhaustive):
|
|
1217
|
-
* | Case | Reason |
|
|
1218
|
-
* | -- | -- |
|
|
1219
|
-
* | Asset comes from an asset library | Didn't generate the asset itself |
|
|
1220
|
-
* | AI corrects red eyes | A minor correction |
|
|
1221
|
-
* | AI adjusts brightness and contrast on a video | Doesn't change original meaning by itself |
|
|
1222
|
-
* | AI creates a slow motion effect in a video | Doesn't change original meaning by itself |
|
|
1223
|
-
* | AI adds AI word-by-word transcribed subtitles to a video | Doesn't change original meaning by itself |
|
|
1224
|
-
*/
|
|
1225
|
-
aiDisclosure: AiDisclosure;
|
|
1226
|
-
|
|
1227
|
-
} & AllOrNone<Dimensions>;
|
|
1228
|
-
|
|
1229
|
-
export { }
|