@elementor/editor-notifications 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+## 1.0.0
+
+### Major Changes
+
+- f82191d: Added Notification center, and block for link in link will show notification
+
+## 0.0.1
+
+Initial

package/README.md

@@ -0,0 +1,5 @@
+# Editor Notifications
+
+> [!WARNING]
+> Please refrain from accessing or depending on functions and variables starting with double underscores, as they are subject to change without notice.
+> Naming convention involving double underscores (`__`) as a prefix to indicate that a function or variable is meant for internal use and should not be accessed or relied upon by third-party developers.

package/dist/index.d.mts

@@ -0,0 +1,14 @@
+import { VariantType } from 'notistack';
+import { ButtonProps } from '@elementor/ui';
+
+type NotificationData = {
+    type: VariantType;
+    message: string | React.ReactNode;
+    id: string;
+    additionalActionProps?: Partial<ButtonProps>[];
+};
+
+declare function notify(notification: NotificationData): void;
+declare function NotifyReact(notification: NotificationData): void;
+
+export { type NotificationData, NotifyReact, notify };

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import { VariantType } from 'notistack';
+import { ButtonProps } from '@elementor/ui';
+
+type NotificationData = {
+    type: VariantType;
+    message: string | React.ReactNode;
+    id: string;
+    additionalActionProps?: Partial<ButtonProps>[];
+};
+
+declare function notify(notification: NotificationData): void;
+declare function NotifyReact(notification: NotificationData): void;
+
+export { type NotificationData, NotifyReact, notify };

package/dist/index.js

@@ -0,0 +1,139 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  NotifyReact: () => NotifyReact,
+  notify: () => notify
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/init.ts
+var import_editor = require("@elementor/editor");
+var import_store3 = require("@elementor/store");
+
+// src/components/notifications.tsx
+var React = __toESM(require("react"));
+var import_notistack = require("notistack");
+var import_store2 = require("@elementor/store");
+var import_ui = require("@elementor/ui");
+
+// src/slice.ts
+var import_store = require("@elementor/store");
+var notificationsSlice = (0, import_store.__createSlice)({
+  name: "notifications",
+  initialState: {},
+  reducers: {
+    notifyAction: (state, action) => {
+      const newState = { ...state };
+      if (!newState[action.payload.id]) {
+        newState[action.payload.id] = action.payload;
+      }
+      return newState;
+    },
+    clearAction: (state, action) => {
+      const newState = { ...state };
+      if (newState[action.payload.id]) {
+        delete newState[action.payload.id];
+      }
+      return newState;
+    }
+  }
+});
+var { notifyAction, clearAction } = notificationsSlice.actions;
+
+// src/components/notifications.tsx
+var Handler = () => {
+  const { enqueueSnackbar } = (0, import_notistack.useSnackbar)();
+  const notifications = (0, import_store2.__useSelector)((state) => state.notifications);
+  const dispatch = (0, import_store2.__useDispatch)();
+  if (!notifications) {
+    return null;
+  }
+  Object.values(notifications).forEach((notification) => {
+    const action = (key) => /* @__PURE__ */ React.createElement(React.Fragment, null, notification.additionalActionProps?.map((additionalAction, index) => /* @__PURE__ */ React.createElement(import_ui.Button, { key: index, ...additionalAction })), /* @__PURE__ */ React.createElement(
+      import_ui.CloseButton,
+      {
+        "aria-label": "close",
+        color: "inherit",
+        onClick: () => {
+          (0, import_notistack.closeSnackbar)(key);
+          dispatch(clearAction({ id: key }));
+        }
+      }
+    ));
+    enqueueSnackbar(notification.message, {
+      variant: notification.type,
+      key: notification.id,
+      onClose: () => dispatch(clearAction({ id: notification.id })),
+      preventDuplicate: true,
+      action
+    });
+  });
+  return null;
+};
+var Wrapper = () => {
+  return /* @__PURE__ */ React.createElement(
+    import_notistack.SnackbarProvider,
+    {
+      maxSnack: 3,
+      autoHideDuration: 8e3,
+      anchorOrigin: { horizontal: "center", vertical: "bottom" }
+    },
+    /* @__PURE__ */ React.createElement(Handler, null)
+  );
+};
+function notify(notification) {
+  const store = (0, import_store2.__getStore)();
+  store?.dispatch(notifyAction(notification));
+}
+function NotifyReact(notification) {
+  const dispatch = (0, import_store2.__useDispatch)();
+  dispatch(notifyAction(notification));
+}
+var notifications_default = Wrapper;
+
+// src/init.ts
+function init() {
+  (0, import_store3.__registerSlice)(notificationsSlice);
+  (0, import_editor.injectIntoTop)({
+    id: "notifications",
+    component: notifications_default
+  });
+}
+
+// src/index.ts
+init();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NotifyReact,
+  notify
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/notifications.tsx","../src/slice.ts"],"sourcesContent":["import { init } from './init';\n\nexport { type NotificationData } from './types';\nexport { NotifyReact, notify } from './components/notifications';\n\ninit();\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 { closeSnackbar, type SnackbarKey, SnackbarProvider, useSnackbar, type VariantType } from 'notistack';\nimport { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\nimport { Button, CloseButton } from '@elementor/ui';\n\nimport { clearAction, notifyAction } from '../slice';\nimport { type NotificationData, type Notifications } from '../types';\n\nconst Handler = () => {\n\tconst { enqueueSnackbar } = useSnackbar();\n\tconst notifications = useSelector( ( state: { notifications: Notifications } ) => state.notifications );\n\tconst dispatch = useDispatch();\n\n\tif ( ! notifications ) {\n\t\treturn null;\n\t}\n\n\tObject.values( notifications ).forEach( ( notification: NotificationData ) => {\n\t\tconst action = ( key: SnackbarKey ) => (\n\t\t\t<>\n\t\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t\t<Button key={ index } { ...additionalAction } />\n\t\t\t\t) ) }\n\n\t\t\t\t<CloseButton\n\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tcloseSnackbar( key );\n\t\t\t\t\t\tdispatch( clearAction( { id: key } ) );\n\t\t\t\t\t} }\n\t\t\t\t></CloseButton>\n\t\t\t</>\n\t\t);\n\n\t\tenqueueSnackbar( notification.message, {\n\t\t\tvariant: notification.type as VariantType,\n\t\t\tkey: notification.id,\n\t\t\tonClose: () => dispatch( clearAction( { id: notification.id } ) ),\n\t\t\tpreventDuplicate: true,\n\t\t\taction,\n\t\t} );\n\t} );\n\n\treturn null;\n};\n\nconst Wrapper = () => {\n\treturn (\n\t\t<SnackbarProvider\n\t\t\tmaxSnack={ 3 }\n\t\t\tautoHideDuration={ 8000 }\n\t\t\tanchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }\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\nexport default Wrapper;\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAA8B;AAC9B,IAAAA,gBAAiD;;;ACDjD,YAAuB;AACvB,uBAAiG;AACjG,IAAAC,gBAAmG;AACnG,gBAAoC;;;ACHpC,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;;;ADpBhE,IAAM,UAAU,MAAM;AACrB,QAAM,EAAE,gBAAgB,QAAI,8BAAY;AACxC,QAAM,oBAAgB,cAAAC,eAAa,CAAE,UAA6C,MAAM,aAAc;AACtG,QAAM,eAAW,cAAAC,eAAY;AAE7B,MAAK,CAAE,eAAgB;AACtB,WAAO;AAAA,EACR;AAEA,SAAO,OAAQ,aAAc,EAAE,QAAS,CAAE,iBAAoC;AAC7E,UAAM,SAAS,CAAE,QAChB,0DACG,aAAa,uBAAuB,IAAK,CAAE,kBAAkB,UAC9D,oCAAC,oBAAO,KAAM,OAAU,GAAG,kBAAmB,CAC7C,GAEF;AAAA,MAAC;AAAA;AAAA,QACA,cAAW;AAAA,QACX,OAAM;AAAA,QACN,SAAU,MAAM;AACf,8CAAe,GAAI;AACnB,mBAAU,YAAa,EAAE,IAAI,IAAI,CAAE,CAAE;AAAA,QACtC;AAAA;AAAA,IACA,CACF;AAGD,oBAAiB,aAAa,SAAS;AAAA,MACtC,SAAS,aAAa;AAAA,MACtB,KAAK,aAAa;AAAA,MAClB,SAAS,MAAM,SAAU,YAAa,EAAE,IAAI,aAAa,GAAG,CAAE,CAAE;AAAA,MAChE,kBAAkB;AAAA,MAClB;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR;AAEA,IAAM,UAAU,MAAM;AACrB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW;AAAA,MACX,kBAAmB;AAAA,MACnB,cAAe,EAAE,YAAY,UAAU,UAAU,SAAS;AAAA;AAAA,IAE1D,oCAAC,aAAQ;AAAA,EACV;AAEF;AAMO,SAAS,OAAQ,cAAiC;AACxD,QAAM,YAAQ,cAAAC,YAAS;AAEvB,SAAO,SAAU,aAAc,YAAa,CAAE;AAC/C;AAMO,SAAS,YAAa,cAAiC;AAC7D,QAAM,eAAW,cAAAD,eAAY;AAC7B,WAAU,aAAc,YAAa,CAAE;AACxC;AAEA,IAAO,wBAAQ;;;ADxER,SAAS,OAAO;AACtB,oBAAAE,iBAAe,kBAAmB;AAClC,mCAAe;AAAA,IACd,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;;;ADPA,KAAK;","names":["import_store","import_store","createSlice","useSelector","useDispatch","getStore","registerSlice"]}

package/dist/index.mjs

@@ -0,0 +1,101 @@
+// src/init.ts
+import { injectIntoTop } from "@elementor/editor";
+import { __registerSlice as registerSlice } from "@elementor/store";
+
+// src/components/notifications.tsx
+import * as React from "react";
+import { closeSnackbar, SnackbarProvider, useSnackbar } from "notistack";
+import { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from "@elementor/store";
+import { Button, CloseButton } from "@elementor/ui";
+
+// src/slice.ts
+import { __createSlice as createSlice } from "@elementor/store";
+var notificationsSlice = createSlice({
+  name: "notifications",
+  initialState: {},
+  reducers: {
+    notifyAction: (state, action) => {
+      const newState = { ...state };
+      if (!newState[action.payload.id]) {
+        newState[action.payload.id] = action.payload;
+      }
+      return newState;
+    },
+    clearAction: (state, action) => {
+      const newState = { ...state };
+      if (newState[action.payload.id]) {
+        delete newState[action.payload.id];
+      }
+      return newState;
+    }
+  }
+});
+var { notifyAction, clearAction } = notificationsSlice.actions;
+
+// src/components/notifications.tsx
+var Handler = () => {
+  const { enqueueSnackbar } = useSnackbar();
+  const notifications = useSelector((state) => state.notifications);
+  const dispatch = useDispatch();
+  if (!notifications) {
+    return null;
+  }
+  Object.values(notifications).forEach((notification) => {
+    const action = (key) => /* @__PURE__ */ React.createElement(React.Fragment, null, notification.additionalActionProps?.map((additionalAction, index) => /* @__PURE__ */ React.createElement(Button, { key: index, ...additionalAction })), /* @__PURE__ */ React.createElement(
+      CloseButton,
+      {
+        "aria-label": "close",
+        color: "inherit",
+        onClick: () => {
+          closeSnackbar(key);
+          dispatch(clearAction({ id: key }));
+        }
+      }
+    ));
+    enqueueSnackbar(notification.message, {
+      variant: notification.type,
+      key: notification.id,
+      onClose: () => dispatch(clearAction({ id: notification.id })),
+      preventDuplicate: true,
+      action
+    });
+  });
+  return null;
+};
+var Wrapper = () => {
+  return /* @__PURE__ */ React.createElement(
+    SnackbarProvider,
+    {
+      maxSnack: 3,
+      autoHideDuration: 8e3,
+      anchorOrigin: { horizontal: "center", vertical: "bottom" }
+    },
+    /* @__PURE__ */ React.createElement(Handler, null)
+  );
+};
+function notify(notification) {
+  const store = getStore();
+  store?.dispatch(notifyAction(notification));
+}
+function NotifyReact(notification) {
+  const dispatch = useDispatch();
+  dispatch(notifyAction(notification));
+}
+var notifications_default = Wrapper;
+
+// src/init.ts
+function init() {
+  registerSlice(notificationsSlice);
+  injectIntoTop({
+    id: "notifications",
+    component: notifications_default
+  });
+}
+
+// src/index.ts
+init();
+export {
+  NotifyReact,
+  notify
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/init.ts","../src/components/notifications.tsx","../src/slice.ts","../src/index.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 { closeSnackbar, type SnackbarKey, SnackbarProvider, useSnackbar, type VariantType } from 'notistack';\nimport { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\nimport { Button, CloseButton } from '@elementor/ui';\n\nimport { clearAction, notifyAction } from '../slice';\nimport { type NotificationData, type Notifications } from '../types';\n\nconst Handler = () => {\n\tconst { enqueueSnackbar } = useSnackbar();\n\tconst notifications = useSelector( ( state: { notifications: Notifications } ) => state.notifications );\n\tconst dispatch = useDispatch();\n\n\tif ( ! notifications ) {\n\t\treturn null;\n\t}\n\n\tObject.values( notifications ).forEach( ( notification: NotificationData ) => {\n\t\tconst action = ( key: SnackbarKey ) => (\n\t\t\t<>\n\t\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t\t<Button key={ index } { ...additionalAction } />\n\t\t\t\t) ) }\n\n\t\t\t\t<CloseButton\n\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tcloseSnackbar( key );\n\t\t\t\t\t\tdispatch( clearAction( { id: key } ) );\n\t\t\t\t\t} }\n\t\t\t\t></CloseButton>\n\t\t\t</>\n\t\t);\n\n\t\tenqueueSnackbar( notification.message, {\n\t\t\tvariant: notification.type as VariantType,\n\t\t\tkey: notification.id,\n\t\t\tonClose: () => dispatch( clearAction( { id: notification.id } ) ),\n\t\t\tpreventDuplicate: true,\n\t\t\taction,\n\t\t} );\n\t} );\n\n\treturn null;\n};\n\nconst Wrapper = () => {\n\treturn (\n\t\t<SnackbarProvider\n\t\t\tmaxSnack={ 3 }\n\t\t\tautoHideDuration={ 8000 }\n\t\t\tanchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }\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\nexport default Wrapper;\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","import { init } from './init';\n\nexport { type NotificationData } from './types';\nexport { NotifyReact, notify } from './components/notifications';\n\ninit();\n"],"mappings":";AAAA,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB,qBAAqB;;;ACDjD,YAAY,WAAW;AACvB,SAAS,eAAiC,kBAAkB,mBAAqC;AACjG,SAAS,cAAc,UAAU,iBAAiB,aAAa,iBAAiB,mBAAmB;AACnG,SAAS,QAAQ,mBAAmB;;;ACHpC,SAAS,iBAAiB,mBAAmB;AAItC,IAAM,qBAAqB,YAAa;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;;;ADpBhE,IAAM,UAAU,MAAM;AACrB,QAAM,EAAE,gBAAgB,IAAI,YAAY;AACxC,QAAM,gBAAgB,YAAa,CAAE,UAA6C,MAAM,aAAc;AACtG,QAAM,WAAW,YAAY;AAE7B,MAAK,CAAE,eAAgB;AACtB,WAAO;AAAA,EACR;AAEA,SAAO,OAAQ,aAAc,EAAE,QAAS,CAAE,iBAAoC;AAC7E,UAAM,SAAS,CAAE,QAChB,0DACG,aAAa,uBAAuB,IAAK,CAAE,kBAAkB,UAC9D,oCAAC,UAAO,KAAM,OAAU,GAAG,kBAAmB,CAC7C,GAEF;AAAA,MAAC;AAAA;AAAA,QACA,cAAW;AAAA,QACX,OAAM;AAAA,QACN,SAAU,MAAM;AACf,wBAAe,GAAI;AACnB,mBAAU,YAAa,EAAE,IAAI,IAAI,CAAE,CAAE;AAAA,QACtC;AAAA;AAAA,IACA,CACF;AAGD,oBAAiB,aAAa,SAAS;AAAA,MACtC,SAAS,aAAa;AAAA,MACtB,KAAK,aAAa;AAAA,MAClB,SAAS,MAAM,SAAU,YAAa,EAAE,IAAI,aAAa,GAAG,CAAE,CAAE;AAAA,MAChE,kBAAkB;AAAA,MAClB;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR;AAEA,IAAM,UAAU,MAAM;AACrB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW;AAAA,MACX,kBAAmB;AAAA,MACnB,cAAe,EAAE,YAAY,UAAU,UAAU,SAAS;AAAA;AAAA,IAE1D,oCAAC,aAAQ;AAAA,EACV;AAEF;AAMO,SAAS,OAAQ,cAAiC;AACxD,QAAM,QAAQ,SAAS;AAEvB,SAAO,SAAU,aAAc,YAAa,CAAE;AAC/C;AAMO,SAAS,YAAa,cAAiC;AAC7D,QAAM,WAAW,YAAY;AAC7B,WAAU,aAAc,YAAa,CAAE;AACxC;AAEA,IAAO,wBAAQ;;;ADxER,SAAS,OAAO;AACtB,gBAAe,kBAAmB;AAClC,gBAAe;AAAA,IACd,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;;;AGPA,KAAK;","names":[]}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@elementor/editor-notifications",
+  "description": "Notifications manager for the Elementor editor",
+  "version": "1.0.0",
+  "private": false,
+  "author": "Elementor Team",
+  "homepage": "https://elementor.com/",
+  "license": "GPL-3.0-or-later",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elementor/elementor-packages.git",
+    "directory": "packages/core/editor-notifications"
+  },
+  "bugs": {
+    "url": "https://github.com/elementor/elementor-packages/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "README.md",
+    "CHANGELOG.md",
+    "/dist",
+    "/src",
+    "!**/__tests__"
+  ],
+  "scripts": {
+    "build": "tsup --config=../../tsup.build.ts",
+    "dev": "tsup --config=../../tsup.dev.ts"
+  },
+  "dependencies": {
+    "@elementor/editor": "0.18.5",
+    "@elementor/store": "0.9.0",
+    "@elementor/ui": "1.32.1",
+    "notistack": "^3.0.2"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5"
+  }
+}

package/src/components/notifications.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { closeSnackbar, type SnackbarKey, SnackbarProvider, useSnackbar, type VariantType } from 'notistack';
+import { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';
+import { Button, CloseButton } from '@elementor/ui';
+
+import { clearAction, notifyAction } from '../slice';
+import { type NotificationData, type Notifications } from '../types';
+
+const Handler = () => {
+	const { enqueueSnackbar } = useSnackbar();
+	const notifications = useSelector( ( state: { notifications: Notifications } ) => state.notifications );
+	const dispatch = useDispatch();
+
+	if ( ! notifications ) {
+		return null;
+	}
+
+	Object.values( notifications ).forEach( ( notification: NotificationData ) => {
+		const action = ( key: SnackbarKey ) => (
+			<>
+				{ notification.additionalActionProps?.map( ( additionalAction, index ) => (
+					<Button key={ index } { ...additionalAction } />
+				) ) }
+
+				<CloseButton
+					aria-label="close"
+					color="inherit"
+					onClick={ () => {
+						closeSnackbar( key );
+						dispatch( clearAction( { id: key } ) );
+					} }
+				></CloseButton>
+			</>
+		);
+
+		enqueueSnackbar( notification.message, {
+			variant: notification.type as VariantType,
+			key: notification.id,
+			onClose: () => dispatch( clearAction( { id: notification.id } ) ),
+			preventDuplicate: true,
+			action,
+		} );
+	} );
+
+	return null;
+};
+
+const Wrapper = () => {
+	return (
+		<SnackbarProvider
+			maxSnack={ 3 }
+			autoHideDuration={ 8000 }
+			anchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }
+		>
+			<Handler />
+		</SnackbarProvider>
+	);
+};
+
+/*
+ * This function can be used to trigger notifications from anywhere in the code.
+ * even if you're running in a JS environment as opposed to a React environment.
+ */
+export function notify( notification: NotificationData ) {
+	const store = getStore();
+
+	store?.dispatch( notifyAction( notification ) );
+}
+
+/*
+ * This function can be used to trigger notifications from within a React component.
+ * This is the preferred way to trigger notifications.
+ */
+export function NotifyReact( notification: NotificationData ) {
+	const dispatch = useDispatch();
+	dispatch( notifyAction( notification ) );
+}
+
+export default Wrapper;

package/src/index.ts

@@ -0,0 +1,6 @@
+import { init } from './init';
+
+export { type NotificationData } from './types';
+export { NotifyReact, notify } from './components/notifications';
+
+init();

package/src/init.ts

@@ -0,0 +1,13 @@
+import { injectIntoTop } from '@elementor/editor';
+import { __registerSlice as registerSlice } from '@elementor/store';
+
+import Wrapper from './components/notifications';
+import { notificationsSlice } from './slice';
+
+export function init() {
+	registerSlice( notificationsSlice );
+	injectIntoTop( {
+		id: 'notifications',
+		component: Wrapper,
+	} );
+}

package/src/slice.ts

@@ -0,0 +1,29 @@
+import { __createSlice as createSlice } from '@elementor/store';
+
+import { type Notifications } from './types';
+
+export const notificationsSlice = createSlice( {
+	name: 'notifications',
+	initialState: {} as Notifications,
+	reducers: {
+		notifyAction: ( state, action ) => {
+			const newState = { ...state };
+			if ( ! newState[ action.payload.id ] ) {
+				newState[ action.payload.id ] = action.payload;
+			}
+
+			return newState;
+		},
+		clearAction: ( state, action ) => {
+			const newState = { ...state };
+			if ( newState[ action.payload.id ] ) {
+				// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+				delete newState[ action.payload.id ];
+			}
+
+			return newState;
+		},
+	},
+} );
+
+export const { notifyAction, clearAction } = notificationsSlice.actions;

package/src/types.ts

@@ -0,0 +1,13 @@
+import { type VariantType } from 'notistack';
+import { type ButtonProps } from '@elementor/ui';
+
+export type NotificationData = {
+	type: VariantType;
+	message: string | React.ReactNode;
+	id: string;
+	additionalActionProps?: Partial< ButtonProps >[];
+};
+
+type NotificationId = string;
+
+export type Notifications = Record< NotificationId, NotificationData >;