@carbon/ibm-products 2.59.0 → 2.60.0

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -23,14 +23,13 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { timeAgo } from './utils.js';
-import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion.js';
-import wrapFocus from '../../global/js/utils/wrapFocus.js';
+import { usePrefersReducedMotion } from '../../global/js/hooks/usePrefersReducedMotion.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 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", "selectorsFloatingMenus", "triggerButtonRef"];
+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", "triggerButtonRef"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var componentName = 'NotificationsPanel';
@@ -93,64 +92,63 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
   var className = _ref.className,
     data = _ref.data,
     _ref$daysAgoText = _ref.daysAgoText,
-    daysAgoText = _ref$daysAgoText === void 0 ? defaults.daysAgoText : _ref$daysAgoText,
+    daysAgoText = _ref$daysAgoText === undefined ? defaults.daysAgoText : _ref$daysAgoText,
     _ref$dismissAllLabel = _ref.dismissAllLabel,
-    dismissAllLabel = _ref$dismissAllLabel === void 0 ? defaults.dismissAllLabel : _ref$dismissAllLabel,
+    dismissAllLabel = _ref$dismissAllLabel === undefined ? defaults.dismissAllLabel : _ref$dismissAllLabel,
     _ref$dismissSingleNot = _ref.dismissSingleNotificationIconDescription,
-    dismissSingleNotificationIconDescription = _ref$dismissSingleNot === void 0 ? defaults.dismissSingleNotificationIconDescription : _ref$dismissSingleNot,
+    dismissSingleNotificationIconDescription = _ref$dismissSingleNot === undefined ? defaults.dismissSingleNotificationIconDescription : _ref$dismissSingleNot,
     doNotDisturbDefaultToggled = _ref.doNotDisturbDefaultToggled,
     _ref$doNotDisturbLabe = _ref.doNotDisturbLabel,
-    doNotDisturbLabel = _ref$doNotDisturbLabe === void 0 ? defaults.doNotDisturbLabel : _ref$doNotDisturbLabe,
+    doNotDisturbLabel = _ref$doNotDisturbLabe === undefined ? defaults.doNotDisturbLabel : _ref$doNotDisturbLabe,
     _ref$emptyStateLabel = _ref.emptyStateLabel,
-    emptyStateLabel = _ref$emptyStateLabel === void 0 ? defaults.emptyStateLabel : _ref$emptyStateLabel,
+    emptyStateLabel = _ref$emptyStateLabel === undefined ? defaults.emptyStateLabel : _ref$emptyStateLabel,
     _ref$hourAgoText = _ref.hourAgoText,
-    hourAgoText = _ref$hourAgoText === void 0 ? defaults.hourAgoText : _ref$hourAgoText,
+    hourAgoText = _ref$hourAgoText === undefined ? defaults.hourAgoText : _ref$hourAgoText,
     _ref$hoursAgoText = _ref.hoursAgoText,
-    hoursAgoText = _ref$hoursAgoText === void 0 ? defaults.hoursAgoText : _ref$hoursAgoText,
+    hoursAgoText = _ref$hoursAgoText === undefined ? defaults.hoursAgoText : _ref$hoursAgoText,
     _ref$minuteAgoText = _ref.minuteAgoText,
-    minuteAgoText = _ref$minuteAgoText === void 0 ? defaults.minuteAgoText : _ref$minuteAgoText,
+    minuteAgoText = _ref$minuteAgoText === undefined ? defaults.minuteAgoText : _ref$minuteAgoText,
     _ref$minutesAgoText = _ref.minutesAgoText,
-    minutesAgoText = _ref$minutesAgoText === void 0 ? defaults.minutesAgoText : _ref$minutesAgoText,
+    minutesAgoText = _ref$minutesAgoText === undefined ? defaults.minutesAgoText : _ref$minutesAgoText,
     _ref$monthAgoText = _ref.monthAgoText,
-    monthAgoText = _ref$monthAgoText === void 0 ? defaults.monthAgoText : _ref$monthAgoText,
+    monthAgoText = _ref$monthAgoText === undefined ? defaults.monthAgoText : _ref$monthAgoText,
     _ref$monthsAgoText = _ref.monthsAgoText,
-    monthsAgoText = _ref$monthsAgoText === void 0 ? defaults.monthsAgoText : _ref$monthsAgoText,
+    monthsAgoText = _ref$monthsAgoText === undefined ? defaults.monthsAgoText : _ref$monthsAgoText,
     _ref$nowText = _ref.nowText,
-    nowText = _ref$nowText === void 0 ? defaults.nowText : _ref$nowText,
+    nowText = _ref$nowText === undefined ? defaults.nowText : _ref$nowText,
     onClickOutside = _ref.onClickOutside,
     _ref$onDismissAllNoti = _ref.onDismissAllNotifications,
-    onDismissAllNotifications = _ref$onDismissAllNoti === void 0 ? defaults.onDismissAllNotifications : _ref$onDismissAllNoti,
+    onDismissAllNotifications = _ref$onDismissAllNoti === undefined ? defaults.onDismissAllNotifications : _ref$onDismissAllNoti,
     _ref$onDismissSingleN = _ref.onDismissSingleNotification,
-    onDismissSingleNotification = _ref$onDismissSingleN === void 0 ? defaults.onDismissSingleNotification : _ref$onDismissSingleN,
+    onDismissSingleNotification = _ref$onDismissSingleN === undefined ? 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,
+    previousLabel = _ref$previousLabel === undefined ? defaults.previousLabel : _ref$previousLabel,
     _ref$readLessLabel = _ref.readLessLabel,
-    readLessLabel = _ref$readLessLabel === void 0 ? defaults.readLessLabel : _ref$readLessLabel,
+    readLessLabel = _ref$readLessLabel === undefined ? defaults.readLessLabel : _ref$readLessLabel,
     _ref$readMoreLabel = _ref.readMoreLabel,
-    readMoreLabel = _ref$readMoreLabel === void 0 ? defaults.readMoreLabel : _ref$readMoreLabel,
+    readMoreLabel = _ref$readMoreLabel === undefined ? defaults.readMoreLabel : _ref$readMoreLabel,
     _ref$secondsAgoText = _ref.secondsAgoText,
-    secondsAgoText = _ref$secondsAgoText === void 0 ? defaults.secondsAgoText : _ref$secondsAgoText,
+    secondsAgoText = _ref$secondsAgoText === undefined ? defaults.secondsAgoText : _ref$secondsAgoText,
     _ref$settingsIconDesc = _ref.settingsIconDescription,
-    settingsIconDescription = _ref$settingsIconDesc === void 0 ? defaults.settingsIconDescription : _ref$settingsIconDesc,
+    settingsIconDescription = _ref$settingsIconDesc === undefined ? defaults.settingsIconDescription : _ref$settingsIconDesc,
     _ref$title = _ref.title,
-    title = _ref$title === void 0 ? defaults.title : _ref$title,
+    title = _ref$title === undefined ? defaults.title : _ref$title,
     _ref$todayLabel = _ref.todayLabel,
-    todayLabel = _ref$todayLabel === void 0 ? defaults.todayLabel : _ref$todayLabel,
+    todayLabel = _ref$todayLabel === undefined ? defaults.todayLabel : _ref$todayLabel,
     _ref$viewAllLabel = _ref.viewAllLabel,
-    viewAllLabel = _ref$viewAllLabel === void 0 ? defaults.viewAllLabel : _ref$viewAllLabel,
+    viewAllLabel = _ref$viewAllLabel === undefined ? defaults.viewAllLabel : _ref$viewAllLabel,
     _ref$yearAgoText = _ref.yearAgoText,
-    yearAgoText = _ref$yearAgoText === void 0 ? defaults.yearAgoText : _ref$yearAgoText,
+    yearAgoText = _ref$yearAgoText === undefined ? defaults.yearAgoText : _ref$yearAgoText,
     _ref$yearsAgoText = _ref.yearsAgoText,
-    yearsAgoText = _ref$yearsAgoText === void 0 ? defaults.yearsAgoText : _ref$yearsAgoText,
+    yearsAgoText = _ref$yearsAgoText === undefined ? defaults.yearsAgoText : _ref$yearsAgoText,
     _ref$yesterdayAtText = _ref.yesterdayAtText,
-    yesterdayAtText = _ref$yesterdayAtText === void 0 ? defaults.yesterdayAtText : _ref$yesterdayAtText,
+    yesterdayAtText = _ref$yesterdayAtText === undefined ? defaults.yesterdayAtText : _ref$yesterdayAtText,
     _ref$yesterdayLabel = _ref.yesterdayLabel,
-    yesterdayLabel = _ref$yesterdayLabel === void 0 ? defaults.yesterdayLabel : _ref$yesterdayLabel,
-    selectorsFloatingMenus = _ref.selectorsFloatingMenus,
+    yesterdayLabel = _ref$yesterdayLabel === undefined ? defaults.yesterdayLabel : _ref$yesterdayLabel,
     triggerButtonRef = _ref.triggerButtonRef,
     rest = _objectWithoutProperties(_ref, _excluded);
   var notificationPanelRef = useRef(null);
@@ -175,12 +173,23 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     setAllNotifications(data);
   }, [data]);
   useClickOutside(ref || notificationPanelRef, function () {
-    onClickOutside();
+    onClickOutside === null || onClickOutside === undefined || onClickOutside();
     setTimeout(function () {
       var _triggerButtonRef$cur;
-      triggerButtonRef === null || triggerButtonRef === void 0 || (_triggerButtonRef$cur = triggerButtonRef.current) === null || _triggerButtonRef$cur === void 0 || _triggerButtonRef$cur.focus();
+      triggerButtonRef === null || triggerButtonRef === undefined || (_triggerButtonRef$cur = triggerButtonRef.current) === null || _triggerButtonRef$cur === undefined || _triggerButtonRef$cur.focus();
     }, 0);
   });
+  var handleKeydown = function handleKeydown(event) {
+    event.stopPropagation();
+    if (event.key === 'Escape') {
+      setRender(false);
+      onClickOutside === null || onClickOutside === undefined || onClickOutside();
+      setTimeout(function () {
+        var _triggerButtonRef$cur2;
+        triggerButtonRef === null || triggerButtonRef === undefined || (_triggerButtonRef$cur2 = triggerButtonRef.current) === null || _triggerButtonRef$cur2 === undefined || _triggerButtonRef$cur2.focus();
+      }, 100);
+    }
+  };
   useEffect(function () {
     // initialize the notification panel to open
     if (open) {
@@ -189,14 +198,14 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
         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();
+          parentElement === null || parentElement === undefined || (_querySelector = parentElement.querySelector(".".concat(blockClass, "__dismiss-button"))) === null || _querySelector === undefined || _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();
+        var button = parentElement === null || parentElement === undefined ? undefined : parentElement.querySelector(".".concat(blockClass, "__dismiss-button"));
+        button === null || button === undefined || button.focus();
       } else {
         observer.observe(document.body, {
           childList: true,
@@ -210,40 +219,15 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
   }, [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({
-        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);
+    if (!open) {
+      setRender(false);
     }
   };
   useEffect(function () {
-    if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion) {
+    if (!open && previousState !== null && previousState !== undefined && previousState.open && reducedMotion) {
       setRender(false);
     }
-  }, [open, previousState === null || previousState === void 0 ? void 0 : previousState.open, reducedMotion]);
+  }, [open, previousState === null || previousState === undefined ? undefined : previousState.open, reducedMotion]);
   var sortChronologically = function sortChronologically(arr) {
     if (!arr || arr && !arr.length) {
       return;
@@ -276,9 +260,9 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
       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']))]);
+    var description = notification === null || notification === undefined ? undefined : notification['description'];
+    var descriptionClassName = cx(["".concat(blockClass, "__notification-description"), _defineProperty(_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([_defineProperty(_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']))]);
     return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", {
       className: descriptionClassName
     }, description), description.length > trimLength && /*#__PURE__*/React__default.createElement(Button, {
@@ -289,14 +273,14 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
           size: 16
         }, props));
       },
-      iconDescription: notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel,
+      iconDescription: notification !== null && notification !== undefined && notification['showAll'] ? readLessLabel : readMoreLabel,
       onClick: function onClick(event) {
         event.preventDefault();
         event.stopPropagation();
         var newData = allNotifications.map(function (item) {
-          if (item.id === (notification === null || notification === void 0 ? void 0 : notification['id'])) {
+          if (item.id === (notification === null || notification === undefined ? undefined : notification['id'])) {
             return Object.assign({}, item, {
-              showAll: !(item !== null && item !== void 0 && item['showAll'])
+              showAll: !(item !== null && item !== undefined && item['showAll'])
             });
           }
           return item;
@@ -304,7 +288,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
         setAllNotifications(newData);
       },
       className: showMoreButtonClassName
-    }, notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel));
+    }, notification !== null && notification !== undefined && notification['showAll'] ? readLessLabel : readMoreLabel));
   };
   var renderNotification = function renderNotification(group, notification, index) {
     var notificationClassName = cx(["".concat(blockClass, "__notification"), "".concat(blockClass, "__notification-").concat(group)]);
@@ -321,7 +305,9 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
         if (event.target instanceof HTMLElement && event.target.classList.contains("".concat(blockClass, "__dismiss-single-button"))) {
           return;
         }
-        event.which === 13 && notification.onNotificationClick(notification);
+        if (event.which === 13) {
+          notification.onNotificationClick(notification);
+        }
       }
     }, notification.type === 'error' && /*#__PURE__*/React__default.createElement(ErrorFilled, {
       size: 16,
@@ -395,9 +381,8 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
   }, "Focus sentinel start"), /*#__PURE__*/React__default.createElement("div", _extends({
     role: "dialog",
     "aria-label": "Notification Panel",
-    onBlur: handleBlur,
-    tabIndex: 0,
-    onKeyDown: handleKeydown
+    onKeyDown: handleKeydown,
+    tabIndex: 0
   }, rest, {
     id: blockClass,
     className: cx(blockClass, className, "".concat(blockClass, "__container")),
@@ -415,9 +400,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     size: "sm",
     kind: "ghost",
     className: "".concat(blockClass, "__dismiss-button"),
-    onClick: function onClick() {
-      return onDismissAllNotifications();
-    }
+    onClick: onDismissAllNotifications
   }, dismissAllLabel)), onDoNotDisturbChange && /*#__PURE__*/React__default.createElement(Toggle, {
     size: "sm",
     className: "".concat(blockClass, "__do-not-disturb-toggle"),
@@ -448,14 +431,12 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     illustrationTheme: "dark",
     title: "",
     subtitle: emptyStateLabel
-  })), onViewAllClick && onSettingsClick && allNotifications && allNotifications.length ? /*#__PURE__*/React__default.createElement("div", {
+  })), onViewAllClick && onSettingsClick && allNotifications && allNotifications.length > 0 && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__bottom-actions")
   }, /*#__PURE__*/React__default.createElement(Button, {
     kind: "ghost",
     className: "".concat(blockClass, "__view-all-button"),
-    onClick: function onClick() {
-      return onViewAllClick();
-    }
+    onClick: onViewAllClick
   }, viewAllLabel(allNotifications.length)), /*#__PURE__*/React__default.createElement(Button, {
     kind: "ghost",
     size: "sm",
@@ -466,11 +447,10 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
       }, props));
     },
     iconDescription: settingsIconDescription,
-    onClick: function onClick() {
-      return onSettingsClick();
-    },
-    hasIconOnly: true
-  })) : null)), /*#__PURE__*/React__default.createElement("button", {
+    onClick: onSettingsClick,
+    hasIconOnly: true,
+    tooltipPosition: "left"
+  })))), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: "".concat(carbonPrefix, "--visually-hidden"),
     ref: endSentinel
@@ -562,27 +542,27 @@ NotificationsPanel.propTypes = {
    */
   nowText: PropTypes.string,
   /**
-   * Sets the notifications panel open state
+   * Optional function called after clicking outside of the panel.
    */
-  onClickOutside: PropTypes.func.isRequired,
+  onClickOutside: PropTypes.func,
   /**
-   * Function that will dismiss all notifications
+   * Optional function called after clicking the "Dismiss all" button.
    */
   onDismissAllNotifications: PropTypes.func,
   /**
-   * Function that will dismiss a single notification
+   * Optional function called after clicking a notification's "X" button.
    */
   onDismissSingleNotification: PropTypes.func,
   /**
-   * Optional: function that returns the current selected value of the disable notification toggle
+   * Optional function called after toggling "Do not disturb".
    */
   onDoNotDisturbChange: PropTypes.func,
   /**
-   * Event handler for the View all button
+   * Optional function called after clicking settings / gear icon button.
    */
   onSettingsClick: PropTypes.func,
   /**
-   * Event handler for the View all button
+   * Optional function called after clicking the "View all" button.
    */
   onViewAllClick: PropTypes.func,
   /**
@@ -605,10 +585,6 @@ NotificationsPanel.propTypes = {
    * Sets the `seconds ago` label text
    */
   secondsAgoText: PropTypes.func,
-  /**
-   * Specify the CSS selectors that match the floating menus
-   */
-  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string.isRequired),
   /**
    * Sets the settings icon description text
    */

package/es/components/OptionsTile/OptionsTile.js

@@ -14,9 +14,9 @@ import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
-import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { useControllableState } from '../../global/js/hooks/useControllableState.js';
+import { usePrefersReducedMotion } from '../../global/js/hooks/usePrefersReducedMotion.js';
 
 var _Locked;
 var _excluded = ["children", "className", "enabled", "invalid", "invalidText", "locked", "lockedText", "onChange", "onToggle", "open", "size", "summary", "title", "titleId", "warn", "warnText"];
@@ -38,7 +38,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     onToggle = _ref.onToggle,
     open = _ref.open,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    size = _ref$size === undefined ? defaults.size : _ref$size,
     summary = _ref.summary,
     title = _ref.title,
     userDefinedTitleId = _ref.titleId,
@@ -57,7 +57,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       defaultValue: open || null,
       name: 'OptionsTile',
       onChange: function onChange(value) {
-        return _onChange === null || _onChange === void 0 ? void 0 : _onChange(value);
+        return _onChange === null || _onChange === undefined ? undefined : _onChange(value);
       },
       value: open
     }),
@@ -67,7 +67,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var detailsRef = useRef(null);
   var contentRef = useRef(null);
   var id = uuidv4();
-  var titleId = userDefinedTitleId !== null && userDefinedTitleId !== void 0 ? userDefinedTitleId : "".concat(id, "-title");
+  var titleId = userDefinedTitleId !== null && userDefinedTitleId !== undefined ? userDefinedTitleId : "".concat(id, "-title");
   var isExpandable = children !== undefined;
   var isInvalid = invalid;
   var isWarn = !isInvalid && warn;
@@ -226,7 +226,6 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
    * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/656
    * https://github.com/A11yance/axobject-query/issues/319
    */
-  /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
   React__default.createElement("summary", {
     className: "".concat(blockClass, "__header"),
     onClick: toggle

package/es/components/PageHeader/PageHeader.d.ts

@@ -1,11 +1,10 @@
-/// <reference path="../../../src/custom-typings/index.d.ts" />
 import { Tag, ButtonProps, PopoverAlignment } from '@carbon/react';
 import { TagProps } from '@carbon/react/lib/components/Tag/Tag';
-import React, { PropsWithChildren, ReactNode } from 'react';
-interface ActionBarItem extends ButtonProps {
+import React, { JSX, PropsWithChildren, ReactNode } from 'react';
+interface ActionBarItem extends ButtonProps<'button'> {
     iconDescription: string;
     onClick: () => void;
-    renderIcon: ReactNode;
+    renderIcon: React.ElementType;
 }
 type Size = 'xl';
 type ActionBarOverflowAriaLabelProps = {

package/es/components/PageHeader/PageHeader.js

@@ -6,7 +6,7 @@
  */
 
 import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { Button, Tooltip, Tag, usePrefix, FlexGrid, Row, Column, DefinitionTooltip } from '@carbon/react';
+import { Tooltip, Tag, Button, usePrefix, FlexGrid, Row, Column, DefinitionTooltip } from '@carbon/react';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { string_required_if_more_than_10_tags, TagSet } from '../TagSet/TagSet.js';
 import { spacing, baseFontSize, breakpoints } from '@carbon/layout';
@@ -39,7 +39,6 @@ var defaults = {
   breadcrumbOverflowTooltipAlign: 'right'
 };
 var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _withoutBackground, _enableBreadcrumbScro;
   var actionBarItems = _ref.actionBarItems,
     actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
     actionBarOverflowAriaLabel = _ref.actionBarOverflowAriaLabel,
@@ -59,10 +58,10 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     enableBreadcrumbScroll = _ref.enableBreadcrumbScroll,
     expandHeaderIconDescription = _ref.expandHeaderIconDescription,
     _ref$fullWidthGrid = _ref.fullWidthGrid,
-    fullWidthGrid = _ref$fullWidthGrid === void 0 ? defaults.fullWidthGrid : _ref$fullWidthGrid,
+    fullWidthGrid = _ref$fullWidthGrid === undefined ? defaults.fullWidthGrid : _ref$fullWidthGrid,
     hasCollapseHeaderToggle = _ref.hasCollapseHeaderToggle,
     _ref$narrowGrid = _ref.narrowGrid,
-    narrowGrid = _ref$narrowGrid === void 0 ? defaults.narrowGrid : _ref$narrowGrid,
+    narrowGrid = _ref$narrowGrid === undefined ? defaults.narrowGrid : _ref$narrowGrid,
     navigation = _ref.navigation,
     pageActions = _ref.pageActions,
     pageActionsOverflowLabel = _ref.pageActionsOverflowLabel,
@@ -73,20 +72,20 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     title = _ref.title,
     withoutBackground = _ref.withoutBackground,
     _ref$breadcrumbOverfl = _ref.breadcrumbOverflowTooltipAlign,
-    breadcrumbOverflowTooltipAlign = _ref$breadcrumbOverfl === void 0 ? defaults.breadcrumbOverflowTooltipAlign : _ref$breadcrumbOverfl,
+    breadcrumbOverflowTooltipAlign = _ref$breadcrumbOverfl === undefined ? defaults.breadcrumbOverflowTooltipAlign : _ref$breadcrumbOverfl,
     rest = _objectWithoutProperties(_ref, _excluded);
   // handle deprecated props - START
   // if withoutBackground is nullish check deprecated_hasBackgroundAlways and default false
-  (_withoutBackground = withoutBackground) !== null && _withoutBackground !== void 0 ? _withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== void 0 ? deprecated_hasBackgroundAlways : true);
+  withoutBackground !== null && withoutBackground !== undefined ? withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== undefined ? deprecated_hasBackgroundAlways : true);
   // prefer enabled if nullish check deprecated_disableBreadcrumbScroll and default false
-  (_enableBreadcrumbScro = enableBreadcrumbScroll) !== null && _enableBreadcrumbScro !== void 0 ? _enableBreadcrumbScro : enableBreadcrumbScroll = !(deprecated_disableBreadcrumbScroll !== null && deprecated_disableBreadcrumbScroll !== void 0 ? deprecated_disableBreadcrumbScroll : true);
+  enableBreadcrumbScroll !== null && enableBreadcrumbScroll !== undefined ? enableBreadcrumbScroll : enableBreadcrumbScroll = !(deprecated_disableBreadcrumbScroll !== null && deprecated_disableBreadcrumbScroll !== undefined ? deprecated_disableBreadcrumbScroll : true);
   // handle deprecated props - END
 
   var _useState = useState({}),
     _useState2 = _slicedToArray(_useState, 2),
     metrics = _useState2[0],
     setMetrics = _useState2[1];
-  var _useState3 = useState(_objectSpread2({}, rest === null || rest === void 0 ? void 0 : rest.style)),
+  var _useState3 = useState(_objectSpread2({}, rest === null || rest === undefined ? undefined : rest.style)),
     _useState4 = _slicedToArray(_useState3, 2),
     pageHeaderStyles = _useState4[0],
     setPageHeaderStyles = _useState4[1];
@@ -101,7 +100,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   // state based on props only
   var hasActionBar = actionBarItems && actionBarItems.length > 0;
   var hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems;
-  if (tags && (tags === null || tags === void 0 ? void 0 : tags.length) > 10) {
+  if (tags && (tags === null || tags === undefined ? undefined : tags.length) > 10) {
     if (!allTagsModalSearchLabel) {
       throw new Error("allTagsModalSearchLabel' is required.");
     }
@@ -178,7 +177,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     var minWidth = _ref2.minWidth,
       maxWidth = _ref2.maxWidth;
     var overflowMenuWidth = 0;
-    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"));
+    var overflowMenu = overflowMenuRef === null || overflowMenuRef === undefined || (_overflowMenuRef$curr = overflowMenuRef.current) === null || _overflowMenuRef$curr === undefined ? undefined : _overflowMenuRef$curr.querySelector(".".concat(prefix, "--overflow-menu"));
     if (overflowMenu) {
       overflowMenuWidth = overflowMenu.offsetWidth;
     }
@@ -217,13 +216,13 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     checkUpdateVerticalSpace();
   };
   var handleCollapseToggle = function handleCollapseToggle() {
-    utilSetCollapsed(!fullyCollapsed, headerRef, metrics === null || metrics === void 0 ? void 0 : metrics.headerOffset, metrics === null || metrics === void 0 ? void 0 : metrics.headerTopValue);
+    utilSetCollapsed(!fullyCollapsed, headerRef, metrics === null || metrics === undefined ? undefined : metrics.headerOffset, metrics === null || metrics === undefined ? undefined : metrics.headerTopValue);
   };
 
   // use effects
   useEffect(function () {
     /* istanbul ignore else */
-    if (pageActions !== null && pageActions !== void 0 && pageActions.content) {
+    if (pageActions !== null && pageActions !== undefined && pageActions.content) {
       var _ref5 = pageActions,
         minWidth = _ref5.minWidth,
         maxWidth = _ref5.maxWidth;
@@ -236,8 +235,8 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   useEffect(function () {
     // Determine the location of the pageAction buttons
     /* istanbul ignore next */
-    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));
+    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));
     }
   }, [hasActionBar, metrics.breadcrumbRowSpaceBelow, metrics.titleRowSpaceAbove, metrics.pageActionsSpaceAbove, collapseTitle, scrollYValue, widthIsNarrow]);
   useEffect(function () {
@@ -271,8 +270,8 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     // Updates custom CSS props used to manage scroll behavior
     /* istanbul ignore next */
     setPageHeaderStyles(function (prev) {
-      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(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(blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(blockClass, "--breadcrumb-title-top"), "".concat(metrics.breadcrumbTitleHeight && metrics.titleRowSpaceAbove && Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(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(blockClass, "--breadcrumb-row-width-px"), "".concat(metrics === null || metrics === void 0 ? void 0 : metrics.breadcrumbRowWidth, "px")));
+      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(blockClass, "--header-top"), "".concat(((metrics === null || metrics === undefined ? undefined : metrics.headerTopValue) || 0) + ((metrics === null || metrics === undefined ? undefined : metrics.headerOffset) || 0), "px")), "--".concat(blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(blockClass, "--breadcrumb-title-top"), "".concat(metrics.breadcrumbTitleHeight && metrics.titleRowSpaceAbove && Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(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(blockClass, "--breadcrumb-row-width-px"), "".concat(metrics === null || metrics === undefined ? undefined : 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]);
   useNearestScroll(headerRef,
@@ -288,7 +287,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
     // set offset for tagset tooltip
     /* istanbul ignore next */
-    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);
+    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);
 
     /* istanbul ignore next */
     document.documentElement.style.setProperty("--".concat(blockClass, "--tagset-tooltip-position"), fullyCollapsed ? 'fixed' : 'absolute');
@@ -308,14 +307,14 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   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 !== void 0 && metrics.headerHeight && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
+    if (!result && metrics !== null && metrics !== undefined && metrics.headerHeight && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
       var startAddingAt = parseFloat("".concat(spacing[9])) * parseInt("".concat(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 === void 0 ? void 0 : metrics.breadcrumbRowHeight) || 0);
+        var distanceAddingOver = startAddingAt - ((metrics === null || metrics === undefined ? undefined : metrics.breadcrumbRowHeight) || 0);
         result = Math.min(1, (startAddingAt - scrollRemaining) / distanceAddingOver);
       }
     }
@@ -331,7 +330,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, [withoutBackground, hasCollapseHeaderToggle]);
   useEffect(function () {
     // Determine if space is needed in the breadcrumb for a collapse button
-    if (hasCollapseButton && !(navigation || tags) && metrics !== null && metrics !== void 0 && metrics.headerHeight) {
+    if (hasCollapseButton && !(navigation || tags) && metrics !== null && metrics !== undefined && metrics.headerHeight) {
       setSpaceForCollapseButton(true);
     } else {
       setSpaceForCollapseButton(false);
@@ -501,7 +500,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         className: cx("".concat(blockClass, "__page-actions"), _defineProperty({}, "".concat(blockClass, "__page-actions--in-breadcrumb"), inBreadcrumbRow))
       }, /*#__PURE__*/React__default.createElement("div", {
         className: cx("".concat(blockClass, "__page-actions-content"))
-      }, (_content = pageActions === null || pageActions === void 0 ? void 0 : pageActions.content) !== null && _content !== void 0 ? _content : /*#__PURE__*/React__default.createElement(ButtonSetWithOverflow, {
+      }, (_content = pageActions === null || pageActions === undefined ? undefined : pageActions.content) !== null && _content !== undefined ? _content : /*#__PURE__*/React__default.createElement(ButtonSetWithOverflow, {
         className: "".concat(blockClass, "__button-set-with-overflow"),
         menuOptionsClass: cx(pageActionsMenuOptionsClass, "".concat(blockClass, "__button-set-menu-options")),
         onWidthChange: handleWidthChange,

package/es/components/PageHeader/PageHeaderTitle.d.ts

@@ -5,29 +5,12 @@ export function PageHeaderTitle({ blockClass, hasBreadcrumbRow, title }: {
 }): React.JSX.Element;
 export namespace PageHeaderTitle {
     namespace propTypes {
-        let blockClass: PropTypes.Validator<string>;
-        let hasBreadcrumbRow: PropTypes.Requireable<boolean>;
-        let title: PropTypes.Requireable<NonNullable<string | PropTypes.InferProps<{
-            text: PropTypes.Validator<string>;
-            icon: PropTypes.Requireable<object>;
-            loading: PropTypes.Requireable<boolean>;
-            editDescription: any;
-            editableLabel: any;
-            id: any;
-            onChange: PropTypes.Requireable<(...args: any[]) => any>;
-            onSave: PropTypes.Requireable<(...args: any[]) => any>;
-            cancelDescription: any;
-            saveDescription: any;
-            tooltipAlignment: PropTypes.Requireable<string>;
-        }> | PropTypes.InferProps<{
-            content: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-            breadcrumbContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            asText: PropTypes.Validator<string>;
-        }> | null | undefined>>;
+        let blockClass: any;
+        let hasBreadcrumbRow: any;
+        let title: any;
     }
 }
 export function editInPlaceRequired({ onSave }: {
     onSave: any;
 }): boolean;
 import React from 'react';
-import PropTypes from 'prop-types';

package/es/components/PageHeader/PageHeaderTitle.js

@@ -40,7 +40,7 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
     cancelDescription = title.cancelDescription,
     saveDescription = title.saveDescription,
     _title$tooltipAlignme = title.tooltipAlignment,
-    tooltipAlignment = _title$tooltipAlignme === void 0 ? 'bottom' : _title$tooltipAlignme,
+    tooltipAlignment = _title$tooltipAlignme === undefined ? 'bottom' : _title$tooltipAlignme,
     rest = _objectWithoutProperties(title, _excluded);
   var titleText;
   var isEditable = !!onSave;