@carbon/ibm-products 2.43.2-canary.9 → 2.43.2-canary.92

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -33,8 +33,12 @@ 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,
+    renderRowHeaderDirection = _ref.renderRowHeaderDirection,
+    hasCustomRowHeader = _ref.hasCustomRowHeader,
     prepareRow = _ref.prepareRow,
     rows = _ref.rows,
     selectionAreaData = _ref.selectionAreaData,
@@ -138,7 +142,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         return;
       });
     }
-  }, [selectionAreas, setSelectionAreas, defaultColumn, onSelectionAreaChange, setSelectionAreaData, ref, activeCellCoordinates, setActiveCellInsideSelectionArea, visibleColumns]);
+  }, [selectionAreas, setSelectionAreas, defaultColumn, onSelectionAreaChange, setSelectionAreaData, ref, activeCellCoordinates, setActiveCellInsideSelectionArea, visibleColumns, hasCustomRowHeader]);
   var populateSelectionAreaCellData = function populateSelectionAreaCellData(_ref2) {
     var rowStart = _ref2.rowStart,
       rowEnd = _ref2.rowEnd,
@@ -212,7 +216,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         });
       }
     }
-  }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns]);
+  }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns, hasCustomRowHeader]);
 
   //this method will check for any duplicate selection area and remove.
   //same selections are those have the same height, width, top, left styles. These inline styles are being set in createCellSelection util.
@@ -306,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));
   };
@@ -338,11 +346,12 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         "data-column-index": "header",
         type: "button",
         onClick: handleRowHeaderClickEvent(index),
-        className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row')), "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
+        className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__td_custom"), hasCustomRowHeader ? true : false), "".concat(blockClass, "__td-th--active-header"), !hasCustomRowHeader && ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row'))), "".concat(blockClass, "__td-th--selected-header"), !hasCustomRowHeader && checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
         style: {
-          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
+          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
+          flexDirection: hasCustomRowHeader ? renderRowHeaderDirection === 'Left' ? 'row-reverse' : row : undefined
         }
-      }, index + 1)), row.cells.map(function (cell, index) {
+      }, index + 1, hasCustomRowHeader && typeof renderRowHeader === 'function' && renderRowHeader(index))), row.cells.map(function (cell, index) {
         var _cell$column;
         var cellProps = prepareProps(cell.getCellProps(), 'key');
         return /*#__PURE__*/React__default.createElement("div", _extends({
@@ -367,7 +376,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }, cell.render('Cell')));
       }));
     }
-  }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
+  }, [prepareRow, renderRowHeader, renderRowHeaderDirection, rows, hasCustomRowHeader, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
   var spreadsheetBodyRef = useRef();
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: spreadsheetBodyRef,
@@ -433,6 +442,10 @@ DataSpreadsheetBody.propTypes = {
    */
   /**@ts-ignore */
   getTableBodyProps: PropTypes.func,
+  /**
+   * Check if spreadsheet is using custom row header component attached
+   */
+  hasCustomRowHeader: PropTypes.bool,
   /**
    * Headers provided from useTable hook
    */
@@ -457,6 +470,14 @@ DataSpreadsheetBody.propTypes = {
    * Prepare row function from react-table
    */
   prepareRow: PropTypes.func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeader: PropTypes.func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeaderDirection: PropTypes.string,
   /**
    * All of the spreadsheet row data
    */
@@ -497,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/DataSpreadsheetHeader.d.ts

@@ -16,6 +16,10 @@ interface DataSpreadsheetHeaderProps {
      * Specifies the cell height
      */
     cellSize?: Size;
+    /**
+     * Disable column swapping, default false
+     */
+    disableColumnSwapping?: boolean;
     /**
      * All of the spreadsheet columns
      */
@@ -36,6 +40,10 @@ interface DataSpreadsheetHeaderProps {
      * Headers provided from useTable hook
      */
     headerGroups?: any[];
+    /**
+     * Read-only table
+     */
+    readOnlyTable?: boolean;
     /**
      * All of the spreadsheet row data
      */

package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -36,6 +36,8 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setActiveCellCoordinates = _ref.setActiveCellCoordinates,
     setCurrentMatcher = _ref.setCurrentMatcher,
     setSelectionAreas = _ref.setSelectionAreas,
+    readOnlyTable = _ref.readOnlyTable,
+    disableColumnSwapping = _ref.disableColumnSwapping,
     setSelectionAreaData = _ref.setSelectionAreaData,
     rows = _ref.rows,
     totalVisibleColumns = _ref.totalVisibleColumns,
@@ -175,6 +177,9 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
       "data-row-index": "header",
       "data-column-index": "header",
       type: "button",
+      style: {
+        width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
+      },
       tabIndex: -1,
       "aria-label": selectAllAriaLabel,
       onClick: handleSelectAllClick,
@@ -191,8 +196,8 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
         "data-row-index": "header",
         "data-column-index": index,
         tabIndex: -1,
-        onMouseDown: selectedHeader ? handleHeaderMouseDown(index) : undefined,
-        onMouseUp: selectedHeader && typeof setSelectedHeaderReorderActive === 'function' ? function () {
+        onMouseDown: selectedHeader && !readOnlyTable && !disableColumnSwapping ? handleHeaderMouseDown(index) : undefined,
+        onMouseUp: selectedHeader && !readOnlyTable && !disableColumnSwapping && typeof setSelectedHeaderReorderActive === 'function' ? function () {
           return setSelectedHeaderReorderActive(false);
         } : undefined,
         onClick: !selectedHeader ? handleColumnHeaderClick(index) : undefined,
@@ -200,7 +205,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
           height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
           width: (column === null || column === void 0 ? void 0 : column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
         },
-        className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell(index, selectionAreas, 'column')), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
+        className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell(index, selectionAreas, 'column')), "".concat(blockClass, "__th--active-header-disabledSwapping"), disableColumnSwapping || readOnlyTable), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
         type: "button"
       }, column.render('Header')));
     }));
@@ -236,6 +241,10 @@ DataSpreadsheetHeader.propTypes = {
     rowHeaderWidth: PropTypes.number,
     width: PropTypes.number
   }),
+  /**
+   * Disable column swapping, default false
+   */
+  disableColumnSwapping: PropTypes.bool,
   /**
    * Whether or not a click/hold is active on a header cell
    */
@@ -244,6 +253,10 @@ DataSpreadsheetHeader.propTypes = {
    * Headers provided from useTable hook
    */
   headerGroups: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * Read-only table
+   */
+  readOnlyTable: PropTypes.bool,
   /**
    * All of the spreadsheet row data
    */

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/Datagrid.d.ts

@@ -16,10 +16,6 @@ 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.

package/es/components/Datagrid/Datagrid/Datagrid.js

@@ -16,7 +16,7 @@ import { DatagridContent } from './DatagridContent.js';
 import { FilterProvider } from './addons/Filtering/FilterProvider.js';
 import { InlineEditProvider } from './addons/InlineEdit/InlineEditContext/InlineEditContext.js';
 
-var _excluded = ["datagridState", "title", "ariaToolbarLabel"];
+var _excluded = ["datagridState", "ariaToolbarLabel"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
 /**
@@ -24,7 +24,6 @@ var componentName = 'Datagrid';
  */
 var Datagrid = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,
-    title = _ref.title,
     ariaToolbarLabel = _ref.ariaToolbarLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
   if (!datagridState) {
@@ -40,13 +39,13 @@ var Datagrid = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     state = datagridState.state;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
   var props = {
-    title: title,
     datagridState: datagridState,
     ariaToolbarLabel: ariaToolbarLabel
   };
   return /*#__PURE__*/React__default.createElement(FilterProvider, {
     filters: state === null || state === void 0 ? void 0 : state.filters,
-    filterProps: filterProps
+    filterProps: filterProps,
+    tableId: tableId
   }, /*#__PURE__*/React__default.createElement(InlineEditProvider, null, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     id: tableId,
     ref: ref,
@@ -72,11 +71,7 @@ Datagrid.propTypes = {
    * The data grid state, much of it being supplied by the useDatagrid hook
    */
   /**@ts-ignore */
-  datagridState: PropTypes.object.isRequired,
-  /**
-   * Table title
-   */
-  title: PropTypes.string
+  datagridState: PropTypes.object.isRequired
 };
 
 export { Datagrid };

package/es/components/Datagrid/Datagrid/DatagridContent.js

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

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -23,10 +23,8 @@ var _excluded = ["className"],
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
-  var title = getNodeTextContent(header.Header);
-  if (title) {
-    props.title = title;
-  } else {
+  var content = getNodeTextContent(header.Header);
+  if (!content) {
     props['aria-hidden'] = true;
   }
   return props;
@@ -82,6 +80,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
     "aria-label": resizerAriaLabel || 'Resize column',
     disabled: isFetching
   })), /*#__PURE__*/React__default.createElement("span", {
+    role: "separator",
     className: "".concat(blockClass, "__col-resize-indicator")
   }));
 };
@@ -90,7 +89,8 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   var resizerAriaLabel = datagridState.resizerAriaLabel,
     isTableSortable = datagridState.isTableSortable,
     rows = datagridState.rows,
-    isFetching = datagridState.isFetching;
+    isFetching = datagridState.isFetching,
+    headers = datagridState.headers;
   useInitialColumnSort(datagridState);
   // Used to measure the height of the table and uses that value
   // to display a vertical line to indicate the column you are resizing
@@ -135,7 +135,9 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     }
     onMouseDown === null || onMouseDown === void 0 || onMouseDown(event);
   };
-  var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),
+  var _headerGroup$getHeade = headerGroup.getHeaderGroupProps({
+      role: undefined
+    }),
     headerGroupClassName = _headerGroup$getHeade.className,
     headerGroupProps = _objectWithoutProperties(_headerGroup$getHeade, _excluded);
   var renderSlug = function renderSlug(slug) {
@@ -152,6 +154,9 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   });
   var key = headerGroupProps.key,
     rowProps = _objectWithoutProperties(headerGroupProps, _excluded2);
+  var withActionsColumn = headers ? !!headers.filter(function (header) {
+    return header.isAction;
+  }).length : false;
   return /*#__PURE__*/React__default.createElement(TableRow, _extends({
     key: key
   }, rowProps, {
@@ -181,9 +186,19 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     var _ref5 = columnResizing || {},
       columnWidths = _ref5.columnWidths;
     var originalCol = visibleColumns[index];
-    var _header$getHeaderProp = header.getHeaderProps(),
+    var _header$getHeaderProp = header.getHeaderProps({
+        role: undefined
+      }),
       headerProps = _extends({}, (_objectDestructuringEmpty(_header$getHeaderProp), _header$getHeaderProp));
-    var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
+    var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header, {
+      role: undefined
+    });
+    var headerStyle = headerProps === null || headerProps === void 0 ? void 0 : headerProps.style;
+    var lastVisibleIndex = withActionsColumn ? 2 : 1;
+    var lastVisibleFlexStyle = index === visibleColumns.length - lastVisibleIndex ? '1 1 0' : '0 0 auto';
+    if (headerStyle) {
+      headerStyle.flex = lastVisibleFlexStyle;
+    }
     return /*#__PURE__*/React__default.createElement(TableHeader, _extends({}, headerProps, {
       className: cx(header === null || header === void 0 ? void 0 : header.className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header === null || header === void 0 ? void 0 : header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header === null || header === void 0 ? void 0 : header.isSorted), "".concat(blockClass, "__header-actions-column"), header === null || header === void 0 ? void 0 : header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default.isValidElement(header === null || header === void 0 ? void 0 : header.slug)), headerProps.className),
       key: header.id,

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -16,7 +16,7 @@ import { DatagridSlug } from './addons/Slug/DatagridSlug.js';
 
 var _SkeletonText;
 var _excluded = ["className"],
-  _excluded2 = ["children"];
+  _excluded2 = ["style", "children"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var rowHeights = {
   xs: 24,
@@ -39,7 +39,8 @@ var DatagridRow = function DatagridRow(datagridState) {
     withExpandedRows = datagridState.withExpandedRows,
     withMouseHover = datagridState.withMouseHover,
     setMouseOverRowIndex = datagridState.setMouseOverRowIndex,
-    headers = datagridState.headers;
+    headers = datagridState.headers,
+    visibleColumns = datagridState.visibleColumns;
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -107,7 +108,9 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
     return {};
   };
-  var _row$getRowProps = row.getRowProps(),
+  var _row$getRowProps = row.getRowProps({
+      role: undefined
+    }),
     className = _row$getRowProps.className,
     rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
   var foundAIRow = rows.some(function (r) {
@@ -115,6 +118,9 @@ var DatagridRow = function DatagridRow(datagridState) {
     return /*#__PURE__*/isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.slug);
   });
   var rowClassNames = cx("".concat(blockClass, "__carbon-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), "".concat(blockClass, "__slug--row"), /*#__PURE__*/isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug)));
+  var withActionsColumn = headers ? !!headers.filter(function (header) {
+    return header.isAction;
+  }).length : false;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
     key: key
   }, /*#__PURE__*/React__default.createElement(TableRow, _extends({}, rowProps, {
@@ -132,10 +138,13 @@ var DatagridRow = function DatagridRow(datagridState) {
   })) : /*#__PURE__*/React__default.createElement("td", {
     className: "".concat(blockClass, "__table-row-ai-spacer")
   }) : null, row.cells.map(function (cell, index) {
-    var _cell$column, _cell$column2, _content$props, _associatedHeader$;
-    var cellProps = cell.getCellProps();
+    var _cell$column, _cell$column2, _associatedHeader$;
+    var cellProps = cell.getCellProps({
+      role: undefined
+    });
     // eslint-disable-next-line no-unused-vars
     var _ref2 = cellProps,
+      style = _ref2.style,
       children = _ref2.children,
       restProps = _objectWithoutProperties(_ref2, _excluded2);
     var columnClassname = cell === null || cell === void 0 || (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.className;
@@ -146,15 +155,19 @@ var DatagridRow = function DatagridRow(datagridState) {
         key: cell.column.id
       });
     }
-    var title = content === null || content === void 0 || (_content$props = content.props) === null || _content$props === void 0 || (_content$props = _content$props.children[0]) === null || _content$props === void 0 || (_content$props = _content$props.props) === null || _content$props === void 0 ? void 0 : _content$props.value;
     var associatedHeader = headers === null || headers === void 0 ? void 0 : headers.filter(function (h) {
       return h.id === cell.column.id;
     });
+    var lastVisibleIndex = withActionsColumn ? 2 : 1;
+    var lastVisibleFlexStyle = index === visibleColumns.length - lastVisibleIndex ? '1 1 0' : '0 0 auto';
+    if (style) {
+      style.flex = lastVisibleFlexStyle;
+    }
     return /*#__PURE__*/React__default.createElement(TableCell, _extends({
       className: cx("".concat(blockClass, "__cell"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), columnClassname)
     }, restProps, {
-      key: cell.column.id,
-      title: title
+      style: style,
+      key: cell.column.id
     }), content);
   })), (renderExpandedRow === null || renderExpandedRow === void 0 ? void 0 : renderExpandedRow()) || undefined);
 };

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -16,11 +16,12 @@ var _excluded = ["onChange"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var SelectAll = function SelectAll(datagridState) {
   var _columns$;
-  var _useState = useState(typeof window !== 'undefined' ? window.innerWidth : ''),
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     /* istanbul ignore next */
     function updateSize() {
       setWindowSize(window.innerWidth);

package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -43,11 +43,12 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
       onSelectAllRows(isAllRowsSelected && selectAllMode === SELECT_ALL_ROWS);
     }
   }, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
-  var _useState3 = useState(window.innerWidth),
+  var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
     windowSize = _useState4[0],
     setWindowSize = _useState4[1];
   useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
@@ -68,7 +69,7 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
   var isFirstColumnStickyLeft = (columns === null || columns === void 0 || (_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   return /*#__PURE__*/React__default.createElement("th", {
     scope: "col",
-    className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+    className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && (windowSize !== null && windowSize !== void 0 ? windowSize : 0) > 671))
   }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onClick: function onClick(e) {

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/FilterFlyout.js

@@ -209,7 +209,12 @@ var FilterFlyout = function FilterFlyout(_ref) {
     closeFlyout();
     cancel();
   });
-  useSubscribeToEventEmitter(CLEAR_FILTERS, reset);
+
+  // tableId is passed in from the event emitter from the FilterSummary component
+  // in  DatagridContent
+  useSubscribeToEventEmitter(CLEAR_FILTERS, function (tableId) {
+    reset(tableId);
+  });
   useEffect(function reflectLastAppliedFiltersWhenReactTableUpdates() {
     lastAppliedFilters.current = JSON.stringify(reactTableFiltersState);
   }, [reactTableFiltersState, lastAppliedFilters]);

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

@@ -183,7 +183,12 @@ var FilterPanel = function FilterPanel(_ref) {
     var _filterPanelRef$curre;
     (_filterPanelRef$curre = filterPanelRef.current) === null || _filterPanelRef$curre === void 0 || _filterPanelRef$curre.style.setProperty('--filter-panel-min-height', rem(filterPanelMinHeight));
   }, [filterPanelMinHeight]);
-  useSubscribeToEventEmitter(CLEAR_FILTERS, reset);
+
+  // tableId is passed in from the event emitter from the FilterSummary component
+  // in  DatagridContent
+  useSubscribeToEventEmitter(CLEAR_FILTERS, function (tableId) {
+    reset(tableId);
+  });
   var getScrollableContainerHeight = function getScrollableContainerHeight() {
     var _filterHeadingRef$cur, _filterSearchRef$curr, _actionSetRef$current;
     var filterHeadingHeight = (_filterHeadingRef$cur = filterHeadingRef.current) === null || _filterHeadingRef$cur === void 0 ? void 0 : _filterHeadingRef$cur.getBoundingClientRect().height;

package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.d.ts

@@ -3,16 +3,18 @@ export function clearSingleFilter({ key, value }: {
     key: any;
     value: any;
 }, setAllFilters: any, state: any): void;
-export function FilterProvider({ children, filters, filterProps }: {
+export function FilterProvider({ children, filters, filterProps, tableId }: {
     children: any;
     filters: any;
     filterProps: any;
+    tableId: any;
 }): import("react/jsx-runtime").JSX.Element;
 export namespace FilterProvider {
     namespace propTypes {
         let children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
         let filterProps: PropTypes.Requireable<object>;
         let filters: PropTypes.Validator<(object | null | undefined)[]>;
+        let tableId: PropTypes.Requireable<string>;
     }
 }
 import React from 'react';

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

@@ -62,7 +62,7 @@ var clearSingleFilter = function clearSingleFilter(_ref, setAllFilters, state) {
           This checks if all the checkboxes are selected = false and removes it from the array
         */
         var valueIndex = filterValues.findIndex(function (val) {
-          return val.id === value;
+          return val.value === value;
         });
         filterValues[valueIndex].selected = false;
         var updatedFilterObject = _objectSpread2(_objectSpread2({}, f), {}, {
@@ -156,7 +156,8 @@ var filteringReducer = function filteringReducer(state, action) {
 var FilterProvider = function FilterProvider(_ref4) {
   var children = _ref4.children,
     filters = _ref4.filters,
-    filterProps = _ref4.filterProps;
+    filterProps = _ref4.filterProps,
+    tableId = _ref4.tableId;
   var _ref5 = filterProps || {},
     renderDateLabel = _ref5.renderDateLabel;
   var filterTags = prepareFiltersForTags(filters, renderDateLabel);
@@ -177,7 +178,8 @@ var FilterProvider = function FilterProvider(_ref4) {
     panelOpen: panelOpen,
     setPanelOpen: setPanelOpen,
     state: state,
-    dispatch: dispatch
+    dispatch: dispatch,
+    tableId: tableId
   };
   return /*#__PURE__*/React__default.createElement(FilterContext.Provider, {
     value: value
@@ -186,7 +188,8 @@ var FilterProvider = function FilterProvider(_ref4) {
 FilterProvider.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   filterProps: PropTypes.object,
-  filters: PropTypes.arrayOf(PropTypes.object).isRequired
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tableId: PropTypes.string
 };
 
 export { FilterContext, FilterProvider, clearSingleFilter };

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.d.ts

@@ -15,7 +15,7 @@ declare function useFilters({ updateMethod, filters, setAllFilters, variation, r
     prevFiltersObjectArrayRef: React.MutableRefObject<string>;
     prevFiltersRef: React.MutableRefObject<string>;
     revertToPreviousFilters: () => void;
-    reset: () => void;
+    reset: (tableId: any) => void;
     renderFilter: ({ type, column, props: components }: {
         type: any;
         column: any;