@carbon/ibm-products 2.7.0 → 2.8.0

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -1,19 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 // @flow
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import cx from 'classnames';
 import { TableHeader, TableRow } from '@carbon/react';
+import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids';
 import { pkg } from '../../../settings';
 import getColTitle from '../utils/getColTitle';
+import { handleColumnResizeEndEvent, handleColumnResizeStartEvent, handleColumnResizingEvent } from './addons/stateReducer';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
@@ -26,15 +29,75 @@ var getAccessibilityProps = function getAccessibilityProps(header) {
   return props;
 };
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
+  // Used to measure the height of the table and uses that value
+  // to display a vertical line to indicate the column you are resizing
+  useEffect(function () {
+    var tableId = datagridState.tableId;
+    if (tableId) {
+      var gridElement = document.querySelector("#".concat(tableId));
+      var tableElement = gridElement.querySelector('table');
+      var headerRowElement = document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head"));
+      var hasHorizontalScrollbar = tableElement.scrollWidth > tableElement.clientWidth;
+      var scrollBuffer = hasHorizontalScrollbar ? 18 : 2;
+      var tableToolbar = gridElement.querySelector(".".concat(blockClass, "__table-toolbar"));
+      var tableToolbarHeight = (tableToolbar === null || tableToolbar === void 0 ? void 0 : tableToolbar.offsetHeight) || 0;
+      var setCustomValues = function setCustomValues(_ref) {
+        var _ref$rowHeight = _ref.rowHeight,
+          rowHeight = _ref$rowHeight === void 0 ? 48 : _ref$rowHeight,
+          gridHeight = _ref.gridHeight;
+        headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), px(rowHeight));
+        headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), px(gridHeight - scrollBuffer - tableToolbarHeight));
+      };
+      setCustomValues({
+        gridHeight: gridElement.offsetHeight,
+        rowHeight: headerRowElement.clientHeight
+      });
+    }
+  }, [datagridState.rowSize, datagridState.tableId, datagridState]);
+  var _useState = useState(2),
+    _useState2 = _slicedToArray(_useState, 1),
+    incrementAmount = _useState2[0];
+  var getClientXPosition = function getClientXPosition(event) {
+    var isTouchEvent = false;
+    if (event.type === 'touchstart') {
+      // Do not respond to multiple touches (e.g. 2 or 3 fingers)
+      if (event.touches && event.touches.length > 1) {
+        return;
+      }
+      isTouchEvent = true;
+    }
+    var clientX = isTouchEvent ? Math.round(event.touches[0].clientX) : event.clientX;
+    var closestHeader = event.target.closest('th');
+    var closestHeaderCoords = closestHeader.getBoundingClientRect();
+    var headerOffset = closestHeaderCoords.left;
+    var offsetValue = clientX - headerOffset;
+    return offsetValue;
+  };
+  useEffect(function () {
+    var isResizing = datagridState.state.isResizing;
+    if (isResizing) {
+      var onColResizeEnd = datagridState.onColResizeEnd;
+      document.addEventListener('mouseup', function () {
+        handleColumnResizeEndEvent(datagridState.dispatch, onColResizeEnd, isResizing);
+        document.activeElement.blur();
+      });
+    }
+    return function () {
+      document.removeEventListener('mouseup', function () {
+        return handleColumnResizeEndEvent(datagridState.dispatch);
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [datagridState.state.isResizing]);
   return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroup.getHeaderGroupProps({
     role: false
   }), {
     className: cx("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
     ref: headRef
-  }), datagridState.headers.filter(function (_ref) {
-    var isVisible = _ref.isVisible;
+  }), datagridState.headers.filter(function (_ref2) {
+    var isVisible = _ref2.isVisible;
     return isVisible;
-  }).map(function (header) {
+  }).map(function (header, index) {
     var _cx;
     if (header.id === selectionColumnId) {
       // render directly without the wrapper TableHeader
@@ -42,13 +105,57 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
         key: header.id
       });
     }
-    return /*#__PURE__*/React.createElement(TableHeader, _extends({}, header.getHeaderProps({
-      role: false
-    }), {
+    var _ref3 = header || 50,
+      minWidth = _ref3.minWidth;
+    var visibleColumns = datagridState.visibleColumns,
+      state = datagridState.state,
+      dispatch = datagridState.dispatch,
+      onColResizeEnd = datagridState.onColResizeEnd;
+    var columnResizing = state.columnResizing,
+      isResizing = state.isResizing;
+    var columnWidths = columnResizing.columnWidths;
+    var originalCol = visibleColumns[index];
+    return /*#__PURE__*/React.createElement(TableHeader, _extends({}, header.getHeaderProps(), {
       className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), _defineProperty(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
       key: header.id
-    }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/React.createElement("div", _extends({}, header.getResizerProps(), {
-      className: "".concat(blockClass, "__resizer")
+    }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, header.getResizerProps(), {
+      onMouseMove: function onMouseMove(event) {
+        if (isResizing) {
+          var newWidth = getClientXPosition(event);
+          // Sets a min width for resizing so at least one character from the column header is visible
+          if (newWidth >= 50) {
+            handleColumnResizingEvent(dispatch, header, newWidth);
+          }
+        }
+      },
+      onMouseDown: function onMouseDown() {
+        return handleColumnResizeStartEvent(dispatch, header.id);
+      },
+      onKeyDown: function onKeyDown(event) {
+        var key = event.key;
+        if (key === 'ArrowLeft' || key === 'ArrowRight') {
+          var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < 90 ? 90 : originalCol.width);
+          if (key === 'ArrowLeft') {
+            if (currentColumnWidth - incrementAmount > Math.max(minWidth, 50)) {
+              var newWidth = currentColumnWidth - incrementAmount;
+              handleColumnResizingEvent(dispatch, header, newWidth, true);
+            }
+          }
+          if (key === 'ArrowRight') {
+            var _newWidth = currentColumnWidth + incrementAmount;
+            handleColumnResizingEvent(dispatch, header, _newWidth, true);
+          }
+        }
+      },
+      onKeyUp: function onKeyUp() {
+        return handleColumnResizeEndEvent(dispatch, onColResizeEnd, header.id);
+      },
+      className: cx("".concat(blockClass, "__col-resizer-range")),
+      type: "range",
+      defaultValue: originalCol.width,
+      "aria-label": "Resize column"
+    })), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(blockClass, "__col-resize-indicator")
     })));
   }));
 };

package/es/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -8,10 +8,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 
 import React, { useEffect, useRef, useState } from 'react';
-import { Add, OverflowMenuVertical } from '@carbon/react/icons';
-import { TableToolbar, TableBatchActions, TableBatchAction } from '@carbon/react';
+import { TableToolbar, TableBatchActions, TableBatchAction, MenuButton, MenuItem } from '@carbon/react';
 import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver';
-import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
 import { pkg, carbon } from '../../../settings';
 import cx from 'classnames';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
@@ -76,19 +74,15 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     if ((toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 && !displayAllInMenu) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(ButtonMenu, {
-      label: width > minWidthBeforeOverflowIcon ? 'More' : null,
-      renderIcon: width > minWidthBeforeOverflowIcon ? Add : OverflowMenuVertical,
-      className: cx("".concat(blockClass, "__button-menu"), _defineProperty({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
-      menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
-      flipped: true,
-      menuAriaLabel: 'Batch actions'
+    return /*#__PURE__*/React.createElement(MenuButton, {
+      label: "More",
+      className: cx("".concat(blockClass, "__button-menu"), _defineProperty({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon))
     }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
       if (index < 2) {
         if (displayAllInMenu) {
-          return /*#__PURE__*/React.createElement(ButtonMenuItem, {
+          return /*#__PURE__*/React.createElement(MenuItem, {
             key: "".concat(batchAction.label, "-").concat(index),
-            itemText: batchAction.label,
+            label: batchAction.label,
             onClick: function onClick(event) {
               batchAction.onClick(getSelectedRowData(), event);
               if (batchAction.type === 'select_all') {
@@ -99,9 +93,9 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
         }
         return null;
       }
-      return /*#__PURE__*/React.createElement(ButtonMenuItem, {
+      return /*#__PURE__*/React.createElement(MenuItem, {
         key: "".concat(batchAction.label, "-").concat(index),
-        itemText: batchAction.label,
+        label: batchAction.label,
         onClick: function onClick(event) {
           batchAction.onClick(getSelectedRowData(), event);
           if (batchAction.type === 'select_all') {

package/es/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -0,0 +1,111 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 COLUMN_RESIZE_START = 'columnStartResizing';
+var COLUMN_RESIZING = 'columnResizing';
+var COLUMN_RESIZE_END = 'columnDoneResizing';
+var INIT = 'init';
+export var handleColumnResizeStartEvent = function handleColumnResizeStartEvent(dispatch, headerId) {
+  dispatch({
+    type: COLUMN_RESIZE_START,
+    payload: {
+      headerId: headerId
+    }
+  });
+};
+export var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId) {
+  dispatch({
+    type: COLUMN_RESIZE_END,
+    payload: {
+      onColResizeEnd: onColResizeEnd,
+      headerId: headerId
+    }
+  });
+};
+export var handleColumnResizingEvent = function handleColumnResizingEvent(dispatch, header, newWidth, isKeyEvent) {
+  if (isKeyEvent) {
+    dispatch({
+      type: COLUMN_RESIZE_START,
+      payload: {
+        newWidth: newWidth,
+        headerId: header.id,
+        defaultWidth: header.originalWidth
+      }
+    });
+  }
+  dispatch({
+    type: COLUMN_RESIZING,
+    payload: {
+      newWidth: newWidth,
+      headerId: header.id,
+      defaultWidth: header.originalWidth
+    }
+  });
+};
+export var stateReducer = function stateReducer(newState, action) {
+  switch (action.type) {
+    case INIT:
+      {
+        return _objectSpread(_objectSpread({}, newState), {}, {
+          isResizing: false
+        });
+      }
+    case COLUMN_RESIZE_START:
+      {
+        var headerId = action.payload.headerId;
+        return _objectSpread(_objectSpread({}, newState), {}, {
+          isResizing: headerId
+        });
+      }
+    case COLUMN_RESIZING:
+      {
+        var _ref = action.payload || {},
+          _headerId = _ref.headerId,
+          newWidth = _ref.newWidth,
+          defaultWidth = _ref.defaultWidth;
+        var newColumnWidth = {};
+        if (typeof _headerId === 'undefined') {
+          return _objectSpread({}, newState);
+        }
+        newColumnWidth[_headerId] = newWidth;
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+            _ = _ref3[0],
+            value = _ref3[1];
+          return !isNaN(value);
+        }));
+        return _objectSpread(_objectSpread({}, newState), {}, {
+          isResizing: _headerId,
+          columnResizing: _objectSpread(_objectSpread({}, newState.columnResizing), {}, {
+            columnWidth: defaultWidth,
+            columnWidths: _objectSpread(_objectSpread({}, cleanedWidths), newColumnWidth),
+            headerIdWidths: [_headerId, newWidth]
+          })
+        });
+      }
+    case COLUMN_RESIZE_END:
+      {
+        var _action$payload = action.payload,
+          onColResizeEnd = _action$payload.onColResizeEnd,
+          _headerId2 = _action$payload.headerId;
+        var currentColumn = {};
+        currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
+        var allChangedColumns = newState.columnResizing.columnWidths;
+        var isResizing = newState.isResizing;
+        if (isResizing) {
+          onColResizeEnd === null || onColResizeEnd === void 0 ? void 0 : onColResizeEnd(currentColumn, allChangedColumns);
+        }
+        return _objectSpread(_objectSpread({}, newState), {}, {
+          isResizing: false
+        });
+      }
+  }
+};

package/es/components/Datagrid/Datagrid.docs-page.js

@@ -41,6 +41,12 @@ export var DocsPage = function DocsPage() {
         language: 'jsx',
         code: "\n          const columns = [\n  {\n    Header: 'First Name',\n    accessor: 'firstName',\n  },\n  {\n    Header: 'Last Name',\n    accessor: 'lastName',\n    Cell: ({ cell: { value } }) => (\n      <span className=\"custom-cell-wrapper\">{value}</span>\n    ),\n  },\n];\n          "
       }
+    }, {
+      description: "There is also an optional resize callback when resizing columns, allowing you to save the widths of columns that have been resized. The resize callback returns the column that was just resized and it's width, in addition to all of the columns that have been resized and their widths.",
+      source: {
+        language: 'jsx',
+        code: "\nuseDatagrid({\n  columns,\n  data,\n  onColResizeEnd: (currentColumn, allColumns) =>\n      console.log(currentColumn, allColumns),\n});\n          "
+      }
     }, {
       title: 'Rendering the table toolbar',
       image: /*#__PURE__*/React.createElement("img", {

package/es/components/Datagrid/useDatagrid.js

@@ -19,6 +19,7 @@ import useRowSize from './useRowSize';
 import useHeaderRow from './Datagrid/DatagridHeaderRow';
 import useFlexResize from './useFlexResize';
 import useFloatingScroll from './useFloatingScroll';
+import { stateReducer } from './Datagrid/addons/stateReducer';
 var useDatagrid = function useDatagrid(params) {
   var defaultPlugins = [useFlexLayout, useHeaderRow, useSkeletonRows, useResizeColumns, useRowRenderer, useDefaultStringRenderer, useRowSize, useFilters, useGlobalFilter, useSortBy, useExpanded];
   var defaultEndPlugins = [usePagination, useRowSelect, useFlexResize, useFloatingScroll];
@@ -29,9 +30,11 @@ var useDatagrid = function useDatagrid(params) {
   for (var _len = arguments.length, plugins = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     plugins[_key - 1] = arguments[_key];
   }
-  var tableState = useTable.apply(void 0, [_objectSpread({
+  var tableState = useTable.apply(void 0, [_objectSpread(_objectSpread({
     tableId: tableId
-  }, params)].concat(defaultPlugins, plugins, defaultEndPlugins, _toConsumableArray(clientEndPlugins)));
+  }, params), {}, {
+    stateReducer: stateReducer
+  })].concat(defaultPlugins, plugins, defaultEndPlugins, _toConsumableArray(clientEndPlugins)));
   return tableState;
 };
 export default useDatagrid;

package/es/components/Datagrid/utils/DatagridActions.js

@@ -7,8 +7,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 
 import { Add, ChevronDown, Download, Filter, Restart } from '@carbon/react/icons';
-import { Button, ComposedModal, Dropdown, IconButton, ModalBody, ModalFooter, ModalHeader, OverflowMenu, OverflowMenuItem, TableToolbarContent, TableToolbarSearch } from '@carbon/react';
-import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
+import { Button, ComposedModal, Dropdown, IconButton, ModalBody, ModalFooter, ModalHeader, OverflowMenu, OverflowMenuItem, TableToolbarContent, TableToolbarSearch, MenuButton, MenuItem } from '@carbon/react';
 import React, { useLayoutEffect, useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { pkg } from '../../../settings';
@@ -151,18 +150,18 @@ export var DatagridActions = function DatagridActions(datagridState) {
     onClick: downloadCsv
   })), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
     style: style
-  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement(ButtonMenu, {
+  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement(MenuButton, {
     label: "Primary button",
     renderIcon: ChevronDown,
-    menuOptionsClass: "".concat(blockClass, "__toolbar-options")
-  }, /*#__PURE__*/React.createElement(ButtonMenuItem, {
-    itemText: "Option 1",
+    className: "".concat(blockClass, "__toolbar-options")
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    label: "Option 1",
     onClick: action("Click on ButtonMenu Option 1")
-  }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
-    itemText: "Option 2",
+  }), /*#__PURE__*/React.createElement(MenuItem, {
+    label: "Option 2",
     onClick: action("Click on ButtonMenu Option 2")
-  }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
-    itemText: "Option 3",
+  }), /*#__PURE__*/React.createElement(MenuItem, {
+    label: "Option 3",
     onClick: action("Click on ButtonMenu Option 3")
   }))) : /*#__PURE__*/React.createElement(TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/React.createElement(TableToolbarSearch, {
     size: "xl",

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -20,6 +20,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { useClickOutside } from '../../global/js/hooks';
 import { pkg } from '../../settings';
 import { timeAgo } from './utils';
+import { prepareProps } from '../../global/js/utils/props-helper';
 import { NotificationsEmptyState } from '../EmptyStates/NotificationsEmptyState';
 
 // Carbon and package components we use.
@@ -300,7 +301,7 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
     }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/React.createElement(Link, _extends({
       href: notification.link.url,
       className: "".concat(blockClass, "__notifications-link")
-    }, notification.link.optional), notification.link.text)), /*#__PURE__*/React.createElement(IconButton, {
+    }, prepareProps({}, notification.link, ['text', 'url'])), notification.link.text)), /*#__PURE__*/React.createElement(IconButton, {
       align: "left",
       kind: "ghost",
       size: "sm",
@@ -420,10 +421,7 @@ NotificationsPanel.propTypes = {
     description: PropTypes.string,
     link: PropTypes.shape({
       url: PropTypes.string,
-      text: PropTypes.string,
-      optional: PropTypes.shape({
-        // Add optional props here
-      })
+      text: PropTypes.string
     }),
     unread: PropTypes.bool,
     onNotificationClick: PropTypes.func

package/es/components/PageHeader/PageHeaderUtils.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
- * Copyright IBM Corp. 2020, 2021
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -65,11 +65,14 @@ export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(
     var scrollableContainer = scrollableAncestor(headerRef.current);
 
     /* istanbul ignore next */
-    var scrollableContainerTop = scrollableContainer ? scrollableContainer.scrollTop - scrollableContainer.getBoundingClientRect().top : 0;
+    var scrollableContainerTop = scrollableContainer ? scrollableContainer.getBoundingClientRect().top : 0;
+
+    /* istanbul ignore next */
+    var offsetMeasuringTop = offsetTopMeasuringRef.current ? offsetTopMeasuringRef.current.getBoundingClientRect().top : 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 = (offsetTopMeasuringRef.current ? offsetTopMeasuringRef.current.getBoundingClientRect().top : 0) + scrollableContainerTop;
+    update.headerOffset = offsetMeasuringTop - scrollableContainerTop;
 
     /* istanbul ignore next */
     update.breadcrumbRowHeight = breadcrumbRowEl ? breadcrumbRowEl.clientHeight : 0;
@@ -127,6 +130,10 @@ export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(
         update.pageActionsSpaceAbove = titleRowEl.clientHeight - pageActionsEl.clientHeight + update.titleRowSpaceAbove - (isNaN(val) ? 0 : val);
       }
     }
+    if (!hasActionBar && pageActionsEl) {
+      // adjust headerTopValue when there are no page actions or action bar items (margin above title row)
+      update.headerTopValue -= update.titleRowSpaceAbove;
+    }
     return _objectSpread(_objectSpread({}, previous), update);
   });
 };

package/es/components/TooltipTrigger/TooltipTrigger.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className"];
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Import portions of React that are needed.
+import React from 'react';
+
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { pkg } from '../../settings';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--tooltip-trigger");
+var componentName = 'TooltipTrigger';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+/**
+ * This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
+ * no blanked button.
+ */
+export var TooltipTrigger = function TooltipTrigger(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: "button"
+  }, rest, {
+    className: cx(blockClass,
+    // Apply the block class to the main HTML element
+    className // Apply any supplied class names to the main HTML element.
+    )
+  }), children);
+};
+
+// Return a placeholder if not released and not enabled by feature flag.
+TooltipTrigger = pkg.checkComponentEnabled(TooltipTrigger, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+TooltipTrigger.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+TooltipTrigger.propTypes = {
+  /**
+   * Child content of tooltip trigger
+   */
+  children: PropTypes.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string
+};

package/es/components/TooltipTrigger/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 { TooltipTrigger } from './TooltipTrigger';

package/es/components/TooltipTrigger/useExample.js

@@ -0,0 +1,49 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useState, useEffect } from 'react';
+import { pkg } from '../../settings';
+var useExample = function useExample(initialTime) {
+  // NOTE: hooks cannot be called conditionally.
+  //
+  // ** If the hook uses other hooks then they must be called,
+  // ** this could lead to unexpected behavior.
+  // ** As some hooks may still be called even if the condition is false.
+
+  var _useState = useState(
+    // Disable hook in a safe way if possible, else use despite feature disabled.
+    // Either a console error or warning will be logged.
+    initialTime),
+    _useState2 = _slicedToArray(_useState, 2),
+    time = _useState2[0],
+    setTime = _useState2[1];
+
+  // Use of the feature flag to
+  var feature = 'ExampleComponent.useExample';
+  var tryFeature = initialTime !== undefined;
+  var featureEnabled = tryFeature && pkg.checkReportFeatureEnabled(feature);
+  if (tryFeature && !featureEnabled) {
+    // Output a useful message if the feature is disabled.
+    console.warn("Disabled feature \"".concat(feature, "\" does not change the initialTime."));
+  }
+
+  // Actual hook is code is below
+  useEffect(function () {
+    if (!featureEnabled) {
+      return;
+    }
+
+    // turn off all or part of the feature
+    if (time > 0) {
+      setTimeout(function () {
+        setTime(Math.max(0, time - 0.1));
+      }, 100);
+    }
+  }, [featureEnabled, time]);
+  return [time];
+};
+export default useExample;

package/es/components/UserProfileImage/UserProfileImage.js

@@ -20,7 +20,8 @@ import { pkg } from '../../settings';
 
 // Carbon and package components we use.
 import { User, Group } from '@carbon/react/icons';
-import { IconButton } from '@carbon/react';
+import { Tooltip, usePrefix } from '@carbon/react';
+import { TooltipTrigger } from '../TooltipTrigger';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--user-profile-image");
@@ -49,6 +50,7 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     _ref$tooltipAlignment = _ref.tooltipAlignment,
     tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var carbonPrefix = usePrefix();
   var icons = {
     user: {
       md: function md(props) {
@@ -124,12 +126,11 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       className: cx([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
     }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(FillItem, null));
   };
-  return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(IconButton, {
+  return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(Tooltip, {
+    align: tooltipAlignment,
     label: tooltipText,
-    className: "".concat(blockClass, "__tooltip"),
-    kind: "ghost",
-    align: tooltipAlignment
-  }, renderUserProfileImage()) : renderUserProfileImage());
+    className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
+  }, /*#__PURE__*/React.createElement(TooltipTrigger, null, renderUserProfileImage())) : renderUserProfileImage());
 });
 
 // Return a placeholder if not released and not enabled by feature flag