@carbon/ibm-products 2.61.0-rc.0 → 2.62.0-rc.0

package/lib/components/NotificationsPanel/NotificationsPanel.d.ts

@@ -6,7 +6,8 @@
  */
 import { Link } from '@carbon/react';
 import React, { RefObject } from 'react';
-export type Themes = 'light' | 'dark';
+type Themes = 'light' | 'dark';
+type DateTimeStyles = 'long' | 'short' | 'narrow';
 interface Link {
     url: string;
     text: string;
@@ -30,8 +31,22 @@ export interface NotificationsPanelProps {
      * Array of data for Notifications component to render
      */
     data: Data[];
+    /**
+     * The language for each notification's time stamp.
+     * Used with `dateTimeStyle`.
+     */
+    dateTimeLocale?: string;
+    /**
+     * The date/time format for each notification's time stamp.
+     * Used with `dateTimeLocale`.
+     *
+     * E.g. `long` as "6 minutes ago", `short` as "6m ago".
+     */
+    dateTimeStyle?: DateTimeStyles;
     /**
      * Sets the `days ago` label text
+     *
+     * @deprecated use `dateTimeLocale` instead.
      */
     daysAgoText?: (value: number) => string;
     /**
@@ -56,10 +71,14 @@ export interface NotificationsPanelProps {
     emptyStateLabel?: string;
     /**
      * Sets the `hour ago` label text
+     *
+     * @deprecated use `dateTimeLocale` instead.
      */
     hourAgoText?: (value: number) => string;
     /**
      * Sets the `hours ago` label text
+     *
+     * @deprecated use `dateTimeLocale` instead.
      */
     hoursAgoText?: (value: number) => string;
     /**
@@ -68,22 +87,32 @@ export interface NotificationsPanelProps {
     illustrationTheme: Themes;
     /**
      * Sets the `minute ago` label text
+     *
+     * @deprecated use `dateTimeLocale` instead.
      */
     minuteAgoText?: (value: number) => string;
     /**
      * Sets the `minutes ago` label text
+     *
+     * @deprecated use `dateTimeLocale` instead.
      */
     minutesAgoText?: (value: number) => string;
     /**
      * Sets the `month ago` label text
+     *
+     * @deprecated use `dateTimeLocale` instead.
      */
     monthAgoText?: (value: number) => string;
     /**
      * Sets the `months ago` label text
+     *
+     * @deprecated use `dateTimeLocale` instead.
      */
     monthsAgoText?: (value: number) => string;
     /**
      * Sets the `now` label text
+     *
+     * @deprecated use `dateTimeLocale` instead.
      */
     nowText?: string;
     /**
@@ -128,6 +157,8 @@ export interface NotificationsPanelProps {
     readMoreLabel?: string;
     /**
      * Sets the `seconds ago` label text
+     *
+     * @deprecated use `dateTimeLocale` instead.
      */
     secondsAgoText?: (value: number) => string;
     /**
@@ -152,14 +183,20 @@ export interface NotificationsPanelProps {
     viewAllLabel?: (value: number) => string;
     /**
      * Sets the `year ago` label text
+     *
+     * @deprecated use `dateTimeLocale` instead.
      */
     yearAgoText?: (value: number) => string;
     /**
      * Sets the `years ago` label text
+     *
+     * @deprecated use `dateTimeLocale` instead.
      */
     yearsAgoText?: (value: number) => string;
     /**
      * Sets the `Yesterday at` label text
+     *
+     * @deprecated use `dateTimeLocale` instead.
      */
     yesterdayAtText?: (value: number) => string;
     /**
@@ -167,5 +204,20 @@ export interface NotificationsPanelProps {
      */
     yesterdayLabel?: string;
 }
+/**
+ * The `NotificationsPanel` sets expectations on the behavior for notifications,
+ * allowing the user to view and interact with them all in one place.
+ *
+ * **To adopt the new localization:**
+ *
+ * **Step 1:** Provide a locale to the `dateTimeLocale` prop, such as "de" or "fr-CA".
+ *
+ * **Step 2:** Remove the now _deprecated_ props: `daysAgoText`,
+ * `hourAgoText`, `hoursAgoText`, `minuteAgoText`, `minutesAgoText`,
+ * `monthAgoText`, `monthsAgoText`, `nowText`, `secondsAgoText`,
+ * `yearAgoText`, `yearsAgoText`, `yesterdayAtText`.
+ *
+ * If you do not provide a locale, the deprecated props will be applied instead.
+ */
 export declare let NotificationsPanel: React.ForwardRefExoticComponent<NotificationsPanelProps & React.RefAttributes<unknown>>;
 export {};

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -9,6 +9,7 @@
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var react = require('@carbon/react');
+var utilities = require('@carbon/utilities');
 var icons = require('@carbon/react/icons');
 var React = require('react');
 require('../EmptyStates/EmptyState.js');
@@ -21,22 +22,25 @@ var NotificationsEmptyState = require('../EmptyStates/NotificationsEmptyState/No
 require('../EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js');
 var index = require('../../_virtual/index.js');
 var cx = require('classnames');
+var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
 var devtools = require('../../global/js/utils/devtools.js');
-var settings = require('../../settings.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
-var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
+var getSupportedLocale = require('../../global/js/utils/getSupportedLocale.js');
+var settings = require('../../settings.js');
 var utils = require('./utils.js');
-var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
+var usePresence = require('../../global/js/hooks/usePresence.js');
 var useClickOutside = require('../../global/js/hooks/useClickOutside.js');
 
 var _Close;
-var _excluded = ["className", "data", "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"];
+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(settings.pkg.prefix, "--notifications-panel");
+var DefaultLocale = 'en-US';
 // Default values for props
 var defaults = {
+  dateTimeStyle: 'long',
   daysAgoText: function daysAgoText(value) {
     return "".concat(value, " days ago");
   },
@@ -89,126 +93,139 @@ var defaults = {
   },
   yesterdayLabel: 'Yesterday'
 };
+/**
+ * The `NotificationsPanel` sets expectations on the behavior for notifications,
+ * allowing the user to view and interact with them all in one place.
+ *
+ * **To adopt the new localization:**
+ *
+ * **Step 1:** Provide a locale to the `dateTimeLocale` prop, such as "de" or "fr-CA".
+ *
+ * **Step 2:** Remove the now _deprecated_ props: `daysAgoText`,
+ * `hourAgoText`, `hoursAgoText`, `minuteAgoText`, `minutesAgoText`,
+ * `monthAgoText`, `monthsAgoText`, `nowText`, `secondsAgoText`,
+ * `yearAgoText`, `yearsAgoText`, `yesterdayAtText`.
+ *
+ * If you do not provide a locale, the deprecated props will be applied instead.
+ */
 exports.NotificationsPanel = /*#__PURE__*/React.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 === undefined ? defaults.daysAgoText : _ref$daysAgoText,
+    daysAgoText = _ref$daysAgoText === void 0 ? defaults.daysAgoText : _ref$daysAgoText,
     _ref$dismissAllLabel = _ref.dismissAllLabel,
-    dismissAllLabel = _ref$dismissAllLabel === undefined ? defaults.dismissAllLabel : _ref$dismissAllLabel,
+    dismissAllLabel = _ref$dismissAllLabel === void 0 ? defaults.dismissAllLabel : _ref$dismissAllLabel,
     _ref$dismissSingleNot = _ref.dismissSingleNotificationIconDescription,
-    dismissSingleNotificationIconDescription = _ref$dismissSingleNot === undefined ? defaults.dismissSingleNotificationIconDescription : _ref$dismissSingleNot,
+    dismissSingleNotificationIconDescription = _ref$dismissSingleNot === void 0 ? defaults.dismissSingleNotificationIconDescription : _ref$dismissSingleNot,
     doNotDisturbDefaultToggled = _ref.doNotDisturbDefaultToggled,
     _ref$doNotDisturbLabe = _ref.doNotDisturbLabel,
-    doNotDisturbLabel = _ref$doNotDisturbLabe === undefined ? defaults.doNotDisturbLabel : _ref$doNotDisturbLabe,
+    doNotDisturbLabel = _ref$doNotDisturbLabe === void 0 ? defaults.doNotDisturbLabel : _ref$doNotDisturbLabe,
     _ref$emptyStateLabel = _ref.emptyStateLabel,
-    emptyStateLabel = _ref$emptyStateLabel === undefined ? defaults.emptyStateLabel : _ref$emptyStateLabel,
+    emptyStateLabel = _ref$emptyStateLabel === void 0 ? defaults.emptyStateLabel : _ref$emptyStateLabel,
     _ref$hourAgoText = _ref.hourAgoText,
-    hourAgoText = _ref$hourAgoText === undefined ? defaults.hourAgoText : _ref$hourAgoText,
+    hourAgoText = _ref$hourAgoText === void 0 ? defaults.hourAgoText : _ref$hourAgoText,
     _ref$hoursAgoText = _ref.hoursAgoText,
-    hoursAgoText = _ref$hoursAgoText === undefined ? defaults.hoursAgoText : _ref$hoursAgoText,
+    hoursAgoText = _ref$hoursAgoText === void 0 ? defaults.hoursAgoText : _ref$hoursAgoText,
     _ref$illustrationThem = _ref.illustrationTheme,
-    illustrationTheme = _ref$illustrationThem === undefined ? defaults.illustrationTheme : _ref$illustrationThem,
+    illustrationTheme = _ref$illustrationThem === void 0 ? defaults.illustrationTheme : _ref$illustrationThem,
     _ref$minuteAgoText = _ref.minuteAgoText,
-    minuteAgoText = _ref$minuteAgoText === undefined ? defaults.minuteAgoText : _ref$minuteAgoText,
+    minuteAgoText = _ref$minuteAgoText === void 0 ? defaults.minuteAgoText : _ref$minuteAgoText,
     _ref$minutesAgoText = _ref.minutesAgoText,
-    minutesAgoText = _ref$minutesAgoText === undefined ? defaults.minutesAgoText : _ref$minutesAgoText,
+    minutesAgoText = _ref$minutesAgoText === void 0 ? defaults.minutesAgoText : _ref$minutesAgoText,
     _ref$monthAgoText = _ref.monthAgoText,
-    monthAgoText = _ref$monthAgoText === undefined ? defaults.monthAgoText : _ref$monthAgoText,
+    monthAgoText = _ref$monthAgoText === void 0 ? defaults.monthAgoText : _ref$monthAgoText,
     _ref$monthsAgoText = _ref.monthsAgoText,
-    monthsAgoText = _ref$monthsAgoText === undefined ? defaults.monthsAgoText : _ref$monthsAgoText,
+    monthsAgoText = _ref$monthsAgoText === void 0 ? defaults.monthsAgoText : _ref$monthsAgoText,
     _ref$nowText = _ref.nowText,
-    nowText = _ref$nowText === undefined ? defaults.nowText : _ref$nowText,
+    nowText = _ref$nowText === void 0 ? defaults.nowText : _ref$nowText,
     onClickOutside = _ref.onClickOutside,
     _ref$onDismissAllNoti = _ref.onDismissAllNotifications,
-    onDismissAllNotifications = _ref$onDismissAllNoti === undefined ? defaults.onDismissAllNotifications : _ref$onDismissAllNoti,
+    onDismissAllNotifications = _ref$onDismissAllNoti === void 0 ? defaults.onDismissAllNotifications : _ref$onDismissAllNoti,
     _ref$onDismissSingleN = _ref.onDismissSingleNotification,
-    onDismissSingleNotification = _ref$onDismissSingleN === undefined ? defaults.onDismissSingleNotification : _ref$onDismissSingleN,
+    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 === undefined ? defaults.previousLabel : _ref$previousLabel,
+    previousLabel = _ref$previousLabel === void 0 ? defaults.previousLabel : _ref$previousLabel,
     _ref$readLessLabel = _ref.readLessLabel,
-    readLessLabel = _ref$readLessLabel === undefined ? defaults.readLessLabel : _ref$readLessLabel,
+    readLessLabel = _ref$readLessLabel === void 0 ? defaults.readLessLabel : _ref$readLessLabel,
     _ref$readMoreLabel = _ref.readMoreLabel,
-    readMoreLabel = _ref$readMoreLabel === undefined ? defaults.readMoreLabel : _ref$readMoreLabel,
+    readMoreLabel = _ref$readMoreLabel === void 0 ? defaults.readMoreLabel : _ref$readMoreLabel,
     _ref$secondsAgoText = _ref.secondsAgoText,
-    secondsAgoText = _ref$secondsAgoText === undefined ? defaults.secondsAgoText : _ref$secondsAgoText,
+    secondsAgoText = _ref$secondsAgoText === void 0 ? defaults.secondsAgoText : _ref$secondsAgoText,
     _ref$settingsIconDesc = _ref.settingsIconDescription,
-    settingsIconDescription = _ref$settingsIconDesc === undefined ? defaults.settingsIconDescription : _ref$settingsIconDesc,
+    settingsIconDescription = _ref$settingsIconDesc === void 0 ? defaults.settingsIconDescription : _ref$settingsIconDesc,
     _ref$title = _ref.title,
-    title = _ref$title === undefined ? defaults.title : _ref$title,
+    title = _ref$title === void 0 ? defaults.title : _ref$title,
     _ref$todayLabel = _ref.todayLabel,
-    todayLabel = _ref$todayLabel === undefined ? defaults.todayLabel : _ref$todayLabel,
+    todayLabel = _ref$todayLabel === void 0 ? defaults.todayLabel : _ref$todayLabel,
     _ref$viewAllLabel = _ref.viewAllLabel,
-    viewAllLabel = _ref$viewAllLabel === undefined ? defaults.viewAllLabel : _ref$viewAllLabel,
+    viewAllLabel = _ref$viewAllLabel === void 0 ? defaults.viewAllLabel : _ref$viewAllLabel,
     _ref$yearAgoText = _ref.yearAgoText,
-    yearAgoText = _ref$yearAgoText === undefined ? defaults.yearAgoText : _ref$yearAgoText,
+    yearAgoText = _ref$yearAgoText === void 0 ? defaults.yearAgoText : _ref$yearAgoText,
     _ref$yearsAgoText = _ref.yearsAgoText,
-    yearsAgoText = _ref$yearsAgoText === undefined ? defaults.yearsAgoText : _ref$yearsAgoText,
+    yearsAgoText = _ref$yearsAgoText === void 0 ? defaults.yearsAgoText : _ref$yearsAgoText,
     _ref$yesterdayAtText = _ref.yesterdayAtText,
-    yesterdayAtText = _ref$yesterdayAtText === undefined ? defaults.yesterdayAtText : _ref$yesterdayAtText,
+    yesterdayAtText = _ref$yesterdayAtText === void 0 ? defaults.yesterdayAtText : _ref$yesterdayAtText,
     _ref$yesterdayLabel = _ref.yesterdayLabel,
-    yesterdayLabel = _ref$yesterdayLabel === undefined ? defaults.yesterdayLabel : _ref$yesterdayLabel,
+    yesterdayLabel = _ref$yesterdayLabel === void 0 ? defaults.yesterdayLabel : _ref$yesterdayLabel,
     triggerButtonRef = _ref.triggerButtonRef,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var notificationPanelRef = React.useRef(null);
   var notificationPanelInnerRef = React.useRef(null);
   var startSentinel = React.useRef(null);
   var endSentinel = React.useRef(null);
-  var _useState = React.useState(open),
+  var _useState = React.useState([]),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    shouldRender = _useState2[0],
-    setRender = _useState2[1];
-  var _useState3 = React.useState([]),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    allNotifications = _useState4[0],
-    setAllNotifications = _useState4[1];
-  var previousState = usePreviousValue.usePreviousValue({
-    open: open
-  });
-  var reducedMotion = usePrefersReducedMotion.usePrefersReducedMotion();
+    allNotifications = _useState2[0],
+    setAllNotifications = _useState2[1];
+  var supportedLocale = getSupportedLocale.getSupportedLocale(dateTimeLocale, DefaultLocale);
   var carbonPrefix = react.usePrefix();
+  var reducedMotion = usePrefersReducedMotion.usePrefersReducedMotion();
+  var exitAnimationName = reducedMotion ? 'notifications-panel-exit-reduced' : 'notifications-panel-fade-out';
+  var _usePresence = usePresence.usePresence(open, notificationPanelRef, exitAnimationName),
+    shouldRender = _usePresence.shouldRender;
   React.useEffect(function () {
     // Set the notifications passed to the state within this component
     setAllNotifications(data);
   }, [data]);
   useClickOutside.useClickOutside(ref || notificationPanelRef, function () {
-    onClickOutside === null || onClickOutside === undefined || onClickOutside();
+    onClickOutside === null || onClickOutside === void 0 || onClickOutside();
     setTimeout(function () {
       var _triggerButtonRef$cur;
-      triggerButtonRef === null || triggerButtonRef === undefined || (_triggerButtonRef$cur = triggerButtonRef.current) === null || _triggerButtonRef$cur === undefined || _triggerButtonRef$cur.focus();
+      triggerButtonRef === null || triggerButtonRef === void 0 || (_triggerButtonRef$cur = triggerButtonRef.current) === null || _triggerButtonRef$cur === void 0 || _triggerButtonRef$cur.focus();
     }, 0);
   });
   var handleKeydown = function handleKeydown(event) {
     event.stopPropagation();
     if (event.key === 'Escape') {
-      setRender(false);
-      onClickOutside === null || onClickOutside === undefined || onClickOutside();
+      onClickOutside === null || onClickOutside === void 0 || onClickOutside();
       setTimeout(function () {
         var _triggerButtonRef$cur2;
-        triggerButtonRef === null || triggerButtonRef === undefined || (_triggerButtonRef$cur2 = triggerButtonRef.current) === null || _triggerButtonRef$cur2 === undefined || _triggerButtonRef$cur2.focus();
+        triggerButtonRef === null || triggerButtonRef === void 0 || (_triggerButtonRef$cur2 = triggerButtonRef.current) === null || _triggerButtonRef$cur2 === void 0 || _triggerButtonRef$cur2.focus();
       }, 100);
     }
   };
   React.useEffect(function () {
     // initialize the notification panel to open
     if (open) {
-      setRender(true);
       var observer = new MutationObserver(function () {
         if (notificationPanelRef.current) {
           var _querySelector;
           var parentElement = notificationPanelRef.current;
-          parentElement === null || parentElement === undefined || (_querySelector = parentElement.querySelector(".".concat(blockClass, "__dismiss-button"))) === null || _querySelector === undefined || _querySelector.focus();
+          parentElement === null || parentElement === void 0 || (_querySelector = parentElement.querySelector(".".concat(blockClass, "__dismiss-button"))) === null || _querySelector === void 0 || _querySelector.focus();
           observer.disconnect();
         }
       });
       if (notificationPanelRef.current) {
         var parentElement = notificationPanelRef.current;
-        var button = parentElement === null || parentElement === undefined ? undefined : parentElement.querySelector(".".concat(blockClass, "__dismiss-button"));
-        button === null || button === undefined || button.focus();
+        var button = parentElement === null || parentElement === void 0 ? void 0 : parentElement.querySelector(".".concat(blockClass, "__dismiss-button"));
+        button === null || button === void 0 || button.focus();
       } else {
         observer.observe(document.body, {
           childList: true,
@@ -220,17 +237,6 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       };
     }
   }, [open]);
-  var onAnimationEnd = function onAnimationEnd() {
-    // initialize the notification panel to close
-    if (!open) {
-      setRender(false);
-    }
-  };
-  React.useEffect(function () {
-    if (!open && previousState !== null && previousState !== undefined && previousState.open && reducedMotion) {
-      setRender(false);
-    }
-  }, [open, previousState === null || previousState === undefined ? undefined : previousState.open, reducedMotion]);
   var sortChronologically = function sortChronologically(arr) {
     if (!arr || arr && !arr.length) {
       return;
@@ -263,9 +269,9 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       return item.id === id;
     })[0];
     var trimLength = 88;
-    var description = notification === null || notification === undefined ? undefined : notification['description'];
-    var descriptionClassName = cx(["".concat(blockClass, "__notification-description"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__notification-long-description"), notification === null || notification === undefined ? undefined : notification['showAll']), "".concat(blockClass, "__notification-short-description"), !(notification !== null && notification !== undefined && notification['showAll']))]);
-    var showMoreButtonClassName = cx([_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__notification-read-less-button"), notification === null || notification === undefined ? undefined : notification['showAll']), "".concat(blockClass, "__notification-read-more-button"), !(notification !== null && notification !== undefined && notification['showAll']))]);
+    var description = notification === null || notification === void 0 ? void 0 : notification['description'];
+    var descriptionClassName = cx(["".concat(blockClass, "__notification-description"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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([_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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']))]);
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
       className: descriptionClassName
     }, description), description.length > trimLength && /*#__PURE__*/React.createElement(react.Button, {
@@ -276,14 +282,14 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
           size: 16
         }, props));
       },
-      iconDescription: notification !== null && notification !== undefined && notification['showAll'] ? readLessLabel : readMoreLabel,
+      iconDescription: notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel,
       onClick: function onClick(event) {
         event.preventDefault();
         event.stopPropagation();
         var newData = allNotifications.map(function (item) {
-          if (item.id === (notification === null || notification === undefined ? undefined : notification['id'])) {
+          if (item.id === (notification === null || notification === void 0 ? void 0 : notification['id'])) {
             return Object.assign({}, item, {
-              showAll: !(item !== null && item !== undefined && item['showAll'])
+              showAll: !(item !== null && item !== void 0 && item['showAll'])
             });
           }
           return item;
@@ -291,7 +297,7 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
         setAllNotifications(newData);
       },
       className: showMoreButtonClassName
-    }, notification !== null && notification !== undefined && notification['showAll'] ? readLessLabel : readMoreLabel));
+    }, notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel));
   };
   var renderNotification = function renderNotification(group, notification, index) {
     var notificationClassName = cx(["".concat(blockClass, "__notification"), "".concat(blockClass, "__notification-").concat(group)]);
@@ -328,7 +334,10 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       className: "".concat(blockClass, "__notification-content")
     }, /*#__PURE__*/React.createElement("p", {
       className: "".concat(blockClass, "__notification-time-label")
-    }, utils.timeAgo({
+    }, dateTimeLocale ? utilities.dateTimeFormat.relative.format(notification.timestamp, {
+      locale: supportedLocale,
+      style: dateTimeStyle
+    }) : utils.timeAgo({
       previousTime: notification.timestamp,
       secondsAgoText: secondsAgoText,
       minuteAgoText: minuteAgoText,
@@ -378,7 +387,6 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   }, rest, {
     id: blockClass,
     className: cx(blockClass, className, "".concat(blockClass, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__entrance"), open), "".concat(blockClass, "__exit"), !open)),
-    onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
     ref: notificationPanelInnerRef
@@ -481,6 +489,16 @@ exports.NotificationsPanel.propTypes = {
     unread: index.default.bool,
     onNotificationClick: index.default.func
   })).isRequired,
+  /**
+   * The language for each notification's time stamp.
+   */
+  dateTimeLocale: index.default.string,
+  /**
+   * The date/time format for each notification's time stamp.
+   *
+   * E.g. `long` as "6 minutes ago", `short` as "6m ago".
+   */
+  dateTimeStyle: index.default.string,
   /**
    * Sets the `days ago` label text
    */

package/lib/components/OptionsTile/OptionsTile.js

@@ -59,7 +59,7 @@ exports.OptionsTile = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onToggle = props.onToggle,
     userOpen = props.open,
     _props$size = props.size,
-    size = _props$size === undefined ? defaults.size : _props$size,
+    size = _props$size === void 0 ? defaults.size : _props$size,
     summary = props.summary,
     title = props.title,
     userDefinedTitleId = props.titleId,
@@ -70,13 +70,13 @@ exports.OptionsTile = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     closing = _useState2[0],
     setClosing = _useState2[1];
-  var _useControllableState = useControllableState.useControllableState(userOpen !== null && userOpen !== undefined ? userOpen : false, onChange),
+  var _useControllableState = useControllableState.useControllableState(userOpen !== null && userOpen !== void 0 ? userOpen : false, onChange),
     _useControllableState2 = _rollupPluginBabelHelpers.slicedToArray(_useControllableState, 2),
     open = _useControllableState2[0],
     setOpen = _useControllableState2[1];
   var detailsRef = React.useRef(null);
   var contentRef = React.useRef(null);
-  var titleId = userDefinedTitleId !== null && userDefinedTitleId !== undefined ? userDefinedTitleId : "".concat(uuidv4.default(), "-title");
+  var titleId = userDefinedTitleId !== null && userDefinedTitleId !== void 0 ? userDefinedTitleId : "".concat(uuidv4.default(), "-title");
   var isExpandable = children !== undefined;
   var isWarn = !invalid && warn;
   var isLocked = !invalid && !isWarn && locked;
@@ -198,6 +198,7 @@ exports.OptionsTile = /*#__PURE__*/React.forwardRef(function (props, ref) {
     size: "sm",
     disabled: isLocked
   })), isExpandable ? /*#__PURE__*/React.createElement("details", {
+    className: "".concat(blockClass, "__details"),
     open: open,
     ref: detailsRef
   }, /*#__PURE__*/React.createElement("summary", {

package/lib/components/PageHeader/PageHeader.js

@@ -60,10 +60,10 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     enableBreadcrumbScroll = _ref.enableBreadcrumbScroll,
     expandHeaderIconDescription = _ref.expandHeaderIconDescription,
     _ref$fullWidthGrid = _ref.fullWidthGrid,
-    fullWidthGrid = _ref$fullWidthGrid === undefined ? defaults.fullWidthGrid : _ref$fullWidthGrid,
+    fullWidthGrid = _ref$fullWidthGrid === void 0 ? defaults.fullWidthGrid : _ref$fullWidthGrid,
     hasCollapseHeaderToggle = _ref.hasCollapseHeaderToggle,
     _ref$narrowGrid = _ref.narrowGrid,
-    narrowGrid = _ref$narrowGrid === undefined ? defaults.narrowGrid : _ref$narrowGrid,
+    narrowGrid = _ref$narrowGrid === void 0 ? defaults.narrowGrid : _ref$narrowGrid,
     navigation = _ref.navigation,
     pageActions = _ref.pageActions,
     pageActionsOverflowLabel = _ref.pageActionsOverflowLabel,
@@ -74,20 +74,20 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     title = _ref.title,
     withoutBackground = _ref.withoutBackground,
     _ref$breadcrumbOverfl = _ref.breadcrumbOverflowTooltipAlign,
-    breadcrumbOverflowTooltipAlign = _ref$breadcrumbOverfl === undefined ? defaults.breadcrumbOverflowTooltipAlign : _ref$breadcrumbOverfl,
+    breadcrumbOverflowTooltipAlign = _ref$breadcrumbOverfl === void 0 ? defaults.breadcrumbOverflowTooltipAlign : _ref$breadcrumbOverfl,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   // handle deprecated props - START
   // if withoutBackground is nullish check deprecated_hasBackgroundAlways and default false
-  withoutBackground !== null && withoutBackground !== undefined ? withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== undefined ? deprecated_hasBackgroundAlways : true);
+  withoutBackground !== null && withoutBackground !== void 0 ? withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== void 0 ? deprecated_hasBackgroundAlways : true);
   // prefer enabled if nullish check deprecated_disableBreadcrumbScroll and default false
-  enableBreadcrumbScroll !== null && enableBreadcrumbScroll !== undefined ? enableBreadcrumbScroll : enableBreadcrumbScroll = !(deprecated_disableBreadcrumbScroll !== null && deprecated_disableBreadcrumbScroll !== undefined ? deprecated_disableBreadcrumbScroll : true);
+  enableBreadcrumbScroll !== null && enableBreadcrumbScroll !== void 0 ? enableBreadcrumbScroll : enableBreadcrumbScroll = !(deprecated_disableBreadcrumbScroll !== null && deprecated_disableBreadcrumbScroll !== void 0 ? deprecated_disableBreadcrumbScroll : true);
   // handle deprecated props - END
 
   var _useState = React.useState({}),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     metrics = _useState2[0],
     setMetrics = _useState2[1];
-  var _useState3 = React.useState(_rollupPluginBabelHelpers.objectSpread2({}, rest === null || rest === undefined ? undefined : rest.style)),
+  var _useState3 = React.useState(_rollupPluginBabelHelpers.objectSpread2({}, rest === null || rest === void 0 ? void 0 : rest.style)),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     pageHeaderStyles = _useState4[0],
     setPageHeaderStyles = _useState4[1];
@@ -102,7 +102,7 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   // state based on props only
   var hasActionBar = actionBarItems && actionBarItems.length > 0;
   var hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems;
-  if (tags && (tags === null || tags === undefined ? undefined : tags.length) > 10) {
+  if (tags && (tags === null || tags === void 0 ? void 0 : tags.length) > 10) {
     if (!allTagsModalSearchLabel) {
       throw new Error("allTagsModalSearchLabel' is required.");
     }
@@ -180,7 +180,7 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (minWidth !== actionBarMinWidth || maxWidth !== actionBarMaxWidth) {
       var _overflowMenuRef$curr;
       var overflowMenuWidth = 0;
-      var overflowMenu = overflowMenuRef === null || overflowMenuRef === undefined || (_overflowMenuRef$curr = overflowMenuRef.current) === null || _overflowMenuRef$curr === undefined ? undefined : _overflowMenuRef$curr.querySelector(".".concat(prefix, "--overflow-menu"));
+      var overflowMenu = overflowMenuRef === null || overflowMenuRef === void 0 || (_overflowMenuRef$curr = overflowMenuRef.current) === null || _overflowMenuRef$curr === void 0 ? void 0 : _overflowMenuRef$curr.querySelector(".".concat(prefix, "--overflow-menu"));
       if (overflowMenu) {
         overflowMenuWidth = overflowMenu.offsetWidth;
       }
@@ -220,13 +220,13 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     checkUpdateVerticalSpace();
   };
   var handleCollapseToggle = function handleCollapseToggle() {
-    PageHeaderUtils.utilSetCollapsed(!fullyCollapsed, headerRef, metrics === null || metrics === undefined ? undefined : metrics.headerOffset, metrics === null || metrics === undefined ? undefined : metrics.headerTopValue);
+    PageHeaderUtils.utilSetCollapsed(!fullyCollapsed, headerRef, metrics === null || metrics === void 0 ? void 0 : metrics.headerOffset, metrics === null || metrics === void 0 ? void 0 : metrics.headerTopValue);
   };
 
   // use effects
   React.useEffect(function () {
     /* istanbul ignore else */
-    if (pageActions !== null && pageActions !== undefined && pageActions.content) {
+    if (pageActions !== null && pageActions !== void 0 && pageActions.content) {
       var _ref5 = pageActions,
         minWidth = _ref5.minWidth,
         maxWidth = _ref5.maxWidth;
@@ -239,8 +239,8 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   React.useEffect(function () {
     // Determine the location of the pageAction buttons
     /* istanbul ignore next */
-    if (metrics !== null && metrics !== undefined && metrics.titleRowSpaceAbove && metrics !== null && metrics !== undefined && metrics.pageActionsSpaceAbove) {
-      setPageActionsInBreadcrumbRow(collapseTitle || hasActionBar && scrollYValue > (metrics === null || metrics === undefined ? undefined : metrics.titleRowSpaceAbove) || widthIsNarrow && scrollYValue > (metrics === null || metrics === undefined ? undefined : metrics.pageActionsSpaceAbove));
+    if (metrics !== null && metrics !== void 0 && metrics.titleRowSpaceAbove && metrics !== null && metrics !== void 0 && metrics.pageActionsSpaceAbove) {
+      setPageActionsInBreadcrumbRow(collapseTitle || hasActionBar && scrollYValue > (metrics === null || metrics === void 0 ? void 0 : metrics.titleRowSpaceAbove) || widthIsNarrow && scrollYValue > (metrics === null || metrics === void 0 ? void 0 : metrics.pageActionsSpaceAbove));
     }
   }, [hasActionBar, metrics.breadcrumbRowSpaceBelow, metrics.titleRowSpaceAbove, metrics.pageActionsSpaceAbove, collapseTitle, scrollYValue, widthIsNarrow]);
   React.useEffect(function () {
@@ -274,8 +274,8 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     // Updates custom CSS props used to manage scroll behavior
     /* istanbul ignore next */
     setPageHeaderStyles(function (prev) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(PageHeaderUtils.blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(PageHeaderUtils.blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(PageHeaderUtils.blockClass, "--header-top"), "".concat(((metrics === null || metrics === undefined ? undefined : metrics.headerTopValue) || 0) + ((metrics === null || metrics === undefined ? undefined : metrics.headerOffset) || 0), "px")), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(PageHeaderUtils.blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-top"), "".concat(metrics.breadcrumbTitleHeight && metrics.titleRowSpaceAbove && Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-opacity"), "".concat(Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
-      )))), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-row-width-px"), "".concat(metrics === null || metrics === undefined ? undefined : metrics.breadcrumbRowWidth, "px")));
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(PageHeaderUtils.blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(PageHeaderUtils.blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(PageHeaderUtils.blockClass, "--header-top"), "".concat(((metrics === null || metrics === void 0 ? void 0 : metrics.headerTopValue) || 0) + ((metrics === null || metrics === void 0 ? void 0 : metrics.headerOffset) || 0), "px")), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(PageHeaderUtils.blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-top"), "".concat(metrics.breadcrumbTitleHeight && metrics.titleRowSpaceAbove && Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-opacity"), "".concat(Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
+      )))), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-row-width-px"), "".concat(metrics === null || metrics === void 0 ? void 0 : metrics.breadcrumbRowWidth, "px")));
     });
   }, [headerRef, enableBreadcrumbScroll, metrics, metrics.breadcrumbRowHeight, metrics.breadcrumbRowSpaceBelow, metrics.breadcrumbTitleHeight, metrics.breadcrumbRowWidth, metrics.headerHeight, metrics.headerWidth, metrics.headerOffset, metrics.headerTopValue, metrics.navigationRowHeight, navigation, scrollYValue, tags]);
   useWindowScroll.useNearestScroll(headerRef,
@@ -291,7 +291,7 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
     // set offset for tagset tooltip
     /* istanbul ignore next */
-    var tagsetTooltipOffset = fullyCollapsed && metrics !== null && metrics !== undefined && metrics.headerHeight && metrics !== null && metrics !== undefined && metrics.headerTopValue && metrics !== null && metrics !== undefined && metrics.headerOffset ? metrics.headerHeight + metrics.headerTopValue + metrics.headerOffset : (metrics.headerHeight || 0) + (metrics.headerOffset || 0);
+    var tagsetTooltipOffset = fullyCollapsed && metrics !== null && metrics !== void 0 && metrics.headerHeight && metrics !== null && metrics !== void 0 && metrics.headerTopValue && metrics !== null && metrics !== void 0 && metrics.headerOffset ? metrics.headerHeight + metrics.headerTopValue + metrics.headerOffset : (metrics.headerHeight || 0) + (metrics.headerOffset || 0);
 
     /* istanbul ignore next */
     document.documentElement.style.setProperty("--".concat(PageHeaderUtils.blockClass, "--tagset-tooltip-position"), fullyCollapsed ? 'fixed' : 'absolute');
@@ -311,14 +311,14 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   React.useEffect(function () {
     // Determines the appropriate header background opacity based on the header config/height/scroll and the withoutBackground setting
     var result = withoutBackground ? 0 : 1;
-    if (!result && metrics !== null && metrics !== undefined && metrics.headerHeight && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
+    if (!result && metrics !== null && metrics !== void 0 && metrics.headerHeight && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
       var startAddingAt = parseFloat("".concat(layout.spacing[9])) * parseInt("".concat(layout.baseFontSize));
       var scrollRemaining = metrics.headerHeight - scrollYValue;
 
       /* don't know how to test resize */
       /* istanbul ignore if */
       if (scrollRemaining < startAddingAt) {
-        var distanceAddingOver = startAddingAt - ((metrics === null || metrics === undefined ? undefined : metrics.breadcrumbRowHeight) || 0);
+        var distanceAddingOver = startAddingAt - ((metrics === null || metrics === void 0 ? void 0 : metrics.breadcrumbRowHeight) || 0);
         result = Math.min(1, (startAddingAt - scrollRemaining) / distanceAddingOver);
       }
     }
@@ -334,7 +334,7 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [withoutBackground, hasCollapseHeaderToggle]);
   React.useEffect(function () {
     // Determine if space is needed in the breadcrumb for a collapse button
-    if (hasCollapseButton && !(navigation || tags) && metrics !== null && metrics !== undefined && metrics.headerHeight) {
+    if (hasCollapseButton && !(navigation || tags) && metrics !== null && metrics !== void 0 && metrics.headerHeight) {
       setSpaceForCollapseButton(true);
     } else {
       setSpaceForCollapseButton(false);
@@ -504,7 +504,7 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         className: cx("".concat(PageHeaderUtils.blockClass, "__page-actions"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__page-actions--in-breadcrumb"), inBreadcrumbRow))
       }, /*#__PURE__*/React.createElement("div", {
         className: cx("".concat(PageHeaderUtils.blockClass, "__page-actions-content"))
-      }, (_content = pageActions === null || pageActions === undefined ? undefined : pageActions.content) !== null && _content !== undefined ? _content : /*#__PURE__*/React.createElement(ButtonSetWithOverflow.ButtonSetWithOverflow, {
+      }, (_content = pageActions === null || pageActions === void 0 ? void 0 : pageActions.content) !== null && _content !== void 0 ? _content : /*#__PURE__*/React.createElement(ButtonSetWithOverflow.ButtonSetWithOverflow, {
         className: "".concat(PageHeaderUtils.blockClass, "__button-set-with-overflow"),
         menuOptionsClass: cx(pageActionsMenuOptionsClass, "".concat(PageHeaderUtils.blockClass, "__button-set-menu-options")),
         onWidthChange: handleWidthChange,