@carbon/ibm-products 2.47.0 → 2.48.0

package/es/components/CreateModal/index.d.ts

@@ -1 +1,2 @@
-export { CreateModal } from "./CreateModal";
+export { CreateModal } from './CreateModal';
+export type { CreateModalProps } from './CreateModal';

package/es/components/CreateSidePanel/CreateSidePanel.js

@@ -12,8 +12,8 @@ import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { Form } from '@carbon/react';
-import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { SidePanel } from '../SidePanel/SidePanel.js';
+import uuidv4 from '../../global/js/utils/uuidv4.js';
 
 var _excluded = ["className", "children", "disableSubmit", "formTitle", "formDescription", "id", "onRequestClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "selectorPageContent", "selectorPrimaryFocus", "subtitle", "title"];
 

package/es/components/CreateSidePanel/index.d.ts

@@ -1 +1,7 @@
-export { CreateSidePanel } from "./CreateSidePanel";
+/**
+ * Copyright IBM Corp. 2020, 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 { CreateSidePanel } from './CreateSidePanel';

package/es/components/CreateTearsheet/CreateTearsheet.d.ts

@@ -4,7 +4,7 @@
  * 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, { ReactNode, PropsWithChildren, Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, PropsWithChildren, ReactNode, SetStateAction } from 'react';
 export interface StepsContextType {
     currentStep: number;
     setIsDisabled: Dispatch<SetStateAction<boolean>>;
@@ -16,7 +16,7 @@ export interface StepsContextType {
 }
 export declare const StepsContext: React.Context<StepsContextType | null>;
 export declare const StepNumberContext: React.Context<number>;
-interface CreateTearsheetProps extends PropsWithChildren {
+export interface CreateTearsheetProps extends PropsWithChildren {
     /**
      * The back button text
      */

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -7,14 +7,14 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useRef, useEffect, createContext } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from 'classnames';
 import { Form } from '@carbon/react';
+import PropTypes from '../../node_modules/prop-types/index.js';
 import { TearsheetShell } from '../Tearsheet/TearsheetShell.js';
-import { pkg } from '../../settings.js';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { lastIndexInArray } from '../../global/js/utils/lastIndexInArray.js';
 import { getNumberOfHiddenSteps } from '../../global/js/utils/getNumberOfHiddenSteps.js';
+import { lastIndexInArray } from '../../global/js/utils/lastIndexInArray.js';
+import { pkg } from '../../settings.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useCreateComponentFocus } from '../../global/js/hooks/useCreateComponentFocus.js';
 import { useValidCreateStepCount } from '../../global/js/hooks/useValidCreateStepCount.js';

package/es/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/es/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/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -7,12 +7,12 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
+import { Form } from '@carbon/react';
 import PropTypes from '../../node_modules/prop-types/index.js';
+import { TearsheetNarrow } from '../Tearsheet/TearsheetNarrow.js';
 import cx from 'classnames';
-import { Form } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
-import { TearsheetNarrow } from '../Tearsheet/TearsheetNarrow.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
 
 var _excluded = ["children", "className", "description", "disableSubmit", "formDescription", "formTitle", "label", "open", "onRequestClose", "onRequestSubmit", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "title", "verticalPosition"];

package/es/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/es/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/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -6,24 +6,24 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, typeof as _typeof, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { useTable, useBlockLayout, useColumnOrder } from 'react-table';
-import PropTypes from '../../node_modules/prop-types/index.js';
-import cx from 'classnames';
-import { pkg } from '../../settings.js';
+import React__default, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { DataSpreadsheetBody } from './DataSpreadsheetBody.js';
 import { DataSpreadsheetHeader } from './DataSpreadsheetHeader.js';
-import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { getScrollbarWidth } from '../../global/js/utils/getScrollbarWidth.js';
-import uuidv4 from '../../global/js/utils/uuidv4.js';
-import { deepCloneObject } from '../../global/js/utils/deepCloneObject.js';
+import PropTypes from '../../node_modules/prop-types/index.js';
 import { createActiveCellFn } from './utils/createActiveCellFn.js';
+import cx from 'classnames';
+import { deepCloneObject } from '../../global/js/utils/deepCloneObject.js';
 import { getCellSize } from './utils/getCellSize.js';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { getScrollbarWidth } from '../../global/js/utils/getScrollbarWidth.js';
+import { handleEditSubmit } from './utils/handleEditSubmit.js';
 import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection.js';
+import { handleKeyPress } from './utils/commonEventHandlers.js';
+import { pkg } from '../../settings.js';
 import { removeCellSelections } from './utils/removeCellSelections.js';
 import { selectAllCells } from './utils/selectAllCells.js';
-import { handleEditSubmit } from './utils/handleEditSubmit.js';
-import { handleKeyPress } from './utils/commonEventHandlers.js';
+import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { useActiveElement } from '../../global/js/hooks/useActiveElement.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useMultipleKeyTracking } from './hooks/useMultipleKeyTracking.js';
@@ -33,6 +33,7 @@ import { useMoveActiveCell } from './hooks/useMoveActiveCell.js';
 import { useSpreadsheetEdit } from './hooks/useSpreadsheetEdit.js';
 
 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(pkg.prefix, "--data-spreadsheet");
 var componentName = 'DataSpreadsheet';

package/es/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/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -14,6 +14,7 @@ import { CLEAR_SINGLE_FILTER, CLEAR_FILTERS } from './addons/Filtering/constants
 import DatagridBody from './DatagridBody.js';
 import DatagridHead from './DatagridHead.js';
 import DatagridToolbar from './DatagridToolbar.js';
+import FilterSummary from '../../FilterSummary/FilterSummary.js';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import cx from 'classnames';
 import { handleGridFocus } from './addons/InlineEdit/handleGridFocus.js';
@@ -26,7 +27,6 @@ import { useClickOutside } from '../../../global/js/hooks/useClickOutside.js';
 import { useMultipleKeyTracking } from '../../DataSpreadsheet/hooks/useMultipleKeyTracking.js';
 import useSubscribeToEventEmitter from './addons/Filtering/hooks/useSubscribeToEventEmitter.js';
 import FilterPanel from './addons/Filtering/FilterPanel.js';
-import FilterSummary from '../../FilterSummary/FilterSummary.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var gcClass = "".concat(blockClass, "__grid-container");

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

@@ -40,7 +40,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;
@@ -117,15 +118,16 @@ var DatagridRow = function DatagridRow(datagridState) {
     var _r$original;
     return /*#__PURE__*/isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.slug);
   });
-  var rowClassNames = cx("".concat(blockClass, "__carbon-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), "".concat(blockClass, "__slug--row"), /*#__PURE__*/isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug)));
+  var rowClassNames = cx("".concat(blockClass, "__carbon-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(blockClass, "__carbon-row-expandable--async"), getAsyncSubRows && row.depth > 0), "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), "".concat(blockClass, "__slug--row"), /*#__PURE__*/isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug)));
   var withActionsColumn = headers ? !!headers.filter(function (header) {
     return header.isAction;
   }).length : false;
+  var rowKey = !row.isSkeleton ? key : row.skeletonKey;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-    key: key
+    key: "".concat(rowKey, "__").concat(key, "__row--fragment")
   }, /*#__PURE__*/React__default.createElement(TableRow, _extends({}, rowProps, {
     className: cx(rowClassNames, className),
-    key: row.id,
+    key: rowKey,
     onMouseEnter: hoverHandler,
     onMouseLeave: handleMouseLeave,
     onFocus: hoverHandler,
@@ -164,7 +166,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       style.flex = lastVisibleFlexStyle;
     }
     return /*#__PURE__*/React__default.createElement(TableCell, _extends({
-      className: cx("".concat(blockClass, "__cell"), _defineProperty(_defineProperty(_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__*/isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), columnClassname)
+      className: cx("".concat(blockClass, "__cell"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), (row.canExpand || getAsyncSubRows) && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), columnClassname)
     }, restProps, {
       style: style,
       key: cell.column.id

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

@@ -8,10 +8,11 @@
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useCallback, useEffect } from 'react';
 import PropTypes from '../../../../../node_modules/prop-types/index.js';
+import '../../../../Tearsheet/Tearsheet.js';
+import { TearsheetNarrow } from '../../../../Tearsheet/TearsheetNarrow.js';
 import Columns from './Columns.js';
 import Actions from './Actions.js';
 import { pkg } from '../../../../../settings.js';
-import { TearsheetNarrow } from '../../../../Tearsheet/TearsheetNarrow.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {

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

@@ -161,10 +161,10 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     strategy: verticalListSortingStrategy
   }, visibleCols.map(function (colDef) {
     var colHeaderTitle = 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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Checkbox, {

package/es/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/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js

@@ -10,6 +10,7 @@ import { BATCH, INSTANT, FLYOUT, CLEAR_FILTERS } from './constants.js';
 import { usePrefix, IconButton } from '@carbon/react';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { breakpoints, px } from '@carbon/layout';
+import { ActionSet } from '../../../../ActionSet/ActionSet.js';
 import { Filter } from '@carbon/react/icons';
 import PropTypes from '../../../../../node_modules/prop-types/index.js';
 import cx from 'classnames';
@@ -19,7 +20,6 @@ import useShouldDisableButtons from './hooks/useShouldDisableButtons.js';
 import { useWindowResize } from '../../../../../global/js/hooks/useWindowResize.js';
 import { useClickOutside } from '../../../../../global/js/hooks/useClickOutside.js';
 import useSubscribeToEventEmitter from './hooks/useSubscribeToEventEmitter.js';
-import { ActionSet } from '../../../../ActionSet/ActionSet.js';
 
 var _Filter;
 var blockClass = "".concat(pkg.prefix, "--datagrid");
@@ -28,12 +28,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,
@@ -224,7 +227,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
   }, /*#__PURE__*/React__default.createElement(IconButton, {
     label: flyoutIconDescription,
     kind: "ghost",
-    align: "bottom",
+    align: align,
     onClick: open ? closeFlyout : openFlyout,
     className: cx("".concat(componentClass, "__trigger"), _defineProperty({}, "".concat(componentClass, "__trigger--open"), open)),
     disabled: data.length === 0
@@ -241,6 +244,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
   }, renderFilters())), renderActionSet()));
 };
 FilterFlyout.propTypes = {
+  /**
+   * Tooltip alignment for the filter button
+   */
+  align: PropTypes.string,
   /**
    * All data rows in the table
    */

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

@@ -11,13 +11,13 @@ import { PANEL, BATCH, CLEAR_FILTERS, INSTANT } from './constants.js';
 import React__default, { useState, useContext, useRef, useMemo, useEffect } from 'react';
 import { panelVariants, innerContainerVariants, actionSetVariants } from './motion/variants.js';
 import { motion, useReducedMotion } from 'framer-motion';
+import { ActionSet } from '../../../../ActionSet/ActionSet.js';
 import { Close } from '@carbon/react/icons';
 import { FilterContext } from './FilterProvider.js';
 import PropTypes from '../../../../../node_modules/prop-types/index.js';
 import cx from 'classnames';
 import { pkg } from '../../../../../settings.js';
 import { rem } from '@carbon/layout';
-import { ActionSet } from '../../../../ActionSet/ActionSet.js';
 import useFilters from './hooks/useFilters.js';
 import useShouldDisableButtons from './hooks/useShouldDisableButtons.js';
 import useSubscribeToEventEmitter from './hooks/useSubscribeToEventEmitter.js';

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

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

package/es/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/es/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -14,6 +14,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(pkg.prefix, "--datagrid");
 var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId, isKeyEvent) {
   dispatch({
@@ -77,15 +78,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 _objectSpread2(_objectSpread2({}, newState), {}, {
+            dynamicRowSkeleton: skeletonRow(rowId)
+          });
+        }
+        return _objectSpread2(_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 = {};
@@ -107,10 +150,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;
         }
@@ -121,9 +164,9 @@ var stateReducer = function stateReducer(newState, action) {
         }
         if (rowData && !_isChecked) {
           var newData = _objectSpread2({}, newState.selectedRowData);
-          var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref5) {
-            var _ref6 = _slicedToArray(_ref5, 1),
-              key = _ref6[0];
+          var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref6) {
+            var _ref7 = _slicedToArray(_ref6, 1),
+              key = _ref7[0];
             return parseInt(key) !== parseInt(_getRowId(rowData.original, rowData.index));
           }));
           return _objectSpread2(_objectSpread2({}, newState), {}, {
@@ -140,27 +183,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 _objectSpread2(_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 _objectSpread2({}, newState);
         }
         newColumnWidth[_headerId] = newWidth;
-        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref9) {
-          var _ref10 = _slicedToArray(_ref9, 2);
-            _ref10[0];
-            var value = _ref10[1];
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref10) {
+          var _ref11 = _slicedToArray(_ref10, 2);
+            _ref11[0];
+            var value = _ref11[1];
           return !isNaN(value);
         }));
         var headerIdArray = newState.columnResizing.headerIdWidths || [];
@@ -175,10 +218,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;
@@ -204,4 +247,4 @@ var stateReducer = function stateReducer(newState, action) {
   }
 };
 
-export { handleColumnResizeEndEvent, handleColumnResizingEvent, handleSelectAllRowData, handleToggleRowSelected, stateReducer };
+export { handleColumnResizeEndEvent, handleColumnResizingEvent, handleDynamicRowCheck, handleSelectAllRowData, handleToggleRowSelected, stateReducer };

package/es/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/es/components/Datagrid/useFiltering.js

@@ -7,7 +7,7 @@
 
 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 { MULTISELECT, DATE, NUMBER, CHECKBOX, BATCH } from './Datagrid/addons/Filtering/constants.js';
 import FilterFlyout from './Datagrid/addons/Filtering/FilterFlyout.js';
 
 var handleMultiFilter = function handleMultiFilter(rows, id, value) {