@carbon/ibm-products 2.11.3 → 2.12.0

package/es/components/CreateFullPage/CreateFullPage.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "initialStep", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "title"];
+var _excluded = ["breadcrumbsOverflowAriaLabel", "breadcrumbs", "backButtonText", "cancelButtonText", "children", "className", "initialStep", "maxVisibleBreadcrumbs", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "noTrailingSlash", "title", "secondaryTitle"];
 /**
  * Copyright IBM Corp. 2021, 2023
  *
@@ -10,7 +10,7 @@ var _excluded = ["backButtonText", "cancelButtonText", "children", "className",
  */
 
 // Import portions of React that are needed.
-import React, { useEffect, useState, createContext } from 'react';
+import React, { useEffect, useState, createContext, useRef } from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
@@ -25,6 +25,7 @@ import { ActionSet } from '../ActionSet';
 import { usePreviousValue, useValidCreateStepCount, useResetCreateComponent, useCreateComponentFocus, useCreateComponentStepChange } from '../../global/js/hooks';
 import { lastIndexInArray } from '../../global/js/utils/lastIndexInArray';
 import { getNumberOfHiddenSteps } from '../../global/js/utils/getNumberOfHiddenSteps';
+import { SimpleHeader, overflowAriaLabel_required_if_breadcrumbs_exist } from '../SimpleHeader/SimpleHeader';
 var blockClass = "".concat(pkg.prefix, "--create-full-page");
 var componentName = 'CreateFullPage';
 
@@ -50,11 +51,14 @@ include `<Row>` and `<Column>` components inside of each `CreateFullPageStep`
 component to get the desired affect.
  */
 export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var backButtonText = _ref.backButtonText,
+  var breadcrumbsOverflowAriaLabel = _ref.breadcrumbsOverflowAriaLabel,
+    breadcrumbs = _ref.breadcrumbs,
+    backButtonText = _ref.backButtonText,
     cancelButtonText = _ref.cancelButtonText,
     children = _ref.children,
     className = _ref.className,
     initialStep = _ref.initialStep,
+    maxVisibleBreadcrumbs = _ref.maxVisibleBreadcrumbs,
     modalDangerButtonText = _ref.modalDangerButtonText,
     modalDescription = _ref.modalDescription,
     modalSecondaryButtonText = _ref.modalSecondaryButtonText,
@@ -64,7 +68,9 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onRequestSubmit = _ref.onRequestSubmit,
     firstFocusElement = _ref.firstFocusElement,
     submitButtonText = _ref.submitButtonText,
+    noTrailingSlash = _ref.noTrailingSlash,
     title = _ref.title,
+    secondaryTitle = _ref.secondaryTitle,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -114,6 +120,11 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState22 = _slicedToArray(_useState21, 2),
     lastIncludedStep = _useState22[0],
     setLastIncludedStep = _useState22[1];
+  var _useState23 = useState(0),
+    _useState24 = _slicedToArray(_useState23, 2),
+    headerHeight = _useState24[0],
+    setHeaderHeight = _useState24[1];
+  var headerRef = useRef(null);
   useEffect(function () {
     var firstItem = stepData.findIndex(function (item) {
       return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
@@ -130,6 +141,13 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setCurrentStep(Number(initialStep + numberOfHiddenSteps));
     }
   }, [stepData, firstIncludedStep, lastIncludedStep, initialStep]);
+  useEffect(function () {
+    var headerHeight = 0;
+    if (title || (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) > 0) {
+      headerHeight = headerRef.current.getBoundingClientRect().height;
+    }
+    setHeaderHeight(headerHeight);
+  }, [title, breadcrumbs]);
   useCreateComponentFocus({
     previousState: previousState,
     currentStep: currentStep,
@@ -171,18 +189,31 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setCreateComponentActions: setCreateFullPageActions,
     setModalIsOpen: setModalIsOpen
   });
-
   // currently, we are not supporting the use of 'view all' toggle state
   /* istanbul ignore next */
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     ref: ref,
     className: cx(blockClass, className)
-  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
+  }, getDevtoolsProps(componentName)), (title || (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) > 0) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__header"),
+    ref: headerRef
+  }, /*#__PURE__*/React.createElement(SimpleHeader, {
+    title: title,
+    breadcrumbs: breadcrumbs,
+    noTrailingSlash: noTrailingSlash,
+    overflowAriaLabel: breadcrumbsOverflowAriaLabel,
+    maxVisible: maxVisibleBreadcrumbs
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__influencer-and-body-container"),
+    style: {
+      height: "calc(100vh - ".concat(headerHeight, "px)")
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__influencer")
   }, /*#__PURE__*/React.createElement(CreateInfluencer, {
     stepData: stepData,
     currentStep: currentStep,
-    title: title
+    title: secondaryTitle
   })), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__body")
   }, /*#__PURE__*/React.createElement("div", {
@@ -239,7 +270,7 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     type: "button",
     kind: "danger",
     onClick: onClose
-  }, modalDangerButtonText))));
+  }, modalDangerButtonText)))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag.
@@ -257,6 +288,23 @@ CreateFullPage.propTypes = {
    * The back button text
    */
   backButtonText: PropTypes.string.isRequired,
+  /** The header breadcrumbs */
+  breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
+    /** breadcrumb item key */
+    key: PropTypes.string.isRequired,
+    /** breadcrumb item label */
+    label: PropTypes.string.isRequired,
+    /** breadcrumb item link */
+    href: PropTypes.string,
+    /** breadcrumb item title tooltip */
+    title: PropTypes.string,
+    /** Provide if this breadcrumb item represents the current page */
+    isCurrentPage: PropTypes.bool
+  })),
+  /**
+   * Label for open/close overflow button used for breadcrumb items that do not fit
+   */
+  breadcrumbsOverflowAriaLabel: overflowAriaLabel_required_if_breadcrumbs_exist,
   /**
    * The cancel button text
    */
@@ -279,6 +327,8 @@ CreateFullPage.propTypes = {
    * is now being completed.
    */
   initialStep: PropTypes.number,
+  /**	Maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1) */
+  maxVisibleBreadcrumbs: PropTypes.number,
   /**
    * The primary 'danger' button text in the modal
    */
@@ -299,6 +349,10 @@ CreateFullPage.propTypes = {
    * The next button text
    */
   nextButtonText: PropTypes.string.isRequired,
+  /**
+   * A prop to omit the trailing slash for the breadcrumbs
+   */
+  noTrailingSlash: PropTypes.bool,
   /**
    * An optional handler that is called when the user closes the full page (by
    * clicking the secondary button, located in the modal, which triggers after
@@ -310,6 +364,10 @@ CreateFullPage.propTypes = {
    * This function can _optionally_ return a promise that is either resolved or rejected and the CreateFullPage will handle the submitting state of the create button.
    */
   onRequestSubmit: PropTypes.func.isRequired,
+  /**
+   * A secondary title of the full page, displayed in the influencer area
+   */
+  secondaryTitle: PropTypes.string,
   /**
    * @ignore
    * The aria label to be used for the UI Shell SideNav Carbon component
@@ -320,7 +378,7 @@ CreateFullPage.propTypes = {
    */
   submitButtonText: PropTypes.string.isRequired,
   /**
-   * The main title of the full page, displayed in the influencer area.
+   * The main title of the full page, displayed in the header area
    */
   title: PropTypes.string
 };

package/es/components/Datagrid/Datagrid/Datagrid.js

@@ -44,7 +44,8 @@ export var Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     datagridState: datagridState
   };
   return /*#__PURE__*/React.createElement(FilterProvider, {
-    filters: filters
+    filters: filters,
+    filterProps: filterProps
   }, /*#__PURE__*/React.createElement(InlineEditProvider, null, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     id: tableId,
     ref: ref,

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -11,7 +11,7 @@ import { FilterContext, FilterPanel } from './addons/Filtering';
 import React, { useContext, useEffect, useRef } from 'react';
 import { Table, TableContainer } from '@carbon/react';
 import { carbon, pkg } from '../../../settings';
-import { CLEAR_FILTERS } from './addons/Filtering/constants';
+import { CLEAR_FILTERS, CLEAR_SINGLE_FILTER } from './addons/Filtering/constants';
 import DatagridBody from './DatagridBody';
 import DatagridHead from './DatagridHead';
 import DatagridToolbar from './DatagridToolbar';
@@ -24,6 +24,8 @@ import { handleGridKeyPress } from './addons/InlineEdit/handleGridKeyPress';
 import { px } from '@carbon/layout';
 import { useClickOutside } from '../../../global/js/hooks';
 import { useMultipleKeyTracking } from '../../DataSpreadsheet/hooks';
+import { useSubscribeToEventEmitter } from './addons/Filtering/hooks';
+import { clearSingleFilter } from './addons/Filtering/FilterProvider';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var DatagridContent = function DatagridContent(_ref) {
   var _cx4;
@@ -59,6 +61,7 @@ export var DatagridContent = function DatagridContent(_ref) {
     DatagridActions = datagridState.DatagridActions,
     totalColumnsWidth = datagridState.totalColumnsWidth,
     gridRef = datagridState.gridRef,
+    setAllFilters = datagridState.setAllFilters,
     state = datagridState.state,
     page = datagridState.page,
     rows = datagridState.rows;
@@ -124,6 +127,9 @@ export var DatagridContent = function DatagridContent(_ref) {
       gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), px((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
+  useSubscribeToEventEmitter(CLEAR_SINGLE_FILTER, function (id) {
+    return clearSingleFilter(id, setAllFilters, state);
+  });
   var renderFilterSummary = function renderFilterSummary() {
     return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary, {
       className: "".concat(blockClass, "__filter-summary"),

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -50,11 +50,23 @@ var SelectAll = function SelectAll(datagridState) {
   var _getProps = getProps(),
     onChange = _getProps.onChange,
     selectProps = _objectWithoutProperties(_getProps, _excluded);
+  var _ref = selectProps || {},
+    indeterminate = _ref.indeterminate;
+  var handleSelectAllChange = function handleSelectAllChange(event) {
+    if (indeterminate) {
+      return onChange === null || onChange === void 0 ? void 0 : onChange({
+        target: {
+          checked: false
+        }
+      });
+    }
+    return onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: cx("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
   }, /*#__PURE__*/React.createElement(TableSelectAll, _extends({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
-    onSelect: onChange,
+    onSelect: handleSelectAllChange,
     disabled: isFetching || selectProps.disabled,
     id: "".concat(tableId, "-select-all-checkbox-id")
   })));

package/es/components/Datagrid/Datagrid/DraggableElement.js

@@ -26,6 +26,7 @@ var DraggableElement = function DraggableElement(_ref) {
     isSticky = _ref.isSticky,
     selected = _ref.selected;
   var _useSortable = useSortable({
+      disabled: disabled,
       id: id
     }),
     attributes = _useSortable.attributes,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -39,19 +40,39 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
     var _getColTitle;
     return filterString.length === 0 || ((_getColTitle = getColTitle(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
   });
+  var getUpdatedDragCols = function getUpdatedDragCols() {
+    var tempCols = _toConsumableArray(visibleCols);
+    tempCols.forEach(function (col) {
+      if (col.sticky) {
+        col.disabled = true;
+      }
+    });
+    return tempCols;
+  };
+  var updatedDragCols = getUpdatedDragCols();
 
   // let localRefCopy;
   var handleDragEnd = function handleDragEnd(event) {
+    var _destOverCol$;
     var active = event.active,
       over = event.over;
+
+    // Stop any re-ordering updates if the destination column is disabled
+    // ie: it is a frozen column.
+    var destOverCol = updatedDragCols.filter(function (item) {
+      return item.id === over.id;
+    });
+    if (destOverCol !== null && destOverCol !== void 0 && destOverCol.length && (_destOverCol$ = destOverCol[0]) !== null && _destOverCol$ !== void 0 && _destOverCol$.disabled) {
+      return;
+    }
     var fromVisibleIndex = columns.findIndex(function (col) {
       return matchedColsById(col, active);
     });
     var toVisibleIndex = columns.findIndex(function (col) {
       return matchedColsById(col, over);
     });
-    var colTitle = getColTitle(visibleCols[fromVisibleIndex]);
-    setAriaRegionText("".concat(colTitle, " dropped. New position ").concat(toVisibleIndex + 1, " of ").concat(visibleCols.length, "."));
+    var colTitle = getColTitle(updatedDragCols[fromVisibleIndex]);
+    setAriaRegionText("".concat(colTitle, " dropped. New position ").concat(toVisibleIndex + 1, " of ").concat(updatedDragCols.length, "."));
     var fromIndex = columns.findIndex(function (col) {
       return matchedColsById(col, active);
     });
@@ -62,23 +83,23 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
   };
   var handleDragStart = function handleDragStart(event) {
     var active = event.active;
-    var fromIndex = visibleCols.findIndex(function (col) {
+    var fromIndex = updatedDragCols.findIndex(function (col) {
       return matchedColsById(col, active);
     });
-    var colTitle = getColTitle(visibleCols[fromIndex]);
-    setAriaRegionText("".concat(colTitle, " grabbed. Current position ").concat(fromIndex + 1, " of ").concat(visibleCols.length, "."));
+    var colTitle = getColTitle(updatedDragCols[fromIndex]);
+    setAriaRegionText("".concat(colTitle, " grabbed. Current position ").concat(fromIndex + 1, " of ").concat(updatedDragCols.length, "."));
   };
   var handleDragUpdate = function handleDragUpdate(event) {
     var active = event.active,
       over = event.over;
-    var fromIndex = visibleCols.findIndex(function (col) {
+    var fromIndex = updatedDragCols.findIndex(function (col) {
       return matchedColsById(col, active);
     });
-    var toIndex = visibleCols.findIndex(function (col) {
+    var toIndex = updatedDragCols.findIndex(function (col) {
       return matchedColsById(col, over);
     });
-    var colTitle = getColTitle(visibleCols[fromIndex]);
-    setAriaRegionText("".concat(colTitle, " grabbed. Original position ").concat(fromIndex + 1, ", new position ").concat(toIndex + 1, " of ").concat(visibleCols.length, "."));
+    var colTitle = getColTitle(updatedDragCols[fromIndex]);
+    setAriaRegionText("".concat(colTitle, " grabbed. Original position ").concat(fromIndex + 1, ", new position ").concat(toIndex + 1, " of ").concat(updatedDragCols.length, "."));
   };
   var pointerSensor = useSensor(PointerSensor, {
     // Require the mouse to move by 10 pixels before activating
@@ -137,7 +158,7 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
       key: colDef.id
     });
   })), /*#__PURE__*/React.createElement(SortableContext, {
-    items: visibleCols,
+    items: updatedDragCols,
     strategy: verticalListSortingStrategy
   }, visibleCols.map(function (colDef) {
     var colHeaderTitle = getColTitle(colDef);

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

@@ -10,21 +10,21 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /* eslint-disable react/jsx-key */
 
-import React, { useRef, useMemo, useContext, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Accordion, AccordionItem, Button, Search, Layer } from '@carbon/react';
-import { rem } from '@carbon/layout';
-import { pkg } from '../../../../../settings';
+import { Accordion, AccordionItem, Button, Layer, Search } from '@carbon/react';
 import { BATCH, CLEAR_FILTERS, INSTANT, PANEL } from './constants';
-import cx from 'classnames';
-import { motion } from 'framer-motion';
-import { panelVariants, innerContainerVariants, actionSetVariants } from './motion/variants';
-import { Close } from '@carbon/react/icons';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { actionSetVariants, innerContainerVariants, panelVariants } from './motion/variants';
+import { useFilters, useShouldDisableButtons, useSubscribeToEventEmitter } from './hooks';
 import { ActionSet } from '../../../../ActionSet';
+import { Close } from '@carbon/react/icons';
 import { FilterContext } from '.';
-import { useFilters, useSubscribeToEventEmitter, useShouldDisableButtons } from './hooks';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { motion } from 'framer-motion';
+import { pkg } from '../../../../../settings';
+import { rem } from '@carbon/layout';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var componentClass = "".concat(blockClass, "-filter-panel");
+export var componentClass = "".concat(blockClass, "-filter-panel");
 var MotionActionSet = motion(ActionSet);
 var FilterPanel = function FilterPanel(_ref) {
   var _cx;
@@ -63,13 +63,19 @@ var FilterPanel = function FilterPanel(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     showDividerLine = _useState2[0],
     setShowDividerLine = _useState2[1];
+
+  /** Context */
+  var _useContext = useContext(FilterContext),
+    panelOpen = _useContext.panelOpen,
+    setPanelOpen = _useContext.setPanelOpen;
   var _useFilters = useFilters({
       updateMethod: updateMethod,
       filters: filterSections,
       setAllFilters: setAllFilters,
       variation: PANEL,
       reactTableFiltersState: reactTableFiltersState,
-      onCancel: onCancel
+      onCancel: onCancel,
+      panelOpen: panelOpen
     }),
     filtersState = _useFilters.filtersState,
     prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -101,11 +107,6 @@ var FilterPanel = function FilterPanel(_ref) {
     return updateMethod === BATCH;
   }, [updateMethod]);
 
-  /** Context */
-  var _useContext = useContext(FilterContext),
-    panelOpen = _useContext.panelOpen,
-    setPanelOpen = _useContext.setPanelOpen;
-
   /** Methods */
   var closePanel = function closePanel() {
     cancel();

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

@@ -1,13 +1,17 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * 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.
  */
 import React, { createContext, useState } from 'react';
 import PropTypes from 'prop-types';
-import { DATE, DROPDOWN, NUMBER, RADIO, CHECKBOX } from './constants';
+import { DATE, DROPDOWN, NUMBER, RADIO, CHECKBOX, CLEAR_SINGLE_FILTER } from './constants';
 export var FilterContext = /*#__PURE__*/createContext();
 var EventEmitter = {
   events: {},
@@ -27,42 +31,123 @@ var EventEmitter = {
     }
   }
 };
-var prepareFiltersForTags = function prepareFiltersForTags(filters) {
+var removeFilterItem = function removeFilterItem(state, index) {
+  return state.splice(index, 1);
+};
+var updateFilterState = function updateFilterState(state, type, value) {
+  if (type === CHECKBOX) {
+    return;
+  }
+  if (type === DATE) {
+    var _filterTagIndex = state.findIndex(function (val) {
+      return formatDateRange(val.value[0], val.value[1]) === formatDateRange(value[0], value[1]);
+    });
+    return removeFilterItem(state, _filterTagIndex);
+  }
+  var filterTagIndex = state.findIndex(function (val) {
+    return val.value === value;
+  });
+  return removeFilterItem(state, filterTagIndex);
+};
+export var clearSingleFilter = function clearSingleFilter(_ref, setAllFilters, state) {
+  var key = _ref.key,
+    value = _ref.value;
+  var tempState = _toConsumableArray(state.filters);
+  tempState.forEach(function (f, filterIndex) {
+    if (f.id === key) {
+      var filterValues = f.value;
+      var filterType = f.type;
+      updateFilterState(tempState, filterType, value);
+      if (filterType === 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 valueIndex = filterValues.findIndex(function (val) {
+          return val.id === value;
+        });
+        filterValues[valueIndex].selected = false;
+        var updatedFilterObject = _objectSpread(_objectSpread({}, f), {}, {
+          value: _toConsumableArray(filterValues)
+        });
+        tempState[filterIndex] = updatedFilterObject;
+        var index = tempState.findIndex(function (filter) {
+          return filter.id === key;
+        });
+
+        // If all the selected state is false remove from array
+        var shouldRemoveFromArray = tempState[index].value.every(function (val) {
+          return val.selected === false;
+        });
+        if (shouldRemoveFromArray) {
+          removeFilterItem(tempState, index);
+        }
+      }
+    }
+  });
+  setAllFilters(tempState);
+};
+var handleSingleFilterRemoval = function handleSingleFilterRemoval(key, value) {
+  EventEmitter.dispatch(CLEAR_SINGLE_FILTER, {
+    key: key,
+    value: value
+  });
+};
+var formatDateRange = function formatDateRange(startDate, endDate) {
+  var startDateObj = new Date(startDate);
+  var endDateObj = new Date(endDate);
+  return "".concat(startDateObj.toLocaleDateString(), " - ").concat(endDateObj.toLocaleDateString());
+};
+var prepareFiltersForTags = function prepareFiltersForTags(filters, renderDateLabel) {
   var tags = [];
-  filters.forEach(function (_ref) {
-    var id = _ref.id,
-      type = _ref.type,
-      value = _ref.value;
+  filters.forEach(function (_ref2) {
+    var id = _ref2.id,
+      type = _ref2.type,
+      value = _ref2.value;
+    var sharedFilterProps = {
+      filter: true,
+      onClose: function onClose() {
+        return handleSingleFilterRemoval(id, value);
+      }
+    };
     if (type === DROPDOWN || type === RADIO || type === NUMBER) {
-      tags.push({
+      tags.push(_objectSpread({
         key: id,
         value: value
-      });
+      }, sharedFilterProps));
     } else if (type === DATE) {
+      var _renderDateLabel;
       var _value = _slicedToArray(value, 2),
         startDate = _value[0],
         endDate = _value[1];
-      tags.push({
+      tags.push(_objectSpread({
         key: id,
-        value: "".concat(startDate.toLocaleDateString(), " - ").concat(endDate.toLocaleDateString())
-      });
+        value: (_renderDateLabel = renderDateLabel === null || renderDateLabel === void 0 ? void 0 : renderDateLabel(startDate, endDate)) !== null && _renderDateLabel !== void 0 ? _renderDateLabel : formatDateRange(startDate, endDate)
+      }, sharedFilterProps));
     } else if (type === CHECKBOX) {
       value.forEach(function (checkbox) {
         if (checkbox.selected) {
-          tags.push({
+          tags.push(_objectSpread(_objectSpread({
             key: id,
             value: checkbox.value
-          });
+          }, sharedFilterProps), {}, {
+            onClose: function onClose() {
+              return handleSingleFilterRemoval(id, checkbox.value);
+            }
+          }));
         }
       });
     }
   });
   return tags;
 };
-export var FilterProvider = function FilterProvider(_ref2) {
-  var children = _ref2.children,
-    filters = _ref2.filters;
-  var filterTags = prepareFiltersForTags(filters);
+export var FilterProvider = function FilterProvider(_ref3) {
+  var children = _ref3.children,
+    filters = _ref3.filters,
+    filterProps = _ref3.filterProps;
+  var _ref4 = filterProps || {},
+    renderDateLabel = _ref4.renderDateLabel;
+  var filterTags = prepareFiltersForTags(filters, renderDateLabel);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     panelOpen = _useState2[0],
@@ -79,5 +164,6 @@ export var FilterProvider = function FilterProvider(_ref2) {
 };
 FilterProvider.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  filterProps: PropTypes.object,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired
 };

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

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { Button, Checkbox, FormGroup } from '@carbon/react';
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { componentClass } from './FilterPanel';
+import { handleCheckboxChange } from './hooks/useFilters';
+var OverflowCheckboxes = function OverflowCheckboxes(_ref) {
+  var components = _ref.components,
+    filtersState = _ref.filtersState,
+    column = _ref.column,
+    setFiltersState = _ref.setFiltersState,
+    type = _ref.type,
+    applyFilters = _ref.applyFilters,
+    _ref$viewAllLabel = _ref.viewAllLabel,
+    viewAllLabel = _ref$viewAllLabel === void 0 ? 'View all' : _ref$viewAllLabel,
+    _ref$viewLessLabel = _ref.viewLessLabel,
+    viewLessLabel = _ref$viewLessLabel === void 0 ? 'View less' : _ref$viewLessLabel;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showAllItems = _useState2[0],
+    setShowAllItems = _useState2[1];
+  var firstFiveItems = filtersState[column].value.slice(0, 5);
+  var restOfTheItems = filtersState[column].value.slice(5, filtersState[column].value.length - 1);
+  var renderCheckbox = function renderCheckbox(option) {
+    return /*#__PURE__*/React.createElement(Checkbox, _extends({
+      key: option.labelText
+    }, option, {
+      onChange: function onChange(_, _ref2) {
+        var checked = _ref2.checked;
+        return handleCheckboxChange({
+          checked: checked,
+          filtersState: filtersState,
+          column: column,
+          option: option,
+          setFiltersState: setFiltersState,
+          applyFilters: applyFilters,
+          type: type
+        });
+      },
+      checked: option.selected,
+      disabled: option.disabled
+    }));
+  };
+  var renderViewAllButtonText = function renderViewAllButtonText() {
+    /** This should render the text "View all ([amount of checkboxes])" or "View less" */
+    return showAllItems ? viewLessLabel : "".concat(viewAllLabel, " (").concat(filtersState[column].value.length, ")");
+  };
+  return /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, firstFiveItems.map(renderCheckbox), showAllItems && restOfTheItems.map(renderCheckbox), /*#__PURE__*/React.createElement(Button, {
+    className: "".concat(componentClass, "__view-all-button"),
+    kind: "ghost",
+    size: "sm",
+    onClick: function onClick() {
+      return setShowAllItems(!showAllItems);
+    }
+  }, renderViewAllButtonText()));
+};
+OverflowCheckboxes.propTypes = {
+  applyFilters: PropTypes.func,
+  column: PropTypes.string,
+  components: PropTypes.object,
+  filtersState: PropTypes.object,
+  setFiltersState: PropTypes.func,
+  type: PropTypes.string,
+  viewAllLabel: PropTypes.string,
+  viewLessLabel: PropTypes.string
+};
+export default OverflowCheckboxes;

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

@@ -21,6 +21,7 @@ export var DROPDOWN = 'dropdown';
 
 /** Constants for event emitters */
 export var CLEAR_FILTERS = 'clearFilters';
+export var CLEAR_SINGLE_FILTER = 'clearSingleFilter';
 
 /** Constants for panel dimensions */
 export var PANEL_WIDTH = 320;