@carbon/ibm-products 1.10.0 → 1.11.2

package/es/components/InlineEdit/InlineEdit.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cancelDescription", "className", "disabled", "editAlwaysVisible", "editDescription", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "size", "value"];
+var _excluded = ["buttonTooltipAlignment", "buttonTooltipPosition", "cancelDescription", "className", "disabled", "editAlwaysVisible", "editDescription", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "size", "value"];
 
 /**
  * Copyright IBM Corp. 2022, 2022
@@ -27,10 +28,13 @@ var blockClass = "".concat(pkg.prefix, "--inline-edit");
 var componentName = 'InlineEdit'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 var defaults = {
+  buttonTooltipAlignment: 'center',
+  buttonTooltipPosition: 'top',
   light: true,
   // defaults to true to reflect design
   size: 'md'
 };
+var buttons = ['cancel', 'edit', 'save'];
 /**
  * TODO: A description of the component.
  */
@@ -38,7 +42,9 @@ var defaults = {
 export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
   var _cx, _refInput$current, _refInput$current$inn, _cx3;
 
-  var cancelDescription = _ref.cancelDescription,
+  var buttonTooltipAlignment = _ref.buttonTooltipAlignment,
+      buttonTooltipPosition = _ref.buttonTooltipPosition,
+      cancelDescription = _ref.cancelDescription,
       className = _ref.className,
       disabled = _ref.disabled,
       editAlwaysVisible = _ref.editAlwaysVisible,
@@ -77,7 +83,21 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
 
   var validationText = invalidText; // || warnText;
 
-  var validationIcon = showValidation ? /*#__PURE__*/React.createElement(WarningFilled16, null) : null;
+  var validationIcon = showValidation ? /*#__PURE__*/React.createElement(WarningFilled16, null) : null; // sanitize the tooltip values
+
+  var alignIsObject = _typeof(buttonTooltipAlignment) === 'object';
+  var directionIsObject = _typeof(buttonTooltipPosition) === 'object';
+  var tipPositions = buttons.reduce(function (acc, button) {
+    var _ref2, _ref3;
+
+    var tooltipAlignment = (_ref2 = alignIsObject ? buttonTooltipAlignment[button] : buttonTooltipAlignment) !== null && _ref2 !== void 0 ? _ref2 : defaults.buttonTooltipAlignment;
+    var tooltipPosition = (_ref3 = directionIsObject ? buttonTooltipPosition[button] : buttonTooltipPosition) !== null && _ref3 !== void 0 ? _ref3 : defaults.buttonTooltipPosition;
+    acc[button] = {
+      tooltipAlignment: tooltipAlignment,
+      tooltipPosition: tooltipPosition
+    };
+    return acc;
+  }, {});
 
   var doSetEditing = function doSetEditing(value) {
     if (value === false) {
@@ -260,14 +280,14 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       className: cx("".concat(blockClass, "__toolbar"), (_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__toolbar--animation"), toolbarAnimation), _defineProperty(_cx3, "".concat(blockClass, "__toolbar--saveable"), refInput.current && value !== internalValue), _cx3))
     }, showValidation && /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__validation-icon")
-    }, validationIcon), editing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    }, validationIcon), editing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({
       className: "".concat(blockClass, "__cancel"),
       kind: "ghost",
       hasIconOnly: true,
       iconDescription: cancelDescription,
       onClick: handleCancel,
       renderIcon: Close16
-    }), /*#__PURE__*/React.createElement(Button, {
+    }, tipPositions.cancel)), /*#__PURE__*/React.createElement(Button, _extends({
       className: "".concat(blockClass, "__save"),
       kind: "ghost",
       hasIconOnly: true,
@@ -275,8 +295,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       onClick: handleSave,
       renderIcon: Checkmark16,
       disabled: value === internalValue
-    })) : /*#__PURE__*/React.createElement(Button, {
-      "aria-hidden": "true",
+    }, tipPositions.save))) : /*#__PURE__*/React.createElement(Button, _extends({
       className: cx("".concat(blockClass, "__edit"), _defineProperty({}, "".concat(blockClass, "__edit--always-visible"), editAlwaysVisible)),
       kind: "ghost",
       hasIconOnly: true,
@@ -285,7 +304,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       renderIcon: disabled ? EditOff16 : Edit16,
       disabled: disabled,
       tabIndex: -1
-    }))), /*#__PURE__*/React.createElement("div", {
+    }, tipPositions.edit)))), /*#__PURE__*/React.createElement("div", {
       className: cx("".concat(blockClass, "__disabled-cover"))
     }), showValidation && validationText && validationText.length > 0 && /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__validation-text ").concat(carbon.prefix, "--form-requirement")
@@ -301,6 +320,28 @@ InlineEdit.displayName = componentName; // The types and DocGen commentary for t
 // See https://www.npmjs.com/package/prop-types#usage.
 
 InlineEdit.propTypes = {
+  /**
+   * buttonTooltipAlignment from the standard tooltip. Default center.
+   *
+   * Can be passed either as one of tooltip options or as an object specifying cancel, edit and save separately
+   */
+  buttonTooltipAlignment: PropTypes.oneOfType([PropTypes.oneOf(['start', 'center', 'end']), PropTypes.shape({
+    cancel: PropTypes.oneOf(['start', 'center', 'end']),
+    edit: PropTypes.oneOf(['start', 'center', 'end']),
+    save: PropTypes.oneOf(['start', 'center', 'end'])
+  })]),
+
+  /**
+   * buttonTooltipPosition from the standard tooltip
+   *
+   * Can be passed either as one of tooltip options or as an object specifying cancel, edit and save separately
+   */
+  buttonTooltipPosition: PropTypes.oneOfType([PropTypes.oneOf(['top', 'right', 'bottom', 'left']), PropTypes.shape({
+    cancel: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    edit: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    save: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
+  })]),
+
   /**
    * label for cancel button
    */

package/es/components/OptionsTile/OptionsTile.js

@@ -2,10 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "enabled", "heading", "headingId", "invalid", "invalidText", "locked", "lockedText", "onToggle", "open", "size", "summary", "warn", "warnText"];
+var _excluded = ["children", "className", "enabled", "invalid", "invalidText", "locked", "lockedText", "onToggle", "open", "size", "summary", "title", "titleId", "warn", "warnText"];
 
 /**
- * Copyright IBM Corp. 2021, 2021
+ * 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.
@@ -38,8 +38,6 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       enabled = _ref.enabled,
-      heading = _ref.heading,
-      userDefinedHeadingId = _ref.headingId,
       invalid = _ref.invalid,
       invalidText = _ref.invalidText,
       locked = _ref.locked,
@@ -49,6 +47,8 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? defaults.size : _ref$size,
       summary = _ref.summary,
+      title = _ref.title,
+      userDefinedTitleId = _ref.titleId,
       warn = _ref.warn,
       warnText = _ref.warnText,
       rest = _objectWithoutProperties(_ref, _excluded);
@@ -71,7 +71,7 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var detailsRef = useRef(null);
   var contentRef = useRef(null);
   var id = uuidv4();
-  var headingId = userDefinedHeadingId !== null && userDefinedHeadingId !== void 0 ? userDefinedHeadingId : "".concat(id, "-heading");
+  var titleId = userDefinedTitleId !== null && userDefinedTitleId !== void 0 ? userDefinedTitleId : "".concat(id, "-title");
   var isExpandable = children !== undefined;
   var isInvalid = invalid;
   var isWarn = !isInvalid && warn;
@@ -199,11 +199,11 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__title")
-    }, /*#__PURE__*/React.createElement("h6", {
-      id: headingId,
       className: "".concat(blockClass, "__heading")
-    }, heading), text && /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement("h6", {
+      id: titleId,
+      className: "".concat(blockClass, "__title")
+    }, title), text && /*#__PURE__*/React.createElement("span", {
       className: cx(summaryClasses),
       "aria-hidden": summaryHidden
     }, Icon && /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement("span", {
@@ -224,7 +224,7 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     toggled: enabled,
     labelA: "",
     labelB: "",
-    "aria-labelledby": headingId,
+    "aria-labelledby": titleId,
     onToggle: onToggle,
     size: "sm",
     disabled: isLocked
@@ -271,16 +271,6 @@ OptionsTile.propTypes = {
    */
   enabled: PropTypes.bool,
 
-  /**
-   * Provide the heading for this OptionsTile.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Optionally provide an id which should be used for the heading.
-   */
-  headingId: PropTypes.string,
-
   /**
    * Whether the OptionsTile is in invalid validation state.
    */
@@ -322,6 +312,16 @@ OptionsTile.propTypes = {
    */
   summary: PropTypes.string,
 
+  /**
+   * Provide the title for this OptionsTile.
+   */
+  title: PropTypes.string.isRequired,
+
+  /**
+   * Optionally provide an id which should be used for the title.
+   */
+  titleId: PropTypes.string,
+
   /**
    * Whether the OptionsTile is in warning validation state.
    */

package/es/components/OptionsTile/index.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2021
+ * 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.

package/es/components/PageHeader/PageHeader.js

@@ -39,7 +39,7 @@ var defaults = {
   narrowGrid: false
 };
 export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _withoutBackground, _ref2, _ref7, _cx2, _ref8, _cx4, _cx7;
+  var _withoutBackground, _enableBreadcrumbScro, _ref6, _cx2, _ref7, _cx4, _cx7;
 
   var actionBarItems = _ref.actionBarItems,
       actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
@@ -56,7 +56,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       collapseHeaderIconDescription = _ref.collapseHeaderIconDescription,
       collapseTitle = _ref.collapseTitle,
       deprecated_disableBreadcrumbScroll = _ref.disableBreadcrumbScroll,
-      in_enableBreadcrumbScroll = _ref.enableBreadcrumbScroll,
+      enableBreadcrumbScroll = _ref.enableBreadcrumbScroll,
       expandHeaderIconDescription = _ref.expandHeaderIconDescription,
       _ref$fullWidthGrid = _ref.fullWidthGrid,
       fullWidthGrid = _ref$fullWidthGrid === void 0 ? defaults.fullWidthGrid : _ref$fullWidthGrid,
@@ -75,8 +75,10 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // handle deprecated props - START
-  // if withoutBackground is null check deprecated_hasBackgroundAlways and default false
-  (_withoutBackground = withoutBackground) !== null && _withoutBackground !== void 0 ? _withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== void 0 ? deprecated_hasBackgroundAlways : true); // handle deprecated props - END
+  // 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); // 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); // handle deprecated props - END
 
   var _useState = useState({}),
       _useState2 = _slicedToArray(_useState, 2),
@@ -95,8 +97,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var offsetTopMeasuringRef = useRef(null); // state based on props only
 
   var hasActionBar = actionBarItems && actionBarItems.length > 0;
-  var hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems;
-  var enableBreadcrumbScroll = (_ref2 = in_enableBreadcrumbScroll !== null && in_enableBreadcrumbScroll !== void 0 ? in_enableBreadcrumbScroll : !deprecated_disableBreadcrumbScroll) !== null && _ref2 !== void 0 ? _ref2 : false; // utility functions
+  var hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems; // utility functions
 
   var checkUpdateVerticalSpace = function checkUpdateVerticalSpace() {
     return utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar, widthIsNarrow, setMetrics);
@@ -162,9 +163,9 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setWidthIsNarrow = _useState26[1]; // handlers
 
 
-  var handleActionBarWidthChange = function handleActionBarWidthChange(_ref3) {
-    var minWidth = _ref3.minWidth,
-        maxWidth = _ref3.maxWidth;
+  var handleActionBarWidthChange = function handleActionBarWidthChange(_ref2) {
+    var minWidth = _ref2.minWidth,
+        maxWidth = _ref2.maxWidth;
 
     /* don't know how to test resize */
 
@@ -177,9 +178,9 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setActionBarMinWidth(minWidth);
   };
 
-  var handlePageActionWidthChange = function handlePageActionWidthChange(_ref4) {
-    var minWidth = _ref4.minWidth,
-        maxWidth = _ref4.maxWidth;
+  var handlePageActionWidthChange = function handlePageActionWidthChange(_ref3) {
+    var minWidth = _ref3.minWidth,
+        maxWidth = _ref3.maxWidth;
 
     /* don't know how to test resize */
 
@@ -218,6 +219,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 
   useEffect(function () {
+    /* istanbul ignore else */
     if (pageActions !== null && pageActions !== void 0 && pageActions.content) {
       var minWidth = pageActions.minWidth,
           maxWidth = pageActions.maxWidth;
@@ -277,8 +279,9 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     });
   }, [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, // on scroll or various layout changes check updates if needed
-  function (_ref5) {
-    var current = _ref5.current;
+  // istanbul ignore next
+  function (_ref4) {
+    var current = _ref4.current;
     setPageHeaderStyles(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, "--".concat(blockClass, "--breadcrumb-top"), "".concat(metrics.headerOffset, "px")));
     });
@@ -294,8 +297,8 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     document.documentElement.style.setProperty("--".concat(blockClass, "--tagset-tooltip-offset"), "".concat(tagsetTooltipOffset, "px"));
     setScrollYValue(current.scrollY);
   }, [metrics.headerHeight, metrics.headerTopValue, metrics.headerOffset, enableBreadcrumbScroll]);
-  useWindowResize(function (_ref6) {
-    var current = _ref6.current;
+  useWindowResize(function (_ref5) {
+    var current = _ref5.current;
     // on window resize and other updates some values may have changed
     checkUpdateVerticalSpace();
     setWidthIsNarrow(current.innerWidth < breakpoints.md.width); // small (below medium) media query
@@ -361,7 +364,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "--offset-top-measuring-element"),
     ref: offsetTopMeasuringRef
   }), /*#__PURE__*/React.createElement("section", _extends({}, rest, {
-    className: cx([blockClass, "".concat(blockClass, "--no-margins-below-row"), className, (_ref7 = {}, _defineProperty(_ref7, "".concat(blockClass, "--has-navigation"), navigation || tags), _defineProperty(_ref7, "".concat(blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref7)]),
+    className: cx([blockClass, "".concat(blockClass, "--no-margins-below-row"), className, (_ref6 = {}, _defineProperty(_ref6, "".concat(blockClass, "--has-navigation"), navigation || tags), _defineProperty(_ref6, "".concat(blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref6)]),
     style: pageHeaderStyles,
     ref: headerRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(Grid, {
@@ -383,7 +386,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
 
   }) : null), /*#__PURE__*/React.createElement(Column, {
-    className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), (_ref8 = {}, _defineProperty(_ref8, "".concat(blockClass, "__action-bar-column--has-page-actions"), pageActions), _defineProperty(_ref8, "".concat(blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref8)])
+    className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), (_ref7 = {}, _defineProperty(_ref7, "".concat(blockClass, "__action-bar-column--has-page-actions"), pageActions), _defineProperty(_ref7, "".concat(blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref7)])
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__action-bar-column-content"),
     ref: sizingContainerRef
@@ -533,8 +536,8 @@ PageHeader.propTypes = _objectSpread({
    *
    * NOTE: This prop is required if actionBarItems are supplied
    */
-  actionBarOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref10) {
-    var actionBarItems = _ref10.actionBarItems;
+  actionBarOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref9) {
+    var actionBarItems = _ref9.actionBarItems;
     return actionBarItems && actionBarItems.length > 0;
   }),
 
@@ -569,8 +572,8 @@ PageHeader.propTypes = _objectSpread({
    * If the user supplies breadcrumbs then this property is required.
    * It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
    */
-  breadcrumbOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref11) {
-    var breadcrumbs = _ref11.breadcrumbs;
+  breadcrumbOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref10) {
+    var breadcrumbs = _ref10.breadcrumbs;
     return breadcrumbs && breadcrumbs.length > 0;
   }),
 
@@ -609,8 +612,8 @@ PageHeader.propTypes = _objectSpread({
     /**
      * A text version of the `label` for display, required if `label` is not a string.
      */
-    title: PropTypes.string.isRequired.if(function (_ref12) {
-      var label = _ref12.label;
+    title: PropTypes.string.isRequired.if(function (_ref11) {
+      var label = _ref11.label;
       return typeof label !== 'string';
     })
   })),
@@ -640,9 +643,9 @@ PageHeader.propTypes = _objectSpread({
    * If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
    * required for both the expend and collapse states of the button component used.
    */
-  collapseHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref13) {
-    var withoutBackground = _ref13.withoutBackground,
-        hasCollapseHeaderToggle = _ref13.hasCollapseHeaderToggle;
+  collapseHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref12) {
+    var withoutBackground = _ref12.withoutBackground,
+        hasCollapseHeaderToggle = _ref12.hasCollapseHeaderToggle;
     return !withoutBackground && hasCollapseHeaderToggle;
   }),
 
@@ -662,9 +665,9 @@ PageHeader.propTypes = _objectSpread({
    * If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
    * required for both the expend and collapse states of the button component used.
    */
-  expandHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref14) {
-    var withoutBackground = _ref14.withoutBackground,
-        hasCollapseHeaderToggle = _ref14.hasCollapseHeaderToggle;
+  expandHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref13) {
+    var withoutBackground = _ref13.withoutBackground,
+        hasCollapseHeaderToggle = _ref13.hasCollapseHeaderToggle;
     return !withoutBackground && hasCollapseHeaderToggle;
   }),
 
@@ -735,8 +738,8 @@ PageHeader.propTypes = _objectSpread({
    *
    * NOTE: This prop is required if pageActions are supplied
    */
-  pageActionsOverflowLabel: PropTypes.node.isRequired.if(function (_ref15) {
-    var pageActions = _ref15.pageActions;
+  pageActionsOverflowLabel: PropTypes.node.isRequired.if(function (_ref14) {
+    var pageActions = _ref14.pageActions;
     return pageActions && pageActions.length > 0 && !pageActions.content;
   }),
 

package/es/components/PageHeader/PageHeaderTitle.js

@@ -55,7 +55,8 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
       onSave: onSave,
       labelText: editableLabel,
       revertDescription: revertDescription,
-      saveDescription: saveDescription
+      saveDescription: saveDescription,
+      buttonTooltipPosition: "bottom"
     }, rest)) : /*#__PURE__*/React.createElement("span", {
       title: !loading ? asText : null
     }, text));

package/es/components/PageHeader/PageHeaderUtils.js

@@ -75,7 +75,10 @@ export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(
     var scrollableContainer = scrollableAncestor(headerRef.current);
     /* istanbul ignore next */
 
-    update.headerOffset = offsetTopMeasuringRef.current.getBoundingClientRect().top - (scrollableContainer === null || scrollableContainer === void 0 ? void 0 : scrollableContainer.getBoundingClientRect().top) || 0;
+    var scrollableContainerTop = scrollableContainer ? scrollableContainer.scrollTop - scrollableContainer.offsetTop : 0; // 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. It does not change on scroll or resize.
+
+    update.headerOffset = scrollableContainerTop + offsetTopMeasuringRef.current.getBoundingClientRect().top;
     /* istanbul ignore next */
 
     update.breadcrumbRowHeight = breadcrumbRowEl ? breadcrumbRowEl.clientHeight : 0;
@@ -115,35 +118,31 @@ export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(
     if (!enableBreadcrumbScroll || !navigation) {
       // adjust sticky top if no navigation or breadcrumb is to stay on screen
       update.headerTopValue += update.breadcrumbRowHeight;
-    }
+    } // if (window) {
 
-    if (window) {
-      var val;
-      /* don't know how to test resize */
 
-      /* istanbul ignore if */
+    var val;
+    /* don't know how to test resize */
 
-      if (breadcrumbRowEl) {
-        val = parseFloat(window.getComputedStyle(breadcrumbRowEl).getPropertyValue('margin-bottom'), 10);
-        update.breadcrumbRowSpaceBelow = isNaN(val) ? 0 : val;
-      }
-      /* don't know how to test resize */
+    /* istanbul ignore if */
 
-      /* istanbul ignore if */
+    if (breadcrumbRowEl) {
+      val = parseFloat(window.getComputedStyle(breadcrumbRowEl).getPropertyValue('margin-bottom'), 10);
+      update.breadcrumbRowSpaceBelow = isNaN(val) ? 0 : val;
+    }
+    /* don't know how to test resize */
 
+    /* istanbul ignore if */
 
-      if (titleRowEl) {
-        val = parseFloat(window.getComputedStyle(titleRowEl).getPropertyValue('margin-top'), 10);
-        update.titleRowSpaceAbove = isNaN(val) ? 0 : val;
 
-        if (pageActionsEl) {
-          val = parseFloat(window.getComputedStyle(pageActionsEl).getPropertyValue('margin-top'), 10);
-          update.pageActionsSpaceAbove = titleRowEl.clientHeight - pageActionsEl.clientHeight + update.titleRowSpaceAbove - (isNaN(val) ? 0 : val);
-        }
+    if (titleRowEl) {
+      val = parseFloat(window.getComputedStyle(titleRowEl).getPropertyValue('margin-top'), 10);
+      update.titleRowSpaceAbove = isNaN(val) ? 0 : val;
+
+      if (pageActionsEl) {
+        val = parseFloat(window.getComputedStyle(pageActionsEl).getPropertyValue('margin-top'), 10);
+        update.pageActionsSpaceAbove = titleRowEl.clientHeight - pageActionsEl.clientHeight + update.titleRowSpaceAbove - (isNaN(val) ? 0 : val);
       }
-    } else {
-      update.breadcrumbRowSpaceBelow = 0;
-      update.titleRowSpaceAbove = 0;
     }
 
     return _objectSpread(_objectSpread({}, previous), update);

package/es/components/index.js

@@ -18,7 +18,6 @@ export { ExportModal } from './ExportModal';
 export { ExpressiveCard } from './ExpressiveCard';
 export { HTTPError403, HTTPError404, HTTPErrorOther } from './HTTPErrors';
 export { ImportModal } from './ImportModal';
-export { LoadingBar } from './LoadingBar';
 export { ModifiedTabs } from './ModifiedTabs';
 export { MultiAddSelect } from './MultiAddSelect';
 export { NotificationsPanel } from './NotificationsPanel';

package/es/global/js/package-settings.js

@@ -40,6 +40,7 @@ var defaults = {
     NoTagsEmptyState: true,
     NotFoundEmptyState: true,
     NotificationsEmptyState: true,
+    OptionsTile: true,
     PageHeader: true,
     ProductiveCard: true,
     RemoveModal: true,
@@ -54,14 +55,12 @@ var defaults = {
     // other public components not yet reviewed and released:
     MultiAddSelect: false,
     SingleAddSelect: false,
-    LoadingBar: false,
     ModifiedTabs: false,
     Toolbar: false,
     ToolbarButton: false,
     ToolbarGroup: false,
     WebTerminal: false,
     EditSidePanel: false,
-    OptionsTile: false,
     CancelableTextEdit: false,
     InlineEdit: false,
     DataSpreadsheet: false