@carbon/ibm-products 2.65.0 → 2.66.0

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

@@ -5,31 +5,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { TableBody } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings.js';
 
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
-  var getTableBodyProps = datagridState.getTableBodyProps,
-    rows = datagridState.rows,
-    prepareRow = datagridState.prepareRow;
+const blockClass = `${pkg.prefix}--datagrid`;
+const DatagridSimpleBody = datagridState => {
+  const {
+    getTableBodyProps,
+    rows,
+    prepareRow
+  } = datagridState;
   return /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps({
     role: undefined
   }), {
     "aria-live": undefined,
-    className: cx("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
-  }), rows.map(function (row) {
-    var _row$RowRenderer;
+    className: cx(`${blockClass}__simple-body`, getTableBodyProps().className)
+  }), rows.map(row => {
     prepareRow(row);
-    var _row$getRowProps = row.getRowProps(),
-      key = _row$getRowProps.key;
-    return row === null || row === void 0 || (_row$RowRenderer = row.RowRenderer) === null || _row$RowRenderer === void 0 ? void 0 : _row$RowRenderer.call(row, _objectSpread2(_objectSpread2({}, datagridState), {}, {
-      row: row,
-      key: key
-    }));
+    const {
+      key
+    } = row.getRowProps();
+    return row?.RowRenderer?.({
+      ...datagridState,
+      row,
+      key
+    });
   }));
 };
 

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

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import PropTypes from '../../../_virtual/index.js';
 import { TableToolbar, TableBatchActions, TableBatchAction, MenuButton, MenuItem } from '@carbon/react';
@@ -14,44 +13,32 @@ import { pkg, carbon } from '../../../settings.js';
 import cx from 'classnames';
 import { handleSelectAllRowData } from './addons/stateReducer.js';
 
-var _excluded = ["ariaToolbarLabel"];
-var blockClass = "".concat(pkg.prefix, "--datagrid__table-toolbar");
-var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    displayAllInMenu = _useState2[0],
-    setDisplayAllInMenu = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    initialListWidth = _useState4[0],
-    setInitialListWidth = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    receivedInitialWidth = _useState6[0],
-    setReceivedInitialWidth = _useState6[1];
-  var onSelectAllRows = datagridState.onSelectAllRows,
-    selectedRowIds = datagridState.state.selectedRowIds,
-    toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
-    toolbarBatchActions = datagridState.toolbarBatchActions,
-    toolbarBatchActionsDisplayMin = datagridState.toolbarBatchActionsDisplayMin,
-    setGlobalFilter = datagridState.setGlobalFilter,
-    rows = datagridState.rows,
-    dispatch = datagridState.dispatch,
-    getRowId = datagridState.getRowId,
-    batchActionMenuButtonLabel = datagridState.batchActionMenuButtonLabel,
-    translateWithIdBatchActions = datagridState.translateWithIdBatchActions;
-  var _useState7 = useState(rows.length),
-    _useState8 = _slicedToArray(_useState7, 2),
-    availableRowsCount = _useState8[0],
-    setAvailableRowsCount = _useState8[1];
-  var batchActionMenuButtonLabelText = batchActionMenuButtonLabel !== null && batchActionMenuButtonLabel !== void 0 ? batchActionMenuButtonLabel : 'More';
-  var selectedKeys = Object.keys(selectedRowIds || {});
-  var totalSelected = selectedKeys.length;
-  useEffect(function () {
-    var _rows$find, _rows$find$getRowProp;
-    var countDisabledRows = ((_rows$find = rows.find(function (row) {
-      return row.getRowProps;
-    })) === null || _rows$find === void 0 || (_rows$find$getRowProp = _rows$find.getRowProps) === null || _rows$find$getRowProp === void 0 || (_rows$find$getRowProp = _rows$find$getRowProp.call(_rows$find)) === null || _rows$find$getRowProp === void 0 || (_rows$find$getRowProp = _rows$find$getRowProp.nonselectablerows) === null || _rows$find$getRowProp === void 0 ? void 0 : _rows$find$getRowProp.length) || 0;
+const blockClass = `${pkg.prefix}--datagrid__table-toolbar`;
+const DatagridBatchActionsToolbar = (datagridState, width, ref) => {
+  const [displayAllInMenu, setDisplayAllInMenu] = useState(false);
+  const [initialListWidth, setInitialListWidth] = useState(null);
+  const [receivedInitialWidth, setReceivedInitialWidth] = useState(false);
+  const {
+    onSelectAllRows,
+    state: {
+      selectedRowIds
+    },
+    toggleAllRowsSelected,
+    toolbarBatchActions,
+    toolbarBatchActionsDisplayMin,
+    setGlobalFilter,
+    rows,
+    dispatch,
+    getRowId,
+    batchActionMenuButtonLabel,
+    translateWithIdBatchActions
+  } = datagridState;
+  const [availableRowsCount, setAvailableRowsCount] = useState(rows.length);
+  const batchActionMenuButtonLabelText = batchActionMenuButtonLabel ?? 'More';
+  const selectedKeys = Object.keys(selectedRowIds || {});
+  const totalSelected = selectedKeys.length;
+  useEffect(() => {
+    const countDisabledRows = rows.find(row => row.getRowProps)?.getRowProps?.()?.nonselectablerows?.length || 0;
     if (rows) {
       setAvailableRowsCount(rows.length - countDisabledRows);
     }
@@ -60,59 +47,54 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
   // Get initial width of batch actions container,
   // used to measure when all items are put inside
   // the ButtonMenu
-  useEffect(function () {
+  useEffect(() => {
     if (totalSelected === 1 && !receivedInitialWidth) {
-      var _ref$current;
-      var batchActionListWidth = ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".".concat(carbon.prefix, "--action-list")).offsetWidth;
+      const batchActionListWidth = ref?.current?.querySelector(`.${carbon.prefix}--action-list`).offsetWidth;
       setInitialListWidth(batchActionListWidth);
       setReceivedInitialWidth(true);
     }
   }, [totalSelected, receivedInitialWidth, ref]);
-  useEffect(function () {
-    var summaryWidth = ref === null || ref === void 0 ? void 0 : ref.current.querySelector(".".concat(carbon.prefix, "--batch-summary")).offsetWidth;
+  useEffect(() => {
+    const summaryWidth = ref?.current.querySelector(`.${carbon.prefix}--batch-summary`).offsetWidth;
     if (width < summaryWidth + initialListWidth + 32) {
       setDisplayAllInMenu(true);
     } else {
       setDisplayAllInMenu(false);
     }
   }, [width, ref, initialListWidth]);
-  var getSelectedRowData = function getSelectedRowData() {
+  const getSelectedRowData = () => {
     if (selectedKeys.length === 0) {
       return [];
     }
-    return selectedKeys.map(function (rowIndex) {
-      var filteredRow = rows.filter(function (row) {
-        return row.index === parseInt(rowIndex);
-      });
+    return selectedKeys.map(rowIndex => {
+      const filteredRow = rows.filter(row => row.index === parseInt(rowIndex));
       return filteredRow.length ? filteredRow[0] : [];
     });
   };
 
   // Render batch actions in ButtonMenu
-  var renderBatchActionOverflow = function renderBatchActionOverflow() {
-    var menuClass = "".concat(blockClass, "__button-menu");
-    var minWidthBeforeOverflowIcon = 380;
+  const renderBatchActionOverflow = () => {
+    const menuClass = `${blockClass}__button-menu`;
+    const 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 && !displayAllInMenu && (!toolbarBatchActionsDisplayMin && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 || toolbarBatchActionsDisplayMin !== undefined && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= toolbarBatchActionsDisplayMin)) {
+    if (toolbarBatchActions && !displayAllInMenu && (!toolbarBatchActionsDisplayMin && toolbarBatchActions?.length <= 3 || toolbarBatchActionsDisplayMin !== undefined && toolbarBatchActions?.length <= toolbarBatchActionsDisplayMin)) {
       return;
     }
-    var renderItem = function renderItem(batchAction, index) {
-      return /*#__PURE__*/React__default.createElement(MenuItem, {
-        key: "".concat(batchAction.label, "-").concat(index),
-        label: batchAction.label,
-        onClick: function onClick(event) {
-          return onClickHandler(event, batchAction);
-        }
-      });
-    };
+    const renderItem = (batchAction, index) => /*#__PURE__*/React__default.createElement(MenuItem, {
+      key: `${batchAction.label}-${index}`,
+      label: batchAction.label,
+      onClick: event => onClickHandler(event, batchAction)
+    });
     return /*#__PURE__*/React__default.createElement(MenuButton, {
       label: batchActionMenuButtonLabelText,
-      className: cx([menuClass, _defineProperty({}, "".concat(menuClass, "-icon-only"), width <= minWidthBeforeOverflowIcon)]),
+      className: cx([menuClass, {
+        [`${menuClass}-icon-only`]: width <= minWidthBeforeOverflowIcon
+      }]),
       tabIndex: totalSelected > 0 ? 0 : -1,
       menuAlignment: "bottom"
-    }, toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
-      var hidden = toolbarBatchActionsDisplayMin === undefined && index < 2 && !displayAllInMenu;
+    }, toolbarBatchActions?.map((batchAction, index) => {
+      let hidden = toolbarBatchActionsDisplayMin === undefined && index < 2 && !displayAllInMenu;
       if (toolbarBatchActionsDisplayMin !== undefined && index < toolbarBatchActionsDisplayMin && !displayAllInMenu) {
         hidden = true;
       }
@@ -121,30 +103,30 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       }
     }));
   };
-  var onClickHandler = function onClickHandler(event, batchAction) {
+  const onClickHandler = (event, batchAction) => {
     batchAction.onClick(getSelectedRowData(), event);
     if (batchAction.type === 'select_all') {
       toggleAllRowsSelected(true);
     }
   };
-  var onCancelHandler = function onCancelHandler() {
+  const onCancelHandler = () => {
     handleSelectAllRowData({
-      dispatch: dispatch,
+      dispatch,
       rows: [],
-      getRowId: getRowId,
+      getRowId,
       isChecked: false,
       indeterminate: undefined
     });
     toggleAllRowsSelected(false);
-    setGlobalFilter === null || setGlobalFilter === void 0 || setGlobalFilter(null);
+    setGlobalFilter?.(null);
   };
-  var onSelectAllHandler = function onSelectAllHandler() {
+  const onSelectAllHandler = () => {
     toggleAllRowsSelected(true);
-    onSelectAllRows === null || onSelectAllRows === void 0 || onSelectAllRows(true);
+    onSelectAllRows?.(true);
     handleSelectAllRowData({
-      dispatch: dispatch,
-      rows: rows,
-      getRowId: getRowId,
+      dispatch,
+      rows,
+      getRowId,
       indeterminate: undefined,
       isChecked: undefined
     });
@@ -160,42 +142,47 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     onSelectAll: onSelectAllHandler,
     totalCount: availableRowsCount,
     translateWithId: translateWithIdBatchActions
-  }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
+  }, !displayAllInMenu && toolbarBatchActions && toolbarBatchActions?.map((batchAction, index) => {
     if (!toolbarBatchActionsDisplayMin && index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3 || toolbarBatchActionsDisplayMin !== undefined && index < toolbarBatchActionsDisplayMin) {
       return /*#__PURE__*/React__default.createElement(TableBatchAction, {
-        key: "".concat(batchAction.label, "-").concat(index),
+        key: `${batchAction.label}-${index}`,
         renderIcon: batchAction.renderIcon,
-        onClick: function onClick(event) {
-          return onClickHandler(event, batchAction);
-        },
-        className: cx(_defineProperty({}, "".concat(carbon.prefix, "--noLabel"), !batchAction.label || batchAction.label === '')),
+        onClick: event => onClickHandler(event, batchAction),
+        className: cx({
+          [`${carbon.prefix}--noLabel`]: !batchAction.label || batchAction.label === ''
+        }),
         iconDescription: batchAction.label,
         tabIndex: totalSelected > 0 ? 0 : -1
       }, batchAction.label);
     }
-  })), renderBatchActionOverflow());
+  }), renderBatchActionOverflow());
 };
-var DatagridToolbar = function DatagridToolbar(_ref2) {
-  var ariaToolbarLabel = _ref2.ariaToolbarLabel,
-    datagridState = _objectWithoutProperties(_ref2, _excluded);
-  var ref = useRef(null);
-  var _useResizeObserver = useResizeObserver(ref),
-    width = _useResizeObserver.width;
-  var DatagridActions = datagridState.DatagridActions,
-    DatagridBatchActions = datagridState.DatagridBatchActions,
-    batchActions = datagridState.batchActions,
-    rowSize = datagridState.rowSize;
-  var getRowHeight = rowSize || 'lg';
+const DatagridToolbar = _ref => {
+  let {
+    ariaToolbarLabel,
+    ...datagridState
+  } = _ref;
+  const ref = useRef(null);
+  const {
+    width
+  } = useResizeObserver(ref);
+  const {
+    DatagridActions,
+    DatagridBatchActions,
+    batchActions,
+    rowSize
+  } = datagridState;
+  const getRowHeight = rowSize || 'lg';
   return batchActions && DatagridActions ? /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
-    className: cx([blockClass, "".concat(blockClass, "--").concat(getRowHeight)])
+    className: cx([blockClass, `${blockClass}--${getRowHeight}`])
   }, /*#__PURE__*/React__default.createElement(TableToolbar, {
     "aria-label": ariaToolbarLabel
-  }, DatagridActions && /*#__PURE__*/React__default.createElement(DatagridActions, datagridState), DatagridBatchActionsToolbar === null || DatagridBatchActionsToolbar === void 0 ? void 0 : DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React__default.createElement("div", {
+  }, DatagridActions && /*#__PURE__*/React__default.createElement(DatagridActions, datagridState), DatagridBatchActionsToolbar?.(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React__default.createElement("div", {
     className: blockClass
   }, /*#__PURE__*/React__default.createElement(TableToolbar, {
     "aria-label": ariaToolbarLabel
-  }, DatagridActions && /*#__PURE__*/React__default.createElement(DatagridActions, datagridState), DatagridBatchActions === null || DatagridBatchActions === void 0 ? void 0 : DatagridBatchActions(datagridState))) : null;
+  }, DatagridActions && /*#__PURE__*/React__default.createElement(DatagridActions, datagridState), DatagridBatchActions?.(datagridState))) : null;
 };
 DatagridToolbar.propTypes = {
   ariaToolbarLabel: PropTypes.string

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useEffect } from 'react';
 import { VariableSizeList } from 'react-window';
 import { TableBody } from '@carbon/react';
@@ -14,102 +14,100 @@ import DatagridHead from './DatagridHead.js';
 import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver.js';
 import { useIsomorphicEffect } from '../../../global/js/hooks/useIsomorphicEffect.js';
 
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var rowSizeMap = {
+const blockClass = `${pkg.prefix}--datagrid`;
+const rowSizeMap = {
   xs: 24,
   sm: 32,
   md: 40,
   lg: 48,
   xl: 64
 };
-var defaultRowHeight = rowSizeMap.lg;
-var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
-  var _gridRef$current;
-  var getTableBodyProps = datagridState.getTableBodyProps,
-    rows = datagridState.rows,
-    prepareRow = datagridState.prepareRow,
-    onScroll = datagridState.onScroll,
-    innerListRef = datagridState.innerListRef,
-    _datagridState$tableH = datagridState.tableHeight,
-    tableHeight = _datagridState$tableH === void 0 ? 400 : _datagridState$tableH,
-    virtualHeight = datagridState.virtualHeight,
-    listRef = datagridState.listRef,
-    rowSize = datagridState.rowSize,
-    DatagridPagination = datagridState.DatagridPagination,
-    page = datagridState.page,
-    handleResize = datagridState.handleResize,
-    gridRef = datagridState.gridRef,
-    tableId = datagridState.tableId,
-    onVirtualScroll = datagridState.onVirtualScroll;
-  var headWrapRef = useRef(null);
-  var innerRef = useRef(null);
-  var gridWidth = gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth;
+const defaultRowHeight = rowSizeMap.lg;
+const DatagridVirtualBody = datagridState => {
+  const {
+    getTableBodyProps,
+    rows,
+    prepareRow,
+    onScroll,
+    innerListRef,
+    tableHeight = 400,
+    virtualHeight,
+    listRef,
+    rowSize,
+    DatagridPagination,
+    page,
+    handleResize,
+    gridRef,
+    tableId,
+    onVirtualScroll
+  } = datagridState;
+  const headWrapRef = useRef(null);
+  const innerRef = useRef(null);
+  const gridWidth = gridRef?.current?.clientWidth;
   /* istanbul ignore next */
-  var handleVirtualGridResize = function handleVirtualGridResize() {
-    var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
+  const handleVirtualGridResize = () => {
+    const gridRefElement = gridRef?.current;
     // 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;
+    const isHidden = 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();
+      gridRefElement.style.width = gridRefElement?.clientWidth?.toString();
     }
   };
   useResizeObserver(gridRef, handleVirtualGridResize);
-  useEffect(function () {
-    handleResize === null || handleResize === void 0 || handleResize();
+  useEffect(() => {
+    handleResize?.();
   }, [handleResize]);
-  var rowHeight = rowSize && rowSizeMap[rowSize] || defaultRowHeight;
-  useEffect(function () {
+  const rowHeight = rowSize && rowSizeMap[rowSize] || defaultRowHeight;
+  useEffect(() => {
     if (listRef && listRef.current) {
       listRef.current.resetAfterIndex(0);
     }
   }, [listRef, rowHeight]);
-  var visibleRows = DatagridPagination && page || rows;
-  var testRef = useRef(null);
+  const visibleRows = DatagridPagination && page || rows;
+  const testRef = useRef(null);
 
   // Sync the scrollLeft position of the virtual body to the table header
-  useEffect(function () {
-    var _document;
-    var headWrapEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head-wrap"));
+  useEffect(() => {
+    const headWrapEl = document?.querySelector(`#${tableId} .${blockClass}__head-wrap`);
 
     // Syncs header scroll position when virtual body is scrolled
     function handleVirtualScrollX(event) {
-      var virtualBody = event.target;
+      const virtualBody = event.target;
       if (headWrapEl) {
-        headWrapEl.scrollLeft = virtualBody === null || virtualBody === void 0 ? void 0 : virtualBody.scrollLeft;
+        headWrapEl.scrollLeft = virtualBody?.scrollLeft;
       }
     }
 
     // Syncs virtual body scroll position when header is scrolled
     function handleHeaderScrollX(event) {
-      var header = event.target;
+      const header = event.target;
       if (testRef && testRef.current) {
-        testRef.current.scrollLeft = header === null || header === void 0 ? void 0 : header.scrollLeft;
+        testRef.current.scrollLeft = header?.scrollLeft;
         // this prevents the scroll bar from over exceeding the vertical scroll bar compensation in the right
         header.scrollLeft = testRef.current.scrollLeft;
       }
     }
-    var testRefValue = testRef === null || testRef === void 0 ? void 0 : testRef.current;
-    testRefValue === null || testRefValue === void 0 || testRefValue.addEventListener('scroll', handleVirtualScrollX);
-    headWrapEl === null || headWrapEl === void 0 || headWrapEl.addEventListener('scroll', handleHeaderScrollX);
-    return function () {
-      testRefValue === null || testRefValue === void 0 || testRefValue.removeEventListener('scroll', handleVirtualScrollX);
-      headWrapEl === null || headWrapEl === void 0 || headWrapEl.removeEventListener('scroll', handleHeaderScrollX);
+    const testRefValue = testRef?.current;
+    testRefValue?.addEventListener('scroll', handleVirtualScrollX);
+    headWrapEl?.addEventListener('scroll', handleHeaderScrollX);
+    return () => {
+      testRefValue?.removeEventListener('scroll', handleVirtualScrollX);
+      headWrapEl?.removeEventListener('scroll', handleHeaderScrollX);
     };
   });
-  useIsomorphicEffect(function () {
+  useIsomorphicEffect(() => {
     if (headWrapRef.current && headWrapRef.current.style) {
-      headWrapRef.current.style.width = "".concat(gridWidth, "px");
-      headWrapRef.current.style.overflow = "auto";
+      headWrapRef.current.style.width = `${gridWidth}px`;
+      headWrapRef.current.style.overflow = `auto`;
     }
   }, [headWrapRef, gridWidth]);
-  useIsomorphicEffect(function () {
-    if (testRef !== null && testRef !== void 0 && testRef.current && testRef.current.style) {
-      testRef.current.style.width = "".concat(gridWidth, "px");
+  useIsomorphicEffect(() => {
+    if (testRef?.current && testRef.current.style) {
+      testRef.current.style.width = `${gridWidth}px`;
     }
   }, [testRef, gridWidth]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__head-wrap"),
+    className: `${blockClass}__head-wrap`,
     ref: headWrapRef
   }, /*#__PURE__*/React__default.createElement(DatagridHead, datagridState)), /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps({
     role: undefined
@@ -118,34 +116,34 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
   }), /*#__PURE__*/React__default.createElement(VariableSizeList, {
     height: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
-    itemSize: function itemSize(index) {
-      var _visibleRows$index;
-      return (_visibleRows$index = visibleRows[index]) !== null && _visibleRows$index !== void 0 && _visibleRows$index.isExpanded ? (visibleRows[index].expandedContentHeight || 0) + rowHeight : rowHeight;
-    },
+    itemSize: index => visibleRows[index]?.isExpanded ? (visibleRows[index].expandedContentHeight || 0) + rowHeight : rowHeight,
     estimatedItemSize: rowHeight,
     onScroll: onScroll,
-    onItemsRendered: function onItemsRendered(e) {
-      return onVirtualScroll === null || onVirtualScroll === void 0 ? void 0 : onVirtualScroll(e);
-    },
+    onItemsRendered: e => onVirtualScroll?.(e),
     innerRef: innerListRef,
     outerRef: testRef,
     ref: listRef,
-    className: "".concat(blockClass, "__virtual-scrollbar")
-  }, function (_ref) {
-    var _row$RowRenderer;
-    var index = _ref.index,
-      style = _ref.style;
-    var row = visibleRows[index];
+    className: `${blockClass}__virtual-scrollbar`
+  }, _ref => {
+    let {
+      index,
+      style
+    } = _ref;
+    const row = visibleRows[index];
     prepareRow(row);
-    var _row$getRowProps = row.getRowProps(),
-      key = _row$getRowProps.key;
+    const {
+      key
+    } = row.getRowProps();
     return /*#__PURE__*/React__default.createElement("div", {
       ref: innerRef,
-      style: _objectSpread2({}, style)
-    }, row === null || row === void 0 || (_row$RowRenderer = row.RowRenderer) === null || _row$RowRenderer === void 0 ? void 0 : _row$RowRenderer.call(row, _objectSpread2(_objectSpread2({}, datagridState), {}, {
-      row: row,
-      key: key
-    })));
+      style: {
+        ...style
+      }
+    }, row?.RowRenderer?.({
+      ...datagridState,
+      row,
+      key
+    }));
   })));
 };
 

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { extends as _extends, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../../_virtual/index.js';
 import { Locked, Draggable } from '@carbon/react/icons';
@@ -15,41 +15,48 @@ import { CSS } from '@dnd-kit/utilities';
 import { useSortable } from '@dnd-kit/sortable';
 
 var _Locked, _DraggableIcon;
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var DraggableElement = function DraggableElement(_ref) {
-  var id = _ref.id,
-    elementId = _ref.elementId,
-    children = _ref.children,
-    classList = _ref.classList,
-    disabled = _ref.disabled,
-    ariaLabel = _ref.ariaLabel,
-    isSticky = _ref.isSticky,
-    selected = _ref.selected;
-  var _useSortable = useSortable({
-      disabled: disabled,
-      id: id
-    }),
-    attributes = _useSortable.attributes,
-    isDragging = _useSortable.isDragging,
-    listeners = _useSortable.listeners,
-    setNodeRef = _useSortable.setNodeRef,
-    transform = _useSortable.transform,
-    transition = _useSortable.transition;
-  var content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+const blockClass = `${pkg.prefix}--datagrid`;
+const DraggableElement = _ref => {
+  let {
+    id,
+    elementId,
+    children,
+    classList,
+    disabled,
+    ariaLabel,
+    isSticky,
+    selected
+  } = _ref;
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform,
+    transition
+  } = useSortable({
+    disabled,
+    id
+  });
+  const content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: cx({
-      disabled: disabled
-    }, "".concat(blockClass, "__draggable-handleStyle"))
+      disabled
+    }, `${blockClass}__draggable-handleStyle`)
   }, isSticky ? _Locked || (_Locked = /*#__PURE__*/React__default.createElement(Locked, {
     size: 16
   })) : _DraggableIcon || (_DraggableIcon = /*#__PURE__*/React__default.createElement(Draggable, {
     size: 16
   }))), children);
-  var style = {
+  const style = {
     transform: !disabled ? CSS.Transform.toString(transform) : undefined,
-    transition: transition
+    transition
   };
   return /*#__PURE__*/React__default.createElement("li", _extends({
-    className: cx(classList, "".concat(blockClass, "__draggable-handleHolder"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__draggable-handleHolder--selected"), selected), "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), "".concat(blockClass, "__draggable-handleHolder--dragging"), isDragging)),
+    className: cx(classList, `${blockClass}__draggable-handleHolder`, {
+      [`${blockClass}__draggable-handleHolder--selected`]: selected,
+      [`${blockClass}__draggable-handleHolder--sticky`]: isSticky,
+      [`${blockClass}__draggable-handleHolder--dragging`]: isDragging
+    }),
     id: elementId ? elementId : id,
     ref: setNodeRef,
     style: style
@@ -58,9 +65,11 @@ var DraggableElement = function DraggableElement(_ref) {
     "aria-selected": selected,
     role: "option"
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(blockClass, "__shared-ui--assistive-text")
+    className: `${blockClass}__shared-ui--assistive-text`
   }, ariaLabel), /*#__PURE__*/React__default.createElement("div", {
-    className: cx(_defineProperty({}, "".concat(blockClass, "__draggable-handleStyle"), !disabled), ["".concat(blockClass, "__draggable-handleHolder-droppable")])
+    className: cx({
+      [`${blockClass}__draggable-handleStyle`]: !disabled
+    }, [`${blockClass}__draggable-handleHolder-droppable`])
   }, content));
 };
 DraggableElement.propTypes = {