@carbon/ibm-products 2.43.2-canary.27 → 2.43.2-canary.271

package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var layout = require('@carbon/layout');

package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var settings = require('../../../settings.js');
 var removeCellSelections = require('../utils/removeCellSelections.js');

package/lib/components/DataSpreadsheet/index.d.ts

@@ -1 +1,8 @@
-export { DataSpreadsheet } from "./DataSpreadsheet";
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { DataSpreadsheet } from './DataSpreadsheet';
+export type { DataSpreadsheetProps } from './DataSpreadsheet';

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

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
 export type Size = 'xs' | 'sm' | 'md' | 'lg';
 export type Theme = 'light' | 'dark';
 export interface SpreadsheetColumn {
@@ -15,6 +21,7 @@ export interface PrevState {
     isEditing?: boolean;
     selectionAreaData?: any[];
     clickAndHoldActive?: boolean;
+    selectedHeaderReorderActive?: boolean;
     rowHeight?: number;
     cellSize?: Size;
 }

package/lib/components/DataSpreadsheet/utils/checkActiveHeaderCell.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var deepCloneObject = require('../../../global/js/utils/deepCloneObject.js');
 

package/lib/components/DataSpreadsheet/utils/checkForHoldingKey.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var checkForHoldingKey = function checkForHoldingKey(event, key) {
   // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
   if (key == 'cmd') {

package/lib/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var deepCloneObject = require('../../../global/js/utils/deepCloneObject.js');
 
 var checkSelectedHeaderCell = function checkSelectedHeaderCell(headerIndex, selectionAreas, headerType, items) {

package/lib/components/DataSpreadsheet/utils/commonEventHandlers.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var settings = require('../../../settings.js');
 var checkForHoldingKey = require('./checkForHoldingKey.js');
@@ -54,7 +52,7 @@ var handleBodyCellClick = function handleBodyCellClick(cell, columnIndex, event)
     row: cell.row.index,
     column: columnIndex
   };
-  var tempMatcher = uuidv4["default"]();
+  var tempMatcher = uuidv4.default();
   setClickAndHoldActive(true);
 
   // prevent multiple selections unless cmd key is held

package/lib/components/DataSpreadsheet/utils/createActiveCellFn.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var layout = require('@carbon/layout');
 var settings = require('../../../settings.js');
 

package/lib/components/DataSpreadsheet/utils/createCellSelectionArea.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var layout = require('@carbon/layout');
 var deepCloneObject = require('../../../global/js/utils/deepCloneObject.js');
 var getSelectionAreaPoints = require('./getSelectionAreaPoints.js');

package/lib/components/DataSpreadsheet/utils/getCellSize.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var layout = require('@carbon/layout');
 
 var getSizeInPixels = function getSizeInPixels(carbonSize) {

package/lib/components/DataSpreadsheet/utils/getSelectionAreaPoints.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var getSelectionAreaPoints = function getSelectionAreaPoints(area) {
   var greatestRowIndex = Math.max(area.point1.row, area.point2.row);
   var greatestColumnIndex = Math.max(area.point1.column, area.point2.column);

package/lib/components/DataSpreadsheet/utils/getSpreadsheetWidth.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var layout = require('@carbon/layout');
 
 var getSpreadsheetWidth = function getSpreadsheetWidth(_ref) {

package/lib/components/DataSpreadsheet/utils/handleActiveCellInSelectionEnter.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var getSelectionAreaPoints = require('./getSelectionAreaPoints.js');
 

package/lib/components/DataSpreadsheet/utils/handleActiveCellInSelectionTab.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var getSelectionAreaPoints = require('./getSelectionAreaPoints.js');
 
 var handleActiveCellInSelectionTab = function handleActiveCellInSelectionTab(_ref) {

package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var deepCloneObject = require('../../../global/js/utils/deepCloneObject.js');
 var rangeWithCallback = require('../../../global/js/utils/rangeWithCallback.js');
 

package/lib/components/DataSpreadsheet/utils/handleEditSubmit.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var removeCellSelections = require('./removeCellSelections.js');
 var uuidv4 = require('../../../global/js/utils/uuidv4.js');
@@ -40,7 +38,7 @@ var handleEditSubmit = function handleEditSubmit(_ref) {
         spreadsheetRef: spreadsheetRef
       });
       submitEditChanges();
-      var tempMatcher = uuidv4["default"]();
+      var tempMatcher = uuidv4.default();
       var newSelectionArea = {
         row: type === 'Enter' ? activeCellCoordinates.row === rows.length - 1 ? activeCellCoordinates.row : activeCellCoordinates.row + 1 : activeCellCoordinates.row,
         column: type === 'Tab' ? activeCellCoordinates.column === columns.length - 1 ? activeCellCoordinates.column : activeCellCoordinates.column + 1 : activeCellCoordinates.column

package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var deepCloneObject = require('../../../global/js/utils/deepCloneObject.js');
 var uuidv4 = require('../../../global/js/utils/uuidv4.js');
@@ -59,7 +57,7 @@ var handleHeaderCellSelection = function handleHeaderCellSelection(_ref2) {
     // going to always be the last row
     column: type === 'column' ? columnValue : columns.length - 1
   };
-  var tempMatcher = uuidv4["default"]();
+  var tempMatcher = uuidv4.default();
   if (!isHoldingShiftKey) {
     setActiveCellCoordinates({
       row: type === 'column' ? 0 : rowValue,

package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var deepCloneObject = require('../../../global/js/utils/deepCloneObject.js');
 var uuidv4 = require('../../../global/js/utils/uuidv4.js');
@@ -153,7 +151,7 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
     };
     // If indexOfCurrentArea is -1, it means the active cell is in a cell header position
     if (indexOfCurrentArea === -1) {
-      var tempMatcher = uuidv4["default"]();
+      var tempMatcher = uuidv4.default();
       var newSelectionArea = {
         point1: _selectionPoint,
         point2: _selectionPoint2,
@@ -188,7 +186,7 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
     };
     // If indexOfCurrentArea is -1, it means the active cell is in a cell header position
     if (indexOfCurrentArea === -1) {
-      var _tempMatcher = uuidv4["default"]();
+      var _tempMatcher = uuidv4.default();
       var _newSelectionArea = {
         point1: _selectionPoint3,
         point2: _selectionPoint4,

package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var layout = require('@carbon/layout');
 var settings = require('../../../settings.js');
 

package/lib/components/DataSpreadsheet/utils/removeCellSelections.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var settings = require('../../../settings.js');
 

package/lib/components/DataSpreadsheet/utils/selectAllCells.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var removeCellSelections = require('./removeCellSelections.js');
 var uuidv4 = require('../../../global/js/utils/uuidv4.js');
@@ -32,7 +30,7 @@ var selectAllCells = function selectAllCells(_ref) {
     row: rows.length - 1,
     column: columns.length - 1
   };
-  var tempMatcher = uuidv4["default"]();
+  var tempMatcher = uuidv4.default();
   var newSelectionArea = {
     point1: selectionPoint1,
     point2: selectionPoint2,

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

@@ -16,12 +16,8 @@ export interface DatagridProps {
      * The data grid state, much of it being supplied by the useDatagrid hook
      */
     datagridState: DataGridState;
-    /**
-     * Table title
-     */
-    title?: string;
 }
 /**
- * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
  */
 export declare let Datagrid: React.ForwardRefExoticComponent<DatagridProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../../node_modules/prop-types/index.js');
@@ -20,24 +18,18 @@ var DatagridContent = require('./DatagridContent.js');
 var FilterProvider = require('./addons/Filtering/FilterProvider.js');
 var InlineEditContext = require('./addons/InlineEdit/InlineEditContext/InlineEditContext.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
-var _excluded = ["datagridState", "title", "ariaToolbarLabel"];
+var _excluded = ["datagridState", "ariaToolbarLabel"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
 /**
- * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
  */
-exports.Datagrid = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,
-    title = _ref.title,
     ariaToolbarLabel = _ref.ariaToolbarLabel,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   if (!datagridState) {
-    pconsole["default"].warn('Datagrid was not passed datagridState which is required to render this component.');
+    pconsole.default.warn('Datagrid was not passed datagridState which is required to render this component.');
     return;
   }
   var withVirtualScroll = datagridState.withVirtualScroll,
@@ -49,21 +41,20 @@ exports.Datagrid = /*#__PURE__*/React__default["default"].forwardRef(function (_
     state = datagridState.state;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
   var props = {
-    title: title,
     datagridState: datagridState,
     ariaToolbarLabel: ariaToolbarLabel
   };
-  return /*#__PURE__*/React__default["default"].createElement(FilterProvider.FilterProvider, {
+  return /*#__PURE__*/React.createElement(FilterProvider.FilterProvider, {
     filters: state === null || state === void 0 ? void 0 : state.filters,
     filterProps: filterProps,
     tableId: tableId
-  }, /*#__PURE__*/React__default["default"].createElement(InlineEditContext.InlineEditProvider, null, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  }, /*#__PURE__*/React.createElement(InlineEditContext.InlineEditProvider, null, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     id: tableId,
     ref: ref,
-    className: cx__default["default"](className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
-  }, devtools.getDevtoolsProps(componentName)), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: cx(className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
+  }, devtools.getDevtoolsProps(componentName)), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__datagridWithPanel ").concat(blockClass, "__displayFlex")
-  }, /*#__PURE__*/React__default["default"].createElement(DatagridContent.DatagridContent, props)) : /*#__PURE__*/React__default["default"].createElement(DatagridContent.DatagridContent, props))));
+  }, /*#__PURE__*/React.createElement(DatagridContent.DatagridContent, props)) : /*#__PURE__*/React.createElement(DatagridContent.DatagridContent, props))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -77,14 +68,10 @@ exports.Datagrid.propTypes = {
    * Specify a label to be read by screen readers on the container node
    * 'aria-label' of the TableToolbar component.
    */
-  ariaToolbarLabel: index["default"].string,
+  ariaToolbarLabel: index.default.string,
   /**
    * The data grid state, much of it being supplied by the useDatagrid hook
    */
   /**@ts-ignore */
-  datagridState: index["default"].object.isRequired,
-  /**
-   * Table title
-   */
-  title: index["default"].string
+  datagridState: index.default.object.isRequired
 };

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

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
 import { DataGridState } from '../types';
 declare const DatagridBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
 export default DatagridBody;

package/lib/components/Datagrid/Datagrid/DatagridBody.js

@@ -15,10 +15,6 @@ var DatagridVirtualBody = require('./DatagridVirtualBody.js');
 var DatagridSimpleBody = require('./DatagridSimpleBody.js');
 var DatagridRefBody = require('./DatagridRefBody.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 var DatagridBody = function DatagridBody(datagridState) {
   var isFetching = datagridState.isFetching,
     _datagridState$rows = datagridState.rows,
@@ -26,15 +22,15 @@ var DatagridBody = function DatagridBody(datagridState) {
     withVirtualScroll = datagridState.withVirtualScroll,
     withStickyColumn = datagridState.withStickyColumn;
   if (!isFetching && rows.length === 0) {
-    return /*#__PURE__*/React__default["default"].createElement(DatagridEmptyBody["default"], datagridState);
+    return /*#__PURE__*/React.createElement(DatagridEmptyBody.default, datagridState);
   }
   if (withVirtualScroll) {
-    return /*#__PURE__*/React__default["default"].createElement(DatagridVirtualBody["default"], datagridState);
+    return /*#__PURE__*/React.createElement(DatagridVirtualBody.default, datagridState);
   }
   if (withStickyColumn) {
-    return /*#__PURE__*/React__default["default"].createElement(DatagridRefBody["default"], datagridState);
+    return /*#__PURE__*/React.createElement(DatagridRefBody.default, datagridState);
   }
-  return /*#__PURE__*/React__default["default"].createElement(DatagridSimpleBody["default"], datagridState);
+  return /*#__PURE__*/React.createElement(DatagridSimpleBody.default, datagridState);
 };
 
-exports["default"] = DatagridBody;
+exports.default = DatagridBody;

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

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 require('../../../feature-flags.js');
 var React = require('react');
@@ -18,6 +16,7 @@ var constants = require('./addons/Filtering/constants.js');
 var DatagridBody = require('./DatagridBody.js');
 var DatagridHead = require('./DatagridHead.js');
 var DatagridToolbar = require('./DatagridToolbar.js');
+var FilterSummary = require('../../FilterSummary/FilterSummary.js');
 var index = require('../../../node_modules/prop-types/index.js');
 var cx = require('classnames');
 var handleGridFocus = require('./addons/InlineEdit/handleGridFocus.js');
@@ -30,12 +29,6 @@ var useClickOutside = require('../../../global/js/hooks/useClickOutside.js');
 var useMultipleKeyTracking = require('../../DataSpreadsheet/hooks/useMultipleKeyTracking.js');
 var useSubscribeToEventEmitter = require('./addons/Filtering/hooks/useSubscribeToEventEmitter.js');
 var FilterPanel = require('./addons/Filtering/FilterPanel.js');
-var FilterSummary = require('../../FilterSummary/FilterSummary.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var gcClass = "".concat(blockClass, "__grid-container");
@@ -49,7 +42,8 @@ var DatagridContent = function DatagridContent(_ref) {
   var _useContext2 = React.useContext(FilterProvider.FilterContext),
     filterTags = _useContext2.filterTags,
     EventEmitter = _useContext2.EventEmitter,
-    panelOpen = _useContext2.panelOpen;
+    panelOpen = _useContext2.panelOpen,
+    contextTableId = _useContext2.tableId;
   var activeCellId = inlineEditState.activeCellId,
     gridActive = inlineEditState.gridActive,
     editId = inlineEditState.editId,
@@ -115,8 +109,8 @@ var DatagridContent = function DatagridContent(_ref) {
     });
   });
   var renderTable = function renderTable() {
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.Table, _rollupPluginBabelHelpers["extends"]({}, getTableProps === null || getTableProps === void 0 ? void 0 : getTableProps(), {
-      className: cx__default["default"](withVirtualScroll ? "".concat(blockClass, "__table-virtual-scroll") : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), getTableProps === null || getTableProps === void 0 ? void 0 : getTableProps().className),
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.Table, _rollupPluginBabelHelpers.extends({}, getTableProps === null || getTableProps === void 0 ? void 0 : getTableProps(), {
+      className: cx(withVirtualScroll ? "".concat(blockClass, "__table-virtual-scroll") : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), getTableProps === null || getTableProps === void 0 ? void 0 : getTableProps().className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
       onKeyDown: withInlineEdit && function (event) {
@@ -134,7 +128,7 @@ var DatagridContent = function DatagridContent(_ref) {
         return handleGridFocus.handleGridFocus(inlineEditState, dispatch);
       },
       title: title
-    }), (!withVirtualScroll || withVirtualScroll && !isFetching && !contentRows.length) && /*#__PURE__*/React__default["default"].createElement(DatagridHead["default"], datagridState), /*#__PURE__*/React__default["default"].createElement(DatagridBody["default"], _rollupPluginBabelHelpers["extends"]({}, datagridState, {
+    }), (!withVirtualScroll || withVirtualScroll && !isFetching && !contentRows.length) && /*#__PURE__*/React.createElement(DatagridHead.default, datagridState), /*#__PURE__*/React.createElement(DatagridBody.default, _rollupPluginBabelHelpers.extends({}, datagridState, {
       rows: contentRows
     }))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && renderPagination());
   };
@@ -159,15 +153,18 @@ var DatagridContent = function DatagridContent(_ref) {
       gridElement === null || gridElement === void 0 || gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), layout.px((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
-  useSubscribeToEventEmitter["default"](constants.CLEAR_SINGLE_FILTER, function (id) {
-    return FilterProvider.clearSingleFilter(id, setAllFilters, state);
+  useSubscribeToEventEmitter.default(constants.CLEAR_SINGLE_FILTER, function (id) {
+    return FilterProvider.clearSingleFilter(id, setAllFilters, state, contextTableId);
   });
   var renderFilterSummary = function renderFilterSummary() {
-    return state.filters.length > 0 && /*#__PURE__*/React__default["default"].createElement(FilterSummary["default"], {
+    return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary.default, {
       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"
@@ -175,63 +172,63 @@ var DatagridContent = function DatagridContent(_ref) {
   };
   var renderPagination = function renderPagination() {
     if ((contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination) {
-      return /*#__PURE__*/React__default["default"].createElement(DatagridPagination, datagridState);
+      return /*#__PURE__*/React.createElement(DatagridPagination, datagridState);
     }
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.TableContainer, {
-    className: cx__default["default"]("".concat(gcClass), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(gcClass, "-active"), gridActive), "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), "".concat(gcClass, "-inline-edit"), withInlineEdit), "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), "".concat(blockClass, "__with-pagination"), DatagridPagination), "".concat(blockClass, "__dense-header"), useDenseHeader)),
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.TableContainer, {
+    className: cx("".concat(gcClass), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(gcClass, "-active"), gridActive), "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), "".concat(gcClass, "-inline-edit"), withInlineEdit), "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), "".concat(blockClass, "__with-pagination"), DatagridPagination), "".concat(blockClass, "__dense-header"), useDenseHeader)),
     title: gridTitle,
     description: gridDescription
-  }, /*#__PURE__*/React__default["default"].createElement(DatagridToolbar["default"], _rollupPluginBabelHelpers["extends"]({}, datagridState, {
+  }, /*#__PURE__*/React.createElement(DatagridToolbar.default, _rollupPluginBabelHelpers.extends({}, datagridState, {
     ariaToolbarLabel: ariaToolbarLabel
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"]("".concat(blockClass, "__table-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cx("".concat(blockClass, "__table-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
     ref: gridAreaRef
-  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React__default["default"].createElement(FilterPanel["default"], _rollupPluginBabelHelpers["extends"]({}, getFilterFlyoutProps === null || getFilterFlyoutProps === void 0 ? void 0 : getFilterFlyoutProps(), {
+  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(FilterPanel.default, _rollupPluginBabelHelpers.extends({}, getFilterFlyoutProps === null || getFilterFlyoutProps === void 0 ? void 0 : getFilterFlyoutProps(), {
     title: filterProps.panelTitle,
     filterSections: filterProps.sections,
     autoHideFilters: filterProps.autoHideFilters,
     isFetching: isFetching
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__table-container-inner")
-  }, renderFilterSummary(), withInlineEdit ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, renderFilterSummary(), withInlineEdit ? /*#__PURE__*/React.createElement("div", {
     ref: multiKeyTrackingRef
-  }, renderTable()) : withVirtualScroll ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, renderTable()) : withVirtualScroll ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__virtualScrollContainer"),
     ref: gridRef
-  }, renderTable()) : renderTable()))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) !== 'panel' && renderPagination(), CustomizeColumnsTearsheet && /*#__PURE__*/React__default["default"].createElement(CustomizeColumnsTearsheet, {
+  }, renderTable()) : renderTable()))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) !== 'panel' && renderPagination(), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
     instance: datagridState
   }));
 };
 DatagridContent.propTypes = {
-  ariaToolbarLabel: index["default"].string,
-  datagridState: index["default"].shape({
-    getTableProps: index["default"].func,
-    getFilterFlyoutProps: index["default"].func,
-    withVirtualScroll: index["default"].bool,
-    DatagridActions: index["default"].oneOfType([index["default"].element, index["default"].func]),
-    DatagridPagination: index["default"].oneOfType([index["default"].element, index["default"].func]),
-    CustomizeColumnsTearsheet: index["default"].oneOfType([index["default"].element, index["default"].func]),
-    isFetching: index["default"].bool,
-    skeletonRowCount: index["default"].number,
-    fullHeightDatagrid: index["default"].bool,
-    filterProps: index["default"].object,
-    variableRowHeight: index["default"].bool,
-    useDenseHeader: index["default"].bool,
-    withInlineEdit: index["default"].bool,
-    verticalAlign: index["default"].string,
-    gridTitle: index["default"].node,
-    gridDescription: index["default"].node,
-    page: index["default"].arrayOf(index["default"].object),
-    rows: index["default"].arrayOf(index["default"].object),
-    tableId: index["default"].string,
-    totalColumnsWidth: index["default"].number,
-    gridRef: index["default"].object,
-    setAllFilters: index["default"].func,
-    getFilterProps: index["default"].func,
-    state: index["default"].object
+  ariaToolbarLabel: index.default.string,
+  datagridState: index.default.shape({
+    getTableProps: index.default.func,
+    getFilterFlyoutProps: index.default.func,
+    withVirtualScroll: index.default.bool,
+    DatagridActions: index.default.oneOfType([index.default.element, index.default.func]),
+    DatagridPagination: index.default.oneOfType([index.default.element, index.default.func]),
+    CustomizeColumnsTearsheet: index.default.oneOfType([index.default.element, index.default.func]),
+    isFetching: index.default.bool,
+    skeletonRowCount: index.default.number,
+    fullHeightDatagrid: index.default.bool,
+    filterProps: index.default.object,
+    variableRowHeight: index.default.bool,
+    useDenseHeader: index.default.bool,
+    withInlineEdit: index.default.bool,
+    verticalAlign: index.default.string,
+    gridTitle: index.default.node,
+    gridDescription: index.default.node,
+    page: index.default.arrayOf(index.default.object),
+    rows: index.default.arrayOf(index.default.object),
+    tableId: index.default.string,
+    totalColumnsWidth: index.default.number,
+    gridRef: index.default.object,
+    setAllFilters: index.default.func,
+    getFilterProps: index.default.func,
+    state: index.default.object
   }),
-  title: index["default"].string
+  title: index.default.string
 };
 
 exports.DatagridContent = DatagridContent;