@carbon/ibm-products 2.45.0 → 2.46.0-rc.0

package/es/components/ConditionBuilder/utils/util.d.ts

@@ -1,6 +1,7 @@
-export function focusThisField(evt: any): void;
-export function focusThisItem(currentElement: any): void;
-export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
-export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
+export function focusThisField(evt: any, conditionBuilderRef: any): void;
+export function focusThisItem(currentElement: any, conditionBuilderRef: any): void;
+export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
+export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
 export function checkForHoldingKey(evt: any, key: any): any;
-export function checkDuplicateAction(actionState: any, selectedId: any, currentActionId: any): boolean;
+export function checkIsValid(item: any): any;
+export function manageTabIndexAndFocus(currentElement: any, conditionBuilderRef: any): void;

package/es/components/ConditionBuilder/utils/util.js

@@ -5,40 +5,45 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var focusThisField = function focusThisField(evt) {
-  setTimeout(function () {
-    var _evt$target$closest, _evt$target$closest2;
-    (_evt$target$closest = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest === void 0 || (_evt$target$closest = _evt$target$closest.querySelector('button')) === null || _evt$target$closest === void 0 || _evt$target$closest.click();
-    (_evt$target$closest2 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest2 === void 0 || (_evt$target$closest2 = _evt$target$closest2.querySelector('button')) === null || _evt$target$closest2 === void 0 || _evt$target$closest2.focus();
-  }, 0);
+import { blockClass } from '../ConditionBuilderContext/DataConfigs.js';
+
+var focusThisField = function focusThisField(evt, conditionBuilderRef) {
+  if (evt) {
+    setTimeout(function () {
+      var _evt$target$closest, _evt$target$closest2, _evt$target$closest3;
+      manageTabIndexAndFocus((_evt$target$closest = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.querySelector('button'), conditionBuilderRef);
+      (_evt$target$closest2 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest2 === void 0 || (_evt$target$closest2 = _evt$target$closest2.querySelector('button')) === null || _evt$target$closest2 === void 0 || _evt$target$closest2.click();
+      (_evt$target$closest3 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest3 === void 0 || (_evt$target$closest3 = _evt$target$closest3.querySelector('button')) === null || _evt$target$closest3 === void 0 || _evt$target$closest3.focus();
+    }, 0);
+  }
 };
-var focusThisItem = function focusThisItem(currentElement) {
+var focusThisItem = function focusThisItem(currentElement, conditionBuilderRef) {
   setTimeout(function () {
     //document.activeElement.setAttribute('tabindex', '-1');
     // currentElement.setAttribute('tabindex', '0');
-    currentElement === null || currentElement === void 0 || currentElement.focus();
+    manageTabIndexAndFocus(currentElement, conditionBuilderRef);
   }, 0);
 };
-var traverseClockVise = function traverseClockVise(eachElem, index, allElements, rotate, trapFocus) {
+var traverseClockVise = function traverseClockVise(eachElem, index, allElements, rotate, trapFocus, conditionBuilderRef) {
   if (eachElem == document.activeElement) {
     if (index !== allElements.length - 1) {
-      focusThisItem(allElements[index + 1]);
+      focusThisItem(allElements[index + 1], conditionBuilderRef);
     } else {
-      focusThisItem(allElements[rotate ? 0 : allElements.length - 1]);
+      focusThisItem(allElements[rotate ? 0 : allElements.length - 1], conditionBuilderRef);
     }
   } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
-    focusThisItem(allElements[0]);
+    focusThisItem(allElements[0], conditionBuilderRef);
   }
 };
-var traverseReverse = function traverseReverse(eachElem, index, allElements, rotate, trapFocus) {
+var traverseReverse = function traverseReverse(eachElem, index, allElements, rotate, trapFocus, conditionBuilderRef) {
   if (eachElem == document.activeElement) {
     if (index !== 0) {
-      focusThisItem(allElements[index - 1]);
+      focusThisItem(allElements[index - 1], conditionBuilderRef);
     } else {
-      focusThisItem(allElements[rotate ? allElements.length - 1 : 0]);
+      focusThisItem(allElements[rotate ? allElements.length - 1 : 0], conditionBuilderRef);
     }
   } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
-    focusThisItem(allElements[allElements.length - 1]);
+    focusThisItem(allElements[allElements.length - 1], conditionBuilderRef);
   }
 };
 var checkForHoldingKey = function checkForHoldingKey(evt, key) {
@@ -48,5 +53,18 @@ var checkForHoldingKey = function checkForHoldingKey(evt, key) {
   }
   return evt[key];
 };
+var checkIsValid = function checkIsValid(item) {
+  return item && item !== 'INVALID';
+};
+var manageTabIndexAndFocus = function manageTabIndexAndFocus(currentElement, conditionBuilderRef) {
+  var _currentElement$close, _conditionBuilderRef$;
+  var contentContainer = (_currentElement$close = currentElement === null || currentElement === void 0 ? void 0 : currentElement.closest(".".concat(blockClass, "__content-container"))) !== null && _currentElement$close !== void 0 ? _currentElement$close : currentElement === null || currentElement === void 0 ? void 0 : currentElement.closest(".".concat(blockClass, "__actions-container"));
+  contentContainer && Array.from(contentContainer.querySelectorAll('[tabindex="0"]')).map(function (element) {
+    return element === null || element === void 0 ? void 0 : element.setAttribute('tabindex', '-1');
+  });
+  currentElement === null || currentElement === void 0 || currentElement.setAttribute('tabindex', '0');
+  (_conditionBuilderRef$ = conditionBuilderRef.current) === null || _conditionBuilderRef$ === void 0 || (_conditionBuilderRef$ = _conditionBuilderRef$.querySelector(".".concat(blockClass, "__statement-button"))) === null || _conditionBuilderRef$ === void 0 || _conditionBuilderRef$.setAttribute('tabindex', '1');
+  currentElement === null || currentElement === void 0 || currentElement.focus();
+};
 
-export { checkForHoldingKey, focusThisField, focusThisItem, traverseClockVise, traverseReverse };
+export { checkForHoldingKey, checkIsValid, focusThisField, focusThisItem, manageTabIndexAndFocus, traverseClockVise, traverseReverse };

package/es/components/DataSpreadsheet/DataSpreadsheet.d.ts

@@ -44,6 +44,12 @@ interface DataSpreadsheetProps {
      * The event handler that is called when the active cell changes
      */
     onActiveCellChange?: () => void;
+    /**
+     * Callback for columns after being dragged
+     */
+    onColDrag?: ({ ...args }: {
+        [x: string]: any;
+    }) => void;
     /**
      * The setter fn for the data prop
      */

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -32,7 +32,7 @@ import { useSpreadsheetOutsideClick } from './hooks/useSpreadsheetOutsideClick.j
 import { useMoveActiveCell } from './hooks/useMoveActiveCell.js';
 import { useSpreadsheetEdit } from './hooks/useSpreadsheetEdit.js';
 
-var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
+var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "onColDrag", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
 var componentName = 'DataSpreadsheet';
@@ -43,6 +43,7 @@ var defaults = {
   data: Object.freeze([]),
   defaultEmptyRowCount: 16,
   onDataUpdate: Object.freeze(function () {}),
+  onColDrag: Object.freeze(function () {}),
   onActiveCellChange: Object.freeze(function () {}),
   onSelectionAreaChange: Object.freeze(function () {}),
   theme: 'light'
@@ -62,6 +63,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     defaultEmptyRowCount = _ref$defaultEmptyRowC === void 0 ? defaults.defaultEmptyRowCount : _ref$defaultEmptyRowC,
     _ref$onDataUpdate = _ref.onDataUpdate,
     onDataUpdate = _ref$onDataUpdate === void 0 ? defaults.onDataUpdate : _ref$onDataUpdate,
+    _ref$onColDrag = _ref.onColDrag,
+    onColDrag = _ref$onColDrag === void 0 ? defaults.onColDrag : _ref$onColDrag,
     id = _ref.id,
     _ref$onActiveCellChan = _ref.onActiveCellChange,
     onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
@@ -82,66 +85,75 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   var localRef = useRef();
   var spreadsheetRef = ref || localRef;
   var focusedElement = useActiveElement();
-  var _useState = useState(false),
+  var _useState = useState(columns),
     _useState2 = _slicedToArray(_useState, 2),
-    containerHasFocus = _useState2[0],
-    setContainerHasFocus = _useState2[1];
-  var _useState3 = useState(null),
+    currentColumns = _useState2[0],
+    setCurrentColumns = _useState2[1];
+  var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    activeCellCoordinates = _useState4[0],
-    setActiveCellCoordinates = _useState4[1];
-  var _useState5 = useState([]),
+    pastColumns = _useState4[0],
+    setPastColumns = _useState4[1];
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    selectionAreas = _useState6[0],
-    setSelectionAreas = _useState6[1];
-  var _useState7 = useState([]),
+    containerHasFocus = _useState6[0],
+    setContainerHasFocus = _useState6[1];
+  var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    selectionAreaData = _useState8[0],
-    setSelectionAreaData = _useState8[1];
-  var _useState9 = useState(false),
+    activeCellCoordinates = _useState8[0],
+    setActiveCellCoordinates = _useState8[1];
+  var _useState9 = useState([]),
     _useState10 = _slicedToArray(_useState9, 2),
-    clickAndHoldActive = _useState10[0],
-    setClickAndHoldActive = _useState10[1];
-  var _useState11 = useState(''),
+    selectionAreas = _useState10[0],
+    setSelectionAreas = _useState10[1];
+  var _useState11 = useState([]),
     _useState12 = _slicedToArray(_useState11, 2),
-    currentMatcher = _useState12[0],
-    setCurrentMatcher = _useState12[1];
+    selectionAreaData = _useState12[0],
+    setSelectionAreaData = _useState12[1];
   var _useState13 = useState(false),
     _useState14 = _slicedToArray(_useState13, 2),
-    isEditing = _useState14[0],
-    setIsEditing = _useState14[1];
+    clickAndHoldActive = _useState14[0],
+    setClickAndHoldActive = _useState14[1];
   var _useState15 = useState(''),
     _useState16 = _slicedToArray(_useState15, 2),
-    cellEditorValue = _useState16[0],
-    setCellEditorValue = _useState16[1];
+    currentMatcher = _useState16[0],
+    setCurrentMatcher = _useState16[1];
   var _useState17 = useState(false),
     _useState18 = _slicedToArray(_useState17, 2),
-    headerCellHoldActive = _useState18[0],
-    setHeaderCellHoldActive = _useState18[1];
-  var _useState19 = useState(false),
+    isEditing = _useState18[0],
+    setIsEditing = _useState18[1];
+  var _useState19 = useState(''),
     _useState20 = _slicedToArray(_useState19, 2),
-    selectedHeaderReorderActive = _useState20[0],
-    setSelectedHeaderReorderActive = _useState20[1];
-  var isBlurSpreadsheet = useRef(false);
+    cellEditorValue = _useState20[0],
+    setCellEditorValue = _useState20[1];
   var _useState21 = useState(false),
     _useState22 = _slicedToArray(_useState21, 2),
-    isActiveHeaderCellChanged = _useState22[0],
-    setIsActiveHeaderCellChanged = _useState22[1];
+    headerCellHoldActive = _useState22[0],
+    setHeaderCellHoldActive = _useState22[1];
   var _useState23 = useState(false),
     _useState24 = _slicedToArray(_useState23, 2),
-    activeCellInsideSelectionArea = _useState24[0],
-    setActiveCellInsideSelectionArea = _useState24[1];
+    selectedHeaderReorderActive = _useState24[0],
+    setSelectedHeaderReorderActive = _useState24[1];
+  var isBlurSpreadsheet = useRef(false);
+  var _useState25 = useState(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    isActiveHeaderCellChanged = _useState26[0],
+    setIsActiveHeaderCellChanged = _useState26[1];
+  var _useState27 = useState(false),
+    _useState28 = _slicedToArray(_useState27, 2),
+    activeCellInsideSelectionArea = _useState28[0],
+    setActiveCellInsideSelectionArea = _useState28[1];
   var previousState = usePreviousValue({
     activeCellCoordinates: activeCellCoordinates,
     isEditing: isEditing,
-    cellEditorValue: cellEditorValue
+    cellEditorValue: cellEditorValue,
+    selectedHeaderReorderActive: selectedHeaderReorderActive
   }) || {};
   var cellSizeValue = getCellSize(cellSize);
   var cellEditorRef = useRef();
-  var _useState25 = useState(),
-    _useState26 = _slicedToArray(_useState25, 2),
-    activeCellContent = _useState26[0],
-    setActiveCellContent = _useState26[1];
+  var _useState29 = useState(),
+    _useState30 = _slicedToArray(_useState29, 2),
+    activeCellContent = _useState30[0],
+    setActiveCellContent = _useState30[1];
   var activeCellRef = useRef();
   var cellEditorRulerRef = useRef();
   var hasCustomRowHeader = typeof renderRowHeader === 'function';
@@ -188,6 +200,28 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       });
     });
   }, [cellEditorValue, onDataUpdate]);
+  useEffect(function () {
+    var currentHeaders = [];
+    if (Object.keys(currentColumns).length > 0) {
+      Object.keys(currentColumns).forEach(function (itemIndex) {
+        if (currentColumns[itemIndex].Header) {
+          currentHeaders.push(currentColumns[itemIndex].Header);
+        }
+      });
+    }
+    if (previousState.selectedHeaderReorderActive) {
+      setPastColumns(currentHeaders);
+    }
+    if (!previousState.selectedHeaderReorderActive && pastColumns.length > 0 && !headerCellHoldActive && JSON.stringify(currentHeaders) !== JSON.stringify(pastColumns)) {
+      onColDrag({
+        headers: currentHeaders,
+        data: activeCellContent.props.data
+      });
+      if (currentHeaders.length === 0) {
+        setPastColumns([]);
+      }
+    }
+  }, [previousState === null || previousState === void 0 ? void 0 : previousState.selectedHeaderReorderActive, currentColumns, headerCellHoldActive, columns, activeCellContent, onColDrag, pastColumns]);
 
   // Removes the active cell element
   var removeActiveCell = useCallback(function () {
@@ -650,6 +684,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   }), /*#__PURE__*/React__default.createElement(DataSpreadsheetBody, {
     activeCellRef: activeCellRef,
     activeCellCoordinates: activeCellCoordinates,
+    setCurrentColumns: setCurrentColumns,
     ref: spreadsheetRef,
     clickAndHoldActive: clickAndHoldActive,
     setClickAndHoldActive: setClickAndHoldActive,
@@ -783,6 +818,10 @@ DataSpreadsheet.propTypes = {
    * The event handler that is called when the active cell changes
    */
   onActiveCellChange: PropTypes.func,
+  /**
+   * Callback for when columns are dropped after dragged
+   */
+  onColDrag: PropTypes.func,
   /**
    * The setter fn for the data prop
    */

package/es/components/DataSpreadsheet/DataSpreadsheetBody.d.ts

@@ -48,6 +48,10 @@ interface DataSpreadsheetBodyProps {
      * The spreadsheet id
      */
     id?: number | string;
+    /**
+     * Set current columns after drag drop
+     */
+    setCurrentColumns?: Dispatch<SetStateAction<object[]>>;
     /**
      * The event handler that is called when the active cell changes
      */

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -33,6 +33,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     defaultEmptyRowCount = _ref.defaultEmptyRowCount,
     getTableBodyProps = _ref.getTableBodyProps,
     headerGroups = _ref.headerGroups,
+    setCurrentColumns = _ref.setCurrentColumns,
     id = _ref.id,
     onDataUpdate = _ref.onDataUpdate,
     renderRowHeader = _ref.renderRowHeader,
@@ -309,7 +310,11 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       };
       buildEmptyRows();
     }
-  }, [rows, headerGroups, defaultEmptyRowCount, onDataUpdate]);
+    if (headerGroups !== null && headerGroups !== void 0 && headerGroups[0] && typeof setCurrentColumns === 'function') {
+      var headers = headerGroups[0].headers;
+      setCurrentColumns(headers);
+    }
+  }, [rows, headerGroups, defaultEmptyRowCount, onDataUpdate, setCurrentColumns]);
   var RenderEmptyRows = function RenderEmptyRows() {
     return _div || (_div = /*#__PURE__*/React__default.createElement("div", null));
   };
@@ -513,6 +518,10 @@ DataSpreadsheetBody.propTypes = {
    * Setter fn for containerHasFocus state value
    */
   setContainerHasFocus: PropTypes.func,
+  /**
+   * Set current columns after drag drop
+   */
+  setCurrentColumns: PropTypes.func,
   /**
    * Setter fn for currentMatcher state value
    */

package/es/components/DataSpreadsheet/types/index.d.ts

@@ -15,6 +15,7 @@ export interface PrevState {
     isEditing?: boolean;
     selectionAreaData?: any[];
     clickAndHoldActive?: boolean;
+    selectedHeaderReorderActive?: boolean;
     rowHeight?: number;
     cellSize?: Size;
 }

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

@@ -73,15 +73,39 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     onSaveColumnPrefs(updatedColumns);
   };
   var onCheckboxCheck = function onCheckboxCheck(col, value) {
+    // Update the visibility of columns based on a single column or an array of columns
     var changedDefinitions = columnObjects.map(function (definition) {
-      if ((Array.isArray(col) && col.indexOf(definition) != -1 || definition.id === col.id) && definition.canFilter && !definition.disabled) {
-        return _objectSpread2(_objectSpread2({}, definition), {}, {
+      // If select all is clicked
+      if (Array.isArray(col)) {
+        return col.includes(definition) && definition.canFilter && !definition.disabled ? _objectSpread2(_objectSpread2({}, definition), {}, {
           isVisible: value
-        });
+        }) : definition;
       }
-      return definition;
+      // If a single checkbox is clicked which is written below as a default return
+      return col.id === definition.id ? _objectSpread2(_objectSpread2({}, definition), {}, {
+        isVisible: value
+      }) : definition;
     });
-    setColumnObjects(changedDefinitions);
+
+    // Count the number of visible columns excluding certain IDs after 1st mutation
+    var selectedColumnsCount = changedDefinitions.filter(function (definition) {
+      return definition.isVisible && !['datagridSelection', 'actions'].includes(definition.id);
+    }).length;
+
+    // Ensure special columns are visible if any other columns are visible
+    var finalDefinitions = changedDefinitions.map(function (definition) {
+      // If at least 1 column is visible after mutation, we add selection column and actions column (coming from various extensions)
+      if (selectedColumnsCount > 0) {
+        return ['datagridSelection', 'actions'].includes(definition.id) ? _objectSpread2(_objectSpread2({}, definition), {}, {
+          isVisible: true
+        }) : definition;
+      }
+      // Else we remove selection column and actions column
+      return ['datagridSelection', 'actions'].includes(definition.id) ? _objectSpread2(_objectSpread2({}, definition), {}, {
+        isVisible: false
+      }) : definition;
+    });
+    setColumnObjects(finalDefinitions);
     setDirty();
   };
   var setDirty = function setDirty() {
@@ -96,14 +120,14 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
   }, [columnObjects]);
   var string = searchText.trim().toLowerCase();
   useEffect(function () {
-    var notFilterableCount = columnObjects.filter(function (col) {
-      return !col.canFilter;
-    }).length;
     var actionCount = columnObjects.filter(function (col) {
       return col.id === 'actions';
     }).length;
-    setVisibleColumnsCount(getVisibleColumnsCount() - notFilterableCount - actionCount);
-    setTotalColumns(columnObjects.length - notFilterableCount - actionCount);
+    var datagridSelectionCount = columnObjects.filter(function (col) {
+      return col.id === 'datagridSelection';
+    }).length;
+    setVisibleColumnsCount(getVisibleColumnsCount() - actionCount - datagridSelectionCount < 0 ? 0 : getVisibleColumnsCount() - actionCount - datagridSelectionCount);
+    setTotalColumns(columnObjects.length - actionCount - datagridSelectionCount);
   }, [getVisibleColumnsCount, columnObjects]);
   return /*#__PURE__*/React__default.createElement(TearsheetNarrow, {
     className: "".concat(blockClass, "__customize-columns-tearsheet"),

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, toConsumableArray as _toConsumableArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { MULTISELECT, DROPDOWN, RADIO, CHECKBOX, NUMBER, DATE, BATCH, SAVED_FILTERS, INSTANT, PANEL } from '../constants.js';
 import { MultiSelect, Dropdown, FormGroup, RadioButtonGroup, RadioButton, NumberInput, DatePicker, DatePickerInput, Layer, Checkbox } from '@carbon/react';
 import React__default, { useContext, useState, useRef, useCallback, useEffect } from 'react';
@@ -13,6 +13,7 @@ import OverflowCheckboxes from '../OverflowCheckboxes.js';
 import { getInitialStateFromFilters } from '../utils.js';
 import { FilterContext } from '../FilterProvider.js';
 import { handleCheckboxChange } from '../handleCheckboxChange.js';
+import uuidv4 from '../../../../../../global/js/utils/uuidv4.js';
 import { usePreviousValue } from '../../../../../../global/js/hooks/usePreviousValue.js';
 
 var useFilters = function useFilters(_ref) {
@@ -47,6 +48,7 @@ var useFilters = function useFilters(_ref) {
   var previousState = usePreviousValue({
     panelOpen: panelOpen
   });
+  var filteredItemsRef = useRef();
 
   // When using batch actions we have to store the filters to then apply them later
   var prevFiltersRef = useRef(JSON.stringify(filtersState));
@@ -307,8 +309,18 @@ var useFilters = function useFilters(_ref) {
             }
             return null;
           }).filter(Boolean);
+          var isEqual = compareFilterItems(filteredItems);
+          if (!isEqual) {
+            filteredItemsRef.current = _toConsumableArray(filteredItems);
+          }
+          var getKey = function getKey() {
+            return isEqual ? {
+              key: uuidv4()
+            } : column;
+          };
           filter = /*#__PURE__*/React__default.createElement(MultiSelect, _extends({}, components.MultiSelect, {
             selectedItems: filteredItems,
+            key: getKey(),
             onChange: function onChange(_ref9) {
               var _components$MultiSele, _components$MultiSele2;
               var selectedItems = _ref9.selectedItems;
@@ -324,6 +336,7 @@ var useFilters = function useFilters(_ref) {
                 }
                 return null;
               }).filter(Boolean);
+              filteredItemsRef.current = _toConsumableArray(foundItems);
 
               // Change selected state for those items that have been selected
               allOptions.map(function (a) {
@@ -366,6 +379,25 @@ var useFilters = function useFilters(_ref) {
       key: column
     }, filter);
   };
+  var compareFilterItems = function compareFilterItems(filteredItems) {
+    var _filteredItems$map, _filteredItemsRef$cur, _filteredItemsRef$cur2;
+    var filteredItemsId = (_filteredItems$map = filteredItems.map(function (item) {
+      return item.id;
+    })) !== null && _filteredItems$map !== void 0 ? _filteredItems$map : [];
+    var previousFilteredItemsId = (_filteredItemsRef$cur = filteredItemsRef === null || filteredItemsRef === void 0 || (_filteredItemsRef$cur2 = filteredItemsRef.current) === null || _filteredItemsRef$cur2 === void 0 ? void 0 : _filteredItemsRef$cur2.map(function (item) {
+      return item.id;
+    })) !== null && _filteredItemsRef$cur !== void 0 ? _filteredItemsRef$cur : [];
+    var set1 = new Set(filteredItemsId);
+    var set2 = new Set(previousFilteredItemsId);
+    // Check if the sets have the same size (same number of unique elements)
+    if (set1.size !== set2.size) {
+      return false;
+    }
+    // Check if all elements in set1 are also present in set2 (using spread syntax)
+    return _toConsumableArray(set1).every(function (element) {
+      return set2.has(element);
+    });
+  };
 
   /** This useEffect will properly handle the previous filters when the panel closes
    * 1. If the panel closes we need to call the reset fn but also store the

package/es/components/Datagrid/types/index.d.ts

@@ -6,7 +6,7 @@ import { RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonG
 import { CheckboxProps } from '@carbon/react/lib/components/Checkbox';
 import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
 import React, { CSSProperties, ComponentType, FunctionComponent, JSXElementConstructor, MutableRefObject, ReactNode, TouchEventHandler } from 'react';
-import { Cell, Column, ColumnInstance, FilterValue, Filters, HeaderGroup, Meta, Row, TableCommonProps, TableDispatch, TableInstance, TableToggleAllRowsSelectedProps, UseExpandedRowProps, UseFiltersInstanceProps, UsePaginationInstanceProps, UseResizeColumnsColumnProps, UseResizeColumnsOptions, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseSortByColumnProps, UseSortByOptions, UseTableHooks } from 'react-table';
+import { Cell, Column, ColumnInstance, FilterValue, Filters, HeaderGroup, Meta, Row, TableCommonProps, TableDispatch, TableInstance, TableState, TableToggleAllRowsSelectedProps, UseExpandedRowProps, UseFiltersInstanceProps, UsePaginationInstanceProps, UseResizeColumnsColumnProps, UseResizeColumnsOptions, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseSortByColumnProps, UseSortByOptions, UseTableHooks } from 'react-table';
 import { CarbonIconType } from '@carbon/react/icons';
 import { IconButton, type ButtonProps } from '@carbon/react';
 import { TableBatchActionsProps } from '@carbon/react/lib/components/DataTable/TableBatchActions';
@@ -129,7 +129,15 @@ export interface DataGridTableProps extends TableCommonProps {
 interface DataGridTableState extends UseResizeColumnsState<any>, UseRowSelectState<any> {
     filters: Filters<DataGridFilter>;
 }
-export interface DataGridTableInstance<T extends object = any> extends TableInstance<T> {
+export interface DataGridTableInstance<T extends object = any> extends Omit<TableInstance<T>, 'state'>, Partial<UsePaginationInstanceProps<any>> {
+    shouldDisableSelectRow?: (...args: any[]) => void | boolean;
+    state?: Partial<TableState & UseRowSelectState<any>>;
+    disableSelectAll?: boolean;
+    disableSelectRowsProps?: {
+        labels?: {
+            toggleAllRowsLabel?: string;
+        };
+    };
     withSelectRows?: boolean;
 }
 export interface RowAction {
@@ -253,4 +261,8 @@ export interface ResizeHeaderProps {
 }
 export type VisibleColumns<T extends object = {}> = (allColumns: Array<ColumnInstance<T>>, meta: Meta<T>) => Array<Column<T>>;
 export type NodeFuncType = (props: any) => ReactNode;
+export interface PropGetterMeta {
+    instance?: DataGridTableInstance;
+    row?: Partial<Row<any> & DatagridRow<any>>;
+}
 export {};

package/es/components/Datagrid/useDisableSelectRows.d.ts

@@ -1,2 +1,3 @@
+import { Hooks } from 'react-table';
+declare const useDisableSelectRows: (hooks: Hooks) => void;
 export default useDisableSelectRows;
-declare function useDisableSelectRows(hooks: any): void;

package/es/components/Datagrid/useDisableSelectRows.js

@@ -9,52 +9,56 @@ var useDisableSelectRows = function useDisableSelectRows(hooks) {
   updateSelectAll(hooks);
   updatePageSelectAll(hooks);
   var getRowProps = function getRowProps(props, _ref) {
+    var _instance$shouldDisab;
     var row = _ref.row,
       instance = _ref.instance;
     return [props, {
-      disabled: instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row)
+      disabled: instance === null || instance === void 0 || (_instance$shouldDisab = instance.shouldDisableSelectRow) === null || _instance$shouldDisab === void 0 ? void 0 : _instance$shouldDisab.call(instance, row)
     }];
   };
   hooks.getRowProps.push(getRowProps);
 };
 var updateSelectAll = function updateSelectAll(hooks) {
   var getToggleAllRowsSelectedProps = function getToggleAllRowsSelectedProps(props, _ref2) {
-    var _instance$disableSele;
+    var _instance$rows, _instance$disableSele, _instance$state2;
     var instance = _ref2.instance;
-    var selectableRows = instance.rows.filter(function (row) {
+    var selectableRows = (instance === null || instance === void 0 || (_instance$rows = instance.rows) === null || _instance$rows === void 0 ? void 0 : _instance$rows.filter(function (row) {
       return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
-    });
-    var isAllRowsSelected = selectableRows.length > 0 && selectableRows.every(function (_ref3) {
+    })) || [];
+    var isAllRowsSelected = (selectableRows === null || selectableRows === void 0 ? void 0 : selectableRows.length) > 0 && selectableRows.every(function (_ref3) {
+      var _instance$state;
       var id = _ref3.id;
-      return instance.state.selectedRowIds[id];
+      return instance === null || instance === void 0 || (_instance$state = instance.state) === null || _instance$state === void 0 || (_instance$state = _instance$state.selectedRowIds) === null || _instance$state === void 0 ? void 0 : _instance$state[id];
     });
     return [props, {
       onChange: function onChange(e) {
         selectableRows.forEach(function (row) {
-          return row.toggleRowSelected(e.target.checked);
+          var _toggleRowSelected, _ref4;
+          return row === null || row === void 0 || (_toggleRowSelected = (_ref4 = row).toggleRowSelected) === null || _toggleRowSelected === void 0 ? void 0 : _toggleRowSelected.call(_ref4, e.target.checked);
         });
       },
       style: {
         cursor: 'pointer'
       },
       checked: isAllRowsSelected,
-      disabled: instance.disableSelectAll,
+      disabled: instance === null || instance === void 0 ? void 0 : instance.disableSelectAll,
       title: (instance === null || instance === void 0 || (_instance$disableSele = instance.disableSelectRowsProps) === null || _instance$disableSele === void 0 || (_instance$disableSele = _instance$disableSele.labels) === null || _instance$disableSele === void 0 ? void 0 : _instance$disableSele.toggleAllRowsLabel) || 'Toggle All Rows Selected',
-      indeterminate: Boolean(!isAllRowsSelected && Object.keys(instance.state.selectedRowIds).length)
+      indeterminate: Boolean(!isAllRowsSelected && Object.keys((instance === null || instance === void 0 || (_instance$state2 = instance.state) === null || _instance$state2 === void 0 ? void 0 : _instance$state2.selectedRowIds) || {}).length)
     }];
   };
   hooks.getToggleAllRowsSelectedProps.push(getToggleAllRowsSelectedProps);
 };
 var updatePageSelectAll = function updatePageSelectAll(hooks) {
-  var getToggleAllPageRowsSelectedProps = function getToggleAllPageRowsSelectedProps(props, _ref4) {
-    var _instance$disableSele2;
-    var instance = _ref4.instance;
-    var selectableRows = instance.page.filter(function (row) {
+  var getToggleAllPageRowsSelectedProps = function getToggleAllPageRowsSelectedProps(props, _ref5) {
+    var _instance$page, _instance$disableSele2, _instance$page2;
+    var instance = _ref5.instance;
+    var selectableRows = (instance === null || instance === void 0 || (_instance$page = instance.page) === null || _instance$page === void 0 ? void 0 : _instance$page.filter(function (row) {
       return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
-    });
-    var isAllRowsSelected = selectableRows.length > 0 && selectableRows.every(function (_ref5) {
-      var id = _ref5.id;
-      return instance.state.selectedRowIds[id];
+    })) || [];
+    var isAllRowsSelected = (selectableRows === null || selectableRows === void 0 ? void 0 : selectableRows.length) > 0 && selectableRows.every(function (_ref6) {
+      var _instance$state3;
+      var id = _ref6.id;
+      return instance === null || instance === void 0 || (_instance$state3 = instance.state) === null || _instance$state3 === void 0 || (_instance$state3 = _instance$state3.selectedRowIds) === null || _instance$state3 === void 0 ? void 0 : _instance$state3[id];
     });
     return [props, {
       onChange: function onChange(e) {
@@ -66,12 +70,13 @@ var updatePageSelectAll = function updatePageSelectAll(hooks) {
         cursor: 'pointer'
       },
       checked: isAllRowsSelected,
-      disabled: instance.disableSelectAll,
+      disabled: instance === null || instance === void 0 ? void 0 : instance.disableSelectAll,
       title: (instance === null || instance === void 0 || (_instance$disableSele2 = instance.disableSelectRowsProps) === null || _instance$disableSele2 === void 0 || (_instance$disableSele2 = _instance$disableSele2.labels) === null || _instance$disableSele2 === void 0 ? void 0 : _instance$disableSele2.toggleAllRowsLabel) || 'Toggle All Rows Selected',
-      indeterminate: Boolean(!isAllRowsSelected && instance.page.some(function (_ref6) {
-        var id = _ref6.id;
-        return instance.state.selectedRowIds[id];
-      }))
+      indeterminate: Boolean(!isAllRowsSelected && (instance === null || instance === void 0 || (_instance$page2 = instance.page) === null || _instance$page2 === void 0 ? void 0 : _instance$page2.some(function (_ref7) {
+        var _instance$state4;
+        var id = _ref7.id;
+        return instance === null || instance === void 0 || (_instance$state4 = instance.state) === null || _instance$state4 === void 0 || (_instance$state4 = _instance$state4.selectedRowIds) === null || _instance$state4 === void 0 ? void 0 : _instance$state4[id];
+      })))
     }];
   };
   hooks.getToggleAllPageRowsSelectedProps.push(getToggleAllPageRowsSelectedProps);