@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { usePrefix, Section, Heading, Button, Toggle, Link, IconButton } from '@carbon/react';
 import { dateTimeFormat } from '@carbon/utilities';
 import { Settings, ErrorFilled, CheckmarkFilled, WarningAltFilled, InformationSquareFilled, Close, ChevronDown } from '@carbon/react/icons';
@@ -31,65 +31,40 @@ import { usePresence } from '../../global/js/hooks/usePresence.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
 
 var _Close;
-var _excluded = ["className", "data", "dateTimeLocale", "dateTimeStyle", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hourAgoText", "hoursAgoText", "illustrationTheme", "minuteAgoText", "minutesAgoText", "monthAgoText", "monthsAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearAgoText", "yearsAgoText", "yesterdayAtText", "yesterdayLabel", "triggerButtonRef"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var componentName = 'NotificationsPanel';
-var blockClass = "".concat(pkg.prefix, "--notifications-panel");
-var DefaultLocale = 'en-US';
+const componentName = 'NotificationsPanel';
+const blockClass = `${pkg.prefix}--notifications-panel`;
+const DefaultLocale = 'en-US';
 // Default values for props
-var defaults = {
+const defaults = {
   dateTimeStyle: 'long',
-  daysAgoText: function daysAgoText(value) {
-    return "".concat(value, " days ago");
-  },
+  daysAgoText: value => `${value} days ago`,
   dismissAllLabel: 'Dismiss all',
   dismissSingleNotificationIconDescription: 'Dismiss',
   doNotDisturbLabel: 'Do not disturb',
   emptyStateLabel: 'You do not have any notifications',
-  hourAgoText: function hourAgoText(value) {
-    return "".concat(value, " hour ago");
-  },
-  hoursAgoText: function hoursAgoText(value) {
-    return "".concat(value, " hours ago");
-  },
+  hourAgoText: value => `${value} hour ago`,
+  hoursAgoText: value => `${value} hours ago`,
   illustrationTheme: 'light',
-  minuteAgoText: function minuteAgoText(value) {
-    return "".concat(value, " minute ago");
-  },
-  minutesAgoText: function minutesAgoText(value) {
-    return "".concat(value, " minutes ago");
-  },
-  monthAgoText: function monthAgoText(value) {
-    return "".concat(value, " month ago");
-  },
-  monthsAgoText: function monthsAgoText(value) {
-    return "".concat(value, " months ago");
-  },
+  minuteAgoText: value => `${value} minute ago`,
+  minutesAgoText: value => `${value} minutes ago`,
+  monthAgoText: value => `${value} month ago`,
+  monthsAgoText: value => `${value} months ago`,
   nowText: 'Now',
-  onDismissAllNotifications: function onDismissAllNotifications() {},
-  onDismissSingleNotification: function onDismissSingleNotification() {},
+  onDismissAllNotifications: () => {},
+  onDismissSingleNotification: () => {},
   previousLabel: 'Previous',
   readLessLabel: 'Read less',
   readMoreLabel: 'Read more',
-  secondsAgoText: function secondsAgoText(value) {
-    return "".concat(value, " seconds ago");
-  },
+  secondsAgoText: value => `${value} seconds ago`,
   settingsIconDescription: 'Settings',
   title: 'Notifications',
   todayLabel: 'Today',
-  viewAllLabel: function viewAllLabel(value) {
-    return "View all (".concat(value, ")");
-  },
-  yearAgoText: function yearAgoText(value) {
-    return "".concat(value, " year ago");
-  },
-  yearsAgoText: function yearsAgoText(value) {
-    return "".concat(value, " years ago");
-  },
-  yesterdayAtText: function yesterdayAtText(value) {
-    return "Yesterday at ".concat(value);
-  },
+  viewAllLabel: value => `View all (${value})`,
+  yearAgoText: value => `${value} year ago`,
+  yearsAgoText: value => `${value} years ago`,
+  yesterdayAtText: value => `Yesterday at ${value}`,
   yesterdayLabel: 'Yesterday'
 };
 /**
@@ -107,189 +82,149 @@ var defaults = {
  *
  * If you do not provide a locale, the deprecated props will be applied instead.
  */
-var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    data = _ref.data,
-    dateTimeLocale = _ref.dateTimeLocale,
-    _ref$dateTimeStyle = _ref.dateTimeStyle,
-    dateTimeStyle = _ref$dateTimeStyle === void 0 ? defaults.dateTimeStyle : _ref$dateTimeStyle,
-    _ref$daysAgoText = _ref.daysAgoText,
-    daysAgoText = _ref$daysAgoText === void 0 ? defaults.daysAgoText : _ref$daysAgoText,
-    _ref$dismissAllLabel = _ref.dismissAllLabel,
-    dismissAllLabel = _ref$dismissAllLabel === void 0 ? defaults.dismissAllLabel : _ref$dismissAllLabel,
-    _ref$dismissSingleNot = _ref.dismissSingleNotificationIconDescription,
-    dismissSingleNotificationIconDescription = _ref$dismissSingleNot === void 0 ? defaults.dismissSingleNotificationIconDescription : _ref$dismissSingleNot,
-    doNotDisturbDefaultToggled = _ref.doNotDisturbDefaultToggled,
-    _ref$doNotDisturbLabe = _ref.doNotDisturbLabel,
-    doNotDisturbLabel = _ref$doNotDisturbLabe === void 0 ? defaults.doNotDisturbLabel : _ref$doNotDisturbLabe,
-    _ref$emptyStateLabel = _ref.emptyStateLabel,
-    emptyStateLabel = _ref$emptyStateLabel === void 0 ? defaults.emptyStateLabel : _ref$emptyStateLabel,
-    _ref$hourAgoText = _ref.hourAgoText,
-    hourAgoText = _ref$hourAgoText === void 0 ? defaults.hourAgoText : _ref$hourAgoText,
-    _ref$hoursAgoText = _ref.hoursAgoText,
-    hoursAgoText = _ref$hoursAgoText === void 0 ? defaults.hoursAgoText : _ref$hoursAgoText,
-    _ref$illustrationThem = _ref.illustrationTheme,
-    illustrationTheme = _ref$illustrationThem === void 0 ? defaults.illustrationTheme : _ref$illustrationThem,
-    _ref$minuteAgoText = _ref.minuteAgoText,
-    minuteAgoText = _ref$minuteAgoText === void 0 ? defaults.minuteAgoText : _ref$minuteAgoText,
-    _ref$minutesAgoText = _ref.minutesAgoText,
-    minutesAgoText = _ref$minutesAgoText === void 0 ? defaults.minutesAgoText : _ref$minutesAgoText,
-    _ref$monthAgoText = _ref.monthAgoText,
-    monthAgoText = _ref$monthAgoText === void 0 ? defaults.monthAgoText : _ref$monthAgoText,
-    _ref$monthsAgoText = _ref.monthsAgoText,
-    monthsAgoText = _ref$monthsAgoText === void 0 ? defaults.monthsAgoText : _ref$monthsAgoText,
-    _ref$nowText = _ref.nowText,
-    nowText = _ref$nowText === void 0 ? defaults.nowText : _ref$nowText,
-    onClickOutside = _ref.onClickOutside,
-    _ref$onDismissAllNoti = _ref.onDismissAllNotifications,
-    onDismissAllNotifications = _ref$onDismissAllNoti === void 0 ? defaults.onDismissAllNotifications : _ref$onDismissAllNoti,
-    _ref$onDismissSingleN = _ref.onDismissSingleNotification,
-    onDismissSingleNotification = _ref$onDismissSingleN === void 0 ? defaults.onDismissSingleNotification : _ref$onDismissSingleN,
-    onDoNotDisturbChange = _ref.onDoNotDisturbChange,
-    onSettingsClick = _ref.onSettingsClick,
-    onViewAllClick = _ref.onViewAllClick,
-    open = _ref.open,
-    _ref$previousLabel = _ref.previousLabel,
-    previousLabel = _ref$previousLabel === void 0 ? defaults.previousLabel : _ref$previousLabel,
-    _ref$readLessLabel = _ref.readLessLabel,
-    readLessLabel = _ref$readLessLabel === void 0 ? defaults.readLessLabel : _ref$readLessLabel,
-    _ref$readMoreLabel = _ref.readMoreLabel,
-    readMoreLabel = _ref$readMoreLabel === void 0 ? defaults.readMoreLabel : _ref$readMoreLabel,
-    _ref$secondsAgoText = _ref.secondsAgoText,
-    secondsAgoText = _ref$secondsAgoText === void 0 ? defaults.secondsAgoText : _ref$secondsAgoText,
-    _ref$settingsIconDesc = _ref.settingsIconDescription,
-    settingsIconDescription = _ref$settingsIconDesc === void 0 ? defaults.settingsIconDescription : _ref$settingsIconDesc,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? defaults.title : _ref$title,
-    _ref$todayLabel = _ref.todayLabel,
-    todayLabel = _ref$todayLabel === void 0 ? defaults.todayLabel : _ref$todayLabel,
-    _ref$viewAllLabel = _ref.viewAllLabel,
-    viewAllLabel = _ref$viewAllLabel === void 0 ? defaults.viewAllLabel : _ref$viewAllLabel,
-    _ref$yearAgoText = _ref.yearAgoText,
-    yearAgoText = _ref$yearAgoText === void 0 ? defaults.yearAgoText : _ref$yearAgoText,
-    _ref$yearsAgoText = _ref.yearsAgoText,
-    yearsAgoText = _ref$yearsAgoText === void 0 ? defaults.yearsAgoText : _ref$yearsAgoText,
-    _ref$yesterdayAtText = _ref.yesterdayAtText,
-    yesterdayAtText = _ref$yesterdayAtText === void 0 ? defaults.yesterdayAtText : _ref$yesterdayAtText,
-    _ref$yesterdayLabel = _ref.yesterdayLabel,
-    yesterdayLabel = _ref$yesterdayLabel === void 0 ? defaults.yesterdayLabel : _ref$yesterdayLabel,
-    triggerButtonRef = _ref.triggerButtonRef,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var notificationPanelRef = useRef(null);
-  var notificationPanelInnerRef = useRef(null);
-  var startSentinel = useRef(null);
-  var endSentinel = useRef(null);
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    allNotifications = _useState2[0],
-    setAllNotifications = _useState2[1];
-  var supportedLocale = getSupportedLocale(dateTimeLocale, DefaultLocale);
-  var carbonPrefix = usePrefix();
-  var headingId = useId();
-  var reducedMotion = usePrefersReducedMotion();
-  var exitAnimationName = reducedMotion ? 'notifications-panel-exit-reduced' : 'notifications-panel-fade-out';
-  var _usePresence = usePresence(open, notificationPanelRef, exitAnimationName),
-    shouldRender = _usePresence.shouldRender;
-  useEffect(function () {
+let NotificationsPanel = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    className,
+    data,
+    dateTimeLocale,
+    dateTimeStyle = defaults.dateTimeStyle,
+    daysAgoText = defaults.daysAgoText,
+    dismissAllLabel = defaults.dismissAllLabel,
+    dismissSingleNotificationIconDescription = defaults.dismissSingleNotificationIconDescription,
+    doNotDisturbDefaultToggled,
+    doNotDisturbLabel = defaults.doNotDisturbLabel,
+    emptyStateLabel = defaults.emptyStateLabel,
+    hourAgoText = defaults.hourAgoText,
+    hoursAgoText = defaults.hoursAgoText,
+    illustrationTheme = defaults.illustrationTheme,
+    minuteAgoText = defaults.minuteAgoText,
+    minutesAgoText = defaults.minutesAgoText,
+    monthAgoText = defaults.monthAgoText,
+    monthsAgoText = defaults.monthsAgoText,
+    nowText = defaults.nowText,
+    onClickOutside,
+    onDismissAllNotifications = defaults.onDismissAllNotifications,
+    onDismissSingleNotification = defaults.onDismissSingleNotification,
+    onDoNotDisturbChange,
+    onSettingsClick,
+    onViewAllClick,
+    open,
+    previousLabel = defaults.previousLabel,
+    readLessLabel = defaults.readLessLabel,
+    readMoreLabel = defaults.readMoreLabel,
+    secondsAgoText = defaults.secondsAgoText,
+    settingsIconDescription = defaults.settingsIconDescription,
+    title = defaults.title,
+    todayLabel = defaults.todayLabel,
+    viewAllLabel = defaults.viewAllLabel,
+    yearAgoText = defaults.yearAgoText,
+    yearsAgoText = defaults.yearsAgoText,
+    yesterdayAtText = defaults.yesterdayAtText,
+    yesterdayLabel = defaults.yesterdayLabel,
+    triggerButtonRef,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const notificationPanelRef = useRef(null);
+  const notificationPanelInnerRef = useRef(null);
+  useRef(null);
+  useRef(null);
+  const [allNotifications, setAllNotifications] = useState([]);
+  const supportedLocale = getSupportedLocale(dateTimeLocale, DefaultLocale);
+  usePrefix();
+  const headingId = useId();
+  const reducedMotion = usePrefersReducedMotion();
+  const exitAnimationName = reducedMotion ? 'notifications-panel-exit-reduced' : 'notifications-panel-fade-out';
+  const {
+    shouldRender
+  } = usePresence(open, notificationPanelRef, exitAnimationName);
+  useEffect(() => {
     // Set the notifications passed to the state within this component
     setAllNotifications(data);
   }, [data]);
-  useClickOutside(ref || notificationPanelRef, function () {
-    onClickOutside === null || onClickOutside === void 0 || onClickOutside();
-    setTimeout(function () {
-      var _triggerButtonRef$cur;
-      triggerButtonRef === null || triggerButtonRef === void 0 || (_triggerButtonRef$cur = triggerButtonRef.current) === null || _triggerButtonRef$cur === void 0 || _triggerButtonRef$cur.focus();
-    }, 0);
+  useClickOutside(ref || notificationPanelRef, () => {
+    onClickOutside?.();
   });
-  var handleKeydown = function handleKeydown(event) {
+  const handleKeydown = event => {
     event.stopPropagation();
     if (event.key === 'Escape') {
-      onClickOutside === null || onClickOutside === void 0 || onClickOutside();
-      setTimeout(function () {
-        var _triggerButtonRef$cur2;
-        triggerButtonRef === null || triggerButtonRef === void 0 || (_triggerButtonRef$cur2 = triggerButtonRef.current) === null || _triggerButtonRef$cur2 === void 0 || _triggerButtonRef$cur2.focus();
+      onClickOutside?.();
+      setTimeout(() => {
+        triggerButtonRef?.current?.focus();
       }, 100);
     }
   };
-  useEffect(function () {
+  useEffect(() => {
     // initialize the notification panel to open
     if (open) {
-      var observer = new MutationObserver(function () {
+      const observer = new MutationObserver(() => {
         if (notificationPanelRef.current) {
-          var _querySelector;
-          var parentElement = notificationPanelRef.current;
-          parentElement === null || parentElement === void 0 || (_querySelector = parentElement.querySelector(".".concat(blockClass, "__dismiss-button"))) === null || _querySelector === void 0 || _querySelector.focus();
+          const parentElement = notificationPanelRef.current;
+          parentElement?.querySelector(`.${blockClass}__dismiss-button`)?.focus();
           observer.disconnect();
         }
       });
       if (notificationPanelRef.current) {
-        var parentElement = notificationPanelRef.current;
-        var button = parentElement === null || parentElement === void 0 ? void 0 : parentElement.querySelector(".".concat(blockClass, "__dismiss-button"));
-        button === null || button === void 0 || button.focus();
+        const parentElement = notificationPanelRef.current;
+        const button = parentElement?.querySelector(`.${blockClass}__dismiss-button`);
+        button?.focus();
       } else {
         observer.observe(document.body, {
           childList: true,
           subtree: true
         });
       }
-      return function () {
-        return observer.disconnect();
-      };
+      return () => observer.disconnect();
     }
   }, [open]);
-  var sortChronologically = function sortChronologically(arr) {
+  const sortChronologically = arr => {
     if (!arr || arr && !arr.length) {
       return;
     }
-    return arr.sort(function (a, b) {
-      return b.timestamp - a.timestamp;
-    });
+    return arr.sort((a, b) => b.timestamp - a.timestamp);
   };
 
   // Notifications should be grouped by "Today", "Yesterday", and "Previous", the variables
   // below filter the notifications based on those conditions and then render them in those groups
-  var yesterdayDate = new Date();
+  let yesterdayDate = new Date();
   yesterdayDate = new Date(yesterdayDate.setDate(yesterdayDate.getDate() - 1));
-  var dayBeforeYesterdayDate = new Date();
+  let dayBeforeYesterdayDate = new Date();
   dayBeforeYesterdayDate = new Date(dayBeforeYesterdayDate.setDate(dayBeforeYesterdayDate.getDate() - 2));
-  var withinLastDayNotifications = allNotifications && allNotifications.length && allNotifications.filter(function (item) {
-    return item.timestamp.getTime() >= yesterdayDate.getTime();
-  });
+  let withinLastDayNotifications = allNotifications && allNotifications.length && allNotifications.filter(item => item.timestamp.getTime() >= yesterdayDate.getTime());
   withinLastDayNotifications = sortChronologically(withinLastDayNotifications);
-  var previousDayNotifications = allNotifications && allNotifications.length && allNotifications.filter(function (item) {
-    return item.timestamp.getTime() < yesterdayDate.getTime() && item.timestamp.getTime() >= dayBeforeYesterdayDate.getTime();
-  });
+  let previousDayNotifications = allNotifications && allNotifications.length && allNotifications.filter(item => item.timestamp.getTime() < yesterdayDate.getTime() && item.timestamp.getTime() >= dayBeforeYesterdayDate.getTime());
   previousDayNotifications = sortChronologically(previousDayNotifications);
-  var previousNotifications = allNotifications && allNotifications.length && allNotifications.filter(function (item) {
-    return item.timestamp.getTime() < dayBeforeYesterdayDate.getTime();
-  });
+  let previousNotifications = allNotifications && allNotifications.length && allNotifications.filter(item => item.timestamp.getTime() < dayBeforeYesterdayDate.getTime());
   previousNotifications = sortChronologically(previousNotifications);
-  var renderDescription = function renderDescription(id) {
-    var notification = allNotifications && allNotifications.length && allNotifications.filter(function (item) {
-      return item.id === id;
-    })[0];
-    var trimLength = 88;
-    var description = notification === null || notification === void 0 ? void 0 : notification['description'];
-    var descriptionClassName = cx(["".concat(blockClass, "__notification-description"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-long-description"), notification === null || notification === void 0 ? void 0 : notification['showAll']), "".concat(blockClass, "__notification-short-description"), !(notification !== null && notification !== void 0 && notification['showAll']))]);
-    var showMoreButtonClassName = cx([_defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-read-less-button"), notification === null || notification === void 0 ? void 0 : notification['showAll']), "".concat(blockClass, "__notification-read-more-button"), !(notification !== null && notification !== void 0 && notification['showAll']))]);
+  const renderDescription = id => {
+    const notification = allNotifications && allNotifications.length && allNotifications.filter(item => item.id === id)[0];
+    const trimLength = 88;
+    const description = notification?.['description'];
+    const descriptionClassName = cx([`${blockClass}__notification-description`, {
+      [`${blockClass}__notification-long-description`]: notification?.['showAll'],
+      [`${blockClass}__notification-short-description`]: !notification?.['showAll']
+    }]);
+    const showMoreButtonClassName = cx([{
+      [`${blockClass}__notification-read-less-button`]: notification?.['showAll'],
+      [`${blockClass}__notification-read-more-button`]: !notification?.['showAll']
+    }]);
     return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", {
       className: descriptionClassName
     }, description), description.length > trimLength && /*#__PURE__*/React__default.createElement(Button, {
       kind: "ghost",
       size: "sm",
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React__default.createElement(ChevronDown, _extends({
-          size: 16
-        }, props));
-      },
-      iconDescription: notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel,
-      onClick: function onClick(event) {
+      renderIcon: props => /*#__PURE__*/React__default.createElement(ChevronDown, _extends({
+        size: 16
+      }, props)),
+      iconDescription: notification?.['showAll'] ? readLessLabel : readMoreLabel,
+      onClick: event => {
         event.preventDefault();
         event.stopPropagation();
-        var newData = allNotifications.map(function (item) {
-          if (item.id === (notification === null || notification === void 0 ? void 0 : notification['id'])) {
+        const newData = allNotifications.map(item => {
+          if (item.id === notification?.['id']) {
             return Object.assign({}, item, {
-              showAll: !(item !== null && item !== void 0 && item['showAll'])
+              showAll: !item?.['showAll']
             });
           }
           return item;
@@ -297,22 +232,22 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
         setAllNotifications(newData);
       },
       className: showMoreButtonClassName
-    }, notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel));
+    }, notification?.['showAll'] ? readLessLabel : readMoreLabel));
   };
-  var renderNotification = function renderNotification(group, notification, index) {
-    var notificationClassName = cx(["".concat(blockClass, "__notification"), "".concat(blockClass, "__notification-").concat(group)]);
-    var notificationHeaderClassName = cx(["".concat(blockClass, "__notification-title"), _defineProperty({}, "".concat(blockClass, "__notification-title-unread"), notification.unread)]);
+  const renderNotification = (group, notification, index) => {
+    const notificationClassName = cx([`${blockClass}__notification`, `${blockClass}__notification-${group}`]);
+    const notificationHeaderClassName = cx([`${blockClass}__notification-title`, {
+      [`${blockClass}__notification-title-unread`]: notification.unread
+    }]);
     return /*#__PURE__*/React__default.createElement(Section, {
-      key: "".concat(notification.timestamp, "-").concat(notification.title, "-").concat(index),
+      key: `${notification.timestamp}-${notification.title}-${index}`,
       className: notificationClassName,
       as: "div",
       role: "button",
       tabIndex: 0,
-      onClick: function onClick() {
-        return notification.onNotificationClick(notification);
-      },
-      onKeyDown: function onKeyDown(event) {
-        if (event.target instanceof HTMLElement && event.target.classList.contains("".concat(blockClass, "__dismiss-single-button"))) {
+      onClick: () => notification.onNotificationClick(notification),
+      onKeyDown: event => {
+        if (event.target instanceof HTMLElement && event.target.classList.contains(`${blockClass}__dismiss-single-button`)) {
           return;
         }
         if (event.which === 13) {
@@ -321,66 +256,62 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
       }
     }, notification.type === 'error' && /*#__PURE__*/React__default.createElement(ErrorFilled, {
       size: 16,
-      className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-error")])
+      className: cx([`${blockClass}__notification-status-icon`, `${blockClass}__notification-status-icon-error`])
     }), notification.type === 'success' && /*#__PURE__*/React__default.createElement(CheckmarkFilled, {
       size: 16,
-      className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-success")])
+      className: cx([`${blockClass}__notification-status-icon`, `${blockClass}__notification-status-icon-success`])
     }), notification.type === 'warning' && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
       size: 16,
-      className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-warning")])
+      className: cx([`${blockClass}__notification-status-icon`, `${blockClass}__notification-status-icon-warning`])
     }), notification.type === 'informational' && /*#__PURE__*/React__default.createElement(InformationSquareFilled, {
       size: 16,
-      className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-informational")])
+      className: cx([`${blockClass}__notification-status-icon`, `${blockClass}__notification-status-icon-informational`])
     }), /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(blockClass, "__notification-content")
+      className: `${blockClass}__notification-content`
     }, /*#__PURE__*/React__default.createElement("p", {
-      className: "".concat(blockClass, "__notification-time-label")
+      className: `${blockClass}__notification-time-label`
     }, dateTimeLocale ? dateTimeFormat.relative.format(notification.timestamp, {
       locale: supportedLocale,
       style: dateTimeStyle
     }) : timeAgo({
       previousTime: notification.timestamp,
-      secondsAgoText: secondsAgoText,
-      minuteAgoText: minuteAgoText,
-      minutesAgoText: minutesAgoText,
-      hoursAgoText: hoursAgoText,
-      hourAgoText: hourAgoText,
-      daysAgoText: daysAgoText,
-      yesterdayAtText: yesterdayAtText,
-      monthsAgoText: monthsAgoText,
-      monthAgoText: monthAgoText,
-      yearsAgoText: yearsAgoText,
-      yearAgoText: yearAgoText,
-      nowText: nowText
+      secondsAgoText,
+      minuteAgoText,
+      minutesAgoText,
+      hoursAgoText,
+      hourAgoText,
+      daysAgoText,
+      yesterdayAtText,
+      monthsAgoText,
+      monthAgoText,
+      yearsAgoText,
+      yearAgoText,
+      nowText
     })), /*#__PURE__*/React__default.createElement(Heading, {
       className: notificationHeaderClassName
     }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/React__default.createElement(Link, _extends({
       href: notification.link.url,
-      className: "".concat(blockClass, "__notifications-link")
+      className: `${blockClass}__notifications-link`
     }, prepareProps({}, notification.link, ['text', 'url'])), notification.link.text)), /*#__PURE__*/React__default.createElement(IconButton, {
       align: "left",
       kind: "ghost",
       size: "sm",
       label: dismissSingleNotificationIconDescription,
-      className: "".concat(blockClass, "__dismiss-single-button"),
-      onClick: function onClick(event) {
-        return dismissSingleNotification(event, notification);
-      }
+      className: `${blockClass}__dismiss-single-button`,
+      onClick: event => dismissSingleNotification(event, notification)
     }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, {
       size: 16
     }))));
   };
-  var dismissSingleNotification = function dismissSingleNotification(event, notification) {
+  const dismissSingleNotification = (event, notification) => {
     event.preventDefault();
     event.stopPropagation();
     onDismissSingleNotification(notification);
   };
-  var mainSectionClassName = cx(["".concat(blockClass, "__main-section"), _defineProperty({}, "".concat(blockClass, "__main-section-empty"), allNotifications && !allNotifications.length)]);
-  return shouldRender ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
-    type: "button",
-    className: "".concat(carbonPrefix, "--visually-hidden"),
-    ref: startSentinel
-  }, "Focus sentinel start"), /*#__PURE__*/React__default.createElement(Section, _extends({
+  const mainSectionClassName = cx([`${blockClass}__main-section`, {
+    [`${blockClass}__main-section-empty`]: allNotifications && !allNotifications.length
+  }]);
+  return shouldRender ? /*#__PURE__*/React__default.createElement(Section, _extends({
     as: "div",
     role: "dialog",
     "aria-labelledby": headingId,
@@ -388,76 +319,65 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     tabIndex: 0
   }, rest, {
     id: blockClass,
-    className: cx(blockClass, className, "".concat(blockClass, "__container"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__entrance"), open), "".concat(blockClass, "__exit"), !open)),
+    className: cx(blockClass, className, `${blockClass}__container`, {
+      [`${blockClass}__entrance`]: open,
+      [`${blockClass}__exit`]: !open
+    }),
     ref: ref || notificationPanelRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
     ref: notificationPanelInnerRef
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__header-container")
+    className: `${blockClass}__header-container`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__header-flex")
+    className: `${blockClass}__header-flex`
   }, /*#__PURE__*/React__default.createElement(Heading, {
     id: headingId,
-    className: "".concat(blockClass, "__header")
+    className: `${blockClass}__header`
   }, title), /*#__PURE__*/React__default.createElement(Button, {
     size: "sm",
     kind: "ghost",
-    className: "".concat(blockClass, "__dismiss-button"),
+    className: `${blockClass}__dismiss-button`,
     onClick: onDismissAllNotifications
   }, dismissAllLabel)), onDoNotDisturbChange && /*#__PURE__*/React__default.createElement(Toggle, {
     size: "sm",
-    className: "".concat(blockClass, "__do-not-disturb-toggle"),
-    id: "".concat(blockClass, "__do-not-disturb-toggle-component"),
+    className: `${blockClass}__do-not-disturb-toggle`,
+    id: `${blockClass}__do-not-disturb-toggle-component`,
     labelA: doNotDisturbLabel,
     labelB: doNotDisturbLabel,
-    onToggle: function onToggle(event) {
-      return onDoNotDisturbChange(event);
-    },
+    onToggle: event => onDoNotDisturbChange(event),
     defaultToggled: doNotDisturbDefaultToggled,
     "aria-label": doNotDisturbLabel,
     labelText: doNotDisturbLabel
   })), /*#__PURE__*/React__default.createElement(Section, {
     className: mainSectionClassName
   }, withinLastDayNotifications && withinLastDayNotifications.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Heading, {
-    className: "".concat(blockClass, "__time-section-label")
-  }, todayLabel), withinLastDayNotifications.map(function (notification, index) {
-    return renderNotification('today', notification, index);
-  })) : null, previousDayNotifications && previousDayNotifications.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Heading, {
-    className: "".concat(blockClass, "__time-section-label")
-  }, yesterdayLabel), previousDayNotifications.map(function (notification, index) {
-    return renderNotification('yesterday', notification, index);
-  })) : null, previousNotifications && previousNotifications.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Heading, {
-    className: "".concat(blockClass, "__time-section-label")
-  }, previousLabel), previousNotifications.map(function (notification, index) {
-    return renderNotification('previous', notification, index);
-  })) : null, !allNotifications.length && /*#__PURE__*/React__default.createElement(NotificationsEmptyState, {
+    className: `${blockClass}__time-section-label`
+  }, todayLabel), withinLastDayNotifications.map((notification, index) => renderNotification('today', notification, index))) : null, previousDayNotifications && previousDayNotifications.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Heading, {
+    className: `${blockClass}__time-section-label`
+  }, yesterdayLabel), previousDayNotifications.map((notification, index) => renderNotification('yesterday', notification, index))) : null, previousNotifications && previousNotifications.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Heading, {
+    className: `${blockClass}__time-section-label`
+  }, previousLabel), previousNotifications.map((notification, index) => renderNotification('previous', notification, index))) : null, !allNotifications.length && /*#__PURE__*/React__default.createElement(NotificationsEmptyState, {
     illustrationTheme: illustrationTheme,
     title: "",
     subtitle: emptyStateLabel
   })), onViewAllClick && onSettingsClick && allNotifications && allNotifications.length > 0 && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__bottom-actions")
+    className: `${blockClass}__bottom-actions`
   }, /*#__PURE__*/React__default.createElement(Button, {
     kind: "ghost",
-    className: "".concat(blockClass, "__view-all-button"),
+    className: `${blockClass}__view-all-button`,
     onClick: onViewAllClick
   }, viewAllLabel(allNotifications.length)), /*#__PURE__*/React__default.createElement(Button, {
     kind: "ghost",
     size: "sm",
-    className: "".concat(blockClass, "__settings-button"),
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default.createElement(Settings, _extends({
-        size: 16
-      }, props));
-    },
+    className: `${blockClass}__settings-button`,
+    renderIcon: props => /*#__PURE__*/React__default.createElement(Settings, _extends({
+      size: 16
+    }, props)),
     iconDescription: settingsIconDescription,
     onClick: onSettingsClick,
     hasIconOnly: true,
     tooltipPosition: "left"
-  })))), /*#__PURE__*/React__default.createElement("button", {
-    type: "button",
-    className: "".concat(carbonPrefix, "--visually-hidden"),
-    ref: endSentinel
-  }, "Focus sentinel end")) : null;
+  })))) : null;
 });
 
 // Return a placeholder if not released and not enabled by feature flag