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

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.d.ts

@@ -1,2 +1,11 @@
 export default DatagridToolbar;
-declare function DatagridToolbar(datagridState: any): import("react/jsx-runtime").JSX.Element | null;
+declare function DatagridToolbar({ ariaToolbarLabel, ...datagridState }: {
+    [x: string]: any;
+    ariaToolbarLabel: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare namespace DatagridToolbar {
+    namespace propTypes {
+        let ariaToolbarLabel: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from 'prop-types';

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

@@ -5,14 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useEffect } from 'react';
+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"];
 var blockClass = "".concat(pkg.prefix, "--datagrid__table-toolbar");
 var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
   var _useState = useState(false),
@@ -107,6 +109,12 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     }
   };
   var onCancelHandler = function onCancelHandler() {
+    handleSelectAllRowData({
+      dispatch: dispatch,
+      rows: [],
+      getRowId: getRowId,
+      isChecked: false
+    });
     toggleAllRowsSelected(false);
     setGlobalFilter(null);
   };
@@ -144,7 +152,9 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     }
   })), renderBatchActionOverflow());
 };
-var DatagridToolbar = function DatagridToolbar(datagridState) {
+var DatagridToolbar = function DatagridToolbar(_ref2) {
+  var ariaToolbarLabel = _ref2.ariaToolbarLabel,
+    datagridState = _objectWithoutProperties(_ref2, _excluded);
   var ref = useRef(null);
   var _useResizeObserver = useResizeObserver(ref),
     width = _useResizeObserver.width;
@@ -156,9 +166,16 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
   return batchActions && DatagridActions ? /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     className: cx([blockClass, "".concat(blockClass, "--").concat(getRowHeight)])
-  }, /*#__PURE__*/React__default.createElement(TableToolbar, null, DatagridActions && /*#__PURE__*/React__default.createElement(DatagridActions, datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(TableToolbar, {
+    "aria-label": ariaToolbarLabel
+  }, DatagridActions && /*#__PURE__*/React__default.createElement(DatagridActions, datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React__default.createElement("div", {
     className: blockClass
-  }, /*#__PURE__*/React__default.createElement(TableToolbar, null, DatagridActions && /*#__PURE__*/React__default.createElement(DatagridActions, datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+  }, /*#__PURE__*/React__default.createElement(TableToolbar, {
+    "aria-label": ariaToolbarLabel
+  }, DatagridActions && /*#__PURE__*/React__default.createElement(DatagridActions, datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+};
+DatagridToolbar.propTypes = {
+  ariaToolbarLabel: PropTypes.string
 };
 var DatagridToolbar$1 = DatagridToolbar;
 

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

@@ -6,9 +6,9 @@
  */
 
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { createContext, useState } from 'react';
+import React__default, { createContext, useState, useReducer } from 'react';
 import PropTypes from '../../../../../node_modules/prop-types/index.js';
-import { DROPDOWN, RADIO, NUMBER, DATE, CHECKBOX, 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);
             }
           }));
         }
@@ -139,22 +139,45 @@ var prepareFiltersForTags = function prepareFiltersForTags(filters, renderDateLa
   });
   return tags;
 };
-var FilterProvider = function FilterProvider(_ref3) {
-  var children = _ref3.children,
-    filters = _ref3.filters,
-    filterProps = _ref3.filterProps;
-  var _ref4 = filterProps || {},
-    renderDateLabel = _ref4.renderDateLabel;
+var filteringReducer = function filteringReducer(state, action) {
+  switch (action.type) {
+    case SAVED_FILTERS:
+      {
+        var _ref3 = action.payload || {},
+          savedFilters = _ref3.savedFilters;
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          savedFilters: savedFilters
+        });
+      }
+    default:
+      return state;
+  }
+};
+var FilterProvider = function FilterProvider(_ref4) {
+  var children = _ref4.children,
+    filters = _ref4.filters,
+    filterProps = _ref4.filterProps;
+  var _ref5 = filterProps || {},
+    renderDateLabel = _ref5.renderDateLabel;
   var filterTags = prepareFiltersForTags(filters, renderDateLabel);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     panelOpen = _useState2[0],
     setPanelOpen = _useState2[1];
+  var initialState = {
+    savedFilters: []
+  };
+  var _useReducer = useReducer(filteringReducer, initialState),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
   var value = {
     filterTags: filterTags,
     EventEmitter: EventEmitter,
     panelOpen: panelOpen,
-    setPanelOpen: setPanelOpen
+    setPanelOpen: setPanelOpen,
+    state: state,
+    dispatch: dispatch
   };
   return /*#__PURE__*/React__default.createElement(FilterContext.Provider, {
     value: value

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -16,9 +16,12 @@ 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";
 /** Constants for panel dimensions */
 export const PANEL_WIDTH: 320;
 export const ACTION_SET_HEIGHT: 64;
+/** Constants for local reducer */
+export const SAVED_FILTERS: "savedFilters";

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';
@@ -28,4 +29,7 @@ var CLEAR_SINGLE_FILTER = 'clearSingleFilter';
 var PANEL_WIDTH = 320;
 var ACTION_SET_HEIGHT = 64;
 
-export { ACTION_SET_HEIGHT, BATCH, CHECKBOX, CLEAR_FILTERS, CLEAR_SINGLE_FILTER, DATE, DROPDOWN, FLYOUT, INSTANT, NUMBER, PANEL, PANEL_WIDTH, RADIO };
+/** Constants for local reducer */
+var SAVED_FILTERS = 'savedFilters';
+
+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,12 +5,13 @@
  * 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, INSTANT, PANEL } from '../constants.js';
-import { Dropdown, FormGroup, RadioButtonGroup, RadioButton, NumberInput, DatePicker, DatePickerInput, Layer, Checkbox } from '@carbon/react';
-import React__default, { useState, useRef, useCallback, useEffect } from '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';
+import { FilterContext } from '../FilterProvider.js';
 import { handleCheckboxChange } from '../handleCheckboxChange.js';
 import { usePreviousValue } from '../../../../../../global/js/hooks/usePreviousValue.js';
 
@@ -25,6 +26,10 @@ var useFilters = function useFilters(_ref) {
     panelOpen = _ref.panelOpen,
     autoHideFilters = _ref.autoHideFilters,
     isFetching = _ref.isFetching;
+  var _useContext = useContext(FilterContext),
+    state = _useContext.state,
+    localDispatch = _useContext.dispatch;
+  var savedFilters = state.savedFilters;
   /** State */
   var _useState = useState(getInitialStateFromFilters(filters, variation, reactTableFiltersState)),
     _useState2 = _slicedToArray(_useState, 2),
@@ -110,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;
     });
@@ -122,6 +127,16 @@ var useFilters = function useFilters(_ref) {
       filterCopy.splice(index, 1);
     }
     setFiltersObjectArray(filterCopy);
+
+    // Dispatch action from local filter context to track filters in order
+    // to keep history if `isFetching` becomes true. If so, react-table
+    // clears all filter history
+    localDispatch({
+      type: SAVED_FILTERS,
+      payload: {
+        savedFilters: filterCopy
+      }
+    });
     if (updateMethod === INSTANT) {
       setAllFilters(filterCopy);
     }
@@ -272,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, {
@@ -312,10 +391,27 @@ var useFilters = function useFilters(_ref) {
       setAllFilters(JSON.parse(prevFiltersObjectArrayRef.current));
       setFetchingReset(true);
     }
+    if (isFetching && fetchingReset) {
+      var cleanFilters = function cleanFilters(originalFilterState) {
+        var copy = _objectSpread2({}, originalFilterState);
+        var updatedFilters = savedFilters.map(function (f) {
+          if (Object.hasOwn(copy, f.id)) {
+            copy[f.id] = f;
+            return copy;
+          }
+          return copy;
+        });
+        return updatedFilters[0];
+      };
+      setFiltersObjectArray(savedFilters);
+      var filterStateCopy = cleanFilters(filtersState);
+      setFiltersState(filterStateCopy);
+    }
     if (!isFetching) {
       setFetchingReset(false);
     }
-  }, [isFetching, reactTableFiltersState, setAllFilters, fetchingReset]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFetching, reactTableFiltersState, setAllFilters, fetchingReset, savedFilters, filtersObjectArray]);
   var cancel = function cancel() {
     // Reverting to previous filters only applies when using batch actions
     if (updateMethod === BATCH) {

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/Datagrid/addons/stateReducer.js

@@ -116,7 +116,7 @@ var stateReducer = function stateReducer(newState, action) {
           var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref5) {
             var _ref6 = _slicedToArray(_ref5, 1),
               key = _ref6[0];
-            return parseInt(key) !== parseInt(rowData.index);
+            return parseInt(key) !== parseInt(_getRowId(rowData.original, rowData.index));
           }));
           return _objectSpread2(_objectSpread2({}, newState), {}, {
             selectedRowData: dataWithRemovedRow

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,