@carbon/ibm-products 2.0.0-rc.17 → 2.0.0-rc.19

package/es/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js

@@ -0,0 +1,55 @@
+import { DURATIONS, EASINGS } from '../../../../../../global/js/utils/motionConstants';
+import { ACTION_SET_HEIGHT, PANEL_WIDTH } from '../constants';
+export var panelVariants = {
+  hidden: {
+    width: 0,
+    overflow: 'hidden',
+    transition: {
+      duration: DURATIONS.fast02,
+      ease: EASINGS.productive.exit,
+      when: 'afterChildren'
+    }
+  },
+  visible: {
+    width: PANEL_WIDTH,
+    overflow: 'visible',
+    transition: {
+      duration: DURATIONS.moderate02,
+      ease: EASINGS.productive.entrance,
+      when: 'beforeChildren'
+    }
+  }
+};
+export var innerContainerVariants = {
+  hidden: {
+    opacity: 0,
+    transition: {
+      duration: DURATIONS.fast01,
+      ease: EASINGS.productive.exit
+    }
+  },
+  visible: {
+    opacity: 1,
+    transition: {
+      duration: DURATIONS.fast02,
+      ease: EASINGS.productive.entrance,
+      when: 'beforeChildren'
+    }
+  }
+};
+export var actionSetVariants = {
+  hidden: {
+    y: ACTION_SET_HEIGHT,
+    transition: {
+      duration: DURATIONS.fast01,
+      ease: EASINGS.productive.exit
+    }
+  },
+  visible: {
+    y: 0,
+    transition: {
+      duration: DURATIONS.fast02,
+      ease: EASINGS.productive.entrance
+    }
+  }
+};

package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js

@@ -1,38 +1,72 @@
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-// This functions takes the filters passed in and makes an object to track it's state
+import { FLYOUT, PANEL } from './constants'; // This functions takes the filters passed in and makes an object to track it's state
+
 export var getInitialStateFromFilters = function getInitialStateFromFilters(filters) {
+  var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FLYOUT;
   var initialFilterState = {};
-  filters.forEach(function (_ref) {
+
+  var setInitialState = function setInitialState(_ref) {
     var type = _ref.type,
         column = _ref.column,
         props = _ref.props;
 
     if (type === 'checkbox') {
-      initialFilterState[column] = props.Checkbox.map(function (_ref2) {
-        var id = _ref2.id,
-            labelText = _ref2.labelText,
-            value = _ref2.value;
-        return {
-          id: id,
-          labelText: labelText,
-          value: value,
-          selected: false
-        };
-      });
+      initialFilterState[column] = {
+        value: props.Checkbox.map(function (_ref2) {
+          var id = _ref2.id,
+              labelText = _ref2.labelText,
+              value = _ref2.value;
+          return {
+            id: id,
+            labelText: labelText,
+            value: value,
+            selected: false
+          };
+        }),
+        type: type
+      };
     } else if (type === 'date') {
-      initialFilterState[column] = [undefined, undefined];
+      initialFilterState[column] = {
+        value: [null, null],
+        type: type
+      };
     } else if (type === 'number') {
-      initialFilterState[column] = '';
+      initialFilterState[column] = {
+        value: '',
+        type: type
+      };
     } else if (type === 'radio') {
-      initialFilterState[column] = '';
+      initialFilterState[column] = {
+        value: '',
+        type: type
+      };
     } else if (type === 'dropdown') {
-      initialFilterState[column] = '';
+      initialFilterState[column] = {
+        value: '',
+        type: type
+      };
     }
-  });
+  };
+
+  if (variation === FLYOUT) {
+    filters.forEach(setInitialState);
+  } else if (variation === PANEL) {
+    filters.forEach(function (_ref3) {
+      var _ref3$filters = _ref3.filters,
+          sections = _ref3$filters === void 0 ? [] : _ref3$filters;
+      sections.forEach(function (_ref4) {
+        var filter = _ref4.filter;
+        return setInitialState(filter);
+      });
+    });
+  } else {
+    console.error('No variation passed into useInitialStateFromFilters');
+  }
+
   return initialFilterState;
 };

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

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

package/es/components/Datagrid/useFiltering.js

@@ -8,12 +8,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
- * (c) Copyright IBM Corp. 2022
+ * (c) Copyright IBM Corp. 2023
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 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 () {
@@ -68,15 +69,21 @@ 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
       });
     };
 

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

@@ -1,4 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
 
 /**
  * Copyright IBM Corp. 2020, 2022
@@ -6,14 +7,18 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { useLayoutEffect, useState } from 'react';
+import React, { useLayoutEffect, useState, useContext } from 'react';
 import { TableToolbarContent, TableToolbarSearch, Button, OverflowMenu, OverflowMenuItem, ComposedModal, ModalBody, ModalHeader, ModalFooter, Dropdown } from '@carbon/react';
-import { Download, Add, Restart, ChevronDown } from '@carbon/react/icons';
+import { Download, Add, Restart, ChevronDown, Filter } from '@carbon/react/icons';
 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,7 +27,8 @@ export var DatagridActions = function DatagridActions(datagridState) {
       useDenseHeader = datagridState.useDenseHeader,
       filterProps = datagridState.filterProps,
       getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
-      FilterFlyout = datagridState.FilterFlyout;
+      FilterFlyout = datagridState.FilterFlyout,
+      data = datagridState.data;
 
   var downloadCsv = function downloadCsv() {
     alert('Downloading...');
@@ -44,6 +50,28 @@ export var DatagridActions = function DatagridActions(datagridState) {
     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: function renderIcon(props) {
+        return /*#__PURE__*/React.createElement(Filter, _extends({
+          size: 16
+        }, props));
+      },
+      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],
@@ -68,7 +96,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",
@@ -77,16 +105,16 @@ export var DatagridActions = function DatagridActions(datagridState) {
     renderIcon: Download,
     iconDescription: 'Download CSV',
     onClick: downloadCsv
-  })), renderFilterFlyout(), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
+  })), renderFilterFlyout(), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
     style: style,
     className: "".concat(blockClass, "__toolbar-divider")
   }, /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
     renderIcon: Add,
     iconDescription: 'Action'
-  }, "Ghost button")), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
-    style: style
-  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null))) : /*#__PURE__*/React.createElement(OverflowMenu, {
+  }, "Ghost button"))) : /*#__PURE__*/React.createElement(OverflowMenu, {
     ariaLabel: "Tools",
     size: "md",
     flipped: true
@@ -113,7 +141,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,
@@ -121,7 +149,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
     onChange: function onChange(e) {
       return setGlobalFilter(e.target.value);
     }
-  }), renderFilterFlyout(), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
+  }), renderFilterFlyout(), /*#__PURE__*/React.createElement("div", {
     style: style
   }, /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
@@ -141,7 +169,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
     onClick: downloadCsv
   })), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
     style: style
-  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(ButtonMenu, {
+  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement(ButtonMenu, {
     label: "Primary button",
     renderIcon: ChevronDown,
     menuOptionsClass: "".concat(blockClass, "__toolbar-options")
@@ -154,7 +182,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,
@@ -162,7 +190,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
     onChange: function onChange(e) {
       return setGlobalFilter(e.target.value);
     }
-  }), /*#__PURE__*/React.createElement(OverflowMenu, {
+  }), renderFilterFlyout(), /*#__PURE__*/React.createElement(OverflowMenu, {
     ariaLabel: "Tools",
     size: "lg",
     flipped: true,

package/es/components/OptionsTile/OptionsTile.js

@@ -20,7 +20,7 @@ import uuidv4 from '../../global/js/utils/uuidv4';
 import { pkg } from '../../settings';
 import { useControllableState } from '../../global/js/hooks'; // Carbon and package components we use.
 
-import { Toggle } from '@carbon/react';
+import { Layer, Toggle } from '@carbon/react';
 import { ChevronDown, Locked, WarningAltFilled, WarningFilled } from '@carbon/react/icons';
 import * as carbonMotion from '@carbon/motion'; // The block part of our conventional BEM class names (blockClass__E--M).
 
@@ -253,11 +253,11 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }), renderTitle()), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef
-  }, isLocked && /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React.createElement(Layer, null, isLocked && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__locked-text")
   }, /*#__PURE__*/React.createElement(Locked, {
     size: 16
-  }), lockedText), children)) : /*#__PURE__*/React.createElement("div", {
+  }), lockedText), children))) : /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__static-content")
   }, renderTitle()));
 }); // Return a placeholder if not released and not enabled by feature flag

package/es/components/Tearsheet/Tearsheet.js

@@ -182,6 +182,11 @@ Tearsheet.propTypes = _objectSpread({
    */
   open: PropTypes.bool,
 
+  /**
+   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   */
+  portalTarget: PropTypes.node,
+
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/es/components/Tearsheet/TearsheetNarrow.js

@@ -144,6 +144,11 @@ TearsheetNarrow.propTypes = _objectSpread({
    */
   open: PropTypes.bool,
 
+  /**
+   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   */
+  portalTarget: PropTypes.node,
+
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/es/components/Tearsheet/TearsheetShell.js

@@ -399,7 +399,7 @@ TearsheetShell.propTypes = _objectSpread({
   open: PropTypes.bool,
 
   /**
-   * portal target for the all tags modal
+   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
    */
   portalTarget: PropTypes.node,
 

package/es/global/js/package-settings.js

@@ -37,6 +37,7 @@ var defaults = {
     ImportModal: true,
     InlineEdit: true,
     InlineEditV1: true,
+    MultiAddSelect: true,
     NotificationsPanel: true,
     NoDataEmptyState: true,
     NoTagsEmptyState: true,
@@ -48,6 +49,7 @@ var defaults = {
     RemoveModal: true,
     Saving: true,
     SidePanel: true,
+    SingleAddSelect: true,
     StatusIcon: true,
     TagSet: true,
     Tearsheet: true,
@@ -58,8 +60,6 @@ var defaults = {
     WebTerminalContentWrapper: true,
     WebTerminalProvider: true,
     // other public components not yet reviewed and released:
-    MultiAddSelect: false,
-    SingleAddSelect: false,
     ModifiedTabs: false,
     Toolbar: false,
     ToolbarButton: false,

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

@@ -47,7 +47,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;
@@ -57,11 +57,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", {
-    className: "".concat(blockClass, "__datagridWithPanel ").concat(blockClass, "__displayFlex ").concat(blockClass, "__leftPanel-position")
+  }, (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")
   }, /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
     datagridState: datagridState
-  })), leftPanel === undefined && /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
+  })) : /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
     datagridState: datagridState
   }))));
 }); // Return a placeholder if not released and not enabled by feature flag

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

@@ -35,12 +35,18 @@ var _settings = require("../../../settings");
 
 var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext");
 
+var _Filtering = require("./addons/Filtering");
+
 var _handleGridFocus = require("./addons/InlineEdit/handleGridFocus");
 
 var _hooks = require("../../../global/js/hooks");
 
 var _hooks2 = require("../../DataSpreadsheet/hooks");
 
+var _FilterSummary = require("../../FilterSummary");
+
+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; }
@@ -59,17 +65,25 @@ var DatagridContent = function DatagridContent(_ref) {
   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,
@@ -81,10 +95,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) {
@@ -116,14 +129,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
@@ -152,21 +165,37 @@ 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(_react2.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(_Filtering.FilterPanel, (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
   }));
 };
@@ -175,13 +204,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,
@@ -192,6 +222,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

@@ -27,12 +27,6 @@ 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; }
@@ -170,29 +164,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(_react2.TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref)), renderFilterSummary()) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_react2.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(_react2.TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)), renderFilterSummary()) : null;
+  }, /*#__PURE__*/_react.default.createElement(_react2.TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
 };
 
 var _default = DatagridToolbar;