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

package/es/components/Guidebanner/Guidebanner.js

@@ -14,6 +14,7 @@ import { Idea, CaretLeft, CaretRight, Close } from '@carbon/react/icons';
 import { Button, IconButton } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
+import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { Carousel } from '../Carousel/Carousel.js';
 
 var _CaretLeft, _CaretRight, _Close;
@@ -76,8 +77,9 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       return !prevState;
     });
   };
+  var carouselContentId = "".concat(uuidv4(), "--carousel-content-id");
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    "aria-expanded": !isCollapsed,
+    "aria-owns": !isCollapsed ? carouselContentId : undefined,
     className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), withLeftGutter && "".concat(blockClass, "__with-left-gutter")),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(Idea, {
@@ -86,6 +88,7 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__title")
   }, title), /*#__PURE__*/React__default.createElement(Carousel, {
+    id: carouselContentId,
     className: "".concat(blockClass, "__carousel")
     // These colors are to match the Carousel's faded edges
     // against the Guidebanner's gradient background.
@@ -108,7 +111,9 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     size: "md",
     className: "".concat(blockClass, "__toggle-button"),
     onClick: handleClickToggle,
-    ref: toggleRef
+    ref: toggleRef,
+    "aria-controls": !isCollapsed ? carouselContentId : undefined,
+    "aria-expanded": !isCollapsed
   }, isCollapsed ? expandButtonLabel : collapseButtonLabel), showNavigation && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
     className: cx("".concat(blockClass, "__back-button"), [scrollPosition === 0 ? "".concat(blockClass, "__back-button--disabled") : null])
   }, /*#__PURE__*/React__default.createElement(IconButton, {

package/es/components/ProductiveCard/ProductiveCard.d.ts

@@ -1,2 +1,115 @@
-export let ProductiveCard: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+type ActionIcon = {
+    id?: string;
+    icon?: CarbonIconType;
+    onKeyDown?(): void;
+    onClick?(): void;
+    iconDescription?: string;
+    href?: string;
+};
+type overflowAction = {
+    id?: string;
+    itemText?: string;
+    onClick?: () => void;
+    onKeydown?: () => void;
+};
+type PlacementType = 'top' | 'bottom';
+type ClickZoneType = 'one' | 'two' | 'three';
+interface ProductiveCardProps extends PropsWithChildren {
+    /**
+     * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
+     */
+    actionIcons?: ActionIcon[];
+    /**
+     * Determines if the action icons are on the top or bottom of the card
+     */
+    actionsPlacement?: PlacementType;
+    /**
+     * Content that shows in the body of the card
+     */
+    /**
+     * Optional user provided class
+     */
+    className?: string;
+    children: ReactNode;
+    /**
+     * Designates which zones of the card are clickable. Refer to design documentation for implementation guidelines
+     */
+    clickZone?: ClickZoneType;
+    /**
+     * Optional header description
+     */
+    description?: string | object | ReactNode;
+    /**
+     * Optional label for the top of the card
+     */
+    label?: string | object | ReactNode;
+    /**
+     * Provides the callback for a clickable card
+     */
+    onClick?: () => void;
+    /**
+     * Function that's called from the primary button or action icon
+     */
+    onPrimaryButtonClick?: () => void;
+    /**
+     * Function that's called from the secondary button
+     */
+    onSecondaryButtonClick?: () => void;
+    /**
+     * Use an overflow menu instead of action icons. Refer to design documentation for implementation guidelines
+     */
+    overflowActions?: overflowAction[];
+    /**
+     * Aria label prop required for OverflowMenu
+     */
+    overflowAriaLabel?: string;
+    /**
+     * Optionally specify an href for your Button to become an <a> element
+     */
+    primaryButtonHref?: string;
+    /**
+     * Optional prop to allow overriding the icon rendering. Can be a React component class
+     */
+    primaryButtonIcon?: CarbonIconType;
+    /**
+     * Determines if the primary button is on the top or bottom of the card
+     */
+    primaryButtonPlacement?: PlacementType;
+    /**
+     * The text that's displayed in the primary button
+     */
+    primaryButtonText?: string;
+    /**
+     * Optionally specify an href for your Button to become an <a> element
+     */
+    secondaryButtonHref?: string;
+    /**
+     * Optional prop to allow overriding the icon rendering. Can be a React component class
+     */
+    secondaryButtonIcon?: CarbonIconType;
+    /**
+     * Determines if the secondary button is on the top or bottom of the card
+     */
+    secondaryButtonPlacement?: PlacementType;
+    /**
+     * The text that's displayed in the secondary button
+     */
+    secondaryButtonText?: string;
+    /**
+     * **Experimental:** For all cases a `Slug` component can be provided.
+     * Clickable tiles only accept a boolean value of true and display a hollow slug.
+     */
+    slug?: ReactNode | boolean;
+    /**
+     * Title that's displayed at the top of the card
+     */
+    title?: string | object | ReactNode;
+    /**
+     * Determines title size
+     */
+    titleSize?: 'default' | 'large';
+}
+export declare let ProductiveCard: React.ForwardRefExoticComponent<ProductiveCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/ProductiveCard/ProductiveCard.js

@@ -15,22 +15,16 @@ import { Card } from '../Card/Card.js';
 
 var _excluded = ["actionsPlacement"];
 var componentName = 'ProductiveCard';
-
-// Default values for props
-var defaults = {
-  actionsPlacement: 'top'
-};
 var ProductiveCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$actionsPlacement = _ref.actionsPlacement,
-    actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
+    actionsPlacement = _ref$actionsPlacement === void 0 ? 'top' : _ref$actionsPlacement,
     rest = _objectWithoutProperties(_ref, _excluded);
   var validProps = prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
   return /*#__PURE__*/React__default.createElement(Card, _extends({}, _objectSpread2(_objectSpread2({}, validProps), {}, {
     actionsPlacement: actionsPlacement,
-    ref: ref
-  }), {
+    ref: ref,
     productive: true
-  }, getDevtoolsProps(componentName)));
+  }), getDevtoolsProps(componentName)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -39,6 +33,7 @@ ProductiveCard.propTypes = {
   /**
    * Icons that are displayed on card. Refer to design documentation for implementation guidelines
    */
+  /**@ts-ignore */
   actionIcons: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -86,6 +81,7 @@ ProductiveCard.propTypes = {
   /**
    * Use an overflow menu instead of action icons. Refer to design documentation for implementation guidelines
    */
+  /**@ts-ignore */
   overflowActions: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     itemText: PropTypes.string,
@@ -103,6 +99,7 @@ ProductiveCard.propTypes = {
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
+  /**@ts-ignore */
   primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Determines if the primary button is on the top or bottom of the card
@@ -111,6 +108,7 @@ ProductiveCard.propTypes = {
   /**
    * The text that's displayed in the primary button
    */
+  /**@ts-ignore */
   primaryButtonText: PropTypes.node,
   /**
    * Optionally specify an href for your Button to become an <a> element
@@ -119,6 +117,7 @@ ProductiveCard.propTypes = {
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
+  /**@ts-ignore */
   secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Determines if the secondary button is on the top or bottom of the card
@@ -127,6 +126,7 @@ ProductiveCard.propTypes = {
   /**
    * The text that's displayed in the secondary button
    */
+  /**@ts-ignore */
   secondaryButtonText: PropTypes.node,
   /**
    * **Experimental:** For all cases a `Slug` component can be provided.

package/es/components/WebTerminal/WebTerminal.js

@@ -60,7 +60,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       matches: true
     },
     prefersReducedMotion = _ref2.matches;
-  var webTerminalAnimationName = "".concat(open ? 'web-terminal-entrance' : 'web-terminal-exit', " ").concat(moderate02);
+  var webTerminalAnimationName = "".concat(open ? 'web-terminal-entrance' : 'web-terminal-exit forwards', " ").concat(moderate02);
   var showDocumentationLinks = useMemo(function () {
     return documentationLinks.length > 0;
   }, [documentationLinks]);

package/es/global/js/hooks/usePreviousValue.d.ts

@@ -1 +1 @@
-export function usePreviousValue(value: object): undefined;
+export function usePreviousValue(value: object): T | undefined;

package/es/global/js/hooks/usePreviousValue.js

@@ -8,8 +8,9 @@
 import { useRef, useEffect } from 'react';
 
 /**
- * Returns the previous state values included in the param
- * @param {object} value
+ * Returns the previous state value included in the param
+ * @param {object} value - The current value of any type.
+ * @returns {T | undefined} - The previous value of the same type, or undefined if there is none
  */
 var usePreviousValue = function usePreviousValue(value) {
   var ref = useRef();

package/es/global/js/hooks/useRetrieveStepData.d.ts

@@ -1,9 +1,9 @@
 export function useRetrieveStepData({ stepsContext, stepNumber, introStep, invalid, shouldIncludeStep, secondaryLabel, title, }: {
     stepsContext: object;
     stepNumber: number;
-    introStep: boolean;
-    invalid: boolean;
-    shouldIncludeStep: boolean;
-    secondaryLabel: string;
-    title: React.ReactNode;
+    introStep: boolean | undefined;
+    invalid: boolean | undefined;
+    shouldIncludeStep: boolean | undefined;
+    secondaryLabel: string | undefined;
+    title: string | React.ReactNode;
 }): void;

package/es/global/js/hooks/useRetrieveStepData.js

@@ -14,11 +14,11 @@ import { useEffect } from 'react';
  * @param {object} useResetCreateComponent
  * @param {object} useResetCreateComponent.stepsContext
  * @param {number} useResetCreateComponent.stepNumber
- * @param {boolean} useResetCreateComponent.introStep
- * @param {boolean} useResetCreateComponent.invalid
- * @param {boolean} useResetCreateComponent.shouldIncludeStep
- * @param {string} useResetCreateComponent.secondaryLabel
- * @param {React.ReactNode} useResetCreateComponent.title
+ * @param {boolean | undefined} useResetCreateComponent.introStep
+ * @param {boolean | undefined} useResetCreateComponent.invalid
+ * @param {boolean | undefined} useResetCreateComponent.shouldIncludeStep
+ * @param {string | undefined } useResetCreateComponent.secondaryLabel
+ * @param {string | React.ReactNode} useResetCreateComponent.title
  */
 var useRetrieveStepData = function useRetrieveStepData(_ref) {
   var stepsContext = _ref.stepsContext,

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>>;