@carbon/ibm-products 2.6.0 → 2.7.0

package/es/global/js/hooks/useRetrieveStepData.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 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.

package/es/global/js/utils/StoryDocsPage.js

@@ -83,7 +83,6 @@ export var StoryDocsPage = function StoryDocsPage(_ref2) {
   var isFullScreen = (csfFile === null || csfFile === void 0 || (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 || (_csfFile$meta = _csfFile$meta.parameters) === null || _csfFile$meta === void 0 ? void 0 : _csfFile$meta.layout) === 'fullscreen' || false;
   var storyHelperClass = isFullScreen ? 'c4p--story-docs-page--fullscreen' : '';
   var processedBlocks = processBlocks(blocks, csfFile.stories, omitUnreferencedStories);
-  console.log(processBlocks);
   var storyCount = (_processedBlocks$filt = processedBlocks === null || processedBlocks === void 0 ? void 0 : processedBlocks.filter(function (block) {
     return !!block.story;
   }).length) !== null && _processedBlocks$filt !== void 0 ? _processedBlocks$filt : 0;

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -89,26 +89,34 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
     isDisabled = _useState10[0],
     setIsDisabled = _useState10[1];
-  var _useState11 = (0, _react.useState)(),
+  var _useState11 = (0, _react.useState)(false),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    onNext = _useState12[0],
-    _setOnNext = _useState12[1];
+    loadingPrevious = _useState12[0],
+    setLoadingPrevious = _useState12[1];
   var _useState13 = (0, _react.useState)(),
     _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    onMount = _useState14[0],
-    _setOnMount = _useState14[1];
-  var _useState15 = (0, _react.useState)([]),
+    onPrevious = _useState14[0],
+    _setOnPrevious = _useState14[1];
+  var _useState15 = (0, _react.useState)(),
     _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-    stepData = _useState16[0],
-    setStepData = _useState16[1];
-  var _useState17 = (0, _react.useState)(1),
+    onNext = _useState16[0],
+    _setOnNext = _useState16[1];
+  var _useState17 = (0, _react.useState)(),
     _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-    firstIncludedStep = _useState18[0],
-    setFirstIncludedStep = _useState18[1];
-  var _useState19 = (0, _react.useState)(null),
+    onMount = _useState18[0],
+    _setOnMount = _useState18[1];
+  var _useState19 = (0, _react.useState)([]),
     _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-    lastIncludedStep = _useState20[0],
-    setLastIncludedStep = _useState20[1];
+    stepData = _useState20[0],
+    setStepData = _useState20[1];
+  var _useState21 = (0, _react.useState)(1),
+    _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+    firstIncludedStep = _useState22[0],
+    setFirstIncludedStep = _useState22[1];
+  var _useState23 = (0, _react.useState)(null),
+    _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+    lastIncludedStep = _useState24[0],
+    setLastIncludedStep = _useState24[1];
   var previousState = (0, _hooks.usePreviousValue)({
     currentStep: currentStep,
     open: open
@@ -152,11 +160,14 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.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,
@@ -213,6 +224,11 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.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/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -18,7 +18,7 @@ var _CreateTearsheet = require("./CreateTearsheet");
 var _settings = require("../../settings");
 var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
 var _hooks = require("../../global/js/hooks");
-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
  *
@@ -47,8 +47,9 @@ var CreateTearsheetStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
     _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,
@@ -90,8 +91,9 @@ var CreateTearsheetStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
     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') {
@@ -177,11 +179,15 @@ CreateTearsheetStep.propTypes = {
    */
   onMount: _propTypes.default.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.default.func,
+  /**
+   * Optional function to be called when you move to the previous step.
+   */
+  onPrevious: _propTypes.default.func,
   /**
    * Sets the optional secondary label on the progress step component
    */

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

@@ -223,6 +223,9 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     },
     checked: shouldIncludeAdditionalStep
   })))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.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/lib/components/Datagrid/Datagrid/Datagrid.js

@@ -16,7 +16,7 @@ var _pconsole = _interopRequireDefault(require("../../../global/js/utils/pconsol
 var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext");
 var _DatagridContent = require("./DatagridContent");
 var _FilterProvider = require("./addons/Filtering/FilterProvider");
-var _excluded = ["datagridState"];
+var _excluded = ["datagridState", "title"];
 /**
  * Copyright IBM Corp. 2020, 2023
  *
@@ -31,6 +31,7 @@ var componentName = 'Datagrid';
  */
 var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,
+    title = _ref.title,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (!datagridState) {
     _pconsole.default.warn('Datagrid was not passed datagridState which is required to render this component.');
@@ -44,6 +45,10 @@ var Datagrid = /*#__PURE__*/_react.default.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.default.createElement(_FilterProvider.FilterProvider, {
     filters: filters
   }, /*#__PURE__*/_react.default.createElement(_InlineEditContext.InlineEditProvider, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
@@ -52,11 +57,7 @@ var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     className: (0, _classnames.default)(className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
   }, (0, _devtools.getDevtoolsProps)(componentName)), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__datagridWithPanel ").concat(blockClass, "__displayFlex")
-  }, /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
-    datagridState: datagridState
-  })) : /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
-    datagridState: datagridState
-  }))));
+  }, /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, props)) : /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, props))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -70,5 +71,9 @@ Datagrid.propTypes = {
   /**
    * The data grid state, much of it being supplied by the useDatagrid hook
    */
-  datagridState: _propTypes.default.object.isRequired
+  datagridState: _propTypes.default.object.isRequired,
+  /**
+   * Table title
+   */
+  title: _propTypes.default.string
 };

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -8,23 +8,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.DatagridContent = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _Filtering = require("./addons/Filtering");
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react2 = require("@carbon/react");
-var _layout = require("@carbon/layout");
-var _DatagridHead = _interopRequireDefault(require("./DatagridHead"));
+var _settings = require("../../../settings");
+var _constants = require("./addons/Filtering/constants");
 var _DatagridBody = _interopRequireDefault(require("./DatagridBody"));
+var _DatagridHead = _interopRequireDefault(require("./DatagridHead"));
 var _DatagridToolbar = _interopRequireDefault(require("./DatagridToolbar"));
-var _handleGridKeyPress = require("./addons/InlineEdit/handleGridKeyPress");
-var _settings = require("../../../settings");
+var _FilterSummary = require("../../FilterSummary");
 var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext");
-var _Filtering = require("./addons/Filtering");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _handleGridFocus = require("./addons/InlineEdit/handleGridFocus");
+var _handleGridKeyPress = require("./addons/InlineEdit/handleGridKeyPress");
+var _layout = require("@carbon/layout");
 var _hooks = require("../../../global/js/hooks");
 var _hooks2 = require("../../DataSpreadsheet/hooks");
-var _FilterSummary = require("../../FilterSummary");
-var _constants = require("./addons/Filtering/constants");
 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; }
 /**
@@ -37,7 +37,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var DatagridContent = function DatagridContent(_ref) {
   var _cx4;
-  var datagridState = _ref.datagridState;
+  var datagridState = _ref.datagridState,
+    title = _ref.title;
   var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
     inlineEditState = _useContext.state,
     dispatch = _useContext.dispatch;
@@ -105,7 +106,8 @@ var DatagridContent = function DatagridContent(_ref) {
       } : null,
       onFocus: withInlineEdit ? function () {
         return (0, _handleGridFocus.handleGridFocus)(inlineEditState, dispatch);
-      } : null
+      } : null,
+      title: title
     }), !withVirtualScroll ? /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState) : null, /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
       rows: rows
     })));
@@ -136,7 +138,8 @@ var DatagridContent = function DatagridContent(_ref) {
       filters: filterTags,
       clearFilters: function clearFilters() {
         return EventEmitter.dispatch(_constants.CLEAR_FILTERS);
-      }
+      },
+      renderLabel: filterProps.renderLabel
     });
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableContainer, {
@@ -188,5 +191,6 @@ DatagridContent.propTypes = {
     setAllFilters: _propTypes.default.func,
     getFilterProps: _propTypes.default.func,
     state: _propTypes.default.object
-  })
+  }),
+  title: _propTypes.default.string
 };

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -12,6 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@carbon/react");
 var _commonColumnIds = require("../common-column-ids");
 var _settings = require("../../../settings");
+var _getColTitle = _interopRequireDefault(require("../utils/getColTitle"));
 /**
  * Copyright IBM Corp. 2020, 2022
  *
@@ -22,6 +23,16 @@ var _settings = require("../../../settings");
 // @flow
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var getAccessibilityProps = function getAccessibilityProps(header) {
+  var props = {};
+  var title = (0, _getColTitle.default)(header);
+  if (title) {
+    props.title = title;
+  } else {
+    props['aria-hidden'] = true;
+  }
+  return props;
+};
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps({
     role: false
@@ -44,7 +55,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     }), {
       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
-    }), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, header.getResizerProps(), {
+    }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, header.getResizerProps(), {
       className: "".concat(blockClass, "__resizer")
     })));
   }));

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -42,8 +42,7 @@ var Columns = function Columns(_ref) {
     onSelectColumn = _ref.onSelectColumn,
     assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
     assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
-    selectAllLabel = _ref.selectAllLabel,
-    isTableSortable = _ref.isTableSortable;
+    selectAllLabel = _ref.selectAllLabel;
   var _React$useState = _react.default.useState(''),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     ariaRegionText = _React$useState2[0],
@@ -99,7 +98,6 @@ var Columns = function Columns(_ref) {
     filterString: filterString,
     focusIndex: focusIndex,
     getNextIndex: getNextIndex,
-    isTableSortable: isTableSortable,
     moveElement: moveElement,
     onSelectColumn: onSelectColumn,
     setAriaRegionText: setAriaRegionText,
@@ -115,7 +113,6 @@ Columns.propTypes = {
   filterString: _propTypes.default.string.isRequired,
   getVisibleColumnsCount: _propTypes.default.func.isRequired,
   instructionsLabel: _propTypes.default.string,
-  isTableSortable: _propTypes.default.bool.isRequired,
   onSelectColumn: _propTypes.default.func.isRequired,
   selectAllLabel: _propTypes.default.string,
   setColumnStatus: _propTypes.default.func,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -48,8 +48,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     _ref$assistiveTextDis = _ref.assistiveTextDisabledInstructionsLabel,
     assistiveTextDisabledInstructionsLabel = _ref$assistiveTextDis === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$assistiveTextDis,
     _ref$selectAllLabel = _ref.selectAllLabel,
-    selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel,
-    isTableSortable = _ref.isTableSortable;
+    selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     visibleColumnsCount = _useState2[0],
@@ -159,8 +158,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       setColumnObjects(cols);
       setDirty();
     },
-    selectAllLabel: selectAllLabel,
-    isTableSortable: isTableSortable
+    selectAllLabel: selectAllLabel
   }));
 };
 CustomizeColumnsTearsheet.propTypes = {
@@ -171,7 +169,6 @@ CustomizeColumnsTearsheet.propTypes = {
   findColumnPlaceholderLabel: _propTypes.default.string,
   instructionsLabel: _propTypes.default.string,
   isOpen: _propTypes.default.bool.isRequired,
-  isTableSortable: _propTypes.default.bool.isRequired,
   onSaveColumnPrefs: _propTypes.default.func.isRequired,
   originalColumnDefinitions: _propTypes.default.array.isRequired,
   primaryButtonTextLabel: _propTypes.default.string,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -11,6 +11,7 @@ var _react2 = require("@carbon/react");
 var _common = require("./common");
 var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
 var _settings = require("../../../../../settings");
+var _getColTitle2 = _interopRequireDefault(require("../../../utils/getColTitle"));
 /**
  * Copyright IBM Corp. 2023, 2023
  *
@@ -24,7 +25,6 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     filterString = _ref.filterString,
     focusIndex = _ref.focusIndex,
     getNextIndex = _ref.getNextIndex,
-    isTableSortable = _ref.isTableSortable,
     moveElement = _ref.moveElement,
     onSelectColumn = _ref.onSelectColumn,
     setAriaRegionText = _ref.setAriaRegionText,
@@ -33,23 +33,18 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, columns
   // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
-    var _colDef$Header$props$, _colDef$Header$props;
-    var sortableTitle = isTableSortable && ((_colDef$Header$props$ = colDef.Header().props.children.props) === null || _colDef$Header$props$ === void 0 ? void 0 : _colDef$Header$props$.title);
-    return !!colDef.Header.props && !!((_colDef$Header$props = colDef.Header.props) !== null && _colDef$Header$props !== void 0 && _colDef$Header$props.title) || isTableSortable && !!sortableTitle;
-  }).filter(function (colDef) {
+    return !!(0, _getColTitle2.default)(colDef);
+  }).filter(Boolean).filter(function (colDef) {
     return !colDef.isAction;
   }).filter(function (colDef) {
-    var _colDef$Header$props$2, _colDef$Header$props2;
-    var sortableTitle = isTableSortable && ((_colDef$Header$props$2 = colDef.Header().props.children.props) === null || _colDef$Header$props$2 === void 0 ? void 0 : _colDef$Header$props$2.title);
-    return filterString.length === 0 || (isTableSortable ? sortableTitle === null || sortableTitle === void 0 ? void 0 : sortableTitle.toLowerCase().includes(filterString) : (_colDef$Header$props2 = colDef.Header.props) === null || _colDef$Header$props2 === void 0 || (_colDef$Header$props2 = _colDef$Header$props2.title) === null || _colDef$Header$props2 === void 0 ? void 0 : _colDef$Header$props2.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
+    var _getColTitle;
+    return filterString.length === 0 || ((_getColTitle = (0, _getColTitle2.default)(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
   }).map(function (colDef, i) {
-    var _colDef$Header$props$3, _colDef$Header$props3, _colDef$Header$props4, _colDef$Header$props5, _colDef$Header$props6;
-    var isSortableColumn = !!colDef.canSort && !!isTableSortable;
-    var sortableTitle = isTableSortable && ((_colDef$Header$props$3 = colDef.Header().props.children.props) === null || _colDef$Header$props$3 === void 0 ? void 0 : _colDef$Header$props$3.title);
+    var colHeaderTitle = (0, _getColTitle2.default)(colDef);
     var searchString = new RegExp('(' + filterString + ')');
-    var res = filterString.length ? isSortableColumn ? sortableTitle.toLowerCase().split(searchString) : colDef.Header.props.title.toLowerCase().split(searchString) : null;
+    var res = filterString.length ? colHeaderTitle.toLowerCase().split(searchString) : null;
     var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
-    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : isSortableColumn ? sortableTitle : (_colDef$Header$props3 = colDef.Header.props) === null || _colDef$Header$props3 === void 0 ? void 0 : _colDef$Header$props3.title;
+    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colHeaderTitle;
     var isFrozenColumn = !!colDef.sticky;
     var listContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
       wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
@@ -60,8 +55,8 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
         return onSelectColumn(colDef, checked);
       },
       id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
-      labelText: isSortableColumn ? sortableTitle : (_colDef$Header$props4 = colDef.Header.props) === null || _colDef$Header$props4 === void 0 ? void 0 : _colDef$Header$props4.title,
-      title: isSortableColumn ? sortableTitle : (_colDef$Header$props5 = colDef.Header.props) === null || _colDef$Header$props5 === void 0 ? void 0 : _colDef$Header$props5.title,
+      labelText: colHeaderTitle,
+      title: colHeaderTitle,
       className: "".concat(blockClass, "__customize-columns-checkbox"),
       hideLabel: true
     }), /*#__PURE__*/_react.default.createElement("div", {
@@ -78,7 +73,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
       id: "dnd-datagrid-columns-".concat(colDef.id),
       type: "column-customization",
       disabled: filterString.length > 0 || isFrozenColumn,
-      ariaLabel: isSortableColumn ? sortableTitle : (_colDef$Header$props6 = colDef.Header.props) === null || _colDef$Header$props6 === void 0 ? void 0 : _colDef$Header$props6.title,
+      ariaLabel: colHeaderTitle,
       onGrab: setAriaRegionText,
       isFocused: focusIndex === i,
       moveElement: moveElement,
@@ -108,7 +103,6 @@ DraggableItemsList.propTypes = {
   filterString: _propTypes.PropTypes.string.isRequired,
   focusIndex: _propTypes.PropTypes.number.isRequired,
   getNextIndex: _propTypes.PropTypes.func.isRequired,
-  isTableSortable: _propTypes.PropTypes.bool,
   moveElement: _propTypes.PropTypes.func.isRequired,
   onSelectColumn: _propTypes.PropTypes.func.isRequired,
   setAriaRegionText: _propTypes.PropTypes.func.isRequired,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js

@@ -29,7 +29,6 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_instance$customizeCo, _excluded);
   return /*#__PURE__*/React.createElement(_CustomizeColumnsTearsheet.default, (0, _extends2.default)({}, rest, labels, {
     isOpen: isTearsheetOpen,
-    isTableSortable: (instance === null || instance === void 0 ? void 0 : instance.isTableSortable) || false,
     setIsTearsheetOpen: setIsTearsheetOpen,
     columnDefinitions: instance.allColumns,
     originalColumnDefinitions: instance.columns,

package/lib/components/Datagrid/useDefaultStringRenderer.js

@@ -30,7 +30,8 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
   var HeaderRenderer = function HeaderRenderer(header) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__defaultStringRenderer"),
-      title: typeof header === 'string' ? header : ''
+      title: typeof header === 'string' ? header : '',
+      key: typeof header === 'string' ? header : ''
     }, header);
   };
   var visibleColumns = function visibleColumns(columns) {

package/lib/components/Datagrid/useSortableColumns.js

@@ -30,8 +30,12 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
   var ascendingSortableLabelText = _ref.ascendingSortableLabelText,
     descendingSortableLabelText = _ref.descendingSortableLabelText,
     defaultSortableLabelText = _ref.defaultSortableLabelText;
-  var isSorted = col.isSorted,
-    isSortedDesc = col.isSortedDesc;
+  if (!col) {
+    return;
+  }
+  var _ref2 = col || {},
+    isSorted = _ref2.isSorted,
+    isSortedDesc = _ref2.isSortedDesc;
   if (!isSorted) {
     return defaultSortableLabelText || 'none';
   }
@@ -43,16 +47,20 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
   }
 };
 var getAriaPressedValue = function getAriaPressedValue(col) {
-  var isSorted = col.isSorted;
+  if (!col) {
+    return;
+  }
+  var _ref3 = col || {},
+    isSorted = _ref3.isSorted;
   if (isSorted) {
     return 'true';
   }
   return 'false';
 };
 var useSortableColumns = function useSortableColumns(hooks) {
-  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref2) {
+  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref4) {
     var _instance$customizeCo;
-    var instance = _ref2.instance;
+    var instance = _ref4.instance;
     var onSort = instance.onSort,
       ascendingSortableLabelText = instance.ascendingSortableLabelText,
       descendingSortableLabelText = instance.descendingSortableLabelText,

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// 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;
+  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 || (_col$Header = col.Header) === null || _col$Header === void 0 || (_col$Header = _col$Header.props) === null || _col$Header === void 0 ? void 0 : _col$Header.title;
+};
+var _default = getColTitle;
+exports.default = _default;

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -336,7 +336,7 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     className: "".concat(blockClass, "__header-container")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__header-flex")
-  }, /*#__PURE__*/_react.default.createElement("h1", {
+  }, /*#__PURE__*/_react.default.createElement("h2", {
     className: "".concat(blockClass, "__header")
   }, title), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     size: "sm",
@@ -345,7 +345,7 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     onClick: function onClick() {
       return onDismissAllNotifications();
     }
-  }, dismissAllLabel)), /*#__PURE__*/_react.default.createElement(_react2.Toggle, {
+  }, dismissAllLabel)), onDoNotDisturbChange && /*#__PURE__*/_react.default.createElement(_react2.Toggle, {
     size: "sm",
     className: "".concat(blockClass, "__do-not-disturb-toggle"),
     id: "".concat(blockClass, "__do-not-disturb-toggle-component"),
@@ -447,11 +447,11 @@ NotificationsPanel.propTypes = {
    */
   dismissSingleNotificationIconDescription: _propTypes.default.string,
   /**
-   * Determines if the `Do not disturb` toggle is on or off when the component is rendered
+   * Optional: Determines if the `Do not disturb` toggle is on or off when the component is rendered
    */
   doNotDisturbDefaultToggled: _propTypes.default.bool,
   /**
-   * Label for Do not disturb toggle
+   * Optional: Label for Do not disturb toggle
    */
   doNotDisturbLabel: _propTypes.default.string,
   /**
@@ -499,7 +499,7 @@ NotificationsPanel.propTypes = {
    */
   onDismissSingleNotification: _propTypes.default.func,
   /**
-   * Function that returns the current selected value of the disable notification toggle
+   * Optional: function that returns the current selected value of the disable notification toggle
    */
   onDoNotDisturbChange: _propTypes.default.func,
   /**

package/lib/components/OptionsTile/OptionsTile.js

@@ -223,13 +223,11 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     id: "".concat(id, "-toggle"),
     className: "".concat(blockClass, "__toggle"),
     toggled: enabled,
-    labelA: "",
-    labelB: "",
     "aria-labelledby": titleId,
+    hideLabel: true,
     onToggle: onToggle,
     size: "sm",
-    disabled: isLocked,
-    labelText: title
+    disabled: isLocked
   })), isExpandable ? /*#__PURE__*/_react.default.createElement("details", {
     open: isOpen,
     ref: detailsRef