@carbon/ibm-products 1.55.2 → 1.57.0

package/es/components/CoachmarkStack/CoachmarkStackHome.js

@@ -0,0 +1,157 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "description", "media", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { forwardRef } from 'react';
+import pconsole from '../../global/js/utils/pconsole';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Idea20 } from '@carbon/icons-react';
+import { Button } from 'carbon-components-react';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg /*, carbon */ } from '../../settings';
+import { createPortal } from 'react-dom';
+import { CoachmarkHeader } from '../Coachmark/CoachmarkHeader';
+import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia';
+
+// Carbon and package components we use.
+/* TODO: @import(s) of carbon components and other package components. */
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--coachmark-stacked-home");
+var overlayClass = "".concat(pkg.prefix, "--coachmark-overlay");
+var componentName = 'CoachmarkStackHome';
+
+/**
+ * DO NOT USE. This component is for the exclusive use
+ * of other Novice to Pro components.
+ */
+export var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _document$querySelect;
+  var className = _ref.className,
+    description = _ref.description,
+    media = _ref.media,
+    navLinkLabels = _ref.navLinkLabels,
+    onClickNavItem = _ref.onClickNavItem,
+    onClose = _ref.onClose,
+    portalTarget = _ref.portalTarget,
+    closeButtonLabel = _ref.closeButtonLabel,
+    title = _ref.title,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  if (!navLinkLabels) {
+    return pconsole.warn("".concat(componentName, " is a Novice to Pro internal component and is not intended for general use."));
+  }
+  var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, className),
+    ref: ref,
+    role: "main"
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(CoachmarkHeader, {
+    onClose: onClose
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(overlayClass, "__body")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(overlayClass, "-element")
+  }, !media && /*#__PURE__*/React.createElement(Idea20, {
+    className: "".concat(blockClass, "__icon-idea")
+  }), media && (media.render ? media.render() : /*#__PURE__*/React.createElement(SteppedAnimatedMedia, {
+    className: "".concat(overlayClass, "__element-stepped-media"),
+    filePaths: media.filePaths,
+    playStep: 0
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(overlayClass, "-element__content")
+  }, title && /*#__PURE__*/React.createElement("h2", {
+    className: "".concat(overlayClass, "-element__title")
+  }, title), description && /*#__PURE__*/React.createElement("p", {
+    className: "".concat(overlayClass, "-element__body")
+  }, description)), /*#__PURE__*/React.createElement("ul", {
+    className: "".concat(blockClass, "__nav-links")
+  }, navLinkLabels.map(function (label, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: index
+    }, /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      size: "sm",
+      onClick: function onClick() {
+        onClickNavItem(index + 1);
+      }
+    }, label));
+  })), closeButtonLabel && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(overlayClass, "__footer")
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "sm",
+    onClick: onClose
+  }, closeButtonLabel))))), portalNode);
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+CoachmarkStackHome = pkg.checkComponentEnabled(CoachmarkStackHome, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+CoachmarkStackHome.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+CoachmarkStackHome.propTypes = {
+  /**
+   * Optional class name for this component.
+   */
+  className: PropTypes.string,
+  /**
+   * The label for the button that will close the stack
+   */
+  closeButtonLabel: PropTypes.string,
+  /**
+   * The description of the Coachmark.
+   */
+  description: PropTypes.node.isRequired,
+  /**
+   * The object describing an image in one of two shapes.
+   *
+   * If a single media element is required, use `{render}`.
+   *
+   * If a stepped animation is required, use `{filePaths}`.
+   *
+   * @see {@link MEDIA_PROP_TYPE}.
+   */
+  media: PropTypes.oneOfType([PropTypes.shape({
+    render: PropTypes.func
+  }), PropTypes.shape({
+    filePaths: PropTypes.arrayOf(PropTypes.string)
+  })]),
+  /**
+   * The labels used to link to the stackable Coachmarks.
+   */
+  navLinkLabels: PropTypes.arrayOf(PropTypes.string).isRequired,
+  /**
+   * For internal use only by CoachmarkStack and CoachmarkStackHome.
+   */
+  onClickNavItem: PropTypes.func.isRequired,
+  /**
+   * Function to call when the stack closes.
+   */
+  onClose: PropTypes.func.isRequired,
+  /**
+   * By default, the CoachmarkStackHome will be appended to the end of `document.body`.
+   * The CoachmarkStackHome will remain persistent as the user navigates the app until
+   * the user closes the CoachmarkStackHome.
+   *
+   * Alternatively, the app developer can tightly couple the CoachmarkStackHome to a DOM
+   * element or other component by specifying a CSS selector. The CoachmarkStackHome will
+   * remain visible as long as that element remains visible or mounted. When the
+   * element is hidden or component is unmounted, the CoachmarkStackHome will disappear.
+   */
+  portalTarget: PropTypes.string,
+  /**
+   * The title of the Coachmark.
+   */
+  title: PropTypes.string.isRequired
+};

package/es/components/CoachmarkStack/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { CoachmarkStack } from './CoachmarkStack';

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, 2022
  *
@@ -21,6 +21,7 @@ var blockClass = "".concat(pkg.prefix, "--datagrid");
 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.');
@@ -34,6 +35,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, {
@@ -42,11 +47,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 ").concat(blockClass, "__leftPanel-position")
-  }, /*#__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
@@ -59,5 +60,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

@@ -30,7 +30,8 @@ var TableContainer = DataTable.TableContainer,
 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;
@@ -98,7 +99,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
     })));
@@ -180,5 +182,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 { DataTable } from 'carbon-components-react';
+import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids';
 import { pkg } from '../../../settings';
+import { handleColumnResizeEndEvent, handleColumnResizeStartEvent, handleColumnResizingEvent } from './addons/stateReducer';
+import getColTitle from '../utils/getColTitle';
 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,59 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
         key: header.id
       });
     }
+    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({
       role: false
     }), {
       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/addons/CustomizeColumns/DraggableItemsList.js

@@ -11,6 +11,7 @@ import { Checkbox } from 'carbon-components-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/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/getColTitle.js

@@ -0,0 +1,25 @@
+// 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) {
+  var _col$Header, _col$Header$props;
+  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 === null || col === void 0 ? void 0 : (_col$Header = col.Header) === null || _col$Header === void 0 ? void 0 : (_col$Header$props = _col$Header.props) === null || _col$Header$props === void 0 ? void 0 : _col$Header$props.title;
+};
+export default getColTitle;

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.
@@ -289,10 +290,10 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
       nowText: nowText
     })), /*#__PURE__*/React.createElement("h6", {
       className: notificationHeaderClassName
-    }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/React.createElement(Link, {
+    }, 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.text)), /*#__PURE__*/React.createElement(Button, {
+    }, prepareProps({}, notification.link, ['text', 'url'])), notification.link.text)), /*#__PURE__*/React.createElement(Button, {
       kind: "ghost",
       size: "small",
       renderIcon: Close16,

package/es/components/index.js

@@ -46,4 +46,11 @@ export { InlineEdit } from './InlineEdit';
 export { EditInPlace } from './EditInPlace';
 export { Guidebanner } from './Guidebanner';
 export { NonLinearReading } from './NonLinearReading';
+export { Coachmark } from './Coachmark';
+export { CoachmarkFixed } from './CoachmarkFixed';
+export { CoachmarkBeacon } from './CoachmarkBeacon';
+export { CoachmarkButton } from './CoachmarkButton';
+export { CoachmarkOverlayElements } from './CoachmarkOverlayElements';
+export { CoachmarkOverlayElement } from './CoachmarkOverlayElement';
+export { CoachmarkStack } from './CoachmarkStack';
 export { InlineTip } from './InlineTip';