@carbon/ibm-products 2.43.2-canary.22 → 2.43.2-canary.226

package/lib/components/Datagrid/Datagrid/Datagrid.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 = ["datagridState", "title", "ariaToolbarLabel"];
+var _excluded = ["datagridState", "ariaToolbarLabel"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
 /**
@@ -33,7 +33,6 @@ var componentName = 'Datagrid';
  */
 exports.Datagrid = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,
-    title = _ref.title,
     ariaToolbarLabel = _ref.ariaToolbarLabel,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   if (!datagridState) {
@@ -49,7 +48,6 @@ 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
   };
@@ -82,9 +80,5 @@ exports.Datagrid.propTypes = {
    * 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/DatagridContent.js

@@ -18,6 +18,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,7 +31,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 }; }
 
@@ -49,7 +49,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,
@@ -160,14 +161,17 @@ var DatagridContent = function DatagridContent(_ref) {
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
   useSubscribeToEventEmitter["default"](constants.CLEAR_SINGLE_FILTER, function (id) {
-    return FilterProvider.clearSingleFilter(id, setAllFilters, state);
+    return FilterProvider.clearSingleFilter(id, setAllFilters, state, contextTableId);
   });
   var renderFilterSummary = function renderFilterSummary() {
     return state.filters.length > 0 && /*#__PURE__*/React__default["default"].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"

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

@@ -32,10 +32,8 @@ var _excluded = ["className"],
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
-  var title = getNodeTextContent.getNodeTextContent(header.Header);
-  if (title) {
-    props.title = title;
-  } else {
+  var content = getNodeTextContent.getNodeTextContent(header.Header);
+  if (!content) {
     props['aria-hidden'] = true;
   }
   return props;
@@ -91,6 +89,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
     "aria-label": resizerAriaLabel || 'Resize column',
     disabled: isFetching
   })), /*#__PURE__*/React__default["default"].createElement("span", {
+    role: "separator",
     className: "".concat(blockClass, "__col-resize-indicator")
   }));
 };
@@ -99,7 +98,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.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
@@ -144,7 +144,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 = _rollupPluginBabelHelpers.objectWithoutProperties(_headerGroup$getHeade, _excluded);
   var renderSlug = function renderSlug(slug) {
@@ -161,6 +163,9 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   });
   var key = headerGroupProps.key,
     rowProps = _rollupPluginBabelHelpers.objectWithoutProperties(headerGroupProps, _excluded2);
+  var withActionsColumn = headers ? !!headers.filter(function (header) {
+    return header.isAction;
+  }).length : false;
   return /*#__PURE__*/React__default["default"].createElement(react.TableRow, _rollupPluginBabelHelpers["extends"]({
     key: key
   }, rowProps, {
@@ -190,9 +195,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 = _rollupPluginBabelHelpers["extends"]({}, (_rollupPluginBabelHelpers.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["default"].createElement(react.TableHeader, _rollupPluginBabelHelpers["extends"]({}, headerProps, {
       className: cx__default["default"](header === null || header === void 0 ? void 0 : header.className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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["default"].isValidElement(header === null || header === void 0 ? void 0 : header.slug)), headerProps.className),
       key: header.id,

package/lib/components/Datagrid/Datagrid/DatagridRefBody.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 DatagridRefBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
 export default DatagridRefBody;

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

@@ -25,7 +25,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _SkeletonText;
 var _excluded = ["className"],
-  _excluded2 = ["children"];
+  _excluded2 = ["style", "children"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var rowHeights = {
   xs: 24,
@@ -48,7 +48,9 @@ var DatagridRow = function DatagridRow(datagridState) {
     withExpandedRows = datagridState.withExpandedRows,
     withMouseHover = datagridState.withMouseHover,
     setMouseOverRowIndex = datagridState.setMouseOverRowIndex,
-    headers = datagridState.headers;
+    headers = datagridState.headers,
+    visibleColumns = datagridState.visibleColumns,
+    getAsyncSubRows = datagridState.getAsyncSubRows;
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -116,19 +118,25 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
     return {};
   };
-  var _row$getRowProps = row.getRowProps(),
+  var _row$getRowProps = row.getRowProps({
+      role: undefined
+    }),
     className = _row$getRowProps.className,
     rowProps = _rollupPluginBabelHelpers.objectWithoutProperties(_row$getRowProps, _excluded);
   var foundAIRow = rows.some(function (r) {
     var _r$original;
     return /*#__PURE__*/React.isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.slug);
   });
-  var rowClassNames = cx__default["default"]("".concat(blockClass, "__carbon-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(settings.carbon.prefix, "--data-table--selected"), row.isSelected), "".concat(blockClass, "__slug--row"), /*#__PURE__*/React.isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug)));
+  var rowClassNames = cx__default["default"]("".concat(blockClass, "__carbon-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(blockClass, "__carbon-row-expandable--async"), getAsyncSubRows && row.depth > 0), "".concat(settings.carbon.prefix, "--data-table--selected"), row.isSelected), "".concat(blockClass, "__slug--row"), /*#__PURE__*/React.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;
+  var rowKey = !row.isSkeleton ? key : row.skeletonKey;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
-    key: key
+    key: "".concat(rowKey, "__").concat(key, "__row--fragment")
   }, /*#__PURE__*/React__default["default"].createElement(react.TableRow, _rollupPluginBabelHelpers["extends"]({}, rowProps, {
     className: cx__default["default"](rowClassNames, className),
-    key: row.id,
+    key: rowKey,
     onMouseEnter: hoverHandler,
     onMouseLeave: handleMouseLeave,
     onFocus: hoverHandler,
@@ -141,10 +149,13 @@ var DatagridRow = function DatagridRow(datagridState) {
   })) : /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
     var columnClassname = cell === null || cell === void 0 || (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.className;
@@ -155,15 +166,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["default"].createElement(react.TableCell, _rollupPluginBabelHelpers["extends"]({
-      className: cx__default["default"]("".concat(blockClass, "__cell"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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__*/React.isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), columnClassname)
+      className: cx__default["default"]("".concat(blockClass, "__cell"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), (row.canExpand || getAsyncSubRows) && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/React.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/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -25,11 +25,12 @@ var _excluded = ["onChange"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var SelectAll = function SelectAll(datagridState) {
   var _columns$;
-  var _useState = React.useState(typeof window !== 'undefined' ? window.innerWidth : ''),
+  var _useState = React.useState(),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   React.useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     /* istanbul ignore next */
     function updateSize() {
       setWindowSize(window.innerWidth);
@@ -53,11 +54,10 @@ 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) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("th", {
       className: cx__default["default"]("".concat(blockClass, "__head-hidden-select-all"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), /* istanbul ignore next */
       isFirstColumnStickyLeft && Number(windowSize) > 671))
     });
@@ -67,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,
@@ -94,15 +78,14 @@ var SelectAll = function SelectAll(datagridState) {
     onAllRowSelect === null || onAllRowSelect === void 0 || onAllRowSelect(rows, event);
     return onChange === null || onChange === void 0 ? void 0 : onChange(event);
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement(react.TableSelectAll, _rollupPluginBabelHelpers["extends"]({}, selectProps, {
     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))
-  }, /*#__PURE__*/React__default["default"].createElement(react.TableSelectAll, _rollupPluginBabelHelpers["extends"]({}, selectProps, {
+    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")
-  })));
+  }));
 };
 
 exports.SelectAll = SelectAll;

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

@@ -52,11 +52,12 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
       onSelectAllRows(isAllRowsSelected && selectAllMode === SELECT_ALL_ROWS);
     }
   }, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
-  var _useState3 = React.useState(window.innerWidth),
+  var _useState3 = React.useState(),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     windowSize = _useState4[0],
     setWindowSize = _useState4[1];
   React.useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
@@ -77,7 +78,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["default"].createElement("th", {
     scope: "col",
-    className: cx__default["default"]("".concat(blockClass, "__select-all-toggle-on"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+    className: cx__default["default"]("".concat(blockClass, "__select-all-toggle-on"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && (windowSize !== null && windowSize !== void 0 ? windowSize : 0) > 671))
   }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(react.Checkbox, _rollupPluginBabelHelpers["extends"]({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onClick: function onClick(e) {

package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.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 DatagridSimpleBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
 export default DatagridSimpleBody;

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

@@ -42,6 +42,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     selectedRowIds = datagridState.state.selectedRowIds,
     toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
     toolbarBatchActions = datagridState.toolbarBatchActions,
+    toolbarBatchActionsDisplayMin = datagridState.toolbarBatchActionsDisplayMin,
     setGlobalFilter = datagridState.setGlobalFilter,
     rows = datagridState.rows,
     dispatch = datagridState.dispatch,
@@ -89,7 +90,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     var minWidthBeforeOverflowIcon = 380;
     // Do not render ButtonMenu when there are 3 or less items
     // and if there is enough available space to render all the items
-    if (toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 && !displayAllInMenu) {
+    if (toolbarBatchActions && !displayAllInMenu && (!toolbarBatchActionsDisplayMin && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 || toolbarBatchActionsDisplayMin !== undefined && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= toolbarBatchActionsDisplayMin)) {
       return;
     }
     var renderItem = function renderItem(batchAction, index) {
@@ -107,7 +108,10 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       tabIndex: totalSelected > 0 ? 0 : -1,
       menuAlignment: "bottom"
     }, toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
-      var hidden = index < 2 && !displayAllInMenu;
+      var hidden = toolbarBatchActionsDisplayMin === undefined && index < 2 && !displayAllInMenu;
+      if (toolbarBatchActionsDisplayMin !== undefined && index < toolbarBatchActionsDisplayMin && !displayAllInMenu) {
+        hidden = true;
+      }
       if (!hidden) {
         return renderItem(batchAction, index);
       }
@@ -153,13 +157,14 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     totalCount: rows && rows.length,
     translateWithId: translateWithIdBatchActions
   }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
-    if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3) {
+    if (!toolbarBatchActionsDisplayMin && index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3 || toolbarBatchActionsDisplayMin !== undefined && index < toolbarBatchActionsDisplayMin) {
       return /*#__PURE__*/React__default["default"].createElement(react.TableBatchAction, {
         key: "".concat(batchAction.label, "-").concat(index),
         renderIcon: batchAction.renderIcon,
         onClick: function onClick(event) {
           return onClickHandler(event, batchAction);
         },
+        className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty({}, "".concat(settings.carbon.prefix, "--noLabel"), !batchAction.label || batchAction.label === '')),
         iconDescription: batchAction.label,
         tabIndex: totalSelected > 0 ? 0 : -1
       }, batchAction.label);

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

@@ -16,6 +16,7 @@ var react = require('@carbon/react');
 var settings = require('../../../settings.js');
 var DatagridHead = require('./DatagridHead.js');
 var useResizeObserver = require('../../../global/js/hooks/useResizeObserver.js');
+var useIsomorphicEffect = require('../../../global/js/hooks/useIsomorphicEffect.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,7 +32,6 @@ var rowSizeMap = {
 };
 var defaultRowHeight = rowSizeMap.lg;
 var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
-  var _gridRef$current, _gridRef$current2;
   var getTableBodyProps = datagridState.getTableBodyProps,
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow,
@@ -48,11 +48,15 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     gridRef = datagridState.gridRef,
     tableId = datagridState.tableId,
     onVirtualScroll = datagridState.onVirtualScroll;
+  var headWrapRef = React.useRef(null);
+  var innerRef = React.useRef(null);
 
   /* istanbul ignore next */
   var handleVirtualGridResize = function handleVirtualGridResize() {
     var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
-    if (gridRefElement) {
+    // isHidden checks for an edge case where if the table is hidden by something like a Tab that the width can't be calculated to 0
+    var isHidden = (gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.offsetParent) === null;
+    if (gridRefElement && !isHidden) {
       var _gridRefElement$clien;
       gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 || (_gridRefElement$clien = gridRefElement.clientWidth) === null || _gridRefElement$clien === void 0 ? void 0 : _gridRefElement$clien.toString();
     }
@@ -66,16 +70,21 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     if (listRef && listRef.current) {
       listRef.current.resetAfterIndex(0);
     }
-  }, [listRef]);
+  }, [listRef, rowHeight]);
   var visibleRows = DatagridPagination && page || rows;
   var testRef = React.useRef(null);
 
   // 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;
       }
@@ -86,12 +95,21 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
       testRefValue === null || testRefValue === void 0 || testRefValue.removeEventListener('scroll', handleScroll);
     };
   });
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    if (headWrapRef.current && headWrapRef.current.style) {
+      var _gridRef$current;
+      headWrapRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth, "px");
+    }
+  }, [headWrapRef, gridRef]);
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    if (testRef !== null && testRef !== void 0 && testRef.current && testRef.current.style) {
+      var _gridRef$current2;
+      testRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth, "px");
+    }
+  }, [testRef, gridRef]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__head-wrap"),
-    style: {
-      width: gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
-      overflow: 'hidden'
-    }
+    ref: headWrapRef
   }, /*#__PURE__*/React__default["default"].createElement(DatagridHead["default"], datagridState)), /*#__PURE__*/React__default["default"].createElement(react.TableBody, _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps({
     role: undefined
   }), {
@@ -111,10 +129,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     innerRef: innerListRef,
     outerRef: testRef,
     ref: listRef,
-    className: "".concat(blockClass, "__virtual-scrollbar"),
-    style: {
-      width: gridRef === null || gridRef === void 0 || (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth
-    }
+    className: "".concat(blockClass, "__virtual-scrollbar")
   }, function (_ref) {
     var _row$RowRenderer;
     var index = _ref.index,
@@ -124,6 +139,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     var _row$getRowProps = row.getRowProps(),
       key = _row$getRowProps.key;
     return /*#__PURE__*/React__default["default"].createElement("div", {
+      ref: innerRef,
       style: _rollupPluginBabelHelpers.objectSpread2({}, style)
     }, row === null || row === void 0 || (_row$RowRenderer = row.RowRenderer) === null || _row$RowRenderer === void 0 ? void 0 : _row$RowRenderer.call(row, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, datagridState), {}, {
       row: row,

package/lib/components/Datagrid/Datagrid/DraggableElement.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 { PropsWithChildren, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 interface DraggableElementProps extends PropsWithChildren {

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

@@ -12,10 +12,11 @@ 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');
+require('../../../../Tearsheet/Tearsheet.js');
+var TearsheetNarrow = require('../../../../Tearsheet/TearsheetNarrow.js');
 var Columns = require('./Columns.js');
 var Actions = require('./Actions.js');
 var settings = require('../../../../../settings.js');
-var TearsheetNarrow = require('../../../../Tearsheet/TearsheetNarrow.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -66,6 +67,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
     isDirty = _useState10[0],
     setIsDirty = _useState10[1];
+  var prevColumnDefinitions = React.useRef();
   var onRequestClose = function onRequestClose() {
     setColumnObjects(columnDefinitions);
     setIsTearsheetOpen(false);
@@ -81,15 +83,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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
+      // If select all is clicked
+      if (Array.isArray(col)) {
+        return col.includes(definition) && definition.canFilter && !definition.disabled ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
           isVisible: value
-        });
+        }) : definition;
+      }
+      // If a single checkbox is clicked which is written below as a default return
+      return col.id === definition.id ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
+        isVisible: value
+      }) : definition;
+    });
+
+    // 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) ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
+          isVisible: true
+        }) : definition;
       }
-      return definition;
+      // Else we remove selection column and actions column
+      return ['datagridSelection', 'actions'].includes(definition.id) ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, definition), {}, {
+        isVisible: false
+      }) : definition;
     });
-    setColumnObjects(changedDefinitions);
+    setColumnObjects(finalDefinitions);
     setDirty();
   };
   var setDirty = function setDirty() {
@@ -104,15 +130,19 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
   }, [columnObjects]);
   var string = searchText.trim().toLowerCase();
   React.useEffect(function () {
-    var notFilterableCount = columnObjects.filter(function (col) {
-      return !col.canFilter;
-    }).length;
+    if (prevColumnDefinitions.current !== columnDefinitions) {
+      setColumnObjects(columnDefinitions);
+    }
     var actionCount = columnObjects.filter(function (col) {
       return col.id === 'actions';
     }).length;
-    setVisibleColumnsCount(getVisibleColumnsCount() - notFilterableCount - actionCount);
-    setTotalColumns(columnObjects.length - notFilterableCount - actionCount);
-  }, [getVisibleColumnsCount, columnObjects]);
+    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);
+    prevColumnDefinitions.current = columnDefinitions;
+  }, [getVisibleColumnsCount, columnObjects, columnDefinitions]);
   return /*#__PURE__*/React__default["default"].createElement(TearsheetNarrow.TearsheetNarrow, {
     className: "".concat(blockClass, "__customize-columns-tearsheet"),
     open: isOpen,