@elementor/editor-notifications 4.1.0-823 → 4.1.0-824

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.
Files changed (10) hide show
  1. package/dist/index.d.mts +2 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.js +13 -2
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +13 -3
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +3 -3
  8. package/src/components/notifications.tsx +20 -3
  9. package/src/hooks/use-enqueue-notifications.tsx +1 -1
  10. package/src/index.ts +1 -1
package/dist/index.d.mts CHANGED
@@ -18,6 +18,7 @@ type NotificationData = {
18
18
  };
19
19
 
20
20
  declare function notify(notification: NotificationData): void;
21
+ declare function dismissNotification(id: NotificationData['id']): void;
21
22
  declare function NotifyReact(notification: NotificationData): void;
22
23
 
23
- export { type NotificationData, NotifyReact, init, notify };
24
+ export { type NotificationData, NotifyReact, dismissNotification, init, notify };
package/dist/index.d.ts CHANGED
@@ -18,6 +18,7 @@ type NotificationData = {
18
18
  };
19
19
 
20
20
  declare function notify(notification: NotificationData): void;
21
+ declare function dismissNotification(id: NotificationData['id']): void;
21
22
  declare function NotifyReact(notification: NotificationData): void;
22
23
 
23
- export { type NotificationData, NotifyReact, init, notify };
24
+ export { type NotificationData, NotifyReact, dismissNotification, init, notify };
package/dist/index.js CHANGED
@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
31
31
  var index_exports = {};
32
32
  __export(index_exports, {
33
33
  NotifyReact: () => NotifyReact,
34
+ dismissNotification: () => dismissNotification,
34
35
  init: () => init,
35
36
  notify: () => notify
36
37
  });
@@ -96,7 +97,7 @@ var useEnqueueNotification = (notifications) => {
96
97
  (0, import_notistack.closeSnackbar)(notification.id);
97
98
  dispatch(clearAction({ id: notification.id }));
98
99
  };
99
- const useAlertAction = ["promotion", "info"].includes(notification.type);
100
+ const useAlertAction = ["promotion", "info", "success", "error"].includes(notification.type);
100
101
  const action = useAlertAction ? createPromotionAction(notification) : createDefaultAction(notification, dismiss);
101
102
  enqueueSnackbar(notification.message, {
102
103
  variant: notification.type,
@@ -155,10 +156,14 @@ var AlertSnackbar = (0, import_react2.forwardRef)(({ color, icon, ...props }, re
155
156
  });
156
157
  var PromotionSnackbar = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ React2.createElement(AlertSnackbar, { ref, color: "promotion", icon: /* @__PURE__ */ React2.createElement(import_icons.CrownFilledIcon, null), ...props }));
157
158
  var InfoSnackbar = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ React2.createElement(AlertSnackbar, { ref, color: "info", icon: /* @__PURE__ */ React2.createElement(import_icons.InfoCircleFilledIcon, null), ...props }));
159
+ var SuccessSnackbar = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ React2.createElement(AlertSnackbar, { ref, color: "success", icon: /* @__PURE__ */ React2.createElement(import_icons.CircleCheckFilledIcon, null), ...props }));
160
+ var ErrorSnackbar = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ React2.createElement(AlertSnackbar, { ref, color: "error", icon: /* @__PURE__ */ React2.createElement(import_icons.AlertCircleFilled, null), ...props }));
158
161
  var muiToEuiMapper = {
159
162
  default: DefaultCustomSnackbar,
160
163
  promotion: PromotionSnackbar,
161
- info: InfoSnackbar
164
+ info: InfoSnackbar,
165
+ success: SuccessSnackbar,
166
+ error: ErrorSnackbar
162
167
  };
163
168
  var Handler = () => {
164
169
  const notifications = (0, import_store3.__useSelector)((state) => state.notifications);
@@ -181,6 +186,11 @@ function notify(notification) {
181
186
  const store = (0, import_store3.__getStore)();
182
187
  store?.dispatch(notifyAction(notification));
183
188
  }
189
+ function dismissNotification(id) {
190
+ const store = (0, import_store3.__getStore)();
191
+ (0, import_notistack2.closeSnackbar)(id);
192
+ store?.dispatch(clearAction({ id }));
193
+ }
184
194
  function NotifyReact(notification) {
185
195
  const dispatch = (0, import_store3.__useDispatch)();
186
196
  dispatch(notifyAction(notification));
@@ -210,6 +220,7 @@ function init() {
210
220
  // Annotate the CommonJS export names for ESM import in node:
211
221
  0 && (module.exports = {
212
222
  NotifyReact,
223
+ dismissNotification,
213
224
  init,
214
225
  notify
215
226
  });
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/notifications.tsx","../src/hooks/use-enqueue-notifications.tsx","../src/slice.ts","../src/sync/get-editing-panel-width.ts"],"sourcesContent":["export { init } from './init';\n\nexport { type NotificationData } from './types';\nexport { NotifyReact, notify } from './components/notifications';\n","import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport Wrapper from './components/notifications';\nimport { notificationsSlice } from './slice';\n\nexport function init() {\n\tregisterSlice( notificationsSlice );\n\tinjectIntoTop( {\n\t\tid: 'notifications',\n\t\tcomponent: Wrapper,\n\t} );\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { closeSnackbar, type CustomContentProps, SnackbarProvider } from 'notistack';\nimport { CrownFilledIcon, InfoCircleFilledIcon } from '@elementor/icons';\nimport { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\nimport { Alert, SnackbarContent, type SnackbarProps, ThemeProvider } from '@elementor/ui';\n\nimport { useEnqueueNotification } from '../hooks/use-enqueue-notifications';\nimport { notifyAction } from '../slice';\nimport { getEditingPanelWidth } from '../sync/get-editing-panel-width';\nimport { type NotificationData, type Notifications } from '../types';\n\n// 8 seconds\nconst AUTO_HIDE_DURATION = 8000;\n\nconst DefaultCustomSnackbar = forwardRef( ( props: SnackbarProps, ref ) => {\n\tconst filteredProps = getFilteredSnackbarProps( props );\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider palette=\"unstable\">\n\t\t\t<SnackbarContent\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...filteredProps }\n\t\t\t\tsx={ {\n\t\t\t\t\t'&.MuiPaper-root': { minWidth: 'max-content' },\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</ThemeProvider>\n\t);\n} );\n\ninterface AlertSnackbarProps extends CustomContentProps {\n\tcolor: 'promotion' | 'info';\n\ticon: React.ReactElement;\n}\n\nconst AlertSnackbar = forwardRef< HTMLDivElement, AlertSnackbarProps >( ( { color, icon, ...props }, ref ) => {\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider colorScheme=\"light\" palette=\"unstable\">\n\t\t\t<Alert\n\t\t\t\tref={ ref }\n\t\t\t\tvariant=\"standard\"\n\t\t\t\tcolor={ color }\n\t\t\t\ticon={ icon }\n\t\t\t\trole=\"alert\"\n\t\t\t\taction={ props.action }\n\t\t\t\tonClose={ () => closeSnackbar( props.id ) }\n\t\t\t\tsx={ {\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t\t'& .MuiAlert-message': { display: 'flex', flexWrap: 'nowrap', alignItems: 'center' },\n\t\t\t\t\t'& .MuiAlert-content': { whiteSpace: 'nowrap' },\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ props.message }\n\t\t\t</Alert>\n\t\t</ThemeProvider>\n\t);\n} );\n\nconst PromotionSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"promotion\" icon={ <CrownFilledIcon /> } { ...props } />\n) );\n\nconst InfoSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"info\" icon={ <InfoCircleFilledIcon /> } { ...props } />\n) );\n\nconst muiToEuiMapper = {\n\tdefault: DefaultCustomSnackbar,\n\tpromotion: PromotionSnackbar,\n\tinfo: InfoSnackbar,\n};\n\nconst Handler = () => {\n\tconst notifications = useSelector( ( state: { notifications: Notifications } ) => state.notifications );\n\n\tuseEnqueueNotification( notifications );\n\n\treturn null;\n};\n\nconst Wrapper = () => {\n\treturn (\n\t\t<SnackbarProvider\n\t\t\tmaxSnack={ 3 }\n\t\t\tautoHideDuration={ AUTO_HIDE_DURATION }\n\t\t\tanchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }\n\t\t\tComponents={ muiToEuiMapper }\n\t\t>\n\t\t\t<Handler />\n\t\t</SnackbarProvider>\n\t);\n};\n\n/*\n * This function can be used to trigger notifications from anywhere in the code.\n * even if you're running in a JS environment as opposed to a React environment.\n */\nexport function notify( notification: NotificationData ) {\n\tconst store = getStore();\n\n\tstore?.dispatch( notifyAction( notification ) );\n}\n\n/*\n * This function can be used to trigger notifications from within a React component.\n * This is the preferred way to trigger notifications.\n */\nexport function NotifyReact( notification: NotificationData ) {\n\tconst dispatch = useDispatch();\n\tdispatch( notifyAction( notification ) );\n}\n\nfunction getFilteredSnackbarProps( props: SnackbarProps ) {\n\tconst forbiddenProps = [ 'autoHideDuration', 'persist', 'hideIconVariant', 'iconVariant', 'anchorOrigin' ];\n\n\treturn Object.entries( props ).reduce(\n\t\t( filteredProps, [ key, value ] ) => {\n\t\t\tif ( ! forbiddenProps.includes( key ) ) {\n\t\t\t\tfilteredProps[ key ] = value;\n\t\t\t}\n\n\t\t\treturn filteredProps;\n\t\t},\n\t\t{} as Record< string, unknown >\n\t);\n}\n\nexport default Wrapper;\n","import { Fragment, useEffect } from 'react';\nimport * as React from 'react';\nimport { closeSnackbar, useSnackbar, type VariantType } from 'notistack';\nimport { __useDispatch as useDispatch } from '@elementor/store';\nimport { Button, CloseButton } from '@elementor/ui';\n\nimport { clearAction } from '../slice';\nimport type { NotificationData, Notifications } from '../types';\n\nconst AUTO_HIDE_DURATION = 8000;\n\nfunction createDefaultAction( notification: NotificationData, onDismiss: () => void ) {\n\treturn (\n\t\t<Fragment key={ notification.id }>\n\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t) ) }\n\n\t\t\t<CloseButton aria-label=\"close\" color=\"inherit\" onClick={ onDismiss } />\n\t\t</Fragment>\n\t);\n}\n\nfunction createPromotionAction( notification: NotificationData ) {\n\treturn (\n\t\t<Fragment key={ notification.id }>\n\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t) ) }\n\t\t</Fragment>\n\t);\n}\n\nexport const useEnqueueNotification = ( notifications: Notifications ) => {\n\tconst { enqueueSnackbar } = useSnackbar();\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tObject.values( notifications ).forEach( ( notification ) => {\n\t\t\tconst dismiss = () => {\n\t\t\t\tcloseSnackbar( notification.id );\n\t\t\t\tdispatch( clearAction( { id: notification.id } ) );\n\t\t\t};\n\n\t\t\tconst useAlertAction = [ 'promotion', 'info' ].includes( notification.type );\n\n\t\t\tconst action = useAlertAction\n\t\t\t\t? createPromotionAction( notification )\n\t\t\t\t: createDefaultAction( notification, dismiss );\n\n\t\t\tenqueueSnackbar( notification.message, {\n\t\t\t\tvariant: notification.type as VariantType,\n\t\t\t\tkey: notification.id,\n\t\t\t\tonClose: () => dispatch( clearAction( { id: notification.id } ) ),\n\t\t\t\tpreventDuplicate: true,\n\t\t\t\taction,\n\t\t\t\tautoHideDuration: notification.autoHideDuration ?? AUTO_HIDE_DURATION,\n\t\t\t} );\n\t\t} );\n\t}, [ notifications, enqueueSnackbar, dispatch ] );\n};\n","import { __createSlice as createSlice } from '@elementor/store';\n\nimport { type Notifications } from './types';\n\nexport const notificationsSlice = createSlice( {\n\tname: 'notifications',\n\tinitialState: {} as Notifications,\n\treducers: {\n\t\tnotifyAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( ! newState[ action.payload.id ] ) {\n\t\t\t\tnewState[ action.payload.id ] = action.payload;\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t\tclearAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( newState[ action.payload.id ] ) {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n\t\t\t\tdelete newState[ action.payload.id ];\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t},\n} );\n\nexport const { notifyAction, clearAction } = notificationsSlice.actions;\n","export function getEditingPanelWidth() {\n\treturn document.querySelector( '.elementor-panel' )?.clientWidth || 0;\n}\n"],"mappings":"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","names":["import_store","React","import_react","import_notistack","import_store","import_ui","import_store","createSlice","useDispatch","AUTO_HIDE_DURATION","useSelector","getStore","useDispatch","registerSlice"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/notifications.tsx","../src/hooks/use-enqueue-notifications.tsx","../src/slice.ts","../src/sync/get-editing-panel-width.ts"],"sourcesContent":["export { init } from './init';\n\nexport { type NotificationData } from './types';\nexport { dismissNotification, NotifyReact, notify } from './components/notifications';\n","import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport Wrapper from './components/notifications';\nimport { notificationsSlice } from './slice';\n\nexport function init() {\n\tregisterSlice( notificationsSlice );\n\tinjectIntoTop( {\n\t\tid: 'notifications',\n\t\tcomponent: Wrapper,\n\t} );\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { closeSnackbar, type CustomContentProps, SnackbarProvider } from 'notistack';\nimport { AlertCircleFilled, CircleCheckFilledIcon, CrownFilledIcon, InfoCircleFilledIcon } from '@elementor/icons';\nimport { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\nimport { Alert, SnackbarContent, type SnackbarProps, ThemeProvider } from '@elementor/ui';\n\nimport { useEnqueueNotification } from '../hooks/use-enqueue-notifications';\nimport { clearAction, notifyAction } from '../slice';\nimport { getEditingPanelWidth } from '../sync/get-editing-panel-width';\nimport { type NotificationData, type Notifications } from '../types';\n\n// 8 seconds\nconst AUTO_HIDE_DURATION = 8000;\n\nconst DefaultCustomSnackbar = forwardRef( ( props: SnackbarProps, ref ) => {\n\tconst filteredProps = getFilteredSnackbarProps( props );\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider palette=\"unstable\">\n\t\t\t<SnackbarContent\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...filteredProps }\n\t\t\t\tsx={ {\n\t\t\t\t\t'&.MuiPaper-root': { minWidth: 'max-content' },\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</ThemeProvider>\n\t);\n} );\n\ninterface AlertSnackbarProps extends CustomContentProps {\n\tcolor: 'promotion' | 'info' | 'success' | 'error';\n\ticon: React.ReactElement;\n}\n\nconst AlertSnackbar = forwardRef< HTMLDivElement, AlertSnackbarProps >( ( { color, icon, ...props }, ref ) => {\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider colorScheme=\"light\" palette=\"unstable\">\n\t\t\t<Alert\n\t\t\t\tref={ ref }\n\t\t\t\tvariant=\"standard\"\n\t\t\t\tcolor={ color }\n\t\t\t\ticon={ icon }\n\t\t\t\trole=\"alert\"\n\t\t\t\taction={ props.action }\n\t\t\t\tonClose={ () => closeSnackbar( props.id ) }\n\t\t\t\tsx={ {\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t\t'& .MuiAlert-message': { display: 'flex', flexWrap: 'nowrap', alignItems: 'center' },\n\t\t\t\t\t'& .MuiAlert-content': { whiteSpace: 'nowrap' },\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ props.message }\n\t\t\t</Alert>\n\t\t</ThemeProvider>\n\t);\n} );\n\nconst PromotionSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"promotion\" icon={ <CrownFilledIcon /> } { ...props } />\n) );\n\nconst InfoSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"info\" icon={ <InfoCircleFilledIcon /> } { ...props } />\n) );\n\nconst SuccessSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"success\" icon={ <CircleCheckFilledIcon /> } { ...props } />\n) );\n\nconst ErrorSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"error\" icon={ <AlertCircleFilled /> } { ...props } />\n) );\n\nconst muiToEuiMapper = {\n\tdefault: DefaultCustomSnackbar,\n\tpromotion: PromotionSnackbar,\n\tinfo: InfoSnackbar,\n\tsuccess: SuccessSnackbar,\n\terror: ErrorSnackbar,\n};\n\nconst Handler = () => {\n\tconst notifications = useSelector( ( state: { notifications: Notifications } ) => state.notifications );\n\n\tuseEnqueueNotification( notifications );\n\n\treturn null;\n};\n\nconst Wrapper = () => {\n\treturn (\n\t\t<SnackbarProvider\n\t\t\tmaxSnack={ 3 }\n\t\t\tautoHideDuration={ AUTO_HIDE_DURATION }\n\t\t\tanchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }\n\t\t\tComponents={ muiToEuiMapper }\n\t\t>\n\t\t\t<Handler />\n\t\t</SnackbarProvider>\n\t);\n};\n\n/*\n * This function can be used to trigger notifications from anywhere in the code.\n * even if you're running in a JS environment as opposed to a React environment.\n */\nexport function notify( notification: NotificationData ) {\n\tconst store = getStore();\n\n\tstore?.dispatch( notifyAction( notification ) );\n}\n\nexport function dismissNotification( id: NotificationData[ 'id' ] ) {\n\tconst store = getStore();\n\n\tcloseSnackbar( id );\n\tstore?.dispatch( clearAction( { id } ) );\n}\n\n/*\n * This function can be used to trigger notifications from within a React component.\n * This is the preferred way to trigger notifications.\n */\nexport function NotifyReact( notification: NotificationData ) {\n\tconst dispatch = useDispatch();\n\tdispatch( notifyAction( notification ) );\n}\n\nfunction getFilteredSnackbarProps( props: SnackbarProps ) {\n\tconst forbiddenProps = [ 'autoHideDuration', 'persist', 'hideIconVariant', 'iconVariant', 'anchorOrigin' ];\n\n\treturn Object.entries( props ).reduce(\n\t\t( filteredProps, [ key, value ] ) => {\n\t\t\tif ( ! forbiddenProps.includes( key ) ) {\n\t\t\t\tfilteredProps[ key ] = value;\n\t\t\t}\n\n\t\t\treturn filteredProps;\n\t\t},\n\t\t{} as Record< string, unknown >\n\t);\n}\n\nexport default Wrapper;\n","import { Fragment, useEffect } from 'react';\nimport * as React from 'react';\nimport { closeSnackbar, useSnackbar, type VariantType } from 'notistack';\nimport { __useDispatch as useDispatch } from '@elementor/store';\nimport { Button, CloseButton } from '@elementor/ui';\n\nimport { clearAction } from '../slice';\nimport type { NotificationData, Notifications } from '../types';\n\nconst AUTO_HIDE_DURATION = 8000;\n\nfunction createDefaultAction( notification: NotificationData, onDismiss: () => void ) {\n\treturn (\n\t\t<Fragment key={ notification.id }>\n\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t) ) }\n\n\t\t\t<CloseButton aria-label=\"close\" color=\"inherit\" onClick={ onDismiss } />\n\t\t</Fragment>\n\t);\n}\n\nfunction createPromotionAction( notification: NotificationData ) {\n\treturn (\n\t\t<Fragment key={ notification.id }>\n\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t) ) }\n\t\t</Fragment>\n\t);\n}\n\nexport const useEnqueueNotification = ( notifications: Notifications ) => {\n\tconst { enqueueSnackbar } = useSnackbar();\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tObject.values( notifications ).forEach( ( notification ) => {\n\t\t\tconst dismiss = () => {\n\t\t\t\tcloseSnackbar( notification.id );\n\t\t\t\tdispatch( clearAction( { id: notification.id } ) );\n\t\t\t};\n\n\t\t\tconst useAlertAction = [ 'promotion', 'info', 'success', 'error' ].includes( notification.type );\n\n\t\t\tconst action = useAlertAction\n\t\t\t\t? createPromotionAction( notification )\n\t\t\t\t: createDefaultAction( notification, dismiss );\n\n\t\t\tenqueueSnackbar( notification.message, {\n\t\t\t\tvariant: notification.type as VariantType,\n\t\t\t\tkey: notification.id,\n\t\t\t\tonClose: () => dispatch( clearAction( { id: notification.id } ) ),\n\t\t\t\tpreventDuplicate: true,\n\t\t\t\taction,\n\t\t\t\tautoHideDuration: notification.autoHideDuration ?? AUTO_HIDE_DURATION,\n\t\t\t} );\n\t\t} );\n\t}, [ notifications, enqueueSnackbar, dispatch ] );\n};\n","import { __createSlice as createSlice } from '@elementor/store';\n\nimport { type Notifications } from './types';\n\nexport const notificationsSlice = createSlice( {\n\tname: 'notifications',\n\tinitialState: {} as Notifications,\n\treducers: {\n\t\tnotifyAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( ! newState[ action.payload.id ] ) {\n\t\t\t\tnewState[ action.payload.id ] = action.payload;\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t\tclearAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( newState[ action.payload.id ] ) {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n\t\t\t\tdelete newState[ action.payload.id ];\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t},\n} );\n\nexport const { notifyAction, clearAction } = notificationsSlice.actions;\n","export function getEditingPanelWidth() {\n\treturn document.querySelector( '.elementor-panel' )?.clientWidth || 0;\n}\n"],"mappings":"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","names":["import_store","React","import_react","import_notistack","import_store","import_ui","import_store","createSlice","useDispatch","AUTO_HIDE_DURATION","useSelector","getStore","useDispatch","registerSlice"]}
package/dist/index.mjs CHANGED
@@ -6,7 +6,7 @@ import { __registerSlice as registerSlice } from "@elementor/store";
6
6
  import * as React2 from "react";
7
7
  import { forwardRef } from "react";
8
8
  import { closeSnackbar as closeSnackbar2, SnackbarProvider } from "notistack";
9
- import { CrownFilledIcon, InfoCircleFilledIcon } from "@elementor/icons";
9
+ import { AlertCircleFilled, CircleCheckFilledIcon, CrownFilledIcon, InfoCircleFilledIcon } from "@elementor/icons";
10
10
  import { __getStore as getStore, __useDispatch as useDispatch2, __useSelector as useSelector } from "@elementor/store";
11
11
  import { Alert, SnackbarContent, ThemeProvider } from "@elementor/ui";
12
12
 
@@ -58,7 +58,7 @@ var useEnqueueNotification = (notifications) => {
58
58
  closeSnackbar(notification.id);
59
59
  dispatch(clearAction({ id: notification.id }));
60
60
  };
61
- const useAlertAction = ["promotion", "info"].includes(notification.type);
61
+ const useAlertAction = ["promotion", "info", "success", "error"].includes(notification.type);
62
62
  const action = useAlertAction ? createPromotionAction(notification) : createDefaultAction(notification, dismiss);
63
63
  enqueueSnackbar(notification.message, {
64
64
  variant: notification.type,
@@ -117,10 +117,14 @@ var AlertSnackbar = forwardRef(({ color, icon, ...props }, ref) => {
117
117
  });
118
118
  var PromotionSnackbar = forwardRef((props, ref) => /* @__PURE__ */ React2.createElement(AlertSnackbar, { ref, color: "promotion", icon: /* @__PURE__ */ React2.createElement(CrownFilledIcon, null), ...props }));
119
119
  var InfoSnackbar = forwardRef((props, ref) => /* @__PURE__ */ React2.createElement(AlertSnackbar, { ref, color: "info", icon: /* @__PURE__ */ React2.createElement(InfoCircleFilledIcon, null), ...props }));
120
+ var SuccessSnackbar = forwardRef((props, ref) => /* @__PURE__ */ React2.createElement(AlertSnackbar, { ref, color: "success", icon: /* @__PURE__ */ React2.createElement(CircleCheckFilledIcon, null), ...props }));
121
+ var ErrorSnackbar = forwardRef((props, ref) => /* @__PURE__ */ React2.createElement(AlertSnackbar, { ref, color: "error", icon: /* @__PURE__ */ React2.createElement(AlertCircleFilled, null), ...props }));
120
122
  var muiToEuiMapper = {
121
123
  default: DefaultCustomSnackbar,
122
124
  promotion: PromotionSnackbar,
123
- info: InfoSnackbar
125
+ info: InfoSnackbar,
126
+ success: SuccessSnackbar,
127
+ error: ErrorSnackbar
124
128
  };
125
129
  var Handler = () => {
126
130
  const notifications = useSelector((state) => state.notifications);
@@ -143,6 +147,11 @@ function notify(notification) {
143
147
  const store = getStore();
144
148
  store?.dispatch(notifyAction(notification));
145
149
  }
150
+ function dismissNotification(id) {
151
+ const store = getStore();
152
+ closeSnackbar2(id);
153
+ store?.dispatch(clearAction({ id }));
154
+ }
146
155
  function NotifyReact(notification) {
147
156
  const dispatch = useDispatch2();
148
157
  dispatch(notifyAction(notification));
@@ -171,6 +180,7 @@ function init() {
171
180
  }
172
181
  export {
173
182
  NotifyReact,
183
+ dismissNotification,
174
184
  init,
175
185
  notify
176
186
  };
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/init.ts","../src/components/notifications.tsx","../src/hooks/use-enqueue-notifications.tsx","../src/slice.ts","../src/sync/get-editing-panel-width.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport Wrapper from './components/notifications';\nimport { notificationsSlice } from './slice';\n\nexport function init() {\n\tregisterSlice( notificationsSlice );\n\tinjectIntoTop( {\n\t\tid: 'notifications',\n\t\tcomponent: Wrapper,\n\t} );\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { closeSnackbar, type CustomContentProps, SnackbarProvider } from 'notistack';\nimport { CrownFilledIcon, InfoCircleFilledIcon } from '@elementor/icons';\nimport { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\nimport { Alert, SnackbarContent, type SnackbarProps, ThemeProvider } from '@elementor/ui';\n\nimport { useEnqueueNotification } from '../hooks/use-enqueue-notifications';\nimport { notifyAction } from '../slice';\nimport { getEditingPanelWidth } from '../sync/get-editing-panel-width';\nimport { type NotificationData, type Notifications } from '../types';\n\n// 8 seconds\nconst AUTO_HIDE_DURATION = 8000;\n\nconst DefaultCustomSnackbar = forwardRef( ( props: SnackbarProps, ref ) => {\n\tconst filteredProps = getFilteredSnackbarProps( props );\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider palette=\"unstable\">\n\t\t\t<SnackbarContent\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...filteredProps }\n\t\t\t\tsx={ {\n\t\t\t\t\t'&.MuiPaper-root': { minWidth: 'max-content' },\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</ThemeProvider>\n\t);\n} );\n\ninterface AlertSnackbarProps extends CustomContentProps {\n\tcolor: 'promotion' | 'info';\n\ticon: React.ReactElement;\n}\n\nconst AlertSnackbar = forwardRef< HTMLDivElement, AlertSnackbarProps >( ( { color, icon, ...props }, ref ) => {\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider colorScheme=\"light\" palette=\"unstable\">\n\t\t\t<Alert\n\t\t\t\tref={ ref }\n\t\t\t\tvariant=\"standard\"\n\t\t\t\tcolor={ color }\n\t\t\t\ticon={ icon }\n\t\t\t\trole=\"alert\"\n\t\t\t\taction={ props.action }\n\t\t\t\tonClose={ () => closeSnackbar( props.id ) }\n\t\t\t\tsx={ {\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t\t'& .MuiAlert-message': { display: 'flex', flexWrap: 'nowrap', alignItems: 'center' },\n\t\t\t\t\t'& .MuiAlert-content': { whiteSpace: 'nowrap' },\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ props.message }\n\t\t\t</Alert>\n\t\t</ThemeProvider>\n\t);\n} );\n\nconst PromotionSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"promotion\" icon={ <CrownFilledIcon /> } { ...props } />\n) );\n\nconst InfoSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"info\" icon={ <InfoCircleFilledIcon /> } { ...props } />\n) );\n\nconst muiToEuiMapper = {\n\tdefault: DefaultCustomSnackbar,\n\tpromotion: PromotionSnackbar,\n\tinfo: InfoSnackbar,\n};\n\nconst Handler = () => {\n\tconst notifications = useSelector( ( state: { notifications: Notifications } ) => state.notifications );\n\n\tuseEnqueueNotification( notifications );\n\n\treturn null;\n};\n\nconst Wrapper = () => {\n\treturn (\n\t\t<SnackbarProvider\n\t\t\tmaxSnack={ 3 }\n\t\t\tautoHideDuration={ AUTO_HIDE_DURATION }\n\t\t\tanchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }\n\t\t\tComponents={ muiToEuiMapper }\n\t\t>\n\t\t\t<Handler />\n\t\t</SnackbarProvider>\n\t);\n};\n\n/*\n * This function can be used to trigger notifications from anywhere in the code.\n * even if you're running in a JS environment as opposed to a React environment.\n */\nexport function notify( notification: NotificationData ) {\n\tconst store = getStore();\n\n\tstore?.dispatch( notifyAction( notification ) );\n}\n\n/*\n * This function can be used to trigger notifications from within a React component.\n * This is the preferred way to trigger notifications.\n */\nexport function NotifyReact( notification: NotificationData ) {\n\tconst dispatch = useDispatch();\n\tdispatch( notifyAction( notification ) );\n}\n\nfunction getFilteredSnackbarProps( props: SnackbarProps ) {\n\tconst forbiddenProps = [ 'autoHideDuration', 'persist', 'hideIconVariant', 'iconVariant', 'anchorOrigin' ];\n\n\treturn Object.entries( props ).reduce(\n\t\t( filteredProps, [ key, value ] ) => {\n\t\t\tif ( ! forbiddenProps.includes( key ) ) {\n\t\t\t\tfilteredProps[ key ] = value;\n\t\t\t}\n\n\t\t\treturn filteredProps;\n\t\t},\n\t\t{} as Record< string, unknown >\n\t);\n}\n\nexport default Wrapper;\n","import { Fragment, useEffect } from 'react';\nimport * as React from 'react';\nimport { closeSnackbar, useSnackbar, type VariantType } from 'notistack';\nimport { __useDispatch as useDispatch } from '@elementor/store';\nimport { Button, CloseButton } from '@elementor/ui';\n\nimport { clearAction } from '../slice';\nimport type { NotificationData, Notifications } from '../types';\n\nconst AUTO_HIDE_DURATION = 8000;\n\nfunction createDefaultAction( notification: NotificationData, onDismiss: () => void ) {\n\treturn (\n\t\t<Fragment key={ notification.id }>\n\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t) ) }\n\n\t\t\t<CloseButton aria-label=\"close\" color=\"inherit\" onClick={ onDismiss } />\n\t\t</Fragment>\n\t);\n}\n\nfunction createPromotionAction( notification: NotificationData ) {\n\treturn (\n\t\t<Fragment key={ notification.id }>\n\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t) ) }\n\t\t</Fragment>\n\t);\n}\n\nexport const useEnqueueNotification = ( notifications: Notifications ) => {\n\tconst { enqueueSnackbar } = useSnackbar();\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tObject.values( notifications ).forEach( ( notification ) => {\n\t\t\tconst dismiss = () => {\n\t\t\t\tcloseSnackbar( notification.id );\n\t\t\t\tdispatch( clearAction( { id: notification.id } ) );\n\t\t\t};\n\n\t\t\tconst useAlertAction = [ 'promotion', 'info' ].includes( notification.type );\n\n\t\t\tconst action = useAlertAction\n\t\t\t\t? createPromotionAction( notification )\n\t\t\t\t: createDefaultAction( notification, dismiss );\n\n\t\t\tenqueueSnackbar( notification.message, {\n\t\t\t\tvariant: notification.type as VariantType,\n\t\t\t\tkey: notification.id,\n\t\t\t\tonClose: () => dispatch( clearAction( { id: notification.id } ) ),\n\t\t\t\tpreventDuplicate: true,\n\t\t\t\taction,\n\t\t\t\tautoHideDuration: notification.autoHideDuration ?? AUTO_HIDE_DURATION,\n\t\t\t} );\n\t\t} );\n\t}, [ notifications, enqueueSnackbar, dispatch ] );\n};\n","import { __createSlice as createSlice } from '@elementor/store';\n\nimport { type Notifications } from './types';\n\nexport const notificationsSlice = createSlice( {\n\tname: 'notifications',\n\tinitialState: {} as Notifications,\n\treducers: {\n\t\tnotifyAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( ! newState[ action.payload.id ] ) {\n\t\t\t\tnewState[ action.payload.id ] = action.payload;\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t\tclearAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( newState[ action.payload.id ] ) {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n\t\t\t\tdelete newState[ action.payload.id ];\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t},\n} );\n\nexport const { notifyAction, clearAction } = notificationsSlice.actions;\n","export function getEditingPanelWidth() {\n\treturn document.querySelector( '.elementor-panel' )?.clientWidth || 0;\n}\n"],"mappings":"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","names":["React","closeSnackbar","useDispatch","AUTO_HIDE_DURATION","closeSnackbar","useDispatch"]}
1
+ {"version":3,"sources":["../src/init.ts","../src/components/notifications.tsx","../src/hooks/use-enqueue-notifications.tsx","../src/slice.ts","../src/sync/get-editing-panel-width.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport Wrapper from './components/notifications';\nimport { notificationsSlice } from './slice';\n\nexport function init() {\n\tregisterSlice( notificationsSlice );\n\tinjectIntoTop( {\n\t\tid: 'notifications',\n\t\tcomponent: Wrapper,\n\t} );\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { closeSnackbar, type CustomContentProps, SnackbarProvider } from 'notistack';\nimport { AlertCircleFilled, CircleCheckFilledIcon, CrownFilledIcon, InfoCircleFilledIcon } from '@elementor/icons';\nimport { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\nimport { Alert, SnackbarContent, type SnackbarProps, ThemeProvider } from '@elementor/ui';\n\nimport { useEnqueueNotification } from '../hooks/use-enqueue-notifications';\nimport { clearAction, notifyAction } from '../slice';\nimport { getEditingPanelWidth } from '../sync/get-editing-panel-width';\nimport { type NotificationData, type Notifications } from '../types';\n\n// 8 seconds\nconst AUTO_HIDE_DURATION = 8000;\n\nconst DefaultCustomSnackbar = forwardRef( ( props: SnackbarProps, ref ) => {\n\tconst filteredProps = getFilteredSnackbarProps( props );\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider palette=\"unstable\">\n\t\t\t<SnackbarContent\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...filteredProps }\n\t\t\t\tsx={ {\n\t\t\t\t\t'&.MuiPaper-root': { minWidth: 'max-content' },\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</ThemeProvider>\n\t);\n} );\n\ninterface AlertSnackbarProps extends CustomContentProps {\n\tcolor: 'promotion' | 'info' | 'success' | 'error';\n\ticon: React.ReactElement;\n}\n\nconst AlertSnackbar = forwardRef< HTMLDivElement, AlertSnackbarProps >( ( { color, icon, ...props }, ref ) => {\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider colorScheme=\"light\" palette=\"unstable\">\n\t\t\t<Alert\n\t\t\t\tref={ ref }\n\t\t\t\tvariant=\"standard\"\n\t\t\t\tcolor={ color }\n\t\t\t\ticon={ icon }\n\t\t\t\trole=\"alert\"\n\t\t\t\taction={ props.action }\n\t\t\t\tonClose={ () => closeSnackbar( props.id ) }\n\t\t\t\tsx={ {\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t\t'& .MuiAlert-message': { display: 'flex', flexWrap: 'nowrap', alignItems: 'center' },\n\t\t\t\t\t'& .MuiAlert-content': { whiteSpace: 'nowrap' },\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ props.message }\n\t\t\t</Alert>\n\t\t</ThemeProvider>\n\t);\n} );\n\nconst PromotionSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"promotion\" icon={ <CrownFilledIcon /> } { ...props } />\n) );\n\nconst InfoSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"info\" icon={ <InfoCircleFilledIcon /> } { ...props } />\n) );\n\nconst SuccessSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"success\" icon={ <CircleCheckFilledIcon /> } { ...props } />\n) );\n\nconst ErrorSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"error\" icon={ <AlertCircleFilled /> } { ...props } />\n) );\n\nconst muiToEuiMapper = {\n\tdefault: DefaultCustomSnackbar,\n\tpromotion: PromotionSnackbar,\n\tinfo: InfoSnackbar,\n\tsuccess: SuccessSnackbar,\n\terror: ErrorSnackbar,\n};\n\nconst Handler = () => {\n\tconst notifications = useSelector( ( state: { notifications: Notifications } ) => state.notifications );\n\n\tuseEnqueueNotification( notifications );\n\n\treturn null;\n};\n\nconst Wrapper = () => {\n\treturn (\n\t\t<SnackbarProvider\n\t\t\tmaxSnack={ 3 }\n\t\t\tautoHideDuration={ AUTO_HIDE_DURATION }\n\t\t\tanchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }\n\t\t\tComponents={ muiToEuiMapper }\n\t\t>\n\t\t\t<Handler />\n\t\t</SnackbarProvider>\n\t);\n};\n\n/*\n * This function can be used to trigger notifications from anywhere in the code.\n * even if you're running in a JS environment as opposed to a React environment.\n */\nexport function notify( notification: NotificationData ) {\n\tconst store = getStore();\n\n\tstore?.dispatch( notifyAction( notification ) );\n}\n\nexport function dismissNotification( id: NotificationData[ 'id' ] ) {\n\tconst store = getStore();\n\n\tcloseSnackbar( id );\n\tstore?.dispatch( clearAction( { id } ) );\n}\n\n/*\n * This function can be used to trigger notifications from within a React component.\n * This is the preferred way to trigger notifications.\n */\nexport function NotifyReact( notification: NotificationData ) {\n\tconst dispatch = useDispatch();\n\tdispatch( notifyAction( notification ) );\n}\n\nfunction getFilteredSnackbarProps( props: SnackbarProps ) {\n\tconst forbiddenProps = [ 'autoHideDuration', 'persist', 'hideIconVariant', 'iconVariant', 'anchorOrigin' ];\n\n\treturn Object.entries( props ).reduce(\n\t\t( filteredProps, [ key, value ] ) => {\n\t\t\tif ( ! forbiddenProps.includes( key ) ) {\n\t\t\t\tfilteredProps[ key ] = value;\n\t\t\t}\n\n\t\t\treturn filteredProps;\n\t\t},\n\t\t{} as Record< string, unknown >\n\t);\n}\n\nexport default Wrapper;\n","import { Fragment, useEffect } from 'react';\nimport * as React from 'react';\nimport { closeSnackbar, useSnackbar, type VariantType } from 'notistack';\nimport { __useDispatch as useDispatch } from '@elementor/store';\nimport { Button, CloseButton } from '@elementor/ui';\n\nimport { clearAction } from '../slice';\nimport type { NotificationData, Notifications } from '../types';\n\nconst AUTO_HIDE_DURATION = 8000;\n\nfunction createDefaultAction( notification: NotificationData, onDismiss: () => void ) {\n\treturn (\n\t\t<Fragment key={ notification.id }>\n\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t) ) }\n\n\t\t\t<CloseButton aria-label=\"close\" color=\"inherit\" onClick={ onDismiss } />\n\t\t</Fragment>\n\t);\n}\n\nfunction createPromotionAction( notification: NotificationData ) {\n\treturn (\n\t\t<Fragment key={ notification.id }>\n\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t) ) }\n\t\t</Fragment>\n\t);\n}\n\nexport const useEnqueueNotification = ( notifications: Notifications ) => {\n\tconst { enqueueSnackbar } = useSnackbar();\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tObject.values( notifications ).forEach( ( notification ) => {\n\t\t\tconst dismiss = () => {\n\t\t\t\tcloseSnackbar( notification.id );\n\t\t\t\tdispatch( clearAction( { id: notification.id } ) );\n\t\t\t};\n\n\t\t\tconst useAlertAction = [ 'promotion', 'info', 'success', 'error' ].includes( notification.type );\n\n\t\t\tconst action = useAlertAction\n\t\t\t\t? createPromotionAction( notification )\n\t\t\t\t: createDefaultAction( notification, dismiss );\n\n\t\t\tenqueueSnackbar( notification.message, {\n\t\t\t\tvariant: notification.type as VariantType,\n\t\t\t\tkey: notification.id,\n\t\t\t\tonClose: () => dispatch( clearAction( { id: notification.id } ) ),\n\t\t\t\tpreventDuplicate: true,\n\t\t\t\taction,\n\t\t\t\tautoHideDuration: notification.autoHideDuration ?? AUTO_HIDE_DURATION,\n\t\t\t} );\n\t\t} );\n\t}, [ notifications, enqueueSnackbar, dispatch ] );\n};\n","import { __createSlice as createSlice } from '@elementor/store';\n\nimport { type Notifications } from './types';\n\nexport const notificationsSlice = createSlice( {\n\tname: 'notifications',\n\tinitialState: {} as Notifications,\n\treducers: {\n\t\tnotifyAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( ! newState[ action.payload.id ] ) {\n\t\t\t\tnewState[ action.payload.id ] = action.payload;\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t\tclearAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( newState[ action.payload.id ] ) {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n\t\t\t\tdelete newState[ action.payload.id ];\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t},\n} );\n\nexport const { notifyAction, clearAction } = notificationsSlice.actions;\n","export function getEditingPanelWidth() {\n\treturn document.querySelector( '.elementor-panel' )?.clientWidth || 0;\n}\n"],"mappings":"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","names":["React","closeSnackbar","useDispatch","AUTO_HIDE_DURATION","closeSnackbar","useDispatch"]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elementor/editor-notifications",
3
3
  "description": "Notifications manager for the Elementor editor",
4
- "version": "4.1.0-823",
4
+ "version": "4.1.0-824",
5
5
  "private": false,
6
6
  "author": "Elementor Team",
7
7
  "homepage": "https://elementor.com/",
@@ -40,9 +40,9 @@
40
40
  "dev": "tsup --config=../../tsup.dev.ts"
41
41
  },
42
42
  "dependencies": {
43
- "@elementor/editor": "4.1.0-823",
43
+ "@elementor/editor": "4.1.0-824",
44
44
  "@elementor/icons": "^1.68.0",
45
- "@elementor/store": "4.1.0-823",
45
+ "@elementor/store": "4.1.0-824",
46
46
  "@elementor/ui": "1.37.5",
47
47
  "notistack": "^3.0.2"
48
48
  },
package/src/components/notifications.tsx CHANGED
@@ -1,12 +1,12 @@
1
1
  import * as React from 'react';
2
2
  import { forwardRef } from 'react';
3
3
  import { closeSnackbar, type CustomContentProps, SnackbarProvider } from 'notistack';
4
- import { CrownFilledIcon, InfoCircleFilledIcon } from '@elementor/icons';
4
+ import { AlertCircleFilled, CircleCheckFilledIcon, CrownFilledIcon, InfoCircleFilledIcon } from '@elementor/icons';
5
5
  import { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';
6
6
  import { Alert, SnackbarContent, type SnackbarProps, ThemeProvider } from '@elementor/ui';
7
7
 
8
8
  import { useEnqueueNotification } from '../hooks/use-enqueue-notifications';
9
- import { notifyAction } from '../slice';
9
+ import { clearAction, notifyAction } from '../slice';
10
10
  import { getEditingPanelWidth } from '../sync/get-editing-panel-width';
11
11
  import { type NotificationData, type Notifications } from '../types';
12
12
 
@@ -32,7 +32,7 @@ const DefaultCustomSnackbar = forwardRef( ( props: SnackbarProps, ref ) => {
32
32
  } );
33
33
 
34
34
  interface AlertSnackbarProps extends CustomContentProps {
35
- color: 'promotion' | 'info';
35
+ color: 'promotion' | 'info' | 'success' | 'error';
36
36
  icon: React.ReactElement;
37
37
  }
38
38
 
@@ -69,10 +69,20 @@ const InfoSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props,
69
69
  <AlertSnackbar ref={ ref } color="info" icon={ <InfoCircleFilledIcon /> } { ...props } />
70
70
  ) );
71
71
 
72
+ const SuccessSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (
73
+ <AlertSnackbar ref={ ref } color="success" icon={ <CircleCheckFilledIcon /> } { ...props } />
74
+ ) );
75
+
76
+ const ErrorSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (
77
+ <AlertSnackbar ref={ ref } color="error" icon={ <AlertCircleFilled /> } { ...props } />
78
+ ) );
79
+
72
80
  const muiToEuiMapper = {
73
81
  default: DefaultCustomSnackbar,
74
82
  promotion: PromotionSnackbar,
75
83
  info: InfoSnackbar,
84
+ success: SuccessSnackbar,
85
+ error: ErrorSnackbar,
76
86
  };
77
87
 
78
88
  const Handler = () => {
@@ -106,6 +116,13 @@ export function notify( notification: NotificationData ) {
106
116
  store?.dispatch( notifyAction( notification ) );
107
117
  }
108
118
 
119
+ export function dismissNotification( id: NotificationData[ 'id' ] ) {
120
+ const store = getStore();
121
+
122
+ closeSnackbar( id );
123
+ store?.dispatch( clearAction( { id } ) );
124
+ }
125
+
109
126
  /*
110
127
  * This function can be used to trigger notifications from within a React component.
111
128
  * This is the preferred way to trigger notifications.
package/src/hooks/use-enqueue-notifications.tsx CHANGED
@@ -42,7 +42,7 @@ export const useEnqueueNotification = ( notifications: Notifications ) => {
42
42
  dispatch( clearAction( { id: notification.id } ) );
43
43
  };
44
44
 
45
- const useAlertAction = [ 'promotion', 'info' ].includes( notification.type );
45
+ const useAlertAction = [ 'promotion', 'info', 'success', 'error' ].includes( notification.type );
46
46
 
47
47
  const action = useAlertAction
48
48
  ? createPromotionAction( notification )
package/src/index.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export { init } from './init';
2
2
 
3
3
  export { type NotificationData } from './types';
4
- export { NotifyReact, notify } from './components/notifications';
4
+ export { dismissNotification, NotifyReact, notify } from './components/notifications';