@carbon/ibm-products 2.7.0 → 2.8.1

package/es/components/CreateInfluencer/CreateInfluencer.js

@@ -19,7 +19,8 @@ var componentName = 'CreateInfluencer';
 export var CreateInfluencer = function CreateInfluencer(_ref) {
   var className = _ref.className,
     currentStep = _ref.currentStep,
-    stepData = _ref.stepData;
+    stepData = _ref.stepData,
+    title = _ref.title;
   var getNumberOfDynamicStepsBeforeCurrentStep = function getNumberOfDynamicStepsBeforeCurrentStep(array, key) {
     var dynamicSteps = [];
     array.forEach(function (item, index) {
@@ -47,7 +48,9 @@ export var CreateInfluencer = function CreateInfluencer(_ref) {
     var totalDynamicSteps = getNumberOfDynamicStepsBeforeCurrentStep(stepData, 'shouldIncludeStep') || 0;
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__left-nav")
-    }, currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/React.createElement(ProgressIndicator, {
+    }, title && /*#__PURE__*/React.createElement("h3", {
+      className: "".concat(blockClass, "__title")
+    }, title), currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/React.createElement(ProgressIndicator, {
       currentIndex: (_stepData$2 = stepData[0]) !== null && _stepData$2 !== void 0 && _stepData$2.introStep ? currentStep - totalDynamicSteps - 2 // minus 2 because we need to account for the intro step in addition to `currentIndex` being 0 index based and our steps being 1 index based
       : currentStep - totalDynamicSteps - 1 // minus 1 because ProgressIndicator currentIndex prop is 0 index based, but our steps are 1 index based
       ,
@@ -88,5 +91,9 @@ CreateInfluencer.propTypes = {
     secondaryLabel: PropTypes.string,
     shouldIncludeStep: PropTypes.bool,
     title: PropTypes.node
-  }))
+  })),
+  /**
+   * The main title of the full page, displayed in the influencer area.
+   */
+  title: PropTypes.string
 };

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -545,7 +545,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     setClickAndHoldActive(false);
     var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
     var activeCellValue = activeCellFullData ? activeCellFullData.row.cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column].value : null;
-    setCellEditorValue(activeCellValue);
+    setCellEditorValue(activeCellValue || '');
     cellEditorRulerRef.current.textContent = activeCellValue;
     cellEditorRef.current.style.width = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.width;
   };

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,76 @@ 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));
+        headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), px(headerRowElement.offsetHeight));
+      };
+      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 +106,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/FilterSummary/FilterSummary.js

@@ -1,3 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["key", "value"];
+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. 2022, 2022
  *
@@ -25,11 +30,12 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var tagFilters = filters.map(function (_ref2) {
     var _renderLabel;
     var key = _ref2.key,
-      value = _ref2.value;
-    return {
+      value = _ref2.value,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+    return _objectSpread(_objectSpread({}, rest), {}, {
       type: 'gray',
       label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
-    };
+    });
   });
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,

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/SidePanel/SidePanel.js

@@ -288,12 +288,14 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (includeOverlay && open) {
       bodyElement.style.overflow = 'hidden';
     } else if (includeOverlay && !open) {
-      bodyElement.style.overflow = 'initial';
+      bodyElement.style.overflow = '';
     }
     if (includeOverlay && !preventCloseOnClickOutside) {
       document.addEventListener('click', handleOutsideClick);
     }
     return function () {
+      var bodyElement = document.body;
+      bodyElement.style.overflow = '';
       document.removeEventListener('click', handleOutsideClick);
     };
   }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]);

package/es/components/TagSet/TagSet.js

@@ -23,7 +23,7 @@ import { TagSetModal } from './TagSetModal';
 import { Tag } from '@carbon/react';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
-import { prepareProps, isRequiredIf } from '../../global/js/utils/props-helper';
+import { isRequiredIf } from '../../global/js/utils/props-helper';
 import { pkg } from '../../settings';
 var componentName = 'TagSet';
 var blockClass = "".concat(pkg.prefix, "--tag-set");
@@ -107,8 +107,7 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }
       }, /*#__PURE__*/React.createElement(Tag, _extends({}, other, {
         // ensure id is not duplicated
-        "data-original-id": id,
-        filter: false
+        "data-original-id": id
       }), label));
     }) : []);
     setSizingTags(newSizingTags);
@@ -119,7 +118,6 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       var label = _ref3.label,
         other = _objectWithoutProperties(_ref3, _excluded3);
       return /*#__PURE__*/React.createElement(Tag, _extends({}, other, {
-        filter: false,
         key: "displayed-tag-".concat(index)
       }), label);
     }) : [];
@@ -306,12 +304,10 @@ TagSet.propTypes = {
    * with properties: **label**\* (required) to supply the tag content, and
    * other properties will be passed to the Carbon Tag component, such as
    * **type**, **disabled**, **ref**, **className** , and any other Tag props.
-   * NOTE: **filter** is not supported. Any other fields in the object will be passed through to the HTML element
-   * as HTML attributes.
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
    */
-  tags: PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, prepareProps(Tag.propTypes, 'filter')), {}, {
+  tags: PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, Tag.propTypes), {}, {
     label: PropTypes.string.isRequired,
     // we duplicate this prop to improve the DocGen
     type: PropTypes.oneOf(tagTypes)