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

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

@@ -16,8 +16,8 @@ var React = require('react');
 var variants = require('./motion/variants.js');
 var icons = require('@carbon/react/icons');
 var FilterProvider = require('./FilterProvider.js');
-var index$1 = require('../../../../../node_modules/prop-types/index.js');
-var index = require('../../../../../node_modules/classnames/index.js');
+var index = require('../../../../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var framerMotion = require('framer-motion');
 var settings = require('../../../../../settings.js');
 var layout = require('@carbon/layout');
@@ -29,6 +29,7 @@ var useSubscribeToEventEmitter = require('./hooks/useSubscribeToEventEmitter.js'
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var componentClass = "".concat(blockClass, "-filter-panel");
@@ -199,7 +200,7 @@ var FilterPanel = function FilterPanel(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, {
     ref: filterPanelRef,
-    className: index["default"](componentClass, "".concat(componentClass, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "--open"), panelOpen), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
+    className: cx__default["default"](componentClass, "".concat(componentClass, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "--open"), panelOpen), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
     initial: false,
     animate: panelOpen ? 'visible' : 'hidden',
     custom: shouldReduceMotion,
@@ -209,7 +210,7 @@ var FilterPanel = function FilterPanel(_ref) {
     variants: variants.innerContainerVariants
   }, /*#__PURE__*/React__default["default"].createElement("header", {
     ref: filterHeadingRef,
-    className: index["default"]("".concat(componentClass, "__heading"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "__heading--with-divider"), showDividerLine))
+    className: cx__default["default"]("".concat(componentClass, "__heading"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "__heading--with-divider"), showDividerLine))
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(componentClass, "__title")
   }, title), /*#__PURE__*/React__default["default"].createElement(react.Button, {
@@ -265,32 +266,32 @@ var FilterPanel = function FilterPanel(_ref) {
   })), renderActionSet()));
 };
 FilterPanel.propTypes = {
-  autoHideFilters: index$1["default"].bool,
-  closeIconDescription: index$1["default"].string,
-  filterPanelMinHeight: index$1["default"].number,
-  filterSections: index$1["default"].array,
-  isFetching: index$1["default"].bool,
-  onApply: index$1["default"].func,
-  onCancel: index$1["default"].func,
-  onPanelClose: index$1["default"].func,
-  onPanelOpen: index$1["default"].func,
-  open: index$1["default"].bool,
-  primaryActionLabel: index$1["default"].string,
+  autoHideFilters: index["default"].bool,
+  closeIconDescription: index["default"].string,
+  filterPanelMinHeight: index["default"].number,
+  filterSections: index["default"].array,
+  isFetching: index["default"].bool,
+  onApply: index["default"].func,
+  onCancel: index["default"].func,
+  onPanelClose: index["default"].func,
+  onPanelOpen: index["default"].func,
+  open: index["default"].bool,
+  primaryActionLabel: index["default"].string,
   /**
    * Filters from react table's state
    */
-  reactTableFiltersState: index$1["default"].arrayOf(index$1["default"].shape({
-    id: index$1["default"].string.isRequired,
-    type: index$1["default"].string.isRequired,
-    value: index$1["default"].any.isRequired
+  reactTableFiltersState: index["default"].arrayOf(index["default"].shape({
+    id: index["default"].string.isRequired,
+    type: index["default"].string.isRequired,
+    value: index["default"].any.isRequired
   })),
-  searchLabelText: index$1["default"].string,
-  searchPlaceholder: index$1["default"].string,
-  secondaryActionLabel: index$1["default"].string,
-  setAllFilters: index$1["default"].func.isRequired,
-  showFilterSearch: index$1["default"].bool,
-  title: index$1["default"].string,
-  updateMethod: index$1["default"].oneOf([constants.BATCH, constants.INSTANT])
+  searchLabelText: index["default"].string,
+  searchPlaceholder: index["default"].string,
+  secondaryActionLabel: index["default"].string,
+  setAllFilters: index["default"].func.isRequired,
+  showFilterSearch: index["default"].bool,
+  title: index["default"].string,
+  updateMethod: index["default"].oneOf([constants.BATCH, constants.INSTANT])
 };
 var FilterPanel$1 = FilterPanel;
 

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

@@ -41,7 +41,7 @@ var removeFilterItem = function removeFilterItem(state, index) {
   return state.splice(index, 1);
 };
 var updateFilterState = function updateFilterState(state, type, value) {
-  if (type === constants.CHECKBOX) {
+  if (type === constants.CHECKBOX || type === constants.MULTISELECT) {
     return;
   }
   if (type === constants.DATE) {
@@ -64,7 +64,7 @@ var clearSingleFilter = function clearSingleFilter(_ref, setAllFilters, state) {
       var filterValues = f.value;
       var filterType = f.type;
       updateFilterState(tempState, filterType, value);
-      if (filterType === constants.CHECKBOX) {
+      if (filterType === constants.CHECKBOX || filterType === constants.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
@@ -130,15 +130,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 === constants.CHECKBOX) {
-      value.forEach(function (checkbox) {
-        if (checkbox.selected) {
+    } else if (type === constants.CHECKBOX || type === constants.MULTISELECT) {
+      value.forEach(function (option) {
+        if (option.selected) {
           tags.push(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
             key: id,
-            value: checkbox.value
+            value: option.value
           }, sharedFilterProps), {}, {
             onClose: function onClose() {
-              return handleSingleFilterRemoval(id, checkbox.value);
+              return handleSingleFilterRemoval(id, option.value);
             }
           }));
         }
@@ -147,22 +147,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 constants.SAVED_FILTERS:
+      {
+        var _ref3 = action.payload || {},
+          savedFilters = _ref3.savedFilters;
+        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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 = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     panelOpen = _useState2[0],
     setPanelOpen = _useState2[1];
+  var initialState = {
+    savedFilters: []
+  };
+  var _useReducer = React.useReducer(filteringReducer, initialState),
+    _useReducer2 = _rollupPluginBabelHelpers.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["default"].createElement(FilterContext.Provider, {
     value: value

package/lib/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/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js

@@ -23,6 +23,7 @@ var NUMBER = 'number';
 var CHECKBOX = 'checkbox';
 var RADIO = 'radio';
 var DROPDOWN = 'dropdown';
+var MULTISELECT = 'multiSelect';
 
 /** Constants for event emitters */
 var CLEAR_FILTERS = 'clearFilters';
@@ -32,6 +33,9 @@ var CLEAR_SINGLE_FILTER = 'clearSingleFilter';
 var PANEL_WIDTH = 320;
 var ACTION_SET_HEIGHT = 64;
 
+/** Constants for local reducer */
+var SAVED_FILTERS = 'savedFilters';
+
 exports.ACTION_SET_HEIGHT = ACTION_SET_HEIGHT;
 exports.BATCH = BATCH;
 exports.CHECKBOX = CHECKBOX;
@@ -41,7 +45,9 @@ exports.DATE = DATE;
 exports.DROPDOWN = DROPDOWN;
 exports.FLYOUT = FLYOUT;
 exports.INSTANT = INSTANT;
+exports.MULTISELECT = MULTISELECT;
 exports.NUMBER = NUMBER;
 exports.PANEL = PANEL;
 exports.PANEL_WIDTH = PANEL_WIDTH;
 exports.RADIO = RADIO;
+exports.SAVED_FILTERS = SAVED_FILTERS;

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

@@ -15,6 +15,7 @@ var react = require('@carbon/react');
 var React = require('react');
 var OverflowCheckboxes = require('../OverflowCheckboxes.js');
 var utils = require('../utils.js');
+var FilterProvider = require('../FilterProvider.js');
 var handleCheckboxChange = require('../handleCheckboxChange.js');
 var usePreviousValue = require('../../../../../../global/js/hooks/usePreviousValue.js');
 
@@ -33,6 +34,10 @@ var useFilters = function useFilters(_ref) {
     panelOpen = _ref.panelOpen,
     autoHideFilters = _ref.autoHideFilters,
     isFetching = _ref.isFetching;
+  var _useContext = React.useContext(FilterProvider.FilterContext),
+    state = _useContext.state,
+    localDispatch = _useContext.dispatch;
+  var savedFilters = state.savedFilters;
   /** State */
   var _useState = React.useState(utils.getInitialStateFromFilters(filters, variation, reactTableFiltersState)),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -118,7 +123,7 @@ var useFilters = function useFilters(_ref) {
       var id = _ref3.id;
       return id === column;
     });
-    var clearCheckbox = type === constants.CHECKBOX && filterCopy[index].value.every(function (_ref4) {
+    var clearCheckbox = (type === constants.CHECKBOX || type === constants.MULTISELECT) && filterCopy[index].value.every(function (_ref4) {
       var selected = _ref4.selected;
       return selected === false;
     });
@@ -130,6 +135,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: constants.SAVED_FILTERS,
+      payload: {
+        savedFilters: filterCopy
+      }
+    });
     if (updateMethod === constants.INSTANT) {
       setAllFilters(filterCopy);
     }
@@ -280,6 +295,70 @@ var useFilters = function useFilters(_ref) {
           }
         }));
         break;
+      case constants.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["default"].createElement(react.MultiSelect, _rollupPluginBabelHelpers["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(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, filtersState), {}, _rollupPluginBabelHelpers.defineProperty({}, column, {
+                value: allOptions,
+                type: type
+              })));
+              applyFilters({
+                column: column,
+                value: _rollupPluginBabelHelpers.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["default"].createElement(react.Layer, {
@@ -320,10 +399,27 @@ var useFilters = function useFilters(_ref) {
       setAllFilters(JSON.parse(prevFiltersObjectArrayRef.current));
       setFetchingReset(true);
     }
+    if (isFetching && fetchingReset) {
+      var cleanFilters = function cleanFilters(originalFilterState) {
+        var copy = _rollupPluginBabelHelpers.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 === constants.BATCH) {

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

@@ -67,6 +67,17 @@ var getInitialStateFromFilters = function getInitialStateFromFilters(filters, va
         value: '',
         type: type
       };
+    } else if (type === constants.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 === constants.FLYOUT) {

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

@@ -11,13 +11,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../../../../../node_modules/classnames/index.js');
-var index$1 = require('../../../../../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var index = require('../../../../../../node_modules/prop-types/index.js');
 var settings = require('../../../../../../settings.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var InlineEditButton = function InlineEditButton(_ref) {
@@ -31,7 +32,7 @@ var InlineEditButton = function InlineEditButton(_ref) {
     columnConfig = _ref.columnConfig,
     type = _ref.type;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"]("".concat(blockClass, "__inline-edit-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection')),
+    className: cx__default["default"]("".concat(blockClass, "__inline-edit-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection')),
     tabIndex: isActiveCell ? 0 : -1,
     "data-disabled": disabled || nonEditCell,
     "aria-disabled": disabled || nonEditCell,
@@ -40,7 +41,7 @@ var InlineEditButton = function InlineEditButton(_ref) {
   }, LabelIcon && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__label-icon")
   }, /*#__PURE__*/React__default["default"].createElement(LabelIcon, null)), label !== '' ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: index["default"]("".concat(blockClass, "__inline-edit-button-label"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit-button-label-with-icon"), !nonEditCell), "".concat(blockClass, "__defaultStringRenderer--multiline"), columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.multiLineWrap))
+    className: cx__default["default"]("".concat(blockClass, "__inline-edit-button-label"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit-button-label-with-icon"), !nonEditCell), "".concat(blockClass, "__defaultStringRenderer--multiline"), columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.multiLineWrap))
   }, label) : /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(blockClass, "__placeholder")
   }, placeholder), !nonEditCell && Icon && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -48,16 +49,16 @@ var InlineEditButton = function InlineEditButton(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(Icon, null)));
 };
 InlineEditButton.propTypes = {
-  columnConfig: index$1["default"].object,
-  disabled: index$1["default"].bool,
-  isActiveCell: index$1["default"].bool,
-  label: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].number]),
-  labelIcon: index$1["default"].oneOfType([index$1["default"].func, index$1["default"].object]),
-  nonEditCell: index$1["default"].bool,
-  placeholder: index$1["default"].string,
-  renderIcon: index$1["default"].oneOfType([index$1["default"].func, index$1["default"].object]),
-  type: index$1["default"].oneOf(['text', 'number', 'selection', 'date']),
-  value: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].node])
+  columnConfig: index["default"].object,
+  disabled: index["default"].bool,
+  isActiveCell: index["default"].bool,
+  label: index["default"].oneOfType([index["default"].string, index["default"].number]),
+  labelIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  nonEditCell: index["default"].bool,
+  placeholder: index["default"].string,
+  renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  type: index["default"].oneOf(['text', 'number', 'selection', 'date']),
+  value: index["default"].oneOfType([index["default"].string, index["default"].node])
 };
 
 exports.InlineEditButton = InlineEditButton;

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

@@ -11,11 +11,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../../../../../node_modules/prop-types/index.js');
+var index = require('../../../../../../node_modules/prop-types/index.js');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var settings = require('../../../../../../settings.js');
-var index = require('../../../../../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var propsHelper = require('../../../../../../global/js/utils/props-helper.js');
 var InlineEditContext = require('../InlineEditContext/InlineEditContext.js');
 var usePreviousValue = require('../../../../../../global/js/hooks/usePreviousValue.js');
@@ -24,6 +24,7 @@ var InlineEditButton = require('../InlineEditButton/InlineEditButton.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var InlineEditCell = function InlineEditCell(_ref) {
@@ -252,7 +253,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
   var renderDropdownItem = function renderDropdownItem(item) {
     var includesIcon = !!(item !== null && item !== void 0 && item.icon);
     return includesIcon ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(item.icon), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: index["default"]("".concat(blockClass, "__inline-edit--select-item"))
+      className: cx__default["default"]("".concat(blockClass, "__inline-edit--select-item"))
     }, item === null || item === void 0 ? void 0 : item.text)) : item === null || item === void 0 ? void 0 : item.text;
   };
   var handleTransformedItem = function handleTransformedItem(items) {
@@ -272,7 +273,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
       style: {
         width: cell.column.totalWidth
       },
-      className: index["default"]("".concat(blockClass, "__inline-edit--select"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--select-").concat(rowSize), rowSize)),
+      className: cx__default["default"]("".concat(blockClass, "__inline-edit--select"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--select-").concat(rowSize), rowSize)),
       items: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.items) || [],
       initialSelectedItem: cell.value,
       itemToElement: handleTransformedItem(inputProps === null || inputProps === void 0 ? void 0 : inputProps.items),
@@ -334,7 +335,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
         width: cell.column.totalWidth
       },
       datePickerType: "single",
-      className: index["default"]("".concat(blockClass, "__inline-edit--date"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--date-").concat(rowSize), rowSize)),
+      className: cx__default["default"]("".concat(blockClass, "__inline-edit--date"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--date-").concat(rowSize), rowSize)),
       onChange: function onChange(newDate) {
         var _datePickerPreparedPr;
         var newDateObj = newDate[0];
@@ -442,7 +443,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
       "data-inline-type": type,
       onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
       onKeyDown: !nonEditCell ? handleKeyDown : null,
-      className: index["default"]("".concat(blockClass, "__inline-edit--outer-cell-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), config === null || config === void 0 || (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue)))
+      className: cx__default["default"]("".concat(blockClass, "__inline-edit--outer-cell-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), config === null || config === void 0 || (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue)))
     }, !inEditMode && /*#__PURE__*/React__default["default"].createElement(InlineEditButton.InlineEditButton, {
       isActiveCell: cellId === activeCellId,
       renderIcon: setRenderIcon(),
@@ -457,20 +458,20 @@ var InlineEditCell = function InlineEditCell(_ref) {
   );
 };
 InlineEditCell.propTypes = {
-  cell: index$1["default"].object,
-  config: index$1["default"].object,
-  instance: index$1["default"].shape({
-    columns: index$1["default"].arrayOf(index$1["default"].object),
-    onDataUpdate: index$1["default"].func,
-    rows: index$1["default"].arrayOf(index$1["default"].object),
-    rowSize: index$1["default"].string,
-    tableId: index$1["default"].string
+  cell: index["default"].object,
+  config: index["default"].object,
+  instance: index["default"].shape({
+    columns: index["default"].arrayOf(index["default"].object),
+    onDataUpdate: index["default"].func,
+    rows: index["default"].arrayOf(index["default"].object),
+    rowSize: index["default"].string,
+    tableId: index["default"].string
   }),
-  nonEditCell: index$1["default"].bool,
-  placeholder: index$1["default"].string,
-  tabIndex: index$1["default"].number,
-  type: index$1["default"].oneOf(['text', 'number', 'selection', 'date']),
-  value: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].node, index$1["default"].object])
+  nonEditCell: index["default"].bool,
+  placeholder: index["default"].string,
+  tabIndex: index["default"].number,
+  type: index["default"].oneOf(['text', 'number', 'selection', 'date']),
+  value: index["default"].oneOfType([index["default"].string, index["default"].node, index["default"].object])
 };
 
 exports.InlineEditCell = InlineEditCell;

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

@@ -11,16 +11,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../../../../node_modules/prop-types/index.js');
+var index = require('../../../../../node_modules/prop-types/index.js');
 var icons = require('@carbon/react/icons');
 var react = require('@carbon/react');
-var index = require('../../../../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var RowSizeRadioGroup = require('./RowSizeRadioGroup.js');
 var settings = require('../../../../../settings.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Settings;
 var _excluded = ["align", "legendText"];
@@ -75,7 +76,7 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
     kind: "ghost",
     onClick: onClickHandler,
     label: legendText,
-    className: index["default"]("".concat(blockClass, "-button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__row-settings-trigger--open"), isOpen))
+    className: cx__default["default"]("".concat(blockClass, "-button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__row-settings-trigger--open"), isOpen))
   }, _Settings || (_Settings = /*#__PURE__*/React__default["default"].createElement(icons.Settings, {
     size: 16
   }))), /*#__PURE__*/React__default["default"].createElement(react.PopoverContent, null, /*#__PURE__*/React__default["default"].createElement(react.Layer, null, /*#__PURE__*/React__default["default"].createElement(RowSizeRadioGroup["default"], _rollupPluginBabelHelpers["extends"]({
@@ -86,11 +87,11 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
 };
 RowSizeDropdown.propTypes = {
   align: react.IconButton.propTypes.align,
-  datagridName: index$1["default"].string,
-  legendText: index$1["default"].string,
-  light: index$1["default"].bool,
-  onChange: index$1["default"].func.isRequired,
-  selectedOption: index$1["default"].string
+  datagridName: index["default"].string,
+  legendText: index["default"].string,
+  light: index["default"].bool,
+  onChange: index["default"].func.isRequired,
+  selectedOption: index["default"].string
 };
 var RowSizeDropdown$1 = RowSizeDropdown;
 

package/lib/components/Datagrid/Datagrid/addons/stateReducer.js

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