@carbon/ibm-products 1.10.0 → 1.11.2

package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleMultipleKeys = void 0;
+
+var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
+
+/**
+ * Copyright IBM Corp. 2022, 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.
+ */
+var handleMultipleKeys = function handleMultipleKeys(_ref) {
+  var _selectionAreasClone$;
+
+  var activeKeys = _ref.activeKeys,
+      selectionAreas = _ref.selectionAreas,
+      currentMatcher = _ref.currentMatcher,
+      rows = _ref.rows,
+      setSelectionAreas = _ref.setSelectionAreas,
+      columns = _ref.columns;
+  var activeKeyValues = activeKeys.current;
+  var selectionAreasClone = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
+  var indexOfCurrentArea = selectionAreasClone.findIndex(function (item) {
+    return item.matcher === currentMatcher;
+  });
+  var pointToUpdate = (_selectionAreasClone$ = selectionAreasClone[indexOfCurrentArea]) !== null && _selectionAreasClone$ !== void 0 && _selectionAreasClone$.point2 ? selectionAreasClone[indexOfCurrentArea].point2 : selectionAreasClone[indexOfCurrentArea].point1; // Down + Shift
+
+  if (activeKeyValues.includes('Shift') && activeKeyValues.includes('ArrowDown')) {
+    if (rows.length - 1 === pointToUpdate.row) {
+      return;
+    }
+
+    var newPoint = {
+      row: pointToUpdate.row + 1,
+      column: pointToUpdate.column
+    };
+    selectionAreasClone[indexOfCurrentArea].point2 = newPoint;
+    selectionAreasClone[indexOfCurrentArea].areaCreated = false;
+    setSelectionAreas(selectionAreasClone);
+  } // Right + Shift
+
+
+  if (activeKeyValues.includes('Shift') && activeKeyValues.includes('ArrowRight')) {
+    if (columns.length - 1 === pointToUpdate.column) {
+      return;
+    }
+
+    var _newPoint = {
+      row: pointToUpdate.row,
+      column: pointToUpdate.column + 1
+    };
+    selectionAreasClone[indexOfCurrentArea].point2 = _newPoint;
+    selectionAreasClone[indexOfCurrentArea].areaCreated = false;
+    setSelectionAreas(selectionAreasClone);
+  } // Up + Shift
+
+
+  if (activeKeyValues.includes('Shift') && activeKeyValues.includes('ArrowUp')) {
+    if (pointToUpdate.row === 0) {
+      return;
+    }
+
+    var _newPoint2 = {
+      row: pointToUpdate.row - 1,
+      column: pointToUpdate.column
+    };
+    selectionAreasClone[indexOfCurrentArea].point2 = _newPoint2;
+    selectionAreasClone[indexOfCurrentArea].areaCreated = false;
+    setSelectionAreas(selectionAreasClone);
+  } // Left + Shift
+
+
+  if (activeKeyValues.includes('Shift') && activeKeyValues.includes('ArrowLeft')) {
+    if (pointToUpdate.column === 0) {
+      return;
+    }
+
+    var _newPoint3 = {
+      row: pointToUpdate.row,
+      column: pointToUpdate.column - 1
+    };
+    selectionAreasClone[indexOfCurrentArea].point2 = _newPoint3;
+    selectionAreasClone[indexOfCurrentArea].areaCreated = false;
+    setSelectionAreas(selectionAreasClone);
+  }
+};
+
+exports.handleMultipleKeys = handleMultipleKeys;

package/lib/components/DataSpreadsheet/utils/removeCellSelections.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeCellSelections = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _settings = require("../../../settings");
+
+/**
+ * Copyright IBM Corp. 2022, 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.
+ */
+// Removes the cell selection elements
+var removeCellSelections = function removeCellSelections(_ref) {
+  var matcher = _ref.matcher,
+      spreadsheetRef = _ref.spreadsheetRef,
+      _ref$blockClass = _ref.blockClass,
+      blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass;
+
+  if (matcher && typeof matcher === 'string') {
+    var selectionToRemove = spreadsheetRef.current.querySelector("[data-matcher-id=\"".concat(matcher, "\"]"));
+
+    if (selectionToRemove) {
+      selectionToRemove.remove();
+    }
+  } else {
+    var cellSelections = spreadsheetRef.current.querySelectorAll(".".concat(blockClass, "__selection-area--element"));
+    (0, _toConsumableArray2.default)(cellSelections).forEach(function (element) {
+      return element.remove();
+    });
+  }
+};
+
+exports.removeCellSelections = removeCellSelections;

package/lib/components/InlineEdit/InlineEdit.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -31,21 +33,24 @@ var _carbonComponentsReact = require("carbon-components-react");
 
 var _iconsReact = require("@carbon/icons-react");
 
-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"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.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.
  */
@@ -53,7 +58,9 @@ var defaults = {
 var InlineEdit = /*#__PURE__*/_react.default.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,
@@ -91,7 +98,21 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
 
   var validationText = invalidText; // || warnText;
 
-  var validationIcon = showValidation ? /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, null) : null;
+  var validationIcon = showValidation ? /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, null) : null; // sanitize the tooltip values
+
+  var alignIsObject = (0, _typeof2.default)(buttonTooltipAlignment) === 'object';
+  var directionIsObject = (0, _typeof2.default)(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) {
@@ -274,14 +295,14 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       className: (0, _classnames.default)("".concat(blockClass, "__toolbar"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__toolbar--animation"), toolbarAnimation), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__toolbar--saveable"), refInput.current && value !== internalValue), _cx3))
     }, showValidation && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__validation-icon")
-    }, validationIcon), editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, validationIcon), editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({
       className: "".concat(blockClass, "__cancel"),
       kind: "ghost",
       hasIconOnly: true,
       iconDescription: cancelDescription,
       onClick: handleCancel,
       renderIcon: _iconsReact.Close16
-    }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, tipPositions.cancel)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({
       className: "".concat(blockClass, "__save"),
       kind: "ghost",
       hasIconOnly: true,
@@ -289,8 +310,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       onClick: handleSave,
       renderIcon: _iconsReact.Checkmark16,
       disabled: value === internalValue
-    })) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
-      "aria-hidden": "true",
+    }, tipPositions.save))) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({
       className: (0, _classnames.default)("".concat(blockClass, "__edit"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__edit--always-visible"), editAlwaysVisible)),
       kind: "ghost",
       hasIconOnly: true,
@@ -299,7 +319,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       renderIcon: disabled ? _iconsReact.EditOff16 : _iconsReact.Edit16,
       disabled: disabled,
       tabIndex: -1
-    }))), /*#__PURE__*/_react.default.createElement("div", {
+    }, tipPositions.edit)))), /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(blockClass, "__disabled-cover"))
     }), showValidation && validationText && validationText.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__validation-text ").concat(_settings.carbon.prefix, "--form-requirement")
@@ -317,6 +337,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.default.oneOfType([_propTypes.default.oneOf(['start', 'center', 'end']), _propTypes.default.shape({
+    cancel: _propTypes.default.oneOf(['start', 'center', 'end']),
+    edit: _propTypes.default.oneOf(['start', 'center', 'end']),
+    save: _propTypes.default.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.default.oneOfType([_propTypes.default.oneOf(['top', 'right', 'bottom', 'left']), _propTypes.default.shape({
+    cancel: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
+    edit: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
+    save: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left'])
+  })]),
+
   /**
    * label for cancel button
    */

package/lib/components/OptionsTile/OptionsTile.js

@@ -35,7 +35,7 @@ var _iconsReact = require("@carbon/icons-react");
 
 var carbonMotion = _interopRequireWildcard(require("@carbon/motion"));
 
-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"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -57,8 +57,6 @@ var OptionsTile = /*#__PURE__*/_react.default.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,
@@ -68,6 +66,8 @@ var OptionsTile = /*#__PURE__*/_react.default.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -90,7 +90,7 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var detailsRef = (0, _react.useRef)(null);
   var contentRef = (0, _react.useRef)(null);
   var id = (0, _uuidv.default)();
-  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;
@@ -218,11 +218,11 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(blockClass, "__title")
-    }, /*#__PURE__*/_react.default.createElement("h6", {
-      id: headingId,
       className: "".concat(blockClass, "__heading")
-    }, heading), text && /*#__PURE__*/_react.default.createElement("span", {
+    }, /*#__PURE__*/_react.default.createElement("h6", {
+      id: titleId,
+      className: "".concat(blockClass, "__title")
+    }, title), text && /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)(summaryClasses),
       "aria-hidden": summaryHidden
     }, Icon && /*#__PURE__*/_react.default.createElement(Icon, null), /*#__PURE__*/_react.default.createElement("span", {
@@ -243,7 +243,7 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     toggled: enabled,
     labelA: "",
     labelB: "",
-    "aria-labelledby": headingId,
+    "aria-labelledby": titleId,
     onToggle: onToggle,
     size: "sm",
     disabled: isLocked
@@ -292,16 +292,6 @@ OptionsTile.propTypes = {
    */
   enabled: _propTypes.default.bool,
 
-  /**
-   * Provide the heading for this OptionsTile.
-   */
-  heading: _propTypes.default.string.isRequired,
-
-  /**
-   * Optionally provide an id which should be used for the heading.
-   */
-  headingId: _propTypes.default.string,
-
   /**
    * Whether the OptionsTile is in invalid validation state.
    */
@@ -343,6 +333,16 @@ OptionsTile.propTypes = {
    */
   summary: _propTypes.default.string,
 
+  /**
+   * Provide the title for this OptionsTile.
+   */
+  title: _propTypes.default.string.isRequired,
+
+  /**
+   * Optionally provide an id which should be used for the title.
+   */
+  titleId: _propTypes.default.string,
+
   /**
    * Whether the OptionsTile is in warning validation state.
    */

package/lib/components/PageHeader/PageHeader.js

@@ -69,7 +69,7 @@ var defaults = {
 };
 
 var PageHeader = /*#__PURE__*/_react.default.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,
@@ -86,7 +86,7 @@ var PageHeader = /*#__PURE__*/_react.default.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,
@@ -104,8 +104,10 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       withoutBackground = _ref.withoutBackground,
       rest = (0, _objectWithoutProperties2.default)(_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 = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -124,8 +126,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var offsetTopMeasuringRef = (0, _react.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 (0, _PageHeaderUtils.utilCheckUpdateVerticalSpace)(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar, widthIsNarrow, setMetrics);
@@ -191,9 +192,9 @@ var PageHeader = /*#__PURE__*/_react.default.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 */
 
@@ -206,9 +207,9 @@ var PageHeader = /*#__PURE__*/_react.default.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 */
 
@@ -247,6 +248,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
 
   (0, _react.useEffect)(function () {
+    /* istanbul ignore else */
     if (pageActions !== null && pageActions !== void 0 && pageActions.content) {
       var minWidth = pageActions.minWidth,
           maxWidth = pageActions.maxWidth;
@@ -306,8 +308,9 @@ var PageHeader = /*#__PURE__*/_react.default.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]);
   (0, _hooks.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), {}, (0, _defineProperty2.default)({}, "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-top"), "".concat(metrics.headerOffset, "px")));
     });
@@ -323,8 +326,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     document.documentElement.style.setProperty("--".concat(_PageHeaderUtils.blockClass, "--tagset-tooltip-offset"), "".concat(tagsetTooltipOffset, "px"));
     setScrollYValue(current.scrollY);
   }, [metrics.headerHeight, metrics.headerTopValue, metrics.headerOffset, enableBreadcrumbScroll]);
-  (0, _hooks.useWindowResize)(function (_ref6) {
-    var current = _ref6.current;
+  (0, _hooks.useWindowResize)(function (_ref5) {
+    var current = _ref5.current;
     // on window resize and other updates some values may have changed
     checkUpdateVerticalSpace();
     setWidthIsNarrow(current.innerWidth < _layout.breakpoints.md.width); // small (below medium) media query
@@ -390,7 +393,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     className: "".concat(_PageHeaderUtils.blockClass, "--offset-top-measuring-element"),
     ref: offsetTopMeasuringRef
   }), /*#__PURE__*/_react.default.createElement("section", (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)([_PageHeaderUtils.blockClass, "".concat(_PageHeaderUtils.blockClass, "--no-margins-below-row"), className, (_ref7 = {}, (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref7)]),
+    className: (0, _classnames.default)([_PageHeaderUtils.blockClass, "".concat(_PageHeaderUtils.blockClass, "--no-margins-below-row"), className, (_ref6 = {}, (0, _defineProperty2.default)(_ref6, "".concat(_PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), (0, _defineProperty2.default)(_ref6, "".concat(_PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref6)]),
     style: pageHeaderStyles,
     ref: headerRef
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, {
@@ -412,7 +415,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
 
   }) : null), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
-    className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__action-bar-column ").concat(_PageHeaderUtils.blockClass, "__action-bar-column--background"), (_ref8 = {}, (0, _defineProperty2.default)(_ref8, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), (0, _defineProperty2.default)(_ref8, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref8)])
+    className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__action-bar-column ").concat(_PageHeaderUtils.blockClass, "__action-bar-column--background"), (_ref7 = {}, (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref7)])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_PageHeaderUtils.blockClass, "__action-bar-column-content"),
     ref: sizingContainerRef
@@ -565,8 +568,8 @@ PageHeader.propTypes = _objectSpread({
    *
    * NOTE: This prop is required if actionBarItems are supplied
    */
-  actionBarOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref10) {
-    var actionBarItems = _ref10.actionBarItems;
+  actionBarOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref9) {
+    var actionBarItems = _ref9.actionBarItems;
     return actionBarItems && actionBarItems.length > 0;
   }),
 
@@ -601,8 +604,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.default.string.isRequired.if(function (_ref11) {
-    var breadcrumbs = _ref11.breadcrumbs;
+  breadcrumbOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref10) {
+    var breadcrumbs = _ref10.breadcrumbs;
     return breadcrumbs && breadcrumbs.length > 0;
   }),
 
@@ -641,8 +644,8 @@ PageHeader.propTypes = _objectSpread({
     /**
      * A text version of the `label` for display, required if `label` is not a string.
      */
-    title: _propTypes.default.string.isRequired.if(function (_ref12) {
-      var label = _ref12.label;
+    title: _propTypes.default.string.isRequired.if(function (_ref11) {
+      var label = _ref11.label;
       return typeof label !== 'string';
     })
   })),
@@ -672,9 +675,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.default.string.isRequired.if(function (_ref13) {
-    var withoutBackground = _ref13.withoutBackground,
-        hasCollapseHeaderToggle = _ref13.hasCollapseHeaderToggle;
+  collapseHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref12) {
+    var withoutBackground = _ref12.withoutBackground,
+        hasCollapseHeaderToggle = _ref12.hasCollapseHeaderToggle;
     return !withoutBackground && hasCollapseHeaderToggle;
   }),
 
@@ -694,9 +697,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.default.string.isRequired.if(function (_ref14) {
-    var withoutBackground = _ref14.withoutBackground,
-        hasCollapseHeaderToggle = _ref14.hasCollapseHeaderToggle;
+  expandHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref13) {
+    var withoutBackground = _ref13.withoutBackground,
+        hasCollapseHeaderToggle = _ref13.hasCollapseHeaderToggle;
     return !withoutBackground && hasCollapseHeaderToggle;
   }),
 
@@ -767,8 +770,8 @@ PageHeader.propTypes = _objectSpread({
    *
    * NOTE: This prop is required if pageActions are supplied
    */
-  pageActionsOverflowLabel: _propTypes.default.node.isRequired.if(function (_ref15) {
-    var pageActions = _ref15.pageActions;
+  pageActionsOverflowLabel: _propTypes.default.node.isRequired.if(function (_ref14) {
+    var pageActions = _ref14.pageActions;
     return pageActions && pageActions.length > 0 && !pageActions.content;
   }),
 

package/lib/components/PageHeader/PageHeaderTitle.js

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

package/lib/components/PageHeader/PageHeaderUtils.js

@@ -85,7 +85,10 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
     var scrollableContainer = (0, _scrollableAncestor.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;
@@ -125,35 +128,31 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
     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/lib/components/index.js

@@ -147,12 +147,6 @@ Object.defineProperty(exports, "InlineEdit", {
     return _InlineEdit.InlineEdit;
   }
 });
-Object.defineProperty(exports, "LoadingBar", {
-  enumerable: true,
-  get: function get() {
-    return _LoadingBar.LoadingBar;
-  }
-});
 Object.defineProperty(exports, "ModifiedTabs", {
   enumerable: true,
   get: function get() {
@@ -326,8 +320,6 @@ var _HTTPErrors = require("./HTTPErrors");
 
 var _ImportModal = require("./ImportModal");
 
-var _LoadingBar = require("./LoadingBar");
-
 var _ModifiedTabs = require("./ModifiedTabs");
 
 var _MultiAddSelect = require("./MultiAddSelect");