@carbon/ibm-products 2.47.0 → 2.48.0

package/lib/components/CreateTearsheet/index.d.ts

@@ -1,3 +1,10 @@
-export { CreateTearsheet } from "./CreateTearsheet";
-export { CreateTearsheetStep } from "./CreateTearsheetStep";
-export { CreateTearsheetDivider } from "./CreateTearsheetDivider";
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { CreateTearsheet } from './CreateTearsheet';
+export { CreateTearsheetStep } from './CreateTearsheetStep';
+export { CreateTearsheetDivider } from './CreateTearsheetDivider';
+export type { CreateTearsheetProps } from './CreateTearsheet';

package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { PropsWithChildren, ReactNode } from 'react';
 type VerticalPosition = 'normal' | 'lower';
-interface CreateTearsheetNarrowProps extends PropsWithChildren {
+export interface CreateTearsheetNarrowProps extends PropsWithChildren {
     /**
      * Provide the contents of the CreateTearsheetNarrow.
      */

package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -11,12 +11,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+var react = require('@carbon/react');
 var index = require('../../node_modules/prop-types/index.js');
+var TearsheetNarrow = require('../Tearsheet/TearsheetNarrow.js');
 var cx = require('classnames');
-var react = require('@carbon/react');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
-var TearsheetNarrow = require('../Tearsheet/TearsheetNarrow.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/lib/components/CreateTearsheetNarrow/index.d.ts

@@ -1 +1,8 @@
-export { CreateTearsheetNarrow } from "./CreateTearsheetNarrow";
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { CreateTearsheetNarrow } from './CreateTearsheetNarrow';
+export type { CreateTearsheetNarrowProps } from './CreateTearsheetNarrow';

package/lib/components/DataSpreadsheet/DataSpreadsheet.d.ts

@@ -4,10 +4,10 @@
  * 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 React from 'react';
-import { Column } from 'react-table';
 import { Size, Theme } from './types';
-interface DataSpreadsheetProps {
+import { Column } from 'react-table';
+import React from 'react';
+export interface DataSpreadsheetProps {
     /**
      * Specifies the cell height
      */
@@ -94,4 +94,3 @@ interface DataSpreadsheetProps {
  * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
  */
 export declare let DataSpreadsheet: React.ForwardRefExoticComponent<DataSpreadsheetProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -10,24 +10,24 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
 var reactTable = require('react-table');
-var index = require('../../node_modules/prop-types/index.js');
-var cx = require('classnames');
-var settings = require('../../settings.js');
+var React = require('react');
 var DataSpreadsheetBody = require('./DataSpreadsheetBody.js');
 var DataSpreadsheetHeader = require('./DataSpreadsheetHeader.js');
-var devtools = require('../../global/js/utils/devtools.js');
-var getScrollbarWidth = require('../../global/js/utils/getScrollbarWidth.js');
-var uuidv4 = require('../../global/js/utils/uuidv4.js');
-var deepCloneObject = require('../../global/js/utils/deepCloneObject.js');
+var index = require('../../node_modules/prop-types/index.js');
 var createActiveCellFn = require('./utils/createActiveCellFn.js');
+var cx = require('classnames');
+var deepCloneObject = require('../../global/js/utils/deepCloneObject.js');
 var getCellSize = require('./utils/getCellSize.js');
+var devtools = require('../../global/js/utils/devtools.js');
+var getScrollbarWidth = require('../../global/js/utils/getScrollbarWidth.js');
+var handleEditSubmit = require('./utils/handleEditSubmit.js');
 var handleHeaderCellSelection = require('./utils/handleHeaderCellSelection.js');
+var commonEventHandlers = require('./utils/commonEventHandlers.js');
+var settings = require('../../settings.js');
 var removeCellSelections = require('./utils/removeCellSelections.js');
 var selectAllCells = require('./utils/selectAllCells.js');
-var handleEditSubmit = require('./utils/handleEditSubmit.js');
-var commonEventHandlers = require('./utils/commonEventHandlers.js');
+var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var useActiveElement = require('../../global/js/hooks/useActiveElement.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useMultipleKeyTracking = require('./hooks/useMultipleKeyTracking.js');
@@ -42,6 +42,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "onColDrag", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
+
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
 var componentName = 'DataSpreadsheet';

package/lib/components/DataSpreadsheet/index.d.ts

@@ -1 +1,8 @@
-export { DataSpreadsheet } from "./DataSpreadsheet";
+/**
+ * Copyright IBM Corp. 2022, 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.
+ */
+export { DataSpreadsheet } from './DataSpreadsheet';
+export type { DataSpreadsheetProps } from './DataSpreadsheet';

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

@@ -18,6 +18,7 @@ var constants = require('./addons/Filtering/constants.js');
 var DatagridBody = require('./DatagridBody.js');
 var DatagridHead = require('./DatagridHead.js');
 var DatagridToolbar = require('./DatagridToolbar.js');
+var FilterSummary = require('../../FilterSummary/FilterSummary.js');
 var index = require('../../../node_modules/prop-types/index.js');
 var cx = require('classnames');
 var handleGridFocus = require('./addons/InlineEdit/handleGridFocus.js');
@@ -30,7 +31,6 @@ var useClickOutside = require('../../../global/js/hooks/useClickOutside.js');
 var useMultipleKeyTracking = require('../../DataSpreadsheet/hooks/useMultipleKeyTracking.js');
 var useSubscribeToEventEmitter = require('./addons/Filtering/hooks/useSubscribeToEventEmitter.js');
 var FilterPanel = require('./addons/Filtering/FilterPanel.js');
-var FilterSummary = require('../../FilterSummary/FilterSummary.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -49,7 +49,8 @@ var DatagridRow = function DatagridRow(datagridState) {
     withMouseHover = datagridState.withMouseHover,
     setMouseOverRowIndex = datagridState.setMouseOverRowIndex,
     headers = datagridState.headers,
-    visibleColumns = datagridState.visibleColumns;
+    visibleColumns = datagridState.visibleColumns,
+    getAsyncSubRows = datagridState.getAsyncSubRows;
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -126,15 +127,16 @@ var DatagridRow = function DatagridRow(datagridState) {
     var _r$original;
     return /*#__PURE__*/React.isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.slug);
   });
-  var rowClassNames = cx__default["default"]("".concat(blockClass, "__carbon-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(settings.carbon.prefix, "--data-table--selected"), row.isSelected), "".concat(blockClass, "__slug--row"), /*#__PURE__*/React.isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug)));
+  var rowClassNames = cx__default["default"]("".concat(blockClass, "__carbon-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(blockClass, "__carbon-row-expandable--async"), getAsyncSubRows && row.depth > 0), "".concat(settings.carbon.prefix, "--data-table--selected"), row.isSelected), "".concat(blockClass, "__slug--row"), /*#__PURE__*/React.isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug)));
   var withActionsColumn = headers ? !!headers.filter(function (header) {
     return header.isAction;
   }).length : false;
+  var rowKey = !row.isSkeleton ? key : row.skeletonKey;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
-    key: key
+    key: "".concat(rowKey, "__").concat(key, "__row--fragment")
   }, /*#__PURE__*/React__default["default"].createElement(react.TableRow, _rollupPluginBabelHelpers["extends"]({}, rowProps, {
     className: cx__default["default"](rowClassNames, className),
-    key: row.id,
+    key: rowKey,
     onMouseEnter: hoverHandler,
     onMouseLeave: handleMouseLeave,
     onFocus: hoverHandler,
@@ -173,7 +175,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       style.flex = lastVisibleFlexStyle;
     }
     return /*#__PURE__*/React__default["default"].createElement(react.TableCell, _rollupPluginBabelHelpers["extends"]({
-      className: cx__default["default"]("".concat(blockClass, "__cell"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/React.isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), columnClassname)
+      className: cx__default["default"]("".concat(blockClass, "__cell"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), (row.canExpand || getAsyncSubRows) && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/React.isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), columnClassname)
     }, restProps, {
       style: style,
       key: cell.column.id

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

@@ -12,10 +12,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../../../../node_modules/prop-types/index.js');
+require('../../../../Tearsheet/Tearsheet.js');
+var TearsheetNarrow = require('../../../../Tearsheet/TearsheetNarrow.js');
 var Columns = require('./Columns.js');
 var Actions = require('./Actions.js');
 var settings = require('../../../../../settings.js');
-var TearsheetNarrow = require('../../../../Tearsheet/TearsheetNarrow.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -169,10 +169,10 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     strategy: sortable.verticalListSortingStrategy
   }, visibleCols.map(function (colDef) {
     var colHeaderTitle = getNodeTextContent.getNodeTextContent(colDef.Header);
-    var searchString = new RegExp('(' + filterString + ')');
-    var res = filterString.length ? colHeaderTitle.toLowerCase().split(searchString) : null;
-    var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
-    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colHeaderTitle;
+    var parts = colHeaderTitle.split(new RegExp("(".concat(filterString, ")"), 'gi'));
+    var highlightedText = parts.map(function (part) {
+      return part.toLowerCase() === filterString.toLowerCase() ? "<strong>".concat(part, "</strong>") : part;
+    }).join('');
     var isFrozenColumn = !!colDef.sticky;
     var isDisabled = colDef.disabled;
     var listContents = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.Checkbox, {

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.d.ts

@@ -1,7 +1,8 @@
 export default FilterFlyout;
-declare function FilterFlyout({ updateMethod, flyoutIconDescription, filters, title, primaryActionLabel, onFlyoutOpen, onFlyoutClose, onApply, onCancel, secondaryActionLabel, setAllFilters, data, reactTableFiltersState, }: {
+declare function FilterFlyout({ updateMethod, flyoutIconDescription, align, filters, title, primaryActionLabel, onFlyoutOpen, onFlyoutClose, onApply, onCancel, secondaryActionLabel, setAllFilters, data, reactTableFiltersState, }: {
     updateMethod: any;
     flyoutIconDescription?: string | undefined;
+    align?: string | undefined;
     filters?: any[] | undefined;
     title?: string | undefined;
     primaryActionLabel?: string | undefined;
@@ -16,6 +17,7 @@ declare function FilterFlyout({ updateMethod, flyoutIconDescription, filters, ti
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace FilterFlyout {
     namespace propTypes {
+        let align: PropTypes.Requireable<string>;
         let data: PropTypes.Validator<any[]>;
         let filters: PropTypes.Validator<(PropTypes.InferProps<{
             type: PropTypes.Validator<string>;

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js

@@ -14,6 +14,7 @@ var constants = require('./constants.js');
 var react = require('@carbon/react');
 var React = require('react');
 var layout = require('@carbon/layout');
+var ActionSet = require('../../../../ActionSet/ActionSet.js');
 var icons = require('@carbon/react/icons');
 var index = require('../../../../../node_modules/prop-types/index.js');
 var cx = require('classnames');
@@ -23,7 +24,6 @@ var useShouldDisableButtons = require('./hooks/useShouldDisableButtons.js');
 var useWindowResize = require('../../../../../global/js/hooks/useWindowResize.js');
 var useClickOutside = require('../../../../../global/js/hooks/useClickOutside.js');
 var useSubscribeToEventEmitter = require('./hooks/useSubscribeToEventEmitter.js');
-var ActionSet = require('../../../../ActionSet/ActionSet.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -37,12 +37,15 @@ var defaults = {
   flyoutIconDescription: 'Open filters',
   title: 'Filter',
   primaryActionLabel: 'Apply',
-  secondaryActionLabel: 'Cancel'
+  secondaryActionLabel: 'Cancel',
+  align: 'bottom'
 };
 var FilterFlyout = function FilterFlyout(_ref) {
   var updateMethod = _ref.updateMethod,
     _ref$flyoutIconDescri = _ref.flyoutIconDescription,
     flyoutIconDescription = _ref$flyoutIconDescri === void 0 ? defaults.flyoutIconDescription : _ref$flyoutIconDescri,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? defaults.align : _ref$align,
     _ref$filters = _ref.filters,
     filters = _ref$filters === void 0 ? [] : _ref$filters,
     _ref$title = _ref.title,
@@ -233,7 +236,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(react.IconButton, {
     label: flyoutIconDescription,
     kind: "ghost",
-    align: "bottom",
+    align: align,
     onClick: open ? closeFlyout : openFlyout,
     className: cx__default["default"]("".concat(componentClass, "__trigger"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "__trigger--open"), open)),
     disabled: data.length === 0
@@ -250,6 +253,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
   }, renderFilters())), renderActionSet()));
 };
 FilterFlyout.propTypes = {
+  /**
+   * Tooltip alignment for the filter button
+   */
+  align: index["default"].string,
   /**
    * All data rows in the table
    */

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js

@@ -15,13 +15,13 @@ var constants = require('./constants.js');
 var React = require('react');
 var variants = require('./motion/variants.js');
 var framerMotion = require('framer-motion');
+var ActionSet = require('../../../../ActionSet/ActionSet.js');
 var icons = require('@carbon/react/icons');
 var FilterProvider = require('./FilterProvider.js');
 var index = require('../../../../../node_modules/prop-types/index.js');
 var cx = require('classnames');
 var settings = require('../../../../../settings.js');
 var layout = require('@carbon/layout');
-var ActionSet = require('../../../../ActionSet/ActionSet.js');
 var useFilters = require('./hooks/useFilters.js');
 var useShouldDisableButtons = require('./hooks/useShouldDisableButtons.js');
 var useSubscribeToEventEmitter = require('./hooks/useSubscribeToEventEmitter.js');

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -354,7 +354,8 @@ var InlineEditCell = function InlineEditCell(_ref) {
           }
         }
       },
-      ref: dropdownRef
+      ref: dropdownRef,
+      autoAlign: true
     }));
   };
   var setRenderIcon = function setRenderIcon() {

package/lib/components/Datagrid/Datagrid/addons/stateReducer.d.ts

@@ -14,4 +14,11 @@ export function handleSelectAllRowData({ dispatch, rows, getRowId, indeterminate
     indeterminate: any;
     isChecked: any;
 }): any;
+export function handleDynamicRowCheck({ dispatch, status, rowId, depth, index, }: {
+    dispatch: any;
+    status: any;
+    rowId: any;
+    depth: any;
+    index: any;
+}): any;
 export function stateReducer(newState: any, action: any): any;

package/lib/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -18,6 +18,7 @@ var COLUMN_RESIZE_END = 'columnDoneResizing';
 var INIT = 'init';
 var TOGGLE_ROW_SELECTED = 'toggleRowSelected';
 var TOGGLE_ALL_ROWS_SELECTED = 'toggleAllRowsSelected';
+var DYNAMIC_ROW_CHECK = 'dynamicRowCheck';
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId, isKeyEvent) {
   dispatch({
@@ -81,15 +82,57 @@ var handleSelectAllRowData = function handleSelectAllRowData(_ref2) {
     }
   });
 };
+var handleDynamicRowCheck = function handleDynamicRowCheck(_ref3) {
+  var dispatch = _ref3.dispatch,
+    status = _ref3.status,
+    rowId = _ref3.rowId,
+    depth = _ref3.depth,
+    index = _ref3.index;
+  return dispatch({
+    type: DYNAMIC_ROW_CHECK,
+    payload: {
+      status: status,
+      rowId: rowId,
+      depth: depth,
+      index: index
+    }
+  });
+};
 var stateReducer = function stateReducer(newState, action) {
   switch (action.type) {
+    case DYNAMIC_ROW_CHECK:
+      {
+        var _action$payload = action.payload,
+          status = _action$payload.status,
+          rowId = _action$payload.rowId,
+          depth = _action$payload.depth,
+          index = _action$payload.index;
+        if (status === 'start') {
+          var skeletonRow = function skeletonRow(id) {
+            return {
+              isSkeleton: true,
+              values: 'skeleton',
+              id: id,
+              depth: depth,
+              index: index,
+              skeletonKey: "".concat(id, "__skeleton")
+            };
+          };
+          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState), {}, {
+            dynamicRowSkeleton: skeletonRow(rowId)
+          });
+        }
+        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState), {}, {
+          dynamicRowSkeleton: null
+        });
+      }
     case TOGGLE_ALL_ROWS_SELECTED:
       {
-        var _ref3 = action.payload || {},
-          rows = _ref3.rows,
-          getRowId = _ref3.getRowId,
-          indeterminate = _ref3.indeterminate,
-          isChecked = _ref3.isChecked;
+        var _ref4 = action.payload || {},
+          rows = _ref4.rows,
+          getRowId = _ref4.getRowId,
+          indeterminate = _ref4.indeterminate,
+          isChecked = _ref4.isChecked;
         var newSelectedRowIds = {};
         if (rows) {
           var newSelectedRowData = {};
@@ -111,10 +154,10 @@ var stateReducer = function stateReducer(newState, action) {
       }
     case TOGGLE_ROW_SELECTED:
       {
-        var _ref4 = action.payload || {},
-          rowData = _ref4.rowData,
-          _isChecked = _ref4.isChecked,
-          _getRowId = _ref4.getRowId;
+        var _ref5 = action.payload || {},
+          rowData = _ref5.rowData,
+          _isChecked = _ref5.isChecked,
+          _getRowId = _ref5.getRowId;
         if (!rowData) {
           return;
         }
@@ -125,9 +168,9 @@ var stateReducer = function stateReducer(newState, action) {
         }
         if (rowData && !_isChecked) {
           var newData = _rollupPluginBabelHelpers.objectSpread2({}, newState.selectedRowData);
-          var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref5) {
-            var _ref6 = _rollupPluginBabelHelpers.slicedToArray(_ref5, 1),
-              key = _ref6[0];
+          var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref6) {
+            var _ref7 = _rollupPluginBabelHelpers.slicedToArray(_ref6, 1),
+              key = _ref7[0];
             return parseInt(key) !== parseInt(_getRowId(rowData.original, rowData.index));
           }));
           return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState), {}, {
@@ -144,27 +187,27 @@ var stateReducer = function stateReducer(newState, action) {
       }
     case COLUMN_RESIZE_START:
       {
-        var _ref7 = action.payload || {},
-          headerId = _ref7.headerId;
+        var _ref8 = action.payload || {},
+          headerId = _ref8.headerId;
         return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState), {}, {
           isResizing: headerId
         });
       }
     case COLUMN_RESIZING:
       {
-        var _ref8 = action.payload || {},
-          _headerId = _ref8.headerId,
-          newWidth = _ref8.newWidth,
-          defaultWidth = _ref8.defaultWidth;
+        var _ref9 = action.payload || {},
+          _headerId = _ref9.headerId,
+          newWidth = _ref9.newWidth,
+          defaultWidth = _ref9.defaultWidth;
         var newColumnWidth = {};
         if (typeof _headerId === 'undefined') {
           return _rollupPluginBabelHelpers.objectSpread2({}, newState);
         }
         newColumnWidth[_headerId] = newWidth;
-        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref9) {
-          var _ref10 = _rollupPluginBabelHelpers.slicedToArray(_ref9, 2);
-            _ref10[0];
-            var value = _ref10[1];
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref10) {
+          var _ref11 = _rollupPluginBabelHelpers.slicedToArray(_ref10, 2);
+            _ref11[0];
+            var value = _ref11[1];
           return !isNaN(value);
         }));
         var headerIdArray = newState.columnResizing.headerIdWidths || [];
@@ -179,10 +222,10 @@ var stateReducer = function stateReducer(newState, action) {
       }
     case COLUMN_RESIZE_END:
       {
-        var _ref11 = action.payload || {},
-          onColResizeEnd = _ref11.onColResizeEnd,
-          _headerId2 = _ref11.headerId,
-          isKeyEvent = _ref11.isKeyEvent;
+        var _ref12 = action.payload || {},
+          onColResizeEnd = _ref12.onColResizeEnd,
+          _headerId2 = _ref12.headerId,
+          isKeyEvent = _ref12.isKeyEvent;
         var currentColumn = {};
         currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
         var allChangedColumns = newState.columnResizing.columnWidths;
@@ -210,6 +253,7 @@ var stateReducer = function stateReducer(newState, action) {
 
 exports.handleColumnResizeEndEvent = handleColumnResizeEndEvent;
 exports.handleColumnResizingEvent = handleColumnResizingEvent;
+exports.handleDynamicRowCheck = handleDynamicRowCheck;
 exports.handleSelectAllRowData = handleSelectAllRowData;
 exports.handleToggleRowSelected = handleToggleRowSelected;
 exports.stateReducer = stateReducer;

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

@@ -120,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: {
@@ -245,6 +246,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
     expandedContentHeight?: number;
     onRowExpand?: (row: DatagridRow, event: React.MouseEvent<HTMLElement>) => void;
     ExpandedRowContentComponent?: JSXElementConstructor<any>;
+    getAsyncSubRows?: (row: DatagridRow) => void;
 }
 export interface DataGridData {
     instance?: DataGridTableInstance;

package/lib/components/Datagrid/useNestedRowExpander.js

@@ -15,6 +15,7 @@ var icons = require('@carbon/react/icons');
 var cx = require('classnames');
 var settings = require('../../settings.js');
 var useFocusRowExpander = require('./useFocusRowExpander.js');
+var stateReducer = require('./Datagrid/addons/stateReducer.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,26 +35,74 @@ 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 = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(event) {
+              return _rollupPluginBabelHelpers.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;
+                    stateReducer.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:
+                    stateReducer.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["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+        return (row.canExpand || getAsyncSubRows) && /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
           type: "button",
           "aria-label": expanderTitle,
           className: cx__default["default"]("".concat(blockClass, "__row-expander"), "".concat(settings.carbon.prefix, "--btn"), "".concat(settings.carbon.prefix, "--btn--ghost"))