@carbon/ibm-products 2.43.2-canary.32 → 2.43.2-canary.321

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -6,22 +6,30 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { usePrefix, Button, Toggle, Link, IconButton } from '@carbon/react';
+import { Settings, ErrorFilled, CheckmarkFilled, WarningAltFilled, InformationSquareFilled, Close, ChevronDown } from '@carbon/react/icons';
 import React__default, { useRef, useState, useEffect } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import '../EmptyStates/EmptyState.js';
+import '../EmptyStates/EmptyStateV2.js';
+import '../EmptyStates/ErrorEmptyState/ErrorEmptyState.js';
+import '../EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
+import '../EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js';
+import '../EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js';
+import { NotificationsEmptyState } from '../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js';
+import '../EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
-import { timeAgo } from './utils.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
+import { timeAgo } from './utils.js';
 import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion.js';
-import { Button, Toggle, Link, IconButton } from '@carbon/react';
-import { Settings, ErrorFilled, CheckmarkFilled, WarningAltFilled, InformationSquareFilled, Close, ChevronDown } from '@carbon/react/icons';
+import wrapFocus from '../../global/js/utils/wrapFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
-import { NotificationsEmptyState } from '../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.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"];
+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';
@@ -141,8 +149,13 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     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 = _objectWithoutProperties(_ref, _excluded);
-  var notificationPanelRef = useRef();
+  var notificationPanelRef = useRef(null);
+  var notificationPanelInnerRef = useRef(null);
+  var startSentinel = useRef(null);
+  var endSentinel = useRef(null);
   var _useState = useState(open),
     _useState2 = _slicedToArray(_useState, 2),
     shouldRender = _useState2[0],
@@ -155,23 +168,76 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     open: open
   });
   var reducedMotion = usePrefersReducedMotion();
+  var carbonPrefix = usePrefix();
   useEffect(function () {
     // Set the notifications passed to the state within this component
     setAllNotifications(data);
   }, [data]);
   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);
   });
   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({
+        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);
+    }
+  };
   useEffect(function () {
     if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion) {
       setRender(false);
@@ -310,7 +376,17 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     onDismissSingleNotification(notification);
   };
   var mainSectionClassName = cx(["".concat(blockClass, "__main-section"), _defineProperty({}, "".concat(blockClass, "__main-section-empty"), allNotifications && !allNotifications.length)]);
-  return shouldRender ? /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  return shouldRender ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: "".concat(carbonPrefix, "--visually-hidden"),
+    ref: startSentinel
+  }, "Focus sentinel start"), /*#__PURE__*/React__default.createElement("div", _extends({
+    role: "dialog",
+    "aria-label": "Notification Panel",
+    onBlur: handleBlur,
+    tabIndex: 0,
+    onKeyDown: handleKeydown
+  }, rest, {
     id: blockClass,
     className: cx(blockClass, className, "".concat(blockClass, "__container")),
     style: {
@@ -319,6 +395,8 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
+    ref: notificationPanelInnerRef
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__header-container")
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__header-flex")
@@ -382,7 +460,11 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     onClick: function onClick() {
       return onSettingsClick();
     }
-  })) : null) : null;
+  })) : null)), /*#__PURE__*/React__default.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
@@ -513,6 +595,10 @@ 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
    */
@@ -525,6 +611,10 @@ NotificationsPanel.propTypes = {
    * Sets the today label text
    */
   todayLabel: PropTypes.string,
+  /**
+   * Sets the today label text
+   */
+  triggerButtonRef: PropTypes.any,
   /**
    * Sets the View all button text
    */

package/es/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/es/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 {};

package/es/components/OptionsTile/OptionsTile.js

@@ -6,15 +6,16 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import * as carbonMotion from '@carbon/motion';
+import { ChevronDown, Locked, WarningFilled, WarningAltFilled } from '@carbon/react/icons';
+import { Toggle, Layer } from '@carbon/react';
 import React__default, { useState, useRef } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { pkg } from '../../settings.js';
-import { Toggle, Layer } from '@carbon/react';
-import { ChevronDown, Locked, WarningFilled, WarningAltFilled } from '@carbon/react/icons';
-import * as carbonMotion from '@carbon/motion';
+import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion.js';
+import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { useControllableState } from '../../global/js/hooks/useControllableState.js';
 
 var _Locked;
@@ -71,9 +72,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var isInvalid = invalid;
   var isWarn = !isInvalid && warn;
   var isLocked = !isInvalid && !isWarn && locked;
-  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
-    matches: true
-  };
+  var shouldReduceMotion = usePrefersReducedMotion();
   if (open !== prevIsOpen) {
     if (isOpen && !open) {
       collapse();
@@ -83,7 +82,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     setPrevIsOpen(open);
   }
   function expand() {
-    if (detailsRef.current && contentRef.current && !reducedMotion.matches) {
+    if (detailsRef.current && contentRef.current && !shouldReduceMotion) {
       setIsOpen(true);
       detailsRef.current.open = true;
       var _getComputedStyle = getComputedStyle(contentRef.current),
@@ -112,7 +111,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   }
   function collapse() {
-    if (contentRef.current && !reducedMotion.matches) {
+    if (contentRef.current && !shouldReduceMotion) {
       setClosing(true);
       var _getComputedStyle2 = getComputedStyle(contentRef.current),
         paddingTop = _getComputedStyle2.paddingTop,
@@ -164,6 +163,12 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     var Icon = null;
     var text = summary;
     var summaryClasses = ["".concat(blockClass, "__summary")];
+    if (closing) {
+      summaryClasses.push("".concat(blockClass, "__summary--closing"));
+    }
+    if (isOpen) {
+      summaryClasses.push("".concat(blockClass, "__summary--open"));
+    }
     if (invalid) {
       Icon = WarningFilled;
       text = invalidText;
@@ -227,7 +232,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     onClick: toggle
   }, /*#__PURE__*/React__default.createElement(ChevronDown, {
     size: 16,
-    className: "".concat(blockClass, "__chevron")
+    className: cx("".concat(blockClass, "__chevron"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__chevron--open"), isOpen), "".concat(blockClass, "__chevron--closing"), closing))
   }), renderTitle()), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef
@@ -290,7 +295,6 @@ OptionsTile.propTypes = {
    * Provide a function which will be called each time the user
    * interacts with the toggle.
    */
-  /**@ts-ignore*/
   onToggle: PropTypes.func,
   /**
    * Whether the OptionsTile is in open state.
@@ -299,7 +303,6 @@ OptionsTile.propTypes = {
   /**
    * Define the size of the OptionsTile.
    */
-  /**@ts-ignore*/
   size: PropTypes.oneOf(['lg', 'xl']),
   /**
    * Optionally provide a text summarizing the current state of the content.

package/es/components/OptionsTile/index.d.ts

@@ -1 +1,8 @@
-export { OptionsTile } from "./OptionsTile";
+/**
+ * Copyright IBM Corp. 2021, 2022
+ *
+ * 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 { OptionsTile } from './OptionsTile';
+export type { OptionsTileProps } from './OptionsTile';

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

@@ -1,7 +1,7 @@
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React, { PropsWithChildren, ReactNode } from 'react';
 import { Tag } from '@carbon/react';
 import { ButtonProps, PopoverAlignment, TagProps } from '@carbon/type';
+import React, { PropsWithChildren, ReactNode } from 'react';
 interface ActionBarItem extends ButtonProps {
     iconDescription: string;
     onClick: () => void;
@@ -149,6 +149,7 @@ interface TitleIcon {
     cancelDescription?: string;
     editDescription?: string;
     saveDescription?: string;
+    tooltipAlignment?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
 }
 interface TitleContent {
     content: ReactNode;
@@ -269,6 +270,7 @@ interface PageHeaderBaseProps extends PropsWithChildren {
      *    - editableLabel: label for edit required if onChange supplied
      *    - cancelDescription: label for edit cancel button
      *    - saveDescription: label for edit save button
+     *    - tooltipAlignment: position for tooltip displayed for large titles. Default to "bottom"
      * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
      *    - content: title or name of current location shown in main part of page header
      *    - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
@@ -284,7 +286,7 @@ interface PageHeaderBaseProps extends PropsWithChildren {
      */
     hasBackgroundAlways?: boolean;
 }
-type PageHeaderProps = PageHeaderBaseProps & PageActionProps & CollapseHeaderProps & BreadcrumbProps & ActionBarOverflowAriaLabelProps;
+export type PageHeaderProps = PageHeaderBaseProps & PageActionProps & CollapseHeaderProps & BreadcrumbProps & ActionBarOverflowAriaLabelProps;
 export declare let PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
 export declare const deprecatedProps: {
     /**

package/es/components/PageHeader/PageHeader.js

@@ -5,20 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+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 } from '@carbon/react';
 import React__default, { useState, useRef, useEffect } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import { string_required_if_more_than_10_tags, TagSet } from '../TagSet/TagSet.js';
 import { breakpoints, spacing10, baseFontSize } from '@carbon/layout';
-import cx from 'classnames';
-import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
-import { FlexGrid, Row, Column, Button, Tooltip, Tag } from '@carbon/react';
-import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { blockClass, utilSetCollapsed, utilGetBreadcrumbItemForTitle, utilCheckUpdateVerticalSpace } from './PageHeaderUtils.js';
 import { deprecateProp, prepareProps } from '../../global/js/utils/props-helper.js';
-import { pkg } from '../../settings.js';
-import { TagSet, string_required_if_more_than_10_tags } from '../TagSet/TagSet.js';
 import { ChevronUp } from '@carbon/react/icons';
-import { blockClass, utilSetCollapsed, utilGetBreadcrumbItemForTitle, utilCheckUpdateVerticalSpace } from './PageHeaderUtils.js';
 import { PageHeaderTitle } from './PageHeaderTitle.js';
+import PropTypes from '../../_virtual/index.js';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 import { useNearestScroll } from '../../global/js/hooks/useWindowScroll.js';
 import { useWindowResize } from '../../global/js/hooks/useWindowResize.js';
 import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow/BreadcrumbWithOverflow.js';
@@ -27,6 +27,7 @@ import { ButtonSetWithOverflow } from '../ButtonSetWithOverflow/ButtonSetWithOve
 
 var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "enableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground", "breadcrumbOverflowTooltipAlign"];
 var componentName = 'PageHeader';
+pkg._silenceWarnings(true);
 pkg.component.ActionBar = true;
 
 // Default values for props
@@ -92,6 +93,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var headerRef = ref || localHeaderRef;
   var sizingContainerRef = useRef(null);
   var offsetTopMeasuringRef = useRef(null);
+  var overflowMenuRef = useRef(null);
 
   // state based on props only
   var hasActionBar = actionBarItems && actionBarItems.length > 0;
@@ -165,14 +167,22 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _useState26 = _slicedToArray(_useState25, 2),
     widthIsNarrow = _useState26[0],
     setWidthIsNarrow = _useState26[1];
+  var prefix = usePrefix();
 
   // handlers
   var handleActionBarWidthChange = function handleActionBarWidthChange(_ref2) {
+    var _overflowMenuRef$curr;
     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"));
+    if (overflowMenu) {
+      overflowMenuWidth = overflowMenu.offsetWidth;
+    }
+
     /* don't know how to test resize */
     /* istanbul ignore next */
-    setActionBarMaxWidth(maxWidth);
+    setActionBarMaxWidth(maxWidth + overflowMenuWidth);
     /* don't know how to test resize */
     /* istanbul ignore next */
     setActionBarMinWidth(minWidth);
@@ -390,6 +400,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     menuOptionsClass: "".concat(cx(actionBarMenuOptionsClass, "".concat(blockClass, "__action-bar-menu-options"))),
     onWidthChange: handleActionBarWidthChange,
     overflowAriaLabel: actionBarOverflowAriaLabel,
+    overflowMenuRef: overflowMenuRef,
     rightAlign: true
   })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React__default.createElement(Row, {
     className: cx("".concat(blockClass, "__title-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))
@@ -777,6 +788,7 @@ PageHeader.propTypes = _objectSpread2({
    *    - editableLabel: label for edit required if onChange supplied
    *    - cancelDescription: label for edit cancel button
    *    - saveDescription: label for edit save button
+   *    - tooltipAlignment: position for tooltip displayed for large titles. Default to "bottom".
    * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
    *    - content: title or name of current location shown in main part of page header
    *    - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
@@ -801,7 +813,9 @@ PageHeader.propTypes = _objectSpread2({
     //.isRequired.if(editInPlaceRequired),
     editDescription: PropTypes.string,
     // .isRequired.if(editInPlaceRequired),
-    saveDescription: PropTypes.string //.isRequired.if(editInPlaceRequired),
+    saveDescription: PropTypes.string,
+    //.isRequired.if(editInPlaceRequired),
+    tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
     // Update docgen if changed
   }), PropTypes.string, PropTypes.shape({
     content: PropTypes.node.isRequired,

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

@@ -2,7 +2,7 @@ export function PageHeaderTitle({ blockClass, hasBreadcrumbRow, title }: {
     blockClass: any;
     hasBreadcrumbRow: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace PageHeaderTitle {
     namespace propTypes {
         let blockClass: PropTypes.Validator<string>;
@@ -18,6 +18,7 @@ export namespace PageHeaderTitle {
             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>;
@@ -28,4 +29,5 @@ export namespace PageHeaderTitle {
 export function editInPlaceRequired({ onSave }: {
     onSave: any;
 }): boolean;
+import React from 'react';
 import PropTypes from 'prop-types';

package/es/components/PageHeader/PageHeaderTitle.js

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useRef, useLayoutEffect } from 'react';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import { SkeletonText } from '@carbon/react';
+import { SkeletonText, DefinitionTooltip } from '@carbon/react';
 import { EditInPlace } from '../EditInPlace/EditInPlace.js';
 
-var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription"];
+var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription", "tooltipAlignment"];
 
 /**
  *
@@ -38,18 +38,41 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
     editableLabel = title.editableLabel,
     cancelDescription = title.cancelDescription,
     saveDescription = title.saveDescription,
+    _title$tooltipAlignme = title.tooltipAlignment,
+    tooltipAlignment = _title$tooltipAlignme === void 0 ? 'bottom' : _title$tooltipAlignme,
     rest = _objectWithoutProperties(title, _excluded);
   var titleText;
   var isEditable = !!onSave;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEllipsisApplied = _useState2[0],
+    setIsEllipsisApplied = _useState2[1];
+  var longTitleRef = useRef(undefined);
+  var titleRef = useRef(undefined);
+  useLayoutEffect(function () {
+    setIsEllipsisApplied(isEllipsisActive());
+  }, [longTitleRef, titleRef, title]);
+  var isEllipsisActive = function isEllipsisActive() {
+    if (longTitleRef.current) {
+      var _longTitleRef$current, _longTitleRef$current2;
+      return ((_longTitleRef$current = longTitleRef.current) === null || _longTitleRef$current === void 0 ? void 0 : _longTitleRef$current.offsetWidth) < ((_longTitleRef$current2 = longTitleRef.current) === null || _longTitleRef$current2 === void 0 ? void 0 : _longTitleRef$current2.scrollWidth);
+    } else if (titleRef.current) {
+      var _titleRef$current, _titleRef$current2;
+      return ((_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.offsetWidth) < ((_titleRef$current2 = titleRef.current) === null || _titleRef$current2 === void 0 ? void 0 : _titleRef$current2.scrollWidth);
+    }
+    return false;
+  };
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {
       text = title;
       asText = title;
     }
     var TitleIcon = icon;
-    titleInnards = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon && !loading ? /*#__PURE__*/React__default.createElement(TitleIcon, {
+    titleInnards = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon && !loading ? /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(blockClass, "__title-icon-wrapper")
+    }, /*#__PURE__*/React__default.createElement(TitleIcon, {
       className: "".concat(blockClass, "__title-icon")
-    }) : null, loading ? /*#__PURE__*/React__default.createElement(SkeletonText, {
+    })) : null, loading ? /*#__PURE__*/React__default.createElement(SkeletonText, {
       className: "".concat(blockClass, "__title-skeleton")
     }) : isEditable ? /*#__PURE__*/React__default.createElement(EditInPlace, _extends({
       tooltipAlignment: "bottom",
@@ -62,7 +85,17 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       onSave: onSave,
       size: "md",
       inheritTypography: true
-    }, rest)) : /*#__PURE__*/React__default.createElement("span", {
+    }, rest)) : isEllipsisApplied ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
+      openOnHover: false,
+      align: tooltipAlignment,
+      definition: text,
+      className: "".concat(blockClass, "__tooltip")
+    }, /*#__PURE__*/React__default.createElement("span", {
+      ref: longTitleRef,
+      className: "".concat(blockClass, "__titleText")
+    }, text)) : /*#__PURE__*/React__default.createElement("span", {
+      ref: titleRef,
+      className: "".concat(blockClass, "__titleText"),
       title: !loading ? asText : null
     }, text));
   } else {
@@ -117,7 +150,8 @@ PageHeaderTitle.propTypes = {
     onChange: PropTypes.func,
     onSave: PropTypes.func,
     cancelDescription: PropTypes.string.isRequired.if(editInPlaceRequired),
-    saveDescription: PropTypes.string.isRequired.if(editInPlaceRequired)
+    saveDescription: PropTypes.string.isRequired.if(editInPlaceRequired),
+    tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
     // Update docgen if changed
   }), PropTypes.string, PropTypes.shape({
     content: PropTypes.node.isRequired,

package/es/components/PageHeader/PageHeaderUtils.js

@@ -72,7 +72,7 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
 
     // The header offset calculation is either going to work out at 0 if we have no gap between scrolling container
     // top and the measuring ref top, or the difference between.
-    update.headerOffset = offsetMeasuringTop === 0 ? offsetMeasuringTop - scrollableContainerTop : 0;
+    update.headerOffset = offsetMeasuringTop !== 0 ? offsetMeasuringTop - scrollableContainerTop : 0;
 
     /* istanbul ignore next */
     update.breadcrumbRowHeight = breadcrumbRowEl ? breadcrumbRowEl.clientHeight : 0;
@@ -98,11 +98,6 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
       // adjust top for sticky with navigation
       update.headerTopValue += update.navigationRowHeight;
     }
-    if (!hasActionBar && !widthIsNarrow) {
-      // Add difference between $spacing-08 and $spacing-07 to ensure space below breadcrumb is correct on scroll
-      // $spacing-07 is used as size for breadcrumb when no action bar otherwise $spacing-08
-      update.headerTopValue += 8;
-    }
     if (!enableBreadcrumbScroll || !navigation) {
       // adjust sticky top if no navigation or breadcrumb is to stay on screen
       update.headerTopValue += update.breadcrumbRowHeight;

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

@@ -1 +1,2 @@
-export { PageHeader } from "./PageHeader";
+export { PageHeader } from './PageHeader';
+export type { PageHeaderProps } from './PageHeader';