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

package/es/components/CreateFullPage/CreateFullPage.d.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-export declare const StepsContext: React.Context<null>;
+import { StepsContextType } from '../CreateTearsheet/CreateTearsheet';
+export declare const StepsContext: React.Context<StepsContextType | null>;
 export declare const StepNumberContext: React.Context<number>;
 interface HeaderBreadcrumbs {
     /** breadcrumb item key */

package/es/components/CreateFullPage/CreateFullPageStep.d.ts

@@ -1,2 +1,71 @@
-export let CreateFullPageStep: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/**
+ * Copyright IBM Corp. 2021, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { PropsWithChildren, ReactNode } from 'react';
+interface CreateFullPageStepBaseProps extends PropsWithChildren {
+    /**
+     * Sets an optional className to be added to the CreateFullPage step
+     */
+    className?: string;
+    /**
+     * Sets an optional description on the progress step component
+     */
+    description?: ReactNode;
+    /**
+     * This will conditionally disable the submit button in the multi step CreateFullPage
+     */
+    disableSubmit?: boolean;
+    /**
+     * This optional prop will render your form content inside of a fieldset html element
+     */
+    hasFieldset: boolean;
+    /**
+     * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
+     * steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
+     */
+    includeStep?: boolean;
+    /**
+     * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
+     */
+    introStep?: boolean;
+    /**
+     * This optional prop will indicate an error icon on the progress indicator step item
+     */
+    invalid?: boolean;
+    /**
+     * Optional function to be called on initial mount of a step.
+     * For example, this can be used to fetch data that is required on a particular step.
+     */
+    onMount?: () => void;
+    /**
+     * Optional function to be called on a step change.
+     * For example, this can be used to validate input fields before proceeding to the next step.
+     * This function can _optionally_ return a promise that is either resolved or rejected and the CreateFullPage will handle the submitting state of the next button.
+     */
+    onNext?: () => void | Promise<any>;
+    /**
+     * Sets the optional secondary label on the progress step component
+     */
+    secondaryLabel?: string;
+    /**
+     * Sets an optional subtitle on the progress step component
+     */
+    subtitle?: string;
+    /**
+     * Sets the title text for a create full page step
+     */
+    title: ReactNode;
+}
+type CreateFullPageStepFieldsetProps = {
+    hasFieldset: false;
+    fieldsetLegendText?: string;
+} | {
+    hasFieldset?: true;
+    fieldsetLegendText: string;
+};
+type CreateFullPageStepProps = CreateFullPageStepBaseProps & CreateFullPageStepFieldsetProps;
+export declare let CreateFullPageStep: React.ForwardRefExoticComponent<CreateFullPageStepProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/CreateFullPage/CreateFullPageStep.js

@@ -134,10 +134,12 @@ CreateFullPageStep.propTypes = {
   /**
    * This will conditionally disable the submit button in the multi step CreateFullPage
    */
+  /**@ts-ignore */
   disableSubmit: PropTypes.bool,
   /**
    * This is the legend text that appears above a fieldset html element for accessibility purposes. It is required when the optional `hasFieldset` prop is provided to a FullPageStep.
    */
+  /**@ts-ignore */
   fieldsetLegendText: PropTypes.string.isRequired.if(function (_ref2) {
     var hasFieldset = _ref2.hasFieldset;
     return hasFieldset === true;
@@ -145,6 +147,7 @@ CreateFullPageStep.propTypes = {
   /**
    * This optional prop will render your form content inside of a fieldset html element
    */
+  /**@ts-ignore */
   hasFieldset: PropTypes.bool,
   /**
    * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator

package/es/components/DataSpreadsheet/DataSpreadsheet.d.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { Column, Size, Theme } from './types';
+import { Column } from 'react-table';
+import { Size, Theme } from './types';
 interface DataSpreadsheetProps {
     /**
      * Specifies the cell height
@@ -18,7 +19,7 @@ interface DataSpreadsheetProps {
     /**
      * The data that will build the column headers
      */
-    columns?: readonly Column[];
+    columns?: readonly Column<object>[];
     /**
      * The spreadsheet data that will be rendered in the body of the spreadsheet component
      */

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -126,7 +126,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   }) || {};
   var cellSizeValue = getCellSize(cellSize);
   var cellEditorRef = useRef();
-  var _useState23 = useState(null),
+  var _useState23 = useState(),
     _useState24 = _slicedToArray(_useState23, 2),
     activeCellContent = _useState24[0],
     setActiveCellContent = _useState24[1];
@@ -149,19 +149,19 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   var scrollBarSize = useMemo(function () {
     return getScrollbarWidth();
   }, []);
-  var _useTable = useTable({
+  var _ref2 = useTable({
       columns: columns,
       data: data,
       defaultColumn: defaultColumn
     }, useBlockLayout, useColumnOrder),
-    getTableProps = _useTable.getTableProps,
-    getTableBodyProps = _useTable.getTableBodyProps,
-    headerGroups = _useTable.headerGroups,
-    rows = _useTable.rows,
-    totalColumnsWidth = _useTable.totalColumnsWidth,
-    prepareRow = _useTable.prepareRow,
-    setColumnOrder = _useTable.setColumnOrder,
-    visibleColumns = _useTable.visibleColumns;
+    getTableProps = _ref2.getTableProps,
+    getTableBodyProps = _ref2.getTableBodyProps,
+    headerGroups = _ref2.headerGroups,
+    rows = _ref2.rows,
+    totalColumnsWidth = _ref2.totalColumnsWidth,
+    prepareRow = _ref2.prepareRow,
+    setColumnOrder = _ref2.setColumnOrder,
+    visibleColumns = _ref2.visibleColumns;
 
   // Update the spreadsheet data after editing a cell
   var updateData = useCallback(function (rowIndex, columnId, newValue) {
@@ -196,7 +196,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   useEffect(function () {
     var prevCoords = previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates;
     if (((prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) || (prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)) && isEditing) {
-      var cellProps = rows[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row].cells[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column];
+      var cellProps = rows[Number(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row)].cells[Number(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column)];
       removeCellEditor();
       updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id, undefined);
       if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
@@ -217,11 +217,11 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       }
     }
   }, [activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates, updateData, rows, isEditing, removeCellEditor, activeCellContent]);
-  var createActiveCell = useCallback(function (_ref2) {
-    var placementElement = _ref2.placementElement,
-      coords = _ref2.coords,
-      _ref2$addToHeader = _ref2.addToHeader,
-      addToHeader = _ref2$addToHeader === void 0 ? false : _ref2$addToHeader;
+  var createActiveCell = useCallback(function (_ref3) {
+    var placementElement = _ref3.placementElement,
+      coords = _ref3.coords,
+      _ref3$addToHeader = _ref3.addToHeader,
+      addToHeader = _ref3$addToHeader === void 0 ? false : _ref3$addToHeader;
     var activeCellFullData = typeof (coords === null || coords === void 0 ? void 0 : coords.column) === 'number' && typeof (coords === null || coords === void 0 ? void 0 : coords.row) === 'number' ? rows[coords === null || coords === void 0 ? void 0 : coords.row].cells[coords === null || coords === void 0 ? void 0 : coords.column] : null;
     var activeCellValue = activeCellFullData ? Object.values(activeCellFullData.row.values)[coords === null || coords === void 0 ? void 0 : coords.column] : null;
     createActiveCellFn({
@@ -270,12 +270,12 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     }
     return;
   }, [activeCellCoordinates]);
-  var updateActiveCellCoordinates = useCallback(function (_ref3) {
-    var _ref3$coords = _ref3.coords,
-      coords = _ref3$coords === void 0 ? _objectSpread2({}, activeCellCoordinates) : _ref3$coords,
-      updatedValue = _ref3.updatedValue,
-      _ref3$optOutOfSelecti = _ref3.optOutOfSelectionAreaUpdate,
-      optOutOfSelectionAreaUpdate = _ref3$optOutOfSelecti === void 0 ? false : _ref3$optOutOfSelecti;
+  var updateActiveCellCoordinates = useCallback(function (_ref4) {
+    var _ref4$coords = _ref4.coords,
+      coords = _ref4$coords === void 0 ? _objectSpread2({}, activeCellCoordinates) : _ref4$coords,
+      updatedValue = _ref4.updatedValue,
+      _ref4$optOutOfSelecti = _ref4.optOutOfSelectionAreaUpdate,
+      optOutOfSelectionAreaUpdate = _ref4$optOutOfSelecti === void 0 ? false : _ref4$optOutOfSelecti;
     var newActiveCell = _objectSpread2(_objectSpread2({}, coords), updatedValue);
     setActiveCellCoordinates(newActiveCell);
     // Only run if the active cell is _not_ a header cell. This will add a point1 object
@@ -291,8 +291,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       setCurrentMatcher(tempMatcher);
     }
   }, [activeCellCoordinates]);
-  var handleHomeEndKey = useCallback(function (_ref4) {
-    var type = _ref4.type;
+  var handleHomeEndKey = useCallback(function (_ref5) {
+    var type = _ref5.type;
     var coordinatesClone = _objectSpread2({}, activeCellCoordinates);
     updateActiveCellCoordinates({
       coords: coordinatesClone,
@@ -490,10 +490,10 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       }
     }
   };
-  var handleRowColumnHeaderClick = function handleRowColumnHeaderClick(_ref5) {
-    var isKeyboard = _ref5.isKeyboard,
-      _ref5$index = _ref5.index,
-      index = _ref5$index === void 0 ? -1 : _ref5$index;
+  var handleRowColumnHeaderClick = function handleRowColumnHeaderClick(_ref6) {
+    var isKeyboard = _ref6.isKeyboard,
+      _ref6$index = _ref6.index,
+      index = _ref6$index === void 0 ? -1 : _ref6$index;
     var handleHeaderCellProps = {
       activeCellCoordinates: activeCellCoordinates,
       rows: rows,

package/es/components/DataSpreadsheet/DataSpreadsheetBody.d.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { Dispatch, SetStateAction, MutableRefObject } from 'react';
-import { ActiveCellCoordinates, Column } from './types';
+import { ActiveCellCoordinates, SpreadsheetColumn } from './types';
+import { Column, IdType, TableBodyPropGetter, TableBodyProps } from 'react-table';
 interface DataSpreadsheetBodyProps {
     /**
      * Object containing the active cell coordinates
@@ -22,7 +23,7 @@ interface DataSpreadsheetBodyProps {
     /**
      * All of the spreadsheet columns
      */
-    columns?: readonly Column[];
+    columns?: readonly Column<object>[];
     /**
      * This represents the id of the current cell selection area
      */
@@ -30,7 +31,7 @@ interface DataSpreadsheetBodyProps {
     /**
      * Default spreadsheet sizing values
      */
-    defaultColumn?: Column;
+    defaultColumn?: SpreadsheetColumn;
     /**
      * Sets the number of empty rows to be created when there is no data provided
      */
@@ -38,9 +39,7 @@ interface DataSpreadsheetBodyProps {
     /**
      * Function to set table body prop values
      */
-    getTableBodyProps?: () => {
-        data: any;
-    };
+    getTableBodyProps: (propGetter?: TableBodyPropGetter<any>) => TableBodyProps;
     /**
      * Headers provided from useTable hook
      */
@@ -100,7 +99,7 @@ interface DataSpreadsheetBodyProps {
     /**
      * Setter fn for column ordering, provided from react-table
      */
-    setColumnOrder?: () => void;
+    setColumnOrder?: (updater: ((columnOrder: Array<IdType<any>>) => Array<IdType<any>>) | Array<IdType<any>>) => void;
     /**
      * Setter fn for containerHasFocus state value
      */
@@ -133,7 +132,7 @@ interface DataSpreadsheetBodyProps {
     /**
      * Prop from react-table used to reorder columns
      */
-    visibleColumns?: [];
+    visibleColumns?: Column<object>[];
 }
 export declare const DataSpreadsheetBody: React.ForwardRefExoticComponent<DataSpreadsheetBodyProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -423,6 +423,7 @@ DataSpreadsheetBody.propTypes = {
   /**
    * Function to set table body prop values
    */
+  /**@ts-ignore */
   getTableBodyProps: PropTypes.func,
   /**
    * Headers provided from useTable hook

package/es/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { Dispatch, SetStateAction } from 'react';
-import { ActiveCellCoordinates, Column, ItemType, Size } from './types';
+import { ActiveCellCoordinates, ItemType, Size, SpreadsheetColumn } from './types';
+import { Column } from 'react-table';
 interface DataSpreadsheetHeaderProps {
     /**
      * Object containing the active cell coordinates
@@ -26,7 +27,7 @@ interface DataSpreadsheetHeaderProps {
     /**
      * Default spreadsheet sizing values
      */
-    defaultColumn?: Column;
+    defaultColumn?: SpreadsheetColumn;
     /**
      * Whether or not a click/hold is active on a header cell
      */
@@ -83,7 +84,7 @@ interface DataSpreadsheetHeaderProps {
     /**
      * Array of visible columns provided by react-table useTable hook
      */
-    visibleColumns?: [];
+    visibleColumns?: Column<object>[];
 }
 export declare const DataSpreadsheetHeader: React.ForwardRefExoticComponent<DataSpreadsheetHeaderProps & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,9 +1,6 @@
 export type Size = 'xs' | 'sm' | 'md' | 'lg';
 export type Theme = 'light' | 'dark';
-export interface Column {
-    Header?: string;
-    accessor?: string | (() => void);
-    Cell?: () => void;
+export interface SpreadsheetColumn {
     rowHeight?: number;
     rowHeaderWidth?: number;
     width?: number;

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

@@ -1,5 +1,27 @@
 /**
- * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-export let Datagrid: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+import { DataGridState } from '../types';
+export interface DatagridProps {
+    /**
+     * Specify a label to be read by screen readers on the container node
+     * 'aria-label' of the TableToolbar component.
+     */
+    ariaToolbarLabel?: string;
+    /**
+     * The data grid state, much of it being supplied by the useDatagrid hook
+     */
+    datagridState: DataGridState;
+    /**
+     * Table title
+     */
+    title?: string;
+}
+/**
+ * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ */
+export declare let Datagrid: React.ForwardRefExoticComponent<DatagridProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -19,7 +19,6 @@ import { InlineEditProvider } from './addons/InlineEdit/InlineEditContext/Inline
 var _excluded = ["datagridState", "title", "ariaToolbarLabel"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
-
 /**
  * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
  */
@@ -30,7 +29,7 @@ var Datagrid = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   if (!datagridState) {
     pconsole.warn('Datagrid was not passed datagridState which is required to render this component.');
-    return null;
+    return;
   }
   var withVirtualScroll = datagridState.withVirtualScroll,
     DatagridPagination = datagridState.DatagridPagination,
@@ -38,7 +37,7 @@ var Datagrid = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     tableId = datagridState.tableId,
     filterProps = datagridState.filterProps,
     className = datagridState.className,
-    filters = datagridState.state.filters;
+    state = datagridState.state;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
   var props = {
     title: title,
@@ -46,7 +45,7 @@ var Datagrid = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     ariaToolbarLabel: ariaToolbarLabel
   };
   return /*#__PURE__*/React__default.createElement(FilterProvider, {
-    filters: filters,
+    filters: state === null || state === void 0 ? void 0 : state.filters,
     filterProps: filterProps
   }, /*#__PURE__*/React__default.createElement(InlineEditProvider, null, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     id: tableId,
@@ -72,6 +71,7 @@ Datagrid.propTypes = {
   /**
    * The data grid state, much of it being supplied by the useDatagrid hook
    */
+  /**@ts-ignore */
   datagridState: PropTypes.object.isRequired,
   /**
    * Table title

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

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

package/es/components/Datagrid/Datagrid/DatagridBody.js

@@ -28,6 +28,5 @@ var DatagridBody = function DatagridBody(datagridState) {
   }
   return /*#__PURE__*/React__default.createElement(DatagridSimpleBody, datagridState);
 };
-var DatagridBody$1 = DatagridBody;
 
-export { DatagridBody$1 as default };
+export { DatagridBody as default };

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

@@ -1,12 +1,15 @@
-export function DatagridContent({ datagridState, title, ariaToolbarLabel }: {
-    datagridState: any;
-    title: any;
-    ariaToolbarLabel: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace DatagridContent {
-    namespace propTypes {
-        let ariaToolbarLabel: PropTypes.Requireable<string>;
-        let datagridState: PropTypes.Requireable<PropTypes.InferProps<{
+import PropTypes from 'prop-types';
+import { DataGridState } from '../types';
+interface DatagridContentProps {
+    ariaToolbarLabel?: string;
+    datagridState: DataGridState;
+    title?: string;
+}
+export declare const DatagridContent: {
+    ({ datagridState, ariaToolbarLabel, title, }: DatagridContentProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        ariaToolbarLabel: PropTypes.Requireable<string>;
+        datagridState: PropTypes.Requireable<PropTypes.InferProps<{
             getTableProps: PropTypes.Requireable<(...args: any[]) => any>;
             getFilterFlyoutProps: PropTypes.Requireable<(...args: any[]) => any>;
             withVirtualScroll: PropTypes.Requireable<boolean>;
@@ -32,7 +35,7 @@ export namespace DatagridContent {
             getFilterProps: PropTypes.Requireable<(...args: any[]) => any>;
             state: PropTypes.Requireable<object>;
         }>>;
-        let title: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from 'prop-types';
+        title: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -31,8 +31,8 @@ var blockClass = "".concat(pkg.prefix, "--datagrid");
 var gcClass = "".concat(blockClass, "__grid-container");
 var DatagridContent = function DatagridContent(_ref) {
   var datagridState = _ref.datagridState,
-    title = _ref.title,
-    ariaToolbarLabel = _ref.ariaToolbarLabel;
+    ariaToolbarLabel = _ref.ariaToolbarLabel,
+    title = _ref.title;
   var _useContext = useContext(InlineEditContext),
     inlineEditState = _useContext.state,
     dispatch = _useContext.dispatch;
@@ -69,8 +69,8 @@ var DatagridContent = function DatagridContent(_ref) {
     rows = datagridState.rows;
   var columnResizing = state.columnResizing;
   var contentRows = DatagridPagination && page || rows;
-  var gridAreaRef = useRef();
-  var multiKeyTrackingRef = useRef();
+  var gridAreaRef = useRef(null);
+  var multiKeyTrackingRef = useRef(null);
   var enableEditableCell = useFeatureFlag('enable-datagrid-useEditableCell');
   var enableInlineEdit = useFeatureFlag('enable-datagrid-useInlineEdit');
   var enableCustomizeCols = useFeatureFlag('enable-datagrid-useCustomizeColumns');
@@ -105,13 +105,11 @@ var DatagridContent = function DatagridContent(_ref) {
     });
   });
   var renderTable = function renderTable() {
-    var _getTableProps;
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Table, _extends({}, getTableProps(), {
-      className: cx(withVirtualScroll ? "".concat(blockClass, "__table-virtual-scroll") : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Table, _extends({}, getTableProps === null || getTableProps === void 0 ? void 0 : getTableProps(), {
+      className: cx(withVirtualScroll ? "".concat(blockClass, "__table-virtual-scroll") : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), getTableProps === null || getTableProps === void 0 ? void 0 : getTableProps().className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
-      onKeyDown: /* istanbul ignore next */
-      withInlineEdit && function (event) {
+      onKeyDown: withInlineEdit && function (event) {
         return handleGridKeyPress({
           event: event,
           dispatch: dispatch,
@@ -140,14 +138,15 @@ var DatagridContent = function DatagridContent(_ref) {
 
   // Provides a width for the region outline for useInlineEdit
   useEffect(function () {
+    var _gridElement$style;
     if (!withInlineEdit) {
       return;
     }
     var gridElement = document.querySelector("#".concat(tableId));
     var tableHeader = gridElement === null || gridElement === void 0 ? void 0 : gridElement.querySelector(".".concat(carbon.prefix, "--data-table-header"));
-    gridElement.style.setProperty("--".concat(blockClass, "--grid-width"), px(totalColumnsWidth + 32));
+    gridElement === null || gridElement === void 0 || (_gridElement$style = gridElement.style) === null || _gridElement$style === void 0 || _gridElement$style.setProperty("--".concat(blockClass, "--grid-width"), px((totalColumnsWidth || 0) + 32));
     if (gridActive) {
-      gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), px((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
+      gridElement === null || gridElement === void 0 || gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), px((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
   useSubscribeToEventEmitter(CLEAR_SINGLE_FILTER, function (id) {
@@ -160,7 +159,7 @@ var DatagridContent = function DatagridContent(_ref) {
       clearFilters: function clearFilters() {
         return EventEmitter.dispatch(CLEAR_FILTERS);
       },
-      renderLabel: filterProps.renderLabel,
+      renderLabel: filterProps === null || filterProps === void 0 ? void 0 : filterProps.renderLabel,
       overflowType: "tag"
     });
   };
@@ -178,7 +177,7 @@ var DatagridContent = function DatagridContent(_ref) {
   })), /*#__PURE__*/React__default.createElement("div", {
     className: cx("".concat(blockClass, "__table-container"), _defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
     ref: gridAreaRef
-  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React__default.createElement(FilterPanel, _extends({}, getFilterFlyoutProps(), {
+  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React__default.createElement(FilterPanel, _extends({}, getFilterFlyoutProps === null || getFilterFlyoutProps === void 0 ? void 0 : getFilterFlyoutProps(), {
     title: filterProps.panelTitle,
     filterSections: filterProps.sections,
     autoHideFilters: filterProps.autoHideFilters,

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

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

package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js

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

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

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

package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { isValidElement } from 'react';
 import { pkg } from '../../../settings.js';
 import cx from 'classnames';
 
+var _excluded = ["key"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 // eslint-disable-next-line react/prop-types
@@ -18,8 +19,9 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
     var _row$original;
     var row = datagridState.row;
     var expandedContentHeight = row.expandedContentHeight;
-    var toggleParentHoverClass = function toggleParentHoverClass(event, eventType) {
+    var toggleParentHoverClass = function toggleParentHoverClass(event) {
       var _event$target;
+      var eventType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
       /* istanbul ignore else */
       if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && _event$target.closest('tr').previousElementSibling) {
         var _event$target2;
@@ -31,6 +33,8 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
         }
       }
     };
+    var key = datagridState.key,
+      _state = _objectWithoutProperties(datagridState, _excluded);
     return /*#__PURE__*/React__default.createElement("tr", {
       className: cx("".concat(blockClass, "__expanded-row"), _defineProperty({}, "".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))),
       onMouseEnter: function onMouseEnter(event) {
@@ -46,9 +50,10 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
       style: {
         height: expandedContentHeight && expandedContentHeight
       }
-    }, /*#__PURE__*/React__default.createElement(ExpandedRowContentComponent, datagridState))));
+    }, /*#__PURE__*/React__default.createElement(ExpandedRowContentComponent, _extends({
+      key: key
+    }, _state)))));
   };
 };
-var DatagridExpandedRow$1 = DatagridExpandedRow;
 
-export { DatagridExpandedRow$1 as default };
+export { DatagridExpandedRow as default };