@carbon/ibm-products 2.41.1-canary.9 → 2.42.0

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

@@ -17,13 +17,13 @@ var constants = require('./addons/Filtering/constants.js');
 var DatagridBody = require('./DatagridBody.js');
 var DatagridHead = require('./DatagridHead.js');
 var DatagridToolbar = require('./DatagridToolbar.js');
-var index$1 = require('../../../node_modules/prop-types/index.js');
+var index = require('../../../node_modules/prop-types/index.js');
 var cx = require('classnames');
 var handleGridFocus = require('./addons/InlineEdit/handleGridFocus.js');
 var handleGridKeyPress = require('./addons/InlineEdit/handleGridKeyPress.js');
 var layout = require('@carbon/layout');
 var FilterProvider = require('./addons/Filtering/FilterProvider.js');
-var index = require('../../FeatureFlags/index.js');
+var index$1 = require('../../FeatureFlags/index.js');
 var InlineEditContext = require('./addons/InlineEdit/InlineEditContext/InlineEditContext.js');
 var useClickOutside = require('../../../global/js/hooks/useClickOutside.js');
 var useMultipleKeyTracking = require('../../DataSpreadsheet/hooks/useMultipleKeyTracking.js');
@@ -40,8 +40,8 @@ var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var gcClass = "".concat(blockClass, "__grid-container");
 var DatagridContent = function DatagridContent(_ref) {
   var datagridState = _ref.datagridState,
-    title = _ref.title,
-    ariaToolbarLabel = _ref.ariaToolbarLabel;
+    ariaToolbarLabel = _ref.ariaToolbarLabel,
+    title = _ref.title;
   var _useContext = React.useContext(InlineEditContext.InlineEditContext),
     inlineEditState = _useContext.state,
     dispatch = _useContext.dispatch;
@@ -78,11 +78,11 @@ var DatagridContent = function DatagridContent(_ref) {
     rows = datagridState.rows;
   var columnResizing = state.columnResizing;
   var contentRows = DatagridPagination && page || rows;
-  var gridAreaRef = React.useRef();
-  var multiKeyTrackingRef = React.useRef();
-  var enableEditableCell = index.useFeatureFlag('enable-datagrid-useEditableCell');
-  var enableInlineEdit = index.useFeatureFlag('enable-datagrid-useInlineEdit');
-  var enableCustomizeCols = index.useFeatureFlag('enable-datagrid-useCustomizeColumns');
+  var gridAreaRef = React.useRef(null);
+  var multiKeyTrackingRef = React.useRef(null);
+  var enableEditableCell = index$1.useFeatureFlag('enable-datagrid-useEditableCell');
+  var enableInlineEdit = index$1.useFeatureFlag('enable-datagrid-useInlineEdit');
+  var enableCustomizeCols = index$1.useFeatureFlag('enable-datagrid-useCustomizeColumns');
   React.useEffect(function () {
     dispatch({
       type: 'SET_FEATURE_FLAGS',
@@ -114,13 +114,11 @@ var DatagridContent = function DatagridContent(_ref) {
     });
   });
   var renderTable = function renderTable() {
-    var _getTableProps;
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.Table, _rollupPluginBabelHelpers["extends"]({}, getTableProps(), {
-      className: cx__default["default"](withVirtualScroll ? "".concat(blockClass, "__table-virtual-scroll") : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.Table, _rollupPluginBabelHelpers["extends"]({}, getTableProps === null || getTableProps === void 0 ? void 0 : getTableProps(), {
+      className: cx__default["default"](withVirtualScroll ? "".concat(blockClass, "__table-virtual-scroll") : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), getTableProps === null || getTableProps === void 0 ? void 0 : getTableProps().className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
-      onKeyDown: /* istanbul ignore next */
-      withInlineEdit && function (event) {
+      onKeyDown: withInlineEdit && function (event) {
         return handleGridKeyPress.handleGridKeyPress({
           event: event,
           dispatch: dispatch,
@@ -149,14 +147,15 @@ var DatagridContent = function DatagridContent(_ref) {
 
   // Provides a width for the region outline for useInlineEdit
   React.useEffect(function () {
+    var _gridElement$style;
     if (!withInlineEdit) {
       return;
     }
     var gridElement = document.querySelector("#".concat(tableId));
     var tableHeader = gridElement === null || gridElement === void 0 ? void 0 : gridElement.querySelector(".".concat(settings.carbon.prefix, "--data-table-header"));
-    gridElement.style.setProperty("--".concat(blockClass, "--grid-width"), layout.px(totalColumnsWidth + 32));
+    gridElement === null || gridElement === void 0 || (_gridElement$style = gridElement.style) === null || _gridElement$style === void 0 || _gridElement$style.setProperty("--".concat(blockClass, "--grid-width"), layout.px((totalColumnsWidth || 0) + 32));
     if (gridActive) {
-      gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), layout.px((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
+      gridElement === null || gridElement === void 0 || gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), layout.px((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
   useSubscribeToEventEmitter["default"](constants.CLEAR_SINGLE_FILTER, function (id) {
@@ -169,7 +168,7 @@ var DatagridContent = function DatagridContent(_ref) {
       clearFilters: function clearFilters() {
         return EventEmitter.dispatch(constants.CLEAR_FILTERS);
       },
-      renderLabel: filterProps.renderLabel,
+      renderLabel: filterProps === null || filterProps === void 0 ? void 0 : filterProps.renderLabel,
       overflowType: "tag"
     });
   };
@@ -187,7 +186,7 @@ var DatagridContent = function DatagridContent(_ref) {
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: cx__default["default"]("".concat(blockClass, "__table-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
     ref: gridAreaRef
-  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React__default["default"].createElement(FilterPanel["default"], _rollupPluginBabelHelpers["extends"]({}, getFilterFlyoutProps(), {
+  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React__default["default"].createElement(FilterPanel["default"], _rollupPluginBabelHelpers["extends"]({}, getFilterFlyoutProps === null || getFilterFlyoutProps === void 0 ? void 0 : getFilterFlyoutProps(), {
     title: filterProps.panelTitle,
     filterSections: filterProps.sections,
     autoHideFilters: filterProps.autoHideFilters,
@@ -204,34 +203,34 @@ var DatagridContent = function DatagridContent(_ref) {
   }));
 };
 DatagridContent.propTypes = {
-  ariaToolbarLabel: index$1["default"].string,
-  datagridState: index$1["default"].shape({
-    getTableProps: index$1["default"].func,
-    getFilterFlyoutProps: index$1["default"].func,
-    withVirtualScroll: index$1["default"].bool,
-    DatagridActions: index$1["default"].oneOfType([index$1["default"].element, index$1["default"].func]),
-    DatagridPagination: index$1["default"].oneOfType([index$1["default"].element, index$1["default"].func]),
-    CustomizeColumnsTearsheet: index$1["default"].oneOfType([index$1["default"].element, index$1["default"].func]),
-    isFetching: index$1["default"].bool,
-    skeletonRowCount: index$1["default"].number,
-    fullHeightDatagrid: index$1["default"].bool,
-    filterProps: index$1["default"].object,
-    variableRowHeight: index$1["default"].bool,
-    useDenseHeader: index$1["default"].bool,
-    withInlineEdit: index$1["default"].bool,
-    verticalAlign: index$1["default"].string,
-    gridTitle: index$1["default"].node,
-    gridDescription: index$1["default"].node,
-    page: index$1["default"].arrayOf(index$1["default"].object),
-    rows: index$1["default"].arrayOf(index$1["default"].object),
-    tableId: index$1["default"].string,
-    totalColumnsWidth: index$1["default"].number,
-    gridRef: index$1["default"].object,
-    setAllFilters: index$1["default"].func,
-    getFilterProps: index$1["default"].func,
-    state: index$1["default"].object
+  ariaToolbarLabel: index["default"].string,
+  datagridState: index["default"].shape({
+    getTableProps: index["default"].func,
+    getFilterFlyoutProps: index["default"].func,
+    withVirtualScroll: index["default"].bool,
+    DatagridActions: index["default"].oneOfType([index["default"].element, index["default"].func]),
+    DatagridPagination: index["default"].oneOfType([index["default"].element, index["default"].func]),
+    CustomizeColumnsTearsheet: index["default"].oneOfType([index["default"].element, index["default"].func]),
+    isFetching: index["default"].bool,
+    skeletonRowCount: index["default"].number,
+    fullHeightDatagrid: index["default"].bool,
+    filterProps: index["default"].object,
+    variableRowHeight: index["default"].bool,
+    useDenseHeader: index["default"].bool,
+    withInlineEdit: index["default"].bool,
+    verticalAlign: index["default"].string,
+    gridTitle: index["default"].node,
+    gridDescription: index["default"].node,
+    page: index["default"].arrayOf(index["default"].object),
+    rows: index["default"].arrayOf(index["default"].object),
+    tableId: index["default"].string,
+    totalColumnsWidth: index["default"].number,
+    gridRef: index["default"].object,
+    setAllFilters: index["default"].func,
+    getFilterProps: index["default"].func,
+    state: index["default"].object
   }),
-  title: index$1["default"].string
+  title: index["default"].string
 };
 
 exports.DatagridContent = DatagridContent;

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

@@ -1,2 +1,9 @@
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * 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 DatagridEmptyBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
 export default DatagridEmptyBody;
-declare function DatagridEmptyBody(datagridState: any): import("react/jsx-runtime").JSX.Element;

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

@@ -46,13 +46,12 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
   return /*#__PURE__*/React__default["default"].createElement(react.TableBody, _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps({
     role: undefined
   }), {
-    "aria-live": null,
+    "aria-live": "off",
     className: "".concat(blockClass, "__empty-state-body")
   }), /*#__PURE__*/React__default["default"].createElement(react.TableRow, null, /*#__PURE__*/React__default["default"].createElement(react.TableCell, {
-    colSpan: headers.length,
+    colSpan: headers === null || headers === void 0 ? void 0 : headers.length,
     className: "".concat(blockClass, "__empty-state-cell")
   }, validEmptyStates.includes(emptyStateType) ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, emptyStateType === 'error' && /*#__PURE__*/React__default["default"].createElement(ErrorEmptyState.ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/React__default["default"].createElement(NoDataEmptyState.NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/React__default["default"].createElement(NotFoundEmptyState.NotFoundEmptyState, emptyStateProps)) : /*#__PURE__*/React__default["default"].createElement(EmptyState.EmptyState, emptyStateProps))));
 };
-var DatagridEmptyBody$1 = DatagridEmptyBody;
 
-exports["default"] = DatagridEmptyBody$1;
+exports["default"] = DatagridEmptyBody;

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

@@ -1,2 +1,10 @@
+/**
+ * Copyright IBM Corp. 2020, 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 { JSXElementConstructor } from 'react';
+import { DataGridState } from '../types';
+declare const DatagridExpandedRow: (ExpandedRowContentComponent: JSXElementConstructor<any>) => (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
 export default DatagridExpandedRow;
-declare function DatagridExpandedRow(ExpandedRowContentComponent: any): (datagridState: any) => import("react/jsx-runtime").JSX.Element;

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

@@ -19,6 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
+var _excluded = ["key"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 
 // eslint-disable-next-line react/prop-types
@@ -27,8 +28,9 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
     var _row$original;
     var row = datagridState.row;
     var expandedContentHeight = row.expandedContentHeight;
-    var toggleParentHoverClass = function toggleParentHoverClass(event, eventType) {
+    var toggleParentHoverClass = function toggleParentHoverClass(event) {
       var _event$target;
+      var eventType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
       /* istanbul ignore else */
       if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && _event$target.closest('tr').previousElementSibling) {
         var _event$target2;
@@ -40,6 +42,8 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
         }
       }
     };
+    var key = datagridState.key,
+      _state = _rollupPluginBabelHelpers.objectWithoutProperties(datagridState, _excluded);
     return /*#__PURE__*/React__default["default"].createElement("tr", {
       className: cx__default["default"]("".concat(blockClass, "__expanded-row"), _rollupPluginBabelHelpers.defineProperty({}, "".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))),
       onMouseEnter: function onMouseEnter(event) {
@@ -55,9 +59,10 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
       style: {
         height: expandedContentHeight && expandedContentHeight
       }
-    }, /*#__PURE__*/React__default["default"].createElement(ExpandedRowContentComponent, datagridState))));
+    }, /*#__PURE__*/React__default["default"].createElement(ExpandedRowContentComponent, _rollupPluginBabelHelpers["extends"]({
+      key: key
+    }, _state)))));
   };
 };
-var DatagridExpandedRow$1 = DatagridExpandedRow;
 
-exports["default"] = DatagridExpandedRow$1;
+exports["default"] = DatagridExpandedRow;

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

@@ -1,2 +1,9 @@
+/**
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { DataGridState } from '../types';
+declare const DatagridHead: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
 export default DatagridHead;
-declare function DatagridHead(datagridState: any): import("react/jsx-runtime").JSX.Element;

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

@@ -22,12 +22,10 @@ var DatagridHead = function DatagridHead(datagridState) {
     headRef = datagridState.headRef,
     HeaderRow = datagridState.HeaderRow;
   return /*#__PURE__*/React__default["default"].createElement(react.TableHead, null, headerGroups.map(function (headerGroup) {
-    return (
-      // doesn't support header grouping.
-      HeaderRow(datagridState, headRef, headerGroup)
+    return (// doesn't support header grouping.
+      HeaderRow === null || HeaderRow === void 0 ? void 0 : HeaderRow(datagridState, headRef, headerGroup)
     );
   }));
 };
-var DatagridHead$1 = DatagridHead;
 
-exports["default"] = DatagridHead$1;
+exports["default"] = DatagridHead;

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

@@ -1,2 +1,9 @@
+/**
+ * Copyright IBM Corp. 2020, 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 { DatagridTableHooks } from '../types';
+declare const useHeaderRow: (hooks: DatagridTableHooks) => void;
 export default useHeaderRow;
-declare function useHeaderRow(hooks: any): void;

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

@@ -27,9 +27,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _th;
-var _excluded = ["role"],
-  _excluded2 = ["className", "role"],
-  _excluded3 = ["role"];
+var _excluded = ["className"],
+  _excluded2 = ["key"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
@@ -54,22 +53,20 @@ var ResizeHeader = function ResizeHeader(_ref) {
     onColResizeEnd = _ref.onColResizeEnd,
     resizerAriaLabel = _ref.resizerAriaLabel,
     isFetching = _ref.isFetching;
-  // eslint-disable-next-line no-unused-vars
-  resizerProps.role;
-    var headerProps = _rollupPluginBabelHelpers.objectWithoutProperties(resizerProps, _excluded);
+  var headerProps = _rollupPluginBabelHelpers["extends"]({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(resizerProps), resizerProps));
   var mouseDownHandler = function mouseDownHandler(evt) {
-    handleOnMouseDownResize(evt, resizerProps);
+    handleOnMouseDownResize === null || handleOnMouseDownResize === void 0 || handleOnMouseDownResize(evt, resizerProps);
   };
   var mouseUpHandler = function mouseUpHandler() {
-    stateReducer.handleColumnResizeEndEvent(dispatch, onColResizeEnd, header.id, true);
+    stateReducer.handleColumnResizeEndEvent(dispatch, onColResizeEnd, header === null || header === void 0 ? void 0 : header.id, true);
   };
   var keyDownHandler = function keyDownHandler(evt) {
     var key = evt.key;
     if (key === 'ArrowLeft' || key === 'ArrowRight') {
-      var originalColMinWidth = originalCol.minWidth || 90;
-      var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < originalColMinWidth ? originalColMinWidth : originalCol.width);
+      var originalColMinWidth = (originalCol === null || originalCol === void 0 ? void 0 : originalCol.minWidth) || 90;
+      var currentColumnWidth = (header === null || header === void 0 ? void 0 : header.id) && (columnWidths === null || columnWidths === void 0 ? void 0 : columnWidths[header === null || header === void 0 ? void 0 : header.id]) || (datagridState !== null && datagridState !== void 0 && datagridState.isTableSortable && Number(originalCol === null || originalCol === void 0 ? void 0 : originalCol.width) < originalColMinWidth ? originalColMinWidth : originalCol === null || originalCol === void 0 ? void 0 : originalCol.width);
       if (key === 'ArrowLeft') {
-        if (currentColumnWidth - incrementAmount > Math.max(minWidth, 50)) {
+        if (currentColumnWidth - incrementAmount > Math.max(Number(minWidth), 50)) {
           var newWidth = currentColumnWidth - incrementAmount;
           stateReducer.handleColumnResizingEvent(dispatch, header, newWidth, true);
         }
@@ -81,7 +78,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
     }
   };
   var keyUpHandler = function keyUpHandler() {
-    stateReducer.handleColumnResizeEndEvent(dispatch, onColResizeEnd, header.id, true);
+    stateReducer.handleColumnResizeEndEvent(dispatch, onColResizeEnd, header === null || header === void 0 ? void 0 : header.id, true);
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, headerProps, {
     onMouseDown: mouseDownHandler,
@@ -90,7 +87,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
     onKeyUp: keyUpHandler,
     className: "".concat(blockClass, "__col-resizer-range"),
     type: "range",
-    defaultValue: originalCol.width,
+    defaultValue: originalCol === null || originalCol === void 0 ? void 0 : originalCol.width,
     "aria-label": resizerAriaLabel || 'Resize column',
     disabled: isFetching
   })), /*#__PURE__*/React__default["default"].createElement("span", {
@@ -98,6 +95,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
   }));
 };
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
+  var _datagridState$header;
   var resizerAriaLabel = datagridState.resizerAriaLabel,
     isTableSortable = datagridState.isTableSortable,
     rows = datagridState.rows,
@@ -108,22 +106,27 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   React.useEffect(function () {
     var tableId = datagridState.tableId;
     var gridElement = document.querySelector("#".concat(tableId));
-    var tableElement = gridElement.querySelector('table');
+    var tableElement = gridElement === null || gridElement === void 0 ? void 0 : gridElement.querySelector('table');
     var headerRowElement = document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head"));
-    var hasHorizontalScrollbar = tableElement.scrollWidth > tableElement.clientWidth;
-    var scrollBuffer = hasHorizontalScrollbar ? 18 : 2;
-    var tableToolbar = gridElement.querySelector(".".concat(blockClass, "__table-toolbar"));
+    var scrollBuffer = 2;
+    if (tableElement) {
+      var hasHorizontalScrollbar = (tableElement === null || tableElement === void 0 ? void 0 : tableElement.scrollWidth) > (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientWidth);
+      if (hasHorizontalScrollbar) {
+        scrollBuffer = 18;
+      }
+    }
+    var tableToolbar = (gridElement === null || gridElement === void 0 ? void 0 : gridElement.querySelector(".".concat(blockClass, "__table-toolbar"))) || null;
     var tableToolbarHeight = (tableToolbar === null || tableToolbar === void 0 ? void 0 : tableToolbar.offsetHeight) || 0;
     var setCustomValues = function setCustomValues(_ref2) {
       var rowHeight = _ref2.rowHeight,
         gridHeight = _ref2.gridHeight;
-      headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), layout.px(rowHeight));
-      headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), layout.px(gridHeight - scrollBuffer - tableToolbarHeight));
-      headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), layout.px(headerRowElement.offsetHeight));
+      headerRowElement === null || headerRowElement === void 0 || headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), layout.px(rowHeight));
+      headerRowElement === null || headerRowElement === void 0 || headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), layout.px(gridHeight - scrollBuffer - tableToolbarHeight));
+      headerRowElement === null || headerRowElement === void 0 || headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), layout.px(headerRowElement.offsetHeight));
     };
     setCustomValues({
-      gridHeight: gridElement.offsetHeight,
-      rowHeight: headerRowElement.clientHeight
+      gridHeight: gridElement === null || gridElement === void 0 ? void 0 : gridElement.offsetHeight,
+      rowHeight: headerRowElement === null || headerRowElement === void 0 ? void 0 : headerRowElement.clientHeight
     });
   }, [datagridState.rowSize, datagridState.tableId, datagridState]);
   var _useState = React.useState(2),
@@ -131,7 +134,8 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     incrementAmount = _useState2[0];
   var handleOnMouseDownResize = function handleOnMouseDownResize(event, resizeProps) {
     var _resizeProps = _rollupPluginBabelHelpers.objectSpread2({}, resizeProps),
-      onMouseDown = _resizeProps.onMouseDown;
+      _resizeProps$onMouseD = _resizeProps.onMouseDown,
+      onMouseDown = _resizeProps$onMouseD === void 0 ? function () {} : _resizeProps$onMouseD;
     // When event.button is 2, that is a right click
     // and we do not want to resize
     if (event.button === 2 || event.ctrlKey) {
@@ -141,9 +145,8 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     onMouseDown === null || onMouseDown === void 0 || onMouseDown(event);
   };
   var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),
-    headerGroupClassName = _headerGroup$getHeade.className;
-    _headerGroup$getHeade.role;
-    var headerGroupProps = _rollupPluginBabelHelpers.objectWithoutProperties(_headerGroup$getHeade, _excluded2);
+    headerGroupClassName = _headerGroup$getHeade.className,
+    headerGroupProps = _rollupPluginBabelHelpers.objectWithoutProperties(_headerGroup$getHeade, _excluded);
   var renderSlug = function renderSlug(slug) {
     if (isTableSortable) {
       return;
@@ -156,16 +159,20 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     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);
   });
-  return /*#__PURE__*/React__default["default"].createElement(react.TableRow, _rollupPluginBabelHelpers["extends"]({}, headerGroupProps, {
+  var key = headerGroupProps.key,
+    rowProps = _rollupPluginBabelHelpers.objectWithoutProperties(headerGroupProps, _excluded2);
+  return /*#__PURE__*/React__default["default"].createElement(react.TableRow, _rollupPluginBabelHelpers["extends"]({
+    key: key
+  }, rowProps, {
     className: cx__default["default"]("".concat(blockClass, "__head"), headerGroupClassName),
     ref: headRef
   }), foundAIRow ? _th || (_th = /*#__PURE__*/React__default["default"].createElement("th", {
     scope: "col",
     "aria-hidden": "false"
-  })) : null, datagridState.headers.filter(function (_ref3) {
+  })) : null, datagridState === null || datagridState === void 0 || (_datagridState$header = datagridState.headers) === null || _datagridState$header === void 0 || (_datagridState$header = _datagridState$header.filter(function (_ref3) {
     var isVisible = _ref3.isVisible;
     return isVisible;
-  }).map(function (header, index) {
+  })) === null || _datagridState$header === void 0 ? void 0 : _datagridState$header.map(function (header, index) {
     var _header$getResizerPro;
     if (header.id === commonColumnIds.selectionColumnId) {
       // render directly without the wrapper TableHeader
@@ -183,12 +190,11 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     var _ref5 = columnResizing || {},
       columnWidths = _ref5.columnWidths;
     var originalCol = visibleColumns[index];
-    var _header$getHeaderProp = header.getHeaderProps();
-      _header$getHeaderProp.role;
-      var headerProps = _rollupPluginBabelHelpers.objectWithoutProperties(_header$getHeaderProp, _excluded3);
+    var _header$getHeaderProp = header.getHeaderProps(),
+      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);
     return /*#__PURE__*/React__default["default"].createElement(react.TableHeader, _rollupPluginBabelHelpers["extends"]({}, headerProps, {
-      className: cx__default["default"](header.className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default["default"].isValidElement(header.slug))),
+      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))),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
     }, getAccessibilityProps(header)), header.render('Header'), renderSlug(header.slug), resizerProps && !header.isAction && /*#__PURE__*/React__default["default"].createElement(ResizeHeader, {
@@ -215,6 +221,5 @@ var useHeaderRow = function useHeaderRow(hooks) {
   };
   hooks.useInstance.push(useInstance);
 };
-var useHeaderRow$1 = useHeaderRow;
 
-exports["default"] = useHeaderRow$1;
+exports["default"] = useHeaderRow;

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

@@ -1,2 +1,3 @@
+import { DataGridState } from '../types';
+declare const DatagridRefBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
 export default DatagridRefBody;
-declare function DatagridRefBody(datagridState: any): import("react/jsx-runtime").JSX.Element;

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

@@ -33,16 +33,16 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
     role: undefined
   }), {
     className: cx__default["default"]("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
-  }), rows.map(function (row) {
+  }), rows === null || rows === void 0 ? void 0 : rows.map(function (row) {
+    var _row$RowRenderer;
     prepareRow(row);
     var _row$getRowProps = row.getRowProps(),
       key = _row$getRowProps.key;
-    return row.RowRenderer(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, datagridState), {}, {
+    return 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,
       key: key
     }));
   }));
 };
-var DatagridRefBody$1 = DatagridRefBody;
 
-exports["default"] = DatagridRefBody$1;
+exports["default"] = DatagridRefBody;

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

@@ -1,2 +1,9 @@
+/**
+ * Copyright IBM Corp. 2020, 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 DatagridRow: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
 export default DatagridRow;
-declare function DatagridRow(datagridState: any): import("react/jsx-runtime").JSX.Element;

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

@@ -24,8 +24,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _SkeletonText;
-var _excluded = ["role", "className"],
-  _excluded2 = ["children", "role"];
+var _excluded = ["className"],
+  _excluded2 = ["children"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var rowHeights = {
   xs: 24,
@@ -67,7 +67,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       return;
     }
     var subRowCount = getVisibleNestedRowCount(row);
-    var totalNestedRowIndicatorHeight = layout.px(subRowCount * rowHeights[rowSize]);
+    var totalNestedRowIndicatorHeight = layout.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"));
@@ -94,7 +94,7 @@ var DatagridRow = function DatagridRow(datagridState) {
   };
   var handleMouseLeave = function handleMouseLeave(event) {
     if (withMouseHover) {
-      setMouseOverRowIndex(null);
+      setMouseOverRowIndex === null || setMouseOverRowIndex === void 0 || 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"));
@@ -116,11 +116,8 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
     return {};
   };
-
-  // eslint-disable-next-line no-unused-vars
-  var _row$getRowProps = row.getRowProps();
-    _row$getRowProps.role;
-    var className = _row$getRowProps.className,
+  var _row$getRowProps = row.getRowProps(),
+    className = _row$getRowProps.className,
     rowProps = _rollupPluginBabelHelpers.objectWithoutProperties(_row$getRowProps, _excluded);
   var foundAIRow = rows.some(function (r) {
     var _r$original;
@@ -147,9 +144,9 @@ var DatagridRow = function DatagridRow(datagridState) {
     var _cell$column, _cell$column2, _content$props, _associatedHeader$;
     var cellProps = cell.getCellProps();
     // eslint-disable-next-line no-unused-vars
-    var children = cellProps.children;
-      cellProps.role;
-      var restProps = _rollupPluginBabelHelpers.objectWithoutProperties(cellProps, _excluded2);
+    var _ref2 = cellProps,
+      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;
     var content = children || /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && (_SkeletonText || (_SkeletonText = /*#__PURE__*/React__default["default"].createElement(react.SkeletonText, null))));
     if ((cell === null || cell === void 0 || (_cell$column2 = cell.column) === null || _cell$column2 === void 0 ? void 0 : _cell$column2.id) === commonColumnIds.selectionColumnId) {
@@ -159,7 +156,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       });
     }
     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.filter(function (h) {
+    var associatedHeader = headers === null || headers === void 0 ? void 0 : headers.filter(function (h) {
       return h.id === cell.column.id;
     });
     return /*#__PURE__*/React__default["default"].createElement(react.TableCell, _rollupPluginBabelHelpers["extends"]({
@@ -168,8 +165,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       key: cell.column.id,
       title: title
     }), content);
-  })), renderExpandedRow());
+  })), (renderExpandedRow === null || renderExpandedRow === void 0 ? void 0 : renderExpandedRow()) || undefined);
 };
-var DatagridRow$1 = DatagridRow;
 
-exports["default"] = DatagridRow$1;
+exports["default"] = DatagridRow;

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

@@ -1 +1,9 @@
-export function SelectAll(datagridState: any): import("react/jsx-runtime").JSX.Element;
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * 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 SelectAll: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
+export { SelectAll };