@carbon/ibm-products 2.38.0 → 2.40.0

package/es/components/Checklist/Checklist.js

@@ -16,6 +16,7 @@ import { IconButton, Button } from '@carbon/react';
 import { ChevronUp } from '@carbon/react/icons';
 import { ChecklistIcon } from './ChecklistIcon.js';
 import { ChecklistChart } from './ChecklistChart.js';
+import { Themes, Kinds } from './Checklist.types.js';
 
 var _excluded = ["chartValue", "chartLabel", "checklistAriaLabel", "checklistToggleAriaLabel", "className", "onClickViewAll", "onToggle", "open", "enableToggle", "taskLists", "theme", "title", "toggleLabel", "toggleLabelAlign", "viewAllLabel"];
 
@@ -43,7 +44,7 @@ var defaults = {
   open: true,
   enableToggle: true,
   taskLists: [],
-  theme: 'light',
+  theme: Themes.light,
   toggleLabel: 'Toggle',
   toggleLabelAlign: 'top'
 };
@@ -167,11 +168,13 @@ var Checklist = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         className: "".concat(blockClass, "__list-item"),
         key: "".concat(item.label, "-").concat(index)
       }, /*#__PURE__*/React__default.createElement(ChecklistIcon, {
-        kind: item.kind
+        kind: item.kind,
+        theme: theme
       }), typeof item.onClick === 'function' ? /*#__PURE__*/React__default.createElement(Button, {
         className: cx("".concat(blockClass, "__button"), _defineProperty({}, "".concat(blockClass, "__button--error"), item.kind === 'error')),
         onClick: function onClick() {
-          item.onClick(item);
+          var _item$onClick;
+          (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, item);
         },
         size: "sm",
         title: item.label
@@ -247,10 +250,11 @@ Checklist.propTypes = {
    * then the `label` will be rendered as a button,
    * else the `label` will be rendered as plain text.
    */
+  /**@ts-ignore */
   taskLists: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string,
     tasks: PropTypes.arrayOf(PropTypes.shape({
-      kind: PropTypes.oneOf(['unchecked', 'indeterminate', 'checked', 'disabled', 'error']).isRequired,
+      kind: PropTypes.oneOf([Kinds.unchecked, Kinds.indeterminate, Kinds.checked, Kinds.disabled, Kinds.error]).isRequired,
       label: PropTypes.string.isRequired,
       onClick: PropTypes.func
     })).isRequired
@@ -258,7 +262,7 @@ Checklist.propTypes = {
   /**
    * Determines the theme of the component.
    */
-  theme: PropTypes.oneOf(['light', 'dark']),
+  theme: PropTypes.oneOf([Themes.light, Themes.dark]),
   /**
    * The title of the component.
    */

package/es/components/Checklist/Checklist.types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare enum Themes {
+    light = "light",
+    dark = "dark"
+}
+export type Theme = Themes.light | Themes.dark;
+export declare enum Kinds {
+    unchecked = "unchecked",
+    indeterminate = "indeterminate",
+    checked = "checked",
+    disabled = "disabled",
+    error = "error"
+}
+export type Kind = Kinds.unchecked | Kinds.indeterminate | Kinds.checked | Kinds.disabled | Kinds.error;

package/es/components/Checklist/Checklist.types.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var Themes = /*#__PURE__*/function (Themes) {
+  Themes["light"] = "light";
+  Themes["dark"] = "dark";
+  return Themes;
+}({});
+var Kinds = /*#__PURE__*/function (Kinds) {
+  Kinds["unchecked"] = "unchecked";
+  Kinds["indeterminate"] = "indeterminate";
+  Kinds["checked"] = "checked";
+  Kinds["disabled"] = "disabled";
+  Kinds["error"] = "error";
+  return Kinds;
+}({});
+
+export { Kinds, Themes };

package/es/components/Checklist/ChecklistChart.d.ts

@@ -1,5 +1,9 @@
 /**
  * Custom chart component used within Checklist PLG component
  */
-export let ChecklistChart: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export let ChecklistChart: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    value: number;
+    theme?: import("./Checklist.types").Theme | undefined;
+} & React.RefAttributes<any>>;
 import React from 'react';

package/es/components/Checklist/ChecklistChart.js

@@ -13,25 +13,30 @@ import clamp from 'lodash/clamp';
 import { gray20, gray70, purple50 } from '../../node_modules/@carbon/colors/es/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
+import { Themes } from './Checklist.types.js';
 
 var _excluded = ["className", "value", "theme"];
 var blockClass = "".concat(pkg.prefix, "--checklist__chart");
 var componentName = 'ChecklistChart';
 var defaults = {
-  theme: 'light'
+  theme: Themes.light
 };
 
 /**
  * Custom chart component used within Checklist PLG component
  */
-var ChecklistChart = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var ChecklistChart = /*#__PURE__*/React__default.forwardRef(
+/**
+ * @param {{className?: string, value: number, theme?: import('./Checklist.types').Theme}} props type description
+ */
+function (_ref, ref) {
   var className = _ref.className,
     value = _ref.value,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _objectWithoutProperties(_ref, _excluded);
   var numDegrees = clamp(value * 360, 0, 360);
-  var circleColor = theme === 'light' ? gray20 : gray70; // $ui-03 (-ish)
+  var circleColor = theme === Themes.light ? gray20 : gray70; // $ui-03 (-ish)
   var progressColor = purple50;
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className),
@@ -56,7 +61,7 @@ ChecklistChart.propTypes = {
   /**
    * Determines the theme of the component.
    */
-  theme: PropTypes.oneOf(['light', 'dark']),
+  theme: PropTypes.oneOf([Themes.light, Themes.dark]),
   /**
    * Number between 0 and 1.
    */

package/es/components/Checklist/ChecklistIcon.d.ts

@@ -1,5 +1,9 @@
 /**
  * TODO: A description of the component.
  */
-export let ChecklistIcon: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export let ChecklistIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    kind?: import("./Checklist.types").Kind | undefined;
+    theme?: import("./Checklist.types").Theme | undefined;
+} & React.RefAttributes<any>>;
 import React from 'react';

package/es/components/Checklist/ChecklistIcon.js

@@ -12,6 +12,7 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { CircleDash, CheckmarkOutline, Incomplete, Warning } from '@carbon/react/icons';
+import { Themes, Kinds } from './Checklist.types.js';
 
 var _excluded = ["className", "kind", "theme"];
 
@@ -32,13 +33,17 @@ var componentName = 'ChecklistIcon';
 
 // Default values for props
 var defaults = {
-  theme: 'light'
+  theme: Themes.light
 };
 
 /**
  * TODO: A description of the component.
  */
-var ChecklistIcon = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var ChecklistIcon = /*#__PURE__*/React__default.forwardRef(
+/**
+ * @param {{className?: string, kind?: import('./Checklist.types').Kind, theme?: import('./Checklist.types').Theme}} props type description
+ */
+function (_ref, ref) {
   var className = _ref.className,
     kind = _ref.kind,
     _ref$theme = _ref.theme,
@@ -86,11 +91,11 @@ ChecklistIcon.propTypes = {
   /**
    * The icon to be displayed.
    */
-  kind: PropTypes.oneOf(['unchecked', 'indeterminate', 'checked', 'disabled', 'error']),
+  kind: PropTypes.oneOf([Kinds.unchecked, Kinds.indeterminate, Kinds.checked, Kinds.disabled, Kinds.error]),
   /**
    * Determines the theme of the component.
    */
-  theme: PropTypes.oneOf(['light', 'dark'])
+  theme: PropTypes.oneOf([Themes.light, Themes.dark])
 };
 
 export { ChecklistIcon };

package/es/components/CoachmarkButton/CoachmarkButton.d.ts

@@ -1,5 +1,22 @@
 /**
- * Use CoachmarkButton for the target prop of a Coachmark component.
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-export let CoachmarkButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+interface CoachmarkButtonProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The aria label.
+     */
+    label: string;
+}
+/**
+ * Use CoachmarkButton for the target prop of a Coachmark component.
+ */
+export declare let CoachmarkButton: React.ForwardRefExoticComponent<CoachmarkButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts

@@ -1,6 +1,50 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+interface CoachmarkOverlayElementsProps {
+    /**
+     * CoachmarkOverlayElements should be used with one or many CoachmarkOverlayElement components as children.
+     * @see CoachmarkOverlayElement
+     */
+    children: ReactNode;
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * The visibility of CoachmarkOverlayElements is
+     * managed in the parent component.
+     */
+    isVisible?: boolean;
+    /**
+     * The object describing an image in one of two shapes.
+     * If a single media element is required, use `{render}`.
+     * If a stepped animation is required, use `{filePaths}`.
+     */
+    media?: {
+        render?: () => ReactNode;
+        filePaths?: string[];
+    };
+    /**
+     * The label for the Next button.
+     */
+    nextButtonText?: string;
+    /**
+     * The label for the Previous button.
+     */
+    previousButtonLabel?: string;
+    /**
+     * The label for the Close button.
+     */
+    closeButtonLabel?: string;
+}
 /**
  * Composable container to allow for the displaying of CoachmarkOverlayElement
  * components in a carousel fashion.
  */
-export let CoachmarkOverlayElements: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkOverlayElements: React.ForwardRefExoticComponent<CoachmarkOverlayElementsProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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/CreateInfluencer/CreateInfluencer.js

@@ -62,7 +62,7 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
       return /*#__PURE__*/React__default.createElement(ProgressStep, {
         label: step.title,
         key: stepIndex,
-        secondaryLabel: step.secondaryLabel,
+        secondaryLabel: step.secondaryLabel || undefined,
         invalid: step.invalid
       });
     })));

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

@@ -1,2 +1,95 @@
-export let CreateTearsheetStep: 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 } from 'react';
+type fieldsetLegendTextProps = {
+    /**
+     * This optional prop will render your form content inside of a fieldset html element
+     * and is defaulted to true.
+     * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's step content.
+     */
+    hasFieldset: false;
+    /**
+     * This is the required legend text that appears above a fieldset html element for accessibility purposes.
+     * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
+     * Otherwise, use CSS to hide/remove this label text.
+     */
+    fieldsetLegendText?: string;
+} | {
+    /**
+     * This optional prop will render your form content inside of a fieldset html element
+     * and is defaulted to true.
+     * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's step content.
+     */
+    hasFieldset?: true;
+    /**
+     * This is the required legend text that appears above a fieldset html element for accessibility purposes.
+     * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
+     * Otherwise, use CSS to hide/remove this label text.
+     */
+    fieldsetLegendText: string;
+};
+interface CreateTearsheetStepBaseProps extends PropsWithChildren {
+    /**
+     * Content that shows in the tearsheet step
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets an optional className to be added to the tearsheet step
+     */
+    className?: string;
+    /**
+     * Sets an optional description on the step component
+     */
+    description?: React.ReactNode;
+    /**
+     * This will conditionally disable the submit button in the multi step Tearsheet
+     */
+    disableSubmit?: 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 when you move to the next step.
+     * 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 CreateTearsheet will handle the submitting state of the next button.
+     */
+    onNext?: () => Promise<void>;
+    /**
+     * Optional function to be called when you move to the previous step.
+     */
+    onPrevious?: () => void;
+    /**
+     * Sets the optional secondary label on the progress step component
+     */
+    secondaryLabel?: string;
+    /**
+     * Sets an optional subtitle on the step component
+     */
+    subtitle?: string;
+    /**
+     * Sets the title text for a tearsheet step
+     */
+    title: React.ReactNode;
+}
+type CreateTearsheetStepProps = CreateTearsheetStepBaseProps & fieldsetLegendTextProps;
+export declare let CreateTearsheetStep: React.ForwardRefExoticComponent<CreateTearsheetStepProps & React.RefAttributes<unknown>>;
+export {};

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -46,7 +46,7 @@ var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var stepsContext = useContext(StepsContext);
   var stepNumber = useContext(StepNumberContext);
-  var _useState = useState(),
+  var _useState = useState(includeStep),
     _useState2 = _slicedToArray(_useState, 2),
     shouldIncludeStep = _useState2[0],
     setShouldIncludeStep = _useState2[1];
@@ -56,11 +56,11 @@ var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
   useRetrieveStepData({
     stepsContext: stepsContext,
     stepNumber: stepNumber,
-    introStep: introStep,
+    introStep: !!introStep,
     shouldIncludeStep: shouldIncludeStep,
-    secondaryLabel: secondaryLabel,
+    secondaryLabel: secondaryLabel || '',
     title: title,
-    invalid: invalid
+    invalid: !!invalid
   });
 
   // This useEffect reports back the onMount value so that they can be used
@@ -80,7 +80,7 @@ var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // steps container context so that it can manage the 'Next' button appropriately.
   useEffect(function () {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
-      stepsContext.setIsDisabled(disableSubmit);
+      stepsContext.setIsDisabled(!!disableSubmit);
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnPrevious(onPrevious);
     }
@@ -144,6 +144,7 @@ CreateTearsheetStep.propTypes = {
    * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
    * Otherwise, use CSS to hide/remove this label text.
    */
+  /**@ts-ignore*/
   fieldsetLegendText: PropTypes.string.isRequired.if(function (_ref2) {
     var hasFieldset = _ref2.hasFieldset;
     return !!hasFieldset;
@@ -153,6 +154,7 @@ CreateTearsheetStep.propTypes = {
    * and is defaulted to true.
    * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's step content.
    */
+  /**@ts-ignore*/
   hasFieldset: PropTypes.bool,
   /**
    * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator

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

@@ -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 {};