@carbon/ibm-products 1.38.0 → 1.40.0

package/lib/components/ActionBar/ActionBarOverflowItems.js

@@ -51,6 +51,7 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
     // div equivalent below is based on Carbon 10.25.0
     return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, {
       className: "".concat(blockClass, "__item"),
+      onClick: item.props.onClick,
       itemText: /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(blockClass, "__item-content"),
         "aria-describedby": "".concat(internalId.current, "-").concat(index, "--item-label")

package/lib/components/ButtonMenu/ButtonMenu.js

@@ -111,5 +111,5 @@ ButtonMenu.propTypes = {
    * The size of the button for the menu trigger. The values can be any valid
    * value for the carbon Button component 'size' prop.
    */
-  size: _carbonComponentsReact.Button.propTypes.size
+  size: _propTypes.default.oneOf(['sm', 'md', 'lg'])
 };

package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -31,7 +31,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 var blockClass = "".concat(_settings.pkg.prefix, "--button-set-with-overflow");
 var componentName = 'ButtonSetWithOverflow';
-var buttonSize = 'field';
+var buttonSize = 'md';
 var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
   var buttons = _ref.buttons,
     className = _ref.className,

package/lib/components/Card/Card.js

@@ -78,7 +78,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var blockClass = "".concat(_settings.pkg.prefix, "--card");
-  var hasActions = actionIcons.length > 0 || overflowActions.length > 0 || primaryButtonText && primaryButtonPlacement === 'top';
+  var hasActions = actionIcons.length > 0 || overflowActions.length > 0 || !!primaryButtonText && primaryButtonPlacement === 'top';
   var hasFooterActions = hasActions && actionsPlacement === 'bottom';
   var hasFooterButton = !!secondaryButtonText || !!primaryButtonText && primaryButtonPlacement === 'bottom';
   var hasBottomBar = hasFooterActions || hasFooterButton;

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -187,7 +187,10 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     className: "".concat(blockClass, "__modal"),
     size: "sm",
     open: modalIsOpen,
-    "aria-label": modalTitle
+    "aria-label": modalTitle,
+    onClose: function onClose() {
+      setModalIsOpen(false);
+    }
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalHeader, {
     title: modalTitle
   }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalBody, null, /*#__PURE__*/_react.default.createElement("p", null, modalDescription)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {

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

@@ -15,6 +15,7 @@ var _settings = require("../../../settings");
 var _pconsole = _interopRequireDefault(require("../../../global/js/utils/pconsole"));
 var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext");
 var _DatagridContent = require("./DatagridContent");
+var _FilterProvider = require("./addons/Filtering/FilterProvider");
 var _excluded = ["datagridState"];
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
@@ -30,9 +31,12 @@ var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     isFetching = datagridState.isFetching,
     tableId = datagridState.tableId,
     leftPanel = datagridState.leftPanel,
-    className = datagridState.className;
+    className = datagridState.className,
+    filters = datagridState.state.filters;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
-  return /*#__PURE__*/_react.default.createElement(_InlineEditContext.InlineEditProvider, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_FilterProvider.FilterProvider, {
+    filters: filters
+  }, /*#__PURE__*/_react.default.createElement(_InlineEditContext.InlineEditProvider, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     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") : '')
@@ -42,7 +46,7 @@ var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     datagridState: datagridState
   })), leftPanel === undefined && /*#__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/DatagridEmptyBody.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _settings = require("../../../settings");
 var _carbonComponentsReact = require("carbon-components-react");
-var _NoDataEmptyState = require("../../EmptyStates/NoDataEmptyState");
+var _EmptyStates = require("../../EmptyStates");
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -28,12 +28,19 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
     emptyStateTitle = datagridState.emptyStateTitle,
     emptyStateDescription = datagridState.emptyStateDescription,
     emptyStateSize = datagridState.emptyStateSize,
+    _datagridState$emptyS = datagridState.emptyStateType,
+    emptyStateType = _datagridState$emptyS === void 0 ? 'noData' : _datagridState$emptyS,
     illustrationTheme = datagridState.illustrationTheme;
   return /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
     className: "".concat(blockClass, "__empty-state-body")
   }), /*#__PURE__*/_react.default.createElement(TableRow, null, /*#__PURE__*/_react.default.createElement(TableCell, {
     colSpan: headers.length
-  }, /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
+  }, emptyStateType === 'error' && /*#__PURE__*/_react.default.createElement(_EmptyStates.ErrorEmptyState, {
+    illustrationTheme: illustrationTheme,
+    size: emptyStateSize,
+    title: emptyStateTitle,
+    subtitle: emptyStateDescription
+  }), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, {
     illustrationTheme: illustrationTheme,
     size: emptyStateSize,
     title: emptyStateTitle,

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

@@ -11,8 +11,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _carbonComponentsReact = require("carbon-components-react");
-var _commonColumnIds = require("../common-column-ids");
+var _layout = require("@carbon/layout");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _commonColumnIds = require("../common-column-ids");
 var _settings = require("../../../settings");
 var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext/InlineEditContext");
 var _getCellIdAsObject = require("./addons/InlineEdit/InlineEditContext/getCellIdAsObject");
@@ -22,22 +23,54 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var TableRow = _carbonComponentsReact.DataTable.TableRow,
   TableCell = _carbonComponentsReact.DataTable.TableCell;
+var rowHeights = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64
+};
 
 // eslint-disable-next-line react/prop-types
 var DatagridRow = function DatagridRow(datagridState) {
   var _cx;
-  var row = datagridState.row;
+  var row = datagridState.row,
+    rowSize = datagridState.rowSize,
+    withNestedRows = datagridState.withNestedRows;
   var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
     state = _useContext.state;
   var activeCellId = state.activeCellId;
   var activeCellObject = activeCellId && (0, _getCellIdAsObject.getCellIdAsObject)(activeCellId);
+  var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
+    var isExpanded = _ref.isExpanded,
+      subRows = _ref.subRows;
+    var size = 0;
+    if (isExpanded && subRows) {
+      size += subRows.length;
+      subRows.forEach(function (child) {
+        size += getVisibleNestedRowCount(child);
+      });
+    }
+    return size;
+  };
   return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
     className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
   }, row.getRowProps(), {
     key: row.id,
     onMouseEnter: function onMouseEnter(event) {
+      var _hoverRow$style, _hoverRow$style2, _hoverRow$style3;
+      if (!withNestedRows) {
+        return;
+      }
+      var subRowCount = getVisibleNestedRowCount(row);
+      var totalNestedRowIndicatorHeight = (0, _layout.px)(subRowCount * rowHeights[rowSize]);
       var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
       hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.add("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+      var rowExpanderButton = hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.querySelector(".".concat(blockClass, "__row-expander"));
+      var rowSizeValue = rowSize || 'lg';
+      hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style = hoverRow.style) === null || _hoverRow$style === void 0 ? void 0 : _hoverRow$style.setProperty("--".concat(blockClass, "--indicator-height"), totalNestedRowIndicatorHeight);
+      hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style2 = hoverRow.style) === null || _hoverRow$style2 === void 0 ? void 0 : _hoverRow$style2.setProperty("--".concat(blockClass, "--row-height"), (0, _layout.px)(rowHeights[rowSizeValue]));
+      hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style3 = hoverRow.style) === null || _hoverRow$style3 === void 0 ? void 0 : _hoverRow$style3.setProperty("--".concat(blockClass, "--indicator-offset-amount"), (0, _layout.px)((rowExpanderButton === null || rowExpanderButton === void 0 ? void 0 : rowExpanderButton.offsetLeft) || 0));
     },
     onMouseLeave: function onMouseLeave(event) {
       var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));

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

@@ -15,6 +15,9 @@ 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; }
 /**
@@ -139,13 +142,25 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
     ref = _useResizeDetector.ref;
   var DatagridActions = datagridState.DatagridActions,
     DatagridBatchActions = datagridState.DatagridBatchActions,
-    batchActions = datagridState.batchActions;
+    batchActions = datagridState.batchActions,
+    state = datagridState.state;
+  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);
+      }
+    });
+  };
   return batchActions && DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref)), renderFilterSummary()) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)), renderFilterSummary()) : null;
 };
 var _default = DatagridToolbar;
 exports.default = _default;

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

@@ -0,0 +1,382 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _iconsReact = require("@carbon/icons-react");
+var _carbonComponentsReact = require("carbon-components-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+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 _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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var componentClass = "".concat(blockClass, "-filter-flyout");
+var FilterFlyout = function FilterFlyout(_ref) {
+  var _cx2;
+  var _ref$updateMethod = _ref.updateMethod,
+    updateMethod = _ref$updateMethod === void 0 ? _constants.BATCH : _ref$updateMethod,
+    _ref$flyoutIconDescri = _ref.flyoutIconDescription,
+    flyoutIconDescription = _ref$flyoutIconDescri === void 0 ? 'Open filters' : _ref$flyoutIconDescri,
+    _ref$filters = _ref.filters,
+    filters = _ref$filters === void 0 ? [] : _ref$filters,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? 'Filter' : _ref$title,
+    _ref$primaryActionLab = _ref.primaryActionLabel,
+    primaryActionLabel = _ref$primaryActionLab === void 0 ? 'Apply' : _ref$primaryActionLab,
+    _ref$onFlyoutOpen = _ref.onFlyoutOpen,
+    onFlyoutOpen = _ref$onFlyoutOpen === void 0 ? function () {} : _ref$onFlyoutOpen,
+    _ref$onFlyoutClose = _ref.onFlyoutClose,
+    onFlyoutClose = _ref$onFlyoutClose === void 0 ? function () {} : _ref$onFlyoutClose,
+    _ref$onApply = _ref.onApply,
+    onApply = _ref$onApply === void 0 ? function () {} : _ref$onApply,
+    _ref$onCancel = _ref.onCancel,
+    onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
+    _ref$shouldClickOutsi = _ref.shouldClickOutsideToClose,
+    shouldClickOutsideToClose = _ref$shouldClickOutsi === void 0 ? false : _ref$shouldClickOutsi,
+    _ref$secondaryActionL = _ref.secondaryActionLabel,
+    secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
+    setAllFilters = _ref.setAllFilters,
+    setFilter = _ref.setFilter;
+  /** Context state and methods */
+  var _useContext = (0, _react.useContext)(_FilterProvider.FilterContext),
+    EventEmitter = _useContext.EventEmitter;
+
+  /** 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),
+    _useInitialStateFromF2 = (0, _slicedToArray2.default)(_useInitialStateFromF, 2),
+    filtersState = _useInitialStateFromF2[0],
+    setFiltersState = _useInitialStateFromF2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    filtersObjectArray = _useState4[0],
+    setFiltersObjectArray = _useState4[1];
+
+  /** Refs */
+  var filterFlyoutRef = (0, _react.useRef)(null);
+  // When using batch actions we have to store the filters to then apply them later
+  var prevFiltersRef = (0, _react.useRef)(JSON.stringify(filtersState));
+  var prevFiltersObjectArrayRef = (0, _react.useRef)(JSON.stringify(filtersObjectArray));
+
+  /** Memos */
+  var showActionSet = updateMethod === _constants.BATCH;
+
+  /** Methods */
+  var openFlyout = function openFlyout() {
+    setOpen(true);
+    onFlyoutOpen();
+  };
+  var closeFlyout = function closeFlyout() {
+    setOpen(false);
+    onFlyoutClose();
+  };
+  var apply = function apply() {
+    setAllFilters(filtersObjectArray);
+    closeFlyout();
+    onApply();
+
+    // updates the ref so next time the flyout opens we have records of the previous filters
+    prevFiltersRef.current = JSON.stringify(filtersState);
+    prevFiltersObjectArrayRef.current = JSON.stringify(filtersObjectArray);
+  };
+  var cancel = function cancel() {
+    revertToPreviousFilters();
+    onCancel();
+    closeFlyout();
+  };
+  var reset = function reset() {
+    // Get the initial values for the filters
+    var initialFiltersState = (0, _utils.getInitialStateFromFilters)(filters);
+    var initialFiltersObjectArray = [];
+
+    // Set the state to the initial values
+    setFiltersState(initialFiltersState);
+    setFiltersObjectArray(initialFiltersObjectArray);
+    setAllFilters([]);
+
+    // Update their respective refs so everything is in sync
+    prevFiltersRef.current = JSON.stringify(initialFiltersState);
+    prevFiltersObjectArrayRef.current = JSON.stringify(initialFiltersObjectArray);
+  };
+
+  // If the user decides to cancel or click outside the flyout, it reverts back to the filters that were
+  // there when they opened the flyout
+  var revertToPreviousFilters = function revertToPreviousFilters() {
+    setFiltersState(JSON.parse(prevFiltersRef.current));
+    setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
+  };
+  var applyFilters = (0, _react.useCallback)(function (_ref2) {
+    var column = _ref2.column,
+      value = _ref2.value,
+      type = _ref2.type;
+    // If no end date is selected return because we need the end date to do computations
+    if (type === _constants.DATE && !value[1]) {
+      return;
+    }
+    if (updateMethod === _constants.BATCH) {
+      var filtersObjectArrayCopy = (0, _toConsumableArray2.default)(filtersObjectArray);
+      // check if the filter already exists in the array
+      var filter = filtersObjectArrayCopy.find(function (item) {
+        return item.id === column;
+      });
+
+      // if filter exists in array then update the filter's new value
+      if (filter) {
+        filter.value = value;
+      } else {
+        filtersObjectArrayCopy.push({
+          id: column,
+          value: value,
+          type: type
+        });
+      }
+      setFiltersObjectArray(filtersObjectArrayCopy);
+    } else if (updateMethod === _constants.INSTANT) {
+      setFilter(column, value);
+    }
+  }, [setFilter, updateMethod, filtersObjectArray]);
+
+  /** Effects */
+  (0, _hooks.useClickOutside)(filterFlyoutRef, function (target) {
+    if (shouldClickOutsideToClose === false) {
+      return;
+    }
+    var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
+    if (!open || hasClickedOnDatePicker) {
+      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);
+  });
+
+  /** Render the individual filter component */
+  var renderFilter = (0, _react.useCallback)(function (_ref3) {
+    var type = _ref3.type,
+      column = _ref3.column,
+      components = _ref3.props;
+    if (type === _constants.DATE) {
+      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)));
+          applyFilters({
+            column: column,
+            value: value,
+            type: type
+          });
+          (_components$DatePicke = (_components$DatePicke2 = components.DatePicker).onChange) === null || _components$DatePicke === void 0 ? void 0 : _components$DatePicke.call(_components$DatePicke2, value);
+        },
+        value: filtersState[column],
+        datePickerType: "range"
+      }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.DatePickerInput, (0, _extends2.default)({
+        placeholder: "mm/dd/yyyy",
+        labelText: "Start date"
+      }, components.DatePickerInput.start)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.DatePickerInput, (0, _extends2.default)({
+        placeholder: "mm/dd/yyyy",
+        labelText: "End date"
+      }, components.DatePickerInput.end)));
+    } else if (type === _constants.NUMBER) {
+      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.NumberInput, (0, _extends2.default)({
+        step: 1,
+        allowEmpty: true,
+        hideSteppers: true
+      }, components.NumberInput, {
+        onChange: function onChange(event) {
+          var _components$NumberInp, _components$NumberInp2;
+          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, event.target.value)));
+          applyFilters({
+            column: column,
+            value: event.target.value,
+            type: type
+          });
+          (_components$NumberInp = (_components$NumberInp2 = components.NumberInput).onChange) === null || _components$NumberInp === void 0 ? void 0 : _components$NumberInp.call(_components$NumberInp2, event);
+        },
+        value: filtersState[column]
+      }));
+    } 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.Checkbox, (0, _extends2.default)({
+          key: option.labelText
+        }, option, {
+          onChange: function onChange(isSelected) {
+            var _option$onChange;
+            var checkboxCopy = filtersState[column];
+            var foundCheckbox = checkboxCopy.find(function (checkbox) {
+              return checkbox.value === option.value;
+            });
+            foundCheckbox.selected = isSelected;
+            setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, checkboxCopy)));
+            applyFilters({
+              column: column,
+              value: (0, _toConsumableArray2.default)(filtersState[column]),
+              type: type
+            });
+            (_option$onChange = option.onChange) === null || _option$onChange === void 0 ? void 0 : _option$onChange.call(option, isSelected);
+          },
+          checked: option.selected
+        }));
+      }));
+    } 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],
+        onChange: function onChange(selected) {
+          var _components$RadioButt, _components$RadioButt2;
+          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, selected)));
+          applyFilters({
+            column: column,
+            value: selected,
+            type: type
+          });
+          (_components$RadioButt = (_components$RadioButt2 = components.RadioButtonGroup).onChange) === null || _components$RadioButt === void 0 ? void 0 : _components$RadioButt.call(_components$RadioButt2, selected);
+        }
+      }), components.RadioButton.map(function (radio) {
+        var _ref4, _radio$id;
+        return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, (0, _extends2.default)({
+          key: (_ref4 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref4 !== void 0 ? _ref4 : radio.value
+        }, radio));
+      })));
+    } else if (type === _constants.DROPDOWN) {
+      return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, (0, _extends2.default)({}, components.Dropdown, {
+        selectedItem: filtersState[column],
+        onChange: function onChange(_ref5) {
+          var _components$Dropdown$, _components$Dropdown;
+          var selectedItem = _ref5.selectedItem;
+          setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, selectedItem)));
+          applyFilters({
+            column: column,
+            value: selectedItem,
+            type: type
+          });
+          (_components$Dropdown$ = (_components$Dropdown = components.Dropdown).onChange) === null || _components$Dropdown$ === void 0 ? void 0 : _components$Dropdown$.call(_components$Dropdown, selectedItem);
+        }
+      }));
+    }
+  }, [filtersState, applyFilters, setFiltersState]);
+
+  /** Renders all filters */
+  var renderFilters = (0, _react.useCallback)(function () {
+    return filters.map(renderFilter);
+  }, [filters, renderFilter]);
+  var renderActionSet = function renderActionSet() {
+    return showActionSet && /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
+      actions: [{
+        key: 1,
+        kind: 'primary',
+        label: primaryActionLabel,
+        onClick: apply,
+        isExpressive: false
+      }, {
+        key: 3,
+        kind: 'secondary',
+        label: secondaryActionLabel,
+        onClick: cancel,
+        isExpressive: false
+      }],
+      size: "md",
+      buttonSize: "md"
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(componentClass, "__container")
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: _iconsReact.Filter16,
+    iconDescription: flyoutIconDescription,
+    onClick: open ? closeFlyout : openFlyout,
+    className: (0, _classnames.default)("".concat(componentClass, "__trigger"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__trigger--open"), open))
+  }), /*#__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))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(componentClass, "__inner-container")
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(componentClass, "__title")
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(componentClass, "__filters")
+  }, renderFilters())), renderActionSet()));
+};
+FilterFlyout.propTypes = {
+  /**
+   * Array of filters to render
+   */
+  filters: _propTypes.default.arrayOf(_propTypes.default.shape({
+    type: _propTypes.default.string.isRequired,
+    column: _propTypes.default.string.isRequired,
+    props: _propTypes.default.object.isRequired
+  })).isRequired,
+  /**
+   * Icon description for the filter flyout button
+   */
+  flyoutIconDescription: _propTypes.default.string,
+  /**
+   * Callback when the apply button is clicked
+   */
+  onApply: _propTypes.default.func,
+  /**
+   * Callback when the cancel button is clicked
+   */
+  onCancel: _propTypes.default.func,
+  /**
+   * Callback when the flyout closes
+   */
+  onFlyoutClose: _propTypes.default.func,
+  /**
+   * Callback when the flyout opens
+   */
+  onFlyoutOpen: _propTypes.default.func,
+  /**
+   * Label text of the primary action in the flyout
+   */
+  primaryActionLabel: _propTypes.default.string,
+  /**
+   * Label text of the secondary action in the flyout
+   */
+  secondaryActionLabel: _propTypes.default.string,
+  /**
+   * Function that sets all the filters, this comes from the datagridState
+   */
+  setAllFilters: _propTypes.default.func.isRequired,
+  /**
+   * Function that sets an individual filter, this comes from the datagridState
+   */
+  setFilter: _propTypes.default.func.isRequired,
+  /**
+   * Boolean if you want the flyout to close when clicked outside of the parent
+   */
+  shouldClickOutsideToClose: _propTypes.default.bool,
+  /**
+   * Title of the filter flyout
+   */
+  title: _propTypes.default.string,
+  /**
+   * The update method used to apply the filters
+   */
+  updateMethod: _propTypes.default.oneOf([_constants.BATCH, _constants.INSTANT]).isRequired
+};
+var _default = FilterFlyout;
+exports.default = _default;