@carbon/ibm-products 2.41.1-canary.11 → 2.41.1-canary.16

package/lib/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/lib/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/lib/components/CreateFullPage/CreateFullPageStep.js

@@ -143,10 +143,12 @@ exports.CreateFullPageStep.propTypes = {
   /**
    * This will conditionally disable the submit button in the multi step CreateFullPage
    */
+  /**@ts-ignore */
   disableSubmit: index["default"].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: index["default"].string.isRequired.if(function (_ref2) {
     var hasFieldset = _ref2.hasFieldset;
     return hasFieldset === true;
@@ -154,6 +156,7 @@ exports.CreateFullPageStep.propTypes = {
   /**
    * This optional prop will render your form content inside of a fieldset html element
    */
+  /**@ts-ignore */
   hasFieldset: index["default"].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/lib/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/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -135,7 +135,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   }) || {};
   var cellSizeValue = getCellSize.getCellSize(cellSize);
   var cellEditorRef = React.useRef();
-  var _useState23 = React.useState(null),
+  var _useState23 = React.useState(),
     _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
     activeCellContent = _useState24[0],
     setActiveCellContent = _useState24[1];
@@ -158,19 +158,19 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   var scrollBarSize = React.useMemo(function () {
     return getScrollbarWidth.getScrollbarWidth();
   }, []);
-  var _useTable = reactTable.useTable({
+  var _ref2 = reactTable.useTable({
       columns: columns,
       data: data,
       defaultColumn: defaultColumn
     }, reactTable.useBlockLayout, reactTable.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 = React.useCallback(function (rowIndex, columnId, newValue) {
@@ -205,7 +205,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   React.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) {
@@ -226,11 +226,11 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       }
     }
   }, [activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates, updateData, rows, isEditing, removeCellEditor, activeCellContent]);
-  var createActiveCell = React.useCallback(function (_ref2) {
-    var placementElement = _ref2.placementElement,
-      coords = _ref2.coords,
-      _ref2$addToHeader = _ref2.addToHeader,
-      addToHeader = _ref2$addToHeader === void 0 ? false : _ref2$addToHeader;
+  var createActiveCell = React.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.createActiveCellFn({
@@ -279,12 +279,12 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     }
     return;
   }, [activeCellCoordinates]);
-  var updateActiveCellCoordinates = React.useCallback(function (_ref3) {
-    var _ref3$coords = _ref3.coords,
-      coords = _ref3$coords === void 0 ? _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates) : _ref3$coords,
-      updatedValue = _ref3.updatedValue,
-      _ref3$optOutOfSelecti = _ref3.optOutOfSelectionAreaUpdate,
-      optOutOfSelectionAreaUpdate = _ref3$optOutOfSelecti === void 0 ? false : _ref3$optOutOfSelecti;
+  var updateActiveCellCoordinates = React.useCallback(function (_ref4) {
+    var _ref4$coords = _ref4.coords,
+      coords = _ref4$coords === void 0 ? _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates) : _ref4$coords,
+      updatedValue = _ref4.updatedValue,
+      _ref4$optOutOfSelecti = _ref4.optOutOfSelectionAreaUpdate,
+      optOutOfSelectionAreaUpdate = _ref4$optOutOfSelecti === void 0 ? false : _ref4$optOutOfSelecti;
     var newActiveCell = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, coords), updatedValue);
     setActiveCellCoordinates(newActiveCell);
     // Only run if the active cell is _not_ a header cell. This will add a point1 object
@@ -300,8 +300,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       setCurrentMatcher(tempMatcher);
     }
   }, [activeCellCoordinates]);
-  var handleHomeEndKey = React.useCallback(function (_ref4) {
-    var type = _ref4.type;
+  var handleHomeEndKey = React.useCallback(function (_ref5) {
+    var type = _ref5.type;
     var coordinatesClone = _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates);
     updateActiveCellCoordinates({
       coords: coordinatesClone,
@@ -499,10 +499,10 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       }
     }
   };
-  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/lib/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/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -432,6 +432,7 @@ DataSpreadsheetBody.propTypes = {
   /**
    * Function to set table body prop values
    */
+  /**@ts-ignore */
   getTableBodyProps: index["default"].func,
   /**
    * Headers provided from useTable hook

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

@@ -28,7 +28,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var _excluded = ["datagridState", "title", "ariaToolbarLabel"];
 var blockClass = "".concat(settings.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.
  */
@@ -39,7 +38,7 @@ exports.Datagrid = /*#__PURE__*/React__default["default"].forwardRef(function (_
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   if (!datagridState) {
     pconsole["default"].warn('Datagrid was not passed datagridState which is required to render this component.');
-    return null;
+    return;
   }
   var withVirtualScroll = datagridState.withVirtualScroll,
     DatagridPagination = datagridState.DatagridPagination,
@@ -47,7 +46,7 @@ exports.Datagrid = /*#__PURE__*/React__default["default"].forwardRef(function (_
     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,
@@ -55,7 +54,7 @@ exports.Datagrid = /*#__PURE__*/React__default["default"].forwardRef(function (_
     ariaToolbarLabel: ariaToolbarLabel
   };
   return /*#__PURE__*/React__default["default"].createElement(FilterProvider.FilterProvider, {
-    filters: filters,
+    filters: state === null || state === void 0 ? void 0 : state.filters,
     filterProps: filterProps
   }, /*#__PURE__*/React__default["default"].createElement(InlineEditContext.InlineEditProvider, null, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     id: tableId,
@@ -81,6 +80,7 @@ exports.Datagrid.propTypes = {
   /**
    * The data grid state, much of it being supplied by the useDatagrid hook
    */
+  /**@ts-ignore */
   datagridState: index["default"].object.isRequired,
   /**
    * Table title

package/lib/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/lib/components/Datagrid/Datagrid/DatagridBody.js

@@ -36,6 +36,5 @@ var DatagridBody = function DatagridBody(datagridState) {
   }
   return /*#__PURE__*/React__default["default"].createElement(DatagridSimpleBody["default"], datagridState);
 };
-var DatagridBody$1 = DatagridBody;
 
-exports["default"] = DatagridBody$1;
+exports["default"] = DatagridBody;

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

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

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

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