@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.21

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

@@ -9,12 +9,9 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 import React from 'react';
 import { pkg } from '../../../settings';
-import { DataTable } from '@carbon/react';
-import { NoDataEmptyState } from '../../EmptyStates/NoDataEmptyState';
+import { TableBody, TableRow, TableCell } from '@carbon/react';
+import { NoDataEmptyState, ErrorEmptyState } from '../../EmptyStates';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var TableBody = DataTable.TableBody,
-    TableRow = DataTable.TableRow,
-    TableCell = DataTable.TableCell;
 
 var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
@@ -22,16 +19,29 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
       emptyStateTitle = datagridState.emptyStateTitle,
       emptyStateDescription = datagridState.emptyStateDescription,
       emptyStateSize = datagridState.emptyStateSize,
-      illustrationTheme = datagridState.illustrationTheme;
+      _datagridState$emptyS = datagridState.emptyStateType,
+      emptyStateType = _datagridState$emptyS === void 0 ? 'noData' : _datagridState$emptyS,
+      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, {
     colSpan: headers.length
-  }, /*#__PURE__*/React.createElement(NoDataEmptyState, {
+  }, emptyStateType === 'error' && /*#__PURE__*/React.createElement(ErrorEmptyState, {
     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,
+    action: emptyStateAction,
+    link: emptyStateLink
   }))));
 };
 

package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js

@@ -13,13 +13,21 @@ var DatagridExpandedRow = function DatagridExpandedRow(PreviousRowRenderer, Expa
   return function (datagridState) {
     var row = datagridState.row;
 
+    var _ref = row || {},
+        expandedContentHeight = _ref.expandedContentHeight;
+
     if (!row.isExpanded) {
       return PreviousRowRenderer(datagridState);
     }
 
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__expanded-row")
-    }, PreviousRowRenderer(datagridState), ExpandedRowContentComponent(datagridState));
+    }, PreviousRowRenderer(datagridState), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__expanded-row-content"),
+      style: {
+        height: expandedContentHeight ? expandedContentHeight : null
+      }
+    }, ExpandedRowContentComponent(datagridState)));
   };
 };
 

package/es/components/Datagrid/Datagrid/DatagridHead.js

@@ -5,8 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { DataTable } from '@carbon/react';
-var TableHead = DataTable.TableHead;
+import { TableHead } from '@carbon/react';
 
 var DatagridHead = function DatagridHead(datagridState) {
   var _datagridState$header = datagridState.headerGroups,

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

@@ -10,7 +10,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // @flow
 import React from 'react';
 import cx from 'classnames';
-import { DataTable } from '@carbon/react';
+import { TableHeader, TableRow } from '@carbon/react';
 import { selectionColumnId } from '../common-column-ids';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
@@ -41,9 +41,6 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   }));
 };
 
-var TableHeader = DataTable.TableHeader,
-    TableRow = DataTable.TableRow;
-
 var useHeaderRow = function useHeaderRow(hooks) {
   var useInstance = function useInstance(instance) {
     Object.assign(instance, {

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

@@ -12,31 +12,68 @@ var _excluded = ["children"];
  */
 // @flow
 import React from 'react';
-import { DataTable, SkeletonText } from '@carbon/react';
+import { TableRow, TableCell, SkeletonText } from '@carbon/react';
+import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids';
 import cx from 'classnames';
 import { pkg, carbon } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var TableRow = DataTable.TableRow,
-    TableCell = DataTable.TableCell; // eslint-disable-next-line react/prop-types
+var rowHeights = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64
+}; // eslint-disable-next-line react/prop-types
 
 var DatagridRow = function DatagridRow(datagridState) {
   var _cx;
 
-  var row = datagridState.row;
+  var row = datagridState.row,
+      rowSize = datagridState.rowSize,
+      withNestedRows = datagridState.withNestedRows;
+
+  var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
+    var isExpanded = _ref.isExpanded,
+        subRows = _ref.subRows;
+    var size = 0;
+
+    if (isExpanded && subRows) {
+      size += subRows.length;
+      subRows.forEach(function (child) {
+        size += getVisibleNestedRowCount(child);
+      });
+    }
+
+    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(carbon.prefix, "--data-table--selected"), row.isSelected), _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) {
+      var _hoverRow$style, _hoverRow$style2, _hoverRow$style3;
+
+      if (!withNestedRows) {
+        return;
+      }
+
+      var subRowCount = getVisibleNestedRowCount(row);
+      var totalNestedRowIndicatorHeight = px(subRowCount * rowHeights[rowSize]);
       var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
       hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.add("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+      var rowExpanderButton = hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.querySelector(".".concat(blockClass, "__row-expander"));
+      var rowSizeValue = rowSize || 'lg';
+      hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style = hoverRow.style) === null || _hoverRow$style === void 0 ? void 0 : _hoverRow$style.setProperty("--".concat(blockClass, "--indicator-height"), totalNestedRowIndicatorHeight);
+      hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style2 = hoverRow.style) === null || _hoverRow$style2 === void 0 ? void 0 : _hoverRow$style2.setProperty("--".concat(blockClass, "--row-height"), px(rowHeights[rowSizeValue]));
+      hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style3 = hoverRow.style) === null || _hoverRow$style3 === void 0 ? void 0 : _hoverRow$style3.setProperty("--".concat(blockClass, "--indicator-offset-amount"), px((rowExpanderButton === null || rowExpanderButton === void 0 ? void 0 : rowExpanderButton.offsetLeft) || 0));
     },
     onMouseLeave: function onMouseLeave(event) {
       var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
       hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
     }
-  }), row.cells.map(function (cell) {
+  }), row.cells.map(function (cell, index) {
     var cellProps = cell.getCellProps();
 
     var children = cellProps.children,
@@ -52,7 +89,7 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
 
     return /*#__PURE__*/React.createElement(TableCell, _extends({
-      className: "".concat(blockClass, "__cell")
+      className: cx("".concat(blockClass, "__cell"), _defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
     }, restProps, {
       key: cell.column.id
     }), content);

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["onChange"];
 
 /*
@@ -11,22 +12,28 @@ var _excluded = ["onChange"];
  */
 // @flow
 import React from 'react';
-import { DataTable } from '@carbon/react';
+import { TableSelectAll } from '@carbon/react';
+import cx from 'classnames';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var SelectAll = function SelectAll(datagridState) {
+  var _columns$;
+
   var isFetching = datagridState.isFetching,
       getToggleAllRowsSelectedProps = datagridState.getToggleAllRowsSelectedProps,
       getToggleAllPageRowsSelectedProps = datagridState.getToggleAllPageRowsSelectedProps,
       tableId = datagridState.tableId,
       hideSelectAll = datagridState.hideSelectAll,
       DatagridPagination = datagridState.DatagridPagination,
-      radio = datagridState.radio;
+      radio = datagridState.radio,
+      columns = datagridState.columns,
+      withStickyColumn = datagridState.withStickyColumn;
+  var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
 
   if (hideSelectAll || radio) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__head-hidden-select-all")
+      className: cx("".concat(blockClass, "__head-hidden-select-all"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
     });
   }
 
@@ -37,7 +44,7 @@ var SelectAll = function SelectAll(datagridState) {
       selectProps = _objectWithoutProperties(_getProps, _excluded);
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__head-select-all ").concat(blockClass, "__checkbox-cell")
+    className: cx("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft))
   }, /*#__PURE__*/React.createElement(TableSelectAll, _extends({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onSelect: onChange,
@@ -46,5 +53,4 @@ var SelectAll = function SelectAll(datagridState) {
   })));
 };
 
-var TableSelectAll = DataTable.TableSelectAll;
 export { SelectAll };

package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["onChange"];
@@ -13,8 +14,9 @@ var _excluded = ["onChange"];
 // @flow
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import { Checkbox, OverflowMenu, OverflowMenuItem } from '@carbon/react';
-import { CaretDown } from '@carbon/icons-react';
+import { CaretDown } from '@carbon/react/icons';
 import { pkg } from '../../../settings'; // cspell:words columnheader
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
@@ -22,6 +24,8 @@ var SELECT_ALL_PAGE_ROWS = 'pageRows';
 var SELECT_ALL_ROWS = 'allRows';
 
 var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
+  var _columns$;
+
   var tableId = _ref.tableId,
       isFetching = _ref.isFetching,
       isAllRowsSelected = _ref.isAllRowsSelected,
@@ -31,7 +35,9 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
       _ref$allPageRowsLabel = _ref.allPageRowsLabel,
       allPageRowsLabel = _ref$allPageRowsLabel === void 0 ? 'Select all on page' : _ref$allPageRowsLabel,
       _ref$allRowsLabel = _ref.allRowsLabel,
-      allRowsLabel = _ref$allRowsLabel === void 0 ? 'Select all' : _ref$allRowsLabel;
+      allRowsLabel = _ref$allRowsLabel === void 0 ? 'Select all' : _ref$allRowsLabel,
+      columns = _ref.columns,
+      withStickyColumn = _ref.withStickyColumn;
 
   var _useState = useState(SELECT_ALL_PAGE_ROWS),
       _useState2 = _slicedToArray(_useState, 2),
@@ -60,10 +66,11 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
       selectProps = _objectWithoutProperties(_getProps, _excluded);
 
   var disabled = isFetching || selectProps.disabled;
+  var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   return /*#__PURE__*/React.createElement("th", {
     role: "columnheader",
     scope: "col",
-    className: "".concat(blockClass, "__select-all-toggle-on")
+    className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onClick: function onClick(e) {
@@ -118,11 +125,13 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
 SelectAllWithToggle.propTypes = {
   allPageRowsLabel: PropTypes.string,
   allRowsLabel: PropTypes.string,
+  columns: PropTypes.arrayOf(PropTypes.object),
   getToggleAllPageRowsSelectedProps: PropTypes.func.isRequired,
   getToggleAllRowsSelectedProps: PropTypes.func.isRequired,
   isAllRowsSelected: PropTypes.bool.isRequired,
   isFetching: PropTypes.bool,
   selectAllToggle: PropTypes.object,
-  tableId: PropTypes.string.isRequired
+  tableId: PropTypes.string.isRequired,
+  withStickyColumn: PropTypes.bool
 };
 export default SelectAllWithToggle;

package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -13,11 +13,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 import React from 'react';
-import { DataTable } from '@carbon/react';
+import { TableBody } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var TableBody = DataTable.TableBody;
 
 var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,

package/es/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -8,14 +8,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * LICENSE file in the root directory of this source tree.
  */
 import React, { useEffect, useState } from 'react';
-import { Add, OverflowMenuVertical } from '@carbon/icons-react';
-import { DataTable, TableBatchActions, TableBatchAction } from '@carbon/react';
+import { Add, OverflowMenuVertical } from '@carbon/react/icons';
+import { TableToolbar, TableBatchActions, TableBatchAction } from '@carbon/react';
 import { useResizeDetector } from 'react-resize-detector';
 import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
 import { pkg, carbon } from '../../../settings';
 import cx from 'classnames';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var TableToolbar = DataTable.TableToolbar;
 
 var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
   var _useState = useState(false),
@@ -35,7 +34,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
 
   var selectedFlatRows = datagridState.selectedFlatRows,
       toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
-      toolbarBatchActions = datagridState.toolbarBatchActions;
+      toolbarBatchActions = datagridState.toolbarBatchActions,
+      setGlobalFilter = datagridState.setGlobalFilter;
   var totalSelected = selectedFlatRows && selectedFlatRows.length; // Get initial width of batch actions container,
   // used to measure when all items are put inside
   // the ButtonMenu
@@ -70,7 +70,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       renderIcon: width > minWidthBeforeOverflowIcon ? Add : OverflowMenuVertical,
       className: cx("".concat(blockClass, "__button-menu"), _defineProperty({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
       menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
-      flipped: true
+      flipped: true,
+      menuAriaLabel: 'Batch actions'
     }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
       if (index < 2) {
         if (displayAllInMenu) {
@@ -111,7 +112,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     shouldShowBatchActions: totalSelected > 0,
     totalSelected: totalSelected,
     onCancel: function onCancel() {
-      return toggleAllRowsSelected(false);
+      toggleAllRowsSelected(false);
+      setGlobalFilter(null);
     }
   }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
     if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length === 3) {
@@ -138,13 +140,15 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
 
   var DatagridActions = datagridState.DatagridActions,
       DatagridBatchActions = datagridState.DatagridBatchActions,
-      batchActions = datagridState.batchActions;
+      batchActions = datagridState.batchActions,
+      rowSize = datagridState.rowSize;
+  var getRowHeight = rowSize ? rowSize : 'lg';
   return batchActions && DatagridActions ? /*#__PURE__*/React.createElement("div", {
     ref: ref,
+    className: cx("".concat(blockClass, "__table-toolbar"), "".concat(blockClass, "__table-toolbar--").concat(getRowHeight))
+  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)));
+  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
 };
 
 export default DatagridToolbar;

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

@@ -14,10 +14,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import React, { useEffect } from 'react';
 import { VariableSizeList } from 'react-window';
-import { DataTable } from '@carbon/react';
+import { TableBody } from '@carbon/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 = {
   xs: 24,
   sm: 32,
@@ -33,6 +34,8 @@ 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,
@@ -40,12 +43,21 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
       innerListRef = datagridState.innerListRef,
       _datagridState$tableH = datagridState.tableHeight,
       tableHeight = _datagridState$tableH === void 0 ? 400 : _datagridState$tableH,
+      virtualHeight = datagridState.virtualHeight,
       listRef = datagridState.listRef,
       rowSize = datagridState.rowSize,
       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]);
@@ -56,10 +68,18 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
   }
 
   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: tableHeight,
+    height: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
     itemSize: function itemSize(index) {
       return visibleRows[index].isExpanded ? (visibleRows[index].expandedContentHeight || 0) + rowHeight : rowHeight;
@@ -68,20 +88,21 @@ 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/DraggableElement.js

@@ -11,7 +11,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Draggable } from '@carbon/icons-react';
+import { Draggable, Locked } from '@carbon/react/icons';
 import { useDrag, useDrop } from 'react-dnd';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
@@ -22,6 +22,8 @@ var blockClass = "".concat(pkg.prefix, "--datagrid");
 var DRAG_TYPE = "".concat(blockClass, "__shared-ui-draggable-element");
 
 var DraggableElement = function DraggableElement(_ref) {
+  var _cx;
+
   var id = _ref.id,
       index = _ref.index,
       listData = _ref.listData,
@@ -32,7 +34,9 @@ var DraggableElement = function DraggableElement(_ref) {
       onGrab = _ref.onGrab,
       onArrowKeyDown = _ref.onArrowKeyDown,
       isFocused = _ref.isFocused,
+      isSticky = _ref.isSticky,
       moveElement = _ref.moveElement,
+      selected = _ref.selected,
       _ref$positionLabel = _ref.positionLabel,
       positionLabel = _ref$positionLabel === void 0 ? 'Current position {index} of {total}' : _ref$positionLabel,
       _ref$grabbedLabel = _ref.grabbedLabel,
@@ -117,11 +121,13 @@ var DraggableElement = function DraggableElement(_ref) {
     className: cx({
       disabled: disabled
     }, "".concat(blockClass, "__draggable-handleStyle"))
-  }, /*#__PURE__*/React.createElement(Draggable, {
+  }, isSticky ? /*#__PURE__*/React.createElement(Locked, {
+    size: 16
+  }) : /*#__PURE__*/React.createElement(Draggable, {
     size: 16
   })), children);
   return /*#__PURE__*/React.createElement("li", {
-    className: cx(_defineProperty({}, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), _defineProperty({}, "".concat(blockClass, "__wkc-draggable-handleHolder--grabbed"), isGrabbed), "".concat(blockClass, "__draggable-handleHolder")),
+    className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
     ref: ref,
     "aria-selected": isFocused,
     role: "option",
@@ -152,7 +158,7 @@ var DraggableElement = function DraggableElement(_ref) {
     className: "".concat(blockClass, "__shared-ui--assistive-text")
   }, ariaLabel), isDragging && !isOver ? /*#__PURE__*/React.createElement("div", {
     ref: preview,
-    className: "${blockClass}__draggable-handleHolder-droppable"
+    className: "".concat(blockClass, "__draggable-handleHolder-droppable ").concat(blockClass, "__draggable-handleHolder-droppable--origin")
   }, content) : /*#__PURE__*/React.createElement("div", {
     ref: drag,
     "aria-hidden": isFocused && isFocusedOnItem // if focus on li, hide the children from aria
@@ -170,11 +176,13 @@ DraggableElement.propTypes = {
   id: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   isFocused: PropTypes.bool.isRequired,
+  isSticky: PropTypes.bool,
   listData: PropTypes.array.isRequired,
   moveElement: PropTypes.func.isRequired,
   onArrowKeyDown: PropTypes.func.isRequired,
   onGrab: PropTypes.func.isRequired,
   positionLabel: PropTypes.string,
+  selected: PropTypes.bool,
   type: PropTypes.string.isRequired
 };
 export default DraggableElement;

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

@@ -1,74 +1,31 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
-
-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; }
-
-// @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 { Reset } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
-import { Button, Search } from '@carbon/react';
+import { Search } from '@carbon/react';
 import * as React from 'react';
-import keyBy from 'lodash/keyBy';
 import { pkg } from '../../../../../settings';
-import { isColumnVisible } from './common';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var Actions = function Actions(_ref) {
   var searchText = _ref.searchText,
-      columns = _ref.columns,
-      originalColumnDefinitions = _ref.originalColumnDefinitions,
-      setColumnsObject = _ref.setColumnsObject,
       setSearchText = _ref.setSearchText,
-      _ref$findColumnPlaceh = _ref.findColumnPlaceholderLabel,
-      findColumnPlaceholderLabel = _ref$findColumnPlaceh === void 0 ? 'Find column' : _ref$findColumnPlaceh,
-      _ref$resetToDefaultLa = _ref.resetToDefaultLabel,
-      resetToDefaultLabel = _ref$resetToDefaultLa === void 0 ? 'Reset to default' : _ref$resetToDefaultLa;
+      findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-modal--actions"),
-    "test-id": "".concat(blockClass, "__customize-columns-modal--actions")
+    className: "".concat(blockClass, "__customize-columns-tearsheet--actions")
   }, /*#__PURE__*/React.createElement(Search, {
     placeholder: findColumnPlaceholderLabel,
     value: searchText,
-    size: "sm",
+    size: "lg",
     labelText: findColumnPlaceholderLabel,
     onChange: function onChange(e) {
       // TODO: is it performant?
       setSearchText(e.target.value);
-    },
-    "test-id": "".concat(blockClass, "__customize-columns-modal--search")
-  }), /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      var reset = resetToOriginal(columns, originalColumnDefinitions);
-      setColumnsObject(reset);
-    },
-    size: "sm",
-    kind: "ghost",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(Reset, _extends({
-        size: 16
-      }, props));
-    },
-    "test-id": "".concat(blockClass, "__customize-columns-modal--reset")
-  }, resetToDefaultLabel));
-};
-
-var resetToOriginal = function resetToOriginal(columnDefinitions, originalColumnDefinitions) {
-  var keyedDefs = keyBy(columnDefinitions, 'id');
-  return originalColumnDefinitions.map(function (colDef) {
-    return _objectSpread(_objectSpread({}, keyedDefs[colDef.id]), {}, {
-      isVisible: isColumnVisible(colDef)
-    });
-  });
+    }
+  }));
 };
 
 Actions.propTypes = {