@carbon/ibm-products 2.6.1 → 2.8.0

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -78,26 +78,34 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     isDisabled = _useState10[0],
     setIsDisabled = _useState10[1];
-  var _useState11 = useState(),
+  var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    onNext = _useState12[0],
-    _setOnNext = _useState12[1];
+    loadingPrevious = _useState12[0],
+    setLoadingPrevious = _useState12[1];
   var _useState13 = useState(),
     _useState14 = _slicedToArray(_useState13, 2),
-    onMount = _useState14[0],
-    _setOnMount = _useState14[1];
-  var _useState15 = useState([]),
+    onPrevious = _useState14[0],
+    _setOnPrevious = _useState14[1];
+  var _useState15 = useState(),
     _useState16 = _slicedToArray(_useState15, 2),
-    stepData = _useState16[0],
-    setStepData = _useState16[1];
-  var _useState17 = useState(1),
+    onNext = _useState16[0],
+    _setOnNext = _useState16[1];
+  var _useState17 = useState(),
     _useState18 = _slicedToArray(_useState17, 2),
-    firstIncludedStep = _useState18[0],
-    setFirstIncludedStep = _useState18[1];
-  var _useState19 = useState(null),
+    onMount = _useState18[0],
+    _setOnMount = _useState18[1];
+  var _useState19 = useState([]),
     _useState20 = _slicedToArray(_useState19, 2),
-    lastIncludedStep = _useState20[0],
-    setLastIncludedStep = _useState20[1];
+    stepData = _useState20[0],
+    setStepData = _useState20[1];
+  var _useState21 = useState(1),
+    _useState22 = _slicedToArray(_useState21, 2),
+    firstIncludedStep = _useState22[0],
+    setFirstIncludedStep = _useState22[1];
+  var _useState23 = useState(null),
+    _useState24 = _slicedToArray(_useState23, 2),
+    lastIncludedStep = _useState24[0],
+    setLastIncludedStep = _useState24[1];
   var previousState = usePreviousValue({
     currentStep: currentStep,
     open: open
@@ -141,11 +149,14 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     firstIncludedStep: firstIncludedStep,
     lastIncludedStep: lastIncludedStep,
     stepData: stepData,
+    onPrevious: onPrevious,
     onNext: onNext,
     isSubmitDisabled: isDisabled,
     setCurrentStep: setCurrentStep,
     setIsSubmitting: setIsSubmitting,
     setShouldViewAll: setShouldViewAll,
+    setLoadingPrevious: setLoadingPrevious,
+    loadingPrevious: loadingPrevious,
     onClose: onClose,
     onRequestSubmit: onRequestSubmit,
     componentName: componentName,
@@ -202,6 +213,11 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     value: {
       currentStep: currentStep,
       setIsDisabled: setIsDisabled,
+      setOnPrevious: function setOnPrevious(fn) {
+        return _setOnPrevious(function () {
+          return fn;
+        });
+      },
       setOnNext: function setOnNext(fn) {
         return _setOnNext(function () {
           return fn;

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "description", "disableSubmit", "fieldsetLegendText", "hasFieldset", "includeStep", "introStep", "onNext", "onMount", "secondaryLabel", "subtitle", "title"];
+var _excluded = ["children", "className", "description", "disableSubmit", "fieldsetLegendText", "hasFieldset", "includeStep", "introStep", "onMount", "onNext", "onPrevious", "secondaryLabel", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2021, 2023
  *
@@ -38,8 +38,9 @@ export var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$includeStep = _ref.includeStep,
     includeStep = _ref$includeStep === void 0 ? defaults.includeStep : _ref$includeStep,
     introStep = _ref.introStep,
-    onNext = _ref.onNext,
     onMount = _ref.onMount,
+    onNext = _ref.onNext,
+    onPrevious = _ref.onPrevious,
     secondaryLabel = _ref.secondaryLabel,
     subtitle = _ref.subtitle,
     title = _ref.title,
@@ -81,8 +82,9 @@ export var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
       stepsContext.setIsDisabled(disableSubmit);
       stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
+      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnPrevious(onPrevious);
     }
-  }, [stepsContext, stepNumber, disableSubmit, onNext]);
+  }, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious]);
   var renderDescription = function renderDescription() {
     if (description) {
       if (typeof description === 'string') {
@@ -167,11 +169,15 @@ CreateTearsheetStep.propTypes = {
    */
   onMount: PropTypes.func,
   /**
-   * Optional function to be called on a step change.
+   * Optional function to be called when you move to the next step.
    * For example, this can be used to validate input fields before proceeding to the next step.
    * This function can _optionally_ return a promise that is either resolved or rejected and the CreateTearsheet will handle the submitting state of the next button.
    */
   onNext: PropTypes.func,
+  /**
+   * Optional function to be called when you move to the previous step.
+   */
+  onPrevious: PropTypes.func,
   /**
    * Sets the optional secondary label on the progress step component
    */

package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js

@@ -214,6 +214,9 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     },
     checked: shouldIncludeAdditionalStep
   })))), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
+    onPrevious: function onPrevious() {
+      console.log('custom onPrevious handler');
+    },
     title: "Dynamic step",
     subtitle: "Dynamic step subtitle",
     description: "This is an example showing how to include a dynamic step into the CreateTearsheet",

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["datagridState"];
+var _excluded = ["datagridState", "title"];
 /**
  * Copyright IBM Corp. 2020, 2023
  *
@@ -25,6 +25,7 @@ var componentName = 'Datagrid';
  */
 export var Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,
+    title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
   if (!datagridState) {
     pconsole.warn('Datagrid was not passed datagridState which is required to render this component.');
@@ -38,6 +39,10 @@ export var Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = datagridState.className,
     filters = datagridState.state.filters;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
+  var props = {
+    title: title,
+    datagridState: datagridState
+  };
   return /*#__PURE__*/React.createElement(FilterProvider, {
     filters: filters
   }, /*#__PURE__*/React.createElement(InlineEditProvider, null, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
@@ -46,11 +51,7 @@ export var Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: cx(className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
   }, getDevtoolsProps(componentName)), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__datagridWithPanel ").concat(blockClass, "__displayFlex")
-  }, /*#__PURE__*/React.createElement(DatagridContent, {
-    datagridState: datagridState
-  })) : /*#__PURE__*/React.createElement(DatagridContent, {
-    datagridState: datagridState
-  }))));
+  }, /*#__PURE__*/React.createElement(DatagridContent, props)) : /*#__PURE__*/React.createElement(DatagridContent, props))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -63,5 +64,9 @@ Datagrid.propTypes = {
   /**
    * The data grid state, much of it being supplied by the useDatagrid hook
    */
-  datagridState: PropTypes.object.isRequired
+  datagridState: PropTypes.object.isRequired,
+  /**
+   * Table title
+   */
+  title: PropTypes.string
 };

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -7,27 +7,28 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * LICENSE file in the root directory of this source tree.
  */
 
+import { FilterContext, FilterPanel } from './addons/Filtering';
 import React, { useContext, useEffect, useRef } from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { TableContainer, Table } from '@carbon/react';
-import { px } from '@carbon/layout';
-import DatagridHead from './DatagridHead';
+import { Table, TableContainer } from '@carbon/react';
+import { carbon, pkg } from '../../../settings';
+import { CLEAR_FILTERS } from './addons/Filtering/constants';
 import DatagridBody from './DatagridBody';
+import DatagridHead from './DatagridHead';
 import DatagridToolbar from './DatagridToolbar';
-import { handleGridKeyPress } from './addons/InlineEdit/handleGridKeyPress';
-import { carbon, pkg } from '../../../settings';
+import { FilterSummary } from '../../FilterSummary';
 import { InlineEditContext } from './addons/InlineEdit/InlineEditContext';
-import { FilterContext, FilterPanel } from './addons/Filtering';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
 import { handleGridFocus } from './addons/InlineEdit/handleGridFocus';
+import { handleGridKeyPress } from './addons/InlineEdit/handleGridKeyPress';
+import { px } from '@carbon/layout';
 import { useClickOutside } from '../../../global/js/hooks';
 import { useMultipleKeyTracking } from '../../DataSpreadsheet/hooks';
-import { FilterSummary } from '../../FilterSummary';
-import { CLEAR_FILTERS } from './addons/Filtering/constants';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var DatagridContent = function DatagridContent(_ref) {
   var _cx4;
-  var datagridState = _ref.datagridState;
+  var datagridState = _ref.datagridState,
+    title = _ref.title;
   var _useContext = useContext(InlineEditContext),
     inlineEditState = _useContext.state,
     dispatch = _useContext.dispatch;
@@ -95,7 +96,8 @@ export var DatagridContent = function DatagridContent(_ref) {
       } : null,
       onFocus: withInlineEdit ? function () {
         return handleGridFocus(inlineEditState, dispatch);
-      } : null
+      } : null,
+      title: title
     }), !withVirtualScroll ? /*#__PURE__*/React.createElement(DatagridHead, datagridState) : null, /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
       rows: rows
     })));
@@ -126,7 +128,8 @@ export var DatagridContent = function DatagridContent(_ref) {
       filters: filterTags,
       clearFilters: function clearFilters() {
         return EventEmitter.dispatch(CLEAR_FILTERS);
-      }
+      },
+      renderLabel: filterProps.renderLabel
     });
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, {
@@ -177,5 +180,6 @@ DatagridContent.propTypes = {
     setAllFilters: PropTypes.func,
     getFilterProps: PropTypes.func,
     state: PropTypes.object
-  })
+  }),
+  title: PropTypes.string
 };

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

@@ -1,29 +1,103 @@
 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 = {};
+  var title = getColTitle(header);
+  if (title) {
+    props.title = title;
+  } else {
+    props['aria-hidden'] = true;
+  }
+  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
@@ -31,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
-    }), 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/CustomizeColumns/DraggableItemsList.js

@@ -11,6 +11,7 @@ import { Checkbox } from '@carbon/react';
 import { isColumnVisible } from './common';
 import DraggableElement from '../../DraggableElement';
 import { pkg } from '../../../../../settings';
+import getColTitle from '../../../utils/getColTitle';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var DraggableItemsList = function DraggableItemsList(_ref) {
   var columns = _ref.columns,
@@ -22,29 +23,6 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
     setAriaRegionText = _ref.setAriaRegionText,
     setColumnsObject = _ref.setColumnsObject,
     setFocusIndex = _ref.setFocusIndex;
-  // This function recursively looks for the nested header element until we can find the key which contains the title.
-  // This can happen if multiple hooks are used together that manipulate the rendering of the column
-  // header, such as `useColumnCenterAlign` and `useSortableColumns`.
-  var getNestedTitle = function getNestedTitle(component) {
-    if (component && !component.key) {
-      return getNestedTitle(component.children);
-    }
-    if (component && component.key && typeof component.key === 'string') {
-      return component.key;
-    }
-  };
-  var getColTitle = function getColTitle(col) {
-    if (!col) {
-      return;
-    }
-    var checkTitle = function checkTitle() {
-      if (col.Header().props.children.props && col.Header().props.children.props.title) {
-        return col.Header().props.children.props.title;
-      }
-      return getNestedTitle(col.Header().props.children.props);
-    };
-    return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col.Header.props.title;
-  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, columns
   // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {

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", {