@carbon/ibm-products 1.15.0 → 1.16.0

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -3,7 +3,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange"];
+var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "totalVisibleColumns"];
 
 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; }
 
@@ -75,6 +75,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
       _ref$onSelectionAreaC = _ref.onSelectionAreaChange,
       onSelectionAreaChange = _ref$onSelectionAreaC === void 0 ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
+      totalVisibleColumns = _ref.totalVisibleColumns,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var multiKeyTrackingRef = useRef();
@@ -767,6 +768,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     setSelectionAreas: setSelectionAreas,
     setCurrentMatcher: setCurrentMatcher,
     setSelectionAreaData: setSelectionAreaData,
+    totalVisibleColumns: totalVisibleColumns,
     updateActiveCellCoordinates: updateActiveCellCoordinates
   }), /*#__PURE__*/React.createElement(DataSpreadsheetBody, {
     activeCellCoordinates: activeCellCoordinates,
@@ -795,7 +797,8 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     id: id,
     columns: columns,
     defaultEmptyRowCount: defaultEmptyRowCount,
-    setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea
+    setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea,
+    totalVisibleColumns: totalVisibleColumns
   }), /*#__PURE__*/React.createElement("button", {
     onMouseDown: handleActiveCellMouseDown,
     onClick: handleActiveCellClick,
@@ -891,7 +894,13 @@ DataSpreadsheet.propTypes = {
   /**
    * The event handler that is called when the selection area values change
    */
-  onSelectionAreaChange: PropTypes.func
+  onSelectionAreaChange: PropTypes.func,
+
+  /**
+   * The total number of columns to be initially visible, additional columns will be rendered and
+   * visible via horizontal scrollbar
+   */
+  totalVisibleColumns: PropTypes.number
   /* TODO: add types and DocGen for all props. */
 
 };

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -25,6 +25,7 @@ import { removeCellSelections } from './utils/removeCellSelections';
 import { createCellSelectionArea } from './utils/createCellSelectionArea';
 import { checkActiveHeaderCell } from './utils/checkActiveHeaderCell';
 import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection';
+import { getSpreadsheetWidth } from './utils/getSpreadsheetWidth';
 var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
 export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var columns = _ref.columns,
@@ -50,7 +51,9 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       currentMatcher = _ref.currentMatcher,
       setCurrentMatcher = _ref.setCurrentMatcher,
       onSelectionAreaChange = _ref.onSelectionAreaChange,
-      setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea;
+      setActiveCellInsideSelectionArea = _ref.setActiveCellInsideSelectionArea,
+      totalVisibleColumns = _ref.totalVisibleColumns;
+  var contentScrollRef = useRef();
   var previousState = usePreviousValue({
     selectionAreaData: selectionAreaData,
     clickAndHoldActive: clickAndHoldActive
@@ -247,6 +250,21 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     };
   }, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea]);
+
+  var handleBodyScroll = function handleBodyScroll() {
+    var headerRowElement = ref.current.querySelector("\n        .".concat(blockClass, "__header--container .").concat(blockClass, "__tr"));
+    headerRowElement.scrollLeft = contentScrollRef.current.scrollLeft;
+  };
+
+  useEffect(function () {
+    contentScrollRef.current.addEventListener('scroll', function (event) {
+      return handleBodyScroll(event);
+    });
+    var contentScrollElementRef = contentScrollRef.current;
+    return function () {
+      contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
+    };
+  });
   var handleBodyCellHover = useCallback(function (cell, columnIndex) {
     return function () {
       if (clickAndHoldActive) {
@@ -339,7 +357,8 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         "data-row-index": index,
         "aria-rowindex": index + 1
       }), /*#__PURE__*/React.createElement("div", {
-        role: "rowheader"
+        role: "rowheader",
+        className: "".concat(blockClass, "__td-th--cell-container")
       }, /*#__PURE__*/React.createElement("button", {
         id: "".concat(blockClass, "__cell--").concat(index, "--header"),
         tabIndex: -1,
@@ -349,7 +368,7 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         onClick: handleRowHeaderClick(index),
         className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row'))),
         style: {
-          width: (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth) - 4
+          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
         }
       }, index + 1)), row.cells.map(function (cell, index) {
         return /*#__PURE__*/React.createElement("div", _extends({
@@ -358,7 +377,8 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }, cell.getCellProps(), {
           role: "gridcell",
           style: _objectSpread(_objectSpread({}, cell.getCellProps().style), {}, {
-            display: 'grid'
+            display: 'grid',
+            minWidth: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width
           })
         }), /*#__PURE__*/React.createElement("button", {
           id: "".concat(blockClass, "__cell--").concat(cell.row.index, "--").concat(index),
@@ -373,7 +393,7 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }, cell.render('Cell')));
       }));
     }
-  }, [prepareRow, rows, defaultColumn.rowHeaderWidth, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover]);
+  }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover, defaultColumn]);
   var spreadsheetBodyRef = useRef();
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: spreadsheetBodyRef,
@@ -383,7 +403,13 @@ export var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     height: 400,
     itemCount: rows.length || defaultEmptyRowCount,
     itemSize: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
-    width: totalColumnsWidth + scrollBarSize
+    width: getSpreadsheetWidth({
+      scrollBarSizeValue: scrollBarSize,
+      totalVisibleColumns: totalVisibleColumns,
+      defaultColumn: defaultColumn,
+      totalColumnsWidth: totalColumnsWidth
+    }),
+    outerRef: contentScrollRef
   }, rows !== null && rows !== void 0 && rows.length ? RenderRow : RenderEmptyRows));
 });
 DataSpreadsheetBody.propTypes = {
@@ -517,5 +543,11 @@ DataSpreadsheetBody.propTypes = {
   /**
    * The total columns width
    */
-  totalColumnsWidth: PropTypes.number
+  totalColumnsWidth: PropTypes.number,
+
+  /**
+   * The total number of columns to be initially visible, additional columns will be rendered and
+   * visible via horizontal scrollbar
+   */
+  totalVisibleColumns: PropTypes.number
 };

package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -15,12 +15,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { px } from '@carbon/layout';
 import { pkg } from '../../settings';
 import { usePreviousValue } from '../../global/js/hooks';
 import { checkActiveHeaderCell } from './utils/checkActiveHeaderCell';
 import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection';
 import { selectAllCells } from './utils/selectAllCells';
+import { getSpreadsheetWidth } from './utils/getSpreadsheetWidth';
 var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
 export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var activeCellCoordinates = _ref.activeCellCoordinates,
@@ -35,6 +35,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
       setSelectionAreas = _ref.setSelectionAreas,
       setSelectionAreaData = _ref.setSelectionAreaData,
       rows = _ref.rows,
+      totalVisibleColumns = _ref.totalVisibleColumns,
       updateActiveCellCoordinates = _ref.updateActiveCellCoordinates;
 
   var _useState = useState(0),
@@ -95,13 +96,21 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
       key: "header_".concat(index)
     }, headerGroup.getHeaderGroupProps(), {
       style: _objectSpread(_objectSpread({}, headerGroup.getHeaderGroupProps().style), {}, {
-        width: px(parseInt(headerGroup.getHeaderGroupProps().style.width) + scrollBarSizeValue)
+        width: getSpreadsheetWidth({
+          type: 'header',
+          headerGroup: headerGroup,
+          scrollBarSizeValue: scrollBarSizeValue,
+          totalVisibleColumns: totalVisibleColumns,
+          defaultColumn: defaultColumn
+        }),
+        overflow: 'hidden'
       }),
       className: "".concat(blockClass, "__tr")
     }), /*#__PURE__*/React.createElement("div", {
       role: "columnheader",
+      className: "".concat(blockClass, "__select-all-cell-container"),
       style: {
-        width: (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth) - 4,
+        width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
         height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
       }
     }, /*#__PURE__*/React.createElement("button", {
@@ -124,7 +133,8 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
         tabIndex: -1,
         onClick: handleColumnHeaderClick(index),
         style: {
-          height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
+          height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
+          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width
         },
         className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell(index, selectionAreas, 'column'))),
         type: "button"
@@ -200,6 +210,12 @@ DataSpreadsheetHeader.propTypes = {
    */
   setSelectionAreas: PropTypes.func,
 
+  /**
+   * The total number of columns to be initially visible, additional columns will be rendered and
+   * visible via horizontal scrollbar
+   */
+  totalVisibleColumns: PropTypes.number,
+
   /**
    * Function used to update the active cell coordinates
    */

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

@@ -24,28 +24,36 @@ var range = function range(len) {
   return arr;
 };
 
-var newPet = function newPet() {
-  return {
+var newPet = function newPet(extraColumns) {
+  var extraDataProps = extraColumns && {
+    ownerName: petNames[Math.floor(Math.random() * petNames.length)],
+    weight: Math.floor(Math.random() * 40)
+  };
+  var defaultPet = {
     petType: pets[Math.floor(Math.random() * pets.length)],
     firstName: petNames[Math.floor(Math.random() * petNames.length)],
     age: Math.floor(Math.random() * 30),
     visits: Math.floor(Math.random() * 40),
     health: Math.floor(Math.random() * 100)
   };
-};
 
-export var generateData = function generateData() {
-  for (var _len = arguments.length, lens = new Array(_len), _key = 0; _key < _len; _key++) {
-    lens[_key] = arguments[_key];
+  if (extraColumns) {
+    return _objectSpread(_objectSpread({}, defaultPet), extraDataProps);
   }
 
+  return defaultPet;
+};
+
+export var generateData = function generateData(_ref) {
+  var rows = _ref.rows,
+      extraColumns = _ref.extraColumns;
+
   var makeDataLevel = function makeDataLevel() {
     var depth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var lens = [rows];
     var len = lens[depth];
     return range(len).map(function () {
-      return _objectSpread(_objectSpread({}, newPet()), {}, {
-        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined
-      });
+      return _objectSpread({}, newPet(extraColumns));
     });
   };
 

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

@@ -0,0 +1,30 @@
+/**
+ * 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 { px } from '@carbon/layout';
+export var getSpreadsheetWidth = function getSpreadsheetWidth(_ref) {
+  var type = _ref.type,
+      headerGroup = _ref.headerGroup,
+      scrollBarSizeValue = _ref.scrollBarSizeValue,
+      totalVisibleColumns = _ref.totalVisibleColumns,
+      defaultColumn = _ref.defaultColumn,
+      totalColumnsWidth = _ref.totalColumnsWidth;
+  var additionalWidth = scrollBarSizeValue + defaultColumn.rowHeaderWidth;
+
+  if (!totalVisibleColumns) {
+    if (type === 'header') {
+      return px(parseInt(headerGroup.getHeaderGroupProps().style.width) + additionalWidth);
+    }
+
+    if (type !== 'header') {
+      return totalColumnsWidth + additionalWidth;
+    }
+  }
+
+  if (totalVisibleColumns) {
+    return totalVisibleColumns * (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width) + additionalWidth;
+  }
+};

package/es/components/Datagrid/Datagrid/DatagridRow.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 = ["children"];
 
 /*
@@ -13,6 +14,7 @@ var _excluded = ["children"];
 import React from 'react';
 import { DataTable, SkeletonText } from 'carbon-components-react';
 import { selectionColumnId } from '../common-column-ids';
+import cx from 'classnames';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableRow = DataTable.TableRow,
@@ -21,9 +23,17 @@ var TableRow = DataTable.TableRow,
 var DatagridRow = function DatagridRow(datagridState) {
   var row = datagridState.row;
   return /*#__PURE__*/React.createElement(TableRow, _extends({
-    className: "".concat(blockClass, "__carbon-row")
+    className: cx("".concat(blockClass, "__carbon-row"), _defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded))
   }, row.getRowProps(), {
-    key: row.id
+    key: row.id,
+    onMouseEnter: function onMouseEnter(event) {
+      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"));
+    },
+    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) {
     var cellProps = cell.getCellProps();
 

package/es/components/Datagrid/useNestedRows.js

@@ -11,7 +11,7 @@ var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var useNestedRows = function useNestedRows(hooks) {
   useRowExpander(hooks);
-  var marginLeft = 32;
+  var marginLeft = 24;
 
   var getRowProps = function getRowProps(props, _ref) {
     var row = _ref.row;
@@ -25,7 +25,7 @@ var useNestedRows = function useNestedRows(hooks) {
     return [props, {
       style: {
         marginLeft: "".concat(row.depth > 0 ? marginLeft : 0, "px"),
-        paddingLeft: "".concat(row.depth > 1 ? marginLeft * (row.depth - 1) : 0, "px"),
+        paddingLeft: "".concat(row.depth > 1 ? marginLeft * (row.depth - 1) + marginLeft : row.depth === 1 ? marginLeft : 0, "px"),
         maxWidth: "calc(100% - ".concat(marginLeft * row.depth, "px)")
       }
     }];
@@ -40,7 +40,7 @@ var useNestedRows = function useNestedRows(hooks) {
     }) === 0;
     return [props, {
       style: {
-        marginRight: isFirstCell ? "-".concat(marginLeft * cell.row.depth, "px") : ''
+        marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "-".concat(marginLeft * (cell.row.depth + 1), "px") : '')
       }
     }];
   };

package/es/components/Datagrid/useRowExpander.js

@@ -20,7 +20,7 @@ var useRowExpander = function useRowExpander(hooks) {
         var row = _ref.row;
         return row.canExpand && /*#__PURE__*/React.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/React.createElement(ChevronUp16, null) : /*#__PURE__*/React.createElement(ChevronDown16, null));
       },
-      width: 32,
+      width: 48,
       disableResizing: true,
       disableSortBy: true,
       Header: ''

package/lib/components/AddSelect/AddSelect.js

@@ -43,7 +43,7 @@ var _addSelectUtils = require("./add-select-utils");
 
 var _AddSelectFilter = require("./AddSelectFilter");
 
-var _excluded = ["className", "columnInputPlaceholder", "description", "globalFilters", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "influencerTitle", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "removeIconDescription", "searchResultsLabel", "title"];
+var _excluded = ["className", "clearFiltersText", "columnInputPlaceholder", "description", "globalFilters", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "influencerTitle", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "removeIconDescription", "searchResultsLabel", "title"];
 
 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); }
 
@@ -54,6 +54,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _cx;
 
   var className = _ref.className,
+      clearFiltersText = _ref.clearFiltersText,
       columnInputPlaceholder = _ref.columnInputPlaceholder,
       description = _ref.description,
       globalFilters = _ref.globalFilters,
@@ -263,7 +264,9 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onSubmit(multi ? multiSelection : singleSelection);
   };
 
+  var classNames = (0, _classnames.default)(className, blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__single"), !multi), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__multi"), multi), _cx));
   var commonTearsheetProps = {
+    className: classNames,
     open: open,
     title: title,
     description: description,
@@ -289,7 +292,6 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     removeIconDescription: removeIconDescription,
     setMultiSelection: setMultiSelection
   };
-  var classNames = (0, _classnames.default)(className, blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__single"), !multi), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__multi"), multi), _cx));
 
   var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
     if (searchTerm) {
@@ -332,7 +334,10 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     primaryButtonText: globalFiltersPrimaryButtonText,
     secondaryButtonText: globalFiltersSecondaryButtonText,
     placeholder: globalFiltersPlaceholderText,
-    iconDescription: globalFiltersIconDescription
+    iconDescription: globalFiltersIconDescription,
+    appliedFilters: appliedGlobalFilters,
+    hasFiltersApplied: globalFiltersApplied,
+    clearFiltersText: clearFiltersText
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__tag-container")
   }, showBreadsCrumbs ? /*#__PURE__*/_react.default.createElement(_AddSelectBreadcrumbs.AddSelectBreadcrumbs, {
@@ -366,8 +371,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }))));
 
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    ref: ref,
-    className: classNames
+    ref: ref
   }, rest), multi ? /*#__PURE__*/_react.default.createElement(_Tearsheet.Tearsheet, (0, _extends2.default)({}, commonTearsheetProps, {
     influencer: multi && /*#__PURE__*/_react.default.createElement(_AddSelectSidebar.AddSelectSidebar, sidebarProps),
     influencerPosition: "right"
@@ -376,6 +380,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 exports.AddSelect = AddSelect;
 AddSelect.propTypes = {
   className: _propTypes.default.string,
+  clearFiltersText: _propTypes.default.string,
   columnInputPlaceholder: _propTypes.default.string,
   description: _propTypes.default.string,
   globalFilters: _propTypes.default.arrayOf(_propTypes.default.shape({

package/lib/components/AddSelect/AddSelectFilter.js

@@ -34,9 +34,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var componentName = 'AddSelectFilter';
 
 var AddSelectFilter = function AddSelectFilter(_ref) {
-  var filterOpts = _ref.filterOpts,
+  var appliedFilters = _ref.appliedFilters,
+      clearFiltersText = _ref.clearFiltersText,
+      filterOpts = _ref.filterOpts,
       handleFilter = _ref.handleFilter,
       handleSearch = _ref.handleSearch,
+      hasFiltersApplied = _ref.hasFiltersApplied,
       iconDescription = _ref.iconDescription,
       inputLabel = _ref.inputLabel,
       inputPlaceholder = _ref.inputPlaceholder,
@@ -66,6 +69,14 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
     var selectedItem = _ref2.selectedItem;
     setFilters(_objectSpread(_objectSpread({}, filters), {}, (0, _defineProperty2.default)({}, id, selectedItem)));
   };
+  /**
+   * this component needs to manage it's own internal state of filters before they're applied
+   * setFilters manages the local filter state
+   * applyFilters adds the filter state to the parent
+   * resetFilters resets the local state
+   * clearFilters resets both
+   */
+
 
   var applyFilters = function applyFilters() {
     handleFilter(filters);
@@ -75,12 +86,25 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
     setFilters({});
   };
 
+  var clearFilters = function clearFilters() {
+    resetFilters();
+    handleFilter({});
+  };
+
+  var removeTag = function removeTag(key) {
+    var newFilters = _objectSpread({}, filters);
+
+    delete newFilters[key];
+    setFilters(newFilters);
+    handleFilter(newFilters);
+  };
+
   var getSelectedItem = function getSelectedItem(id) {
     return filters[id] || '';
   };
 
   var showFilter = multi && (filterOpts === null || filterOpts === void 0 ? void 0 : filterOpts.length) > 0;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-search")
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
     id: "temp-id",
@@ -127,14 +151,33 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
     kind: "primary",
     onClick: applyFilters,
     className: "".concat(blockClass, "-button")
-  }, primaryButtonText))));
+  }, primaryButtonText)))), hasFiltersApplied && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "-applied")
+  }, Object.keys(appliedFilters).map(function (filterType) {
+    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
+      key: filterType,
+      type: "gray",
+      size: "sm",
+      onClose: function onClose() {
+        return removeTag(filterType);
+      },
+      filter: true
+    }, "".concat(filterType, ": ").concat(appliedFilters[filterType]));
+  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "ghost",
+    size: "sm",
+    onClick: clearFilters
+  }, clearFiltersText)));
 };
 
 exports.AddSelectFilter = AddSelectFilter;
 AddSelectFilter.propTypes = {
+  appliedFilters: _propTypes.default.object,
+  clearFiltersText: _propTypes.default.string,
   filterOpts: _propTypes.default.array,
   handleFilter: _propTypes.default.func,
   handleSearch: _propTypes.default.func,
+  hasFiltersApplied: _propTypes.default.bool,
   iconDescription: _propTypes.default.string,
   inputLabel: _propTypes.default.string,
   inputPlaceholder: _propTypes.default.string,

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -65,7 +65,7 @@ var _handleActiveCellInSelectionEnter = require("./utils/handleActiveCellInSelec
 
 var _handleActiveCellInSelectionTab = require("./utils/handleActiveCellInSelectionTab");
 
-var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange"];
+var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "totalVisibleColumns"];
 
 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); }
 
@@ -110,6 +110,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
       _ref$onSelectionAreaC = _ref.onSelectionAreaChange,
       onSelectionAreaChange = _ref$onSelectionAreaC === void 0 ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
+      totalVisibleColumns = _ref.totalVisibleColumns,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var multiKeyTrackingRef = (0, _react.useRef)();
   var localRef = (0, _react.useRef)();
@@ -801,6 +802,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     setSelectionAreas: setSelectionAreas,
     setCurrentMatcher: setCurrentMatcher,
     setSelectionAreaData: setSelectionAreaData,
+    totalVisibleColumns: totalVisibleColumns,
     updateActiveCellCoordinates: updateActiveCellCoordinates
   }), /*#__PURE__*/_react.default.createElement(_DataSpreadsheetBody.DataSpreadsheetBody, {
     activeCellCoordinates: activeCellCoordinates,
@@ -829,7 +831,8 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     id: id,
     columns: columns,
     defaultEmptyRowCount: defaultEmptyRowCount,
-    setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea
+    setActiveCellInsideSelectionArea: setActiveCellInsideSelectionArea,
+    totalVisibleColumns: totalVisibleColumns
   }), /*#__PURE__*/_react.default.createElement("button", {
     onMouseDown: handleActiveCellMouseDown,
     onClick: handleActiveCellClick,
@@ -927,7 +930,13 @@ DataSpreadsheet.propTypes = {
   /**
    * The event handler that is called when the selection area values change
    */
-  onSelectionAreaChange: _propTypes.default.func
+  onSelectionAreaChange: _propTypes.default.func,
+
+  /**
+   * The total number of columns to be initially visible, additional columns will be rendered and
+   * visible via horizontal scrollbar
+   */
+  totalVisibleColumns: _propTypes.default.number
   /* TODO: add types and DocGen for all props. */
 
 };