@elementor/editor-notifications 4.0.0-671 → 4.0.0-673

package/dist/index.js

@@ -144,7 +144,11 @@ var PromotionSnackbar = (0, import_react2.forwardRef)((props, ref) => {
       role: "alert",
       action: props.action,
       onClose: () => (0, import_notistack2.closeSnackbar)(props.id),
-      sx: { ml: panelWidth + "px" }
+      sx: {
+        ml: panelWidth + "px",
+        "& .MuiAlert-message": { display: "flex", flexWrap: "nowrap", alignItems: "center" },
+        "& .MuiAlert-content": { whiteSpace: "nowrap" }
+      }
     },
     props.message
   ));

package/dist/index.js.map

@@ -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 } 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\nconst PromotionSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( 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=\"promotion\"\n\t\t\t\ticon={ <CrownFilledIcon /> }\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={ { ml: panelWidth + 'px' } }\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 muiToEuiMapper = {\n\tdefault: DefaultCustomSnackbar,\n\tpromotion: PromotionSnackbar,\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 isPromotion = notification.type === 'promotion';\n\n\t\t\tconst action = isPromotion\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"]}
+{"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 } 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\nconst PromotionSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( 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=\"promotion\"\n\t\t\t\ticon={ <CrownFilledIcon /> }\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 muiToEuiMapper = {\n\tdefault: DefaultCustomSnackbar,\n\tpromotion: PromotionSnackbar,\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 isPromotion = notification.type === 'promotion';\n\n\t\t\tconst action = isPromotion\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

@@ -106,7 +106,11 @@ var PromotionSnackbar = forwardRef((props, ref) => {
       role: "alert",
       action: props.action,
       onClose: () => closeSnackbar2(props.id),
-      sx: { ml: panelWidth + "px" }
+      sx: {
+        ml: panelWidth + "px",
+        "& .MuiAlert-message": { display: "flex", flexWrap: "nowrap", alignItems: "center" },
+        "& .MuiAlert-content": { whiteSpace: "nowrap" }
+      }
     },
     props.message
   ));

package/dist/index.mjs.map

@@ -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 } 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\nconst PromotionSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( 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=\"promotion\"\n\t\t\t\ticon={ <CrownFilledIcon /> }\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={ { ml: panelWidth + 'px' } }\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 muiToEuiMapper = {\n\tdefault: DefaultCustomSnackbar,\n\tpromotion: PromotionSnackbar,\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 isPromotion = notification.type === 'promotion';\n\n\t\t\tconst action = isPromotion\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"]}
+{"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 } 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\nconst PromotionSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( 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=\"promotion\"\n\t\t\t\ticon={ <CrownFilledIcon /> }\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 muiToEuiMapper = {\n\tdefault: DefaultCustomSnackbar,\n\tpromotion: PromotionSnackbar,\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 isPromotion = notification.type === 'promotion';\n\n\t\t\tconst action = isPromotion\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

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-notifications",
   "description": "Notifications manager for the Elementor editor",
-  "version": "4.0.0-671",
+  "version": "4.0.0-673",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,9 +40,9 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-671",
+    "@elementor/editor": "4.0.0-673",
     "@elementor/icons": "^1.68.0",
-    "@elementor/store": "4.0.0-671",
+    "@elementor/store": "4.0.0-673",
     "@elementor/ui": "1.36.17",
     "notistack": "^3.0.2"
   },

package/src/components/notifications.tsx

@@ -44,7 +44,11 @@ const PromotionSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( pr
 				role="alert"
 				action={ props.action }
 				onClose={ () => closeSnackbar( props.id ) }
-				sx={ { ml: panelWidth + 'px' } }
+				sx={ {
+					ml: panelWidth + 'px',
+					'& .MuiAlert-message': { display: 'flex', flexWrap: 'nowrap', alignItems: 'center' },
+					'& .MuiAlert-content': { whiteSpace: 'nowrap' },
+				} }
 			>
 				{ props.message }
 			</Alert>