@carbon/ibm-products 2.11.3 → 2.12.1

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

@@ -5,23 +5,23 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.componentClass = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react2 = require("@carbon/react");
-var _layout = require("@carbon/layout");
-var _settings = require("../../../../../settings");
+var _react = require("@carbon/react");
 var _constants = require("./constants");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _framerMotion = require("framer-motion");
+var _react2 = _interopRequireWildcard(require("react"));
 var _variants = require("./motion/variants");
-var _icons = require("@carbon/react/icons");
+var _hooks = require("./hooks");
 var _ActionSet = require("../../../../ActionSet");
+var _icons = require("@carbon/react/icons");
 var _ = require(".");
-var _hooks = require("./hooks");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _framerMotion = require("framer-motion");
+var _settings = require("../../../../../settings");
+var _layout = require("@carbon/layout");
 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; }
 /**
@@ -35,6 +35,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var componentClass = "".concat(blockClass, "-filter-panel");
+exports.componentClass = componentClass;
 var MotionActionSet = (0, _framerMotion.motion)(_ActionSet.ActionSet);
 var FilterPanel = function FilterPanel(_ref) {
   var _cx;
@@ -69,17 +70,23 @@ var FilterPanel = function FilterPanel(_ref) {
     _ref$reactTableFilter = _ref.reactTableFiltersState,
     reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
   /** State */
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     showDividerLine = _useState2[0],
     setShowDividerLine = _useState2[1];
+
+  /** Context */
+  var _useContext = (0, _react2.useContext)(_.FilterContext),
+    panelOpen = _useContext.panelOpen,
+    setPanelOpen = _useContext.setPanelOpen;
   var _useFilters = (0, _hooks.useFilters)({
       updateMethod: updateMethod,
       filters: filterSections,
       setAllFilters: setAllFilters,
       variation: _constants.PANEL,
       reactTableFiltersState: reactTableFiltersState,
-      onCancel: onCancel
+      onCancel: onCancel,
+      panelOpen: panelOpen
     }),
     filtersState = _useFilters.filtersState,
     prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -91,10 +98,10 @@ var FilterPanel = function FilterPanel(_ref) {
     lastAppliedFilters = _useFilters.lastAppliedFilters;
 
   /** Refs */
-  var filterPanelRef = (0, _react.useRef)();
-  var filterHeadingRef = (0, _react.useRef)();
-  var filterSearchRef = (0, _react.useRef)();
-  var actionSetRef = (0, _react.useRef)();
+  var filterPanelRef = (0, _react2.useRef)();
+  var filterHeadingRef = (0, _react2.useRef)();
+  var filterSearchRef = (0, _react2.useRef)();
+  var actionSetRef = (0, _react2.useRef)();
 
   /** State from hooks */
   var _useShouldDisableButt = (0, _hooks.useShouldDisableButtons)({
@@ -107,15 +114,10 @@ var FilterPanel = function FilterPanel(_ref) {
     setShouldDisableButtons = _useShouldDisableButt2[1];
 
   /** Memos */
-  var showActionSet = (0, _react.useMemo)(function () {
+  var showActionSet = (0, _react2.useMemo)(function () {
     return updateMethod === _constants.BATCH;
   }, [updateMethod]);
 
-  /** Context */
-  var _useContext = (0, _react.useContext)(_.FilterContext),
-    panelOpen = _useContext.panelOpen,
-    setPanelOpen = _useContext.setPanelOpen;
-
   /** Methods */
   var closePanel = function closePanel() {
     cancel();
@@ -136,7 +138,7 @@ var FilterPanel = function FilterPanel(_ref) {
     lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
   };
   var renderActionSet = function renderActionSet() {
-    return showActionSet && /*#__PURE__*/_react.default.createElement(MotionActionSet, {
+    return showActionSet && /*#__PURE__*/_react2.default.createElement(MotionActionSet, {
       actions: [{
         key: 1,
         kind: 'primary',
@@ -164,14 +166,14 @@ var FilterPanel = function FilterPanel(_ref) {
   };
 
   /** Effects */
-  (0, _react.useEffect)(function liftOpenStateToParent() {
+  (0, _react2.useEffect)(function liftOpenStateToParent() {
     if (panelOpen) {
       onPanelOpen(panelOpen);
     } else {
       onPanelClose(panelOpen);
     }
   }, [panelOpen, onPanelClose, onPanelOpen]);
-  (0, _react.useEffect)(function setPanelMinimumHeight() {
+  (0, _react2.useEffect)(function setPanelMinimumHeight() {
     var _filterPanelRef$curre;
     (_filterPanelRef$curre = filterPanelRef.current) === null || _filterPanelRef$curre === void 0 || _filterPanelRef$curre.style.setProperty('--filter-panel-min-height', (0, _layout.rem)(filterPanelMinHeight));
   }, [filterPanelMinHeight]);
@@ -184,23 +186,23 @@ var FilterPanel = function FilterPanel(_ref) {
     var height = "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat(showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === _constants.BATCH ? actionSetHeight : 0, "px)");
     return height;
   };
-  return /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
+  return /*#__PURE__*/_react2.default.createElement(_framerMotion.motion.div, {
     ref: filterPanelRef,
     className: (0, _classnames.default)(componentClass, "".concat(componentClass, "__container"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(componentClass, "--open"), panelOpen), (0, _defineProperty2.default)(_cx, "".concat(componentClass, "--batch"), showActionSet), (0, _defineProperty2.default)(_cx, "".concat(componentClass, "--instant"), !showActionSet), _cx)),
     initial: false,
     animate: panelOpen ? 'visible' : 'hidden',
     variants: _variants.panelVariants
-  }, /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
+  }, /*#__PURE__*/_react2.default.createElement(_framerMotion.motion.div, {
     variants: _variants.innerContainerVariants
-  }, /*#__PURE__*/_react.default.createElement("header", {
+  }, /*#__PURE__*/_react2.default.createElement("header", {
     ref: filterHeadingRef,
     className: (0, _classnames.default)("".concat(componentClass, "__heading"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__heading--with-divider"), showDividerLine))
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react2.default.createElement("div", {
     className: "".concat(componentClass, "__title")
-  }, title), /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, title), /*#__PURE__*/_react2.default.createElement(_react.Button, {
     hasIconOnly: true,
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_icons.Close, (0, _extends2.default)({
+      return /*#__PURE__*/_react2.default.createElement(_icons.Close, (0, _extends2.default)({
         size: 16
       }, props));
     },
@@ -209,14 +211,14 @@ var FilterPanel = function FilterPanel(_ref) {
     tooltipPosition: "bottom",
     tooltipAlignment: "end",
     onClick: closePanel
-  }), showFilterSearch && /*#__PURE__*/_react.default.createElement("div", {
+  }), showFilterSearch && /*#__PURE__*/_react2.default.createElement("div", {
     ref: filterSearchRef,
     className: "".concat(componentClass, "__search")
-  }, /*#__PURE__*/_react.default.createElement(_react2.Layer, null, /*#__PURE__*/_react.default.createElement(_react2.Search, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.Layer, null, /*#__PURE__*/_react2.default.createElement(_react.Search, {
     labelText: searchLabelText,
     placeholder: searchPlaceholder,
     size: "sm"
-  })))), /*#__PURE__*/_react.default.createElement("div", {
+  })))), /*#__PURE__*/_react2.default.createElement("div", {
     className: "".concat(componentClass, "__inner-container"),
     style: {
       height: getScrollableContainerHeight()
@@ -228,15 +230,15 @@ var FilterPanel = function FilterPanel(_ref) {
       _ref2$filters = _ref2.filters,
       filters = _ref2$filters === void 0 ? [] : _ref2$filters,
       hasAccordion = _ref2.hasAccordion;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/_react2.default.createElement("div", {
       key: index,
       className: "".concat(componentClass, "__category")
-    }, categoryTitle && /*#__PURE__*/_react.default.createElement("div", {
+    }, categoryTitle && /*#__PURE__*/_react2.default.createElement("div", {
       className: "".concat(componentClass, "__category-title")
-    }, categoryTitle), hasAccordion ? /*#__PURE__*/_react.default.createElement(_react2.Accordion, null, filters.map(function (_ref3) {
+    }, categoryTitle), hasAccordion ? /*#__PURE__*/_react2.default.createElement(_react.Accordion, null, filters.map(function (_ref3) {
       var filterLabel = _ref3.filterLabel,
         filter = _ref3.filter;
-      return /*#__PURE__*/_react.default.createElement(_react2.AccordionItem, {
+      return /*#__PURE__*/_react2.default.createElement(_react.AccordionItem, {
         title: filterLabel,
         key: filterLabel
       }, renderFilter(filter));

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

@@ -5,20 +5,22 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FilterProvider = exports.FilterContext = void 0;
+exports.clearSingleFilter = exports.FilterProvider = exports.FilterContext = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _constants = require("./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; }
-/**
- * Copyright IBM Corp. 2022, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
+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) { (0, _defineProperty2.default)(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, 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.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       */
 var FilterContext = /*#__PURE__*/(0, _react.createContext)();
 exports.FilterContext = FilterContext;
 var EventEmitter = {
@@ -39,42 +41,124 @@ 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 === _constants.CHECKBOX) {
+    return;
+  }
+  if (type === _constants.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);
+};
+var clearSingleFilter = function clearSingleFilter(_ref, setAllFilters, state) {
+  var key = _ref.key,
+    value = _ref.value;
+  var tempState = (0, _toConsumableArray2.default)(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 === _constants.CHECKBOX) {
+        /**
+          When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
+          This checks if all the checkboxes are selected = false and removes it from the array
+        */
+        var valueIndex = filterValues.findIndex(function (val) {
+          return val.id === value;
+        });
+        filterValues[valueIndex].selected = false;
+        var updatedFilterObject = _objectSpread(_objectSpread({}, f), {}, {
+          value: (0, _toConsumableArray2.default)(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);
+};
+exports.clearSingleFilter = clearSingleFilter;
+var handleSingleFilterRemoval = function handleSingleFilterRemoval(key, value) {
+  EventEmitter.dispatch(_constants.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 === _constants.DROPDOWN || type === _constants.RADIO || type === _constants.NUMBER) {
-      tags.push({
+      tags.push(_objectSpread({
         key: id,
         value: value
-      });
+      }, sharedFilterProps));
     } else if (type === _constants.DATE) {
+      var _renderDateLabel;
       var _value = (0, _slicedToArray2.default)(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 === _constants.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;
 };
-var FilterProvider = function FilterProvider(_ref2) {
-  var children = _ref2.children,
-    filters = _ref2.filters;
-  var filterTags = prepareFiltersForTags(filters);
+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 = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     panelOpen = _useState2[0],
@@ -92,5 +176,6 @@ var FilterProvider = function FilterProvider(_ref2) {
 exports.FilterProvider = FilterProvider;
 FilterProvider.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
+  filterProps: _propTypes.default.object,
   filters: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
 };

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

@@ -0,0 +1,79 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("@carbon/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _FilterPanel = require("./FilterPanel");
+var _useFilters = require("./hooks/useFilters");
+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; }
+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 = (0, _react2.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_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__*/_react2.default.createElement(_react.Checkbox, (0, _extends2.default)({
+      key: option.labelText
+    }, option, {
+      onChange: function onChange(_, _ref2) {
+        var checked = _ref2.checked;
+        return (0, _useFilters.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__*/_react2.default.createElement(_react.FormGroup, components.FormGroup, firstFiveItems.map(renderCheckbox), showAllItems && restOfTheItems.map(renderCheckbox), /*#__PURE__*/_react2.default.createElement(_react.Button, {
+    className: "".concat(_FilterPanel.componentClass, "__view-all-button"),
+    kind: "ghost",
+    size: "sm",
+    onClick: function onClick() {
+      return setShowAllItems(!showAllItems);
+    }
+  }, renderViewAllButtonText()));
+};
+OverflowCheckboxes.propTypes = {
+  applyFilters: _propTypes.default.func,
+  column: _propTypes.default.string,
+  components: _propTypes.default.object,
+  filtersState: _propTypes.default.object,
+  setFiltersState: _propTypes.default.func,
+  type: _propTypes.default.string,
+  viewAllLabel: _propTypes.default.string,
+  viewLessLabel: _propTypes.default.string
+};
+var _default = OverflowCheckboxes;
+exports.default = _default;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RADIO = exports.PANEL_WIDTH = exports.PANEL = exports.NUMBER = exports.INSTANT = exports.FLYOUT = exports.DROPDOWN = exports.DATE = exports.CLEAR_FILTERS = exports.CHECKBOX = exports.BATCH = exports.ACTION_SET_HEIGHT = void 0;
+exports.RADIO = exports.PANEL_WIDTH = exports.PANEL = exports.NUMBER = exports.INSTANT = exports.FLYOUT = exports.DROPDOWN = exports.DATE = exports.CLEAR_SINGLE_FILTER = exports.CLEAR_FILTERS = exports.CHECKBOX = exports.BATCH = exports.ACTION_SET_HEIGHT = void 0;
 /**
  * Copyright IBM Corp. 2022, 2022
  *
@@ -36,9 +36,11 @@ var DROPDOWN = 'dropdown';
 /** Constants for event emitters */
 exports.DROPDOWN = DROPDOWN;
 var CLEAR_FILTERS = 'clearFilters';
+exports.CLEAR_FILTERS = CLEAR_FILTERS;
+var CLEAR_SINGLE_FILTER = 'clearSingleFilter';
 
 /** Constants for panel dimensions */
-exports.CLEAR_FILTERS = CLEAR_FILTERS;
+exports.CLEAR_SINGLE_FILTER = CLEAR_SINGLE_FILTER;
 var PANEL_WIDTH = 320;
 exports.PANEL_WIDTH = PANEL_WIDTH;
 var ACTION_SET_HEIGHT = 64;