@carbon/ibm-products 1.40.0 → 1.41.1

package/es/components/APIKeyModal/APIKeyModal.js

@@ -160,54 +160,52 @@ export var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var submitHandler = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              e.preventDefault();
-              if (!hasNextStep) {
-                _context.next = 5;
-                break;
-              }
-              setCurrentStep(currentStep + 1);
-              _context.next = 22;
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            e.preventDefault();
+            if (!hasNextStep) {
+              _context.next = 5;
               break;
-            case 5:
-              if (!apiKeyLoaded) {
-                _context.next = 21;
-                break;
-              }
-              if (!onCopy) {
-                _context.next = 10;
-                break;
-              }
-              onCopy(apiKey);
-              _context.next = 19;
+            }
+            setCurrentStep(currentStep + 1);
+            _context.next = 22;
+            break;
+          case 5:
+            if (!apiKeyLoaded) {
+              _context.next = 21;
               break;
-            case 10:
-              _context.prev = 10;
-              _context.next = 13;
-              return navigator.clipboard.writeText(apiKey);
-            case 13:
-              _context.next = 19;
+            }
+            if (!onCopy) {
+              _context.next = 10;
               break;
-            case 15:
-              _context.prev = 15;
-              _context.t0 = _context["catch"](10);
-              console.error(_context.t0);
-              setCopyError(true);
-            case 19:
-              _context.next = 22;
-              break;
-            case 21:
-              if (editing) {
-                onRequestEdit(name);
-              } else {
-                onRequestGenerate(name);
-              }
-            case 22:
-            case "end":
-              return _context.stop();
-          }
+            }
+            onCopy(apiKey);
+            _context.next = 19;
+            break;
+          case 10:
+            _context.prev = 10;
+            _context.next = 13;
+            return navigator.clipboard.writeText(apiKey);
+          case 13:
+            _context.next = 19;
+            break;
+          case 15:
+            _context.prev = 15;
+            _context.t0 = _context["catch"](10);
+            console.error(_context.t0);
+            setCopyError(true);
+          case 19:
+            _context.next = 22;
+            break;
+          case 21:
+            if (editing) {
+              onRequestEdit(name);
+            } else {
+              onRequestGenerate(name);
+            }
+          case 22:
+          case "end":
+            return _context.stop();
         }
       }, _callee, null, [[10, 15]]);
     }));

package/es/components/AddSelect/AddSelectBody.js

@@ -152,7 +152,7 @@ export var AddSelectBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onCloseHandler();
   };
   var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
-    if (searchTerm || globalFiltersApplied || !path || path.length === 0) {
+    if (useNormalizedItems === false || searchTerm || globalFiltersApplied) {
       return false;
     }
     return true;

package/es/components/AddSelect/hooks/usePath.js

@@ -10,7 +10,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // LICENSE file in the root directory of this source tree.
 //
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 var usePath = function usePath() {
   var itemsLabel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var _useState = useState([{
@@ -20,6 +20,12 @@ var usePath = function usePath() {
     _useState2 = _slicedToArray(_useState, 2),
     path = _useState2[0],
     setPath = _useState2[1];
+  useEffect(function () {
+    setPath([{
+      id: 'base_of_path',
+      title: itemsLabel
+    }]);
+  }, [itemsLabel]);
   var handler = function handler(id, title, parentId) {
     if (path.find(function (entry) {
       return entry.id === id;

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -7,7 +7,7 @@ var _excluded = ["breadcrumbs", "className", "maxVisible", "noTrailingSlash", "o
   _excluded3 = ["className", "key", "label", "title"];
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 //
 // Copyright IBM Corp. 2020, 2021
 //

package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -10,7 +10,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 //
 // Copyright IBM Corp. 2020, 2021
 //

package/es/components/CreateFullPage/CreateFullPage.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "submitButtonText"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText"];
 /**
  * Copyright IBM Corp. 2021, 2022
  *
@@ -47,6 +47,7 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     nextButtonText = _ref.nextButtonText,
     onClose = _ref.onClose,
     onRequestSubmit = _ref.onRequestSubmit,
+    firstFocusElement = _ref.firstFocusElement,
     submitButtonText = _ref.submitButtonText,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState([]),
@@ -113,7 +114,8 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     previousState: previousState,
     currentStep: currentStep,
     blockClass: blockClass,
-    onMount: onMount
+    onMount: onMount,
+    firstFocusElement: firstFocusElement
   });
   useValidCreateStepCount(stepData.length, componentName);
   useCreateComponentStepChange({
@@ -233,6 +235,10 @@ CreateFullPage.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * Specifies elements to focus on first on render.
+   */
+  firstFocusElement: PropTypes.string,
   /**
    * The primary 'danger' button text in the modal
    */

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "submitButtonText", "title", "verticalPosition"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "firstFocusElement", "submitButtonText", "title", "verticalPosition"];
 /**
  * Copyright IBM Corp. 2021, 2022
  *
@@ -52,6 +52,7 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClose = _ref.onClose,
     onRequestSubmit = _ref.onRequestSubmit,
     open = _ref.open,
+    firstFocusElement = _ref.firstFocusElement,
     submitButtonText = _ref.submitButtonText,
     title = _ref.title,
     _ref$verticalPosition = _ref.verticalPosition,
@@ -122,7 +123,8 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     previousState: previousState,
     currentStep: currentStep,
     blockClass: blockClass,
-    onMount: onMount
+    onMount: onMount,
+    firstFocusElement: firstFocusElement
   });
   useValidCreateStepCount(stepData.length, componentName);
   useResetCreateComponent({
@@ -248,6 +250,10 @@ CreateTearsheet.propTypes = {
    * A description of the flow, displayed in the header area of the tearsheet.
    */
   description: PropTypes.node,
+  /**
+   * Specifies elements to focus on first on render.
+   */
+  firstFocusElement: PropTypes.string,
   /**
    * Used to set the size of the influencer
    */

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

@@ -47,7 +47,8 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     label = _ref2.label,
     nextButtonText = _ref2.nextButtonText,
     submitButtonText = _ref2.submitButtonText,
-    title = _ref2.title;
+    title = _ref2.title,
+    firstFocusElement = _ref2.firstFocusElement;
   var _useState = useState(750),
     _useState2 = _slicedToArray(_useState, 1),
     simulatedDelay = _useState2[0];
@@ -130,7 +131,8 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
           resolve();
         }, simulatedDelay);
       });
-    }
+    },
+    firstFocusElement: firstFocusElement
   }, /*#__PURE__*/React.createElement(CreateTearsheetStep, {
     onNext: function onNext() {
       return new Promise(function (resolve, reject) {

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -186,9 +186,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   // Removes the active cell element
   var removeActiveCell = useCallback(function () {
     var activeCellHighlight = spreadsheetRef.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
-    if (activeCellHighlight) {
-      activeCellHighlight.style.display = 'none';
-    }
+    activeCellHighlight.style.display = 'none';
   }, [spreadsheetRef]);
   var removeCellEditor = useCallback(function () {
     setCellEditorValue('');

package/es/components/DataSpreadsheet/utils/handleCellDeletion.js

@@ -8,6 +8,7 @@
 import { deepCloneObject } from '../../../global/js/utils/deepCloneObject';
 import { rangeWithCallback } from '../../../global/js/utils/rangeWithCallback';
 export var handleCellDeletion = function handleCellDeletion(_ref) {
+  var _selectionAreaToEmpty, _selectionAreaToEmpty2, _selectionAreaToEmpty3, _selectionAreaToEmpty4, _selectionAreaToEmpty5, _selectionAreaToEmpty6, _selectionAreaToEmpty7, _selectionAreaToEmpty8;
   var activeCellCoordinates = _ref.activeCellCoordinates,
     selectionAreas = _ref.selectionAreas,
     currentMatcher = _ref.currentMatcher,
@@ -25,10 +26,10 @@ export var handleCellDeletion = function handleCellDeletion(_ref) {
     return item.matcher === currentMatcher;
   });
   var selectionAreaToEmptyContents = selectionAreaClone[indexOfCurrentSelectionArea];
-  var lowestColumnIndex = Math.min(selectionAreaToEmptyContents.point1.column, selectionAreaToEmptyContents.point2.column);
-  var greatestColumnIndex = Math.max(selectionAreaToEmptyContents.point1.column, selectionAreaToEmptyContents.point2.column);
-  var lowestRowIndex = Math.min(selectionAreaToEmptyContents.point1.row, selectionAreaToEmptyContents.point2.row);
-  var greatestRowIndex = Math.max(selectionAreaToEmptyContents.point1.row, selectionAreaToEmptyContents.point2.row);
+  var lowestColumnIndex = Math.min(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty === void 0 ? void 0 : _selectionAreaToEmpty.column, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty2 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty2 === void 0 ? void 0 : _selectionAreaToEmpty2.column);
+  var greatestColumnIndex = Math.max(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty3 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty3 === void 0 ? void 0 : _selectionAreaToEmpty3.column, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty4 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty4 === void 0 ? void 0 : _selectionAreaToEmpty4.column);
+  var lowestRowIndex = Math.min(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty5 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty5 === void 0 ? void 0 : _selectionAreaToEmpty5.row, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty6 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty6 === void 0 ? void 0 : _selectionAreaToEmpty6.row);
+  var greatestRowIndex = Math.max(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty7 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty7 === void 0 ? void 0 : _selectionAreaToEmpty7.row, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty8 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty8 === void 0 ? void 0 : _selectionAreaToEmpty8.row);
   rangeWithCallback(lowestColumnIndex, greatestColumnIndex, function (columnIndex) {
     rangeWithCallback(lowestRowIndex, greatestRowIndex, function (rowIndex) {
       var cellProps = rows[rowIndex].cells[columnIndex];

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

@@ -1,5 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import React, { useContext, useEffect, useRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -29,7 +36,7 @@ export var DatagridContent = function DatagridContent(_ref) {
     withVirtualScroll = datagridState.withVirtualScroll,
     DatagridPagination = datagridState.DatagridPagination,
     isFetching = datagridState.isFetching,
-    CustomizeColumnsModal = datagridState.CustomizeColumnsModal,
+    CustomizeColumnsTearsheet = datagridState.CustomizeColumnsTearsheet,
     leftPanel = datagridState.leftPanel,
     fullHeightDatagrid = datagridState.fullHeightDatagrid,
     _datagridState$vertic = datagridState.verticalAlign,
@@ -41,7 +48,8 @@ export var DatagridContent = function DatagridContent(_ref) {
     withInlineEdit = datagridState.withInlineEdit,
     tableId = datagridState.tableId,
     DatagridActions = datagridState.DatagridActions,
-    totalColumnsWidth = datagridState.totalColumnsWidth;
+    totalColumnsWidth = datagridState.totalColumnsWidth,
+    gridRef = datagridState.gridRef;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
   var gridActive = state.gridActive,
     editId = state.editId;
@@ -81,7 +89,7 @@ export var DatagridContent = function DatagridContent(_ref) {
       onFocus: withInlineEdit ? function () {
         return handleGridFocus(state, dispatch);
       } : null
-    }), /*#__PURE__*/React.createElement(DatagridHead, datagridState), /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
+    }), !withVirtualScroll ? /*#__PURE__*/React.createElement(DatagridHead, datagridState) : null, /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
       rows: rows
     })));
   };
@@ -116,7 +124,10 @@ export var DatagridContent = function DatagridContent(_ref) {
     className: "".concat(blockClass, "__datagridLeftPanel")
   }, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/React.createElement("div", {
     ref: multiKeyTrackingRef
-  }, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/React.createElement(DatagridPagination, datagridState), CustomizeColumnsModal && /*#__PURE__*/React.createElement(CustomizeColumnsModal, {
+  }, renderTable()) : withVirtualScroll ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__virtualScrollContainer"),
+    ref: gridRef
+  }, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/React.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
     instance: datagridState
   }));
 };
@@ -126,7 +137,7 @@ DatagridContent.propTypes = {
     withVirtualScroll: PropTypes.bool,
     DatagridActions: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
     DatagridPagination: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-    CustomizeColumnsModal: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    CustomizeColumnsTearsheet: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
     isFetching: PropTypes.bool,
     leftPanel: PropTypes.object,
     fullHeightDatagrid: PropTypes.bool,
@@ -139,6 +150,7 @@ DatagridContent.propTypes = {
     page: PropTypes.arrayOf(PropTypes.object),
     rows: PropTypes.arrayOf(PropTypes.object),
     tableId: PropTypes.string,
-    totalColumnsWidth: PropTypes.number
+    totalColumnsWidth: PropTypes.number,
+    gridRef: PropTypes.object
   })
 };

package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -22,7 +22,9 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
     emptyStateSize = datagridState.emptyStateSize,
     _datagridState$emptyS = datagridState.emptyStateType,
     emptyStateType = _datagridState$emptyS === void 0 ? 'noData' : _datagridState$emptyS,
-    illustrationTheme = datagridState.illustrationTheme;
+    illustrationTheme = datagridState.illustrationTheme,
+    emptyStateAction = datagridState.emptyStateAction,
+    emptyStateLink = datagridState.emptyStateLink;
   return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
     className: "".concat(blockClass, "__empty-state-body")
   }), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
@@ -31,12 +33,16 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
     illustrationTheme: illustrationTheme,
     size: emptyStateSize,
     title: emptyStateTitle,
-    subtitle: emptyStateDescription
+    subtitle: emptyStateDescription,
+    action: emptyStateAction,
+    link: emptyStateLink
   }), emptyStateType === 'noData' && /*#__PURE__*/React.createElement(NoDataEmptyState, {
     illustrationTheme: illustrationTheme,
     size: emptyStateSize,
     title: emptyStateTitle,
-    subtitle: emptyStateDescription
+    subtitle: emptyStateDescription,
+    action: emptyStateAction,
+    link: emptyStateLink
   }))));
 };
 export default DatagridEmptyBody;

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -10,14 +10,12 @@ var _excluded = ["children"];
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 // @flow
-import React, { useContext } from 'react';
+import React from 'react';
 import { DataTable, SkeletonText } from 'carbon-components-react';
 import { px } from '@carbon/layout';
 import cx from 'classnames';
 import { selectionColumnId } from '../common-column-ids';
 import { pkg, carbon } from '../../../settings';
-import { InlineEditContext } from './addons/InlineEdit/InlineEditContext/InlineEditContext';
-import { getCellIdAsObject } from './addons/InlineEdit/InlineEditContext/getCellIdAsObject';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableRow = DataTable.TableRow,
   TableCell = DataTable.TableCell;
@@ -35,10 +33,6 @@ var DatagridRow = function DatagridRow(datagridState) {
   var row = datagridState.row,
     rowSize = datagridState.rowSize,
     withNestedRows = datagridState.withNestedRows;
-  var _useContext = useContext(InlineEditContext),
-    state = _useContext.state;
-  var activeCellId = state.activeCellId;
-  var activeCellObject = activeCellId && getCellIdAsObject(activeCellId);
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -52,7 +46,7 @@ var DatagridRow = function DatagridRow(datagridState) {
     return size;
   };
   return /*#__PURE__*/React.createElement(TableRow, _extends({
-    className: cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
+    className: cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
   }, row.getRowProps(), {
     key: row.id,
     onMouseEnter: function onMouseEnter(event) {

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -13,6 +13,8 @@ import React, { useEffect } from 'react';
 import { VariableSizeList } from 'react-window';
 import { DataTable } from 'carbon-components-react';
 import { pkg } from '../../../settings';
+import DatagridHead from './DatagridHead';
+import { px } from '@carbon/layout';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableBody = DataTable.TableBody;
 var rowSizeMap = {
@@ -29,6 +31,7 @@ var rowSizeMap = {
 };
 var defaultRowHeight = rowSizeMap.lg;
 var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
+  var _gridRef$current, _gridRef$current2;
   var getTableBodyProps = datagridState.getTableBodyProps,
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow,
@@ -42,7 +45,14 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     DatagridPagination = datagridState.DatagridPagination,
     page = datagridState.page,
     handleResize = datagridState.handleResize,
-    withOverflowRow = datagridState.withOverflowRow;
+    gridRef = datagridState.gridRef;
+  var syncScroll = function syncScroll(e) {
+    var virtualBody = e.target;
+    document.querySelector(".".concat(blockClass, "__head-warp")).scrollLeft = virtualBody.scrollLeft;
+    var spacerColumn = document.querySelector(".".concat(blockClass, "__head-warp thead th:last-child"));
+    spacerColumn.style.width = px(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
+  };
+
   useEffect(function () {
     handleResize();
   }, [handleResize]);
@@ -51,8 +61,16 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     listRef.current.resetAfterIndex(0);
   }
   var visibleRows = DatagridPagination && page || rows;
-  return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
-    onScroll: onScroll
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__head-warp"),
+    style: {
+      width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(DatagridHead, datagridState)), /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
+    onScroll: function onScroll(e) {
+      return syncScroll(e);
+    }
   }), /*#__PURE__*/React.createElement(VariableSizeList, {
     height: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
@@ -63,19 +81,20 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     onScroll: onScroll,
     innerRef: innerListRef,
     ref: listRef,
-    className: "".concat(blockClass, "__virtual-scrollbar")
+    className: "".concat(blockClass, "__virtual-scrollbar"),
+    style: {
+      width: (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth
+    }
   }, function (_ref) {
     var index = _ref.index,
       style = _ref.style;
     var row = visibleRows[index];
     prepareRow(row);
     return /*#__PURE__*/React.createElement("div", {
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        overflow: withOverflowRow ? 'visible' : 'hidden'
-      })
+      style: _objectSpread({}, style)
     }, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
       row: row
     })));
-  }));
+  })));
 };
 export default DatagridVirtualBody;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js

@@ -1,10 +1,8 @@
-// @flow
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 import PropTypes from 'prop-types';
@@ -17,11 +15,11 @@ var Actions = function Actions(_ref) {
     setSearchText = _ref.setSearchText,
     findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-modal--actions")
+    className: "".concat(blockClass, "__customize-columns-tearsheet--actions")
   }, /*#__PURE__*/React.createElement(Search, {
     placeholder: findColumnPlaceholderLabel,
     value: searchText,
-    size: "sm",
+    size: "xl",
     labelText: findColumnPlaceholderLabel,
     onChange: function onChange(e) {
       // TODO: is it performant?

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js

@@ -1,13 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onClick", "setIsModalOpen", "isModalOpen", "iconTooltipLabel"];
-// @flow
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+var _excluded = ["onClick", "setIsTearsheetOpen", "isTearsheetOpen", "iconTooltipLabel"];
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 import * as React from 'react';
@@ -18,8 +16,8 @@ import { pkg } from '../../../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var ButtonWrapper = function ButtonWrapper(_ref) {
   var _onClick = _ref.onClick,
-    setIsModalOpen = _ref.setIsModalOpen,
-    isModalOpen = _ref.isModalOpen,
+    setIsTearsheetOpen = _ref.setIsTearsheetOpen,
+    isTearsheetOpen = _ref.isTearsheetOpen,
     _ref$iconTooltipLabel = _ref.iconTooltipLabel,
     iconTooltipLabel = _ref$iconTooltipLabel === void 0 ? 'Customize columns' : _ref$iconTooltipLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -31,7 +29,7 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
     hasIconOnly: true,
     "test-id": "".concat(blockClass, "__customize-columns-trigger"),
     onClick: function onClick() {
-      setIsModalOpen(!isModalOpen);
+      setIsTearsheetOpen(!isTearsheetOpen);
       if (typeof _onClick === 'function') {
         _onClick();
       }
@@ -40,8 +38,8 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
 };
 ButtonWrapper.propTypes = {
   iconTooltipLabel: PropTypes.string,
-  isModalOpen: PropTypes.bool.isRequired,
+  isTearsheetOpen: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
-  setIsModalOpen: PropTypes.func.isRequired
+  setIsTearsheetOpen: PropTypes.func.isRequired
 };
 export default ButtonWrapper;