@carbon/ibm-products 2.7.0 → 2.8.1

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -174,7 +174,8 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     className: "".concat(blockClass, "__influencer")
   }, /*#__PURE__*/_react.default.createElement(_CreateInfluencer.CreateInfluencer, {
     stepData: stepData,
-    currentStep: currentStep
+    currentStep: currentStep,
+    title: title
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__body")
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -307,7 +308,7 @@ CreateFullPage.propTypes = {
    */
   submitButtonText: _propTypes.default.string.isRequired,
   /**
-   * The main title of the full page, displayed in the header area.
+   * The main title of the full page, displayed in the influencer area.
    */
-  title: _propTypes.default.node
+  title: _propTypes.default.string
 };

package/lib/components/CreateInfluencer/CreateInfluencer.js

@@ -26,7 +26,8 @@ var componentName = 'CreateInfluencer';
 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) {
@@ -54,7 +55,9 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
     var totalDynamicSteps = getNumberOfDynamicStepsBeforeCurrentStep(stepData, 'shouldIncludeStep') || 0;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__left-nav")
-    }, currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/_react.default.createElement(_react2.ProgressIndicator, {
+    }, title && /*#__PURE__*/_react.default.createElement("h3", {
+      className: "".concat(blockClass, "__title")
+    }, title), currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/_react.default.createElement(_react2.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
       ,
@@ -96,5 +99,9 @@ CreateInfluencer.propTypes = {
     secondaryLabel: _propTypes.default.string,
     shouldIncludeStep: _propTypes.default.bool,
     title: _propTypes.default.node
-  }))
+  })),
+  /**
+   * The main title of the full page, displayed in the influencer area.
+   */
+  title: _propTypes.default.string
 };

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -552,7 +552,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.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/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -1,20 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@carbon/react");
+var _layout = require("@carbon/layout");
 var _commonColumnIds = require("../common-column-ids");
 var _settings = require("../../../settings");
 var _getColTitle = _interopRequireDefault(require("../utils/getColTitle"));
+var _stateReducer = require("./addons/stateReducer");
+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; }
 /**
- * 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.
@@ -34,15 +40,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
+  (0, _react.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"), (0, _layout.px)(rowHeight));
+        headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), (0, _layout.px)(gridHeight - scrollBuffer - tableToolbarHeight));
+        headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), (0, _layout.px)(headerRowElement.offsetHeight));
+      };
+      setCustomValues({
+        gridHeight: gridElement.offsetHeight,
+        rowHeight: headerRowElement.clientHeight
+      });
+    }
+  }, [datagridState.rowSize, datagridState.tableId, datagridState]);
+  var _useState = (0, _react.useState)(2),
+    _useState2 = (0, _slicedToArray2.default)(_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;
+  };
+  (0, _react.useEffect)(function () {
+    var isResizing = datagridState.state.isResizing;
+    if (isResizing) {
+      var onColResizeEnd = datagridState.onColResizeEnd;
+      document.addEventListener('mouseup', function () {
+        (0, _stateReducer.handleColumnResizeEndEvent)(datagridState.dispatch, onColResizeEnd, isResizing);
+        document.activeElement.blur();
+      });
+    }
+    return function () {
+      document.removeEventListener('mouseup', function () {
+        return (0, _stateReducer.handleColumnResizeEndEvent)(datagridState.dispatch);
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [datagridState.state.isResizing]);
   return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps({
     role: false
   }), {
     className: (0, _classnames.default)("".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 === _commonColumnIds.selectionColumnId) {
       // render directly without the wrapper TableHeader
@@ -50,13 +117,57 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
         key: header.id
       });
     }
-    return /*#__PURE__*/_react.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, 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.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, header.getHeaderProps(), {
       className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
       key: header.id
-    }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, header.getResizerProps(), {
-      className: "".concat(blockClass, "__resizer")
+    }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, 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) {
+            (0, _stateReducer.handleColumnResizingEvent)(dispatch, header, newWidth);
+          }
+        }
+      },
+      onMouseDown: function onMouseDown() {
+        return (0, _stateReducer.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;
+              (0, _stateReducer.handleColumnResizingEvent)(dispatch, header, newWidth, true);
+            }
+          }
+          if (key === 'ArrowRight') {
+            var _newWidth = currentColumnWidth + incrementAmount;
+            (0, _stateReducer.handleColumnResizingEvent)(dispatch, header, _newWidth, true);
+          }
+        }
+      },
+      onKeyUp: function onKeyUp() {
+        return (0, _stateReducer.handleColumnResizeEndEvent)(dispatch, onColResizeEnd, header.id);
+      },
+      className: (0, _classnames.default)("".concat(blockClass, "__col-resizer-range")),
+      type: "range",
+      defaultValue: originalCol.width,
+      "aria-label": "Resize column"
+    })), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(blockClass, "__col-resize-indicator")
     })));
   }));
 };

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -9,10 +9,8 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _icons = require("@carbon/react/icons");
 var _react2 = require("@carbon/react");
 var _useResizeObserver2 = require("../../../global/js/hooks/useResizeObserver");
-var _ButtonMenu = require("../../ButtonMenu");
 var _settings = require("../../../settings");
 var _classnames = _interopRequireDefault(require("classnames"));
 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); }
@@ -86,19 +84,15 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     if ((toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 && !displayAllInMenu) {
       return null;
     }
-    return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
-      label: width > minWidthBeforeOverflowIcon ? 'More' : null,
-      renderIcon: width > minWidthBeforeOverflowIcon ? _icons.Add : _icons.OverflowMenuVertical,
-      className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
-      menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
-      flipped: true,
-      menuAriaLabel: 'Batch actions'
+    return /*#__PURE__*/_react.default.createElement(_react2.MenuButton, {
+      label: "More",
+      className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon))
     }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
       if (index < 2) {
         if (displayAllInMenu) {
-          return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+          return /*#__PURE__*/_react.default.createElement(_react2.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') {
@@ -109,9 +103,9 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
         }
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+      return /*#__PURE__*/_react.default.createElement(_react2.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/lib/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stateReducer = exports.handleColumnResizingEvent = exports.handleColumnResizeStartEvent = exports.handleColumnResizeEndEvent = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@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) { (0, _defineProperty2.default)(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';
+var handleColumnResizeStartEvent = function handleColumnResizeStartEvent(dispatch, headerId) {
+  dispatch({
+    type: COLUMN_RESIZE_START,
+    payload: {
+      headerId: headerId
+    }
+  });
+};
+exports.handleColumnResizeStartEvent = handleColumnResizeStartEvent;
+var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId) {
+  dispatch({
+    type: COLUMN_RESIZE_END,
+    payload: {
+      onColResizeEnd: onColResizeEnd,
+      headerId: headerId
+    }
+  });
+};
+exports.handleColumnResizeEndEvent = handleColumnResizeEndEvent;
+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
+    }
+  });
+};
+exports.handleColumnResizingEvent = handleColumnResizingEvent;
+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 = (0, _slicedToArray2.default)(_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
+        });
+      }
+  }
+};
+exports.stateReducer = stateReducer;

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

@@ -51,6 +51,12 @@ 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.default.createElement("img", {

package/lib/components/Datagrid/useDatagrid.js

@@ -17,6 +17,7 @@ var _useRowSize = _interopRequireDefault(require("./useRowSize"));
 var _DatagridHeaderRow = _interopRequireDefault(require("./Datagrid/DatagridHeaderRow"));
 var _useFlexResize = _interopRequireDefault(require("./useFlexResize"));
 var _useFloatingScroll = _interopRequireDefault(require("./useFloatingScroll"));
+var _stateReducer = require("./Datagrid/addons/stateReducer");
 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) { (0, _defineProperty2.default)(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; } /*
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           * Licensed Materials - Property of IBM
@@ -35,9 +36,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 = _reactTable.useTable.apply(void 0, [_objectSpread({
+  var tableState = _reactTable.useTable.apply(void 0, [_objectSpread(_objectSpread({
     tableId: tableId
-  }, params)].concat(defaultPlugins, plugins, defaultEndPlugins, (0, _toConsumableArray2.default)(clientEndPlugins)));
+  }, params), {}, {
+    stateReducer: _stateReducer.stateReducer
+  })].concat(defaultPlugins, plugins, defaultEndPlugins, (0, _toConsumableArray2.default)(clientEndPlugins)));
   return tableState;
 };
 var _default = useDatagrid;

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

@@ -9,7 +9,6 @@ exports.DatagridActions = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _icons = require("@carbon/react/icons");
 var _react = require("@carbon/react");
-var _ButtonMenu = require("../../ButtonMenu");
 var _react2 = _interopRequireWildcard(require("react"));
 var _addonActions = require("@storybook/addon-actions");
 var _settings = require("../../../settings");
@@ -161,18 +160,18 @@ var DatagridActions = function DatagridActions(datagridState) {
     onClick: downloadCsv
   })), CustomizeColumnsButton && /*#__PURE__*/_react2.default.createElement("div", {
     style: style
-  }, /*#__PURE__*/_react2.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react2.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react2.default.createElement(_ButtonMenu.ButtonMenu, {
+  }, /*#__PURE__*/_react2.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react2.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react2.default.createElement(_react.MenuButton, {
     label: "Primary button",
     renderIcon: _icons.ChevronDown,
-    menuOptionsClass: "".concat(blockClass, "__toolbar-options")
-  }, /*#__PURE__*/_react2.default.createElement(_ButtonMenu.ButtonMenuItem, {
-    itemText: "Option 1",
+    className: "".concat(blockClass, "__toolbar-options")
+  }, /*#__PURE__*/_react2.default.createElement(_react.MenuItem, {
+    label: "Option 1",
     onClick: (0, _addonActions.action)("Click on ButtonMenu Option 1")
-  }), /*#__PURE__*/_react2.default.createElement(_ButtonMenu.ButtonMenuItem, {
-    itemText: "Option 2",
+  }), /*#__PURE__*/_react2.default.createElement(_react.MenuItem, {
+    label: "Option 2",
     onClick: (0, _addonActions.action)("Click on ButtonMenu Option 2")
-  }), /*#__PURE__*/_react2.default.createElement(_ButtonMenu.ButtonMenuItem, {
-    itemText: "Option 3",
+  }), /*#__PURE__*/_react2.default.createElement(_react.MenuItem, {
+    label: "Option 3",
     onClick: (0, _addonActions.action)("Click on ButtonMenu Option 3")
   }))) : /*#__PURE__*/_react2.default.createElement(_react.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react2.default.createElement(_react.TableToolbarSearch, {
     size: "xl",

package/lib/components/FilterSummary/FilterSummary.js

@@ -5,19 +5,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@carbon/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _TagSet = require("../TagSet");
 var _settings = require("../../settings");
+var _excluded = ["key", "value"];
 /**
  * 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.
  */
-
+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) { (0, _defineProperty2.default)(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; }
 var blockClass = "".concat(_settings.pkg.prefix, "--filter-summary");
 var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref) {
   var _ref$className = _ref.className,
@@ -33,11 +37,12 @@ var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref)
   var tagFilters = filters.map(function (_ref2) {
     var _renderLabel;
     var key = _ref2.key,
-      value = _ref2.value;
-    return {
+      value = _ref2.value,
+      rest = (0, _objectWithoutProperties2.default)(_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__*/_react2.default.createElement("div", {
     ref: ref,

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -17,6 +17,7 @@ var _devtools = require("../../global/js/utils/devtools");
 var _hooks = require("../../global/js/hooks");
 var _settings = require("../../settings");
 var _utils = require("./utils");
+var _propsHelper = require("../../global/js/utils/props-helper");
 var _NotificationsEmptyState = require("../EmptyStates/NotificationsEmptyState");
 var _react2 = require("@carbon/react");
 var _icons = require("@carbon/react/icons");
@@ -305,7 +306,7 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/_react.default.createElement(_react2.Link, (0, _extends2.default)({
       href: notification.link.url,
       className: "".concat(blockClass, "__notifications-link")
-    }, notification.link.optional), notification.link.text)), /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+    }, (0, _propsHelper.prepareProps)({}, notification.link, ['text', 'url'])), notification.link.text)), /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
       align: "left",
       kind: "ghost",
       size: "sm",
@@ -426,10 +427,7 @@ NotificationsPanel.propTypes = {
     description: _propTypes.default.string,
     link: _propTypes.default.shape({
       url: _propTypes.default.string,
-      text: _propTypes.default.string,
-      optional: _propTypes.default.shape({
-        // Add optional props here
-      })
+      text: _propTypes.default.string
     }),
     unread: _propTypes.default.bool,
     onNotificationClick: _propTypes.default.func

package/lib/components/PageHeader/PageHeaderUtils.js

@@ -13,7 +13,7 @@ var _scrollableAncestor = require("../../global/js/utils/scrollableAncestor");
 var _react2 = require("@carbon/react");
 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) { (0, _defineProperty2.default)(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.
@@ -71,11 +71,14 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
     var scrollableContainer = (0, _scrollableAncestor.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;
@@ -133,6 +136,10 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
         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/lib/components/SidePanel/SidePanel.js

@@ -295,12 +295,14 @@ var SidePanel = /*#__PURE__*/_react.default.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]);