@carbon/ibm-products 2.65.0 → 2.66.0

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

@@ -5,92 +5,92 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { isValidElement } from 'react';
 import { TableRow, SkeletonText, TableCell } from '@carbon/react';
 import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids.js';
 import cx from 'classnames';
-import { carbon, pkg } from '../../../settings.js';
+import { pkg, carbon } from '../../../settings.js';
 import { DatagridAILabel } from './addons/AiLabel/DatagridAiLabel.js';
 
 var _SkeletonText;
-var _excluded = ["className"],
-  _excluded2 = ["style", "children"];
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var rowHeights = {
+const blockClass = `${pkg.prefix}--datagrid`;
+const rowHeights = {
   xs: 24,
   sm: 32,
   md: 40,
   lg: 48,
   xl: 64
 };
-var DatagridRow = function DatagridRow(datagridState) {
-  var _row$original, _row$original2, _row$original3, _row$original4, _row$original5, _row$original6;
-  var row = datagridState.row,
-    rows = datagridState.rows,
-    rowSize = datagridState.rowSize,
-    withNestedRows = datagridState.withNestedRows,
-    prepareRow = datagridState.prepareRow,
-    key = datagridState.key,
-    tableId = datagridState.tableId,
-    withExpandedRows = datagridState.withExpandedRows,
-    withMouseHover = datagridState.withMouseHover,
-    setMouseOverRowIndex = datagridState.setMouseOverRowIndex,
-    headers = datagridState.headers,
-    visibleColumns = datagridState.visibleColumns,
-    getAsyncSubRows = datagridState.getAsyncSubRows;
-  var _getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
-    var isExpanded = _ref.isExpanded,
-      subRows = _ref.subRows;
-    var size = 0;
+const DatagridRow = datagridState => {
+  const {
+    row,
+    rows,
+    rowSize,
+    withNestedRows,
+    prepareRow,
+    key,
+    tableId,
+    withExpandedRows,
+    withMouseHover,
+    setMouseOverRowIndex,
+    headers,
+    visibleColumns,
+    getAsyncSubRows
+  } = datagridState;
+  const getVisibleNestedRowCount = _ref => {
+    let {
+      isExpanded,
+      subRows
+    } = _ref;
+    let size = 0;
     if (isExpanded && subRows) {
       size += subRows.length;
-      subRows.forEach(function (child) {
-        size += _getVisibleNestedRowCount(child);
+      subRows.forEach(child => {
+        size += getVisibleNestedRowCount(child);
       });
     }
     return size;
   };
-  var hoverHandler = function hoverHandler(event) {
-    var _hoverRow$style, _hoverRow$style2, _hoverRow$style3;
+  const hoverHandler = event => {
     if (!withNestedRows) {
       return;
     }
-    var subRowCount = _getVisibleNestedRowCount(row);
-    var totalNestedRowIndicatorHeight = px(subRowCount * rowHeights[Number(rowSize)]);
-    var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
-    hoverRow === null || hoverRow === void 0 || hoverRow.classList.add("".concat(blockClass, "__carbon-row-expanded-hover-active"));
-    var rowExpanderButton = hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.querySelector(".".concat(blockClass, "__row-expander"));
-    var rowSizeValue = rowSize || 'lg';
-    hoverRow === null || hoverRow === void 0 || (_hoverRow$style = hoverRow.style) === null || _hoverRow$style === void 0 || _hoverRow$style.setProperty("--".concat(blockClass, "--indicator-height"), totalNestedRowIndicatorHeight);
-    hoverRow === null || hoverRow === void 0 || (_hoverRow$style2 = hoverRow.style) === null || _hoverRow$style2 === void 0 || _hoverRow$style2.setProperty("--".concat(blockClass, "--row-height"), px(rowHeights[rowSizeValue]));
-    hoverRow === null || hoverRow === void 0 || (_hoverRow$style3 = hoverRow.style) === null || _hoverRow$style3 === void 0 || _hoverRow$style3.setProperty("--".concat(blockClass, "--indicator-offset-amount"), px((rowExpanderButton === null || rowExpanderButton === void 0 ? void 0 : rowExpanderButton.offsetLeft) || 0));
+    const subRowCount = getVisibleNestedRowCount(row);
+    const totalNestedRowIndicatorHeight = px(subRowCount * rowHeights[Number(rowSize)]);
+    const hoverRow = event.target.closest(`.${blockClass}__carbon-row-expanded`);
+    hoverRow?.classList.add(`${blockClass}__carbon-row-expanded-hover-active`);
+    const rowExpanderButton = hoverRow?.querySelector(`.${blockClass}__row-expander`);
+    const rowSizeValue = rowSize || 'lg';
+    hoverRow?.style?.setProperty(`--${blockClass}--indicator-height`, totalNestedRowIndicatorHeight);
+    hoverRow?.style?.setProperty(`--${blockClass}--row-height`, px(rowHeights[rowSizeValue]));
+    hoverRow?.style?.setProperty(`--${blockClass}--indicator-offset-amount`, px(rowExpanderButton?.offsetLeft || 0));
   };
-  var focusRemover = function focusRemover() {
-    var elements = document.querySelectorAll("#".concat(tableId, " .").concat(blockClass, "__carbon-row-expanded"));
-    elements.forEach(function (el) {
-      el.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+  const focusRemover = () => {
+    const elements = document.querySelectorAll(`#${tableId} .${blockClass}__carbon-row-expanded`);
+    elements.forEach(el => {
+      el.classList.remove(`${blockClass}__carbon-row-expanded-hover-active`);
     });
   };
-  var renderExpandedRow = function renderExpandedRow() {
+  const renderExpandedRow = () => {
     if (row.isExpanded) {
-      var _row$RowExpansionRend;
       prepareRow(row);
-      return row === null || row === void 0 || (_row$RowExpansionRend = row.RowExpansionRenderer) === null || _row$RowExpansionRend === void 0 ? void 0 : _row$RowExpansionRend.call(row, _objectSpread2(_objectSpread2({}, datagridState), {}, {
-        row: row
-      }));
+      return row?.RowExpansionRenderer?.({
+        ...datagridState,
+        row
+      });
     }
     return null;
   };
-  var handleMouseLeave = function handleMouseLeave(event) {
+  const handleMouseLeave = event => {
     if (withMouseHover) {
-      setMouseOverRowIndex === null || setMouseOverRowIndex === void 0 || setMouseOverRowIndex(null);
+      setMouseOverRowIndex?.(null);
     }
-    var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
-    hoverRow === null || hoverRow === void 0 || hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+    const hoverRow = event.target.closest(`.${blockClass}__carbon-row-expanded`);
+    hoverRow?.classList.remove(`${blockClass}__carbon-row-expanded-hover-active`);
   };
-  var handleOnKeyUp = function handleOnKeyUp(event) {
+  const handleOnKeyUp = event => {
     if (!withNestedRows) {
       return;
     }
@@ -99,7 +99,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       hoverHandler(event);
     }
   };
-  var setAdditionalRowProps = function setAdditionalRowProps() {
+  const setAdditionalRowProps = () => {
     if (withNestedRows || withExpandedRows) {
       return {
         'data-nested-row-id': row.id
@@ -107,22 +107,25 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
     return {};
   };
-  var _row$getRowProps = row.getRowProps({
-      role: undefined
-    }),
-    className = _row$getRowProps.className,
-    rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
-  var foundAIRow = rows.some(function (r) {
-    var _r$original, _r$original2;
-    return /*#__PURE__*/isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.aiLabel) || /*#__PURE__*/isValidElement(r === null || r === void 0 || (_r$original2 = r.original) === null || _r$original2 === void 0 ? void 0 : _r$original2.slug);
+  const {
+    className,
+    ...rowProps
+  } = row.getRowProps({
+    role: undefined
   });
-  var rowClassNames = cx("".concat(blockClass, "__carbon-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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(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)), "".concat(blockClass, "__ai-label--row"), /*#__PURE__*/isValidElement(row === null || row === void 0 || (_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.aiLabel)));
-  var withActionsColumn = headers ? !!headers.filter(function (header) {
-    return header.isAction;
-  }).length : false;
-  var rowKey = !row.isSkeleton ? key : row.skeletonKey;
+  const foundAIRow = rows.some(r => /*#__PURE__*/isValidElement(r?.original?.aiLabel) || /*#__PURE__*/isValidElement(r?.original?.slug));
+  const rowClassNames = cx(`${blockClass}__carbon-row`, {
+    [`${blockClass}__carbon-row-expanded`]: row.isExpanded,
+    [`${blockClass}__carbon-row-expandable`]: row.canExpand,
+    [`${blockClass}__carbon-row-expandable--async`]: getAsyncSubRows && row.depth > 0,
+    [`${carbon.prefix}--data-table--selected`]: row.isSelected,
+    [`${blockClass}__slug--row`]: /*#__PURE__*/isValidElement(row?.original?.slug),
+    [`${blockClass}__ai-label--row`]: /*#__PURE__*/isValidElement(row?.original?.aiLabel)
+  });
+  const withActionsColumn = headers ? !!headers.filter(header => header.isAction).length : false;
+  const rowKey = !row.isSkeleton ? key : row.skeletonKey;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-    key: "".concat(rowKey, "__").concat(key, "__row--fragment")
+    key: `${rowKey}__${key}__row--fragment`
   }, /*#__PURE__*/React__default.createElement(TableRow, _extends({}, rowProps, {
     className: cx(rowClassNames, className),
     key: rowKey,
@@ -131,49 +134,56 @@ var DatagridRow = function DatagridRow(datagridState) {
     onFocus: hoverHandler,
     onBlur: focusRemover,
     onKeyUp: handleOnKeyUp
-  }, setAdditionalRowProps()), foundAIRow ? row !== null && row !== void 0 && (_row$original3 = row.original) !== null && _row$original3 !== void 0 && _row$original3.aiLabel ? /*#__PURE__*/React__default.createElement("td", {
-    className: cx("".concat(blockClass, "__table-row-ai-enabled"), _defineProperty({}, "".concat(blockClass, "__ai-label--expanded"), row.isExpanded))
+  }, setAdditionalRowProps()), foundAIRow ? row?.original?.aiLabel ? /*#__PURE__*/React__default.createElement("td", {
+    className: cx(`${blockClass}__table-row-ai-enabled`, {
+      [`${blockClass}__ai-label--expanded`]: row.isExpanded
+    })
   }, /*#__PURE__*/React__default.createElement(DatagridAILabel, {
-    aiLabel: row === null || row === void 0 || (_row$original4 = row.original) === null || _row$original4 === void 0 ? void 0 : _row$original4.aiLabel
-  })) : row !== null && row !== void 0 && (_row$original5 = row.original) !== null && _row$original5 !== void 0 && _row$original5.slug ? /*#__PURE__*/React__default.createElement("td", {
-    className: cx("".concat(blockClass, "__table-row-ai-enabled"), _defineProperty({}, "".concat(blockClass, "__slug--expanded"), row.isExpanded))
+    aiLabel: row?.original?.aiLabel
+  })) : row?.original?.slug ? /*#__PURE__*/React__default.createElement("td", {
+    className: cx(`${blockClass}__table-row-ai-enabled`, {
+      [`${blockClass}__slug--expanded`]: row.isExpanded
+    })
   }, /*#__PURE__*/React__default.createElement(DatagridAILabel, {
-    aiLabel: row === null || row === void 0 || (_row$original6 = row.original) === null || _row$original6 === void 0 ? void 0 : _row$original6.slug
+    aiLabel: row?.original?.slug
   })) : /*#__PURE__*/React__default.createElement("td", {
-    className: "".concat(blockClass, "__table-row-ai-spacer")
-  }) : null, row.cells.map(function (cell, index) {
-    var _cell$column, _cell$column2, _associatedHeader$, _associatedHeader$2;
-    var cellProps = cell.getCellProps({
+    className: `${blockClass}__table-row-ai-spacer`
+  }) : null, row.cells.map((cell, index) => {
+    const cellProps = cell.getCellProps({
       role: undefined
     });
-    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;
-    var content = children || /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && (_SkeletonText || (_SkeletonText = /*#__PURE__*/React__default.createElement(SkeletonText, null))));
-    if ((cell === null || cell === void 0 || (_cell$column2 = cell.column) === null || _cell$column2 === void 0 ? void 0 : _cell$column2.id) === selectionColumnId) {
+    const {
+      style,
+      children,
+      ...restProps
+    } = cellProps;
+    const columnClassname = cell?.column?.className;
+    const content = children || /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && (_SkeletonText || (_SkeletonText = /*#__PURE__*/React__default.createElement(SkeletonText, null))));
+    if (cell?.column?.id === selectionColumnId) {
       // directly render component without the wrapping TableCell
       return cell.render('Cell', {
         key: cell.column.id
       });
     }
-    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 0 auto' : '0 0 auto';
+    const associatedHeader = headers?.filter(h => h.id === cell.column.id);
+    const lastVisibleIndex = withActionsColumn ? 2 : 1;
+    const lastVisibleFlexStyle = index === visibleColumns.length - lastVisibleIndex ? '1 0 auto' : '0 0 auto';
     if (style) {
       style.flex = lastVisibleFlexStyle;
     }
     return /*#__PURE__*/React__default.createElement(TableCell, _extends({
-      className: cx("".concat(blockClass, "__cell"), _defineProperty(_defineProperty(_defineProperty(_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__*/isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), "".concat(blockClass, "__ai-label--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/isValidElement((_associatedHeader$2 = associatedHeader[0]) === null || _associatedHeader$2 === void 0 ? void 0 : _associatedHeader$2.aiLabel)), columnClassname)
+      className: cx(`${blockClass}__cell`, {
+        [`${blockClass}__expandable-row-cell`]: (row.canExpand || getAsyncSubRows) && index === 0,
+        [`${blockClass}__expandable-row-cell--is-expanded`]: row.isExpanded && index === 0,
+        [`${blockClass}__slug--cell`]: associatedHeader && associatedHeader.length && /*#__PURE__*/isValidElement(associatedHeader[0]?.slug),
+        [`${blockClass}__ai-label--cell`]: associatedHeader && associatedHeader.length && /*#__PURE__*/isValidElement(associatedHeader[0]?.aiLabel)
+      }, columnClassname)
     }, restProps, {
       // eslint-disable-next-line react/forbid-component-props
       style: style,
       key: cell.column.id
     }), content);
-  })), (renderExpandedRow === null || renderExpandedRow === void 0 ? void 0 : renderExpandedRow()) || undefined);
+  })), renderExpandedRow?.() || undefined);
 };
 
 export { DatagridRow as default };

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

@@ -5,22 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useLayoutEffect } from 'react';
 import { TableSelectAll } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings.js';
 import { handleSelectAllRowData, handleOnPageSelectAllRowData } from './addons/stateReducer.js';
 
-var _excluded = ["onChange"];
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var SelectAll = function SelectAll(datagridState) {
-  var _columns$;
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    windowSize = _useState2[0],
-    setWindowSize = _useState2[1];
-  useLayoutEffect(function () {
+const blockClass = `${pkg.prefix}--datagrid`;
+const SelectAll = datagridState => {
+  const [windowSize, setWindowSize] = useState();
+  useLayoutEffect(() => {
     setWindowSize(window.innerWidth);
     /* istanbul ignore next */
     function updateSize() {
@@ -29,83 +24,90 @@ var SelectAll = function SelectAll(datagridState) {
     if (typeof window !== 'undefined') {
       window.addEventListener('resize', updateSize);
     }
-    return function () {
-      return window.removeEventListener('resize', updateSize);
-    };
+    return () => window.removeEventListener('resize', updateSize);
   }, []);
-  var isFetching = datagridState.isFetching,
-    getToggleAllRowsSelectedProps = datagridState.getToggleAllRowsSelectedProps,
-    getToggleAllPageRowsSelectedProps = datagridState.getToggleAllPageRowsSelectedProps,
-    tableId = datagridState.tableId,
-    hideSelectAll = datagridState.hideSelectAll,
-    DatagridPagination = datagridState.DatagridPagination,
-    radio = datagridState.radio,
-    columns = datagridState.columns,
-    withStickyColumn = datagridState.withStickyColumn,
-    dispatch = datagridState.dispatch,
-    rows = datagridState.rows,
-    getRowId = datagridState.getRowId,
-    toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
-    withVirtualScroll = datagridState.withVirtualScroll,
-    onAllRowSelect = datagridState.onAllRowSelect;
-  var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
+  const {
+    isFetching,
+    getToggleAllRowsSelectedProps,
+    getToggleAllPageRowsSelectedProps,
+    tableId,
+    hideSelectAll,
+    DatagridPagination,
+    radio,
+    columns,
+    withStickyColumn,
+    dispatch,
+    rows,
+    getRowId,
+    toggleAllRowsSelected,
+    withVirtualScroll,
+    onAllRowSelect
+  } = datagridState;
+  const isFirstColumnStickyLeft = columns[0]?.sticky === 'left' && withStickyColumn;
   if (hideSelectAll || radio) {
     return /*#__PURE__*/React__default.createElement("th", {
-      className: cx("".concat(blockClass, "__head-hidden-select-all"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), /* istanbul ignore next */
-      isFirstColumnStickyLeft && Number(windowSize) > 671))
+      className: cx(`${blockClass}__head-hidden-select-all`, {
+        [`${blockClass}__select-all-sticky-left`]: /* istanbul ignore next */
+        isFirstColumnStickyLeft && Number(windowSize) > 671
+      })
     });
   }
-  var getProps = DatagridPagination ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
-  var _ref = getProps(),
-    onChange = _ref.onChange,
-    selectProps = _objectWithoutProperties(_ref, _excluded);
-  var indeterminate = selectProps.indeterminate;
-  var handleOnPageSelectAllChange = function handleOnPageSelectAllChange(event) {
+  const getProps = DatagridPagination ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
+  const {
+    onChange,
+    ...selectProps
+  } = getProps();
+  const {
+    indeterminate
+  } = selectProps;
+  const handleOnPageSelectAllChange = event => {
     handleOnPageSelectAllRowData({
-      dispatch: dispatch,
-      rows: rows,
-      getRowId: getRowId,
+      dispatch,
+      rows,
+      getRowId,
       isChecked: event.target.checked,
-      indeterminate: indeterminate
+      indeterminate
     });
-    onAllRowSelect === null || onAllRowSelect === void 0 || onAllRowSelect(rows, event);
-    return onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    onAllRowSelect?.(rows, event);
+    return onChange?.(event);
   };
-  var handleSelectAllChange = function handleSelectAllChange(event) {
+  const handleSelectAllChange = event => {
     if (indeterminate) {
       handleSelectAllRowData({
-        dispatch: dispatch,
-        rows: rows,
-        getRowId: getRowId,
+        dispatch,
+        rows,
+        getRowId,
         indeterminate: true,
         isChecked: undefined
       });
       toggleAllRowsSelected(false);
-      onAllRowSelect === null || onAllRowSelect === void 0 || onAllRowSelect(rows, event);
-      return onChange === null || onChange === void 0 ? void 0 : onChange({
+      onAllRowSelect?.(rows, event);
+      return onChange?.({
         target: {
           checked: false
         }
       });
     }
     handleSelectAllRowData({
-      dispatch: dispatch,
-      rows: rows,
-      getRowId: getRowId,
+      dispatch,
+      rows,
+      getRowId,
       isChecked: event.target.checked,
-      indeterminate: indeterminate
+      indeterminate
     });
-    onAllRowSelect === null || onAllRowSelect === void 0 || onAllRowSelect(rows, event);
-    return onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    onAllRowSelect?.(rows, event);
+    return onChange?.(event);
   };
   return /*#__PURE__*/React__default.createElement(TableSelectAll, _extends({}, selectProps, {
-    checked: (selectProps === null || selectProps === void 0 ? void 0 : selectProps.checked) || false,
-    className: cx("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), /* istanbul ignore next */
-    isFirstColumnStickyLeft && Number(windowSize) > 671)),
-    name: "".concat(tableId, "-select-all-checkbox-name"),
+    checked: selectProps?.checked || false,
+    className: cx(`${blockClass}__head-select-all`, `${blockClass}__checkbox-cell`, {
+      [`${blockClass}__checkbox-cell-sticky-left`]: /* istanbul ignore next */
+      isFirstColumnStickyLeft && Number(windowSize) > 671
+    }),
+    name: `${tableId}-select-all-checkbox-name`,
     onSelect: withVirtualScroll ? handleSelectAllChange : handleOnPageSelectAllChange,
-    disabled: isFetching || (selectProps === null || selectProps === void 0 ? void 0 : selectProps.disabled),
-    id: "".concat(tableId, "-select-all-checkbox-id")
+    disabled: isFetching || selectProps?.disabled,
+    id: `${tableId}-select-all-checkbox-id`
   }));
 };
 

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useEffect, useLayoutEffect } from 'react';
 import PropTypes from '../../../_virtual/index.js';
 import cx from 'classnames';
@@ -13,90 +13,81 @@ import { Checkbox, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { CaretDown } from '@carbon/react/icons';
 import { pkg } from '../../../settings.js';
 
-var _excluded = ["onChange"];
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var SELECT_ALL_PAGE_ROWS = 'pageRows';
-var SELECT_ALL_ROWS = 'allRows';
-var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
-  var _columns$;
-  var tableId = _ref.tableId,
-    isFetching = _ref.isFetching,
-    isAllRowsSelected = _ref.isAllRowsSelected,
-    selectAllToggle = _ref.selectAllToggle,
-    getToggleAllPageRowsSelectedProps = _ref.getToggleAllPageRowsSelectedProps,
-    getToggleAllRowsSelectedProps = _ref.getToggleAllRowsSelectedProps,
-    _ref$allPageRowsLabel = _ref.allPageRowsLabel,
-    allPageRowsLabel = _ref$allPageRowsLabel === void 0 ? 'Select all on page' : _ref$allPageRowsLabel,
-    _ref$allRowsLabel = _ref.allRowsLabel,
-    allRowsLabel = _ref$allRowsLabel === void 0 ? 'Select all' : _ref$allRowsLabel,
-    columns = _ref.columns,
-    withStickyColumn = _ref.withStickyColumn;
-  var _ref2 = selectAllToggle || {},
-    onSelectAllRows = _ref2.onSelectAllRows,
-    labels = _ref2.labels;
-  var _useState = useState(SELECT_ALL_PAGE_ROWS),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectAllMode = _useState2[0],
-    setSelectAllMode = _useState2[1];
-  useEffect(function () {
+const blockClass = `${pkg.prefix}--datagrid`;
+const SELECT_ALL_PAGE_ROWS = 'pageRows';
+const SELECT_ALL_ROWS = 'allRows';
+const SelectAllWithToggle = _ref => {
+  let {
+    tableId,
+    isFetching,
+    isAllRowsSelected,
+    selectAllToggle,
+    getToggleAllPageRowsSelectedProps,
+    getToggleAllRowsSelectedProps,
+    allPageRowsLabel = 'Select all on page',
+    allRowsLabel = 'Select all',
+    columns,
+    withStickyColumn
+  } = _ref;
+  const {
+    onSelectAllRows,
+    labels
+  } = selectAllToggle || {};
+  const [selectAllMode, setSelectAllMode] = useState(SELECT_ALL_PAGE_ROWS);
+  useEffect(() => {
     if (onSelectAllRows) {
       onSelectAllRows(isAllRowsSelected && selectAllMode === SELECT_ALL_ROWS);
     }
   }, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    windowSize = _useState4[0],
-    setWindowSize = _useState4[1];
-  useLayoutEffect(function () {
+  const [windowSize, setWindowSize] = useState();
+  useLayoutEffect(() => {
     setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
     window.addEventListener('resize', updateSize);
-    return function () {
-      return window.removeEventListener('resize', updateSize);
-    };
+    return () => window.removeEventListener('resize', updateSize);
   }, []);
   if (labels) {
-    allPageRowsLabel = (labels === null || labels === void 0 ? void 0 : labels.allPageRows) || allPageRowsLabel;
+    allPageRowsLabel = labels?.allPageRows || allPageRowsLabel;
     allRowsLabel = labels.allRows || allRowsLabel;
   }
-  var getProps = selectAllMode === SELECT_ALL_PAGE_ROWS ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
-  var _ref3 = getProps(),
-    onChange = _ref3.onChange,
-    selectProps = _objectWithoutProperties(_ref3, _excluded);
-  var disabled = isFetching || selectProps.disabled;
-  var isFirstColumnStickyLeft = (columns === null || columns === void 0 || (_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
+  const getProps = selectAllMode === SELECT_ALL_PAGE_ROWS ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
+  const {
+    onChange,
+    ...selectProps
+  } = getProps();
+  const disabled = isFetching || selectProps.disabled;
+  const isFirstColumnStickyLeft = columns?.[0]?.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 !== null && windowSize !== void 0 ? windowSize : 0) > 671))
+    className: cx(`${blockClass}__select-all-toggle-on`, {
+      [`${blockClass}__select-all-sticky-left`]: isFirstColumnStickyLeft && (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) {
-      onChange === null || onChange === void 0 || onChange(e);
+    name: `${tableId}-select-all-checkbox-name`,
+    onClick: e => {
+      onChange?.(e);
     },
     disabled: disabled,
-    id: "".concat(tableId, "-select-all-checkbox-id"),
+    id: `${tableId}-select-all-checkbox-id`,
     labelText: allRowsLabel,
     hideLabel: true
   }))), /*#__PURE__*/React__default.createElement(OverflowMenu, {
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default.createElement(CaretDown, _extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: props => /*#__PURE__*/React__default.createElement(CaretDown, _extends({
+      size: 16
+    }, props)),
     size: "sm",
     "aria-label": allRowsLabel,
-    menuOptionsClass: "".concat(blockClass, "__select-all-toggle-overflow")
+    menuOptionsClass: `${blockClass}__select-all-toggle-overflow`
   }, /*#__PURE__*/React__default.createElement(OverflowMenuItem, {
     itemText: allPageRowsLabel,
     requireTitle: true,
     disabled: disabled,
-    onClick: function onClick() {
-      var _ref4;
+    onClick: () => {
       setSelectAllMode(SELECT_ALL_PAGE_ROWS);
       // deselect all rows first
-      getToggleAllRowsSelectedProps === null || getToggleAllRowsSelectedProps === void 0 || (_ref4 = getToggleAllRowsSelectedProps()) === null || _ref4 === void 0 || _ref4.onChange({
+      getToggleAllRowsSelectedProps?.()?.onChange({
         target: {
           checked: false
         }
@@ -112,7 +103,7 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
     itemText: allRowsLabel,
     requireTitle: true,
     disabled: disabled,
-    onClick: function onClick() {
+    onClick: () => {
       setSelectAllMode(SELECT_ALL_ROWS);
       getToggleAllRowsSelectedProps().onChange({
         target: {