@carbon/ibm-products 2.49.1 → 2.50.0-rc.0

package/lib/components/CreateTearsheet/CreateTearsheet.d.ts

@@ -5,8 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { Dispatch, PropsWithChildren, ReactNode, SetStateAction } from 'react';
+import { ExperimentalSecondarySubmit } from './CreateTearsheetStep';
 export interface StepsContextType {
     currentStep: number;
+    setExperimentalSecondarySubmit: Dispatch<SetStateAction<ExperimentalSecondarySubmit>>;
     setIsDisabled: Dispatch<SetStateAction<boolean>>;
     setOnPrevious: (fn: any) => void;
     setOnNext: (fn: any) => void;
@@ -32,6 +34,10 @@ export interface CreateTearsheetProps extends PropsWithChildren {
      * An optional class or classes to be added to the outermost element.
      */
     className?: string;
+    /**
+     * The experimentalSecondary submit button text
+     */
+    experimentalSecondarySubmitText?: string;
     /**
      * A description of the flow, displayed in the header area of the tearsheet.
      */

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -31,7 +31,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "firstFocusElement", "slug", "submitButtonText", "title", "verticalPosition"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "experimentalSecondarySubmitText", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "firstFocusElement", "slug", "submitButtonText", "title", "verticalPosition"];
 var componentName = 'CreateTearsheet';
 var blockClass = "".concat(settings.pkg.prefix, "--tearsheet-create");
 
@@ -49,6 +49,7 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     cancelButtonText = _ref.cancelButtonText,
     children = _ref.children,
     className = _ref.className,
+    experimentalSecondarySubmitText = _ref.experimentalSecondarySubmitText,
     description = _ref.description,
     _ref$influencerWidth = _ref.influencerWidth,
     influencerWidth = _ref$influencerWidth === void 0 ? 'narrow' : _ref$influencerWidth,
@@ -113,6 +114,10 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
     lastIncludedStep = _useState24[0],
     setLastIncludedStep = _useState24[1];
+  var _useState25 = React.useState({}),
+    _useState26 = _rollupPluginBabelHelpers.slicedToArray(_useState25, 2),
+    experimentalSecondarySubmit = _useState26[0],
+    setExperimentalSecondarySubmit = _useState26[1];
   var previousState = usePreviousValue.usePreviousValue({
     currentStep: currentStep,
     open: open
@@ -179,6 +184,8 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     nextButtonText: nextButtonText,
     isSubmitting: isSubmitting,
     componentBlockClass: blockClass,
+    experimentalSecondarySubmit: experimentalSecondarySubmit,
+    experimentalSecondarySubmitText: experimentalSecondarySubmit.labelText ? experimentalSecondarySubmit.labelText : experimentalSecondarySubmitText,
     setCreateComponentActions: setCreateTearsheetActions
   });
   return /*#__PURE__*/React__default["default"].createElement(TearsheetShell.TearsheetShell, _rollupPluginBabelHelpers["extends"]({}, devtools.getDevtoolsProps(componentName), rest, {
@@ -207,6 +214,7 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default["default"].createElement(StepsContext.Provider, {
     value: {
       currentStep: currentStep,
+      setExperimentalSecondarySubmit: setExperimentalSecondarySubmit,
       setIsDisabled: setIsDisabled,
       setOnPrevious: function setOnPrevious(fn) {
         return _setOnPrevious(function () {
@@ -263,6 +271,10 @@ exports.CreateTearsheet.propTypes = {
    * A description of the flow, displayed in the header area of the tearsheet.
    */
   description: index["default"].node,
+  /**
+   * The experimentalSecondary submit button text
+   */
+  experimentalSecondarySubmitText: index["default"].string,
   /**
    * Specifies elements to focus on first on render.
    */

package/lib/components/CreateTearsheet/CreateTearsheetStep.d.ts

@@ -49,6 +49,10 @@ interface CreateTearsheetStepBaseProps extends PropsWithChildren {
      * This will conditionally disable the submit button in the multi step Tearsheet
      */
     disableSubmit?: boolean;
+    /**
+     * Configuration options for customizing the behavior of the experimentalSecondary submit button.
+     */
+    experimentalSecondarySubmit?: ExperimentalSecondarySubmit;
     /**
      * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
      * steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
@@ -91,5 +95,19 @@ interface CreateTearsheetStepBaseProps extends PropsWithChildren {
     title: React.ReactNode;
 }
 type CreateTearsheetStepProps = CreateTearsheetStepBaseProps & fieldsetLegendTextProps;
+/**
+ * Configuration options for customizing the behavior of the experimentalSecondary submit button.
+ *
+ * @property {string} [labelText] - Optional text to replace the default button text.
+ * @property {boolean} [disabled] - If true, the button will be disabled and not clickable.
+ * @property {boolean} [hideSecondarySubmit] - If true, the button will be hidden from view.
+ * @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
+ */
+export type ExperimentalSecondarySubmit = {
+    labelText?: string;
+    disabled?: boolean;
+    hideSecondarySubmit?: boolean;
+    onClick?: () => void;
+};
 export declare let CreateTearsheetStep: React.ForwardRefExoticComponent<CreateTearsheetStepProps & React.RefAttributes<unknown>>;
 export {};

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -25,7 +25,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["children", "className", "description", "disableSubmit", "fieldsetLegendText", "hasFieldset", "includeStep", "introStep", "invalid", "onMount", "onNext", "onPrevious", "secondaryLabel", "subtitle", "title"];
+var _excluded = ["children", "className", "description", "disableSubmit", "experimentalSecondarySubmit", "fieldsetLegendText", "hasFieldset", "includeStep", "introStep", "invalid", "onMount", "onNext", "onPrevious", "secondaryLabel", "subtitle", "title"];
 var componentName = 'CreateTearsheetStep';
 var blockClass = "".concat(settings.pkg.prefix, "--tearsheet-create__step");
 
@@ -34,11 +34,22 @@ var defaults = {
   hasFieldset: true,
   includeStep: true
 };
+
+/**
+ * Configuration options for customizing the behavior of the experimentalSecondary submit button.
+ *
+ * @property {string} [labelText] - Optional text to replace the default button text.
+ * @property {boolean} [disabled] - If true, the button will be disabled and not clickable.
+ * @property {boolean} [hideSecondarySubmit] - If true, the button will be hidden from view.
+ * @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
+ */
+
 exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     description = _ref.description,
     disableSubmit = _ref.disableSubmit,
+    experimentalSecondarySubmit = _ref.experimentalSecondarySubmit,
     fieldsetLegendText = _ref.fieldsetLegendText,
     _ref$hasFieldset = _ref.hasFieldset,
     hasFieldset = _ref$hasFieldset === void 0 ? defaults.hasFieldset : _ref$hasFieldset,
@@ -80,8 +91,9 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   React.useEffect(function () {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnMount(onMount);
+      stepsContext === null || stepsContext === void 0 || stepsContext.setExperimentalSecondarySubmit(_rollupPluginBabelHelpers.objectSpread2({}, experimentalSecondarySubmit));
     }
-  }, [onMount, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
+  }, [onMount, experimentalSecondarySubmit, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
 
   // Used to take the `includeStep` prop and use it as a local state value
   React.useEffect(function () {
@@ -172,6 +184,21 @@ exports.CreateTearsheetStep.propTypes = {
    * This will conditionally disable the submit button in the multi step Tearsheet
    */
   disableSubmit: index["default"].bool,
+  /**
+   * Configuration options for customizing the behavior of the experimentalSecondary submit button.
+   *
+   * @property {string} [labelText] - Optional text to replace the default button text.
+   * @property {boolean} [disabled] - If true, the button will be disabled and not clickable.
+   * @property {boolean} [hideSecondarySubmit] - If true, the button will be hidden from view.
+   * @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
+   */
+  /**@ts-ignore*/
+  experimentalSecondarySubmit: index["default"].shape({
+    labelText: index["default"].string,
+    disabled: index["default"].bool,
+    hideSecondarySubmit: index["default"].bool,
+    onClick: index["default"].func
+  }),
   /**
    * This is the required legend text that appears above a fieldset html element for accessibility purposes.
    * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.

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

@@ -168,7 +168,10 @@ var DatagridContent = function DatagridContent(_ref) {
       className: "".concat(blockClass, "__filter-summary"),
       filters: filterTags,
       clearFilters: function clearFilters() {
-        return EventEmitter.dispatch(constants.CLEAR_FILTERS, tableId);
+        EventEmitter.dispatch(constants.CLEAR_FILTERS, tableId);
+        if (typeof (filterProps === null || filterProps === void 0 ? void 0 : filterProps.onClearFilters) === 'function') {
+          filterProps.onClearFilters();
+        }
       },
       renderLabel: filterProps === null || filterProps === void 0 ? void 0 : filterProps.renderLabel,
       overflowType: "tag"

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

@@ -54,7 +54,6 @@ var SelectAll = function SelectAll(datagridState) {
     dispatch = datagridState.dispatch,
     rows = datagridState.rows,
     getRowId = datagridState.getRowId,
-    toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
     onAllRowSelect = datagridState.onAllRowSelect;
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   if (hideSelectAll || radio) {
@@ -68,24 +67,8 @@ var SelectAll = function SelectAll(datagridState) {
     onChange = _ref.onChange,
     selectProps = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var indeterminate = selectProps.indeterminate;
-  var handleSelectAllChange = function handleSelectAllChange(event) {
-    if (indeterminate) {
-      stateReducer.handleSelectAllRowData({
-        dispatch: dispatch,
-        rows: rows,
-        getRowId: getRowId,
-        indeterminate: true,
-        isChecked: undefined
-      });
-      toggleAllRowsSelected(false);
-      onAllRowSelect === null || onAllRowSelect === void 0 || onAllRowSelect(rows, event);
-      return onChange === null || onChange === void 0 ? void 0 : onChange({
-        target: {
-          checked: false
-        }
-      });
-    }
-    stateReducer.handleSelectAllRowData({
+  var handleOnPageSelectAllChange = function handleOnPageSelectAllChange(event) {
+    stateReducer.handleOnPageSelectAllRowData({
       dispatch: dispatch,
       rows: rows,
       getRowId: getRowId,
@@ -99,7 +82,7 @@ var SelectAll = function SelectAll(datagridState) {
     className: cx__default["default"]("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), /* istanbul ignore next */
     isFirstColumnStickyLeft && Number(windowSize) > 671)),
     name: "".concat(tableId, "-select-all-checkbox-name"),
-    onSelect: handleSelectAllChange,
+    onSelect: handleOnPageSelectAllChange,
     disabled: isFetching || (selectProps === null || selectProps === void 0 ? void 0 : selectProps.disabled),
     id: "".concat(tableId, "-select-all-checkbox-id")
   }));

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -76,10 +76,15 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
 
   // Sync the scrollLeft position of the virtual body to the table header
   React.useEffect(function () {
+    var _document;
+    var headWrapEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head-wrap"));
+    var headEle = headWrapEl === null || headWrapEl === void 0 ? void 0 : headWrapEl.querySelector("thead");
+    if (headEle) {
+      headEle.style.display = 'flex';
+    } // scrollbar width to header column to fix header alignment
+
     function handleScroll(event) {
-      var _document;
       var virtualBody = event.target;
-      var headWrapEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head-wrap"));
       if (headWrapEl) {
         headWrapEl.scrollLeft = virtualBody === null || virtualBody === void 0 ? void 0 : virtualBody.scrollLeft;
       }

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

@@ -40,6 +40,9 @@ var defaults = {
   secondaryActionLabel: 'Cancel',
   align: 'bottom'
 };
+
+// Use same empty array every time, for benefit of useEffect() etc. dependency checking.
+var emptyArray = [];
 var FilterFlyout = function FilterFlyout(_ref) {
   var updateMethod = _ref.updateMethod,
     _ref$flyoutIconDescri = _ref.flyoutIconDescription,
@@ -47,7 +50,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? defaults.align : _ref$align,
     _ref$filters = _ref.filters,
-    filters = _ref$filters === void 0 ? [] : _ref$filters,
+    filters = _ref$filters === void 0 ? emptyArray : _ref$filters,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? defaults.title : _ref$title,
     _ref$primaryActionLab = _ref.primaryActionLabel,
@@ -64,9 +67,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
     secondaryActionLabel = _ref$secondaryActionL === void 0 ? defaults.secondaryActionLabel : _ref$secondaryActionL,
     setAllFilters = _ref.setAllFilters,
     _ref$data = _ref.data,
-    data = _ref$data === void 0 ? [] : _ref$data,
+    data = _ref$data === void 0 ? emptyArray : _ref$data,
     _ref$reactTableFilter = _ref.reactTableFiltersState,
-    reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
+    reactTableFiltersState = _ref$reactTableFilter === void 0 ? emptyArray : _ref$reactTableFilter;
   /** State */
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),

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

@@ -43,6 +43,9 @@ var defaults = {
   searchLabelText: 'Filter search',
   searchPlaceholder: 'Find filters'
 };
+
+// Use same empty array every time, for benefit of useEffect() etc. dependency checking.
+var emptyArray = [];
 var FilterPanel = function FilterPanel(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? defaults.title : _ref$title,
@@ -72,7 +75,7 @@ var FilterPanel = function FilterPanel(_ref) {
     _ref$searchPlaceholde = _ref.searchPlaceholder,
     searchPlaceholder = _ref$searchPlaceholde === void 0 ? defaults.searchPlaceholder : _ref$searchPlaceholde,
     _ref$reactTableFilter = _ref.reactTableFiltersState,
-    reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter,
+    reactTableFiltersState = _ref$reactTableFilter === void 0 ? emptyArray : _ref$reactTableFilter,
     _ref$autoHideFilters = _ref.autoHideFilters,
     autoHideFilters = _ref$autoHideFilters === void 0 ? false : _ref$autoHideFilters,
     _ref$isFetching = _ref.isFetching,

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

@@ -24,10 +24,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+// Use same empty array every time, for benefit of useEffect() etc. dependency checking.
+var emptyArray = [];
 var useFilters = function useFilters(_ref) {
   var updateMethod = _ref.updateMethod,
     _ref$filters = _ref.filters,
-    filters = _ref$filters === void 0 ? [] : _ref$filters,
+    filters = _ref$filters === void 0 ? emptyArray : _ref$filters,
     setAllFilters = _ref.setAllFilters,
     variation = _ref.variation,
     reactTableFiltersState = _ref.reactTableFiltersState,

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

@@ -41,7 +41,7 @@ var RowSizeRadioGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref
   }, /*#__PURE__*/React__default["default"].createElement(react.RadioButtonGroup, {
     legendText: legendText,
-    name: "row-height-group",
+    name: "".concat(tableId, "--row-height-group"),
     orientation: "vertical",
     defaultSelected: getBackwardCompatibleRowSize(selectedOption),
     onChange: onChange

package/lib/components/Datagrid/Datagrid/addons/stateReducer.d.ts

@@ -14,6 +14,13 @@ export function handleSelectAllRowData({ dispatch, rows, getRowId, indeterminate
     indeterminate: any;
     isChecked: any;
 }): any;
+export function handleOnPageSelectAllRowData({ dispatch, rows, getRowId, indeterminate, isChecked, }: {
+    dispatch: any;
+    rows: any;
+    getRowId: any;
+    indeterminate: any;
+    isChecked: any;
+}): any;
 export function handleDynamicRowCheck({ dispatch, status, rowId, depth, index, }: {
     dispatch: any;
     status: any;

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

@@ -16,8 +16,9 @@ var COLUMN_RESIZE_START = 'columnStartResizing';
 var COLUMN_RESIZING = 'columnResizing';
 var COLUMN_RESIZE_END = 'columnDoneResizing';
 var INIT = 'init';
-var TOGGLE_ROW_SELECTED = 'toggleRowSelected';
-var TOGGLE_ALL_ROWS_SELECTED = 'toggleAllRowsSelected';
+var TOGGLE_ROW_SELECTED = 'toggleRowSelected'; // selects individual row
+var TOGGLE_ALL_ROWS_SELECTED = 'toggleAllRowsSelected'; // selects all rows in entire table
+var TOGGLE_ON_PAGE_ALL_ROWS_SELECTED = 'toggleAllRowsOnPageSelected'; // selects all rows in the current page
 var DYNAMIC_ROW_CHECK = 'dynamicRowCheck';
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId, isKeyEvent) {
@@ -82,12 +83,28 @@ var handleSelectAllRowData = function handleSelectAllRowData(_ref2) {
     }
   });
 };
-var handleDynamicRowCheck = function handleDynamicRowCheck(_ref3) {
+var handleOnPageSelectAllRowData = function handleOnPageSelectAllRowData(_ref3) {
   var dispatch = _ref3.dispatch,
-    status = _ref3.status,
-    rowId = _ref3.rowId,
-    depth = _ref3.depth,
-    index = _ref3.index;
+    rows = _ref3.rows,
+    getRowId = _ref3.getRowId,
+    indeterminate = _ref3.indeterminate,
+    isChecked = _ref3.isChecked;
+  return dispatch({
+    type: TOGGLE_ON_PAGE_ALL_ROWS_SELECTED,
+    payload: {
+      rows: rows,
+      getRowId: getRowId,
+      indeterminate: indeterminate,
+      isChecked: isChecked
+    }
+  });
+};
+var handleDynamicRowCheck = function handleDynamicRowCheck(_ref4) {
+  var dispatch = _ref4.dispatch,
+    status = _ref4.status,
+    rowId = _ref4.rowId,
+    depth = _ref4.depth,
+    index = _ref4.index;
   return dispatch({
     type: DYNAMIC_ROW_CHECK,
     payload: {
@@ -128,18 +145,20 @@ var stateReducer = function stateReducer(newState, action) {
       }
     case TOGGLE_ALL_ROWS_SELECTED:
       {
-        var _ref4 = action.payload || {},
-          rows = _ref4.rows,
-          getRowId = _ref4.getRowId,
-          indeterminate = _ref4.indeterminate,
-          isChecked = _ref4.isChecked;
+        var _ref5 = action.payload || {},
+          rows = _ref5.rows,
+          getRowId = _ref5.getRowId,
+          indeterminate = _ref5.indeterminate,
+          isChecked = _ref5.isChecked;
         var newSelectedRowIds = {};
         if (rows) {
+          var _rows$find, _rows$find$getRowProp;
           var newSelectedRowData = {};
+          var nonSelectableRows = ((_rows$find = rows.find(function (row) {
+            return row.getRowProps;
+          })) === null || _rows$find === void 0 || (_rows$find$getRowProp = _rows$find.getRowProps) === null || _rows$find$getRowProp === void 0 || (_rows$find$getRowProp = _rows$find$getRowProp.call(_rows$find)) === null || _rows$find$getRowProp === void 0 ? void 0 : _rows$find$getRowProp.nonselectablerows) || [];
           rows.forEach(function (row) {
-            var _row$getRowProps;
-            var props = (_row$getRowProps = row.getRowProps) === null || _row$getRowProps === void 0 ? void 0 : _row$getRowProps.call(row);
-            if (props && props.disabled) {
+            if (nonSelectableRows.length > 0 && nonSelectableRows.includes(row.id)) {
               return;
             }
             newSelectedRowIds[getRowId(row.original, row.index)] = true;
@@ -152,26 +171,65 @@ var stateReducer = function stateReducer(newState, action) {
         }
         return _rollupPluginBabelHelpers.objectSpread2({}, newState);
       }
+    case TOGGLE_ON_PAGE_ALL_ROWS_SELECTED:
+      {
+        var _ref6 = action.payload || {},
+          _rows = _ref6.rows,
+          _getRowId = _ref6.getRowId,
+          _indeterminate = _ref6.indeterminate,
+          _isChecked = _ref6.isChecked;
+        var previousSelectedRowIds = newState.selectedRowIds || {};
+        var previousSelectedRowData = newState.selectedRowData || {};
+        var _newSelectedRowIds = {};
+        if (_rows) {
+          var _newSelectedRowData = {};
+          _rows.forEach(function (row) {
+            var _row$getRowProps;
+            var props = (_row$getRowProps = row.getRowProps) === null || _row$getRowProps === void 0 ? void 0 : _row$getRowProps.call(row);
+            if (props && props.disabled) {
+              return;
+            }
+            if (props) {
+              if (!_indeterminate && _isChecked) {
+                // adds selection to newly selected rows
+                _newSelectedRowIds[_getRowId(row.original, row.index)] = true;
+                _newSelectedRowData[_getRowId(row.original, row.index)] = row.original;
+              } else {
+                // removes selection from previously selected rows
+                delete previousSelectedRowIds[_getRowId(row.original, row.index)];
+                delete previousSelectedRowData[_getRowId(row.original, row.index)];
+              }
+            }
+          });
+          var finalSelectedRowIds = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, previousSelectedRowIds), _newSelectedRowIds);
+          var finalSelectedRowData = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, previousSelectedRowData), _newSelectedRowData);
+          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState), {}, {
+            selectedRowIds: finalSelectedRowIds,
+            selectedRowData: finalSelectedRowData
+          });
+        }
+        return _rollupPluginBabelHelpers.objectSpread2({}, newState);
+      }
     case TOGGLE_ROW_SELECTED:
       {
-        var _ref5 = action.payload || {},
-          rowData = _ref5.rowData,
-          _isChecked = _ref5.isChecked,
-          _getRowId = _ref5.getRowId;
+        var _ref7 = action.payload || {},
+          rowData = _ref7.rowData,
+          _isChecked2 = _ref7.isChecked,
+          _getRowId2 = _ref7.getRowId;
         if (!rowData) {
           return;
         }
-        if (_isChecked) {
+        if (_isChecked2) {
           return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState), {}, {
-            selectedRowData: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState.selectedRowData), {}, _rollupPluginBabelHelpers.defineProperty({}, _getRowId(rowData.original, rowData.index), rowData.original))
+            selectedRowData: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState.selectedRowData), {}, _rollupPluginBabelHelpers.defineProperty({}, _getRowId2(rowData.original, rowData.index), rowData.original))
           });
         }
-        if (rowData && !_isChecked) {
+        if (rowData && !_isChecked2) {
           var newData = _rollupPluginBabelHelpers.objectSpread2({}, newState.selectedRowData);
-          var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref6) {
-            var _ref7 = _rollupPluginBabelHelpers.slicedToArray(_ref6, 1),
-              key = _ref7[0];
-            return parseInt(key) !== parseInt(_getRowId(rowData.original, rowData.index));
+          var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref8) {
+            var _ref9 = _rollupPluginBabelHelpers.slicedToArray(_ref8, 1),
+              key = _ref9[0];
+            return parseInt(key) !== parseInt(_getRowId2(rowData.original, rowData.index));
           }));
           return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState), {}, {
             selectedRowData: dataWithRemovedRow
@@ -187,27 +245,27 @@ var stateReducer = function stateReducer(newState, action) {
       }
     case COLUMN_RESIZE_START:
       {
-        var _ref8 = action.payload || {},
-          headerId = _ref8.headerId;
+        var _ref10 = action.payload || {},
+          headerId = _ref10.headerId;
         return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState), {}, {
           isResizing: headerId
         });
       }
     case COLUMN_RESIZING:
       {
-        var _ref9 = action.payload || {},
-          _headerId = _ref9.headerId,
-          newWidth = _ref9.newWidth,
-          defaultWidth = _ref9.defaultWidth;
+        var _ref11 = action.payload || {},
+          _headerId = _ref11.headerId,
+          newWidth = _ref11.newWidth,
+          defaultWidth = _ref11.defaultWidth;
         var newColumnWidth = {};
         if (typeof _headerId === 'undefined') {
           return _rollupPluginBabelHelpers.objectSpread2({}, newState);
         }
         newColumnWidth[_headerId] = newWidth;
-        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref10) {
-          var _ref11 = _rollupPluginBabelHelpers.slicedToArray(_ref10, 2);
-            _ref11[0];
-            var value = _ref11[1];
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref12) {
+          var _ref13 = _rollupPluginBabelHelpers.slicedToArray(_ref12, 2);
+            _ref13[0];
+            var value = _ref13[1];
           return !isNaN(value);
         }));
         var headerIdArray = newState.columnResizing.headerIdWidths || [];
@@ -222,10 +280,10 @@ var stateReducer = function stateReducer(newState, action) {
       }
     case COLUMN_RESIZE_END:
       {
-        var _ref12 = action.payload || {},
-          onColResizeEnd = _ref12.onColResizeEnd,
-          _headerId2 = _ref12.headerId,
-          isKeyEvent = _ref12.isKeyEvent;
+        var _ref14 = action.payload || {},
+          onColResizeEnd = _ref14.onColResizeEnd,
+          _headerId2 = _ref14.headerId,
+          isKeyEvent = _ref14.isKeyEvent;
         var currentColumn = {};
         currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
         var allChangedColumns = newState.columnResizing.columnWidths;
@@ -254,6 +312,7 @@ var stateReducer = function stateReducer(newState, action) {
 exports.handleColumnResizeEndEvent = handleColumnResizeEndEvent;
 exports.handleColumnResizingEvent = handleColumnResizingEvent;
 exports.handleDynamicRowCheck = handleDynamicRowCheck;
+exports.handleOnPageSelectAllRowData = handleOnPageSelectAllRowData;
 exports.handleSelectAllRowData = handleSelectAllRowData;
 exports.handleToggleRowSelected = handleToggleRowSelected;
 exports.stateReducer = stateReducer;

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

@@ -87,6 +87,7 @@ export interface FilterFlyoutProps {
     flyoutIconDescription?: string;
     onFlyoutClose?: () => void;
     onFlyoutOpen?: () => void;
+    onClearFilters?: () => void;
     panelIconDescription?: string;
     primaryActionLabel?: string;
     reactTableFiltersState?: ReactTableFiltersState[];
@@ -248,6 +249,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
     onRowExpand?: (row: DatagridRow, event: React.MouseEvent<HTMLElement>) => void;
     ExpandedRowContentComponent?: JSXElementConstructor<any>;
     getAsyncSubRows?: (row: DatagridRow) => void;
+    enableSpacerColumn?: boolean;
 }
 export interface DataGridData {
     instance?: DataGridTableInstance;

package/lib/components/Datagrid/useDisableSelectRows.js

@@ -9,24 +9,39 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var nonselectablerowsList = function nonselectablerowsList(instance) {
+  var _instance$rows;
+  var nonselectablerows = (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);
+  }).map(function (row) {
+    return row.id;
+  })) || [];
+  return nonselectablerows;
+};
 var useDisableSelectRows = function useDisableSelectRows(hooks) {
   updateSelectAll(hooks);
   updatePageSelectAll(hooks);
+  var nonselectablerows = [];
+  var useInstance = function useInstance(instance) {
+    nonselectablerows = nonselectablerowsList(instance);
+  };
+  hooks.useInstance.push(useInstance);
   var getRowProps = function getRowProps(props, _ref) {
     var _instance$shouldDisab;
     var row = _ref.row,
       instance = _ref.instance;
     return [props, {
-      disabled: instance === null || instance === void 0 || (_instance$shouldDisab = instance.shouldDisableSelectRow) === null || _instance$shouldDisab === void 0 ? void 0 : _instance$shouldDisab.call(instance, row)
+      disabled: instance === null || instance === void 0 || (_instance$shouldDisab = instance.shouldDisableSelectRow) === null || _instance$shouldDisab === void 0 ? void 0 : _instance$shouldDisab.call(instance, row),
+      nonselectablerows: nonselectablerows
     }];
   };
   hooks.getRowProps.push(getRowProps);
 };
 var updateSelectAll = function updateSelectAll(hooks) {
   var getToggleAllRowsSelectedProps = function getToggleAllRowsSelectedProps(props, _ref2) {
-    var _instance$rows, _instance$disableSele, _instance$state2;
+    var _instance$rows2, _instance$disableSele, _instance$state2;
     var instance = _ref2.instance;
-    var selectableRows = (instance === null || instance === void 0 || (_instance$rows = instance.rows) === null || _instance$rows === void 0 ? void 0 : _instance$rows.filter(function (row) {
+    var selectableRows = (instance === null || instance === void 0 || (_instance$rows2 = instance.rows) === null || _instance$rows2 === void 0 ? void 0 : _instance$rows2.filter(function (row) {
       return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
     })) || [];
     var isAllRowsSelected = (selectableRows === null || selectableRows === void 0 ? void 0 : selectableRows.length) > 0 && selectableRows.every(function (_ref3) {

package/lib/components/Datagrid/useFlexResize.d.ts

@@ -1,8 +1,2 @@
 export default useFlexResize;
-/**
- * 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.
- */
 declare function useFlexResize(hooks: any): void;