@carbon/ibm-products 2.27.0 → 2.28.0-alpha.4

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

@@ -5,21 +5,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { isValidElement } from 'react';
 import { pkg } from '../../../settings.js';
+import cx from 'classnames';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 // eslint-disable-next-line react/prop-types
 var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentComponent) {
   return function (datagridState) {
+    var _row$original;
     var row = datagridState.row;
     var expandedContentHeight = row.expandedContentHeight;
     var toggleParentHoverClass = function toggleParentHoverClass(event, eventType) {
       var _event$target;
       /* istanbul ignore else */
-      if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target = _event$target.parentNode) !== null && _event$target !== void 0 && _event$target.previousElementSibling) {
-        var parentNode = event.target.parentNode.previousElementSibling;
+      if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && _event$target.closest('tr').previousElementSibling) {
+        var _event$target2;
+        var parentNode = event === null || event === void 0 || (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.closest('tr').previousElementSibling;
         if (eventType === 'enter') {
           parentNode.classList.add("".concat(blockClass, "__expandable-row--hover"));
         } else {
@@ -28,7 +32,7 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
       }
     };
     return /*#__PURE__*/React__default.createElement("tr", {
-      className: "".concat(blockClass, "__expanded-row"),
+      className: cx("".concat(blockClass, "__expanded-row"), _defineProperty({}, "".concat(blockClass, "__slug--row"), /*#__PURE__*/isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug))),
       onMouseEnter: function onMouseEnter(event) {
         return toggleParentHoverClass(event, 'enter');
       },

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

@@ -7,7 +7,7 @@
 
 import { slicedToArray as _slicedToArray, objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useEffect, useState, isValidElement } from 'react';
-import cx from '../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { TableRow, TableHeader } from '@carbon/react';
 import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids.js';

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

@@ -7,7 +7,7 @@
 
 import { extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import cx from '../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../../settings.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");

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

@@ -5,17 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { isValidElement } from 'react';
 import { TableRow, SkeletonText, TableCell } from '@carbon/react';
 import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids.js';
-import cx from '../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg, carbon } from '../../../settings.js';
 import { DatagridSlug } from './addons/Slug/DatagridSlug.js';
 
 var _SkeletonText;
-var _excluded = ["role"],
+var _excluded = ["role", "className"],
   _excluded2 = ["children", "role"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var rowHeights = {
@@ -28,7 +28,7 @@ var rowHeights = {
 
 // eslint-disable-next-line react/prop-types
 var DatagridRow = function DatagridRow(datagridState) {
-  var _row$original, _row$original2;
+  var _row$original, _row$original2, _row$original3;
   var row = datagridState.row,
     rows = datagridState.rows,
     rowSize = datagridState.rowSize,
@@ -38,7 +38,8 @@ var DatagridRow = function DatagridRow(datagridState) {
     tableId = datagridState.tableId,
     withExpandedRows = datagridState.withExpandedRows,
     withMouseHover = datagridState.withMouseHover,
-    setMouseOverRowIndex = datagridState.setMouseOverRowIndex;
+    setMouseOverRowIndex = datagridState.setMouseOverRowIndex,
+    headers = datagridState.headers;
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -98,7 +99,6 @@ var DatagridRow = function DatagridRow(datagridState) {
       hoverHandler(event);
     }
   };
-  var rowClassNames = cx("".concat(blockClass, "__carbon-row"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(carbon.prefix, "--data-table--selected"), row.isSelected));
   var setAdditionalRowProps = function setAdditionalRowProps() {
     if (withNestedRows || withExpandedRows) {
       return {
@@ -111,30 +111,31 @@ var DatagridRow = function DatagridRow(datagridState) {
   // eslint-disable-next-line no-unused-vars
   var _row$getRowProps = row.getRowProps();
     _row$getRowProps.role;
-    var rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
+    var className = _row$getRowProps.className,
+    rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
   var foundAIRow = rows.some(function (r) {
     var _r$original;
     return /*#__PURE__*/isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.slug);
   });
+  var rowClassNames = cx("".concat(blockClass, "__carbon-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), "".concat(blockClass, "__slug--row"), /*#__PURE__*/isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug)));
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
     key: key
-  }, /*#__PURE__*/React__default.createElement(TableRow, _extends({
-    className: rowClassNames
-  }, rowProps, {
+  }, /*#__PURE__*/React__default.createElement(TableRow, _extends({}, rowProps, {
+    className: cx(rowClassNames, className),
     key: row.id,
     onMouseEnter: hoverHandler,
     onMouseLeave: handleMouseLeave,
     onFocus: hoverHandler,
     onBlur: focusRemover,
     onKeyUp: handleOnKeyUp
-  }, setAdditionalRowProps()), foundAIRow ? row !== null && row !== void 0 && (_row$original = row.original) !== null && _row$original !== void 0 && _row$original.slug ? /*#__PURE__*/React__default.createElement("td", {
-    className: "".concat(blockClass, "__table-row-ai-enabled")
+  }, setAdditionalRowProps()), foundAIRow ? row !== null && row !== void 0 && (_row$original2 = row.original) !== null && _row$original2 !== void 0 && _row$original2.slug ? /*#__PURE__*/React__default.createElement("td", {
+    className: cx("".concat(blockClass, "__table-row-ai-enabled"), _defineProperty({}, "".concat(blockClass, "__slug--expanded"), row.isExpanded))
   }, /*#__PURE__*/React__default.createElement(DatagridSlug, {
-    slug: row === null || row === void 0 || (_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.slug
+    slug: row === null || row === void 0 || (_row$original3 = row.original) === null || _row$original3 === void 0 ? void 0 : _row$original3.slug
   })) : /*#__PURE__*/React__default.createElement("td", {
     className: "".concat(blockClass, "__table-row-ai-spacer")
   }) : null, row.cells.map(function (cell, index) {
-    var _cell$column, _content$props;
+    var _cell$column, _content$props, _associatedHeader$;
     var cellProps = cell.getCellProps();
     // eslint-disable-next-line no-unused-vars
     var children = cellProps.children;
@@ -148,8 +149,11 @@ var DatagridRow = function DatagridRow(datagridState) {
       });
     }
     var title = content === null || content === void 0 || (_content$props = content.props) === null || _content$props === void 0 || (_content$props = _content$props.children[0]) === null || _content$props === void 0 || (_content$props = _content$props.props) === null || _content$props === void 0 ? void 0 : _content$props.value;
+    var associatedHeader = headers.filter(function (h) {
+      return h.id === cell.column.id;
+    });
     return /*#__PURE__*/React__default.createElement(TableCell, _extends({
-      className: cx("".concat(blockClass, "__cell"), _defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
+      className: cx("".concat(blockClass, "__cell"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)))
     }, restProps, {
       key: cell.column.id,
       title: title

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

@@ -8,7 +8,7 @@
 import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useLayoutEffect } from 'react';
 import { TableSelectAll } from '@carbon/react';
-import cx from '../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../../settings.js';
 import { handleSelectAllRowData } from './addons/stateReducer.js';
 

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

@@ -8,7 +8,7 @@
 import { slicedToArray as _slicedToArray, objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useEffect, useLayoutEffect } from 'react';
 import PropTypes from '../../../node_modules/prop-types/index.js';
-import cx from '../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { Checkbox, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { CaretDown } from '@carbon/react/icons';
 import { pkg } from '../../../settings.js';

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

@@ -8,7 +8,7 @@
 import { extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { TableBody } from '@carbon/react';
-import cx from '../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../../settings.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");

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

@@ -11,7 +11,7 @@ import PropTypes from '../../../node_modules/prop-types/index.js';
 import { TableToolbar, TableBatchActions, TableBatchAction, MenuButton, MenuItem } from '@carbon/react';
 import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver.js';
 import { pkg, carbon } from '../../../settings.js';
-import cx from '../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { handleSelectAllRowData } from './addons/stateReducer.js';
 
 var _excluded = ["ariaToolbarLabel"];

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

@@ -9,7 +9,7 @@ import { extends as _extends, defineProperty as _defineProperty } from '../../..
 import React__default from 'react';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { Locked, Draggable } from '@carbon/react/icons';
-import cx from '../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../../settings.js';
 import { CSS } from '@dnd-kit/utilities';
 import { useSortable } from '@dnd-kit/sortable';

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

@@ -11,7 +11,7 @@ import PropTypes from '../../../../../node_modules/prop-types/index.js';
 import { Checkbox } from '@carbon/react';
 import update from 'immutability-helper';
 import { pkg } from '../../../../../settings.js';
-import cx from '../../../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { DraggableItemsList } from './DraggableItemsList.js';
 import uuidv4 from '../../../../../global/js/utils/uuidv4.js';
 

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

@@ -8,7 +8,7 @@
 import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Filter } from '@carbon/react/icons';
 import { usePrefix, IconButton } from '@carbon/react';
-import cx from '../../../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import PropTypes from '../../../../../node_modules/prop-types/index.js';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { pkg } from '../../../../../settings.js';

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

@@ -13,7 +13,7 @@ import { panelVariants, innerContainerVariants, actionSetVariants } from './moti
 import { Close } from '@carbon/react/icons';
 import { FilterContext } from './FilterProvider.js';
 import PropTypes from '../../../../../node_modules/prop-types/index.js';
-import cx from '../../../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { motion, useReducedMotion } from 'framer-motion';
 import { pkg } from '../../../../../settings.js';
 import { rem } from '@carbon/layout';

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

@@ -8,7 +8,7 @@
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { createContext, useState, useReducer } from 'react';
 import PropTypes from '../../../../../node_modules/prop-types/index.js';
-import { DROPDOWN, RADIO, NUMBER, DATE, CHECKBOX, SAVED_FILTERS, CLEAR_SINGLE_FILTER } from './constants.js';
+import { DROPDOWN, RADIO, NUMBER, DATE, CHECKBOX, MULTISELECT, SAVED_FILTERS, CLEAR_SINGLE_FILTER } from './constants.js';
 
 var FilterContext = /*#__PURE__*/createContext();
 var EventEmitter = {
@@ -33,7 +33,7 @@ var removeFilterItem = function removeFilterItem(state, index) {
   return state.splice(index, 1);
 };
 var updateFilterState = function updateFilterState(state, type, value) {
-  if (type === CHECKBOX) {
+  if (type === CHECKBOX || type === MULTISELECT) {
     return;
   }
   if (type === DATE) {
@@ -56,7 +56,7 @@ var clearSingleFilter = function clearSingleFilter(_ref, setAllFilters, state) {
       var filterValues = f.value;
       var filterType = f.type;
       updateFilterState(tempState, filterType, value);
-      if (filterType === CHECKBOX) {
+      if (filterType === CHECKBOX || filterType === MULTISELECT) {
         /**
           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
@@ -122,15 +122,15 @@ var prepareFiltersForTags = function prepareFiltersForTags(filters, renderDateLa
         key: id,
         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) {
+    } else if (type === CHECKBOX || type === MULTISELECT) {
+      value.forEach(function (option) {
+        if (option.selected) {
           tags.push(_objectSpread2(_objectSpread2({
             key: id,
-            value: checkbox.value
+            value: option.value
           }, sharedFilterProps), {}, {
             onClose: function onClose() {
-              return handleSingleFilterRemoval(id, checkbox.value);
+              return handleSingleFilterRemoval(id, option.value);
             }
           }));
         }

package/es/components/Datagrid/Datagrid/addons/Filtering/constants.d.ts

@@ -16,6 +16,7 @@ export const NUMBER: "number";
 export const CHECKBOX: "checkbox";
 export const RADIO: "radio";
 export const DROPDOWN: "dropdown";
+export const MULTISELECT: "multiSelect";
 /** Constants for event emitters */
 export const CLEAR_FILTERS: "clearFilters";
 export const CLEAR_SINGLE_FILTER: "clearSingleFilter";

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

@@ -19,6 +19,7 @@ var NUMBER = 'number';
 var CHECKBOX = 'checkbox';
 var RADIO = 'radio';
 var DROPDOWN = 'dropdown';
+var MULTISELECT = 'multiSelect';
 
 /** Constants for event emitters */
 var CLEAR_FILTERS = 'clearFilters';
@@ -31,4 +32,4 @@ var ACTION_SET_HEIGHT = 64;
 /** Constants for local reducer */
 var SAVED_FILTERS = 'savedFilters';
 
-export { ACTION_SET_HEIGHT, BATCH, CHECKBOX, CLEAR_FILTERS, CLEAR_SINGLE_FILTER, DATE, DROPDOWN, FLYOUT, INSTANT, NUMBER, PANEL, PANEL_WIDTH, RADIO, SAVED_FILTERS };
+export { ACTION_SET_HEIGHT, BATCH, CHECKBOX, CLEAR_FILTERS, CLEAR_SINGLE_FILTER, DATE, DROPDOWN, FLYOUT, INSTANT, MULTISELECT, NUMBER, PANEL, PANEL_WIDTH, RADIO, SAVED_FILTERS };

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, extends as _extends, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { DROPDOWN, RADIO, CHECKBOX, NUMBER, DATE, BATCH, SAVED_FILTERS, INSTANT, PANEL } from '../constants.js';
-import { Dropdown, FormGroup, RadioButtonGroup, RadioButton, NumberInput, DatePicker, DatePickerInput, Layer, Checkbox } from '@carbon/react';
+import { slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, toConsumableArray as _toConsumableArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { MULTISELECT, DROPDOWN, RADIO, CHECKBOX, NUMBER, DATE, BATCH, SAVED_FILTERS, INSTANT, PANEL } from '../constants.js';
+import { MultiSelect, Dropdown, FormGroup, RadioButtonGroup, RadioButton, NumberInput, DatePicker, DatePickerInput, Layer, Checkbox } from '@carbon/react';
 import React__default, { useContext, useState, useRef, useCallback, useEffect } from 'react';
 import OverflowCheckboxes from '../OverflowCheckboxes.js';
 import { getInitialStateFromFilters } from '../utils.js';
@@ -115,7 +115,7 @@ var useFilters = function useFilters(_ref) {
       var id = _ref3.id;
       return id === column;
     });
-    var clearCheckbox = type === CHECKBOX && filterCopy[index].value.every(function (_ref4) {
+    var clearCheckbox = (type === CHECKBOX || type === MULTISELECT) && filterCopy[index].value.every(function (_ref4) {
       var selected = _ref4.selected;
       return selected === false;
     });
@@ -287,6 +287,70 @@ var useFilters = function useFilters(_ref) {
           }
         }));
         break;
+      case MULTISELECT:
+        {
+          var _filtersState$column5;
+          var isStringArray = components.MultiSelect.items.length && typeof components.MultiSelect.items[0] === 'string';
+          var selectedFilters = (_filtersState$column5 = filtersState[column]) === null || _filtersState$column5 === void 0 ? void 0 : _filtersState$column5.value.filter(function (i) {
+            return i.selected;
+          });
+          var filteredItems = components.MultiSelect.items.map(function (item) {
+            if (selectedFilters.filter(function (a) {
+              return isStringArray ? a.id === item : a.id === item.id;
+            }).length) {
+              return item;
+            }
+            return null;
+          }).filter(Boolean);
+          filter = /*#__PURE__*/React__default.createElement(MultiSelect, _extends({}, components.MultiSelect, {
+            selectedItems: filteredItems,
+            onChange: function onChange(_ref9) {
+              var _components$MultiSele, _components$MultiSele2;
+              var selectedItems = _ref9.selectedItems;
+              var allOptions = filtersState[column].value;
+              // Find selected items from list of options
+              var foundItems = selectedItems.map(function (item) {
+                if (allOptions.filter(function (option) {
+                  return isStringArray ? option.id === item : option.id === item.id;
+                })) {
+                  return allOptions.filter(function (option) {
+                    return isStringArray ? option.id === item : option.id === item.id;
+                  })[0];
+                }
+                return null;
+              }).filter(Boolean);
+
+              // Change selected state for those items that have been selected
+              allOptions.map(function (a) {
+                return a.selected = false;
+              });
+              foundItems.map(function (item) {
+                var foundOriginalItem = allOptions.filter(function (a) {
+                  return isStringArray ? a === item : a.id === item.id;
+                });
+                if (foundOriginalItem && foundOriginalItem.length) {
+                  foundOriginalItem[0].selected = true;
+                }
+              });
+              if (!selectedItems.length) {
+                allOptions.map(function (a) {
+                  return a.selected = false;
+                });
+              }
+              setFiltersState(_objectSpread2(_objectSpread2({}, filtersState), {}, _defineProperty({}, column, {
+                value: allOptions,
+                type: type
+              })));
+              applyFilters({
+                column: column,
+                value: _toConsumableArray(filtersState[column].value),
+                type: type
+              });
+              (_components$MultiSele = components.MultiSelect) === null || _components$MultiSele === void 0 || (_components$MultiSele2 = _components$MultiSele.onChange) === null || _components$MultiSele2 === void 0 || _components$MultiSele2.call(_components$MultiSele, selectedItems);
+            }
+          }));
+          break;
+        }
     }
     if (isPanel) {
       return /*#__PURE__*/React__default.createElement(Layer, {

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

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { FLYOUT, PANEL, CHECKBOX, DATE, NUMBER, RADIO, DROPDOWN } from './constants.js';
+import { FLYOUT, PANEL, CHECKBOX, DATE, NUMBER, RADIO, DROPDOWN, MULTISELECT } from './constants.js';
 
 var _excluded = ["id", "labelText", "value"];
 var applyInitialFilters = function applyInitialFilters(filterState, initialFilters) {
@@ -63,6 +63,17 @@ var getInitialStateFromFilters = function getInitialStateFromFilters(filters, va
         value: '',
         type: type
       };
+    } else if (type === MULTISELECT) {
+      initialFilterState[column] = {
+        value: props.MultiSelect.items.map(function (item) {
+          return {
+            id: typeof item === 'string' ? item : item.id,
+            value: typeof item === 'string' ? item : item.text,
+            selected: false
+          };
+        }),
+        type: type
+      };
     }
   };
   if (variation === FLYOUT) {

package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js

@@ -7,7 +7,7 @@
 
 import { defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import cx from '../../../../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import PropTypes from '../../../../../../node_modules/prop-types/index.js';
 import { pkg } from '../../../../../../settings.js';
 

package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -11,7 +11,7 @@ import PropTypes from '../../../../../../node_modules/prop-types/index.js';
 import { Dropdown, DatePicker, DatePickerInput, NumberInput, TextInput } from '@carbon/react';
 import { Edit, CaretSort, ChevronDown, Calendar } from '@carbon/react/icons';
 import { pkg } from '../../../../../../settings.js';
-import cx from '../../../../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { prepareProps } from '../../../../../../global/js/utils/props-helper.js';
 import { InlineEditContext } from '../InlineEditContext/InlineEditContext.js';
 import { usePreviousValue } from '../../../../../../global/js/hooks/usePreviousValue.js';

package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -10,7 +10,7 @@ import React__default, { useRef, useEffect } from 'react';
 import PropTypes from '../../../../../node_modules/prop-types/index.js';
 import { Settings } from '@carbon/react/icons';
 import { Popover, IconButton, PopoverContent, Layer } from '@carbon/react';
-import cx from '../../../../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import RowSizeRadioGroup from './RowSizeRadioGroup.js';
 import { pkg, carbon } from '../../../../../settings.js';
 

package/es/components/Datagrid/useActionsColumn.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { IconSkeleton, IconButton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';

package/es/components/Datagrid/useColumnCenterAlign.js

@@ -7,7 +7,7 @@
 
 import { objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../settings.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");

package/es/components/Datagrid/useColumnRightAlign.js

@@ -7,7 +7,7 @@
 
 import { objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../settings.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");

package/es/components/Datagrid/useDefaultStringRenderer.js

@@ -7,7 +7,7 @@
 
 import { objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../settings.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");

package/es/components/Datagrid/useFiltering.js

@@ -5,61 +5,62 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, typeof as _typeof, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { defineProperty as _defineProperty, slicedToArray as _slicedToArray, typeof as _typeof, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useMemo } from 'react';
-import { BATCH } from './Datagrid/addons/Filtering/constants.js';
+import { DATE, NUMBER, CHECKBOX, BATCH, MULTISELECT } from './Datagrid/addons/Filtering/constants.js';
 import FilterFlyout from './Datagrid/addons/Filtering/FilterFlyout.js';
 
+var handleMultiFilter = function handleMultiFilter(rows, id, value) {
+  // gets all the items that are selected and returns their value
+  var selectedItems = value.filter(function (item) {
+    return item.selected;
+  }).map(function (item) {
+    return item.value;
+  });
+
+  // if the user removed all checkboxes then display all rows
+  if (selectedItems.length === 0) {
+    return rows;
+  }
+  return rows.filter(function (row) {
+    var rowValue = row.values[id];
+    return selectedItems.includes(rowValue);
+  });
+};
 var useFiltering = function useFiltering(hooks) {
   /* istanbul ignore next */
   var filterTypes = useMemo(function () {
-    return {
-      date: function date(rows, id, _ref) {
-        var _ref2 = _slicedToArray(_ref, 2),
-          startDate = _ref2[0],
-          endDate = _ref2[1];
-        return rows.filter(function (row) {
-          var rowValue = row.values[id];
-          var startDateObj = _typeof(startDate) === 'object' ? startDate : new Date(startDate);
-          var endDateObj = _typeof(endDate) === 'object' ? endDate : new Date(endDate);
-          var rowValueDateObj = _typeof(rowValue) === 'object' ? rowValue : new Date(rowValue);
-          if (rowValueDateObj.getTime() <= endDateObj.getTime() && rowValueDateObj.getTime() >= startDateObj.getTime()) {
-            // In date range
-            return true;
-          } else {
-            // Not in date range
-            return false;
-          }
-        });
-      },
-      number: function number(rows, id, value) {
-        if (value === '') {
-          return rows;
-        }
-        var parsedValue = parseInt(value);
-        return rows.filter(function (row) {
-          var rowValue = row.values[id];
-          return rowValue === parsedValue;
-        });
-      },
-      checkbox: function checkbox(rows, id, value) {
-        // gets all the items that are selected and returns their value
-        var selectedItems = value.filter(function (item) {
-          return item.selected;
-        }).map(function (item) {
-          return item.value;
-        });
-
-        // if the user removed all checkboxes then display all rows
-        if (selectedItems.length === 0) {
-          return rows;
+    return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, DATE, function (rows, id, _ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        startDate = _ref2[0],
+        endDate = _ref2[1];
+      return rows.filter(function (row) {
+        var rowValue = row.values[id];
+        var startDateObj = _typeof(startDate) === 'object' ? startDate : new Date(startDate);
+        var endDateObj = _typeof(endDate) === 'object' ? endDate : new Date(endDate);
+        var rowValueDateObj = _typeof(rowValue) === 'object' ? rowValue : new Date(rowValue);
+        if (rowValueDateObj.getTime() <= endDateObj.getTime() && rowValueDateObj.getTime() >= startDateObj.getTime()) {
+          // In date range
+          return true;
+        } else {
+          // Not in date range
+          return false;
         }
-        return rows.filter(function (row) {
-          var rowValue = row.values[id];
-          return selectedItems.includes(rowValue);
-        });
+      });
+    }), NUMBER, function (rows, id, value) {
+      if (value === '') {
+        return rows;
       }
-    };
+      var parsedValue = parseInt(value);
+      return rows.filter(function (row) {
+        var rowValue = row.values[id];
+        return rowValue === parsedValue;
+      });
+    }), CHECKBOX, function (rows, id, value) {
+      return handleMultiFilter(rows, id, value);
+    }), MULTISELECT, function (rows, id, value) {
+      return handleMultiFilter(rows, id, value);
+    });
   }, []);
   hooks.useInstance.push(function (instance) {
     var filterProps = instance.filterProps,

package/es/components/Datagrid/useFloatingScroll.js

@@ -6,7 +6,7 @@
  */
 
 import { useEffect } from 'react';
-import cx from '../../node_modules/classnames/index.js';
+import cx from 'classnames';
 import { pkg } from '../../settings.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");