@carbon/ibm-products 1.42.1 → 1.44.0

package/es/components/Datagrid/useFiltering.js

@@ -12,6 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import { useMemo } from 'react';
 import { FilterFlyout } from './Datagrid/addons/Filtering';
+import { BATCH } from './Datagrid/addons/Filtering/constants';
 var useFiltering = function useFiltering(hooks) {
   var filterTypes = useMemo(function () {
     return {
@@ -62,14 +63,20 @@ var useFiltering = function useFiltering(hooks) {
   hooks.useInstance.push(function (instance) {
     var filterProps = instance.filterProps,
       setAllFilters = instance.setAllFilters,
-      headers = instance.headers;
+      setFilter = instance.setFilter,
+      headers = instance.headers,
+      data = instance.data;
     var defaultProps = {
-      variation: 'flyout'
+      variation: 'flyout',
+      updateMethod: BATCH,
+      panelIconDescription: 'Open filter panel'
     };
     var getFilterFlyoutProps = function getFilterFlyoutProps() {
       return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
         setAllFilters: setAllFilters,
-        headers: headers
+        setFilter: setFilter,
+        headers: headers,
+        data: data
       });
     };
     Object.assign(instance, {

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

@@ -6,14 +6,17 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useLayoutEffect, useMemo, useState } from 'react';
+import React, { useLayoutEffect, useMemo, useContext, useState } from 'react';
 import { Button, DataTable, OverflowMenu, OverflowMenuItem, ComposedModal, ModalBody, ModalFooter, ModalHeader, Dropdown } from 'carbon-components-react';
-import { Add16, ChevronDown16, Download16, Restart16 } from '@carbon/icons-react';
+import { Add16, ChevronDown16, Download16, Filter16, Restart16 } from '@carbon/icons-react';
 import { action } from '@storybook/addon-actions';
 import { pkg } from '../../../settings';
 import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
+import { FilterContext } from '../Datagrid/addons/Filtering';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var DatagridActions = function DatagridActions(datagridState) {
+  var _useContext = useContext(FilterContext),
+    setLeftPanelOpen = _useContext.setLeftPanelOpen;
   var selectedFlatRows = datagridState.selectedFlatRows,
     setGlobalFilter = datagridState.setGlobalFilter,
     CustomizeColumnsButton = datagridState.CustomizeColumnsButton,
@@ -22,6 +25,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
     useDenseHeader = datagridState.useDenseHeader,
     filterProps = datagridState.filterProps,
     getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
+    data = datagridState.data,
     FilterFlyout = datagridState.FilterFlyout;
   var downloadCsv = function downloadCsv() {
     alert('Downloading...');
@@ -45,6 +49,23 @@ export var DatagridActions = function DatagridActions(datagridState) {
   var renderFilterFlyout = function renderFilterFlyout() {
     return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/React.createElement(FilterFlyout, getFilterFlyoutProps());
   };
+  var renderFilterPanelButton = function renderFilterPanelButton() {
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      hasIconOnly: true,
+      tooltipPosition: "bottom",
+      renderIcon: Filter16,
+      iconDescription: filterProps.panelIconDescription,
+      className: "".concat(blockClass, "-filter-panel-open-button"),
+      onClick: function onClick() {
+        return setLeftPanelOpen(function (open) {
+          return !open;
+        });
+      },
+      disabled: data.length === 0,
+      tooltipAlignment: "start"
+    });
+  };
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     modalOpen = _useState2[0],
@@ -66,7 +87,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
   var items = ['Option 1', 'Option 2', 'Option 3'];
   return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/React.createElement(TableToolbarContent, {
     size: "sm"
-  }, !mobileToolbar ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, !mobileToolbar ? /*#__PURE__*/React.createElement(React.Fragment, null, renderFilterPanelButton(), /*#__PURE__*/React.createElement("div", {
     style: style
   }, /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
@@ -111,7 +132,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
     itemText: "Create",
     hasDivider: true,
     requireTitle: true
-  }))) : !mobileToolbar ? /*#__PURE__*/React.createElement(TableToolbarContent, null, /*#__PURE__*/React.createElement(TableToolbarSearch, {
+  }))) : !mobileToolbar ? /*#__PURE__*/React.createElement(TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/React.createElement(TableToolbarSearch, {
     size: "xl",
     id: "columnSearch",
     persistent: true,
@@ -153,7 +174,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
   }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
     itemText: "Option 3",
     onClick: action("Click on ButtonMenu Option 3")
-  }))) : /*#__PURE__*/React.createElement(TableToolbarContent, null, /*#__PURE__*/React.createElement(TableToolbarSearch, {
+  }))) : /*#__PURE__*/React.createElement(TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/React.createElement(TableToolbarSearch, {
     size: "xl",
     id: "columnSearch",
     persistent: true,
@@ -161,7 +182,39 @@ export var DatagridActions = function DatagridActions(datagridState) {
     onChange: function onChange(e) {
       return setGlobalFilter(e.target.value);
     }
-  }), /*#__PURE__*/React.createElement(OverflowMenu, {
+  }), renderFilterFlyout(), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: Restart16,
+    iconDescription: 'Refresh',
+    onClick: refreshColumns
+  })), /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: Download16,
+    iconDescription: 'Download CSV',
+    onClick: downloadCsv
+  })), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(ButtonMenu, {
+    label: "Primary button",
+    renderIcon: Add16
+  }, /*#__PURE__*/React.createElement(ButtonMenuItem, {
+    itemText: "Option 1",
+    onClick: action("Click on ButtonMenu Option 1")
+  }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
+    itemText: "Option 2",
+    onClick: action("Click on ButtonMenu Option 2")
+  }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
+    itemText: "Option 3",
+    onClick: action("Click on ButtonMenu Option 3")
+  })), /*#__PURE__*/React.createElement(OverflowMenu, {
     ariaLabel: "Tools",
     size: "lg",
     flipped: true,

package/lib/components/AddSelect/AddSelect.js

@@ -69,7 +69,7 @@ AddSelect.propTypes = {
       options: _propTypes.default.array
     }),
     sortBy: _propTypes.default.array,
-    filterBy: _propTypes.default.array,
+    filterBy: _propTypes.default.string,
     entries: _propTypes.default.arrayOf(_propTypes.default.shape({
       avatar: _propTypes.default.shape({
         alt: _propTypes.default.string,

package/lib/components/AddSelect/AddSelectBody.js

@@ -321,7 +321,7 @@ AddSelectBody.propTypes = {
       options: _propTypes.default.array
     }),
     sortBy: _propTypes.default.array,
-    filterBy: _propTypes.default.array,
+    filterBy: _propTypes.default.string,
     entries: _propTypes.default.arrayOf(_propTypes.default.shape({
       avatar: _propTypes.default.shape({
         alt: _propTypes.default.string,

package/lib/components/AddSelect/AddSelectColumn.js

@@ -127,7 +127,6 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     if (filters.length === 0) {
       return true;
     }
-    var filterBy = item.filterBy;
     var filterByValue = item[filterBy];
     return filters.some(function (filter) {
       return filter === filterByValue;
@@ -177,6 +176,7 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(_settings.carbon.prefix, "--overflow-menu-options__btn")
     }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
+      className: "".concat(colClass, "-filter-checkbox"),
       id: opt,
       labelText: opt,
       onChange: function onChange(checked) {

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

@@ -30,7 +30,7 @@ var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     DatagridPagination = datagridState.DatagridPagination,
     isFetching = datagridState.isFetching,
     tableId = datagridState.tableId,
-    leftPanel = datagridState.leftPanel,
+    filterProps = datagridState.filterProps,
     className = datagridState.className,
     filters = datagridState.state.filters;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
@@ -40,11 +40,11 @@ var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     id: tableId,
     ref: ref,
     className: (0, _classnames.default)(className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
-  }, (0, _devtools.getDevtoolsProps)(componentName)), leftPanel && /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _devtools.getDevtoolsProps)(componentName)), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__datagridWithPanel ").concat(blockClass, "__displayFlex ").concat(blockClass, "__leftPanel-position")
   }, /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
     datagridState: datagridState
-  })), leftPanel === undefined && /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
+  })) : /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
     datagridState: datagridState
   }))));
 });

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

@@ -22,6 +22,10 @@ var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext");
 var _handleGridFocus = require("./addons/InlineEdit/handleGridFocus");
 var _hooks = require("../../../global/js/hooks");
 var _hooks2 = require("../../DataSpreadsheet/hooks");
+var _FilterPanel = _interopRequireDefault(require("./addons/Filtering/FilterPanel"));
+var _FilterSummary = require("../../FilterSummary");
+var _Filtering = require("./addons/Filtering");
+var _constants = require("./addons/Filtering/constants");
 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; }
 /**
@@ -38,16 +42,23 @@ var DatagridContent = function DatagridContent(_ref) {
   var _cx4;
   var datagridState = _ref.datagridState;
   var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
-    state = _useContext.state,
+    inlineEditState = _useContext.state,
     dispatch = _useContext.dispatch;
-  var activeCellId = state.activeCellId;
+  var _useContext2 = (0, _react.useContext)(_Filtering.FilterContext),
+    filterTags = _useContext2.filterTags,
+    EventEmitter = _useContext2.EventEmitter,
+    leftPanelOpen = _useContext2.leftPanelOpen;
+  var activeCellId = inlineEditState.activeCellId,
+    gridActive = inlineEditState.gridActive,
+    editId = inlineEditState.editId;
   var _datagridState$getTab = datagridState.getTableProps,
     getTableProps = _datagridState$getTab === void 0 ? function () {} : _datagridState$getTab,
+    getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
     withVirtualScroll = datagridState.withVirtualScroll,
     DatagridPagination = datagridState.DatagridPagination,
     isFetching = datagridState.isFetching,
     CustomizeColumnsTearsheet = datagridState.CustomizeColumnsTearsheet,
-    leftPanel = datagridState.leftPanel,
+    filterProps = datagridState.filterProps,
     fullHeightDatagrid = datagridState.fullHeightDatagrid,
     _datagridState$vertic = datagridState.verticalAlign,
     verticalAlign = _datagridState$vertic === void 0 ? 'center' : _datagridState$vertic,
@@ -59,10 +70,9 @@ var DatagridContent = function DatagridContent(_ref) {
     tableId = datagridState.tableId,
     DatagridActions = datagridState.DatagridActions,
     totalColumnsWidth = datagridState.totalColumnsWidth,
-    gridRef = datagridState.gridRef;
+    gridRef = datagridState.gridRef,
+    state = datagridState.state;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
-  var gridActive = state.gridActive,
-    editId = state.editId;
   var gridAreaRef = (0, _react.useRef)();
   var multiKeyTrackingRef = (0, _react.useRef)();
   (0, _hooks.useClickOutside)(gridAreaRef, function (target) {
@@ -90,14 +100,14 @@ var DatagridContent = function DatagridContent(_ref) {
         return (0, _handleGridKeyPress.handleGridKeyPress)({
           event: event,
           dispatch: dispatch,
-          state: state,
+          inlineEditState: inlineEditState,
           instance: datagridState,
           keysPressedList: keysPressedList,
           usingMac: usingMac
         });
       } : null,
       onFocus: withInlineEdit ? function () {
-        return (0, _handleGridFocus.handleGridFocus)(state, dispatch);
+        return (0, _handleGridFocus.handleGridFocus)(inlineEditState, dispatch);
       } : null
     }), !withVirtualScroll ? /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState) : null, /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
       rows: rows
@@ -123,21 +133,35 @@ var DatagridContent = function DatagridContent(_ref) {
       gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), (0, _layout.px)((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
+  var renderFilterSummary = function renderFilterSummary() {
+    return state.filters.length > 0 && /*#__PURE__*/_react.default.createElement(_FilterSummary.FilterSummary, {
+      className: "".concat(blockClass, "__filter-summary"),
+      filters: filterTags,
+      clearFilters: function clearFilters() {
+        return EventEmitter.dispatch(_constants.CLEAR_FILTERS);
+      }
+    });
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TableContainer, {
     className: (0, _classnames.default)("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
     title: gridTitle,
     description: gridDescription
   }, /*#__PURE__*/_react.default.createElement(_DatagridToolbar.default, datagridState), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__table-container"),
+    className: (0, _classnames.default)("".concat(blockClass, "__table-container"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-container--filter-open"), leftPanelOpen)),
     ref: gridAreaRef
-  }, leftPanel && leftPanel.isOpen && /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__datagridLeftPanel")
-  }, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {
+  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react.default.createElement(_FilterPanel.default, (0, _extends2.default)({
+    updateMethod: "batch"
+  }, getFilterFlyoutProps(), {
+    title: filterProps.panelTitle,
+    filterSections: filterProps.sections
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__table-container-inner")
+  }, renderFilterSummary(), 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), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
+  }, renderTable()) : renderTable()))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
     instance: datagridState
   }));
 };
@@ -145,13 +169,14 @@ exports.DatagridContent = DatagridContent;
 DatagridContent.propTypes = {
   datagridState: _propTypes.default.shape({
     getTableProps: _propTypes.default.func,
+    getFilterFlyoutProps: _propTypes.default.func,
     withVirtualScroll: _propTypes.default.bool,
     DatagridActions: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
     DatagridPagination: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
     CustomizeColumnsTearsheet: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
     isFetching: _propTypes.default.bool,
-    leftPanel: _propTypes.default.object,
     fullHeightDatagrid: _propTypes.default.bool,
+    filterProps: _propTypes.default.object,
     variableRowHeight: _propTypes.default.bool,
     useDenseHeader: _propTypes.default.bool,
     withInlineEdit: _propTypes.default.bool,
@@ -162,6 +187,9 @@ DatagridContent.propTypes = {
     rows: _propTypes.default.arrayOf(_propTypes.default.object),
     tableId: _propTypes.default.string,
     totalColumnsWidth: _propTypes.default.number,
-    gridRef: _propTypes.default.object
+    gridRef: _propTypes.default.object,
+    setAllFilters: _propTypes.default.func,
+    getFilterProps: _propTypes.default.func,
+    state: _propTypes.default.object
   })
 };

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -15,9 +15,6 @@ var _reactResizeDetector = require("react-resize-detector");
 var _ButtonMenu = require("../../ButtonMenu");
 var _settings = require("../../../settings");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _FilterSummary = require("../../FilterSummary");
-var _FilterProvider = require("./addons/Filtering/FilterProvider");
-var _constants = require("./addons/Filtering/constants");
 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; }
 /**
@@ -143,26 +140,14 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
   var DatagridActions = datagridState.DatagridActions,
     DatagridBatchActions = datagridState.DatagridBatchActions,
     batchActions = datagridState.batchActions,
-    state = datagridState.state,
     rowSize = datagridState.rowSize;
-  var _useContext = (0, _react.useContext)(_FilterProvider.FilterContext),
-    filterTags = _useContext.filterTags,
-    EventEmitter = _useContext.EventEmitter;
-  var renderFilterSummary = function renderFilterSummary() {
-    return state.filters.length > 0 && /*#__PURE__*/_react.default.createElement(_FilterSummary.FilterSummary, {
-      filters: filterTags,
-      clearFilters: function clearFilters() {
-        return EventEmitter.dispatch(_constants.CLEAR_FILTERS);
-      }
-    });
-  };
   var getRowHeight = rowSize ? rowSize : 'lg';
   return batchActions && DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     className: (0, _classnames.default)("".concat(blockClass, "__table-toolbar"), "".concat(blockClass, "__table-toolbar--").concat(getRowHeight))
-  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref)), renderFilterSummary()) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)), renderFilterSummary()) : null;
+  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
 };
 var _default = DatagridToolbar;
 exports.default = _default;

package/lib/components/Datagrid/Datagrid/DraggableElement.js

@@ -42,6 +42,7 @@ 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,
@@ -121,9 +122,9 @@ var DraggableElement = function DraggableElement(_ref) {
     className: (0, _classnames.default)({
       disabled: disabled
     }, "".concat(blockClass, "__draggable-handleStyle"))
-  }, /*#__PURE__*/React.createElement(_iconsReact.Draggable16, null)), children);
+  }, isSticky ? /*#__PURE__*/React.createElement(_iconsReact.Locked16, null) : /*#__PURE__*/React.createElement(_iconsReact.Draggable16, null)), children);
   return /*#__PURE__*/React.createElement("li", {
-    className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
+    className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
     ref: ref,
     "aria-selected": isFocused,
     role: "option",
@@ -154,7 +155,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
@@ -171,6 +172,7 @@ DraggableElement.propTypes = {
   id: _propTypes.default.string.isRequired,
   index: _propTypes.default.number.isRequired,
   isFocused: _propTypes.default.bool.isRequired,
+  isSticky: _propTypes.default.bool,
   listData: _propTypes.default.array.isRequired,
   moveElement: _propTypes.default.func.isRequired,
   onArrowKeyDown: _propTypes.default.func.isRequired,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -101,9 +101,11 @@ var Columns = function Columns(_ref) {
     var res = filterString.length ? colDef.Header.props.title.toLowerCase().split(searchString) : null;
     var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
     var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colDef.Header.props.title;
+    var isFrozenColumn = !!colDef.sticky;
     var listContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
       wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
       checked: (0, _common.isColumnVisible)(colDef),
+      disabled: isFrozenColumn,
       onChange: onSelectColumn.bind(null, colDef),
       id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
       labelText: colDef.Header.props.title,
@@ -122,17 +124,18 @@ var Columns = function Columns(_ref) {
       setListData: setColumnsObject,
       id: "dnd-datagrid-columns-".concat(colDef.id),
       type: "column-customization",
-      disabled: filterString.length > 0,
+      disabled: filterString.length > 0 || isFrozenColumn,
       ariaLabel: colDef.Header.props.title,
       onGrab: setAriaRegionText,
       isFocused: focusIndex === i,
       moveElement: moveElement,
       onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
         if (isGrabbed) {
+          var _columns$nextIndex;
           var nextIndex = getNextIndex(columns, currentIndex, e.key);
           e.preventDefault();
           e.stopPropagation();
-          if (nextIndex >= 0) {
+          if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
             setFocusIndex(nextIndex);
             moveElement(currentIndex, nextIndex);
             e.target.scrollIntoView({
@@ -141,6 +144,7 @@ var Columns = function Columns(_ref) {
           }
         }
       },
+      isSticky: isFrozenColumn,
       selected: (0, _common.isColumnVisible)(colDef)
     }, listContents);
   }))));

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -59,7 +59,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
   var _useState7 = (0, _react.useState)(columnDefinitions
     // hide the columns without Header, e.g the sticky actions, spacer
     .filter(function (colDef) {
-      return !!colDef.Header.props;
+      return !!colDef.Header.props && !colDef.isAction;
     })
     // only sort the hidden column to the end when modal reopen
     .sort(function (defA, defB) {