@dream-encode/wp-js-plugin-utils 0.2.6 → 0.3.0

package/dist/components/NotificationsDrawer/DismissAllButton.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * "Dismiss All" button used inside the notifications drawer.
+ *
+ * @param  {Object}   props
+ * @param  {Function} props.onDismissAll          Async dismiss-all handler. Returns truthy on success.
+ * @param  {Function} [props.onDismissingChange]  Optional callback invoked with `true` when dismiss-all begins and `false` once the animation completes (or the request fails).
+ * @param  {string}   [props.textDomain]          Translation domain for the button label.
+ * @param  {number}   [props.startDelay]          Delay (ms) before the API call fires after dismiss-all begins, to allow the start animation to play.
+ * @param  {number}   [props.resetDelay]          Delay (ms) after a successful dismiss-all before resetting the busy state.
+ * @return {JSX.Element}
+ */const DismissAllButton = ({
+  onDismissAll,
+  onDismissingChange,
+  textDomain = 'default',
+  startDelay = 300,
+  resetDelay = 800
+}) => {
+  const [dismissing, setDismissing] = (0, _element.useState)(false);
+  const dismissAll = async () => {
+    if (dismissing) {
+      return;
+    }
+    setDismissing(true);
+    if (typeof onDismissingChange === 'function') {
+      onDismissingChange(true);
+    }
+    setTimeout(async () => {
+      const result = await onDismissAll();
+      if (!result) {
+        setDismissing(false);
+        if (typeof onDismissingChange === 'function') {
+          onDismissingChange(false);
+        }
+        return;
+      }
+      setTimeout(() => {
+        setDismissing(false);
+        if (typeof onDismissingChange === 'function') {
+          onDismissingChange(false);
+        }
+      }, resetDelay);
+    }, startDelay);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "dismiss-all",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      className: "dismiss-all-button",
+      variant: "secondary",
+      size: "default",
+      isBusy: dismissing,
+      disabled: dismissing,
+      onClick: dismissAll,
+      children: dismissing ? (0, _i18n.__)('Dismissing...', textDomain) : (0, _i18n.__)('Dismiss All', textDomain)
+    })
+  });
+};
+var _default = exports.default = DismissAllButton;

package/dist/components/NotificationsDrawer/NotificationItem.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _jsxRuntime = require("react/jsx-runtime");
+const iconType = type => {
+  switch (type) {
+    case 'error':
+    case 'warning':
+      return 'warning';
+    case 'success':
+      return 'yes';
+    case 'info':
+    default:
+      return 'info-outline';
+  }
+};
+const NotificationIcon = ({
+  type
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dashicon, {
+  icon: iconType(type)
+});
+
+/**
+ * Single notification rendered inside the drawer.
+ *
+ * @param  {Object}   props
+ * @param  {Object}   props.notification          Notification object: `{ id, type, message }`.
+ * @param  {Function} props.onDismiss             Async dismiss handler. Receives the notification id, returns a truthy value on success.
+ * @param  {string}   [props.className]           Additional class name applied to the underlying `Notice`.
+ * @param  {boolean}  [props.allowHtml]           Render `notification.message` via `dangerouslySetInnerHTML`.
+ * @param  {Function} [props.renderMessage]       Custom message renderer. Receives `notification`, returns a node.
+ * @param  {Function} [props.onMessageMount]      Called with `(element, notification)` after the message DOM node mounts. Useful for post-render DOM transforms.
+ * @param  {number}   [props.dismissAnimationDuration]  Delay (ms) between successful dismiss and the parent removing the item.
+ * @return {JSX.Element}
+ */
+const NotificationItem = ({
+  notification,
+  onDismiss,
+  className = '',
+  allowHtml = false,
+  renderMessage,
+  onMessageMount,
+  dismissAnimationDuration = 500
+}) => {
+  const [dismissing, setDismissing] = (0, _element.useState)(false);
+  const messageRef = (0, _element.useRef)(null);
+  (0, _element.useEffect)(() => {
+    if (typeof onMessageMount === 'function' && messageRef.current) {
+      onMessageMount(messageRef.current, notification);
+    }
+  }, [notification, onMessageMount]);
+  const dismissNotice = async () => {
+    if (dismissing) {
+      return;
+    }
+    setDismissing(true);
+    setTimeout(async () => {
+      const result = await onDismiss(notification.id);
+      if (!result) {
+        setDismissing(false);
+        return;
+      }
+      setTimeout(() => {
+        setDismissing(false);
+      }, dismissAnimationDuration);
+    }, 50);
+  };
+  const noticeClassName = `${className} ${dismissing ? 'dismissing' : ''}`.trim();
+  let messageContent;
+  if (typeof renderMessage === 'function') {
+    messageContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: messageRef,
+      children: renderMessage(notification)
+    });
+  } else if (allowHtml) {
+    messageContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      ref: messageRef,
+      dangerouslySetInnerHTML: {
+        __html: notification.message
+      }
+    });
+  } else {
+    messageContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      ref: messageRef,
+      children: notification.message
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Notice, {
+    className: noticeClassName,
+    status: notification.type,
+    isDismissible: true,
+    onRemove: dismissNotice,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NotificationIcon, {
+          type: notification.type
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexBlock, {
+        children: messageContent
+      })]
+    })
+  });
+};
+var _default = exports.default = NotificationItem;

package/dist/components/NotificationsDrawer/NotificationsDrawer.js

@@ -0,0 +1,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _NotificationsList = _interopRequireDefault(require("./NotificationsList"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEFAULT_AUTO_HIDE_DELAY = 2000;
+
+/**
+ * Floating notifications drawer with a count badge and hover/click expansion.
+ *
+ * The consumer owns the notifications state. Pass it in via `notifications`
+ * and provide async `onDismiss(id)` and `onDismissAll()` handlers that update
+ * that state on success.
+ *
+ * @param  {Object}   props
+ * @param  {Array}    props.notifications                Array of `{ id, type, message }` objects.
+ * @param  {Function} props.onDismiss                    Async per-item dismiss handler. Returns truthy on success.
+ * @param  {Function} props.onDismissAll                 Async dismiss-all handler. Returns truthy on success.
+ * @param  {string}   [props.textDomain]                 Translation domain for built-in strings.
+ * @param  {string}   [props.id]                         DOM id for the drawer container.
+ * @param  {string}   [props.className]                  Additional class name for the drawer container.
+ * @param  {string}   [props.itemClassName]              Class name applied to each notification's underlying `Notice`.
+ * @param  {string}   [props.iconName]                   Dashicon name used for the drawer trigger icon.
+ * @param  {boolean}  [props.allowHtml]                  Render notification messages via `dangerouslySetInnerHTML`.
+ * @param  {Function} [props.renderMessage]              Custom message renderer. Receives `notification`.
+ * @param  {Function} [props.onMessageMount]             Called with `(element, notification)` after each message DOM node mounts.
+ * @param  {boolean}  [props.expandOnHover]              Expand the drawer on mouse enter (default true).
+ * @param  {boolean}  [props.expandOnClick]              Toggle the drawer on icon click (default true).
+ * @param  {number}   [props.autoHideDelay]              Delay (ms) before auto-collapsing after mouse leave.
+ * @param  {boolean}  [props.animateOnNew]               Briefly add a `new-message` class to the icon when the count increases (default true).
+ * @param  {number}   [props.dismissAnimationDuration]   Forwarded to each notification item.
+ * @param  {number}   [props.dismissAllStartDelay]       Forwarded to the dismiss-all button.
+ * @param  {number}   [props.dismissAllResetDelay]       Forwarded to the dismiss-all button.
+ * @return {JSX.Element|null}
+ */
+const NotificationsDrawer = ({
+  notifications,
+  onDismiss,
+  onDismissAll,
+  textDomain = 'default',
+  id,
+  className = '',
+  itemClassName = '',
+  iconName = 'email',
+  allowHtml = false,
+  renderMessage,
+  onMessageMount,
+  expandOnHover = true,
+  expandOnClick = true,
+  autoHideDelay = DEFAULT_AUTO_HIDE_DELAY,
+  animateOnNew = true,
+  dismissAnimationDuration = 500,
+  dismissAllStartDelay = 300,
+  dismissAllResetDelay = 800
+}) => {
+  const count = notifications?.length || 0;
+  const [isExpanded, setIsExpanded] = (0, _element.useState)(false);
+  const [animate, setAnimate] = (0, _element.useState)(false);
+  const prevCountRef = (0, _element.useRef)(0);
+  const containerRef = (0, _element.useRef)(null);
+  const iconRef = (0, _element.useRef)(null);
+  const autoHideTimerRef = (0, _element.useRef)(null);
+  (0, _element.useEffect)(() => {
+    if (animateOnNew && count > prevCountRef.current && prevCountRef.current > 0) {
+      setAnimate(true);
+      const timerId = setTimeout(() => setAnimate(false), 1000);
+      prevCountRef.current = count;
+      return () => clearTimeout(timerId);
+    }
+    prevCountRef.current = count;
+  }, [count, animateOnNew]);
+  (0, _element.useEffect)(() => {
+    if (!expandOnHover) {
+      return undefined;
+    }
+    const clearAutoHide = () => {
+      if (autoHideTimerRef.current) {
+        clearTimeout(autoHideTimerRef.current);
+        autoHideTimerRef.current = null;
+      }
+    };
+    const startAutoHide = () => {
+      clearAutoHide();
+      autoHideTimerRef.current = setTimeout(() => {
+        setIsExpanded(false);
+      }, autoHideDelay);
+    };
+    const handleMouseEnter = () => {
+      if (count === 0) {
+        return;
+      }
+      setIsExpanded(true);
+      clearAutoHide();
+    };
+    const handleMouseLeave = () => {
+      startAutoHide();
+    };
+    const container = containerRef.current;
+    const icon = iconRef.current;
+    if (container) {
+      container.addEventListener('mouseenter', handleMouseEnter);
+      container.addEventListener('mouseleave', handleMouseLeave);
+    }
+    if (icon) {
+      icon.addEventListener('mouseenter', handleMouseEnter);
+      icon.addEventListener('mouseleave', handleMouseLeave);
+    }
+    return () => {
+      if (container) {
+        container.removeEventListener('mouseenter', handleMouseEnter);
+        container.removeEventListener('mouseleave', handleMouseLeave);
+      }
+      if (icon) {
+        icon.removeEventListener('mouseenter', handleMouseEnter);
+        icon.removeEventListener('mouseleave', handleMouseLeave);
+      }
+      clearAutoHide();
+    };
+  }, [expandOnHover, autoHideDelay, count]);
+  const handleIconClick = () => {
+    if (!expandOnClick || count === 0) {
+      return;
+    }
+    setIsExpanded(prev => !prev);
+  };
+  const containerClassName = `${className} ${isExpanded ? 'expanded' : ''}`.trim();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    id: id,
+    ref: containerRef,
+    className: containerClassName,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: iconRef,
+      className: `messages-icon ${animate ? 'new-message' : ''}`.trim(),
+      onClick: handleIconClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: `dashicons dashicons-${iconName}`
+      }), count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "messages-count",
+        children: count
+      })]
+    }), count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationsList.default, {
+      notifications: notifications,
+      onDismiss: onDismiss,
+      onDismissAll: onDismissAll,
+      textDomain: textDomain,
+      allowHtml: allowHtml,
+      renderMessage: renderMessage,
+      onMessageMount: onMessageMount,
+      itemClassName: itemClassName,
+      dismissAnimationDuration: dismissAnimationDuration,
+      dismissAllStartDelay: dismissAllStartDelay,
+      dismissAllResetDelay: dismissAllResetDelay
+    })]
+  });
+};
+var _default = exports.default = NotificationsDrawer;

package/dist/components/NotificationsDrawer/NotificationsList.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _NotificationItem = _interopRequireDefault(require("./NotificationItem"));
+var _DismissAllButton = _interopRequireDefault(require("./DismissAllButton"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * List of notifications with a "Dismiss All" control.
+ *
+ * Stateless with respect to the notifications array — the consumer owns the
+ * source-of-truth and is expected to update it from within `onDismiss`/`onDismissAll`.
+ *
+ * @param  {Object}   props
+ * @param  {Array}    props.notifications                Array of `{ id, type, message }` objects.
+ * @param  {Function} props.onDismiss                    Async per-item dismiss handler. Receives the notification id, returns truthy on success.
+ * @param  {Function} props.onDismissAll                 Async dismiss-all handler. Returns truthy on success.
+ * @param  {string}   [props.textDomain]                 Translation domain for built-in strings.
+ * @param  {boolean}  [props.allowHtml]                  Render notification messages via `dangerouslySetInnerHTML`.
+ * @param  {Function} [props.renderMessage]              Custom message renderer. Receives `notification`.
+ * @param  {Function} [props.onMessageMount]             Called with `(element, notification)` after each message DOM node mounts.
+ * @param  {string}   [props.containerClassName]         Additional class names for the list container.
+ * @param  {string}   [props.itemClassName]              Class name applied to each `NotificationItem`'s underlying `Notice`.
+ * @param  {boolean}  [props.showDismissAll]             Toggle visibility of the "Dismiss All" button.
+ * @param  {boolean}  [props.alwaysRender]               When true, the list container is rendered even when empty (useful while a dismiss-all animation is running).
+ * @param  {number}   [props.dismissAnimationDuration]   Forwarded to each `NotificationItem`.
+ * @param  {number}   [props.dismissAllStartDelay]       Forwarded to `DismissAllButton`.
+ * @param  {number}   [props.dismissAllResetDelay]       Forwarded to `DismissAllButton`.
+ * @return {JSX.Element|null}
+ */const NotificationsList = ({
+  notifications,
+  onDismiss,
+  onDismissAll,
+  textDomain = 'default',
+  allowHtml = false,
+  renderMessage,
+  onMessageMount,
+  containerClassName = '',
+  itemClassName = '',
+  showDismissAll = true,
+  alwaysRender = false,
+  dismissAnimationDuration = 500,
+  dismissAllStartDelay = 300,
+  dismissAllResetDelay = 800
+}) => {
+  const [isDismissingAll, setIsDismissingAll] = (0, _element.useState)(false);
+  const count = notifications?.length || 0;
+  if (!alwaysRender && count === 0 && !isDismissingAll) {
+    return null;
+  }
+  const className = `messages-container ${containerClassName} ${isDismissingAll ? 'dismissing-all' : ''}`.trim();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: className,
+    children: [showDismissAll && count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DismissAllButton.default, {
+      onDismissAll: onDismissAll,
+      onDismissingChange: setIsDismissingAll,
+      textDomain: textDomain,
+      startDelay: dismissAllStartDelay,
+      resetDelay: dismissAllResetDelay
+    }), notifications?.map(notification => /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationItem.default, {
+      notification: notification,
+      onDismiss: onDismiss,
+      className: itemClassName,
+      allowHtml: allowHtml,
+      renderMessage: renderMessage,
+      onMessageMount: onMessageMount,
+      dismissAnimationDuration: dismissAnimationDuration
+    }, notification.id))]
+  });
+};
+var _default = exports.default = NotificationsList;

package/dist/components/NotificationsDrawer/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DismissAllButton", {
+  enumerable: true,
+  get: function () {
+    return _DismissAllButton.default;
+  }
+});
+Object.defineProperty(exports, "NotificationItem", {
+  enumerable: true,
+  get: function () {
+    return _NotificationItem.default;
+  }
+});
+Object.defineProperty(exports, "NotificationsDrawer", {
+  enumerable: true,
+  get: function () {
+    return _NotificationsDrawer.default;
+  }
+});
+Object.defineProperty(exports, "NotificationsList", {
+  enumerable: true,
+  get: function () {
+    return _NotificationsList.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _NotificationsDrawer.default;
+  }
+});
+var _NotificationsDrawer = _interopRequireDefault(require("./NotificationsDrawer"));
+var _NotificationsList = _interopRequireDefault(require("./NotificationsList"));
+var _NotificationItem = _interopRequireDefault(require("./NotificationItem"));
+var _DismissAllButton = _interopRequireDefault(require("./DismissAllButton"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/NotificationsDrawer/styles/_notifications-drawer.scss

@@ -0,0 +1,186 @@
+/*
+ * Generic styling for the wp-plugin-utils NotificationsDrawer component.
+ *
+ * Apply to the drawer's id/class selector and pass the same item class name
+ * that you supply via the `itemClassName` prop on the React component:
+ *
+ *     #my-plugin-messages {
+ *         @include de-wp-plugin-utils-notifications-drawer('my-plugin-alert');
+ *     }
+ */
+
+@keyframes de-wp-plugin-utils-notifications-drawer-pulse {
+	0% {
+		transform: scale(1);
+		box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+	}
+	50% {
+		transform: scale(1.1);
+		box-shadow: -2px 0 15px rgba(202, 74, 31, 0.4);
+	}
+	100% {
+		transform: scale(1);
+		box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+	}
+}
+
+@mixin de-wp-plugin-utils-notifications-drawer($item-class: 'notification-item') {
+	position: fixed;
+	bottom: 2rem;
+	right: -400px;
+	width: 400px;
+	transition: right 0.3s ease-in-out;
+	z-index: 99999;
+
+	.messages-icon {
+		position: absolute;
+		bottom: 0;
+		left: -50px;
+		width: 50px;
+		height: 50px;
+		background-color: #fff;
+		border-radius: 4px 0 0 4px;
+		box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+
+		&.new-message {
+			animation: de-wp-plugin-utils-notifications-drawer-pulse 1s;
+		}
+
+		.dashicons {
+			font-size: 24px;
+			color: #444;
+		}
+
+		.messages-count {
+			position: absolute;
+			top: -7px;
+			left: -10px;
+			min-width: 18px;
+			height: 18px;
+			padding: 0 4px;
+			border-radius: 9px;
+			background-color: #ca4a1f;
+			color: #fff;
+			font-size: 11px;
+			font-weight: 600;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			transition: transform 0.3s ease, opacity 0.3s ease;
+		}
+	}
+
+	&.expanded {
+		right: 0;
+
+		.messages-icon {
+			box-shadow: none;
+		}
+	}
+
+	.messages-container {
+		background-color: #fff;
+		border-radius: 4px 0 0 4px;
+		box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+		max-height: 80vh;
+		padding: 10px;
+		display: flex;
+		flex-direction: column;
+		overflow-y: auto;
+
+		&.dismissing-all {
+			opacity: 0.5;
+			pointer-events: none;
+			transition: opacity 0.5s ease-in-out;
+
+			.#{$item-class} {
+				opacity: 0.5;
+				transform: scale(0.98);
+				transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+			}
+		}
+	}
+
+	.dismiss-all {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: end;
+		margin-bottom: 6px;
+
+		button {
+			color: #444444;
+			background-color: #ffffff;
+			box-shadow: none;
+			font-weight: 500;
+
+			&:hover {
+				border-color: #000;
+			}
+		}
+	}
+
+	.#{$item-class} {
+		padding: 3px 6px;
+		box-sizing: border-box;
+		margin-bottom: 8px;
+		transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+		max-height: 200px;
+		overflow: hidden;
+		transform-origin: top;
+		opacity: 1;
+
+		&.dismissing {
+			opacity: 0;
+			max-height: 0;
+			margin-bottom: 0;
+			padding-top: 0;
+			padding-bottom: 0;
+			transform: translateY(-10px) scale(0.95);
+			transition:
+				opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+				max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+				margin-bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+				padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+				transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+		}
+
+		.dashicons-warning {
+			color: #cc1818;
+		}
+
+		.message-action-button {
+			background-color: #cc1818;
+			color: #fff;
+			border: #cc1818;
+			box-shadow: none;
+		}
+
+		p {
+			color: #000000;
+		}
+
+		&.is-dismissible {
+			padding-right: 0;
+
+			.components-button.has-icon {
+				padding: 0;
+			}
+
+			.components-notice__dismiss {
+				svg {
+					width: 18px;
+					height: 18px;
+				}
+			}
+		}
+	}
+
+	.components-notice__action.components-button.is-link {
+		margin-left: 30px;
+	}
+}

package/dist/components/index.js

@@ -3,11 +3,37 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DismissAllButton", {
+  enumerable: true,
+  get: function () {
+    return _NotificationsDrawer.DismissAllButton;
+  }
+});
 Object.defineProperty(exports, "Notices", {
   enumerable: true,
   get: function () {
     return _Notices.default;
   }
 });
+Object.defineProperty(exports, "NotificationItem", {
+  enumerable: true,
+  get: function () {
+    return _NotificationsDrawer.NotificationItem;
+  }
+});
+Object.defineProperty(exports, "NotificationsDrawer", {
+  enumerable: true,
+  get: function () {
+    return _NotificationsDrawer.default;
+  }
+});
+Object.defineProperty(exports, "NotificationsList", {
+  enumerable: true,
+  get: function () {
+    return _NotificationsDrawer.NotificationsList;
+  }
+});
 var _Notices = _interopRequireDefault(require("./Notices"));
+var _NotificationsDrawer = _interopRequireWildcard(require("./NotificationsDrawer"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dream-encode/wp-js-plugin-utils",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "description": "Common JS functionality used by custom WP plugins.",
   "keywords": [
     "wordpress",
@@ -27,6 +27,7 @@
     "./settings/styles": "./dist/settings/styles/_settings-page.scss",
     "./data-migrations": "./dist/data-migrations/index.js",
     "./components": "./dist/components/index.js",
+    "./components/notifications-drawer/styles": "./dist/components/NotificationsDrawer/styles/_notifications-drawer.scss",
     "./hooks": "./dist/hooks/index.js",
     "./api": "./dist/api/index.js",
     "./utils": "./dist/utils/index.js",