@boomerang-io/carbon-addons-boomerang-react 4.6.10-beta.5 → 4.6.11-beta.0

package/dist/esm/components/ModalConfirmEdit/ModalConfirmDetails.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import { prefix } from '../../internal/settings.js';
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-function ModalConfirmDetails({ items, ...rest }) {
-    return (React.createElement("ul", { className: `${prefix}--bmrg-modal-confirm-details`, ...rest }, items?.map((item) => {
-        return (React.createElement("li", { className: `${prefix}--bmrg-modal-confirm-details__item`, key: item.name },
-            React.createElement("div", { className: `${prefix}--bmrg-modal-confirm-details__name` }, item.name),
-            React.createElement("div", { className: `${prefix}--bmrg-modal-confirm-details__value` }, item.value)));
-    }) ?? null));
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+function ModalConfirmDetails({ items, ...rest }) {
+    return (React.createElement("ul", { className: `${prefix}--bmrg-modal-confirm-details`, ...rest }, items?.map((item) => {
+        return (React.createElement("li", { className: `${prefix}--bmrg-modal-confirm-details__item`, key: item.name },
+            React.createElement("div", { className: `${prefix}--bmrg-modal-confirm-details__name` }, item.name),
+            React.createElement("div", { className: `${prefix}--bmrg-modal-confirm-details__value` }, item.value)));
+    }) ?? null));
 }
 
 export { ModalConfirmDetails as default };

package/dist/esm/components/ModalConfirmEdit/ModalConfirmEdit.js

@@ -4,23 +4,23 @@ import ModalConfirmDetails from './ModalConfirmDetails.js';
 import ModalConfirmArray from './ModalConfirmArray.js';
 import { prefix } from '../../internal/settings.js';
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-const TYPES = {
-    DETAILS: "details",
-    ARRAY: "array",
-};
-function ModalConfirmEdit({ items, onEdit, style, title = "Confirm Your Details", type = "details", ...rest }) {
-    return (React.createElement("div", { className: `${prefix}--bmrg-modal-confirm-edit`, style: style, ...rest },
-        React.createElement("p", { className: `${prefix}--bmrg-modal-confirm-edit__title` }, title),
-        React.createElement("section", { className: `${prefix}--bmrg-modal-confirm-edit__section` },
-            React.createElement("div", { className: `${prefix}--bmrg-modal-confirm-edit__content` },
-                type === TYPES.DETAILS ? (React.createElement(ModalConfirmDetails, { items: items })) : type === TYPES.ARRAY ? (React.createElement(ModalConfirmArray, { items: items })) : null,
-                typeof onEdit === "function" && (React.createElement("button", { className: `${prefix}--bmrg-modal-confirm-edit__button`, onClick: onEdit },
-                    React.createElement(Edit, { size: 16, className: `${prefix}--bmrg-modal-confirm-edit__icon`, title: "Edit" })))))));
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+const TYPES = {
+    DETAILS: "details",
+    ARRAY: "array",
+};
+function ModalConfirmEdit({ items, onEdit, style, title = "Confirm Your Details", type = "details", ...rest }) {
+    return (React.createElement("div", { className: `${prefix}--bmrg-modal-confirm-edit`, style: style, ...rest },
+        React.createElement("p", { className: `${prefix}--bmrg-modal-confirm-edit__title` }, title),
+        React.createElement("section", { className: `${prefix}--bmrg-modal-confirm-edit__section` },
+            React.createElement("div", { className: `${prefix}--bmrg-modal-confirm-edit__content` },
+                type === TYPES.DETAILS ? (React.createElement(ModalConfirmDetails, { items: items })) : type === TYPES.ARRAY ? (React.createElement(ModalConfirmArray, { items: items })) : null,
+                typeof onEdit === "function" && (React.createElement("button", { className: `${prefix}--bmrg-modal-confirm-edit__button`, onClick: onEdit },
+                    React.createElement(Edit, { size: 16, className: `${prefix}--bmrg-modal-confirm-edit__icon`, title: "Edit" })))))));
 }
 
 export { ModalConfirmEdit as default };

package/dist/esm/components/ModalForm/ModalForm.js

@@ -2,15 +2,15 @@ import React from 'react';
 import cx from 'classnames';
 import { prefix } from '../../internal/settings.js';
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-const ModalForm = React.forwardRef(function ModalForm({ children, className, element: Element = "form", title, ...rest }, ref) {
-    return (React.createElement(Element, { className: cx(`${prefix}--bmrg-modal-form`, className), ...rest, ref: ref },
-        title && React.createElement("p", { className: `${prefix}--bmrg-modal-form__title` }, title),
-        children));
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+const ModalForm = React.forwardRef(function ModalForm({ children, className, element: Element = "form", title, ...rest }, ref) {
+    return (React.createElement(Element, { className: cx(`${prefix}--bmrg-modal-form`, className), ...rest, ref: ref },
+        title && React.createElement("p", { className: `${prefix}--bmrg-modal-form__title` }, title),
+        children));
 });
 
 export { ModalForm as default };

package/dist/esm/components/Notifications/NotificationsContainer.js

@@ -4,28 +4,28 @@ import { Close } from '@carbon/react/icons';
 import { injectStyle } from 'react-toastify/dist/inject-style';
 import { prefix } from '../../internal/settings.js';
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-if (typeof window !== "undefined") {
-    injectStyle();
-}
-const CloseButton = ({ closeToast }) => React.createElement(Close, { size: 20, onClick: closeToast });
-class NotificationsContainer extends Component {
-    static defaultProps = {
-        autoClose: 3000,
-        closeOnClick: true,
-        draggablePercent: 60,
-        hideProgressBar: true,
-        pauseOnHover: true,
-        transition: Slide,
-    };
-    render() {
-        const { autoClose, closeOnClick, draggablePercent, hideProgressBar, pauseOnHover, transition, ...rest } = this.props;
-        return (React.createElement(ToastContainer, { className: `${prefix}--bmrg-toastify-container`, autoClose: autoClose, closeButton: React.createElement(CloseButton, null), closeOnClick: closeOnClick, draggablePercent: draggablePercent, hideProgressBar: hideProgressBar, pauseOnHover: pauseOnHover, transition: transition, ...rest }));
-    }
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+if (typeof window !== "undefined") {
+    injectStyle();
+}
+const CloseButton = ({ closeToast }) => React.createElement(Close, { size: 20, onClick: closeToast });
+class NotificationsContainer extends Component {
+    static defaultProps = {
+        autoClose: 3000,
+        closeOnClick: true,
+        draggablePercent: 60,
+        hideProgressBar: true,
+        pauseOnHover: true,
+        transition: Slide,
+    };
+    render() {
+        const { autoClose, closeOnClick, draggablePercent, hideProgressBar, pauseOnHover, transition, ...rest } = this.props;
+        return (React.createElement(ToastContainer, { className: `${prefix}--bmrg-toastify-container`, autoClose: autoClose, closeButton: React.createElement(CloseButton, null), closeOnClick: closeOnClick, draggablePercent: draggablePercent, hideProgressBar: hideProgressBar, pauseOnHover: pauseOnHover, transition: transition, ...rest }));
+    }
 }
 
 export { NotificationsContainer as default };

package/dist/esm/components/Notifications/ToastNotification.js

@@ -2,27 +2,27 @@ import React from 'react';
 import { ToastNotification as ToastNotification$1 } from '@carbon/react';
 import { prefix } from '../../internal/settings.js';
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-// eslint-disable no-unused-vars
-ToastNotification.defaultProps = {
-    kind: "info",
-    title: "",
-    subtitle: "",
-    caption: undefined,
-    role: "alert",
-    notificationType: "toast",
-    iconDescription: "closes notification",
-    onCloseButtonClick: () => { },
-    hideCloseButton: true,
-    timeout: 1000000,
-};
-function ToastNotification({ iconDescription, closeToast, toastProps, notificationType, ...rest }) {
-    return (React.createElement("div", { className: `${prefix}--bmrg-toast-notification-container` },
-        React.createElement(ToastNotification$1, { ...rest })));
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+// eslint-disable no-unused-vars
+ToastNotification.defaultProps = {
+    kind: "info",
+    title: "",
+    subtitle: "",
+    caption: undefined,
+    role: "alert",
+    notificationType: "toast",
+    iconDescription: "closes notification",
+    onCloseButtonClick: () => { },
+    hideCloseButton: true,
+    timeout: 1000000,
+};
+function ToastNotification({ iconDescription, closeToast, toastProps, notificationType, ...rest }) {
+    return (React.createElement("div", { className: `${prefix}--bmrg-toast-notification-container` },
+        React.createElement(ToastNotification$1, { ...rest })));
 }
 
 export { ToastNotification as default };

package/dist/esm/components/Notifications/notify.js

@@ -3,23 +3,23 @@ import { toast } from 'react-toastify';
 import { prefix } from '../../internal/settings.js';
 import ToastNotification from './ToastNotification.js';
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-/** Create notifcation wrapper around react-toastify with default component for basic notification
- * @param {*} notification notifcation content
- * @param {Object} config custom configuration for ToastContainer
- */
-const notify = (notification, config) => {
-    // Check to see if they pass in a component or function
-    // Default passing prop to Notification component
-    const notificationComponent = typeof notification === "object" || typeof notification === "function" ? (notification) : (React.createElement(ToastNotification, { title: notification }));
-    toast(notificationComponent, {
-        className: `${prefix}--bmrg--toast-container`,
-        ...config,
-    });
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+/** Create notifcation wrapper around react-toastify with default component for basic notification
+ * @param {*} notification notifcation content
+ * @param {Object} config custom configuration for ToastContainer
+ */
+const notify = (notification, config) => {
+    // Check to see if they pass in a component or function
+    // Default passing prop to Notification component
+    const notificationComponent = typeof notification === "object" || typeof notification === "function" ? (notification) : (React.createElement(ToastNotification, { title: notification }));
+    toast(notificationComponent, {
+        className: `${prefix}--bmrg--toast-container`,
+        ...config,
+    });
 };
 
 export { notify as default };

package/dist/esm/components/PlatformBanner/PlatformBanner.js

@@ -2,14 +2,14 @@ import React from 'react';
 import { InlineNotification } from '@carbon/react';
 import { prefix } from '../../internal/settings.js';
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-function PlatformBanner({ kind, message, title }) {
-    return (React.createElement("div", { className: `${prefix}--bmrg-banner-container` },
-        React.createElement(InlineNotification, { kind: kind, subtitle: message, title: title })));
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+function PlatformBanner({ kind, message, title }) {
+    return (React.createElement("div", { className: `${prefix}--bmrg-banner-container` },
+        React.createElement(InlineNotification, { kind: kind, subtitle: message, title: title })));
 }
 
 export { PlatformBanner as default };

package/dist/esm/components/PlatformNotifications/PlatformNotification.js

@@ -5,23 +5,23 @@ import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { prefix } from '../../internal/settings.js';
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-dayjs.extend(relativeTime);
-function Notification({ readNotification, data }) {
-    return (React.createElement("div", { className: cx(`${prefix}--bmrg-notification`, {
-            [`--${data.type}`]: data.type,
-        }), "aria-label": `${data.title} notification` },
-        React.createElement("div", { className: `${prefix}--bmrg-notification-content` },
-            React.createElement("div", { className: `${prefix}--bmrg-notification-content__creator` }, data.creator),
-            React.createElement("h2", { className: `${prefix}--bmrg-notification-content__title` }, data.title),
-            React.createElement("p", { className: `${prefix}--bmrg-notification-content__desc` }, data.detail),
-            React.createElement("time", { className: `${prefix}--bmrg-notification-content__date` }, `${dayjs(data.date).fromNow()} at ${dayjs(data.date).format("hh:mma")}`),
-            React.createElement("button", { className: `${prefix}--bmrg-notification-content__close`, onClick: () => readNotification(data.id) },
-                React.createElement(Close, { size: 16, title: "Mark as read icon" })))));
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+dayjs.extend(relativeTime);
+function Notification({ readNotification, data }) {
+    return (React.createElement("div", { className: cx(`${prefix}--bmrg-notification`, {
+            [`--${data.type}`]: data.type,
+        }), "aria-label": `${data.title} notification` },
+        React.createElement("div", { className: `${prefix}--bmrg-notification-content` },
+            React.createElement("div", { className: `${prefix}--bmrg-notification-content__creator` }, data.creator),
+            React.createElement("h2", { className: `${prefix}--bmrg-notification-content__title` }, data.title),
+            React.createElement("p", { className: `${prefix}--bmrg-notification-content__desc` }, data.detail),
+            React.createElement("time", { className: `${prefix}--bmrg-notification-content__date` }, `${dayjs(data.date).fromNow()} at ${dayjs(data.date).format("hh:mma")}`),
+            React.createElement("button", { className: `${prefix}--bmrg-notification-content__close`, onClick: () => readNotification(data.id) },
+                React.createElement(Close, { size: 16, title: "Mark as read icon" })))));
 }
 
 export { Notification as default };

package/dist/esm/components/PlatformNotifications/PlatformNotificationsContainer.js

@@ -4,142 +4,142 @@ import Notification from './PlatformNotification.js';
 import cx from 'classnames';
 import { prefix } from '../../internal/settings.js';
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-class PlatformNotificationsContainer extends React.Component {
-    ws;
-    articleRef = React.createRef();
-    state = {
-        error: false,
-        currentNotifications: this.props.initialNotifications ?? [],
-        numNotifications: this.props.initialNotifications?.length ?? 0,
-    };
-    componentDidMount() {
-        const brokerURL = `${this.props.baseServicesUrl}/notifications/ws`
-            .replace("https://", "wss://")
-            .replace("http://", "ws://");
-        this.ws = new Client({
-            brokerURL,
-            reconnectDelay: 10000,
-        });
-        this.ws.onConnect = this.connect;
-        this.ws.activate();
-    }
-    connect = () => {
-        this.ws.subscribe("/user/queue/notifications", this.receiveNewNotifications);
-        this.ws.subscribe("/user/queue/reply", this.replyRead);
-        this.ws.subscribe("/user/queue/all", this.recieveAllUnreadNotifications);
-        this.ws.publish({ destination: "/app/all", body: {} });
-    };
-    componentWillUnmount() {
-        this.ws.deactivate();
-    }
-    /**
-     * recieve x amount of new notifications and pass them into state of current notifications
-     *
-     */
-    receiveNewNotifications = (incomingNotifications) => {
-        if (incomingNotifications.body) {
-            const data = [JSON.parse(incomingNotifications.body)];
-            if (data.length > 0) {
-                this.props.setHasNewNotifications(true);
-            }
-            this.setState((prevState) => ({
-                currentNotifications: [...data, ...prevState.currentNotifications],
-                numNotifications: prevState.numNotifications + data.length,
-            }), () => {
-                this.props.setNotificationsCount(this.state.numNotifications);
-            });
-        }
-        else {
-            this.setState({
-                error: true, // TOOD something here related to the error
-            });
-        }
-    };
-    /**
-     * overwrite current notifications, the param represents all unread notifications
-     */
-    recieveAllUnreadNotifications = (incomingNotifications) => {
-        if (incomingNotifications.body) {
-            const jsonData = JSON.parse(incomingNotifications.body);
-            const data = jsonData.records;
-            if (data.length > 0) {
-                this.props.setHasNewNotifications(true);
-            }
-            else {
-                // This has to be declared because this function can be triggered from the notification page in Launchpad
-                this.props.setHasNewNotifications(false);
-            }
-            this.setState({
-                currentNotifications: data,
-                numNotifications: data.length,
-            }, () => {
-                this.props.setNotificationsCount(this.state.numNotifications);
-            });
-        }
-        else {
-            this.setState({
-                error: true, // TOOD something here related to the error
-            });
-        }
-    };
-    /**
-     * @param {Object} readResponse - list of notificationIds that have been read
-     * the function removes the notifications from current state that are returned as "read"
-     */
-    replyRead = (readResponse) => {
-        const readIdList = JSON.parse(readResponse.body);
-        this.setState((prevState) => ({
-            currentNotifications: prevState.currentNotifications.filter((el) => readIdList.indexOf(el.id) === -1),
-            numNotifications: prevState.numNotifications - readIdList.length,
-        }), () => {
-            if (this.state.numNotifications === 0) {
-                this.props.setHasNewNotifications(false);
-                this.props.setNotificationsCount(0);
-                // when we clear out notifications, check to to see if there are new notifications available
-                this.ws.publish({ destination: "/app/all", body: {} });
-            }
-        });
-    };
-    /**
-     * notificationId - a single notification that the user has marked as read
-     * @returns {Function} - makes network request, then after waiting for it to return, setState is called to update currentNotifications and numNotifications
-     */
-    handleReadNotification(notificationId) {
-        this.ws.publish({
-            destination: "/app/read",
-            body: JSON.stringify([notificationId]),
-        });
-    }
-    /**
-     * @returns {Function} - makes network request with all remaining notification IDs, then after waiting for it to return, setState is called to empty out currentNotifications and numNotifications
-     */
-    handleReadAllNotifications() {
-        const idList = this.state.currentNotifications.map((notification) => notification.id);
-        this.ws.publish({ destination: "/app/read", body: JSON.stringify(idList) });
-    }
-    renderNotifications() {
-        return this.state.currentNotifications.slice(0, 5).map((notification) => (React.createElement("li", { key: notification.id, "data-testid": "header-notification" },
-            React.createElement(Notification, { readNotification: this.handleReadNotification.bind(this), data: notification }))));
-    }
-    render() {
-        const { numNotifications, currentNotifications } = this.state;
-        const { baseEnvUrl } = this.props;
-        return (React.createElement("div", { "aria-labelledby": this.props["aria-labelledby"], className: cx(`${prefix}--bmrg-notifications`, {
-                "--is-active": this.props.isOpen,
-            }), "data-testid": "header-notifications", id: this.props.id, role: "dialog" },
-            React.createElement("div", { className: `${prefix}--bmrg-notifications-header` },
-                React.createElement("h1", { className: `${prefix}--bmrg-notifications-header__newNotifications` }, `${numNotifications} new notification${numNotifications !== 1 ? "s" : ""}`),
-                React.createElement("button", { className: `${prefix}--bmrg-notifications-header__clear`, "data-testid": "header-notifications-all-read", disabled: !currentNotifications.length, onClick: this.handleReadAllNotifications.bind(this), "aria-label": "Mark all read" }, "Mark All Read")),
-            React.createElement("ul", { className: `${prefix}--bmrg-notifications__collection` }, currentNotifications.length ? (this.renderNotifications()) : (React.createElement("div", { className: `${prefix}--bmrg-notifications-empty` },
-                React.createElement("h1", { className: `${prefix}--bmrg-notifications-empty__no-news` }, "No news is good news, right?")))),
-            React.createElement("div", { className: `${prefix}--bmrg-notifications__notifications-footer` },
-                React.createElement("a", { "aria-label": "Link for notification center", href: `${baseEnvUrl}/launchpad/notifications`, className: `${prefix}--bmrg-notifications__notifications-redirect-link`, "data-testid": "header-notifications-center-link" }, "Open Notification Center"))));
-    }
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+class PlatformNotificationsContainer extends React.Component {
+    ws;
+    articleRef = React.createRef();
+    state = {
+        error: false,
+        currentNotifications: this.props.initialNotifications ?? [],
+        numNotifications: this.props.initialNotifications?.length ?? 0,
+    };
+    componentDidMount() {
+        const brokerURL = `${this.props.baseServicesUrl}/notifications/ws`
+            .replace("https://", "wss://")
+            .replace("http://", "ws://");
+        this.ws = new Client({
+            brokerURL,
+            reconnectDelay: 10000,
+        });
+        this.ws.onConnect = this.connect;
+        this.ws.activate();
+    }
+    connect = () => {
+        this.ws.subscribe("/user/queue/notifications", this.receiveNewNotifications);
+        this.ws.subscribe("/user/queue/reply", this.replyRead);
+        this.ws.subscribe("/user/queue/all", this.recieveAllUnreadNotifications);
+        this.ws.publish({ destination: "/app/all", body: {} });
+    };
+    componentWillUnmount() {
+        this.ws.deactivate();
+    }
+    /**
+     * recieve x amount of new notifications and pass them into state of current notifications
+     *
+     */
+    receiveNewNotifications = (incomingNotifications) => {
+        if (incomingNotifications.body) {
+            const data = [JSON.parse(incomingNotifications.body)];
+            if (data.length > 0) {
+                this.props.setHasNewNotifications(true);
+            }
+            this.setState((prevState) => ({
+                currentNotifications: [...data, ...prevState.currentNotifications],
+                numNotifications: prevState.numNotifications + data.length,
+            }), () => {
+                this.props.setNotificationsCount(this.state.numNotifications);
+            });
+        }
+        else {
+            this.setState({
+                error: true, // TOOD something here related to the error
+            });
+        }
+    };
+    /**
+     * overwrite current notifications, the param represents all unread notifications
+     */
+    recieveAllUnreadNotifications = (incomingNotifications) => {
+        if (incomingNotifications.body) {
+            const jsonData = JSON.parse(incomingNotifications.body);
+            const data = jsonData.records;
+            if (data.length > 0) {
+                this.props.setHasNewNotifications(true);
+            }
+            else {
+                // This has to be declared because this function can be triggered from the notification page in Launchpad
+                this.props.setHasNewNotifications(false);
+            }
+            this.setState({
+                currentNotifications: data,
+                numNotifications: data.length,
+            }, () => {
+                this.props.setNotificationsCount(this.state.numNotifications);
+            });
+        }
+        else {
+            this.setState({
+                error: true, // TOOD something here related to the error
+            });
+        }
+    };
+    /**
+     * @param {Object} readResponse - list of notificationIds that have been read
+     * the function removes the notifications from current state that are returned as "read"
+     */
+    replyRead = (readResponse) => {
+        const readIdList = JSON.parse(readResponse.body);
+        this.setState((prevState) => ({
+            currentNotifications: prevState.currentNotifications.filter((el) => readIdList.indexOf(el.id) === -1),
+            numNotifications: prevState.numNotifications - readIdList.length,
+        }), () => {
+            if (this.state.numNotifications === 0) {
+                this.props.setHasNewNotifications(false);
+                this.props.setNotificationsCount(0);
+                // when we clear out notifications, check to to see if there are new notifications available
+                this.ws.publish({ destination: "/app/all", body: {} });
+            }
+        });
+    };
+    /**
+     * notificationId - a single notification that the user has marked as read
+     * @returns {Function} - makes network request, then after waiting for it to return, setState is called to update currentNotifications and numNotifications
+     */
+    handleReadNotification(notificationId) {
+        this.ws.publish({
+            destination: "/app/read",
+            body: JSON.stringify([notificationId]),
+        });
+    }
+    /**
+     * @returns {Function} - makes network request with all remaining notification IDs, then after waiting for it to return, setState is called to empty out currentNotifications and numNotifications
+     */
+    handleReadAllNotifications() {
+        const idList = this.state.currentNotifications.map((notification) => notification.id);
+        this.ws.publish({ destination: "/app/read", body: JSON.stringify(idList) });
+    }
+    renderNotifications() {
+        return this.state.currentNotifications.slice(0, 5).map((notification) => (React.createElement("li", { key: notification.id, "data-testid": "header-notification" },
+            React.createElement(Notification, { readNotification: this.handleReadNotification.bind(this), data: notification }))));
+    }
+    render() {
+        const { numNotifications, currentNotifications } = this.state;
+        const { baseEnvUrl } = this.props;
+        return (React.createElement("div", { "aria-labelledby": this.props["aria-labelledby"], className: cx(`${prefix}--bmrg-notifications`, {
+                "--is-active": this.props.isOpen,
+            }), "data-testid": "header-notifications", id: this.props.id, role: "dialog" },
+            React.createElement("div", { className: `${prefix}--bmrg-notifications-header` },
+                React.createElement("h1", { className: `${prefix}--bmrg-notifications-header__newNotifications` }, `${numNotifications} new notification${numNotifications !== 1 ? "s" : ""}`),
+                React.createElement("button", { className: `${prefix}--bmrg-notifications-header__clear`, "data-testid": "header-notifications-all-read", disabled: !currentNotifications.length, onClick: this.handleReadAllNotifications.bind(this), "aria-label": "Mark all read" }, "Mark All Read")),
+            React.createElement("ul", { className: `${prefix}--bmrg-notifications__collection` }, currentNotifications.length ? (this.renderNotifications()) : (React.createElement("div", { className: `${prefix}--bmrg-notifications-empty` },
+                React.createElement("h1", { className: `${prefix}--bmrg-notifications-empty__no-news` }, "No news is good news, right?")))),
+            React.createElement("div", { className: `${prefix}--bmrg-notifications__notifications-footer` },
+                React.createElement("a", { "aria-label": "Link for notification center", href: `${baseEnvUrl}/launchpad/notifications`, className: `${prefix}--bmrg-notifications__notifications-redirect-link`, "data-testid": "header-notifications-center-link" }, "Open Notification Center"))));
+    }
 }
 
 export { PlatformNotificationsContainer as default };

package/dist/esm/components/Portal/Portal.js

@@ -1,20 +1,20 @@
 import { createPortal } from 'react-dom';
 import usePortal from '../../hooks/usePortal.js';
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-/**
- * @example
- * <Portal>
- *   <p>Thinking with portals</p>
- * </Portal>
- */
-const Portal = ({ id, children }) => {
-    const target = usePortal(id);
-    return createPortal(children, target);
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+/**
+ * @example
+ * <Portal>
+ *   <p>Thinking with portals</p>
+ * </Portal>
+ */
+const Portal = ({ id, children }) => {
+    const target = usePortal(id);
+    return createPortal(children, target);
 };
 
 export { Portal as default };