@snack-uikit/toaster 0.11.14 → 0.11.15-preview-b2ccf94a.0

package/README.md

@@ -83,6 +83,7 @@ toaster.upload.dismiss(uploadToastId);
 | containerId | `Id` | - |  |
 | displayCloseAllButton | `boolean` | - |  |
 | type | enum ToasterType: `"system-event"`, `"user-action"`, `"upload"` | system-event |  |
+| draggable | `boolean` | - |  |
 ## ToastUpload
 ### Props
 | name | type | default value | description |

package/dist/cjs/components/ToasterContainer/ToasterContainer.d.ts

@@ -7,5 +7,6 @@ export type ToasterContainerProps = {
     containerId?: RtToastContainerProps['containerId'];
     displayCloseAllButton?: boolean;
     type?: ToasterType;
+    draggable?: boolean;
 };
-export declare function ToasterContainer({ position, limit, containerId, displayCloseAllButton, type, }: ToasterContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToasterContainer({ position, limit, containerId, displayCloseAllButton, type, draggable, }: ToasterContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ToasterContainer/ToasterContainer.js

@@ -14,6 +14,7 @@ require("./style.css");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const react_toastify_1 = require("react-toastify");
+const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../constants");
 const testIds_1 = require("../../testIds");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
@@ -23,7 +24,8 @@ function ToasterContainer(_ref) {
     limit = 5,
     containerId,
     displayCloseAllButton,
-    type = constants_1.TOASTER_TYPE.SystemEvent
+    type = constants_1.TOASTER_TYPE.SystemEvent,
+    draggable = false
   } = _ref;
   const [notificationCounter, setNotificationCounter] = (0, react_1.useState)(0);
   const [isCloseAllButtonHidden, setIsCloseAllButtonHidden] = (0, react_1.useState)(false);
@@ -31,7 +33,7 @@ function ToasterContainer(_ref) {
     react_toastify_1.toast.dismiss();
     setIsCloseAllButtonHidden(true);
   };
-  (0, react_1.useEffect)(() => {
+  (0, utils_1.useLayoutEffect)(() => {
     const unsubscribe = react_toastify_1.toast.onChange(_ref2 => {
       let {
         status,
@@ -56,7 +58,7 @@ function ToasterContainer(_ref) {
       closeOnClick: false,
       autoClose: false,
       closeButton: false,
-      draggable: false,
+      draggable: draggable,
       className: (0, classnames_1.default)('osThemeSnack', styles_module_scss_1.default[position], {
         [styles_module_scss_1.default.containerWithCloseAllButton]: hasCloseAllButton,
         'osThemeSnack__toast-container__system-event': type === constants_1.TOASTER_TYPE.SystemEvent,

package/dist/cjs/helpers.js

@@ -55,7 +55,10 @@ function getToastOptions(_ref2) {
       (_a = toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.onClose) === null || _a === void 0 ? void 0 : _a.call(toastOptions, data === null || data === void 0 ? void 0 : data.id);
     },
     autoClose: (toasterProps === null || toasterProps === void 0 ? void 0 : toasterProps.loading) ? false : constants_1.AUTO_CLOSE_TIME[type],
-    containerId: containerId || `${constants_1.TOASTER_CONTAINER_PREFIX}${type}`
+    containerId: containerId || `${constants_1.TOASTER_CONTAINER_PREFIX}${type}`,
+    draggable: toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.draggable,
+    draggableDirection: type === constants_1.TOASTER_TYPE.UserAction ? 'y' : 'x',
+    draggablePercent: 20
   };
 }
 function getToastComponent(_ref3) {
@@ -150,7 +153,8 @@ const userAction = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -162,7 +166,8 @@ const userAction = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -174,7 +179,8 @@ const userAction = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -186,7 +192,8 @@ const userAction = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -196,7 +203,10 @@ const userAction = {
         type: constants_1.TOASTER_TYPE.UserAction,
         toasterProps: Object.assign(Object.assign({}, options), {
           appearance: 'success'
-        })
+        }),
+        toastOptions: {
+          draggable: options.draggable
+        }
       });
     },
     neutral(id, options) {
@@ -204,7 +214,10 @@ const userAction = {
         type: constants_1.TOASTER_TYPE.UserAction,
         toasterProps: Object.assign(Object.assign({}, options), {
           appearance: 'neutral'
-        })
+        }),
+        toastOptions: {
+          draggable: options.draggable
+        }
       });
     },
     warning(id, options) {
@@ -212,7 +225,10 @@ const userAction = {
         type: constants_1.TOASTER_TYPE.UserAction,
         toasterProps: Object.assign(Object.assign({}, options), {
           appearance: 'warning'
-        })
+        }),
+        toastOptions: {
+          draggable: options.draggable
+        }
       });
     },
     error(id, options) {
@@ -220,7 +236,10 @@ const userAction = {
         type: constants_1.TOASTER_TYPE.UserAction,
         toasterProps: Object.assign(Object.assign({}, options), {
           appearance: 'error'
-        })
+        }),
+        toastOptions: {
+          draggable: options.draggable
+        }
       });
     }
   },
@@ -237,7 +256,8 @@ const systemEvent = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -249,7 +269,8 @@ const systemEvent = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -261,7 +282,8 @@ const systemEvent = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -273,7 +295,8 @@ const systemEvent = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -285,7 +308,8 @@ const systemEvent = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -295,7 +319,10 @@ const systemEvent = {
         type: constants_1.TOASTER_TYPE.SystemEvent,
         toasterProps: Object.assign(Object.assign({}, options), {
           appearance: 'success'
-        })
+        }),
+        toastOptions: {
+          draggable: options.draggable
+        }
       });
     },
     neutral(id, options) {

package/dist/cjs/types.d.ts

@@ -8,6 +8,7 @@ export type ToastOptions = {
     id?: ToasterId;
     autoClose?: RtToastOptions['autoClose'];
     onClose?(id?: ToasterId): void;
+    draggable?: boolean;
 };
 export type ToasterType = ValueOf<typeof TOASTER_TYPE>;
 export type ToasterPropsMap = {
@@ -34,8 +35,8 @@ export type UpdateToast = <T extends keyof ToasterPropsMap>(id: string | number,
     toastOptions?: ToastOptions;
     containerId?: ToasterContainerProps['containerId'];
 }) => void;
-export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
-export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
+export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose' | 'draggable'>;
+export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose' | 'draggable'>;
 export type UploadOptions = ToastUploadProps & Pick<ToastOptions, 'id' | 'onClose'>;
 export type Toaster = {
     userAction: {

package/dist/esm/components/ToasterContainer/ToasterContainer.d.ts

@@ -7,5 +7,6 @@ export type ToasterContainerProps = {
     containerId?: RtToastContainerProps['containerId'];
     displayCloseAllButton?: boolean;
     type?: ToasterType;
+    draggable?: boolean;
 };
-export declare function ToasterContainer({ position, limit, containerId, displayCloseAllButton, type, }: ToasterContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToasterContainer({ position, limit, containerId, displayCloseAllButton, type, draggable, }: ToasterContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ToasterContainer/ToasterContainer.js

@@ -1,19 +1,20 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './style.css';
 import cn from 'classnames';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { toast, ToastContainer as RtToastContainer, } from 'react-toastify';
+import { useLayoutEffect } from '@snack-uikit/utils';
 import { TOASTER_CONTAINER_PREFIX, TOASTER_TYPE } from '../../constants';
 import { TOAST_SYSTEM_EVENT_TEST_IDS } from '../../testIds';
 import styles from './styles.module.css';
-export function ToasterContainer({ position = 'bottom-right', limit = 5, containerId, displayCloseAllButton, type = TOASTER_TYPE.SystemEvent, }) {
+export function ToasterContainer({ position = 'bottom-right', limit = 5, containerId, displayCloseAllButton, type = TOASTER_TYPE.SystemEvent, draggable = false, }) {
     const [notificationCounter, setNotificationCounter] = useState(0);
     const [isCloseAllButtonHidden, setIsCloseAllButtonHidden] = useState(false);
     const closeAll = () => {
         toast.dismiss();
         setIsCloseAllButtonHidden(true);
     };
-    useEffect(() => {
+    useLayoutEffect(() => {
         const unsubscribe = toast.onChange(({ status, containerId }) => {
             if (containerId === `${TOASTER_CONTAINER_PREFIX}${TOASTER_TYPE.SystemEvent}`) {
                 if (status === 'added') {
@@ -28,7 +29,7 @@ export function ToasterContainer({ position = 'bottom-right', limit = 5, contain
         return unsubscribe;
     }, []);
     const hasCloseAllButton = displayCloseAllButton && notificationCounter > 2 && !isCloseAllButtonHidden;
-    return (_jsxs(_Fragment, { children: [_jsx(RtToastContainer, { hideProgressBar: true, closeOnClick: false, autoClose: false, closeButton: false, draggable: false, className: cn('osThemeSnack', styles[position], {
+    return (_jsxs(_Fragment, { children: [_jsx(RtToastContainer, { hideProgressBar: true, closeOnClick: false, autoClose: false, closeButton: false, draggable: draggable, className: cn('osThemeSnack', styles[position], {
                     [styles.containerWithCloseAllButton]: hasCloseAllButton,
                     'osThemeSnack__toast-container__system-event': type === TOASTER_TYPE.SystemEvent,
                     'osThemeSnack__toast-container__user-action': type === TOASTER_TYPE.UserAction,

package/dist/esm/helpers.js

@@ -40,6 +40,9 @@ function getToastOptions({ type, toastOptions, containerId, toasterProps, }) {
         }),
         autoClose: (toasterProps === null || toasterProps === void 0 ? void 0 : toasterProps.loading) ? false : AUTO_CLOSE_TIME[type],
         containerId: containerId || `${TOASTER_CONTAINER_PREFIX}${type}`,
+        draggable: toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.draggable,
+        draggableDirection: type === TOASTER_TYPE.UserAction ? 'y' : 'x',
+        draggablePercent: 20,
     };
 }
 function getToastComponent({ type, toasterProps, }) {
@@ -100,6 +103,7 @@ const userAction = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -110,6 +114,7 @@ const userAction = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -120,6 +125,7 @@ const userAction = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -130,6 +136,7 @@ const userAction = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -138,24 +145,36 @@ const userAction = {
             updateToast(id, {
                 type: TOASTER_TYPE.UserAction,
                 toasterProps: Object.assign(Object.assign({}, options), { appearance: 'success' }),
+                toastOptions: {
+                    draggable: options.draggable,
+                },
             });
         },
         neutral(id, options) {
             updateToast(id, {
                 type: TOASTER_TYPE.UserAction,
                 toasterProps: Object.assign(Object.assign({}, options), { appearance: 'neutral' }),
+                toastOptions: {
+                    draggable: options.draggable,
+                },
             });
         },
         warning(id, options) {
             updateToast(id, {
                 type: TOASTER_TYPE.UserAction,
                 toasterProps: Object.assign(Object.assign({}, options), { appearance: 'warning' }),
+                toastOptions: {
+                    draggable: options.draggable,
+                },
             });
         },
         error(id, options) {
             updateToast(id, {
                 type: TOASTER_TYPE.UserAction,
                 toasterProps: Object.assign(Object.assign({}, options), { appearance: 'error' }),
+                toastOptions: {
+                    draggable: options.draggable,
+                },
             });
         },
     },
@@ -171,6 +190,7 @@ const systemEvent = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -181,6 +201,7 @@ const systemEvent = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -191,6 +212,7 @@ const systemEvent = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -201,6 +223,7 @@ const systemEvent = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -211,6 +234,7 @@ const systemEvent = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -219,6 +243,9 @@ const systemEvent = {
             return updateToast(id, {
                 type: TOASTER_TYPE.SystemEvent,
                 toasterProps: Object.assign(Object.assign({}, options), { appearance: 'success' }),
+                toastOptions: {
+                    draggable: options.draggable,
+                },
             });
         },
         neutral(id, options) {

package/dist/esm/types.d.ts

@@ -8,6 +8,7 @@ export type ToastOptions = {
     id?: ToasterId;
     autoClose?: RtToastOptions['autoClose'];
     onClose?(id?: ToasterId): void;
+    draggable?: boolean;
 };
 export type ToasterType = ValueOf<typeof TOASTER_TYPE>;
 export type ToasterPropsMap = {
@@ -34,8 +35,8 @@ export type UpdateToast = <T extends keyof ToasterPropsMap>(id: string | number,
     toastOptions?: ToastOptions;
     containerId?: ToasterContainerProps['containerId'];
 }) => void;
-export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
-export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
+export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose' | 'draggable'>;
+export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose' | 'draggable'>;
 export type UploadOptions = ToastUploadProps & Pick<ToastOptions, 'id' | 'onClose'>;
 export type Toaster = {
     userAction: {

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toaster",
-  "version": "0.11.14",
+  "version": "0.11.15-preview-b2ccf94a.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -49,5 +49,5 @@
     "react-toastify": "10.0.5",
     "uncontrollable": "9.0.0"
   },
-  "gitHead": "6f4dbbdf91fdd49fc8a49ecf0be7a2e7e56ae73b"
+  "gitHead": "a5a48e75b322989a38a9248a85af63051c16641e"
 }

package/src/components/ToasterContainer/ToasterContainer.tsx

@@ -1,7 +1,7 @@
 import './style.css';
 
 import cn from 'classnames';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import {
   toast,
   ToastContainer as RtToastContainer,
@@ -10,6 +10,8 @@ import {
   ToastPosition,
 } from 'react-toastify';
 
+import { useLayoutEffect } from '@snack-uikit/utils';
+
 import { TOASTER_CONTAINER_PREFIX, TOASTER_TYPE } from '../../constants';
 import { TOAST_SYSTEM_EVENT_TEST_IDS } from '../../testIds';
 import { ToasterType } from '../../types';
@@ -21,6 +23,7 @@ export type ToasterContainerProps = {
   containerId?: RtToastContainerProps['containerId'];
   displayCloseAllButton?: boolean;
   type?: ToasterType;
+  draggable?: boolean;
 };
 
 export function ToasterContainer({
@@ -29,6 +32,7 @@ export function ToasterContainer({
   containerId,
   displayCloseAllButton,
   type = TOASTER_TYPE.SystemEvent,
+  draggable = false,
 }: ToasterContainerProps) {
   const [notificationCounter, setNotificationCounter] = useState(0);
   const [isCloseAllButtonHidden, setIsCloseAllButtonHidden] = useState(false);
@@ -37,7 +41,7 @@ export function ToasterContainer({
     setIsCloseAllButtonHidden(true);
   };
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const unsubscribe = toast.onChange(({ status, containerId }: ToastItem) => {
       if (containerId === `${TOASTER_CONTAINER_PREFIX}${TOASTER_TYPE.SystemEvent}`) {
         if (status === 'added') {
@@ -62,7 +66,7 @@ export function ToasterContainer({
         closeOnClick={false}
         autoClose={false}
         closeButton={false}
-        draggable={false}
+        draggable={draggable}
         className={cn('osThemeSnack', styles[position], {
           [styles.containerWithCloseAllButton]: hasCloseAllButton,
           'osThemeSnack__toast-container__system-event': type === TOASTER_TYPE.SystemEvent,

package/src/helpers.tsx

@@ -85,6 +85,9 @@ function getToastOptions<T extends keyof ToasterPropsMap>({
     }) as RtToastOptions['onClose'],
     autoClose: toasterProps?.loading ? false : AUTO_CLOSE_TIME[type],
     containerId: containerId || `${TOASTER_CONTAINER_PREFIX}${type}`,
+    draggable: toastOptions?.draggable,
+    draggableDirection: type === TOASTER_TYPE.UserAction ? 'y' : 'x',
+    draggablePercent: 20,
   };
 }
 
@@ -172,6 +175,7 @@ const userAction = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -183,6 +187,7 @@ const userAction = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -194,6 +199,7 @@ const userAction = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -205,6 +211,7 @@ const userAction = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -214,6 +221,9 @@ const userAction = {
       updateToast(id, {
         type: TOASTER_TYPE.UserAction,
         toasterProps: { ...options, appearance: 'success' },
+        toastOptions: {
+          draggable: options.draggable,
+        },
       });
     },
 
@@ -221,6 +231,9 @@ const userAction = {
       updateToast(id, {
         type: TOASTER_TYPE.UserAction,
         toasterProps: { ...options, appearance: 'neutral' },
+        toastOptions: {
+          draggable: options.draggable,
+        },
       });
     },
 
@@ -228,6 +241,9 @@ const userAction = {
       updateToast(id, {
         type: TOASTER_TYPE.UserAction,
         toasterProps: { ...options, appearance: 'warning' },
+        toastOptions: {
+          draggable: options.draggable,
+        },
       });
     },
 
@@ -235,6 +251,9 @@ const userAction = {
       updateToast(id, {
         type: TOASTER_TYPE.UserAction,
         toasterProps: { ...options, appearance: 'error' },
+        toastOptions: {
+          draggable: options.draggable,
+        },
       });
     },
   },
@@ -252,6 +271,7 @@ const systemEvent = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -263,6 +283,7 @@ const systemEvent = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -274,6 +295,7 @@ const systemEvent = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -285,6 +307,7 @@ const systemEvent = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -296,6 +319,7 @@ const systemEvent = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -305,6 +329,9 @@ const systemEvent = {
       return updateToast(id, {
         type: TOASTER_TYPE.SystemEvent,
         toasterProps: { ...options, appearance: 'success' },
+        toastOptions: {
+          draggable: options.draggable,
+        },
       });
     },
 

package/src/types.ts

@@ -12,6 +12,7 @@ export type ToastOptions = {
   id?: ToasterId;
   autoClose?: RtToastOptions['autoClose'];
   onClose?(id?: ToasterId): void;
+  draggable?: boolean;
 };
 
 export type ToasterType = ValueOf<typeof TOASTER_TYPE>;
@@ -48,8 +49,10 @@ export type UpdateToast = <T extends keyof ToasterPropsMap>(
   },
 ) => void;
 
-export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
-export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
+export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> &
+  Pick<ToastOptions, 'id' | 'onClose' | 'draggable'>;
+export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> &
+  Pick<ToastOptions, 'id' | 'onClose' | 'draggable'>;
 export type UploadOptions = ToastUploadProps & Pick<ToastOptions, 'id' | 'onClose'>;
 
 export type Toaster = {