@carbon/ibm-products 2.20.0 → 2.22.0

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

@@ -31,18 +31,22 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var componentClass = "".concat(blockClass, "-filter-flyout");
+var defaults = {
+  flyoutIconDescription: 'Open filters',
+  title: 'Filter',
+  primaryActionLabel: 'Apply',
+  secondaryActionLabel: 'Cancel'
+};
 var FilterFlyout = function FilterFlyout(_ref) {
-  var _cx2;
-  var _ref$updateMethod = _ref.updateMethod,
-    updateMethod = _ref$updateMethod === void 0 ? _constants.BATCH : _ref$updateMethod,
+  var updateMethod = _ref.updateMethod,
     _ref$flyoutIconDescri = _ref.flyoutIconDescription,
-    flyoutIconDescription = _ref$flyoutIconDescri === void 0 ? 'Open filters' : _ref$flyoutIconDescri,
+    flyoutIconDescription = _ref$flyoutIconDescri === void 0 ? defaults.flyoutIconDescription : _ref$flyoutIconDescri,
     _ref$filters = _ref.filters,
     filters = _ref$filters === void 0 ? [] : _ref$filters,
     _ref$title = _ref.title,
-    title = _ref$title === void 0 ? 'Filter' : _ref$title,
+    title = _ref$title === void 0 ? defaults.title : _ref$title,
     _ref$primaryActionLab = _ref.primaryActionLabel,
-    primaryActionLabel = _ref$primaryActionLab === void 0 ? 'Apply' : _ref$primaryActionLab,
+    primaryActionLabel = _ref$primaryActionLab === void 0 ? defaults.primaryActionLabel : _ref$primaryActionLab,
     _ref$onFlyoutOpen = _ref.onFlyoutOpen,
     onFlyoutOpen = _ref$onFlyoutOpen === void 0 ? function () {} : _ref$onFlyoutOpen,
     _ref$onFlyoutClose = _ref.onFlyoutClose,
@@ -52,7 +56,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
     _ref$onCancel = _ref.onCancel,
     onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
     _ref$secondaryActionL = _ref.secondaryActionLabel,
-    secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
+    secondaryActionLabel = _ref$secondaryActionL === void 0 ? defaults.secondaryActionLabel : _ref$secondaryActionL,
     setAllFilters = _ref.setAllFilters,
     _ref$data = _ref.data,
     data = _ref$data === void 0 ? [] : _ref$data,
@@ -67,13 +71,17 @@ var FilterFlyout = function FilterFlyout(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     stackedLayout = _useState4[0],
     setStackedLayout = _useState4[1];
+  var handleCancel = function handleCancel() {
+    setOpen(false);
+    onCancel();
+  };
   var _useFilters = (0, _hooks2.useFilters)({
       updateMethod: updateMethod,
       filters: filters,
       setAllFilters: setAllFilters,
       variation: _constants.FLYOUT,
       reactTableFiltersState: reactTableFiltersState,
-      onCancel: onCancel
+      onCancel: handleCancel
     }),
     filtersState = _useFilters.filtersState,
     prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -100,6 +108,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
     _useShouldDisableButt2 = (0, _slicedToArray2.default)(_useShouldDisableButt, 2),
     shouldDisableButtons = _useShouldDisableButt2[0],
     setShouldDisableButtons = _useShouldDisableButt2[1];
+
+  // Skip resize testing
+  /* istanbul ignore next */
   var handleResize = function handleResize(current) {
     var filterFlyoutRefPosition = flyoutInnerRef === null || flyoutInnerRef === void 0 ? void 0 : flyoutInnerRef.current.getBoundingClientRect();
     var originalFlyoutWidth = parseInt(window.getComputedStyle(flyoutInnerRef === null || flyoutInnerRef === void 0 ? void 0 : flyoutInnerRef.current).getPropertyValue('width'));
@@ -180,8 +191,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
         kind: 'secondary',
         label: secondaryActionLabel,
         onClick: cancel,
-        isExpressive: false,
-        disabled: shouldDisableButtons
+        isExpressive: false
       }],
       size: "md",
       buttonSize: "md"
@@ -213,7 +223,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
     className: (0, _classnames.default)("".concat(componentClass, "__trigger"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__trigger--open"), open)),
     disabled: data.length === 0
   }, /*#__PURE__*/_react2.default.createElement(_icons.Filter, null)), /*#__PURE__*/_react2.default.createElement("div", {
-    className: (0, _classnames.default)(componentClass, (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--open"), open), (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--batch"), showActionSet), (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--instant"), !showActionSet), _cx2)),
+    className: (0, _classnames.default)(componentClass, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(componentClass, "--open"), open), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
     ref: flyoutInnerRef
   }, /*#__PURE__*/_react2.default.createElement("div", {
     className: "".concat(componentClass, "__inner-container")

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

@@ -36,14 +36,20 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var componentClass = exports.componentClass = "".concat(blockClass, "-filter-panel");
 var MotionActionSet = (0, _framerMotion.motion)(_ActionSet.ActionSet);
+var defaults = {
+  title: 'Filter',
+  closeIconDescription: 'Close filter panel',
+  primaryActionLabel: 'Apply',
+  secondaryActionLabel: 'Cancel',
+  searchLabelText: 'Filter search',
+  searchPlaceholder: 'Find filters'
+};
 var FilterPanel = function FilterPanel(_ref) {
-  var _cx;
   var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? 'Filter' : _ref$title,
+    title = _ref$title === void 0 ? defaults.title : _ref$title,
     _ref$closeIconDescrip = _ref.closeIconDescription,
-    closeIconDescription = _ref$closeIconDescrip === void 0 ? 'Close filter panel' : _ref$closeIconDescrip,
-    _ref$updateMethod = _ref.updateMethod,
-    updateMethod = _ref$updateMethod === void 0 ? _constants.BATCH : _ref$updateMethod,
+    closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
+    updateMethod = _ref.updateMethod,
     filterSections = _ref.filterSections,
     setAllFilters = _ref.setAllFilters,
     _ref$onApply = _ref.onApply,
@@ -59,13 +65,13 @@ var FilterPanel = function FilterPanel(_ref) {
     _ref$filterPanelMinHe = _ref.filterPanelMinHeight,
     filterPanelMinHeight = _ref$filterPanelMinHe === void 0 ? 600 : _ref$filterPanelMinHe,
     _ref$primaryActionLab = _ref.primaryActionLabel,
-    primaryActionLabel = _ref$primaryActionLab === void 0 ? 'Apply' : _ref$primaryActionLab,
+    primaryActionLabel = _ref$primaryActionLab === void 0 ? defaults.primaryActionLabel : _ref$primaryActionLab,
     _ref$secondaryActionL = _ref.secondaryActionLabel,
-    secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
+    secondaryActionLabel = _ref$secondaryActionL === void 0 ? defaults.secondaryActionLabel : _ref$secondaryActionL,
     _ref$searchLabelText = _ref.searchLabelText,
-    searchLabelText = _ref$searchLabelText === void 0 ? 'Filter search' : _ref$searchLabelText,
+    searchLabelText = _ref$searchLabelText === void 0 ? defaults.searchLabelText : _ref$searchLabelText,
     _ref$searchPlaceholde = _ref.searchPlaceholder,
-    searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
+    searchPlaceholder = _ref$searchPlaceholde === void 0 ? defaults.searchPlaceholder : _ref$searchPlaceholde,
     _ref$reactTableFilter = _ref.reactTableFiltersState,
     reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter,
     _ref$autoHideFilters = _ref.autoHideFilters,
@@ -190,12 +196,13 @@ var FilterPanel = function FilterPanel(_ref) {
     var filterHeadingHeight = (_filterHeadingRef$cur = filterHeadingRef.current) === null || _filterHeadingRef$cur === void 0 ? void 0 : _filterHeadingRef$cur.getBoundingClientRect().height;
     var filterSearchHeight = (_filterSearchRef$curr = filterSearchRef.current) === null || _filterSearchRef$curr === void 0 ? void 0 : _filterSearchRef$curr.getBoundingClientRect().height;
     var actionSetHeight = (_actionSetRef$current = actionSetRef.current) === null || _actionSetRef$current === void 0 ? void 0 : _actionSetRef$current.getBoundingClientRect().height;
-    var height = "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat(showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === _constants.BATCH ? actionSetHeight : 0, "px)");
+    var height = panelOpen ? "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat( /* istanbul ignore next */
+    showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === _constants.BATCH ? actionSetHeight : 0, "px)") : 0;
     return height;
   };
   return /*#__PURE__*/_react2.default.createElement(_framerMotion.motion.div, {
     ref: filterPanelRef,
-    className: (0, _classnames.default)(componentClass, "".concat(componentClass, "__container"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(componentClass, "--open"), panelOpen), (0, _defineProperty2.default)(_cx, "".concat(componentClass, "--batch"), showActionSet), (0, _defineProperty2.default)(_cx, "".concat(componentClass, "--instant"), !showActionSet), _cx)),
+    className: (0, _classnames.default)(componentClass, "".concat(componentClass, "__container"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(componentClass, "--open"), panelOpen), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
     initial: false,
     animate: panelOpen ? 'visible' : 'hidden',
     custom: shouldReduceMotion,
@@ -220,7 +227,10 @@ var FilterPanel = function FilterPanel(_ref) {
     tooltipPosition: "bottom",
     tooltipAlignment: "end",
     onClick: closePanel
-  }), showFilterSearch && /*#__PURE__*/_react2.default.createElement("div", {
+  }), showFilterSearch &&
+  /*#__PURE__*/
+  /* istanbul ignore next */
+  _react2.default.createElement("div", {
     ref: filterSearchRef,
     className: "".concat(componentClass, "__search")
   }, /*#__PURE__*/_react2.default.createElement(_react.Layer, null, /*#__PURE__*/_react2.default.createElement(_react.Search, {

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

@@ -58,8 +58,7 @@ var useFilters = function useFilters(_ref2) {
     setAllFilters = _ref2.setAllFilters,
     variation = _ref2.variation,
     reactTableFiltersState = _ref2.reactTableFiltersState,
-    _ref2$onCancel = _ref2.onCancel,
-    onCancel = _ref2$onCancel === void 0 ? function () {} : _ref2$onCancel,
+    onCancel = _ref2.onCancel,
     panelOpen = _ref2.panelOpen,
     autoHideFilters = _ref2.autoHideFilters,
     isFetching = _ref2.isFetching;
@@ -128,9 +127,9 @@ var useFilters = function useFilters(_ref2) {
     if (type === _constants.DATE && value.length > 0 && !value[1]) {
       return;
     }
-    var filtersObjectArrayCopy = (0, _toConsumableArray2.default)(filtersObjectArray);
+    var filterCopy = (0, _toConsumableArray2.default)(filtersObjectArray);
     // // check if the filter already exists in the array
-    var filter = filtersObjectArrayCopy.find(function (item) {
+    var filter = filterCopy.find(function (item) {
       return item.id === column;
     });
 
@@ -138,81 +137,39 @@ var useFilters = function useFilters(_ref2) {
     if (filter) {
       filter.value = value;
     } else {
-      filtersObjectArrayCopy.push({
+      filterCopy.push({
         id: column,
         value: value,
         type: type
       });
     }
-
-    // ATTENTION: this is where you would reset or remove individual filters from the filters array
-    if (type === _constants.CHECKBOX) {
-      /**
-      When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
-      This checks if all the checkboxes are selected = false and removes it from the array
-      */
-      var index = filtersObjectArrayCopy.findIndex(function (filter) {
-        return filter.id === column;
-      });
-
-      // If all the selected state is false remove from array
-      var shouldRemoveFromArray = filtersObjectArrayCopy[index].value.every(function (val) {
-        return val.selected === false;
-      });
-      if (shouldRemoveFromArray) {
-        filtersObjectArrayCopy.splice(index, 1);
-      }
-    } else if (type === _constants.DATE) {
-      if (value.length === 0) {
-        /**
-        Checks to see if the date value is an empty array, if it is that means the user wants
-        to reset the date filter
-        */
-        var _index = filtersObjectArrayCopy.findIndex(function (filter) {
-          return filter.id === column;
-        });
-
-        // Remove it from the filters array since there is nothing to filter
-        filtersObjectArrayCopy.splice(_index, 1);
-      }
-    } else if (type === _constants.DROPDOWN || type === _constants.RADIO) {
-      if (value === 'Any') {
-        /**
-        Checks to see if the selected value is 'Any', that means the user wants
-        to reset specific filter
-        */
-        var _index2 = filtersObjectArrayCopy.findIndex(function (filter) {
-          return filter.id === column;
-        });
-
-        // Remove it from the filters array
-        filtersObjectArrayCopy.splice(_index2, 1);
-      }
-    } else if (type === _constants.NUMBER) {
-      // If the value is empty remove it from the filtersObjectArray
-      if (value === '') {
-        // Find the column that uses number and displays an empty string
-        var _index3 = filtersObjectArrayCopy.findIndex(function (filter) {
-          return filter.id === column;
-        });
-
-        // Remove it from the filters array
-        filtersObjectArrayCopy.splice(_index3, 1);
-      }
+    var index = filterCopy.findIndex(function (_ref4) {
+      var id = _ref4.id;
+      return id === column;
+    });
+    var clearCheckbox = type === _constants.CHECKBOX && filterCopy[index].value.every(function (_ref5) {
+      var selected = _ref5.selected;
+      return selected === false;
+    });
+    var clearDate = type === _constants.DATE && value.length === 0;
+    var clearAny = (type === _constants.DROPDOWN || type === _constants.RADIO) && value === 'Any';
+    var clearNum = type === _constants.NUMBER && value === '';
+    var shouldClear = clearCheckbox || clearDate || clearAny || clearNum;
+    if (shouldClear) {
+      filterCopy.splice(index, 1);
     }
-    setFiltersObjectArray(filtersObjectArrayCopy);
-
-    // // Automatically apply the filters if the updateMethod is instant
+    setFiltersObjectArray(filterCopy);
     if (updateMethod === _constants.INSTANT) {
-      setAllFilters(filtersObjectArrayCopy);
+      setAllFilters(filterCopy);
     }
   };
+
   /** Render the individual filter component */
-  var renderFilter = function renderFilter(_ref4) {
+  var renderFilter = function renderFilter(_ref6) {
     var _filtersState$column3, _filtersState$column4;
-    var type = _ref4.type,
-      column = _ref4.column,
-      components = _ref4.props;
+    var type = _ref6.type,
+      column = _ref6.column,
+      components = _ref6.props;
     var filter;
     var isPanel = variation === _constants.PANEL;
     if (!type) {
@@ -233,8 +190,8 @@ var useFilters = function useFilters(_ref2) {
         return /*#__PURE__*/_react2.default.createElement(_react.Checkbox, (0, _extends2.default)({
           key: option.id
         }, option, {
-          onChange: function onChange(_, _ref5) {
-            var checked = _ref5.checked;
+          onChange: function onChange(_, _ref7) {
+            var checked = _ref7.checked;
             handleCheckboxChange({
               checked: checked,
               filtersState: filtersState,
@@ -325,9 +282,9 @@ var useFilters = function useFilters(_ref2) {
             labelText: (_components$DefaultRa5 = components === null || components === void 0 || (_components$DefaultRa6 = components.DefaultRadioButton) === null || _components$DefaultRa6 === void 0 ? void 0 : _components$DefaultRa6.labelText) !== null && _components$DefaultRa5 !== void 0 ? _components$DefaultRa5 : 'Any',
             value: (_components$DefaultRa7 = components === null || components === void 0 || (_components$DefaultRa8 = components.DefaultRadioButton) === null || _components$DefaultRa8 === void 0 ? void 0 : _components$DefaultRa8.value) !== null && _components$DefaultRa7 !== void 0 ? _components$DefaultRa7 : 'Any'
           }, components.DefaultRadioButton)), components.RadioButton.map(function (radio) {
-            var _ref6, _radio$id;
+            var _ref8, _radio$id;
             return /*#__PURE__*/_react2.default.createElement(_react.RadioButton, (0, _extends2.default)({
-              key: (_ref6 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref6 !== void 0 ? _ref6 : radio.value
+              key: (_ref8 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref8 !== void 0 ? _ref8 : radio.value
             }, radio));
           })));
         }
@@ -336,9 +293,9 @@ var useFilters = function useFilters(_ref2) {
         filter = /*#__PURE__*/_react2.default.createElement(_react.Dropdown, (0, _extends2.default)({}, components.Dropdown, {
           selectedItem: ((_filtersState$column3 = filtersState[column]) === null || _filtersState$column3 === void 0 ? void 0 : _filtersState$column3.value) === '' ? 'Any' : (_filtersState$column4 = filtersState[column]) === null || _filtersState$column4 === void 0 ? void 0 : _filtersState$column4.value,
           items: ['Any'].concat((0, _toConsumableArray2.default)(components.Dropdown.items)),
-          onChange: function onChange(_ref7) {
+          onChange: function onChange(_ref9) {
             var _components$Dropdown$, _components$Dropdown;
-            var selectedItem = _ref7.selectedItem;
+            var selectedItem = _ref9.selectedItem;
             setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
               value: selectedItem,
               type: type

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

@@ -9,7 +9,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 /**
- * Copyright IBM Corp. 2023, 2023
+ * Copyright IBM Corp. 2023, 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.
@@ -24,8 +24,7 @@ var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
  * @returns {Array} returns a tuple of the state and setter function
  */
 var useShouldDisableButtons = function useShouldDisableButtons(_ref) {
-  var _ref$initialValue = _ref.initialValue,
-    initialValue = _ref$initialValue === void 0 ? true : _ref$initialValue,
+  var initialValue = _ref.initialValue,
     filtersState = _ref.filtersState,
     prevFiltersRef = _ref.prevFiltersRef;
   var _useState = (0, _react.useState)(initialValue),

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

@@ -29,9 +29,7 @@ var applyInitialFilters = function applyInitialFilters(filterState, initialFilte
 };
 
 // This functions takes the filters passed in and makes an object to track it's state
-var getInitialStateFromFilters = exports.getInitialStateFromFilters = function getInitialStateFromFilters(filters) {
-  var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.FLYOUT;
-  var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+var getInitialStateFromFilters = exports.getInitialStateFromFilters = function getInitialStateFromFilters(filters, variation, initialFilters) {
   var initialFilterState = {};
   var setInitialState = function setInitialState(_ref) {
     var type = _ref.type,
@@ -86,8 +84,6 @@ var getInitialStateFromFilters = exports.getInitialStateFromFilters = function g
         return setInitialState(filter);
       });
     });
-  } else {
-    console.error('No variation passed into useInitialStateFromFilters');
   }
   if (initialFilters.length > 0) {
     applyInitialFilters(initialFilterState, initialFilters);

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

@@ -19,7 +19,6 @@ var _settings = require("../../../../../../settings");
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var InlineEditButton = exports.InlineEditButton = function InlineEditButton(_ref) {
-  var _cx, _cx2;
   var label = _ref.label,
     Icon = _ref.renderIcon,
     disabled = _ref.disabled,
@@ -30,7 +29,7 @@ var InlineEditButton = exports.InlineEditButton = function InlineEditButton(_ref
     columnConfig = _ref.columnConfig,
     type = _ref.type;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(blockClass, "__inline-edit-button"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection'), _cx)),
+    className: (0, _classnames.default)("".concat(blockClass, "__inline-edit-button"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".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,
@@ -39,7 +38,7 @@ var InlineEditButton = exports.InlineEditButton = function InlineEditButton(_ref
   }, LabelIcon && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__label-icon")
   }, /*#__PURE__*/_react.default.createElement(LabelIcon, null)), label !== '' ? /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)("".concat(blockClass, "__inline-edit-button-label"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__inline-edit-button-label-with-icon"), !nonEditCell), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__defaultStringRenderer--multiline"), columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.multiLineWrap), _cx2))
+    className: (0, _classnames.default)("".concat(blockClass, "__inline-edit-button-label"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".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.createElement("span", {
     className: "".concat(blockClass, "__placeholder")
   }, placeholder), !nonEditCell && Icon && /*#__PURE__*/_react.default.createElement("div", {

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

@@ -31,7 +31,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var InlineEditCell = exports.InlineEditCell = function InlineEditCell(_ref) {
-  var _config$validator, _cx3, _value$text;
+  var _config$validator, _value$text;
   var cell = _ref.cell,
     config = _ref.config,
     instance = _ref.instance,
@@ -446,7 +446,7 @@ var InlineEditCell = exports.InlineEditCell = function InlineEditCell(_ref) {
       "data-inline-type": type,
       onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
       onKeyDown: !nonEditCell ? handleKeyDown : null,
-      className: (0, _classnames.default)("".concat(blockClass, "__inline-edit--outer-cell-button"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), (0, _defineProperty2.default)(_cx3, "".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)), _cx3))
+      className: (0, _classnames.default)("".concat(blockClass, "__inline-edit--outer-cell-button"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".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.createElement(_InlineEditButton.InlineEditButton, {
       isActiveCell: cellId === activeCellId,
       renderIcon: setRenderIcon(),

package/lib/components/Datagrid/useActionsColumn.js

@@ -43,7 +43,6 @@ var useActionsColumn = function useActionsColumn(hooks) {
         var row = cell.row,
           column = cell.column;
         if (column.isAction) {
-          var _cx3;
           var isColumnSticky = !!column.sticky;
           return [props, {
             children: /*#__PURE__*/_react.default.createElement("div", {
@@ -115,7 +114,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 key: id
               }));
             })))),
-            className: (0, _classnames.default)((_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__actions-column-cell"), true), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__cell"), true), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__actions-column-cell-non-sticky"), !isColumnSticky), _cx3)),
+            className: (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__actions-column-cell"), true), "".concat(blockClass, "__cell"), true), "".concat(blockClass, "__actions-column-cell-non-sticky"), !isColumnSticky)),
             style: {
               width: rowActions.length > 2 || isColumnSticky ? 48 : 96
             }

package/lib/components/Datagrid/useDefaultStringRenderer.js

@@ -23,8 +23,7 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
   var StringRenderer = function StringRenderer(tableProps) {
     var _tableProps$column;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(blockClass, "__defaultStringRenderer"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), ((_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap) || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.multiLineWrapAll))),
-      title: tableProps.value
+      className: (0, _classnames.default)("".concat(blockClass, "__defaultStringRenderer"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), ((_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap) || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.multiLineWrapAll)))
     }, tableProps.value);
   };
   var HeaderRenderer = function HeaderRenderer(header) {

package/lib/components/Datagrid/useFiltering.js

@@ -23,6 +23,7 @@ var useFiltering = function useFiltering(hooks) {
   (0, _react.useEffect)(function () {
     _settings.pkg.checkReportFeatureEnabled('Datagrid.useFiltering');
   }, []);
+  /* istanbul ignore next */
   var filterTypes = (0, _react.useMemo)(function () {
     return {
       date: function date(rows, id, _ref) {

package/lib/components/Datagrid/useNestedRowExpander.js

@@ -40,7 +40,6 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
     var expanderColumn = {
       id: 'expander',
       Cell: function Cell(_ref) {
-        var _cx;
         var row = _ref.row;
         var expanderButtonProps = _objectSpread(_objectSpread({}, row.getToggleRowExpandedProps()), {}, {
           onClick: function onClick(event) {
@@ -63,7 +62,7 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
         }, expanderButtonProps, {
           title: expanderTitle
         }), /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, {
-          className: (0, _classnames.default)("".concat(blockClass, "__expander-icon"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__expander-icon--open"), row.isExpanded), _cx))
+          className: (0, _classnames.default)("".concat(blockClass, "__expander-icon"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), "".concat(blockClass, "__expander-icon--open"), row.isExpanded))
         }));
       },
       width: 48,

package/lib/components/Datagrid/useNestedRows.js

@@ -9,8 +9,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../settings");
 var _useNestedRowExpander = _interopRequireDefault(require("./useNestedRowExpander"));
+var _react = require("react");
 /**
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 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.
@@ -19,43 +20,58 @@ var _useNestedRowExpander = _interopRequireDefault(require("./useNestedRowExpand
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var useNestedRows = function useNestedRows(hooks) {
   (0, _useNestedRowExpander.default)(hooks);
-  var marginLeft = 24;
-  var getRowProps = function getRowProps(props, _ref) {
-    var _cx;
-    var row = _ref.row;
-    return [props, {
-      className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _cx))
-    }];
-  };
-  var getRowStyles = function getRowStyles(props, _ref2) {
-    var row = _ref2.row;
-    return [props, {
-      style: {
-        paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
-      }
-    }];
-  };
-  var getCellProps = function getCellProps(props, _ref3) {
-    var cell = _ref3.cell,
-      instance = _ref3.instance;
-    // reduce the "first cell"s width to compensate added (left) margin
-    var isFirstCell = instance.columns.findIndex(function (c) {
-      return c.id === cell.column.id;
-    }) === 0;
-    return [props, {
-      style: {
-        marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "".concat(-32 * cell.row.depth - 18, "px") : '')
-      }
-    }];
-  };
   var useInstance = function useInstance(instance) {
+    // This useEffect will expand rows if they exist in the initialState obj
+    (0, _react.useEffect)(function () {
+      var rows = instance.rows,
+        initialState = instance.initialState;
+      var expandedRowIds = initialState.expandedRowIds;
+      if (expandedRowIds) {
+        Object.keys(expandedRowIds).forEach(function (key) {
+          var row = rows.filter(function (r) {
+            return r.id.toString() === key.toString();
+          });
+          if (row.length && key.toString() === row[0].id.toString()) {
+            row[0].toggleRowExpanded();
+          }
+        });
+      }
+    }, [instance]);
+    var marginLeft = 24;
+    var getRowProps = function getRowProps(props, _ref) {
+      var row = _ref.row;
+      return [props, {
+        className: (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded))
+      }];
+    };
+    var getRowStyles = function getRowStyles(props, _ref2) {
+      var row = _ref2.row;
+      return [props, {
+        style: {
+          paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
+        }
+      }];
+    };
+    var getCellProps = function getCellProps(props, _ref3) {
+      var cell = _ref3.cell,
+        instance = _ref3.instance;
+      // reduce the "first cell"s width to compensate added (left) margin
+      var isFirstCell = instance.columns.findIndex(function (c) {
+        return c.id === cell.column.id;
+      }) === 0;
+      return [props, {
+        style: {
+          marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "".concat(-32 * cell.row.depth - 18, "px") : '')
+        }
+      }];
+    };
     Object.assign(instance, {
       withNestedRows: true
     });
+    hooks.getRowProps.push(getRowProps);
+    hooks.getRowProps.push(getRowStyles);
+    hooks.getCellProps.push(getCellProps);
   };
-  hooks.getRowProps.push(getRowProps);
-  hooks.getRowProps.push(getRowStyles);
-  hooks.getCellProps.push(getCellProps);
   hooks.useInstance.push(useInstance);
 };
 var _default = exports.default = useNestedRows;

package/lib/components/Datagrid/useOnRowClick.js

@@ -35,7 +35,7 @@ var useOnRowClick = function useOnRowClick(hooks) {
               row.classList.remove("".concat(_settings.carbon.prefix, "--data-table--selected"));
             });
           }
-          var closestRow = event.target.closest(".".concat(_settings.pkg.prefix, "--datagrid__carbon-row"));
+          var closestRow = event.currentTarget.closest('tr');
           closestRow.classList.add("".concat(_settings.carbon.prefix, "--data-table--selected"));
           if (!withSelectRows) {
             instance.selectedFlatRows && instance.selectedFlatRows.map(function (toggleRow) {

package/lib/components/Datagrid/useRowIsMouseOver.js

@@ -42,7 +42,9 @@ var useRowIsMouseOver = function useRowIsMouseOver(hooks) {
       });
     });
     Object.assign(instance, {
-      rows: rowsWithMouseOver
+      rows: rowsWithMouseOver,
+      withMouseHover: true,
+      setMouseOverRowIndex: setMouseOverRowIndex
     });
     hooks.getRowProps.push(getRowProps);
   };

package/lib/components/Datagrid/useSelectRows.js

@@ -70,12 +70,11 @@ var useSelectRows = function useSelectRows(hooks) {
 };
 var useHighlightSelection = function useHighlightSelection(hooks) {
   var getRowProps = function getRowProps(props, _ref) {
-    var _ref2;
     var row = _ref.row;
     var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
       checked = _row$getToggleRowSele.checked;
     return [props, {
-      className: (0, _classnames.default)(["".concat(blockClass, "__carbon-row"), (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(_settings.carbon.prefix, "--data-table--selected"), checked), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__active-row"), checked), _ref2)])
+      className: (0, _classnames.default)(["".concat(blockClass, "__carbon-row"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(_settings.carbon.prefix, "--data-table--selected"), checked), "".concat(blockClass, "__active-row"), checked)])
     }];
   };
   hooks.getRowProps.push(getRowProps);

package/lib/components/Datagrid/useSortableColumns.js

@@ -94,7 +94,6 @@ var useSortableColumns = function useSortableColumns(hooks) {
         return /*#__PURE__*/_react.default.createElement(_icons.ArrowsVertical, iconProps);
       };
       var Header = function Header(headerProp) {
-        var _cx;
         return column.disableSortBy === true || column.id === 'datagridSelection' ? column.disableSortBy ? column.Header : /*#__PURE__*/_react.default.createElement(_DatagridSelectAll.SelectAll, instance) : /*#__PURE__*/_react.default.createElement(_react2.Button, {
           "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
             ascendingSortableLabelText: ascendingSortableLabelText,
@@ -109,7 +108,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
           renderIcon: function renderIcon(props) {
             return icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props);
           },
-          className: (0, _classnames.default)("".concat(_settings.carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false), _cx))
+          className: (0, _classnames.default)("".concat(_settings.carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false))
         }, column.Header);
       };
       return _objectSpread(_objectSpread({}, column), {}, {