@carbon/ibm-products 1.69.0 → 1.71.0

package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js

@@ -129,7 +129,8 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioTile, {
     className: "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step--custom-tile"),
     value: "standard",
-    id: "tile-1"
+    id: "tile-1",
+    tabIndex: selectedCategory === 'standard' ? 0 : -1
   }, /*#__PURE__*/_react.default.createElement(_NoDataIllustration.NoDataIllustration, {
     size: "lg"
   }), /*#__PURE__*/_react.default.createElement("span", {
@@ -137,7 +138,8 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
   }, "Standard")), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioTile, {
     className: "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step--custom-tile"),
     value: "premium",
-    id: "tile-2"
+    id: "tile-2",
+    tabIndex: selectedCategory === 'premium' ? 0 : -1
   }, /*#__PURE__*/_react.default.createElement(_NoDataIllustration.NoDataIllustration, {
     size: "lg"
   }), /*#__PURE__*/_react.default.createElement("span", {
@@ -145,7 +147,8 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
   }, "Premium")), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioTile, {
     className: "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step--custom-tile"),
     value: "plus",
-    id: "tile-3"
+    id: "tile-3",
+    tabIndex: selectedCategory === 'plus' ? 0 : -1
   }, /*#__PURE__*/_react.default.createElement(_NoDataIllustration.NoDataIllustration, {
     size: "lg"
   }), /*#__PURE__*/_react.default.createElement("span", {

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -98,7 +98,7 @@ var DatagridContent = function DatagridContent(_ref) {
   });
   var renderTable = function renderTable() {
     var _getTableProps;
-    return /*#__PURE__*/_react.default.createElement(Table, (0, _extends2.default)({}, getTableProps(), {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Table, (0, _extends2.default)({}, getTableProps(), {
       className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit && 'grid',
       tabIndex: withInlineEdit && 0,
@@ -119,7 +119,7 @@ var DatagridContent = function DatagridContent(_ref) {
       title: title
     }), !withVirtualScroll && /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
       rows: contentRows
-    })));
+    }))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && renderPagination());
   };
   var _useMultipleKeyTracki = (0, _hooks2.useMultipleKeyTracking)({
       ref: withInlineEdit ? multiKeyTrackingRef : null,
@@ -144,8 +144,6 @@ var DatagridContent = function DatagridContent(_ref) {
   (0, _hooks3.useSubscribeToEventEmitter)(_constants.CLEAR_SINGLE_FILTER, function (id) {
     return (0, _FilterProvider.clearSingleFilter)(id, setAllFilters, state);
   });
-
-  /* istanbul ignore next */
   var renderFilterSummary = function renderFilterSummary() {
     return state.filters.length > 0 && /*#__PURE__*/_react.default.createElement(_FilterSummary.FilterSummary, {
       className: "".concat(blockClass, "__filter-summary"),
@@ -157,6 +155,11 @@ var DatagridContent = function DatagridContent(_ref) {
       overflowType: "tag"
     });
   };
+  var renderPagination = function renderPagination() {
+    if ((contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination) {
+      return /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TableContainer, {
     className: (0, _classnames.default)("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx5 = {}, (0, _defineProperty2.default)(_cx5, "".concat(blockClass, "__grid-container-grid-active"), gridActive), (0, _defineProperty2.default)(_cx5, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx5, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx5)),
     title: gridTitle,
@@ -164,9 +167,7 @@ var DatagridContent = function DatagridContent(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_DatagridToolbar.default, datagridState), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(blockClass, "__table-container"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
     ref: gridAreaRef
-  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react.default.createElement(_FilterPanel.default, (0, _extends2.default)({
-    updateMethod: "batch"
-  }, getFilterFlyoutProps(), {
+  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react.default.createElement(_FilterPanel.default, (0, _extends2.default)({}, getFilterFlyoutProps(), {
     title: filterProps.panelTitle,
     filterSections: filterProps.sections,
     isFetching: isFetching
@@ -177,7 +178,7 @@ var DatagridContent = function DatagridContent(_ref) {
   }, renderTable()) : withVirtualScroll ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__virtualScrollContainer"),
     ref: gridRef
-  }, renderTable()) : renderTable()))), (contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
+  }, renderTable()) : renderTable()))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) !== 'panel' && renderPagination(), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
     instance: datagridState
   }));
 };

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -33,7 +33,8 @@ var getAccessibilityProps = function getAccessibilityProps(header) {
   return props;
 };
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
-  var resizerAriaLabel = datagridState.resizerAriaLabel;
+  var resizerAriaLabel = datagridState.resizerAriaLabel,
+    isFetching = datagridState.isFetching;
   // Used to measure the height of the table and uses that value
   // to display a vertical line to indicate the column you are resizing
   (0, _react.useEffect)(function () {
@@ -106,9 +107,13 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
     }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && !header.isAction && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, header.getResizerProps(), {
+      disabled: isFetching,
       onMouseDown: function onMouseDown(event) {
         return handleOnMouseDownResize(event, header.getResizerProps);
       },
+      onMouseUp: function onMouseUp() {
+        return (0, _stateReducer.handleColumnResizeEndEvent)(dispatch, onColResizeEnd, header.id, true);
+      },
       onKeyDown: function onKeyDown(event) {
         var key = event.key;
         if (key === 'ArrowLeft' || key === 'ArrowRight') {

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -37,7 +37,9 @@ var DatagridRow = function DatagridRow(datagridState) {
     prepareRow = datagridState.prepareRow,
     key = datagridState.key,
     tableId = datagridState.tableId,
-    withExpandedRows = datagridState.withExpandedRows;
+    withExpandedRows = datagridState.withExpandedRows,
+    withMouseHover = datagridState.withMouseHover,
+    setMouseOverRowIndex = datagridState.setMouseOverRowIndex;
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -82,6 +84,9 @@ var DatagridRow = function DatagridRow(datagridState) {
     return null;
   };
   var handleMouseLeave = function handleMouseLeave(event) {
+    if (withMouseHover) {
+      setMouseOverRowIndex(null);
+    }
     var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
     hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
   };

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -21,7 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var SelectAll = function SelectAll(datagridState) {
   var _columns$;
-  var _useState = (0, _react.useState)(window.innerWidth),
+  var _useState = (0, _react.useState)(typeof window !== 'undefined' ? window.innerWidth : ''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
@@ -30,7 +30,9 @@ var SelectAll = function SelectAll(datagridState) {
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
-    window.addEventListener('resize', updateSize);
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', updateSize);
+    }
     return function () {
       return window.removeEventListener('resize', updateSize);
     };
@@ -47,7 +49,8 @@ var SelectAll = function SelectAll(datagridState) {
     dispatch = datagridState.dispatch,
     rows = datagridState.rows,
     getRowId = datagridState.getRowId,
-    toggleAllRowsSelected = datagridState.toggleAllRowsSelected;
+    toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
+    onAllRowSelect = datagridState.onAllRowSelect;
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   if (hideSelectAll || radio) {
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -69,6 +72,7 @@ var SelectAll = function SelectAll(datagridState) {
         indeterminate: true
       });
       toggleAllRowsSelected(false);
+      onAllRowSelect === null || onAllRowSelect === void 0 ? void 0 : onAllRowSelect(rows, event);
       return onChange === null || onChange === void 0 ? void 0 : onChange({
         target: {
           checked: false
@@ -81,6 +85,7 @@ var SelectAll = function SelectAll(datagridState) {
       getRowId: getRowId,
       isChecked: event.target.checked
     });
+    onAllRowSelect === null || onAllRowSelect === void 0 ? void 0 : onAllRowSelect(rows, event);
     return onChange === null || onChange === void 0 ? void 0 : onChange(event);
   };
   return /*#__PURE__*/_react.default.createElement("div", {

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -109,6 +109,16 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       }
     }));
   };
+  var onCancelHandler = function onCancelHandler() {
+    (0, _stateReducer.handleSelectAllRowData)({
+      dispatch: dispatch,
+      rows: [],
+      getRowId: getRowId,
+      isChecked: false
+    });
+    toggleAllRowsSelected(false);
+    setGlobalFilter(null);
+  };
 
   // Only display the first two batch actions, the rest are
   // displayed inside of the ButtonMenu if there are more than
@@ -116,10 +126,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TableBatchActions, {
     shouldShowBatchActions: totalSelected > 0,
     totalSelected: totalSelected,
-    onCancel: function onCancel() {
-      toggleAllRowsSelected(false);
-      setGlobalFilter(null);
-    },
+    onCancel: onCancelHandler,
     translateWithId: translateWithIdBatchActions
   }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
     if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3) {

package/lib/components/Datagrid/Datagrid/DraggableElement.js

@@ -48,7 +48,7 @@ var DraggableElement = function DraggableElement(_ref) {
     }, "".concat(blockClass, "__draggable-handleStyle"))
   }, isSticky ? /*#__PURE__*/_react.default.createElement(_iconsReact.Locked16, null) : /*#__PURE__*/_react.default.createElement(_iconsReact.Draggable16, null)), children);
   var style = {
-    transform: _utilities.CSS.Transform.toString(transform),
+    transform: !disabled ? _utilities.CSS.Transform.toString(transform) : {},
     transition: transition
   };
   return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({

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

@@ -48,6 +48,9 @@ var Columns = function Columns(_ref) {
       $splice: [[from, 1], [to, 0, fromCol]]
     }));
   }, [columns, setColumnsObject]);
+  var filteredStickyColumn = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) {
+    return !item.sticky;
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__customize-columns-column-list"),
     ref: listRef
@@ -71,7 +74,7 @@ var Columns = function Columns(_ref) {
     checked: getVisibleColumnsCount() === columns.length,
     indeterminate: getVisibleColumnsCount() < columns.length && getVisibleColumnsCount() > 0,
     onChange: function onChange() {
-      onSelectColumn(columns, getVisibleColumnsCount() !== columns.length);
+      onSelectColumn(filteredStickyColumn, getVisibleColumnsCount() !== columns.length);
     },
     id: "".concat(blockClass, "__customization-column-select-all"),
     labelText: selectAllLabel

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -92,7 +92,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
   };
   var onCheckboxCheck = function onCheckboxCheck(col, value) {
     var changedDefinitions = columnObjects.map(function (definition) {
-      if (Array.isArray(col) && col.indexOf(definition) != null || definition.id === col.id) {
+      if (Array.isArray(col) && col.indexOf(definition) != -1 || definition.id === col.id) {
         return _objectSpread(_objectSpread({}, definition), {}, {
           isVisible: value
         });

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

@@ -30,18 +30,23 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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,
@@ -51,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,
@@ -97,6 +102,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'));
@@ -186,9 +194,13 @@ var FilterFlyout = function FilterFlyout(_ref) {
   };
 
   /** Effects */
+  // Close flyout when clicking outside
   (0, _hooks.useClickOutside)(filterFlyoutRef, function (target) {
     var hasClickedOnDatePicker = target.closest('.flatpickr-calendar');
     var hasClickedOnDropdown = target.className === "".concat(_settings.carbon.prefix, "--list-box__menu-item__option");
+
+    // Do not do anything if flyout is closed or if clicking on anything
+    // rendered via a portal
     if (!open || hasClickedOnDatePicker || hasClickedOnDropdown) {
       return;
     }

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

@@ -23,7 +23,6 @@ var _ = require(".");
 var _hooks = require("./hooks");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/* eslint-disable react/jsx-key */
 /**
  * Copyright IBM Corp. 2022, 2024
  *
@@ -34,14 +33,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var 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,
@@ -57,13 +63,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$isFetching = _ref.isFetching,
@@ -187,7 +193,8 @@ 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__*/_react.default.createElement(_framerMotion.motion.div, {
@@ -213,7 +220,10 @@ var FilterPanel = function FilterPanel(_ref) {
     tooltipPosition: "bottom",
     tooltipAlignment: "end",
     onClick: closePanel
-  }), showFilterSearch && /*#__PURE__*/_react.default.createElement("div", {
+  }), showFilterSearch &&
+  /*#__PURE__*/
+  /* istanbul ignore next */
+  _react.default.createElement("div", {
     ref: filterSearchRef,
     className: "".concat(componentClass, "__search")
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Search, {

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

@@ -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 _objectSpread(_objectSpread({}, 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 = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     panelOpen = _useState2[0],
     setPanelOpen = _useState2[1];
+  var initialState = {
+    savedFilters: []
+  };
+  var _useReducer = (0, _react.useReducer)(filteringReducer, initialState),
+    _useReducer2 = (0, _slicedToArray2.default)(_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/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RADIO = exports.PANEL_WIDTH = exports.PANEL = exports.NUMBER = exports.INSTANT = exports.FLYOUT = exports.DROPDOWN = exports.DATE = exports.CLEAR_SINGLE_FILTER = exports.CLEAR_FILTERS = exports.CHECKBOX = exports.BATCH = exports.ACTION_SET_HEIGHT = void 0;
+exports.SAVED_FILTERS = exports.RADIO = exports.PANEL_WIDTH = exports.PANEL = exports.NUMBER = exports.INSTANT = exports.FLYOUT = exports.DROPDOWN = exports.DATE = exports.CLEAR_SINGLE_FILTER = exports.CLEAR_FILTERS = exports.CHECKBOX = exports.BATCH = exports.ACTION_SET_HEIGHT = void 0;
 /**
- * Copyright IBM Corp. 2022, 2022
+ * 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.
  */
+
 /** Constants for update methods can either be batch or instant */
 var BATCH = 'batch';
 exports.BATCH = BATCH;
@@ -44,4 +45,8 @@ exports.CLEAR_SINGLE_FILTER = CLEAR_SINGLE_FILTER;
 var PANEL_WIDTH = 320;
 exports.PANEL_WIDTH = PANEL_WIDTH;
 var ACTION_SET_HEIGHT = 64;
-exports.ACTION_SET_HEIGHT = ACTION_SET_HEIGHT;
+
+/** Constants for local reducer */
+exports.ACTION_SET_HEIGHT = ACTION_SET_HEIGHT;
+var SAVED_FILTERS = 'savedFilters';
+exports.SAVED_FILTERS = SAVED_FILTERS;

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

@@ -6,6 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _FilterProvider = require("../FilterProvider");
 var _react = require("react");
+/**
+ * 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.
+ */
+
 var useFilterContext = function useFilterContext() {
   // get the context
   var context = (0, _react.useContext)(_FilterProvider.FilterContext);

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

@@ -15,6 +15,7 @@ var _carbonComponentsReact = require("carbon-components-react");
 var _constants = require("../constants");
 var _utils = require("../utils");
 var _hooks = require("../../../../../../global/js/hooks");
+var _FilterProvider = require("../FilterProvider");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -26,10 +27,13 @@ var useFilters = function useFilters(_ref) {
     setAllFilters = _ref.setAllFilters,
     variation = _ref.variation,
     reactTableFiltersState = _ref.reactTableFiltersState,
-    _ref$onCancel = _ref.onCancel,
-    onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
+    onCancel = _ref.onCancel,
     panelOpen = _ref.panelOpen,
     isFetching = _ref.isFetching;
+  var _useContext = (0, _react.useContext)(_FilterProvider.FilterContext),
+    state = _useContext.state,
+    localDispatch = _useContext.dispatch;
+  var savedFilters = state.savedFilters;
   /** State */
   var _useState = (0, _react.useState)((0, _utils.getInitialStateFromFilters)(filters, variation, reactTableFiltersState)),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -169,6 +173,16 @@ var useFilters = function useFilters(_ref) {
     }
     setFiltersObjectArray(filtersObjectArrayCopy);
 
+    // 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: filtersObjectArrayCopy
+      }
+    });
+
     // // Automatically apply the filters if the updateMethod is instant
     if (updateMethod === _constants.INSTANT) {
       setAllFilters(filtersObjectArrayCopy);
@@ -348,10 +362,27 @@ var useFilters = function useFilters(_ref) {
       setAllFilters(JSON.parse(prevFiltersObjectArrayRef.current));
       setFetchingReset(true);
     }
+    if (isFetching && fetchingReset) {
+      var cleanFilters = function cleanFilters(originalFilterState) {
+        var copy = _objectSpread({}, 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/hooks/useShouldDisableButtons.js

@@ -9,11 +9,12 @@ 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.
  */
+
 /* eslint-disable jsdoc/check-param-names */
 
 /**
@@ -24,8 +25,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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getInitialStateFromFilters = void 0;
 var _constants = require("./constants");
 /**
- * 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.
@@ -24,9 +24,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 = 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 = function getInitialStateFromFilters(filters, variation, initialFilters) {
   var initialFilterState = {};
   var setInitialState = function setInitialState(_ref) {
     var type = _ref.type,
@@ -80,8 +78,6 @@ var getInitialStateFromFilters = function getInitialStateFromFilters(filters) {
         return setInitialState(filter);
       });
     });
-  } else {
-    console.error('No variation passed into useInitialStateFromFilters');
   }
   if (initialFilters.length > 0) {
     applyInitialFilters(initialFilterState, initialFilters);