@elementor/editor-notifications 4.3.0-999 → 4.4.0-1065

package/dist/index.js

@@ -111,6 +111,12 @@ var useEnqueueNotification = (notifications) => {
   }, [notifications, enqueueSnackbar, dispatch]);
 };
 
+// src/sync/get-app-bar-height.ts
+var EDITOR_APP_BAR_WRAPPER_ID = "elementor-editor-wrapper-v2";
+function getAppBarHeight() {
+  return document.getElementById(EDITOR_APP_BAR_WRAPPER_ID)?.getBoundingClientRect().height ?? 0;
+}
+
 // src/sync/get-editing-panel-width.ts
 function getEditingPanelWidth() {
   return document.querySelector(".elementor-panel")?.clientWidth || 0;
@@ -121,6 +127,7 @@ var AUTO_HIDE_DURATION2 = 8e3;
 var DefaultCustomSnackbar = (0, import_react2.forwardRef)((props, ref) => {
   const filteredProps = getFilteredSnackbarProps(props);
   const panelWidth = getEditingPanelWidth();
+  const appBarHeight = getAppBarHeight();
   return /* @__PURE__ */ React2.createElement(import_ui2.ThemeProvider, { palette: "unstable" }, /* @__PURE__ */ React2.createElement(
     import_ui2.SnackbarContent,
     {
@@ -128,13 +135,15 @@ var DefaultCustomSnackbar = (0, import_react2.forwardRef)((props, ref) => {
       ...filteredProps,
       sx: {
         "&.MuiPaper-root": { minWidth: "max-content" },
-        ml: panelWidth + "px"
+        ml: panelWidth + "px",
+        mt: `-${appBarHeight}px`
       }
     }
   ));
 });
 var AlertSnackbar = (0, import_react2.forwardRef)(({ color, icon, ...props }, ref) => {
   const panelWidth = getEditingPanelWidth();
+  const appBarHeight = getAppBarHeight();
   return /* @__PURE__ */ React2.createElement(import_ui2.ThemeProvider, { colorScheme: "light", palette: "unstable" }, /* @__PURE__ */ React2.createElement(
     import_ui2.Alert,
     {
@@ -147,6 +156,7 @@ var AlertSnackbar = (0, import_react2.forwardRef)(({ color, icon, ...props }, re
       onClose: () => (0, import_notistack2.closeSnackbar)(props.id),
       sx: {
         ml: panelWidth + "px",
+        mt: `-${appBarHeight}px`,
         "& .MuiAlert-message": { display: "flex", flexWrap: "nowrap", alignItems: "center" },
         "& .MuiAlert-content": { whiteSpace: "nowrap" }
       }
@@ -178,7 +188,8 @@ var Wrapper = () => {
       autoHideDuration: AUTO_HIDE_DURATION2,
       disableWindowBlurListener: true,
       anchorOrigin: { horizontal: "center", vertical: "bottom" },
-      Components: muiToEuiMapper
+      Components: muiToEuiMapper,
+      domRoot: document.body
     },
     /* @__PURE__ */ React2.createElement(Handler, null)
   );

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 { 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\tdisableWindowBlurListener\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAA8B;AAC9B,IAAAA,gBAAiD;;;ACDjD,IAAAC,SAAuB;AACvB,IAAAC,gBAA2B;AAC3B,IAAAC,oBAAyE;AACzE,mBAAgG;AAChG,IAAAC,gBAAmG;AACnG,IAAAC,aAA0E;;;ACL1E,mBAAoC;AACpC,YAAuB;AACvB,uBAA6D;AAC7D,IAAAC,gBAA6C;AAC7C,gBAAoC;;;ACJpC,mBAA6C;AAItC,IAAM,yBAAqB,aAAAC,eAAa;AAAA,EAC9C,MAAM;AAAA,EACN,cAAc,CAAC;AAAA,EACf,UAAU;AAAA,IACT,cAAc,CAAE,OAAO,WAAY;AAClC,YAAM,WAAW,EAAE,GAAG,MAAM;AAC5B,UAAK,CAAE,SAAU,OAAO,QAAQ,EAAG,GAAI;AACtC,iBAAU,OAAO,QAAQ,EAAG,IAAI,OAAO;AAAA,MACxC;AAEA,aAAO;AAAA,IACR;AAAA,IACA,aAAa,CAAE,OAAO,WAAY;AACjC,YAAM,WAAW,EAAE,GAAG,MAAM;AAC5B,UAAK,SAAU,OAAO,QAAQ,EAAG,GAAI;AAEpC,eAAO,SAAU,OAAO,QAAQ,EAAG;AAAA,MACpC;AAEA,aAAO;AAAA,IACR;AAAA,EACD;AACD,CAAE;AAEK,IAAM,EAAE,cAAc,YAAY,IAAI,mBAAmB;;;ADnBhE,IAAM,qBAAqB;AAE3B,SAAS,oBAAqB,cAAgC,WAAwB;AACrF,SACC,oCAAC,yBAAS,KAAM,aAAa,MAC1B,aAAa,uBAAuB,IAAK,CAAE,kBAAkB,UAC9D,oCAAC,oBAAO,KAAM,GAAI,KAAM,IAAO,GAAG,kBAAmB,CACpD,GAEF,oCAAC,yBAAY,cAAW,SAAQ,OAAM,WAAU,SAAU,WAAY,CACvE;AAEF;AAEA,SAAS,sBAAuB,cAAiC;AAChE,SACC,oCAAC,yBAAS,KAAM,aAAa,MAC1B,aAAa,uBAAuB,IAAK,CAAE,kBAAkB,UAC9D,oCAAC,oBAAO,KAAM,GAAI,KAAM,IAAO,GAAG,kBAAmB,CACpD,CACH;AAEF;AAEO,IAAM,yBAAyB,CAAE,kBAAkC;AACzE,QAAM,EAAE,gBAAgB,QAAI,8BAAY;AACxC,QAAM,eAAW,cAAAC,eAAY;AAE7B,8BAAW,MAAM;AAChB,WAAO,OAAQ,aAAc,EAAE,QAAS,CAAE,iBAAkB;AAC3D,YAAM,UAAU,MAAM;AACrB,4CAAe,aAAa,EAAG;AAC/B,iBAAU,YAAa,EAAE,IAAI,aAAa,GAAG,CAAE,CAAE;AAAA,MAClD;AAEA,YAAM,iBAAiB,CAAE,aAAa,QAAQ,WAAW,OAAQ,EAAE,SAAU,aAAa,IAAK;AAE/F,YAAM,SAAS,iBACZ,sBAAuB,YAAa,IACpC,oBAAqB,cAAc,OAAQ;AAE9C,sBAAiB,aAAa,SAAS;AAAA,QACtC,SAAS,aAAa;AAAA,QACtB,KAAK,aAAa;AAAA,QAClB,SAAS,MAAM,SAAU,YAAa,EAAE,IAAI,aAAa,GAAG,CAAE,CAAE;AAAA,QAChE,kBAAkB;AAAA,QAClB;AAAA,QACA,kBAAkB,aAAa,oBAAoB;AAAA,MACpD,CAAE;AAAA,IACH,CAAE;AAAA,EACH,GAAG,CAAE,eAAe,iBAAiB,QAAS,CAAE;AACjD;;;AE5DO,SAAS,uBAAuB;AACtC,SAAO,SAAS,cAAe,kBAAmB,GAAG,eAAe;AACrE;;;AHWA,IAAMC,sBAAqB;AAE3B,IAAM,4BAAwB,0BAAY,CAAE,OAAsB,QAAS;AAC1E,QAAM,gBAAgB,yBAA0B,KAAM;AACtD,QAAM,aAAa,qBAAqB;AAExC,SACC,qCAAC,4BAAc,SAAQ,cACtB;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACE,GAAG;AAAA,MACL,IAAK;AAAA,QACJ,mBAAmB,EAAE,UAAU,cAAc;AAAA,QAC7C,IAAI,aAAa;AAAA,MAClB;AAAA;AAAA,EACD,CACD;AAEF,CAAE;AAOF,IAAM,oBAAgB,0BAAkD,CAAE,EAAE,OAAO,MAAM,GAAG,MAAM,GAAG,QAAS;AAC7G,QAAM,aAAa,qBAAqB;AAExC,SACC,qCAAC,4BAAc,aAAY,SAAQ,SAAQ,cAC1C;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,QAAS,MAAM;AAAA,MACf,SAAU,UAAM,iCAAe,MAAM,EAAG;AAAA,MACxC,IAAK;AAAA,QACJ,IAAI,aAAa;AAAA,QACjB,uBAAuB,EAAE,SAAS,QAAQ,UAAU,UAAU,YAAY,SAAS;AAAA,QACnF,uBAAuB,EAAE,YAAY,SAAS;AAAA,MAC/C;AAAA;AAAA,IAEE,MAAM;AAAA,EACT,CACD;AAEF,CAAE;AAEF,IAAM,wBAAoB,0BAAkD,CAAE,OAAO,QACpF,qCAAC,iBAAc,KAAY,OAAM,aAAY,MAAO,qCAAC,kCAAgB,GAAO,GAAG,OAAQ,CACtF;AAEF,IAAM,mBAAe,0BAAkD,CAAE,OAAO,QAC/E,qCAAC,iBAAc,KAAY,OAAM,QAAO,MAAO,qCAAC,uCAAqB,GAAO,GAAG,OAAQ,CACtF;AAEF,IAAM,sBAAkB,0BAAkD,CAAE,OAAO,QAClF,qCAAC,iBAAc,KAAY,OAAM,WAAU,MAAO,qCAAC,wCAAsB,GAAO,GAAG,OAAQ,CAC1F;AAEF,IAAM,oBAAgB,0BAAkD,CAAE,OAAO,QAChF,qCAAC,iBAAc,KAAY,OAAM,SAAQ,MAAO,qCAAC,oCAAkB,GAAO,GAAG,OAAQ,CACpF;AAEF,IAAM,iBAAiB;AAAA,EACtB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACR;AAEA,IAAM,UAAU,MAAM;AACrB,QAAM,oBAAgB,cAAAC,eAAa,CAAE,UAA6C,MAAM,aAAc;AAEtG,yBAAwB,aAAc;AAEtC,SAAO;AACR;AAEA,IAAM,UAAU,MAAM;AACrB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW;AAAA,MACX,kBAAmBD;AAAA,MACnB,2BAAyB;AAAA,MACzB,cAAe,EAAE,YAAY,UAAU,UAAU,SAAS;AAAA,MAC1D,YAAa;AAAA;AAAA,IAEb,qCAAC,aAAQ;AAAA,EACV;AAEF;AAMO,SAAS,OAAQ,cAAiC;AACxD,QAAM,YAAQ,cAAAE,YAAS;AAEvB,SAAO,SAAU,aAAc,YAAa,CAAE;AAC/C;AAEO,SAAS,oBAAqB,IAA+B;AACnE,QAAM,YAAQ,cAAAA,YAAS;AAEvB,uCAAe,EAAG;AAClB,SAAO,SAAU,YAAa,EAAE,GAAG,CAAE,CAAE;AACxC;AAMO,SAAS,YAAa,cAAiC;AAC7D,QAAM,eAAW,cAAAC,eAAY;AAC7B,WAAU,aAAc,YAAa,CAAE;AACxC;AAEA,SAAS,yBAA0B,OAAuB;AACzD,QAAM,iBAAiB,CAAE,oBAAoB,WAAW,mBAAmB,eAAe,cAAe;AAEzG,SAAO,OAAO,QAAS,KAAM,EAAE;AAAA,IAC9B,CAAE,eAAe,CAAE,KAAK,KAAM,MAAO;AACpC,UAAK,CAAE,eAAe,SAAU,GAAI,GAAI;AACvC,sBAAe,GAAI,IAAI;AAAA,MACxB;AAEA,aAAO;AAAA,IACR;AAAA,IACA,CAAC;AAAA,EACF;AACD;AAEA,IAAO,wBAAQ;;;ADhJR,SAAS,OAAO;AACtB,oBAAAC,iBAAe,kBAAmB;AAClC,mCAAe;AAAA,IACd,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;","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-app-bar-height.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 { getAppBarHeight } from '../sync/get-app-bar-height';\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\tconst appBarHeight = getAppBarHeight();\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\tmt: `-${ appBarHeight }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\tconst appBarHeight = getAppBarHeight();\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\tmt: `-${ appBarHeight }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\tdisableWindowBlurListener\n\t\t\tanchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }\n\t\t\tComponents={ muiToEuiMapper }\n\t\t\tdomRoot={ document.body }\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\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","const EDITOR_APP_BAR_WRAPPER_ID = 'elementor-editor-wrapper-v2';\n\nexport function getAppBarHeight() {\n\treturn document.getElementById( EDITOR_APP_BAR_WRAPPER_ID )?.getBoundingClientRect().height ?? 0;\n}\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

@@ -72,6 +72,12 @@ var useEnqueueNotification = (notifications) => {
   }, [notifications, enqueueSnackbar, dispatch]);
 };
 
+// src/sync/get-app-bar-height.ts
+var EDITOR_APP_BAR_WRAPPER_ID = "elementor-editor-wrapper-v2";
+function getAppBarHeight() {
+  return document.getElementById(EDITOR_APP_BAR_WRAPPER_ID)?.getBoundingClientRect().height ?? 0;
+}
+
 // src/sync/get-editing-panel-width.ts
 function getEditingPanelWidth() {
   return document.querySelector(".elementor-panel")?.clientWidth || 0;
@@ -82,6 +88,7 @@ var AUTO_HIDE_DURATION2 = 8e3;
 var DefaultCustomSnackbar = forwardRef((props, ref) => {
   const filteredProps = getFilteredSnackbarProps(props);
   const panelWidth = getEditingPanelWidth();
+  const appBarHeight = getAppBarHeight();
   return /* @__PURE__ */ React2.createElement(ThemeProvider, { palette: "unstable" }, /* @__PURE__ */ React2.createElement(
     SnackbarContent,
     {
@@ -89,13 +96,15 @@ var DefaultCustomSnackbar = forwardRef((props, ref) => {
       ...filteredProps,
       sx: {
         "&.MuiPaper-root": { minWidth: "max-content" },
-        ml: panelWidth + "px"
+        ml: panelWidth + "px",
+        mt: `-${appBarHeight}px`
       }
     }
   ));
 });
 var AlertSnackbar = forwardRef(({ color, icon, ...props }, ref) => {
   const panelWidth = getEditingPanelWidth();
+  const appBarHeight = getAppBarHeight();
   return /* @__PURE__ */ React2.createElement(ThemeProvider, { colorScheme: "light", palette: "unstable" }, /* @__PURE__ */ React2.createElement(
     Alert,
     {
@@ -108,6 +117,7 @@ var AlertSnackbar = forwardRef(({ color, icon, ...props }, ref) => {
       onClose: () => closeSnackbar2(props.id),
       sx: {
         ml: panelWidth + "px",
+        mt: `-${appBarHeight}px`,
         "& .MuiAlert-message": { display: "flex", flexWrap: "nowrap", alignItems: "center" },
         "& .MuiAlert-content": { whiteSpace: "nowrap" }
       }
@@ -139,7 +149,8 @@ var Wrapper = () => {
       autoHideDuration: AUTO_HIDE_DURATION2,
       disableWindowBlurListener: true,
       anchorOrigin: { horizontal: "center", vertical: "bottom" },
-      Components: muiToEuiMapper
+      Components: muiToEuiMapper,
+      domRoot: document.body
     },
     /* @__PURE__ */ React2.createElement(Handler, null)
   );

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 { 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\tdisableWindowBlurListener\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"]}
+{"version":3,"sources":["../src/init.ts","../src/components/notifications.tsx","../src/hooks/use-enqueue-notifications.tsx","../src/slice.ts","../src/sync/get-app-bar-height.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 { getAppBarHeight } from '../sync/get-app-bar-height';\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\tconst appBarHeight = getAppBarHeight();\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\tmt: `-${ appBarHeight }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\tconst appBarHeight = getAppBarHeight();\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\tmt: `-${ appBarHeight }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\tdisableWindowBlurListener\n\t\t\tanchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }\n\t\t\tComponents={ muiToEuiMapper }\n\t\t\tdomRoot={ document.body }\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\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","const EDITOR_APP_BAR_WRAPPER_ID = 'elementor-editor-wrapper-v2';\n\nexport function getAppBarHeight() {\n\treturn document.getElementById( EDITOR_APP_BAR_WRAPPER_ID )?.getBoundingClientRect().height ?? 0;\n}\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.3.0-999",
+  "version": "4.4.0-1065",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,9 +40,9 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.0-999",
+    "@elementor/editor": "4.4.0-1065",
     "@elementor/icons": "~1.75.1",
-    "@elementor/store": "4.3.0-999",
+    "@elementor/store": "4.4.0-1065",
     "@elementor/ui": "1.37.5",
     "notistack": "^3.0.2"
   },

package/src/components/notifications.tsx

@@ -7,6 +7,7 @@ import { Alert, SnackbarContent, type SnackbarProps, ThemeProvider } from '@elem
 
 import { useEnqueueNotification } from '../hooks/use-enqueue-notifications';
 import { clearAction, notifyAction } from '../slice';
+import { getAppBarHeight } from '../sync/get-app-bar-height';
 import { getEditingPanelWidth } from '../sync/get-editing-panel-width';
 import { type NotificationData, type Notifications } from '../types';
 
@@ -16,6 +17,7 @@ const AUTO_HIDE_DURATION = 8000;
 const DefaultCustomSnackbar = forwardRef( ( props: SnackbarProps, ref ) => {
 	const filteredProps = getFilteredSnackbarProps( props );
 	const panelWidth = getEditingPanelWidth();
+	const appBarHeight = getAppBarHeight();
 
 	return (
 		<ThemeProvider palette="unstable">
@@ -25,6 +27,7 @@ const DefaultCustomSnackbar = forwardRef( ( props: SnackbarProps, ref ) => {
 				sx={ {
 					'&.MuiPaper-root': { minWidth: 'max-content' },
 					ml: panelWidth + 'px',
+					mt: `-${ appBarHeight }px`,
 				} }
 			/>
 		</ThemeProvider>
@@ -38,6 +41,7 @@ interface AlertSnackbarProps extends CustomContentProps {
 
 const AlertSnackbar = forwardRef< HTMLDivElement, AlertSnackbarProps >( ( { color, icon, ...props }, ref ) => {
 	const panelWidth = getEditingPanelWidth();
+	const appBarHeight = getAppBarHeight();
 
 	return (
 		<ThemeProvider colorScheme="light" palette="unstable">
@@ -51,6 +55,7 @@ const AlertSnackbar = forwardRef< HTMLDivElement, AlertSnackbarProps >( ( { colo
 				onClose={ () => closeSnackbar( props.id ) }
 				sx={ {
 					ml: panelWidth + 'px',
+					mt: `-${ appBarHeight }px`,
 					'& .MuiAlert-message': { display: 'flex', flexWrap: 'nowrap', alignItems: 'center' },
 					'& .MuiAlert-content': { whiteSpace: 'nowrap' },
 				} }
@@ -101,6 +106,7 @@ const Wrapper = () => {
 			disableWindowBlurListener
 			anchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }
 			Components={ muiToEuiMapper }
+			domRoot={ document.body }
 		>
 			<Handler />
 		</SnackbarProvider>
@@ -130,6 +136,7 @@ export function dismissNotification( id: NotificationData[ 'id' ] ) {
  */
 export function NotifyReact( notification: NotificationData ) {
 	const dispatch = useDispatch();
+
 	dispatch( notifyAction( notification ) );
 }
 

package/src/sync/get-app-bar-height.ts

@@ -0,0 +1,5 @@
+const EDITOR_APP_BAR_WRAPPER_ID = 'elementor-editor-wrapper-v2';
+
+export function getAppBarHeight() {
+	return document.getElementById( EDITOR_APP_BAR_WRAPPER_ID )?.getBoundingClientRect().height ?? 0;
+}