@carbon/ibm-products 1.40.0 → 1.41.0

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/Filtering/FilterFlyout.js

@@ -48,12 +48,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
     onApply = _ref$onApply === void 0 ? function () {} : _ref$onApply,
     _ref$onCancel = _ref.onCancel,
     onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
-    _ref$shouldClickOutsi = _ref.shouldClickOutsideToClose,
-    shouldClickOutsideToClose = _ref$shouldClickOutsi === void 0 ? false : _ref$shouldClickOutsi,
     _ref$secondaryActionL = _ref.secondaryActionLabel,
     secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
-    setAllFilters = _ref.setAllFilters,
-    setFilter = _ref.setFilter;
+    setAllFilters = _ref.setAllFilters;
   /** Context state and methods */
   var _useContext = useContext(FilterContext),
     EventEmitter = _useContext.EventEmitter;
@@ -100,8 +97,11 @@ var FilterFlyout = function FilterFlyout(_ref) {
     prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
   };
   var cancel = function cancel() {
-    revertToPreviousFilters();
-    onCancel();
+    // Reverting to previous filters only applies when using batch actions
+    if (updateMethod === BATCH) {
+      revertToPreviousFilters();
+      onCancel();
+    }
     closeFlyout();
   };
   var reset = function reset() {
@@ -133,34 +133,32 @@ var FilterFlyout = function FilterFlyout(_ref) {
     if (type === DATE && !value[1]) {
       return;
     }
-    if (updateMethod === BATCH) {
-      var filtersObjectArrayCopy = _toConsumableArray(filtersObjectArray);
-      // check if the filter already exists in the array
-      var filter = filtersObjectArrayCopy.find(function (item) {
-        return item.id === column;
+    var filtersObjectArrayCopy = _toConsumableArray(filtersObjectArray);
+    // check if the filter already exists in the array
+    var filter = filtersObjectArrayCopy.find(function (item) {
+      return item.id === column;
+    });
+
+    // if filter exists in array then update the filter's new value
+    if (filter) {
+      filter.value = value;
+    } else {
+      filtersObjectArrayCopy.push({
+        id: column,
+        value: value,
+        type: type
       });
+    }
+    setFiltersObjectArray(filtersObjectArrayCopy);
 
-      // if filter exists in array then update the filter's new value
-      if (filter) {
-        filter.value = value;
-      } else {
-        filtersObjectArrayCopy.push({
-          id: column,
-          value: value,
-          type: type
-        });
-      }
-      setFiltersObjectArray(filtersObjectArrayCopy);
-    } else if (updateMethod === INSTANT) {
-      setFilter(column, value);
+    // Automatically apply the filters if the updateMethod is instant
+    if (updateMethod === INSTANT) {
+      setAllFilters(filtersObjectArrayCopy);
     }
-  }, [setFilter, updateMethod, filtersObjectArray]);
+  }, [setAllFilters, updateMethod, filtersObjectArray]);
 
   /** Effects */
   useClickOutside(filterFlyoutRef, function (target) {
-    if (shouldClickOutsideToClose === false) {
-      return;
-    }
     var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
     if (!open || hasClickedOnDatePicker) {
       return;
@@ -361,14 +359,6 @@ FilterFlyout.propTypes = {
    * Function that sets all the filters, this comes from the datagridState
    */
   setAllFilters: PropTypes.func.isRequired,
-  /**
-   * Function that sets an individual filter, this comes from the datagridState
-   */
-  setFilter: PropTypes.func.isRequired,
-  /**
-   * Boolean if you want the flyout to close when clicked outside of the parent
-   */
-  shouldClickOutsideToClose: PropTypes.bool,
   /**
    * Title of the filter flyout
    */

package/es/components/Datagrid/Datagrid.stories/index.js

@@ -2,4 +2,4 @@ export { story as CustomizeColumnStory } from './CustomizeColumnStory';
 export { default as StickyActionsColumn } from './StickyActionsColumnStory';
 export { story as RowSizeDropdownStory } from './RowSizeDropdownStory';
 export { story as LeftPanelStory } from './LeftPanelStory';
-export { story as SelectAllWitHToggle } from './SelectAllWithToggleStory';
+export { story as SelectAllWithToggle } from './SelectAllWithToggleStory';

package/es/components/Datagrid/useFiltering.js

@@ -61,7 +61,6 @@ var useFiltering = function useFiltering(hooks) {
   hooks.useInstance.push(function (instance) {
     var filterProps = instance.filterProps,
       setAllFilters = instance.setAllFilters,
-      setFilter = instance.setFilter,
       headers = instance.headers;
     var defaultProps = {
       variation: 'flyout'
@@ -69,7 +68,6 @@ var useFiltering = function useFiltering(hooks) {
     var getFilterFlyoutProps = function getFilterFlyoutProps() {
       return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
         setAllFilters: setAllFilters,
-        setFilter: setFilter,
         headers: headers
       });
     };

package/es/components/Datagrid/useParentDimensions.js

@@ -12,6 +12,7 @@ var useParentDimensions = function useParentDimensions(hooks) {
   var headRef = useRef();
   var innerListRef = useRef();
   var listRef = useRef();
+  var gridRef = useRef();
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     tableHeight = _useState2[0],
@@ -47,7 +48,8 @@ var useParentDimensions = function useParentDimensions(hooks) {
       headRef: headRef,
       innerListRef: innerListRef,
       handleResize: handleResize,
-      listRef: listRef
+      listRef: listRef,
+      gridRef: gridRef
     });
   };
   hooks.useInstance.push(useInstance);

package/es/components/Datagrid/utils/getArgTypes.js

@@ -90,5 +90,10 @@ export var ARG_TYPES = {
   customizeColumnsProps: {
     control: 'object',
     description: 'This is an object containing all of the props used with the column customization extension. _This value is set/passed inside of the `datagridState` object._'
+  },
+  filterProps: {
+    name: 'Filter props',
+    control: 'object',
+    description: 'This is an object for all the props passed into the filter flyout and filter panel'
   }
 };

package/es/components/Datagrid/utils/getInlineEditColumns.js

@@ -74,8 +74,13 @@ export var getInlineEditColumns = function getInlineEditColumns() {
     accessor: 'visits',
     width: 120,
     inlineEdit: {
+      validator: function validator(n) {
+        return n && n < 10;
+      },
       type: 'number',
-      inputProps: {} // These props are passed to the Carbon component used for inline editing
+      inputProps: {
+        invalidText: 'Invalid number, must be 10 or greater'
+      } // These props are passed to the Carbon component used for inline editing
     }
   }, {
     Header: 'Active since',

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -186,9 +186,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   // Removes the active cell element
   var removeActiveCell = (0, _react.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 = (0, _react.useCallback)(function () {
     setCellEditorValue('');

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

@@ -14,6 +14,7 @@ var _rangeWithCallback = require("../../../global/js/utils/rangeWithCallback");
  */
 
 var handleCellDeletion = function handleCellDeletion(_ref) {
+  var _selectionAreaToEmpty, _selectionAreaToEmpty2, _selectionAreaToEmpty3, _selectionAreaToEmpty4, _selectionAreaToEmpty5, _selectionAreaToEmpty6, _selectionAreaToEmpty7, _selectionAreaToEmpty8;
   var activeCellCoordinates = _ref.activeCellCoordinates,
     selectionAreas = _ref.selectionAreas,
     currentMatcher = _ref.currentMatcher,
@@ -31,10 +32,10 @@ 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);
   (0, _rangeWithCallback.rangeWithCallback)(lowestColumnIndex, greatestColumnIndex, function (columnIndex) {
     (0, _rangeWithCallback.rangeWithCallback)(lowestRowIndex, greatestRowIndex, function (rowIndex) {
       var cellProps = rows[rowIndex].cells[columnIndex];

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

@@ -51,7 +51,8 @@ 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;
@@ -91,7 +92,7 @@ var DatagridContent = function DatagridContent(_ref) {
       onFocus: withInlineEdit ? function () {
         return (0, _handleGridFocus.handleGridFocus)(state, dispatch);
       } : null
-    }), /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
+    }), !withVirtualScroll ? /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState) : null, /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
       rows: rows
     })));
   };
@@ -126,6 +127,9 @@ var DatagridContent = function DatagridContent(_ref) {
     className: "".concat(blockClass, "__datagridLeftPanel")
   }, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {
     ref: multiKeyTrackingRef
+  }, renderTable()) : withVirtualScroll ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__virtualScrollContainer"),
+    ref: gridRef
   }, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
     instance: datagridState
   }));
@@ -150,6 +154,7 @@ DatagridContent.propTypes = {
     page: _propTypes.default.arrayOf(_propTypes.default.object),
     rows: _propTypes.default.arrayOf(_propTypes.default.object),
     tableId: _propTypes.default.string,
-    totalColumnsWidth: _propTypes.default.number
+    totalColumnsWidth: _propTypes.default.number,
+    gridRef: _propTypes.default.object
   })
 };

package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -30,7 +30,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.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
     className: "".concat(blockClass, "__empty-state-body")
   }), /*#__PURE__*/_react.default.createElement(TableRow, null, /*#__PURE__*/_react.default.createElement(TableCell, {
@@ -39,12 +41,16 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
     illustrationTheme: illustrationTheme,
     size: emptyStateSize,
     title: emptyStateTitle,
-    subtitle: emptyStateDescription
+    subtitle: emptyStateDescription,
+    action: emptyStateAction,
+    link: emptyStateLink
   }), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, {
     illustrationTheme: illustrationTheme,
     size: emptyStateSize,
     title: emptyStateTitle,
-    subtitle: emptyStateDescription
+    subtitle: emptyStateDescription,
+    action: emptyStateAction,
+    link: emptyStateLink
   }))));
 };
 var _default = DatagridEmptyBody;

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,17 +8,13 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _carbonComponentsReact = require("carbon-components-react");
 var _layout = require("@carbon/layout");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _commonColumnIds = require("../common-column-ids");
 var _settings = require("../../../settings");
-var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext/InlineEditContext");
-var _getCellIdAsObject = require("./addons/InlineEdit/InlineEditContext/getCellIdAsObject");
 var _excluded = ["children"];
-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; }
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var TableRow = _carbonComponentsReact.DataTable.TableRow,
   TableCell = _carbonComponentsReact.DataTable.TableCell;
@@ -37,10 +32,6 @@ var DatagridRow = function DatagridRow(datagridState) {
   var row = datagridState.row,
     rowSize = datagridState.rowSize,
     withNestedRows = datagridState.withNestedRows;
-  var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
-    state = _useContext.state;
-  var activeCellId = state.activeCellId;
-  var activeCellObject = activeCellId && (0, _getCellIdAsObject.getCellIdAsObject)(activeCellId);
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -54,7 +45,7 @@ var DatagridRow = function DatagridRow(datagridState) {
     return size;
   };
   return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
-    className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
+    className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
   }, row.getRowProps(), {
     key: row.id,
     onMouseEnter: function onMouseEnter(event) {

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -12,6 +12,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactWindow = require("react-window");
 var _carbonComponentsReact = require("carbon-components-react");
 var _settings = require("../../../settings");
+var _DatagridHead = _interopRequireDefault(require("./DatagridHead"));
+var _layout = require("@carbon/layout");
 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; }
 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; }
@@ -32,6 +34,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,
@@ -45,7 +48,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 = (0, _layout.px)(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
+  };
+
   (0, _react.useEffect)(function () {
     handleResize();
   }, [handleResize]);
@@ -54,8 +64,16 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     listRef.current.resetAfterIndex(0);
   }
   var visibleRows = DatagridPagination && page || rows;
-  return /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
-    onScroll: onScroll
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.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.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
+    onScroll: function onScroll(e) {
+      return syncScroll(e);
+    }
   }), /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
     height: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
@@ -66,20 +84,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.default.createElement("div", {
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        overflow: withOverflowRow ? 'visible' : 'hidden'
-      })
+      style: _objectSpread({}, style)
     }, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
       row: row
     })));
-  }));
+  })));
 };
 var _default = DatagridVirtualBody;
 exports.default = _default;

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js

@@ -48,12 +48,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
     onApply = _ref$onApply === void 0 ? function () {} : _ref$onApply,
     _ref$onCancel = _ref.onCancel,
     onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
-    _ref$shouldClickOutsi = _ref.shouldClickOutsideToClose,
-    shouldClickOutsideToClose = _ref$shouldClickOutsi === void 0 ? false : _ref$shouldClickOutsi,
     _ref$secondaryActionL = _ref.secondaryActionLabel,
     secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
-    setAllFilters = _ref.setAllFilters,
-    setFilter = _ref.setFilter;
+    setAllFilters = _ref.setAllFilters;
   /** Context state and methods */
   var _useContext = (0, _react.useContext)(_FilterProvider.FilterContext),
     EventEmitter = _useContext.EventEmitter;
@@ -100,8 +97,11 @@ var FilterFlyout = function FilterFlyout(_ref) {
     prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
   };
   var cancel = function cancel() {
-    revertToPreviousFilters();
-    onCancel();
+    // Reverting to previous filters only applies when using batch actions
+    if (updateMethod === _constants.BATCH) {
+      revertToPreviousFilters();
+      onCancel();
+    }
     closeFlyout();
   };
   var reset = function reset() {
@@ -133,34 +133,32 @@ var FilterFlyout = function FilterFlyout(_ref) {
     if (type === _constants.DATE && !value[1]) {
       return;
     }
-    if (updateMethod === _constants.BATCH) {
-      var filtersObjectArrayCopy = (0, _toConsumableArray2.default)(filtersObjectArray);
-      // check if the filter already exists in the array
-      var filter = filtersObjectArrayCopy.find(function (item) {
-        return item.id === column;
+    var filtersObjectArrayCopy = (0, _toConsumableArray2.default)(filtersObjectArray);
+    // check if the filter already exists in the array
+    var filter = filtersObjectArrayCopy.find(function (item) {
+      return item.id === column;
+    });
+
+    // if filter exists in array then update the filter's new value
+    if (filter) {
+      filter.value = value;
+    } else {
+      filtersObjectArrayCopy.push({
+        id: column,
+        value: value,
+        type: type
       });
+    }
+    setFiltersObjectArray(filtersObjectArrayCopy);
 
-      // if filter exists in array then update the filter's new value
-      if (filter) {
-        filter.value = value;
-      } else {
-        filtersObjectArrayCopy.push({
-          id: column,
-          value: value,
-          type: type
-        });
-      }
-      setFiltersObjectArray(filtersObjectArrayCopy);
-    } else if (updateMethod === _constants.INSTANT) {
-      setFilter(column, value);
+    // Automatically apply the filters if the updateMethod is instant
+    if (updateMethod === _constants.INSTANT) {
+      setAllFilters(filtersObjectArrayCopy);
     }
-  }, [setFilter, updateMethod, filtersObjectArray]);
+  }, [setAllFilters, updateMethod, filtersObjectArray]);
 
   /** Effects */
   (0, _hooks.useClickOutside)(filterFlyoutRef, function (target) {
-    if (shouldClickOutsideToClose === false) {
-      return;
-    }
     var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
     if (!open || hasClickedOnDatePicker) {
       return;
@@ -361,14 +359,6 @@ FilterFlyout.propTypes = {
    * Function that sets all the filters, this comes from the datagridState
    */
   setAllFilters: _propTypes.default.func.isRequired,
-  /**
-   * Function that sets an individual filter, this comes from the datagridState
-   */
-  setFilter: _propTypes.default.func.isRequired,
-  /**
-   * Boolean if you want the flyout to close when clicked outside of the parent
-   */
-  shouldClickOutsideToClose: _propTypes.default.bool,
   /**
    * Title of the filter flyout
    */