@carbon/ibm-products 2.0.0-rc.10 → 2.0.0-rc.11

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -202,10 +202,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 
   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

@@ -7,6 +7,8 @@
 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,
@@ -26,10 +28,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/Datagrid.js

@@ -16,6 +16,7 @@ import { pkg } from '../../../settings';
 import pconsole from '../../../global/js/utils/pconsole';
 import { InlineEditProvider } from './addons/InlineEdit/InlineEditContext';
 import { DatagridContent } from './DatagridContent';
+import { FilterProvider } from './addons/Filtering/FilterProvider';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
 export var Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -32,9 +33,12 @@ export var Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       isFetching = datagridState.isFetching,
       tableId = datagridState.tableId,
       leftPanel = datagridState.leftPanel,
-      className = datagridState.className;
+      className = datagridState.className,
+      filters = datagridState.state.filters;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
-  return /*#__PURE__*/React.createElement(InlineEditProvider, null, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(FilterProvider, {
+    filters: filters
+  }, /*#__PURE__*/React.createElement(InlineEditProvider, null, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     id: tableId,
     ref: ref,
     className: cx(className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
@@ -44,7 +48,7 @@ export var Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     datagridState: datagridState
   })), leftPanel === undefined && /*#__PURE__*/React.createElement(DatagridContent, {
     datagridState: datagridState
-  })));
+  }))));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 Datagrid = pkg.checkComponentEnabled(Datagrid, componentName); // The display name of the component, used by React. Note that displayName

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

@@ -44,7 +44,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;
@@ -88,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
     })));
   };
@@ -126,6 +127,9 @@ export var DatagridContent = function DatagridContent(_ref) {
     className: "".concat(blockClass, "__datagridLeftPanel")
   }, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/React.createElement("div", {
     ref: multiKeyTrackingRef
+  }, 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), CustomizeColumnsModal && /*#__PURE__*/React.createElement(CustomizeColumnsModal, {
     instance: datagridState
   }));
@@ -149,6 +153,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

@@ -10,7 +10,7 @@ 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 { NoDataEmptyState, ErrorEmptyState } from '../../EmptyStates';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableBody = DataTable.TableBody,
     TableRow = DataTable.TableRow,
@@ -22,16 +22,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/DatagridRow.js

@@ -11,14 +11,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/react';
 import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids';
 import cx from 'classnames';
 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;
@@ -37,12 +35,6 @@ var DatagridRow = function DatagridRow(datagridState) {
       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;
@@ -59,7 +51,7 @@ var DatagridRow = function DatagridRow(datagridState) {
   };
 
   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/DatagridToolbar.js

@@ -7,13 +7,16 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * 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, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { Add, OverflowMenuVertical } from '@carbon/react/icons';
 import { DataTable, 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';
+import { FilterSummary } from '../../FilterSummary';
+import { FilterContext } from './addons/Filtering/FilterProvider';
+import { CLEAR_FILTERS } from './addons/Filtering/constants';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableToolbar = DataTable.TableToolbar;
 
@@ -141,13 +144,28 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
 
   var DatagridActions = datagridState.DatagridActions,
       DatagridBatchActions = datagridState.DatagridBatchActions,
-      batchActions = datagridState.batchActions;
+      batchActions = datagridState.batchActions,
+      state = datagridState.state;
+
+  var _useContext = useContext(FilterContext),
+      filterTags = _useContext.filterTags,
+      EventEmitter = _useContext.EventEmitter;
+
+  var renderFilterSummary = function renderFilterSummary() {
+    return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary, {
+      filters: filterTags,
+      clearFilters: function clearFilters() {
+        return EventEmitter.dispatch(CLEAR_FILTERS);
+      }
+    });
+  };
+
   return batchActions && DatagridActions ? /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref)), renderFilterSummary()) : DatagridActions ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)), renderFilterSummary()) : null;
 };
 
 export default DatagridToolbar;

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

@@ -16,6 +16,8 @@ import React, { useEffect } from 'react';
 import { VariableSizeList } from 'react-window';
 import { DataTable } 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 = {
@@ -33,6 +35,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,
@@ -46,7 +50,15 @@ 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]);
@@ -57,8 +69,16 @@ 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: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
@@ -69,20 +89,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;