浏览代码

feat: update toast api to account for duration and closable (#5427)

* feat: update toast api to account for duration and closable

* fix

* update snaps

* update docs

* male toast nullable

* fix snaps

* remove clearToast from App.tsx and replace clearToast prop in Toast comp with onClose
Aakansha Doshi 3 年之前
父节点
当前提交
a7153d9d1d

+ 1 - 1
src/actions/actionAddToLibrary.ts

@@ -42,7 +42,7 @@ export const actionAddToLibrary = register({
           commitToHistory: false,
           commitToHistory: false,
           appState: {
           appState: {
             ...appState,
             ...appState,
-            toastMessage: t("toast.addedToLibrary"),
+            toast: { message: t("toast.addedToLibrary") },
           },
           },
         };
         };
       })
       })

+ 10 - 8
src/actions/actionClipboard.tsx

@@ -107,14 +107,16 @@ export const actionCopyAsPng = register({
       return {
       return {
         appState: {
         appState: {
           ...appState,
           ...appState,
-          toastMessage: t("toast.copyToClipboardAsPng", {
-            exportSelection: selectedElements.length
-              ? t("toast.selection")
-              : t("toast.canvas"),
-            exportColorScheme: appState.exportWithDarkMode
-              ? t("buttons.darkMode")
-              : t("buttons.lightMode"),
-          }),
+          toast: {
+            message: t("toast.copyToClipboardAsPng", {
+              exportSelection: selectedElements.length
+                ? t("toast.selection")
+                : t("toast.canvas"),
+              exportColorScheme: appState.exportWithDarkMode
+                ? t("buttons.darkMode")
+                : t("buttons.lightMode"),
+            }),
+          },
         },
         },
         commitToHistory: false,
         commitToHistory: false,
       };
       };

+ 9 - 7
src/actions/actionExport.tsx

@@ -144,13 +144,15 @@ export const actionSaveToActiveFile = register({
         appState: {
         appState: {
           ...appState,
           ...appState,
           fileHandle,
           fileHandle,
-          toastMessage: fileHandleExists
-            ? fileHandle?.name
-              ? t("toast.fileSavedToFilename").replace(
-                  "{filename}",
-                  `"${fileHandle.name}"`,
-                )
-              : t("toast.fileSaved")
+          toast: fileHandleExists
+            ? {
+                message: fileHandle?.name
+                  ? t("toast.fileSavedToFilename").replace(
+                      "{filename}",
+                      `"${fileHandle.name}"`,
+                    )
+                  : t("toast.fileSaved"),
+              }
             : null,
             : null,
         },
         },
       };
       };

+ 1 - 1
src/actions/actionStyles.ts

@@ -36,7 +36,7 @@ export const actionCopyStyles = register({
     return {
     return {
       appState: {
       appState: {
         ...appState,
         ...appState,
-        toastMessage: t("toast.copyStyles"),
+        toast: { message: t("toast.copyStyles") },
       },
       },
       commitToHistory: false,
       commitToHistory: false,
     };
     };

+ 2 - 2
src/appState.ts

@@ -81,7 +81,7 @@ export const getDefaultAppState = (): Omit<
     showStats: false,
     showStats: false,
     startBoundElement: null,
     startBoundElement: null,
     suggestedBindings: [],
     suggestedBindings: [],
-    toastMessage: null,
+    toast: null,
     viewBackgroundColor: oc.white,
     viewBackgroundColor: oc.white,
     zenModeEnabled: false,
     zenModeEnabled: false,
     zoom: {
     zoom: {
@@ -173,7 +173,7 @@ const APP_STATE_STORAGE_CONF = (<
   showStats: { browser: true, export: false, server: false },
   showStats: { browser: true, export: false, server: false },
   startBoundElement: { browser: false, export: false, server: false },
   startBoundElement: { browser: false, export: false, server: false },
   suggestedBindings: { browser: false, export: false, server: false },
   suggestedBindings: { browser: false, export: false, server: false },
-  toastMessage: { browser: false, export: false, server: false },
+  toast: { browser: false, export: false, server: false },
   viewBackgroundColor: { browser: true, export: true, server: true },
   viewBackgroundColor: { browser: true, export: true, server: true },
   width: { browser: false, export: false, server: false },
   width: { browser: false, export: false, server: false },
   zenModeEnabled: { browser: true, export: false, server: false },
   zenModeEnabled: { browser: true, export: false, server: false },

+ 21 - 19
src/components/App.tsx

@@ -380,7 +380,7 @@ class App extends React.Component<AppProps, AppState> {
         getAppState: () => this.state,
         getAppState: () => this.state,
         getFiles: () => this.files,
         getFiles: () => this.files,
         refresh: this.refresh,
         refresh: this.refresh,
-        setToastMessage: this.setToastMessage,
+        setToast: this.setToast,
         id: this.id,
         id: this.id,
         setActiveTool: this.setActiveTool,
         setActiveTool: this.setActiveTool,
         setCursor: this.setCursor,
         setCursor: this.setCursor,
@@ -549,16 +549,12 @@ class App extends React.Component<AppProps, AppState> {
                 onLinkOpen={this.props.onLinkOpen}
                 onLinkOpen={this.props.onLinkOpen}
               />
               />
             )}
             )}
-            {this.state.toastMessage !== null && (
+            {this.state.toast !== null && (
               <Toast
               <Toast
-                message={this.state.toastMessage}
-                clearToast={this.clearToast}
-                duration={
-                  this.state.toastMessage === t("alerts.browserZoom")
-                    ? Infinity
-                    : undefined
-                }
-                closable={this.state.toastMessage === t("alerts.browserZoom")}
+                message={this.state.toast.message}
+                onClose={() => this.setToast(null)}
+                duration={this.state.toast.duration}
+                closable={this.state.toast.closable}
               />
               />
             )}
             )}
             <main>{this.renderCanvas()}</main>
             <main>{this.renderCanvas()}</main>
@@ -772,7 +768,7 @@ class App extends React.Component<AppProps, AppState> {
           ? { ...scene.appState.activeTool, type: "selection" }
           ? { ...scene.appState.activeTool, type: "selection" }
           : scene.appState.activeTool,
           : scene.appState.activeTool,
       isLoading: false,
       isLoading: false,
-      toastMessage: this.state.toastMessage || null,
+      toast: this.state.toast,
     };
     };
     if (initialData?.scrollToContent) {
     if (initialData?.scrollToContent) {
       scene.appState = {
       scene.appState = {
@@ -931,9 +927,13 @@ class App extends React.Component<AppProps, AppState> {
         (window.outerWidth - scrollBarWidth) / window.innerWidth;
         (window.outerWidth - scrollBarWidth) / window.innerWidth;
       const isBrowserZoomed = widthRatio < 0.75 || widthRatio > 1.1;
       const isBrowserZoomed = widthRatio < 0.75 || widthRatio > 1.1;
       if (isBrowserZoomed) {
       if (isBrowserZoomed) {
-        this.setToastMessage(t("alerts.browserZoom"));
+        this.setToast({
+          message: t("alerts.browserZoom"),
+          closable: true,
+          duration: Infinity,
+        });
       } else {
       } else {
-        this.clearToast();
+        this.setToast(null);
       }
       }
     }
     }
   };
   };
@@ -1643,12 +1643,14 @@ class App extends React.Component<AppProps, AppState> {
     });
     });
   };
   };
 
 
-  clearToast = () => {
-    this.setState({ toastMessage: null });
-  };
-
-  setToastMessage = (toastMessage: string) => {
-    this.setState({ toastMessage });
+  setToast = (
+    toast: {
+      message: string;
+      closable?: boolean;
+      duration?: number;
+    } | null,
+  ) => {
+    this.setState({ toast });
   };
   };
 
 
   restoreFileFromShare = async () => {
   restoreFileFromShare = async () => {

+ 5 - 5
src/components/Toast.tsx

@@ -7,13 +7,13 @@ const DEFAULT_TOAST_TIMEOUT = 5000;
 
 
 export const Toast = ({
 export const Toast = ({
   message,
   message,
-  clearToast,
+  onClose,
   closable = false,
   closable = false,
   // To prevent autoclose, pass duration as Infinity
   // To prevent autoclose, pass duration as Infinity
   duration = DEFAULT_TOAST_TIMEOUT,
   duration = DEFAULT_TOAST_TIMEOUT,
 }: {
 }: {
   message: string;
   message: string;
-  clearToast: () => void;
+  onClose: () => void;
   closable?: boolean;
   closable?: boolean;
   duration?: number;
   duration?: number;
 }) => {
 }) => {
@@ -23,8 +23,8 @@ export const Toast = ({
     if (!shouldAutoClose) {
     if (!shouldAutoClose) {
       return;
       return;
     }
     }
-    timerRef.current = window.setTimeout(() => clearToast(), duration);
-  }, [clearToast, duration, shouldAutoClose]);
+    timerRef.current = window.setTimeout(() => onClose(), duration);
+  }, [onClose, duration, shouldAutoClose]);
 
 
   useEffect(() => {
   useEffect(() => {
     if (!shouldAutoClose) {
     if (!shouldAutoClose) {
@@ -50,7 +50,7 @@ export const Toast = ({
           icon={close}
           icon={close}
           aria-label="close"
           aria-label="close"
           type="icon"
           type="icon"
-          onClick={clearToast}
+          onClick={onClose}
           className="close"
           className="close"
         />
         />
       )}
       )}

+ 2 - 2
src/excalidraw-app/CustomStats.tsx

@@ -19,7 +19,7 @@ const getStorageSizes = debounce((cb: (sizes: StorageSizes) => void) => {
 }, STORAGE_SIZE_TIMEOUT);
 }, STORAGE_SIZE_TIMEOUT);
 
 
 type Props = {
 type Props = {
-  setToastMessage: (message: string) => void;
+  setToast: (message: string) => void;
 };
 };
 const CustomStats = (props: Props) => {
 const CustomStats = (props: Props) => {
   const [storageSizes, setStorageSizes] = useState<StorageSizes>({
   const [storageSizes, setStorageSizes] = useState<StorageSizes>({
@@ -68,7 +68,7 @@ const CustomStats = (props: Props) => {
           onClick={async () => {
           onClick={async () => {
             try {
             try {
               await copyTextToSystemClipboard(getVersion());
               await copyTextToSystemClipboard(getVersion());
-              props.setToastMessage(t("toast.copyToClipboard"));
+              props.setToast(t("toast.copyToClipboard"));
             } catch {}
             } catch {}
           }}
           }}
           title={t("stats.versionCopy")}
           title={t("stats.versionCopy")}

+ 1 - 1
src/excalidraw-app/index.tsx

@@ -658,7 +658,7 @@ const ExcalidrawWrapper = () => {
   const renderCustomStats = () => {
   const renderCustomStats = () => {
     return (
     return (
       <CustomStats
       <CustomStats
-        setToastMessage={(message) => excalidrawAPI!.setToastMessage(message)}
+        setToast={(message) => excalidrawAPI!.setToast({ message })}
       />
       />
     );
     );
   };
   };

+ 8 - 0
src/packages/excalidraw/CHANGELOG.md

@@ -11,6 +11,14 @@ The change should be grouped under one of the below section and must contain PR
 Please add the latest change on the top under the correct section.
 Please add the latest change on the top under the correct section.
 -->
 -->
 
 
+## Unreleased
+
+### Excalidraw API
+
+#### Breaking Changes
+
+- `setToastMessage` API is now renamed to `setToast` API and the function signature is also updated [#5427](https://github.com/excalidraw/excalidraw/pull/5427). You can also pass `duration` and `closable` attributes along with `message`.
+
 ## 0.12.0 (2022-07-07)
 ## 0.12.0 (2022-07-07)
 
 
 ### Excalidraw API
 ### Excalidraw API

+ 24 - 2
src/packages/excalidraw/README.md

@@ -475,7 +475,7 @@ You might want to use this when you want to load excalidraw with some initial el
 You can pass a `ref` when you want to access some excalidraw APIs. We expose the below APIs:
 You can pass a `ref` when you want to access some excalidraw APIs. We expose the below APIs:
 
 
 | API | signature | Usage |
 | API | signature | Usage |
-| --- | --- | --- |
+| --- | --- | --- | --- |
 | ready | `boolean` | This is set to true once Excalidraw is rendered |
 | ready | `boolean` | This is set to true once Excalidraw is rendered |
 | readyPromise | [resolvablePromise](https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317) | This promise will be resolved with the api once excalidraw has rendered. This will be helpful when you want do some action on the host app once this promise resolves. For this to work you will have to pass ref as shown [here](#readyPromise) |
 | readyPromise | [resolvablePromise](https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317) | This promise will be resolved with the api once excalidraw has rendered. This will be helpful when you want do some action on the host app once this promise resolves. For this to work you will have to pass ref as shown [here](#readyPromise) |
 | [updateScene](#updateScene) | <code>(scene: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L207">sceneData</a>) => void </code> | updates the scene with the sceneData |
 | [updateScene](#updateScene) | <code>(scene: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L207">sceneData</a>) => void </code> | updates the scene with the sceneData |
@@ -489,7 +489,7 @@ You can pass a `ref` when you want to access some excalidraw APIs. We expose the
 | scrollToContent | <code> (target?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L106">ExcalidrawElement</a> &#124; <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L106">ExcalidrawElement</a>[]) => void </code> | Scroll the nearest element out of the elements supplied to the center. Defaults to the elements on the scene. |
 | scrollToContent | <code> (target?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L106">ExcalidrawElement</a> &#124; <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L106">ExcalidrawElement</a>[]) => void </code> | Scroll the nearest element out of the elements supplied to the center. Defaults to the elements on the scene. |
 | refresh | `() => void` | Updates the offsets for the Excalidraw component so that the coordinates are computed correctly (for example the cursor position). You don't have to call this when the position is changed on page scroll or when the excalidraw container resizes (we handle that ourselves). For any other cases if the position of excalidraw is updated (example due to scroll on parent container and not page scroll) you should call this API. |
 | refresh | `() => void` | Updates the offsets for the Excalidraw component so that the coordinates are computed correctly (for example the cursor position). You don't have to call this when the position is changed on page scroll or when the excalidraw container resizes (we handle that ourselves). For any other cases if the position of excalidraw is updated (example due to scroll on parent container and not page scroll) you should call this API. |
 | [importLibrary](#importlibrary) | `(url: string, token?: string) => void` | Imports library from given URL |
 | [importLibrary](#importlibrary) | `(url: string, token?: string) => void` | Imports library from given URL |
-| setToastMessage | `(message: string) => void` | This API can be used to show the toast with custom message. |
+| [setToast](#setToast) | `({message: string, closable?:boolean, duration?:number} | null) => void` | This API can be used to show the toast with custom message. |
 | [id](#id) | string | Unique ID for the excalidraw component. |
 | [id](#id) | string | Unique ID for the excalidraw component. |
 | [getFiles](#getFiles) | <code>() => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64">files</a> </code> | This API can be used to get the files present in the scene. It may contain files that aren't referenced by any element, so if you're persisting the files to a storage, you should compare them against stored elements. |
 | [getFiles](#getFiles) | <code>() => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64">files</a> </code> | This API can be used to get the files present in the scene. It may contain files that aren't referenced by any element, so if you're persisting the files to a storage, you should compare them against stored elements. |
 | [setActiveTool](#setActiveTool) | <code>(tool: { type: typeof <a href="https://github.com/excalidraw/excalidraw/blob/master/src/shapes.tsx#L4">SHAPES</a>[number]["value"] &#124; "eraser" } &#124; { type: "custom"; customType: string }) => void</code> | This API can be used to set the active tool |
 | [setActiveTool](#setActiveTool) | <code>(tool: { type: typeof <a href="https://github.com/excalidraw/excalidraw/blob/master/src/shapes.tsx#L4">SHAPES</a>[number]["value"] &#124; "eraser" } &#124; { type: "custom"; customType: string }) => void</code> | This API can be used to set the active tool |
@@ -705,6 +705,28 @@ useEffect(() => {
 
 
 Try out the [Demo](#Demo) to see it in action.
 Try out the [Demo](#Demo) to see it in action.
 
 
+#### `setToast`
+
+This API can be used to show the toast with custom message.
+
+<pre>
+({ message: string,
+ closable?:boolean,
+ duration?:number } | null) => void
+</pre>
+
+| Attribute | type | Description |
+| --- | --- | --- |
+| message | string | The message to be shown on the toast. |
+| closable | boolean | Indicates whether to show the closable button on toast to dismiss the toast. |
+| duration | number | Determines the duration after which the toast should auto dismiss. To prevent autodimiss you can pass `Infinity`. |
+
+To dismiss an existing toast you can simple pass `null`
+
+```js
+setToast(null);
+```
+
 #### `setActiveTool`
 #### `setActiveTool`
 
 
 This API has the below signature. It sets the `tool` passed in param as the active tool.
 This API has the below signature. It sets the `tool` passed in param as the active tool.

+ 23 - 17
src/tests/__snapshots__/contextmenu.test.tsx.snap

@@ -77,7 +77,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -248,7 +248,9 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": "Added to library",
+  "toast": Object {
+    "message": "Added to library",
+  },
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -426,7 +428,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -765,7 +767,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -1104,7 +1106,9 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": "Copied styles.",
+  "toast": Object {
+    "message": "Copied styles.",
+  },
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -1280,7 +1284,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -1496,7 +1500,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -1775,7 +1779,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -2126,7 +2130,9 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": "Copied styles.",
+  "toast": Object {
+    "message": "Copied styles.",
+  },
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -2927,7 +2933,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -3266,7 +3272,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -3609,7 +3615,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -4030,7 +4036,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -4311,7 +4317,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -4661,7 +4667,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -4770,7 +4776,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,
@@ -4855,7 +4861,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 200,
   "width": 200,

+ 52 - 52
src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -85,7 +85,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -602,7 +602,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -1101,7 +1101,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -1964,7 +1964,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -2191,7 +2191,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -2693,7 +2693,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -2967,7 +2967,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -3148,7 +3148,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -3635,7 +3635,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -3896,7 +3896,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -4120,7 +4120,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -4384,7 +4384,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -4661,7 +4661,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -5107,7 +5107,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -5407,7 +5407,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -5730,7 +5730,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -5933,7 +5933,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -6111,7 +6111,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -6620,7 +6620,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -6962,7 +6962,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -9207,7 +9207,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -9607,7 +9607,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -9882,7 +9882,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -10121,7 +10121,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -10423,7 +10423,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -10601,7 +10601,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -10779,7 +10779,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -10957,7 +10957,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -11165,7 +11165,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -11373,7 +11373,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -11599,7 +11599,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -11807,7 +11807,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -11985,7 +11985,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -12193,7 +12193,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -12371,7 +12371,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -12549,7 +12549,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -12786,7 +12786,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -13574,7 +13574,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -13847,7 +13847,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -13954,7 +13954,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -14066,7 +14066,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -14253,7 +14253,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -14596,7 +14596,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -14825,7 +14825,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -15725,7 +15725,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -15836,7 +15836,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -16703,7 +16703,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -17149,7 +17149,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -17422,7 +17422,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -17531,7 +17531,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -18074,7 +18074,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,
@@ -18181,7 +18181,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "width": 1024,
   "width": 1024,

+ 1 - 1
src/tests/packages/__snapshots__/utils.test.ts.snap

@@ -70,7 +70,7 @@ Object {
   "startBoundElement": null,
   "startBoundElement": null,
   "suggestedBindings": Array [],
   "suggestedBindings": Array [],
   "theme": "light",
   "theme": "light",
-  "toastMessage": null,
+  "toast": null,
   "viewBackgroundColor": "#ffffff",
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
   "viewModeEnabled": false,
   "zenModeEnabled": false,
   "zenModeEnabled": false,

+ 2 - 2
src/types.ts

@@ -145,7 +145,7 @@ export type AppState = {
   previousSelectedElementIds: { [id: string]: boolean };
   previousSelectedElementIds: { [id: string]: boolean };
   shouldCacheIgnoreZoom: boolean;
   shouldCacheIgnoreZoom: boolean;
   showHelpDialog: boolean;
   showHelpDialog: boolean;
-  toastMessage: string | null;
+  toast: { message: string; closable?: boolean; duration?: number } | null;
   zenModeEnabled: boolean;
   zenModeEnabled: boolean;
   theme: Theme;
   theme: Theme;
   gridSize: number | null;
   gridSize: number | null;
@@ -467,7 +467,7 @@ export type ExcalidrawImperativeAPI = {
   getAppState: () => InstanceType<typeof App>["state"];
   getAppState: () => InstanceType<typeof App>["state"];
   getFiles: () => InstanceType<typeof App>["files"];
   getFiles: () => InstanceType<typeof App>["files"];
   refresh: InstanceType<typeof App>["refresh"];
   refresh: InstanceType<typeof App>["refresh"];
-  setToastMessage: InstanceType<typeof App>["setToastMessage"];
+  setToast: InstanceType<typeof App>["setToast"];
   addFiles: (data: BinaryFileData[]) => void;
   addFiles: (data: BinaryFileData[]) => void;
   readyPromise: ResolvablePromise<ExcalidrawImperativeAPI>;
   readyPromise: ResolvablePromise<ExcalidrawImperativeAPI>;
   ready: true;
   ready: true;