@carbon/ibm-products 2.38.0 → 2.39.0

package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -19,11 +19,9 @@ import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia/SteppedAnimatedMed
 import { Carousel } from '../Carousel/Carousel.js';
 
 var _excluded = ["className", "children", "isVisible", "media", "nextButtonText", "previousButtonLabel", "closeButtonLabel"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--coachmark-overlay-elements");
 var componentName = 'CoachmarkOverlayElements';
-
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 // Default values can be included here and then assigned to the prop params,
@@ -136,8 +134,9 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
     title: previousButtonLabel,
     disabled: scrollPosition === 0,
     onClick: function onClick() {
+      var _scrollRef$current, _scrollRef$current$sc;
       var targetStep = clamp(currentProgStep - 1, progStepFloor, progStepCeil);
-      scrollRef.current.scrollToView(targetStep);
+      scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === void 0 || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
       setCurrentProgStep(targetStep);
     }
   }, previousButtonLabel), currentProgStep < progStepCeil ? /*#__PURE__*/React__default.createElement(Button, {
@@ -146,8 +145,9 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
     title: nextButtonText,
     disabled: scrollPosition === 1,
     onClick: function onClick() {
+      var _scrollRef$current2, _scrollRef$current2$s;
       var targetStep = clamp(currentProgStep + 1, progStepFloor, progStepCeil);
-      scrollRef.current.scrollToView(targetStep);
+      scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === void 0 || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
       setCurrentProgStep(targetStep);
     }
   }, nextButtonText) : closeButtonLabel && /*#__PURE__*/React__default.createElement(Button, _extends({
@@ -192,6 +192,7 @@ CoachmarkOverlayElements.propTypes = {
    * If a single media element is required, use `{render}`.
    * If a stepped animation is required, use `{filePaths}`.
    */
+  /**@ts-ignore*/
   media: PropTypes.oneOfType([PropTypes.shape({
     render: PropTypes.func
   }), PropTypes.shape({

package/es/components/CreateInfluencer/CreateInfluencer.d.ts

@@ -1,23 +1,61 @@
-export function CreateInfluencer({ className, currentStep, stepData, title }: {
-    className: any;
-    currentStep: any;
-    stepData: any;
-    title: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace CreateInfluencer {
-    export { componentName as displayName };
-    export namespace propTypes {
-        let className: PropTypes.Requireable<string>;
-        let currentStep: PropTypes.Validator<number>;
-        let stepData: PropTypes.Requireable<(PropTypes.InferProps<{
+/**
+ * Copyright IBM Corp. 2021, 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.
+ */
+import { PropsWithChildren, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import '../../global/js/utils/props-helper';
+interface Step {
+    introStep?: boolean;
+    secondaryLabel?: string;
+    shouldIncludeStep?: boolean;
+    title?: ReactNode;
+}
+interface CreateInfluencerProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Provide the current step number.
+     */
+    currentStep: number;
+    /**
+     * Provide the Set Data.
+     */
+    stepData: Step[];
+    /**
+     * Title.
+     */
+    title?: string | undefined;
+}
+export declare const CreateInfluencer: {
+    ({ className, currentStep, stepData, title, }: PropsWithChildren<CreateInfluencerProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide an optional class to be applied to the containing node.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Used to mark the current step on the ProgressIndicator component
+         */
+        currentStep: PropTypes.Validator<number>;
+        /**
+         * The step data that renders the progress items
+         */
+        stepData: PropTypes.Requireable<(PropTypes.InferProps<{
             introStep: PropTypes.Requireable<boolean>;
             secondaryLabel: PropTypes.Requireable<string>;
             shouldIncludeStep: PropTypes.Requireable<boolean>;
             title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         }> | null | undefined)[]>;
-        let title: PropTypes.Requireable<string>;
-    }
-}
-declare const componentName: "CreateInfluencer";
-import PropTypes from 'prop-types';
+        /**
+         * The main title of the full page, displayed in the influencer area.
+         */
+        title: PropTypes.Requireable<string>;
+    };
+};
 export {};

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

@@ -1,5 +1,70 @@
 /**
- * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
+ * 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 let DataSpreadsheet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+import { Column, Size, Theme } from './types';
+interface DataSpreadsheetProps {
+    /**
+     * Specifies the cell height
+     */
+    cellSize?: Size;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The data that will build the column headers
+     */
+    columns?: readonly Column[];
+    /**
+     * The spreadsheet data that will be rendered in the body of the spreadsheet component
+     */
+    data?: readonly object[];
+    /**
+     * Sets the number of empty rows to be created when there is no data provided
+     */
+    defaultEmptyRowCount?: number;
+    /**
+     * The spreadsheet id
+     */
+    id?: number | string;
+    /**
+     * The event handler that is called when the active cell changes
+     */
+    onActiveCellChange?: () => void;
+    /**
+     * The setter fn for the data prop
+     */
+    onDataUpdate?: ({ ...args }: {
+        [x: string]: any;
+    }) => void;
+    /**
+     * The event handler that is called when the selection area values change
+     */
+    onSelectionAreaChange?: () => void;
+    /**
+     * The aria label applied to the Select all button
+     */
+    selectAllAriaLabel: string;
+    /**
+     * The aria label applied to the Data spreadsheet component
+     */
+    spreadsheetAriaLabel: string;
+    /**
+     * The theme the DataSpreadsheet should use (only used to render active cell/selection area colors on dark theme)
+     */
+    theme?: Theme;
+    /**
+     * The total number of columns to be initially visible, additional columns will be rendered and
+     * visible via horizontal scrollbar
+     */
+    totalVisibleColumns?: number;
+}
+/**
+ * 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

@@ -33,14 +33,12 @@ import { useMoveActiveCell } from './hooks/useMoveActiveCell.js';
 import { useSpreadsheetEdit } from './hooks/useSpreadsheetEdit.js';
 
 var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "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';
 
 // Default values for props
 var defaults = {
-  cellSize: 'sm',
   columns: Object.freeze([]),
   data: Object.freeze([]),
   defaultEmptyRowCount: 16,
@@ -49,13 +47,12 @@ var defaults = {
   onSelectionAreaChange: Object.freeze(function () {}),
   theme: 'light'
 };
-
 /**
  * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
  */
 var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$cellSize = _ref.cellSize,
-    cellSize = _ref$cellSize === void 0 ? defaults.cellSize : _ref$cellSize,
+    cellSize = _ref$cellSize === void 0 ? 'sm' : _ref$cellSize,
     className = _ref.className,
     _ref$columns = _ref.columns,
     columns = _ref$columns === void 0 ? defaults.columns : _ref$columns,
@@ -75,7 +72,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     theme = _ref.theme,
     totalVisibleColumns = _ref.totalVisibleColumns,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var multiKeyTrackingRef = useRef();
+  var multiKeyTrackingRef = useRef(null);
   var localRef = useRef();
   var spreadsheetRef = ref || localRef;
   var focusedElement = useActiveElement();
@@ -115,7 +112,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     _useState18 = _slicedToArray(_useState17, 2),
     headerCellHoldActive = _useState18[0],
     setHeaderCellHoldActive = _useState18[1];
-  var _useState19 = useState(null),
+  var _useState19 = useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
     isActiveHeaderCellChanged = _useState20[0],
     setIsActiveHeaderCellChanged = _useState20[1];
@@ -126,10 +123,10 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   var previousState = usePreviousValue({
     activeCellCoordinates: activeCellCoordinates,
     isEditing: isEditing
-  });
+  }) || {};
   var cellSizeValue = getCellSize(cellSize);
   var cellEditorRef = useRef();
-  var _useState23 = useState(),
+  var _useState23 = useState(null),
     _useState24 = _slicedToArray(_useState23, 2),
     activeCellContent = _useState24[0],
     setActiveCellContent = _useState24[1];
@@ -180,13 +177,18 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
 
   // Removes the active cell element
   var removeActiveCell = useCallback(function () {
-    var activeCellHighlight = spreadsheetRef.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
-    activeCellHighlight.style.display = 'none';
+    var _current;
+    var activeCellHighlight = spreadsheetRef === null || spreadsheetRef === void 0 || (_current = spreadsheetRef.current) === null || _current === void 0 ? void 0 : _current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
+    if (activeCellHighlight) {
+      activeCellHighlight.style.display = 'none';
+    }
   }, [spreadsheetRef]);
   var removeCellEditor = useCallback(function () {
     setCellEditorValue('');
     setIsEditing(false);
-    cellEditorRef.current.style.display = 'none';
+    if (cellEditorRef !== null && cellEditorRef !== void 0 && cellEditorRef.current) {
+      cellEditorRef.current.style.display = 'none';
+    }
   }, []);
 
   // Remove cell editor if the active cell coordinates change and save with new cell data, this will
@@ -196,8 +198,10 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     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];
       removeCellEditor();
-      updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id);
-      cellEditorRulerRef.current.textContent = '';
+      updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id, undefined);
+      if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+        cellEditorRulerRef.current.textContent = '';
+      }
     }
     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)) {
       if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
@@ -242,7 +246,6 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     setActiveCellCoordinates: setActiveCellCoordinates,
     setSelectionAreas: setSelectionAreas,
     removeActiveCell: removeActiveCell,
-    removeCellSelections: removeCellSelections,
     setContainerHasFocus: setContainerHasFocus,
     removeCellEditor: removeCellEditor
   });
@@ -297,6 +300,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       }
     });
     removeCellSelections({
+      matcher: undefined,
       spreadsheetRef: spreadsheetRef
     });
   }, [activeCellCoordinates, updateActiveCellCoordinates, spreadsheetRef, columns.length]);
@@ -304,7 +308,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     return isEditing || key === 'Meta' || key === 'Control';
   }, [isEditing]);
   var handleArrowKeyPress = useCallback(function (arrowKey) {
-    event.preventDefault();
+    var _event;
+    (_event = event) === null || _event === void 0 || _event.preventDefault();
     handleInitialArrowPress();
     var coordinatesClone = _objectSpread2({}, activeCellCoordinates);
     var updatedValue;
@@ -407,18 +412,28 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     setIsEditing(true);
     setClickAndHoldActive(false);
     var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
-    var activeCellValue = activeCellFullData ? activeCellFullData.row.cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column].value : null;
+    var activeCellValue;
+    if (activeCellFullData && activeCellCoordinates !== null && activeCellCoordinates !== void 0 && activeCellCoordinates.column) {
+      var _activeCellFullData$r;
+      activeCellValue = activeCellFullData ? (_activeCellFullData$r = activeCellFullData.row.cells) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r === void 0 ? void 0 : _activeCellFullData$r.value : null;
+    }
     setCellEditorValue(activeCellValue || '');
-    cellEditorRulerRef.current.textContent = activeCellValue;
-    cellEditorRef.current.style.width = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.width;
+    if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+      cellEditorRulerRef.current.textContent = activeCellValue;
+    }
+    if (cellEditorRef !== null && cellEditorRef !== void 0 && cellEditorRef.current && activeCellRef !== null && activeCellRef !== void 0 && activeCellRef.current) {
+      var _activeCellRef$curren;
+      cellEditorRef.current.style.width = activeCellRef === null || activeCellRef === void 0 || (_activeCellRef$curren = activeCellRef.current) === null || _activeCellRef$curren === void 0 || (_activeCellRef$curren = _activeCellRef$curren.style) === null || _activeCellRef$curren === void 0 ? void 0 : _activeCellRef$curren.width;
+    }
   };
 
   // Sets the initial placement of the cell editor cursor at the end of the text area
   // this is not done for us by default in Safari
   useEffect(function () {
     if (isEditing && !(previousState !== null && previousState !== void 0 && previousState.isEditing)) {
-      cellEditorRef.current.setSelectionRange(cellEditorRulerRef.current.textContent.length, cellEditorRulerRef.current.textContent.length);
-      cellEditorRef.current.focus();
+      var _cellEditorRef$curren, _cellEditorRulerRef$c, _cellEditorRulerRef$c2, _cellEditorRef$curren2;
+      cellEditorRef === null || cellEditorRef === void 0 || (_cellEditorRef$curren = cellEditorRef.current) === null || _cellEditorRef$curren === void 0 || _cellEditorRef$curren.setSelectionRange(Number(cellEditorRulerRef === null || cellEditorRulerRef === void 0 || (_cellEditorRulerRef$c = cellEditorRulerRef.current) === null || _cellEditorRulerRef$c === void 0 || (_cellEditorRulerRef$c = _cellEditorRulerRef$c.textContent) === null || _cellEditorRulerRef$c === void 0 ? void 0 : _cellEditorRulerRef$c.length), Number(cellEditorRulerRef === null || cellEditorRulerRef === void 0 || (_cellEditorRulerRef$c2 = cellEditorRulerRef.current) === null || _cellEditorRulerRef$c2 === void 0 || (_cellEditorRulerRef$c2 = _cellEditorRulerRef$c2.textContent) === null || _cellEditorRulerRef$c2 === void 0 ? void 0 : _cellEditorRulerRef$c2.length));
+      cellEditorRef === null || cellEditorRef === void 0 || (_cellEditorRef$curren2 = cellEditorRef.current) === null || _cellEditorRef$curren2 === void 0 || _cellEditorRef$curren2.focus();
     }
   }, [isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing]);
   var handleActiveCellClick = function handleActiveCellClick() {
@@ -429,7 +444,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       }
       handleRowColumnHeaderClick({
         isKeyboard: false,
-        index: indexValue
+        index: Number(indexValue)
       });
     }
     return;
@@ -446,6 +461,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       var tempMatcher = uuidv4();
       setClickAndHoldActive(true);
       removeCellSelections({
+        matcher: null,
         spreadsheetRef: spreadsheetRef
       });
       setSelectionAreas([{
@@ -476,19 +492,21 @@ 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 ? null : _ref5$index;
+      index = _ref5$index === void 0 ? -1 : _ref5$index;
     var handleHeaderCellProps = {
       activeCellCoordinates: activeCellCoordinates,
       rows: rows,
       columns: columns,
+      currentMatcher: currentMatcher,
       setActiveCellCoordinates: setActiveCellCoordinates,
       setCurrentMatcher: setCurrentMatcher,
       setSelectionAreas: setSelectionAreas,
       spreadsheetRef: spreadsheetRef,
+      index: index,
       isKeyboard: isKeyboard,
       setSelectionAreaData: setSelectionAreaData,
-      index: index,
-      currentMatcher: currentMatcher
+      isHoldingCommandKey: null,
+      isHoldingShiftKey: null
     };
     // Select an entire column
     if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
@@ -612,7 +630,6 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     setContainerHasFocus: setContainerHasFocus,
     selectionAreas: selectionAreas,
     setSelectionAreas: setSelectionAreas,
-    cellSize: cellSize,
     headerGroups: headerGroups,
     defaultColumn: defaultColumn,
     getTableBodyProps: getTableBodyProps,
@@ -662,10 +679,12 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     }),
     onChange: function onChange(event) {
       setCellEditorValue(event.target.value);
-      cellEditorRulerRef.current.textContent = event.target.value;
+      if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+        cellEditorRulerRef.current.textContent = event.target.value;
+      }
     },
     ref: cellEditorRef,
-    "aria-labelledby": activeCellCoordinates ? "".concat(blockClass, "__cell--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) : null,
+    "aria-labelledby": activeCellCoordinates ? "".concat(blockClass, "__cell--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) : '',
     className: cx("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), _defineProperty({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
   }), /*#__PURE__*/React__default.createElement("pre", {
     "aria-hidden": true,
@@ -696,6 +715,7 @@ DataSpreadsheet.propTypes = {
   /**
    * The data that will build the column headers
    */
+  /**@ts-ignore */
   columns: PropTypes.arrayOf(PropTypes.shape({
     Header: PropTypes.string,
     accessor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
@@ -704,6 +724,7 @@ DataSpreadsheet.propTypes = {
   /**
    * The spreadsheet data that will be rendered in the body of the spreadsheet component
    */
+  /**@ts-ignore */
   data: PropTypes.arrayOf(PropTypes.shape),
   /**
    * Sets the number of empty rows to be created when there is no data provided

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

@@ -1,2 +1,139 @@
-export const DataSpreadsheetBody: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/**
+ * 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.
+ */
+import React, { Dispatch, SetStateAction, MutableRefObject } from 'react';
+import { ActiveCellCoordinates, Column } from './types';
+interface DataSpreadsheetBodyProps {
+    /**
+     * Object containing the active cell coordinates
+     */
+    activeCellCoordinates?: ActiveCellCoordinates | null;
+    /**
+     *This is the ref of the button input, which is the active cell element
+     */
+    activeCellRef?: MutableRefObject<HTMLElement | undefined>;
+    /**
+     * Is the user clicking and holding in the data spreadsheet body
+     */
+    clickAndHoldActive?: boolean;
+    /**
+     * All of the spreadsheet columns
+     */
+    columns?: readonly Column[];
+    /**
+     * This represents the id of the current cell selection area
+     */
+    currentMatcher?: string;
+    /**
+     * Default spreadsheet sizing values
+     */
+    defaultColumn?: Column;
+    /**
+     * Sets the number of empty rows to be created when there is no data provided
+     */
+    defaultEmptyRowCount?: number;
+    /**
+     * Function to set table body prop values
+     */
+    getTableBodyProps?: () => {
+        data: any;
+    };
+    /**
+     * Headers provided from useTable hook
+     */
+    headerGroups?: any[];
+    /**
+     * The spreadsheet id
+     */
+    id?: number | string;
+    /**
+     * The event handler that is called when the active cell changes
+     */
+    onActiveCellChange?: () => void;
+    /**
+     * The event handler that is called to set the rows for the empty spreadsheet
+     */
+    onDataUpdate?: ({ ...args }: {
+        [x: string]: any;
+    }) => void;
+    /**
+     * The event handler that is called when the selection areas change
+     */
+    onSelectionAreaChange?: ({ ...args }: {
+        [x: string]: any;
+    }) => void;
+    /**
+     * Prepare row function from react-table
+     */
+    prepareRow?: (...args: any[]) => void;
+    /**
+     * All of the spreadsheet row data
+     */
+    rows?: any[];
+    /**
+     * The scrollbar width
+     */
+    scrollBarSize?: number;
+    /**
+     * Array of selection area data
+     */
+    selectionAreaData?: object[];
+    /**
+     * Array of selection areas
+     */
+    selectionAreas?: any[];
+    /**
+     * Setter fn for activeCellCoordinates state value
+     */
+    setActiveCellCoordinates?: Dispatch<SetStateAction<ActiveCellCoordinates | null>>;
+    /**
+     * Setter fn for active cell inside of selection area
+     */
+    setActiveCellInsideSelectionArea?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Setter fn for clickAndHold state value
+     */
+    setClickAndHoldActive?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Setter fn for column ordering, provided from react-table
+     */
+    setColumnOrder?: () => void;
+    /**
+     * Setter fn for containerHasFocus state value
+     */
+    setContainerHasFocus?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Setter fn for currentMatcher state value
+     */
+    setCurrentMatcher?: Dispatch<SetStateAction<string>>;
+    /**
+     * Setter fn for header cell hold active value
+     */
+    setHeaderCellHoldActive?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Setter fn for selectionAreaData state value
+     */
+    setSelectionAreaData?: Dispatch<SetStateAction<object[]>>;
+    /**
+     * Setter fn for selectionAreas state value
+     */
+    setSelectionAreas?: Dispatch<SetStateAction<object[]>>;
+    /**
+     * The total columns width
+     */
+    totalColumnsWidth?: number;
+    /**
+     * The total number of columns to be initially visible, additional columns will be rendered and
+     * visible via horizontal scrollbar
+     */
+    totalVisibleColumns?: number;
+    /**
+     * Prop from react-table used to reorder columns
+     */
+    visibleColumns?: [];
+}
+export declare const DataSpreadsheetBody: React.ForwardRefExoticComponent<DataSpreadsheetBodyProps & React.RefAttributes<HTMLDivElement>>;
+export {};