@carbon/ibm-products 2.43.2-canary.19 → 2.43.2-canary.191

package/es/components/Datagrid/types/index.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 /// <reference path="../../../../src/custom-typings/index.d.ts" />
 import { MultiSelectProps } from '@carbon/react/lib/components/MultiSelect/MultiSelect';
 import { FormGroupProps } from '@carbon/react/lib/components/FormGroup/FormGroup';
@@ -6,7 +12,7 @@ import { RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonG
 import { CheckboxProps } from '@carbon/react/lib/components/Checkbox';
 import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
 import React, { CSSProperties, ComponentType, FunctionComponent, JSXElementConstructor, MutableRefObject, ReactNode, TouchEventHandler } from 'react';
-import { Cell, Column, ColumnInstance, FilterValue, Filters, HeaderGroup, Meta, Row, TableCommonProps, TableDispatch, TableInstance, TableToggleAllRowsSelectedProps, UseExpandedRowProps, UseFiltersInstanceProps, UsePaginationInstanceProps, UseResizeColumnsColumnProps, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseSortByColumnProps, UseSortByOptions, UseTableHooks } from 'react-table';
+import { Cell, Column, ColumnInstance, FilterValue, Filters, HeaderGroup, Meta, Row, TableCommonProps, TableDispatch, TableInstance, TableState, TableToggleAllRowsSelectedProps, UseExpandedRowProps, UseFiltersInstanceProps, UsePaginationInstanceProps, UseResizeColumnsColumnProps, UseResizeColumnsOptions, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseSortByColumnProps, UseSortByOptions, UseTableHooks } from 'react-table';
 import { CarbonIconType } from '@carbon/react/icons';
 import { IconButton, type ButtonProps } from '@carbon/react';
 import { TableBatchActionsProps } from '@carbon/react/lib/components/DataTable/TableBatchActions';
@@ -59,6 +65,18 @@ interface Labels {
     allPageRows?: object;
     allRows?: object;
 }
+interface ColumnLabels {
+    findColumnPlaceholderLabel?: string;
+    resetToDefaultLabel?: string;
+    customizeTearsheetHeadingLabel?: string;
+    primaryButtonTextLabel?: string;
+    secondaryButtonTextLabel?: string;
+    instructionsLabel?: string;
+    iconTooltipLabel?: string;
+    assistiveTextInstructionsLabel?: string;
+    assistiveTextDisabledInstructionsLabel?: string;
+    selectAllLabel?: string;
+}
 interface Section {
     categoryTitle?: string;
     filters?: DataGridFilter[];
@@ -85,7 +103,7 @@ export interface DataGridToggleAllRowsProps extends TableToggleAllRowsSelectedPr
 }
 export interface DatagridTableHooks<T extends object = any> extends UseTableHooks<T> {
 }
-export interface DatagridColumn<T extends object = any> extends ColumnInstance<T>, UseSortByOptions<T> {
+export interface DatagridColumn<T extends object = any> extends ColumnInstance<T>, UseSortByOptions<T>, Partial<UseResizeColumnsColumnProps<T>>, UseResizeColumnsOptions<T> {
     sticky?: 'left' | 'right';
     className?: string;
     rightAlignedColumn?: boolean;
@@ -102,6 +120,7 @@ export interface DatagridRow<T extends object = any> extends Omit<Row<T>, 'cells
     cells: Array<DataGridCell>;
     isSkeleton?: boolean;
     hasExpanded?: boolean;
+    skeletonKey?: string;
 }
 export interface DataGridHeader<T extends object = any> extends ColumnInstance, UseResizeColumnsColumnProps<T>, UseSortByColumnProps<T> {
     className(className: any, arg1: {
@@ -112,15 +131,21 @@ export interface DataGridHeader<T extends object = any> extends ColumnInstance,
 }
 export interface DataGridHeaderGroup<T extends object = any> extends HeaderGroup<T>, UseResizeColumnsColumnProps<T> {
 }
-export interface TableProps {
-    className?: string;
-    role?: string;
-    style?: CSSStyleDeclaration;
+export interface DataGridTableProps extends TableCommonProps {
 }
 interface DataGridTableState extends UseResizeColumnsState<any>, UseRowSelectState<any> {
     filters: Filters<DataGridFilter>;
 }
-export interface DataGridTableInstance<T extends object = any> extends TableInstance<T> {
+export interface DataGridTableInstance<T extends object = any> extends Omit<TableInstance<T>, 'state'>, Partial<UsePaginationInstanceProps<any>> {
+    shouldDisableSelectRow?: (...args: any[]) => void | boolean;
+    state?: Partial<TableState & UseRowSelectState<any>>;
+    disableSelectAll?: boolean;
+    disableSelectRowsProps?: {
+        labels?: {
+            toggleAllRowsLabel?: string;
+        };
+    };
+    withSelectRows?: boolean;
 }
 export interface RowAction {
     id?: string;
@@ -198,6 +223,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
     setGlobalFilter?: (filterValue: FilterValue) => void;
     batchActionMenuButtonLabel?: string;
     translateWithIdBatchActions?: TableBatchActionsProps['translateWithId'];
+    toolbarBatchActionsDisplayMin?: number;
     onScroll?: (evt?: any) => void;
     innerListRef?: MutableRefObject<HTMLDivElement>;
     tableHeight?: number;
@@ -210,10 +236,23 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
     expandedRowIds?: object;
     onRowClick?: (row: any, event: any) => void;
     onSort?: boolean;
+    customizeColumnsProps?: {
+        onSaveColumnPrefs?: (args: any) => void;
+        labels?: ColumnLabels;
+        isTearsheetOpen?: boolean;
+        setIsTearsheetOpen?: (args: boolean) => void;
+    };
+    CustomizeColumnsButton?: (args: any) => ReactNode;
     column?: DatagridColumn;
     expandedContentHeight?: number;
     onRowExpand?: (row: DatagridRow, event: React.MouseEvent<HTMLElement>) => void;
     ExpandedRowContentComponent?: JSXElementConstructor<any>;
+    getAsyncSubRows?: (row: DatagridRow) => void;
+}
+export interface DataGridData {
+    instance?: DataGridTableInstance;
+    column?: DatagridColumn;
+    cell?: DataGridCell;
 }
 export interface ResizeHeaderProps {
     resizerProps?: ResizerProps;
@@ -231,4 +270,8 @@ export interface ResizeHeaderProps {
 }
 export type VisibleColumns<T extends object = {}> = (allColumns: Array<ColumnInstance<T>>, meta: Meta<T>) => Array<Column<T>>;
 export type NodeFuncType = (props: any) => ReactNode;
+export interface PropGetterMeta {
+    instance?: DataGridTableInstance;
+    row?: Partial<Row<any> & DatagridRow<any>>;
+}
 export {};

package/es/components/Datagrid/useActionsColumn.js

@@ -43,10 +43,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
             }, isFetching && /*#__PURE__*/React__default.createElement(IconSkeleton, {
               className: "".concat(blockClass, "__actions-column-loading")
             }), !isFetching && rowActions.length <= 2 && !isColumnSticky && /*#__PURE__*/React__default.createElement("div", {
-              className: "".concat(blockClass, "_actions-column"),
-              style: {
-                display: 'flex'
-              }
+              className: "".concat(blockClass, "_actions-column")
             }, rowActions.map(function (action, index) {
               var preparedActionProps = prepareProps(action, ['isDelete']);
               var align = preparedActionProps.align,

package/es/components/Datagrid/useCustomizeColumns.d.ts

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

package/es/components/Datagrid/useCustomizeColumns.js

@@ -16,9 +16,10 @@ var useCustomizeColumns = function useCustomizeColumns(hooks) {
     isTearsheetOpen = _React$useState2[0],
     setIsTearsheetOpen = _React$useState2[1];
   hooks.useInstance.push(function (instance) {
-    var customizeColumnsProps = instance.customizeColumnsProps;
-    var _ref = customizeColumnsProps || {},
-      labels = _ref.labels;
+    var _ref = instance,
+      customizeColumnsProps = _ref.customizeColumnsProps;
+    var _ref2 = customizeColumnsProps || {},
+      labels = _ref2.labels;
     Object.assign(instance, {
       customizeColumnsProps: _objectSpread2(_objectSpread2({}, customizeColumnsProps), {}, {
         isTearsheetOpen: isTearsheetOpen,

package/es/components/Datagrid/useDatagrid.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 import { TableInstance } from 'react-table';
 declare const useDatagrid: (params: any, ...plugins: any[]) => TableInstance;
 export default useDatagrid;

package/es/components/Datagrid/useDefaultStringRenderer.js

@@ -21,7 +21,6 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
   var HeaderRenderer = function HeaderRenderer(header, slug) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: cx("".concat(blockClass, "__defaultStringRenderer"), _defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--slug"), slug && /*#__PURE__*/React__default.isValidElement(slug))),
-      title: typeof header === 'string' ? header : '',
       key: typeof header === 'string' ? header : ''
     }, header);
   };

package/es/components/Datagrid/useDisableSelectRows.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 { Hooks } from 'react-table';
+declare const useDisableSelectRows: (hooks: Hooks) => void;
 export default useDisableSelectRows;
-declare function useDisableSelectRows(hooks: any): void;

package/es/components/Datagrid/useDisableSelectRows.js

@@ -9,52 +9,56 @@ var useDisableSelectRows = function useDisableSelectRows(hooks) {
   updateSelectAll(hooks);
   updatePageSelectAll(hooks);
   var getRowProps = function getRowProps(props, _ref) {
+    var _instance$shouldDisab;
     var row = _ref.row,
       instance = _ref.instance;
     return [props, {
-      disabled: instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row)
+      disabled: instance === null || instance === void 0 || (_instance$shouldDisab = instance.shouldDisableSelectRow) === null || _instance$shouldDisab === void 0 ? void 0 : _instance$shouldDisab.call(instance, row)
     }];
   };
   hooks.getRowProps.push(getRowProps);
 };
 var updateSelectAll = function updateSelectAll(hooks) {
   var getToggleAllRowsSelectedProps = function getToggleAllRowsSelectedProps(props, _ref2) {
-    var _instance$disableSele;
+    var _instance$rows, _instance$disableSele, _instance$state2;
     var instance = _ref2.instance;
-    var selectableRows = instance.rows.filter(function (row) {
+    var selectableRows = (instance === null || instance === void 0 || (_instance$rows = instance.rows) === null || _instance$rows === void 0 ? void 0 : _instance$rows.filter(function (row) {
       return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
-    });
-    var isAllRowsSelected = selectableRows.length > 0 && selectableRows.every(function (_ref3) {
+    })) || [];
+    var isAllRowsSelected = (selectableRows === null || selectableRows === void 0 ? void 0 : selectableRows.length) > 0 && selectableRows.every(function (_ref3) {
+      var _instance$state;
       var id = _ref3.id;
-      return instance.state.selectedRowIds[id];
+      return instance === null || instance === void 0 || (_instance$state = instance.state) === null || _instance$state === void 0 || (_instance$state = _instance$state.selectedRowIds) === null || _instance$state === void 0 ? void 0 : _instance$state[id];
     });
     return [props, {
       onChange: function onChange(e) {
         selectableRows.forEach(function (row) {
-          return row.toggleRowSelected(e.target.checked);
+          var _toggleRowSelected, _ref4;
+          return row === null || row === void 0 || (_toggleRowSelected = (_ref4 = row).toggleRowSelected) === null || _toggleRowSelected === void 0 ? void 0 : _toggleRowSelected.call(_ref4, e.target.checked);
         });
       },
       style: {
         cursor: 'pointer'
       },
       checked: isAllRowsSelected,
-      disabled: instance.disableSelectAll,
+      disabled: instance === null || instance === void 0 ? void 0 : instance.disableSelectAll,
       title: (instance === null || instance === void 0 || (_instance$disableSele = instance.disableSelectRowsProps) === null || _instance$disableSele === void 0 || (_instance$disableSele = _instance$disableSele.labels) === null || _instance$disableSele === void 0 ? void 0 : _instance$disableSele.toggleAllRowsLabel) || 'Toggle All Rows Selected',
-      indeterminate: Boolean(!isAllRowsSelected && Object.keys(instance.state.selectedRowIds).length)
+      indeterminate: Boolean(!isAllRowsSelected && Object.keys((instance === null || instance === void 0 || (_instance$state2 = instance.state) === null || _instance$state2 === void 0 ? void 0 : _instance$state2.selectedRowIds) || {}).length)
     }];
   };
   hooks.getToggleAllRowsSelectedProps.push(getToggleAllRowsSelectedProps);
 };
 var updatePageSelectAll = function updatePageSelectAll(hooks) {
-  var getToggleAllPageRowsSelectedProps = function getToggleAllPageRowsSelectedProps(props, _ref4) {
-    var _instance$disableSele2;
-    var instance = _ref4.instance;
-    var selectableRows = instance.page.filter(function (row) {
+  var getToggleAllPageRowsSelectedProps = function getToggleAllPageRowsSelectedProps(props, _ref5) {
+    var _instance$page, _instance$disableSele2, _instance$page2;
+    var instance = _ref5.instance;
+    var selectableRows = (instance === null || instance === void 0 || (_instance$page = instance.page) === null || _instance$page === void 0 ? void 0 : _instance$page.filter(function (row) {
       return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
-    });
-    var isAllRowsSelected = selectableRows.length > 0 && selectableRows.every(function (_ref5) {
-      var id = _ref5.id;
-      return instance.state.selectedRowIds[id];
+    })) || [];
+    var isAllRowsSelected = (selectableRows === null || selectableRows === void 0 ? void 0 : selectableRows.length) > 0 && selectableRows.every(function (_ref6) {
+      var _instance$state3;
+      var id = _ref6.id;
+      return instance === null || instance === void 0 || (_instance$state3 = instance.state) === null || _instance$state3 === void 0 || (_instance$state3 = _instance$state3.selectedRowIds) === null || _instance$state3 === void 0 ? void 0 : _instance$state3[id];
     });
     return [props, {
       onChange: function onChange(e) {
@@ -66,12 +70,13 @@ var updatePageSelectAll = function updatePageSelectAll(hooks) {
         cursor: 'pointer'
       },
       checked: isAllRowsSelected,
-      disabled: instance.disableSelectAll,
+      disabled: instance === null || instance === void 0 ? void 0 : instance.disableSelectAll,
       title: (instance === null || instance === void 0 || (_instance$disableSele2 = instance.disableSelectRowsProps) === null || _instance$disableSele2 === void 0 || (_instance$disableSele2 = _instance$disableSele2.labels) === null || _instance$disableSele2 === void 0 ? void 0 : _instance$disableSele2.toggleAllRowsLabel) || 'Toggle All Rows Selected',
-      indeterminate: Boolean(!isAllRowsSelected && instance.page.some(function (_ref6) {
-        var id = _ref6.id;
-        return instance.state.selectedRowIds[id];
-      }))
+      indeterminate: Boolean(!isAllRowsSelected && (instance === null || instance === void 0 || (_instance$page2 = instance.page) === null || _instance$page2 === void 0 ? void 0 : _instance$page2.some(function (_ref7) {
+        var _instance$state4;
+        var id = _ref7.id;
+        return instance === null || instance === void 0 || (_instance$state4 = instance.state) === null || _instance$state4 === void 0 || (_instance$state4 = _instance$state4.selectedRowIds) === null || _instance$state4 === void 0 ? void 0 : _instance$state4[id];
+      })))
     }];
   };
   hooks.getToggleAllPageRowsSelectedProps.push(getToggleAllPageRowsSelectedProps);

package/es/components/Datagrid/useFiltering.d.ts

@@ -5,5 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { Hooks } from 'react-table';
+export declare const exactText: (rows: any, ids: any, filterValue: any) => any;
 declare const useFiltering: (hooks: Hooks) => void;
 export default useFiltering;

package/es/components/Datagrid/useFiltering.js

@@ -7,9 +7,18 @@
 
 import { defineProperty as _defineProperty, slicedToArray as _slicedToArray, typeof as _typeof, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useMemo } from 'react';
-import { DATE, NUMBER, CHECKBOX, BATCH, MULTISELECT } from './Datagrid/addons/Filtering/constants.js';
+import { RADIO, DATE, NUMBER, CHECKBOX, MULTISELECT, BATCH } from './Datagrid/addons/Filtering/constants.js';
 import FilterFlyout from './Datagrid/addons/Filtering/FilterFlyout.js';
 
+// This function was taken from https://github.com/TanStack/table/blob/v7/src/filterTypes.js
+var exactText = function exactText(rows, ids, filterValue) {
+  return rows.filter(function (row) {
+    return ids.some(function (id) {
+      var rowValue = row.values[id];
+      return rowValue !== undefined ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase() : true;
+    });
+  });
+};
 var handleMultiFilter = function handleMultiFilter(rows, id, value) {
   // gets all the items that are selected and returns their value
   var selectedItems = value.filter(function (item) {
@@ -30,7 +39,7 @@ var handleMultiFilter = function handleMultiFilter(rows, id, value) {
 var useFiltering = function useFiltering(hooks) {
   /* istanbul ignore next */
   var filterTypes = useMemo(function () {
-    return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, DATE, function (rows, id, _ref) {
+    return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, DATE, function (rows, id, _ref) {
       var _ref2 = _slicedToArray(_ref, 2),
         startDate = _ref2[0],
         endDate = _ref2[1];
@@ -60,6 +69,8 @@ var useFiltering = function useFiltering(hooks) {
       return handleMultiFilter(rows, id, value);
     }), MULTISELECT, function (rows, id, value) {
       return handleMultiFilter(rows, id, value);
+    }), RADIO, function (rows, id, value) {
+      return exactText(rows, id, value);
     });
   }, []);
   hooks.useInstance.push(function (instance) {
@@ -94,4 +105,4 @@ var useFiltering = function useFiltering(hooks) {
 };
 var useFiltering$1 = useFiltering;
 
-export { useFiltering$1 as default };
+export { useFiltering$1 as default, exactText };

package/es/components/Datagrid/useInitialColumnSort.js

@@ -29,6 +29,10 @@ var useInitialColumnSort = function useInitialColumnSort(instance) {
     if (sortableColumn) {
       var columnId = sortableColumn.id,
         order = sortableColumn.order;
+      // prevents edge case where initial sort state of none actually starts out as ascending
+      if (order !== 'ASC' && order !== 'DESC') {
+        return;
+      }
       var _getNewSortOrder = getNewSortOrder(order),
         newSortDesc = _getNewSortOrder.newSortDesc,
         newOrder = _getNewSortOrder.newOrder;

package/es/components/Datagrid/useInlineEdit.js

@@ -40,7 +40,7 @@ var useInlineEdit = function useInlineEdit(hooks) {
     return [props, {
       className: cx("".concat(blockClass, "__cell"), "".concat(blockClass, "__cell-inline-edit")),
       role: 'gridcell',
-      children: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !staticCell && inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), staticCell && /*#__PURE__*/React__default.createElement(InlineEditCell, {
+      children: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !staticCell && inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), inlineEditType === 'checkbox' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), staticCell && /*#__PURE__*/React__default.createElement(InlineEditCell, {
         config: columnInlineEditConfig,
         tabIndex: -1,
         value: (_cell$value3 = cell.value) === null || _cell$value3 === void 0 ? void 0 : _cell$value3.value,

package/es/components/Datagrid/useNestedRowExpander.js

@@ -5,12 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef } from 'react';
 import { ChevronRight } from '@carbon/react/icons';
 import cx from 'classnames';
 import { pkg, carbon } from '../../settings.js';
 import { useFocusRowExpander } from './useFocusRowExpander.js';
+import { handleDynamicRowCheck } from './Datagrid/addons/stateReducer.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useNestedRowExpander = function useNestedRowExpander(hooks) {
@@ -25,32 +26,78 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
     blockClass: blockClass,
     activeElement: typeof document !== 'undefined' && document.activeElement
   });
-  var visibleColumns = function visibleColumns(columns) {
+  var visibleColumns = function visibleColumns(columns, state) {
+    var _ref = state.instance || {},
+      getAsyncSubRows = _ref.getAsyncSubRows,
+      dispatch = _ref.dispatch,
+      tableState = _ref.state;
+    var fetchingDynamicSubRows = !!tableState.dynamicRowSkeleton;
     var expanderColumn = {
       id: 'expander',
-      Cell: function Cell(_ref) {
-        var row = _ref.row;
+      Cell: function Cell(_ref2) {
+        var row = _ref2.row;
         var expanderButtonProps = _objectSpread2(_objectSpread2({}, row.getToggleRowExpandedProps()), {}, {
-          onClick: function onClick(event) {
-            // Prevents `onRowClick` from being called if `useOnRowClick` is included
-            event.stopPropagation();
-            row.toggleRowExpanded();
-            lastExpandedRowIndex.current = row.id;
-          }
+          disabled: getAsyncSubRows && fetchingDynamicSubRows,
+          onClick: function () {
+            var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    // Prevents `onRowClick` from being called if `useOnRowClick` is included
+                    event.stopPropagation();
+                    row.toggleRowExpanded();
+                    lastExpandedRowIndex.current = row.id;
+                    if (row.isExpanded) {
+                      _context.next = 14;
+                      break;
+                    }
+                    _context.prev = 4;
+                    handleDynamicRowCheck({
+                      dispatch: dispatch,
+                      status: 'start',
+                      rowId: row.id,
+                      depth: row.depth,
+                      index: row.index
+                    });
+                    _context.next = 8;
+                    return getAsyncSubRows === null || getAsyncSubRows === void 0 ? void 0 : getAsyncSubRows(row);
+                  case 8:
+                    handleDynamicRowCheck({
+                      dispatch: dispatch,
+                      status: 'finish',
+                      rowId: row.id
+                    });
+                    _context.next = 14;
+                    break;
+                  case 11:
+                    _context.prev = 11;
+                    _context.t0 = _context["catch"](4);
+                    console.log({
+                      error: _context.t0
+                    });
+                  case 14:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee, null, [[4, 11]]);
+            }));
+            function onClick(_x) {
+              return _onClick.apply(this, arguments);
+            }
+            return onClick;
+          }()
         });
-        var _ref2 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
-          _ref2$expanderButtonT = _ref2.expanderButtonTitleExpanded,
-          expanderButtonTitleExpanded = _ref2$expanderButtonT === void 0 ? 'Collapse row' : _ref2$expanderButtonT,
-          _ref2$expanderButtonT2 = _ref2.expanderButtonTitleCollapsed,
-          expanderButtonTitleCollapsed = _ref2$expanderButtonT2 === void 0 ? 'Expand row' : _ref2$expanderButtonT2;
+        var _ref3 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
+          _ref3$expanderButtonT = _ref3.expanderButtonTitleExpanded,
+          expanderButtonTitleExpanded = _ref3$expanderButtonT === void 0 ? 'Collapse row' : _ref3$expanderButtonT,
+          _ref3$expanderButtonT2 = _ref3.expanderButtonTitleCollapsed,
+          expanderButtonTitleCollapsed = _ref3$expanderButtonT2 === void 0 ? 'Expand row' : _ref3$expanderButtonT2;
         var expanderTitle = row.isExpanded ? expanderButtonTitleExpanded : expanderButtonTitleCollapsed;
-        return row.canExpand && /*#__PURE__*/React__default.createElement("button", _extends({
+        return (row.canExpand || getAsyncSubRows) && /*#__PURE__*/React__default.createElement("button", _extends({
           type: "button",
           "aria-label": expanderTitle,
           className: cx("".concat(blockClass, "__row-expander"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--ghost"))
-        }, expanderButtonProps, {
-          title: expanderTitle
-        }), /*#__PURE__*/React__default.createElement(ChevronRight, {
+        }, expanderButtonProps), /*#__PURE__*/React__default.createElement(ChevronRight, {
           className: cx("".concat(blockClass, "__expander-icon"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), "".concat(blockClass, "__expander-icon--open"), row.isExpanded))
         }));
       },

package/es/components/Datagrid/useNestedRows.js

@@ -41,12 +41,13 @@ var useNestedRows = function useNestedRows(hooks) {
         expandedRowIds = _ref2.expandedRowIds;
       if (expandedRowIds) {
         Object.keys(expandedRowIds).forEach(function (key) {
+          var _row$0$original;
           var row = rows.filter(function (r) {
-            return r.id.toString() === key.toString();
+            var _r$original;
+            return r.id.toString() === key.toString() || ((_r$original = r.original) === null || _r$original === void 0 || (_r$original = _r$original.id) === null || _r$original === void 0 ? void 0 : _r$original.toString()) === key.toString();
           });
-          if (row !== null && row !== void 0 && row.length && key.toString() === row[0].id.toString()) {
-            var _row$;
-            (_row$ = row[0]) === null || _row$ === void 0 || _row$.toggleRowExpanded();
+          if (row.length && key.toString() === row[0].id.toString() || row.length && key.toString() === ((_row$0$original = row[0].original) === null || _row$0$original === void 0 || (_row$0$original = _row$0$original.id) === null || _row$0$original === void 0 ? void 0 : _row$0$original.toString())) {
+            row[0].toggleRowExpanded();
           }
         });
       }

package/es/components/Datagrid/useRowExpander.js

@@ -50,9 +50,7 @@ var useRowExpander = function useRowExpander(hooks) {
           type: "button",
           "aria-label": expanderTitle,
           className: cx("".concat(blockClass, "__row-expander"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--ghost"))
-        }, expanderButtonProps, {
-          title: expanderTitle
-        }), row.isExpanded ? /*#__PURE__*/React__default.createElement(ChevronUp, {
+        }, expanderButtonProps), row.isExpanded ? /*#__PURE__*/React__default.createElement(ChevronUp, {
           className: "".concat(blockClass, "__row-expander--icon")
         }) : /*#__PURE__*/React__default.createElement(ChevronDown, {
           className: "".concat(blockClass, "__row-expander--icon")

package/es/components/Datagrid/useRowIsMouseOver.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 import { Hooks } from 'react-table';
 declare const useRowIsMouseOver: (hooks: Hooks) => void;
 export default useRowIsMouseOver;

package/es/components/Datagrid/useRowRenderer.js

@@ -5,18 +5,60 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import DatagridRow from './Datagrid/DatagridRow.js';
 
 var useRowRenderer = function useRowRenderer(hooks) {
   var useInstance = function useInstance(instance) {
-    var rows = instance.rows;
+    var _newRows;
+    var rows = instance.rows,
+      state = instance.state;
+    var newRows = null;
+    if (state !== null && state !== void 0 && state.dynamicRowSkeleton) {
+      var _state$dynamicRowSkel;
+      var depthIndexArray = state === null || state === void 0 || (_state$dynamicRowSkel = state.dynamicRowSkeleton) === null || _state$dynamicRowSkel === void 0 ? void 0 : _state$dynamicRowSkel.id.split('').filter(function (r) {
+        return r !== '.';
+      });
+      if (depthIndexArray.length > 1) {
+        var subRows;
+        var finalRow;
+        // This will find the subRow that requested to find dynamic rows
+        // and will apply the skeleton row after that row
+        depthIndexArray.map(function (depthIndex, index) {
+          if (index === 0) {
+            subRows = rows[depthIndex].subRows;
+            return;
+          }
+          if (depthIndexArray.length - 1 === index) {
+            finalRow = subRows.find(function (r) {
+              return r.index === parseInt(depthIndex);
+            });
+            subRows.splice(finalRow.index + 1, 0, state === null || state === void 0 ? void 0 : state.dynamicRowSkeleton); // + 1 because we want to add the skeleton row after the row initiating the dynamic request
+            return;
+          }
+          var foundRow = subRows.find(function (r) {
+            return r.index === parseInt(depthIndex);
+          });
+          subRows = foundRow.subRows;
+        });
+      }
+      var rootRowIndexWithDynamicRow = rows.findIndex(function (r) {
+        var _state$dynamicRowSkel2;
+        return r.id === (state === null || state === void 0 || (_state$dynamicRowSkel2 = state.dynamicRowSkeleton) === null || _state$dynamicRowSkel2 === void 0 ? void 0 : _state$dynamicRowSkel2.id);
+      });
+      if (rootRowIndexWithDynamicRow > -1) {
+        newRows = [].concat(_toConsumableArray(rows.slice(0, rootRowIndexWithDynamicRow + 1)), [// + 1 because we want to add the skeleton row after the row initiating the dynamic request
+        state === null || state === void 0 ? void 0 : state.dynamicRowSkeleton], _toConsumableArray(rows.slice(rootRowIndexWithDynamicRow + 1)));
+      }
+    }
+    newRows = (_newRows = newRows) !== null && _newRows !== void 0 ? _newRows : rows;
     var addRowRenderer = function addRowRenderer(row) {
       return Object.assign(row, {
         RowRenderer: DatagridRow,
         subRows: (row.subRows || []).map(addRowRenderer)
       });
     };
-    var rowsWithRenderer = rows.map(addRowRenderer);
+    var rowsWithRenderer = newRows.map(addRowRenderer);
     Object.assign(instance, {
       rows: rowsWithRenderer
     });

package/es/components/Datagrid/useSelectRows.js

@@ -81,11 +81,12 @@ var SelectRow = function SelectRow(datagridState) {
     withStickyColumn = datagridState.withStickyColumn,
     dispatch = datagridState.dispatch,
     getRowId = datagridState.getRowId;
-  var _useState = useState(typeof window !== 'undefined' ? window.innerWidth : ''),
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }

package/es/components/Datagrid/useSortableColumns.d.ts

@@ -5,9 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { Hooks } from 'react-table';
-export declare const getNewSortOrder: (sortOrder?: boolean | string) => {
-    newSortDesc: boolean;
-    newOrder: string;
-};
+interface Order {
+    newOrder: 'ASC' | 'DESC' | 'NONE';
+    newSortDesc: undefined | boolean;
+}
+export declare const getNewSortOrder: (currentOrder?: boolean | string) => Order;
 declare const useSortableColumns: (hooks: Hooks) => void;
 export default useSortableColumns;