@canva/design 2.3.0 → 2.4.0

package/index.d.ts

@@ -87,6 +87,10 @@ export declare type AppElementChangeHandler<A extends AppElementData> = (
          * The version number of the app.
          */
         version: number;
+        /**
+         * Function to update the app element data.
+         */
+        update: (opts: AppElementOptions<A>) => Promise<void>;
       }
     | undefined,
 ) => void;
@@ -97,13 +101,18 @@ export declare type AppElementChangeHandler<A extends AppElementData> = (
  */
 export declare interface AppElementClient<A extends AppElementData> {
   /**
+   * @deprecated This type has been superseded, use `addElement` or `registerOnElementChange` instead.
    * If an app element is selected, the element's data is overwritten and the element is re-rendered.
    * Otherwise, the provided data is used to create a new app element.
    * @param appElementData - The data to attach to the app element. Existing data will be overwritten.
    * @param placement - The position, dimensions, and rotation of the app element.
    */
   addOrUpdateElement(appElementData: A, placement?: Placement): Promise<void>;
-
+  /**
+   * Adds a new app element to the design.
+   * @param opts - The data and placement of the app element.
+   */
+  addElement(opts: AppElementOptions<A>): Promise<void>;
   /**
    * A callback that runs when:
    *
@@ -133,6 +142,22 @@ export declare type AppElementClientConfiguration<A extends AppElementData> = {
  */
 export declare type AppElementData = Record<string, Value>;
 
+/**
+ * @public
+ * Used to add or update an app element to the design.
+ * The update function is provided in the AppElementChangeHandler callback (registerOnElementChange).
+ */
+export declare type AppElementOptions<A extends AppElementData> = {
+  /**
+   * The data to attach to the app element.
+   */
+  data: A;
+  /**
+   * The position, dimensions, and rotation of the app element.
+   */
+  placement?: Placement;
+};
+
 /**
  * @public
  * A callback function that renders an app element based on the data it receives.
@@ -720,7 +745,7 @@ export declare type Fill = {
    * The hex code must include all six characters and be prefixed with a `#` symbol.
    *
    * @example
-   * " #ff0099"
+   * "#ff0099"
    */
   color?: string;
   /**

package/lib/cjs/sdk/design/index.js

@@ -17,4 +17,4 @@ function _export_star(from, to) {
     return from;
 }
 var _window___canva___sdkRegistration, _window___canva__;
-(_window___canva__ = window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.3.0', 'ga');
+(_window___canva__ = window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.4.0', 'ga');

package/lib/cjs/sdk/design/public.js

@@ -9,53 +9,53 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    selection: function() {
-        return selection;
-    },
-    overlay: function() {
-        return overlay;
-    },
-    addPage: function() {
-        return addPage;
-    },
-    setCurrentPageBackground: function() {
-        return setCurrentPageBackground;
-    },
-    getDefaultPageDimensions: function() {
-        return getDefaultPageDimensions;
+    addAudioTrack: function() {
+        return addAudioTrack;
     },
-    requestExport: function() {
-        return requestExport;
+    addElementAtCursor: function() {
+        return addElementAtCursor;
     },
-    ui: function() {
-        return ui;
+    addElementAtPoint: function() {
+        return addElementAtPoint;
     },
     addNativeElement: function() {
         return addNativeElement;
     },
-    addElementAtPoint: function() {
-        return addElementAtPoint;
+    addPage: function() {
+        return addPage;
     },
-    addElementAtCursor: function() {
-        return addElementAtCursor;
+    createRichtextRange: function() {
+        return createRichtextRange;
     },
-    addAudioTrack: function() {
-        return addAudioTrack;
+    editContent: function() {
+        return editContent;
     },
     getCurrentPageContext: function() {
         return getCurrentPageContext;
     },
-    initAppElement: function() {
-        return initAppElement;
+    getDefaultPageDimensions: function() {
+        return getDefaultPageDimensions;
     },
     getDesignToken: function() {
         return getDesignToken;
     },
-    createRichtextRange: function() {
-        return createRichtextRange;
+    initAppElement: function() {
+        return initAppElement;
     },
-    editContent: function() {
-        return editContent;
+    overlay: function() {
+        return overlay;
+    },
+    requestExport: function() {
+        return requestExport;
+    },
+    selection: function() {
+        return selection;
+    },
+    setCurrentPageBackground: function() {
+        return setCurrentPageBackground;
+    },
+    ui: function() {
+        return ui;
     }
 });
 const { canva_sdk } = window;

package/lib/cjs/sdk/utils/canva_sdk.js

@@ -9,12 +9,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    getCanvaSdk: function() {
-        return getCanvaSdk;
-    },
     assertIsTestCanvaSdk: function() {
         return assertIsTestCanvaSdk;
     },
+    getCanvaSdk: function() {
+        return getCanvaSdk;
+    },
     injectFakeAPIClients: function() {
         return injectFakeAPIClients;
     }

package/lib/esm/sdk/design/index.js

@@ -1,3 +1,3 @@
 var _window___canva___sdkRegistration, _window___canva__;
 export * from './public';
-(_window___canva__ = window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.3.0', 'ga');
+(_window___canva__ = window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.4.0', 'ga');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/design",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "The Canva Apps SDK design library",
   "author": "Canva Pty Ltd.",
   "license": "SEE LICENSE IN LICENSE.md FILE",