@carbon/ibm-products 1.42.1 → 1.43.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

@@ -154,7 +154,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

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

@@ -19,8 +19,7 @@ var _hooks = require("../../../../../global/js/hooks");
 var _settings = require("../../../../../settings");
 var _ActionSet = require("../../../../ActionSet");
 var _constants = require("./constants");
-var _FilterProvider = require("./FilterProvider");
-var _useInitialStateFromFilters = _interopRequireDefault(require("./hooks/useInitialStateFromFilters"));
+var _hooks2 = require("./hooks");
 var _utils = require("./utils");
 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; }
@@ -50,17 +49,15 @@ var FilterFlyout = function FilterFlyout(_ref) {
     onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
     _ref$secondaryActionL = _ref.secondaryActionLabel,
     secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
-    setAllFilters = _ref.setAllFilters;
-  /** Context state and methods */
-  var _useContext = (0, _react.useContext)(_FilterProvider.FilterContext),
-    EventEmitter = _useContext.EventEmitter;
-
+    setAllFilters = _ref.setAllFilters,
+    _ref$data = _ref.data,
+    data = _ref$data === void 0 ? [] : _ref$data;
   /** State */
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var _useInitialStateFromF = (0, _useInitialStateFromFilters.default)(filters),
+  var _useInitialStateFromF = (0, _hooks2.useInitialStateFromFilters)(filters, _constants.FLYOUT),
     _useInitialStateFromF2 = (0, _slicedToArray2.default)(_useInitialStateFromF, 2),
     filtersState = _useInitialStateFromF2[0],
     setFiltersState = _useInitialStateFromF2[1];
@@ -90,6 +87,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
   var apply = function apply() {
     setAllFilters(filtersObjectArray);
     closeFlyout();
+    // From the user
     onApply();
 
     // updates the ref so next time the flyout opens we have records of the previous filters
@@ -106,7 +104,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
   };
   var reset = function reset() {
     // Get the initial values for the filters
-    var initialFiltersState = (0, _utils.getInitialStateFromFilters)(filters);
+    var initialFiltersState = (0, _utils.getInitialStateFromFilters)(filters, _constants.FLYOUT);
     var initialFiltersObjectArray = [];
 
     // Set the state to the initial values
@@ -149,6 +147,23 @@ var FilterFlyout = function FilterFlyout(_ref) {
         type: type
       });
     }
+    if (type === _constants.CHECKBOX) {
+      /**
+      When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
+      This checks if all the checkboxes are selected = false and removes it from the array
+      */
+      var index = filtersObjectArrayCopy.findIndex(function (filter) {
+        return filter.id === column;
+      });
+
+      // If all the selected state is false remove from array
+      var shouldRemoveFromArray = filtersObjectArrayCopy[index].value.every(function (val) {
+        return val.selected === false;
+      });
+      if (shouldRemoveFromArray) {
+        filtersObjectArrayCopy.splice(index, 1);
+      }
+    }
     setFiltersObjectArray(filtersObjectArrayCopy);
 
     // Automatically apply the filters if the updateMethod is instant
@@ -160,18 +175,16 @@ var FilterFlyout = function FilterFlyout(_ref) {
   /** Effects */
   (0, _hooks.useClickOutside)(filterFlyoutRef, function (target) {
     var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
-    if (!open || hasClickedOnDatePicker) {
+    var hasClickedOnDropdown = target.className === 'bx--list-box__menu-item__option';
+    if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
       return;
     }
     cancel();
   });
-  (0, _react.useEffect)(function subscribeToEmitter() {
-    // This event is emitted from the DatagridToolbar component when clearFilters is clicked in FilterSummary
-    EventEmitter.subscribe(_constants.CLEAR_FILTERS, reset);
-  });
+  (0, _hooks2.useSubscribeToEventEmitter)(_constants.CLEAR_FILTERS, reset);
 
   /** Render the individual filter component */
-  var renderFilter = (0, _react.useCallback)(function (_ref3) {
+  var renderFilter = function renderFilter(_ref3) {
     var type = _ref3.type,
       column = _ref3.column,
       components = _ref3.props;
@@ -179,7 +192,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
       return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.DatePicker, (0, _extends2.default)({}, components.DatePicker, {
         onChange: function onChange(value) {
           var _components$DatePicke, _components$DatePicke2;
-          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, value)));
+          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
+            value: value,
+            type: type
+          })));
           applyFilters({
             column: column,
             value: value,
@@ -187,7 +203,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
           });
           (_components$DatePicke = (_components$DatePicke2 = components.DatePicker).onChange) === null || _components$DatePicke === void 0 ? void 0 : _components$DatePicke.call(_components$DatePicke2, value);
         },
-        value: filtersState[column],
+        value: filtersState[column].value,
         datePickerType: "range"
       }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.DatePickerInput, (0, _extends2.default)({
         placeholder: "mm/dd/yyyy",
@@ -204,7 +220,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
       }, components.NumberInput, {
         onChange: function onChange(event) {
           var _components$NumberInp, _components$NumberInp2;
-          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, event.target.value)));
+          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
+            value: event.target.value,
+            type: type
+          })));
           applyFilters({
             column: column,
             value: event.target.value,
@@ -212,24 +231,27 @@ var FilterFlyout = function FilterFlyout(_ref) {
           });
           (_components$NumberInp = (_components$NumberInp2 = components.NumberInput).onChange) === null || _components$NumberInp === void 0 ? void 0 : _components$NumberInp.call(_components$NumberInp2, event);
         },
-        value: filtersState[column]
+        value: filtersState[column].value
       }));
     } else if (type === _constants.CHECKBOX) {
-      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, components.FormGroup, filtersState[column].map(function (option) {
+      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, components.FormGroup, filtersState[column].value.map(function (option) {
         return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, (0, _extends2.default)({
           key: option.labelText
         }, option, {
           onChange: function onChange(isSelected) {
             var _option$onChange;
-            var checkboxCopy = filtersState[column];
+            var checkboxCopy = filtersState[column].value;
             var foundCheckbox = checkboxCopy.find(function (checkbox) {
               return checkbox.value === option.value;
             });
             foundCheckbox.selected = isSelected;
-            setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, checkboxCopy)));
+            setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
+              value: checkboxCopy,
+              type: type
+            })));
             applyFilters({
               column: column,
-              value: (0, _toConsumableArray2.default)(filtersState[column]),
+              value: (0, _toConsumableArray2.default)(filtersState[column].value),
               type: type
             });
             (_option$onChange = option.onChange) === null || _option$onChange === void 0 ? void 0 : _option$onChange.call(option, isSelected);
@@ -239,10 +261,13 @@ var FilterFlyout = function FilterFlyout(_ref) {
       }));
     } else if (type === _constants.RADIO) {
       return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, components.FormGroup, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButtonGroup, (0, _extends2.default)({}, components.RadioButtonGroup, {
-        valueSelected: filtersState[column],
+        valueSelected: filtersState[column].value,
         onChange: function onChange(selected) {
           var _components$RadioButt, _components$RadioButt2;
-          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, selected)));
+          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
+            value: selected,
+            type: type
+          })));
           applyFilters({
             column: column,
             value: selected,
@@ -258,11 +283,14 @@ var FilterFlyout = function FilterFlyout(_ref) {
       })));
     } else if (type === _constants.DROPDOWN) {
       return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, (0, _extends2.default)({}, components.Dropdown, {
-        selectedItem: filtersState[column],
+        selectedItem: filtersState[column].value,
         onChange: function onChange(_ref5) {
           var _components$Dropdown$, _components$Dropdown;
           var selectedItem = _ref5.selectedItem;
-          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, selectedItem)));
+          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
+            value: selectedItem,
+            type: type
+          })));
           applyFilters({
             column: column,
             value: selectedItem,
@@ -272,12 +300,12 @@ var FilterFlyout = function FilterFlyout(_ref) {
         }
       }));
     }
-  }, [filtersState, applyFilters, setFiltersState]);
+  };
 
   /** Renders all filters */
-  var renderFilters = (0, _react.useCallback)(function () {
+  var renderFilters = function renderFilters() {
     return filters.map(renderFilter);
-  }, [filters, renderFilter]);
+  };
   var renderActionSet = function renderActionSet() {
     return showActionSet && /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
       actions: [{
@@ -306,7 +334,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
     renderIcon: _iconsReact.Filter16,
     iconDescription: flyoutIconDescription,
     onClick: open ? closeFlyout : openFlyout,
-    className: (0, _classnames.default)("".concat(componentClass, "__trigger"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__trigger--open"), open))
+    className: (0, _classnames.default)("".concat(componentClass, "__trigger"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__trigger--open"), open)),
+    disabled: data.length === 0
   }), /*#__PURE__*/_react.default.createElement("div", {
     ref: filterFlyoutRef,
     className: (0, _classnames.default)(componentClass, (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--open"), open), (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--batch"), showActionSet), (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--instant"), !showActionSet), _cx2))
@@ -319,6 +348,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
   }, renderFilters())), renderActionSet()));
 };
 FilterFlyout.propTypes = {
+  /**
+   * All data rows in the table
+   */
+  data: _propTypes.default.array.isRequired,
   /**
    * Array of filters to render
    */