@carbon/ibm-products 2.43.2-canary.30 → 2.43.2-canary.301

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -7,30 +7,24 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var react = require('@carbon/react');
+var icons = require('@carbon/react/icons');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
-var utils = require('./utils.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
+var utils = require('./utils.js');
 var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
-var react = require('@carbon/react');
-var icons = require('@carbon/react/icons');
+var wrapFocus = require('../../global/js/utils/wrapFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useClickOutside = require('../../global/js/hooks/useClickOutside.js');
 var NotificationsEmptyState = require('../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var _Close;
-var _excluded = ["className", "data", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hourAgoText", "hoursAgoText", "minuteAgoText", "minutesAgoText", "monthAgoText", "monthsAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearAgoText", "yearsAgoText", "yesterdayAtText", "yesterdayLabel"];
+var _excluded = ["className", "data", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hourAgoText", "hoursAgoText", "minuteAgoText", "minutesAgoText", "monthAgoText", "monthsAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearAgoText", "yearsAgoText", "yesterdayAtText", "yesterdayLabel", "selectorsFloatingMenus", "triggerButtonRef"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var componentName = 'NotificationsPanel';
@@ -89,7 +83,7 @@ var defaults = {
   },
   yesterdayLabel: 'Yesterday'
 };
-exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     data = _ref.data,
     _ref$daysAgoText = _ref.daysAgoText,
@@ -150,8 +144,13 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     yesterdayAtText = _ref$yesterdayAtText === void 0 ? defaults.yesterdayAtText : _ref$yesterdayAtText,
     _ref$yesterdayLabel = _ref.yesterdayLabel,
     yesterdayLabel = _ref$yesterdayLabel === void 0 ? defaults.yesterdayLabel : _ref$yesterdayLabel,
+    selectorsFloatingMenus = _ref.selectorsFloatingMenus,
+    triggerButtonRef = _ref.triggerButtonRef,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var notificationPanelRef = React.useRef();
+  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),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     shouldRender = _useState2[0],
@@ -163,24 +162,77 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
   var previousState = usePreviousValue.usePreviousValue({
     open: open
   });
-  var reducedMotion = usePrefersReducedMotion["default"]();
+  var reducedMotion = usePrefersReducedMotion.default();
+  var carbonPrefix = react.usePrefix();
   React.useEffect(function () {
     // Set the notifications passed to the state within this component
     setAllNotifications(data);
   }, [data]);
   useClickOutside.useClickOutside(ref || notificationPanelRef, function () {
     onClickOutside();
+    setTimeout(function () {
+      var _triggerButtonRef$cur;
+      triggerButtonRef === null || triggerButtonRef === void 0 || (_triggerButtonRef$cur = triggerButtonRef.current) === null || _triggerButtonRef$cur === void 0 || _triggerButtonRef$cur.focus();
+    }, 0);
   });
   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 === 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 === void 0 ? void 0 : parentElement.querySelector(".".concat(blockClass, "__dismiss-button"));
+        button === null || button === void 0 || button.focus();
+      } else {
+        observer.observe(document.body, {
+          childList: true,
+          subtree: true
+        });
+      }
+      return function () {
+        return observer.disconnect();
+      };
     }
   }, [open]);
   var onAnimationEnd = function onAnimationEnd() {
     // initialize the notification panel to close
     !open && setRender(false);
   };
+  var handleBlur = function handleBlur(_ref2) {
+    var oldActiveNode = _ref2.target,
+      currentActiveNode = _ref2.relatedTarget;
+    if (open && currentActiveNode && oldActiveNode && notificationPanelInnerRef.current) {
+      var bodyNode = notificationPanelInnerRef.current;
+      var startSentinelNode = startSentinel.current;
+      var endSentinelNode = endSentinel.current;
+      wrapFocus.default({
+        bodyNode: bodyNode,
+        startTrapNode: startSentinelNode,
+        endTrapNode: endSentinelNode,
+        currentActiveNode: currentActiveNode,
+        oldActiveNode: oldActiveNode,
+        selectorsFloatingMenus: selectorsFloatingMenus === null || selectorsFloatingMenus === void 0 ? void 0 : selectorsFloatingMenus.filter(Boolean)
+      });
+    }
+  };
+  var handleKeydown = function handleKeydown(event) {
+    event.stopPropagation();
+    if (event.key === 'Escape') {
+      onClickOutside();
+      setTimeout(function () {
+        var _triggerButtonRef$cur2;
+        triggerButtonRef === null || triggerButtonRef === void 0 || (_triggerButtonRef$cur2 = triggerButtonRef.current) === null || _triggerButtonRef$cur2 === void 0 || _triggerButtonRef$cur2.focus();
+      }, 100);
+    }
+  };
   React.useEffect(function () {
     if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion) {
       setRender(false);
@@ -219,15 +271,15 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     })[0];
     var trimLength = 88;
     var description = notification === null || notification === void 0 ? void 0 : notification['description'];
-    var descriptionClassName = cx__default["default"](["".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__default["default"]([_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__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
+    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__default["default"].createElement(react.Button, {
+    }, description), description.length > trimLength && /*#__PURE__*/React.createElement(react.Button, {
       kind: "ghost",
       size: "sm",
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React__default["default"].createElement(icons.ChevronDown, _rollupPluginBabelHelpers["extends"]({
+        return /*#__PURE__*/React.createElement(icons.ChevronDown, _rollupPluginBabelHelpers.extends({
           size: 16
         }, props));
       },
@@ -249,9 +301,9 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     }, notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel));
   };
   var renderNotification = function renderNotification(group, notification, index) {
-    var notificationClassName = cx__default["default"](["".concat(blockClass, "__notification"), "".concat(blockClass, "__notification-").concat(group)]);
-    var notificationHeaderClassName = cx__default["default"](["".concat(blockClass, "__notification-title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__notification-title-unread"), notification.unread)]);
-    return /*#__PURE__*/React__default["default"].createElement("div", {
+    var notificationClassName = cx(["".concat(blockClass, "__notification"), "".concat(blockClass, "__notification-").concat(group)]);
+    var notificationHeaderClassName = cx(["".concat(blockClass, "__notification-title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__notification-title-unread"), notification.unread)]);
+    return /*#__PURE__*/React.createElement("div", {
       key: "".concat(notification.timestamp, "-").concat(notification.title, "-").concat(index),
       className: notificationClassName,
       role: "button",
@@ -265,21 +317,21 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
         }
         event.which === 13 && notification.onNotificationClick(notification);
       }
-    }, notification.type === 'error' && /*#__PURE__*/React__default["default"].createElement(icons.ErrorFilled, {
+    }, notification.type === 'error' && /*#__PURE__*/React.createElement(icons.ErrorFilled, {
       size: 16,
-      className: cx__default["default"](["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-error")])
-    }), notification.type === 'success' && /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkFilled, {
+      className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-error")])
+    }), notification.type === 'success' && /*#__PURE__*/React.createElement(icons.CheckmarkFilled, {
       size: 16,
-      className: cx__default["default"](["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-success")])
-    }), notification.type === 'warning' && /*#__PURE__*/React__default["default"].createElement(icons.WarningAltFilled, {
+      className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-success")])
+    }), notification.type === 'warning' && /*#__PURE__*/React.createElement(icons.WarningAltFilled, {
       size: 16,
-      className: cx__default["default"](["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-warning")])
-    }), notification.type === 'informational' && /*#__PURE__*/React__default["default"].createElement(icons.InformationSquareFilled, {
+      className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-warning")])
+    }), notification.type === 'informational' && /*#__PURE__*/React.createElement(icons.InformationSquareFilled, {
       size: 16,
-      className: cx__default["default"](["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-informational")])
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-informational")])
+    }), /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__notification-content")
-    }, /*#__PURE__*/React__default["default"].createElement("p", {
+    }, /*#__PURE__*/React.createElement("p", {
       className: "".concat(blockClass, "__notification-time-label")
     }, utils.timeAgo({
       previousTime: notification.timestamp,
@@ -295,12 +347,12 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
       yearsAgoText: yearsAgoText,
       yearAgoText: yearAgoText,
       nowText: nowText
-    })), /*#__PURE__*/React__default["default"].createElement("h6", {
+    })), /*#__PURE__*/React.createElement("h6", {
       className: notificationHeaderClassName
-    }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/React__default["default"].createElement(react.Link, _rollupPluginBabelHelpers["extends"]({
+    }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/React.createElement(react.Link, _rollupPluginBabelHelpers.extends({
       href: notification.link.url,
       className: "".concat(blockClass, "__notifications-link")
-    }, propsHelper.prepareProps({}, notification.link, ['text', 'url'])), notification.link.text)), /*#__PURE__*/React__default["default"].createElement(react.IconButton, {
+    }, propsHelper.prepareProps({}, notification.link, ['text', 'url'])), notification.link.text)), /*#__PURE__*/React.createElement(react.IconButton, {
       align: "left",
       kind: "ghost",
       size: "sm",
@@ -309,7 +361,7 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
       onClick: function onClick(event) {
         return dismissSingleNotification(event, notification);
       }
-    }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(icons.Close, {
+    }, _Close || (_Close = /*#__PURE__*/React.createElement(icons.Close, {
       size: 16
     }))));
   };
@@ -318,29 +370,41 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     event.stopPropagation();
     onDismissSingleNotification(notification);
   };
-  var mainSectionClassName = cx__default["default"](["".concat(blockClass, "__main-section"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__main-section-empty"), allNotifications && !allNotifications.length)]);
-  return shouldRender ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  var mainSectionClassName = cx(["".concat(blockClass, "__main-section"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__main-section-empty"), allNotifications && !allNotifications.length)]);
+  return shouldRender ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "".concat(carbonPrefix, "--visually-hidden"),
+    ref: startSentinel
+  }, "Focus sentinel start"), /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
+    role: "dialog",
+    "aria-label": "Notification Panel",
+    onBlur: handleBlur,
+    tabIndex: 0,
+    onKeyDown: handleKeydown
+  }, rest, {
     id: blockClass,
-    className: cx__default["default"](blockClass, className, "".concat(blockClass, "__container")),
+    className: cx(blockClass, className, "".concat(blockClass, "__container")),
     style: {
       animation: !reducedMotion ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : undefined
     },
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
+    ref: notificationPanelInnerRef
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__header-container")
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__header-flex")
-  }, /*#__PURE__*/React__default["default"].createElement("h2", {
+  }, /*#__PURE__*/React.createElement("h2", {
     className: "".concat(blockClass, "__header")
-  }, title), /*#__PURE__*/React__default["default"].createElement(react.Button, {
+  }, title), /*#__PURE__*/React.createElement(react.Button, {
     size: "sm",
     kind: "ghost",
     className: "".concat(blockClass, "__dismiss-button"),
     onClick: function onClick() {
       return onDismissAllNotifications();
     }
-  }, dismissAllLabel)), onDoNotDisturbChange && /*#__PURE__*/React__default["default"].createElement(react.Toggle, {
+  }, dismissAllLabel)), onDoNotDisturbChange && /*#__PURE__*/React.createElement(react.Toggle, {
     size: "sm",
     className: "".concat(blockClass, "__do-not-disturb-toggle"),
     id: "".concat(blockClass, "__do-not-disturb-toggle-component"),
@@ -352,38 +416,38 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     defaultToggled: doNotDisturbDefaultToggled,
     "aria-label": doNotDisturbLabel,
     labelText: doNotDisturbLabel
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: mainSectionClassName
-  }, withinLastDayNotifications && withinLastDayNotifications.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("h6", {
+  }, withinLastDayNotifications && withinLastDayNotifications.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h6", {
     className: "".concat(blockClass, "__time-section-label")
   }, todayLabel), withinLastDayNotifications.map(function (notification, index) {
     return renderNotification('today', notification, index);
-  })) : null, previousDayNotifications && previousDayNotifications.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("h6", {
+  })) : null, previousDayNotifications && previousDayNotifications.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h6", {
     className: "".concat(blockClass, "__time-section-label")
   }, yesterdayLabel), previousDayNotifications.map(function (notification, index) {
     return renderNotification('yesterday', notification, index);
-  })) : null, previousNotifications && previousNotifications.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("h6", {
+  })) : null, previousNotifications && previousNotifications.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h6", {
     className: "".concat(blockClass, "__time-section-label")
   }, previousLabel), previousNotifications.map(function (notification, index) {
     return renderNotification('previous', notification, index);
-  })) : null, !allNotifications.length && /*#__PURE__*/React__default["default"].createElement(NotificationsEmptyState.NotificationsEmptyState, {
+  })) : null, !allNotifications.length && /*#__PURE__*/React.createElement(NotificationsEmptyState.NotificationsEmptyState, {
     illustrationTheme: "dark",
     title: "",
     subtitle: emptyStateLabel
-  })), onViewAllClick && onSettingsClick && allNotifications && allNotifications.length ? /*#__PURE__*/React__default["default"].createElement("div", {
+  })), onViewAllClick && onSettingsClick && allNotifications && allNotifications.length ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__bottom-actions")
-  }, /*#__PURE__*/React__default["default"].createElement(react.Button, {
+  }, /*#__PURE__*/React.createElement(react.Button, {
     kind: "ghost",
     className: "".concat(blockClass, "__view-all-button"),
     onClick: function onClick() {
       return onViewAllClick();
     }
-  }, viewAllLabel(allNotifications.length)), /*#__PURE__*/React__default["default"].createElement(react.Button, {
+  }, viewAllLabel(allNotifications.length)), /*#__PURE__*/React.createElement(react.Button, {
     kind: "ghost",
     size: "sm",
     className: "".concat(blockClass, "__settings-button"),
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default["default"].createElement(icons.Settings, _rollupPluginBabelHelpers["extends"]({
+      return /*#__PURE__*/React.createElement(icons.Settings, _rollupPluginBabelHelpers.extends({
         size: 16
       }, props));
     },
@@ -391,7 +455,11 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     onClick: function onClick() {
       return onSettingsClick();
     }
-  })) : null) : null;
+  })) : null)), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "".concat(carbonPrefix, "--visually-hidden"),
+    ref: endSentinel
+  }, "Focus sentinel end")) : null;
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -408,150 +476,158 @@ exports.NotificationsPanel.propTypes = {
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * Array of data for Notifications component to render
    */
   /**@ts-ignore*/
-  data: index["default"].arrayOf(index["default"].shape({
-    id: index["default"].oneOfType([index["default"].string, index["default"].number]),
-    type: index["default"].oneOf(['error', 'warning', 'success', 'informational']),
-    timestamp: index["default"].instanceOf(Date),
-    title: index["default"].string,
-    description: index["default"].string,
-    link: index["default"].shape({
-      url: index["default"].string,
-      text: index["default"].string
+  data: index.default.arrayOf(index.default.shape({
+    id: index.default.oneOfType([index.default.string, index.default.number]),
+    type: index.default.oneOf(['error', 'warning', 'success', 'informational']),
+    timestamp: index.default.instanceOf(Date),
+    title: index.default.string,
+    description: index.default.string,
+    link: index.default.shape({
+      url: index.default.string,
+      text: index.default.string
     }),
-    unread: index["default"].bool,
-    onNotificationClick: index["default"].func
+    unread: index.default.bool,
+    onNotificationClick: index.default.func
   })).isRequired,
   /**
    * Sets the `days ago` label text
    */
-  daysAgoText: index["default"].func,
+  daysAgoText: index.default.func,
   /**
    * Label for Dismiss all button
    */
-  dismissAllLabel: index["default"].string,
+  dismissAllLabel: index.default.string,
   /**
    * Label for Dismiss single notification icon button
    */
-  dismissSingleNotificationIconDescription: index["default"].string,
+  dismissSingleNotificationIconDescription: index.default.string,
   /**
    * Optional: Determines if the `Do not disturb` toggle is on or off when the component is rendered
    */
-  doNotDisturbDefaultToggled: index["default"].bool,
+  doNotDisturbDefaultToggled: index.default.bool,
   /**
    * Optional: Label for Do not disturb toggle
    */
-  doNotDisturbLabel: index["default"].string,
+  doNotDisturbLabel: index.default.string,
   /**
    * Sets the empty state label text when there are no notifications
    */
-  emptyStateLabel: index["default"].string,
+  emptyStateLabel: index.default.string,
   /**
    * Sets the `hour ago` label text
    */
-  hourAgoText: index["default"].func,
+  hourAgoText: index.default.func,
   /**
    * Sets the `hours ago` label text
    */
-  hoursAgoText: index["default"].func,
+  hoursAgoText: index.default.func,
   /**
    * Sets the `minute ago` label text
    */
-  minuteAgoText: index["default"].func,
+  minuteAgoText: index.default.func,
   /**
    * Sets the `minutes ago` label text
    */
-  minutesAgoText: index["default"].func,
+  minutesAgoText: index.default.func,
   /**
    * Sets the `month ago` label text
    */
-  monthAgoText: index["default"].func,
+  monthAgoText: index.default.func,
   /**
    * Sets the `months ago` label text
    */
-  monthsAgoText: index["default"].func,
+  monthsAgoText: index.default.func,
   /**
    * Sets the `now` label text
    */
-  nowText: index["default"].string,
+  nowText: index.default.string,
   /**
    * Sets the notifications panel open state
    */
-  onClickOutside: index["default"].func.isRequired,
+  onClickOutside: index.default.func.isRequired,
   /**
    * Function that will dismiss all notifications
    */
-  onDismissAllNotifications: index["default"].func,
+  onDismissAllNotifications: index.default.func,
   /**
    * Function that will dismiss a single notification
    */
-  onDismissSingleNotification: index["default"].func,
+  onDismissSingleNotification: index.default.func,
   /**
    * Optional: function that returns the current selected value of the disable notification toggle
    */
-  onDoNotDisturbChange: index["default"].func,
+  onDoNotDisturbChange: index.default.func,
   /**
    * Event handler for the View all button
    */
-  onSettingsClick: index["default"].func,
+  onSettingsClick: index.default.func,
   /**
    * Event handler for the View all button
    */
-  onViewAllClick: index["default"].func,
+  onViewAllClick: index.default.func,
   /**
    * Determines whether the notifications panel should render or not
    */
-  open: index["default"].bool.isRequired,
+  open: index.default.bool.isRequired,
   /**
    * Sets the previous label text
    */
-  previousLabel: index["default"].string,
+  previousLabel: index.default.string,
   /**
    * Sets the `read less` label text
    */
-  readLessLabel: index["default"].string,
+  readLessLabel: index.default.string,
   /**
    * Sets the `read more` label text
    */
-  readMoreLabel: index["default"].string,
+  readMoreLabel: index.default.string,
   /**
    * Sets the `seconds ago` label text
    */
-  secondsAgoText: index["default"].func,
+  secondsAgoText: index.default.func,
+  /**
+   * Specify the CSS selectors that match the floating menus
+   */
+  selectorsFloatingMenus: index.default.arrayOf(index.default.string.isRequired),
   /**
    * Sets the settings icon description text
    */
-  settingsIconDescription: index["default"].string,
+  settingsIconDescription: index.default.string,
   /**
    * Sets the title for the Notifications panel
    */
-  title: index["default"].string,
+  title: index.default.string,
+  /**
+   * Sets the today label text
+   */
+  todayLabel: index.default.string,
   /**
    * Sets the today label text
    */
-  todayLabel: index["default"].string,
+  triggerButtonRef: index.default.any,
   /**
    * Sets the View all button text
    */
-  viewAllLabel: index["default"].func,
+  viewAllLabel: index.default.func,
   /**
    * Sets the `year ago` label text
    */
-  yearAgoText: index["default"].func,
+  yearAgoText: index.default.func,
   /**
    * Sets the `years ago` label text
    */
-  yearsAgoText: index["default"].func,
+  yearsAgoText: index.default.func,
   /**
    * Sets the `Yesterday at` label text
    */
-  yesterdayAtText: index["default"].func,
+  yesterdayAtText: index.default.func,
   /**
    * Sets the yesterday label text
    */
-  yesterdayLabel: index["default"].string
+  yesterdayLabel: index.default.string
 };

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

@@ -1 +1,8 @@
-export { NotificationsPanel } from "./NotificationsPanel";
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { NotificationsPanel } from './NotificationsPanel';
+export type { NotificationsPanelProps } from './NotificationsPanel';

package/lib/components/NotificationsPanel/utils.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var timeAgo = function timeAgo(_ref) {
   var previousTime = _ref.previousTime,
     secondsAgoText = _ref.secondsAgoText,

package/lib/components/OptionsTile/OptionsTile.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface OptionsTileProps {
+export interface OptionsTileProps {
     /**
      * Provide content to render as expandable OptionsTile. If no children
      * are present, the OptionsTile will render as its variant.
@@ -45,7 +45,7 @@ interface OptionsTileProps {
      * Provide a function which will be called each time the user
      * interacts with the toggle.
      */
-    onToggle: (value: boolean) => void;
+    onToggle?: (value: boolean) => void;
     /**
      * Whether the OptionsTile is in open state.
      */
@@ -53,7 +53,7 @@ interface OptionsTileProps {
     /**
      * Define the size of the OptionsTile.
      */
-    size: 'lg' | 'xl';
+    size?: 'lg' | 'xl';
     /**
      * Optionally provide a text summarizing the current state of the content.
      */
@@ -76,4 +76,3 @@ interface OptionsTileProps {
     warnText?: string;
 }
 export declare let OptionsTile: React.ForwardRefExoticComponent<OptionsTileProps & React.RefAttributes<HTMLDivElement>>;
-export {};