@carbon/ibm-products 2.89.0 → 2.90.0

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -22,7 +22,6 @@ import { TearsheetShell } from "../Tearsheet/TearsheetShell.js";
 import React, { createContext, forwardRef, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Form } from "@carbon/react";
-
 //#region src/components/CreateTearsheet/CreateTearsheet.tsx
 /**
 * Copyright IBM Corp. 2021, 2025
@@ -85,9 +84,11 @@ const CreateTearsheet = forwardRef(({ backButtonText, cancelButtonText, children
 	useResetCreateComponent({
 		firstIncludedStep,
 		previousState,
+		/**@ts-ignore */
 		open,
 		setCurrentStep,
 		stepData,
+		/**@ts-ignore */
 		initialStep,
 		totalSteps: stepData?.length,
 		componentName
@@ -102,6 +103,7 @@ const CreateTearsheet = forwardRef(({ backButtonText, cancelButtonText, children
 		setCurrentStep,
 		setIsSubmitting,
 		setShouldViewAll,
+		/**@ts-ignore */
 		setLoadingPrevious,
 		loadingPrevious,
 		onClose,
@@ -165,30 +167,106 @@ const CreateTearsheet = forwardRef(({ backButtonText, cancelButtonText, children
 	}, child))))));
 });
 CreateTearsheet.displayName = componentName;
-const deprecatedProps = { slug: deprecateProp(PropTypes.node, "Property replaced by `decorator`") };
+const deprecatedProps = { 
+/**
+*  @deprecated Property replaced by `decorator`
+*/
+slug: deprecateProp(PropTypes.node, "Property replaced by `decorator`") };
 CreateTearsheet.propTypes = {
+	/**
+	* The back button text
+	*/
 	backButtonText: PropTypes.string.isRequired,
+	/**
+	* The cancel button text
+	*/
 	cancelButtonText: PropTypes.string.isRequired,
+	/**
+	* The main content of the tearsheet
+	*/
 	children: PropTypes.node,
+	/**
+	* An optional class or classes to be added to the outermost element.
+	*/
 	className: PropTypes.string,
+	/**
+	*  Optional prop that allows you to pass any component.
+	*/
 	decorator: PropTypes.node,
+	/**
+	* A description of the flow, displayed in the header area of the tearsheet.
+	*/
 	description: PropTypes.node,
+	/**
+	* The experimentalSecondary submit button text
+	*/
 	experimentalSecondarySubmitText: PropTypes.string,
+	/**
+	* Specifies elements to focus on first on render.
+	*/
 	firstFocusElement: PropTypes.string,
+	/**
+	* To indicate an error occurred in the Tearsheet step
+	* Used to pass this value to TearsheetShell
+	*/
 	hasError: PropTypes.bool,
+	/**
+	* Used to set the size of the influencer
+	*/
 	influencerWidth: PropTypes.oneOf(["narrow", "wide"]),
+	/**
+	* This can be used to open the component to a step other than the first step.
+	* For example, a create flow was previously in progress, data was saved, and
+	* is now being completed.
+	*/
 	initialStep: PropTypes.number,
+	/**
+	* A label for the tearsheet, displayed in the header area of the tearsheet
+	* to maintain context for the tearsheet (e.g. as the title changes from page
+	* to page of a multi-page task).
+	*/
 	label: PropTypes.node,
+	/**
+	* The next button text
+	*/
 	nextButtonText: PropTypes.string.isRequired,
+	/**
+	* An optional handler that is called when the user closes the tearsheet (by
+	* clicking the close button, if enabled, or clicking outside, if enabled).
+	* Returning `false` here prevents the modal from closing.
+	*/
 	onClose: PropTypes.func,
+	/**
+	* Specify a handler for submitting the multi step tearsheet (final step).
+	* This function can _optionally_ return a promise that is either resolved or rejected and the CreateTearsheet will handle the submitting state of the create button.
+	*/
 	onRequestSubmit: PropTypes.func.isRequired,
+	/**
+	* Specifies whether the tearsheet is currently open.
+	*/
 	open: PropTypes.bool,
+	/**
+	* Specify a CSS selector that matches the DOM element that should be
+	* focused when the Modal opens.
+	*/
 	selectorPrimaryFocus: PropTypes.string,
+	/**
+	* The submit button text
+	*/
 	submitButtonText: PropTypes.string.isRequired,
+	/**
+	* The main title of the tearsheet, displayed in the header area.
+	*/
 	title: PropTypes.node,
+	/**
+	* The position of the top of tearsheet in the viewport. The 'normal'
+	* position (the default) is a short distance down from the top of the
+	* viewport, leaving room at the top for a global header bar to show through
+	* from below. The 'lower' position provides a little extra room at the top
+	* to allow an action bar navigation or breadcrumbs to also show through.
+	*/
 	verticalPosition: PropTypes.oneOf(["normal", "lower"]),
 	...deprecatedProps
 };
-
 //#endregion
-export { CreateTearsheet, StepNumberContext, StepsContext };
+export { CreateTearsheet, StepNumberContext, StepsContext };

package/es/components/CreateTearsheet/CreateTearsheetDivider.js

@@ -10,7 +10,6 @@ import { require_classnames } from "../../node_modules/classnames/index.js";
 import { pkg } from "../../settings.js";
 import React, { forwardRef } from "react";
 import PropTypes from "prop-types";
-
 //#region src/components/CreateTearsheet/CreateTearsheetDivider.tsx
 /**
 * Copyright IBM Corp. 2021, 2024
@@ -27,7 +26,10 @@ const CreateTearsheetDivider = forwardRef(({ className, ...rest }, ref) => {
 		className: (0, import_classnames.default)(blockClass, className)
 	});
 });
-CreateTearsheetDivider.propTypes = { className: PropTypes.string };
-
+CreateTearsheetDivider.propTypes = { 
+/**
+* Sets an optional className to be added to the tearsheet divider
+*/
+className: PropTypes.string };
 //#endregion
-export { CreateTearsheetDivider };
+export { CreateTearsheetDivider };

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -15,7 +15,6 @@ import { StepNumberContext, StepsContext } from "./CreateTearsheet.js";
 import React, { forwardRef, isValidElement, useContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Column, FormGroup, Grid } from "@carbon/react";
-
 //#region src/components/CreateTearsheet/CreateTearsheetStep.tsx
 /**
 * Copyright IBM Corp. 2021, 2025
@@ -113,30 +112,100 @@ const CreateTearsheetStep = forwardRef(({ children, className, description, disa
 	}, children) : children))) : pconsole_default.warn(`You have tried using a ${componentName} component outside of a CreateTearsheet. This is not allowed. ${componentName}s should always be children of the CreateTearsheet`);
 });
 CreateTearsheetStep.propTypes = {
+	/**
+	* Content that shows in the tearsheet step
+	*/
 	children: PropTypes.node,
+	/**
+	* Sets an optional className to be added to the tearsheet step
+	*/
 	className: PropTypes.string,
+	/**
+	* Sets an optional description on the step component
+	*/
 	description: PropTypes.node,
+	/**
+	* This will conditionally disable the submit button in the multi step Tearsheet
+	*/
 	disableSubmit: PropTypes.bool,
+	/**
+	* Configuration options for customizing the behavior of the experimentalSecondary submit button.
+	*
+	* @property {string} [labelText] - Optional text to replace the default button text.
+	* @property {boolean} [disabled] - If true, the button will be disabled and not clickable.
+	* @property {boolean} [hideSecondarySubmit] - If true, the button will be hidden from view.
+	* @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
+	*/
+	/**@ts-ignore*/
 	experimentalSecondarySubmit: PropTypes.shape({
 		labelText: PropTypes.string,
 		disabled: PropTypes.bool,
 		hideSecondarySubmit: PropTypes.bool,
 		onClick: PropTypes.func
 	}),
+	/**
+	* This is the required legend id that appears as the aria-labelledby of fieldset for accessibility purposes.
+	*/
+	/**@ts-ignore*/
 	fieldsetLegendId: PropTypes.node,
+	/**
+	* 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.
+	*/
+	/**@ts-ignore*/
 	fieldsetLegendText: PropTypes.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.
+	*/
+	/**@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
+	* 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: PropTypes.bool,
+	/**
+	* 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: PropTypes.bool,
+	/**
+	* This optional prop will indicate an error icon on the progress indicator step item
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* 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: PropTypes.func,
+	/**
+	* 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: PropTypes.func,
+	/**
+	* Optional function to be called when you move to the previous step.
+	*/
 	onPrevious: PropTypes.func,
+	/**
+	* This will conditionally disable the secondary (Back) button in the multi step Tearsheet
+	*/
 	secondaryButtonDisabled: PropTypes.bool,
+	/**
+	* Sets the optional secondary label on the progress step component
+	*/
 	secondaryLabel: PropTypes.string,
+	/**
+	* Sets an optional subtitle on the step component
+	*/
 	subtitle: PropTypes.string,
+	/**
+	* Sets the title text for a tearsheet step
+	*/
 	title: PropTypes.node.isRequired
 };
-
 //#endregion
-export { CreateTearsheetStep };
+export { CreateTearsheetStep };

package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -14,7 +14,6 @@ import { TearsheetNarrow } from "../Tearsheet/TearsheetNarrow.js";
 import React from "react";
 import PropTypes from "prop-types";
 import { Form } from "@carbon/react";
-
 //#region src/components/CreateTearsheetNarrow/CreateTearsheetNarrow.tsx
 /**
 * Copyright IBM Corp. 2021, 2021
@@ -70,22 +69,76 @@ const CreateTearsheetNarrow = React.forwardRef(({ children, className, descripti
 });
 CreateTearsheetNarrow.displayName = componentName;
 CreateTearsheetNarrow.propTypes = {
+	/**
+	* Provide the contents of the CreateTearsheetNarrow.
+	*/
 	children: PropTypes.node.isRequired,
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
 	className: PropTypes.string,
+	/**
+	* A description of the flow, displayed in the header area of the tearsheet.
+	*/
 	description: PropTypes.node,
+	/**
+	* Specifies a boolean for disabling or enabling the primary button. This is important for form validation
+	* Returning `true` prevents the primary button from being clicked until required fields are completed.
+	*/
 	disableSubmit: PropTypes.bool,
+	/**
+	* Specifies an optional field that provides a additional context for a form
+	*/
 	formDescription: PropTypes.node,
+	/**
+	* Specifies a field that provides a title for a form
+	*/
 	formTitle: PropTypes.node,
+	/**
+	* A label for the tearsheet, displayed in the header area of the tearsheet
+	* to maintain context for the tearsheet (e.g. as the title changes from page
+	* to page of a multi-page task).
+	*/
 	label: PropTypes.node,
+	/**
+	* An optional handler that is called when the user closes the tearsheet (by
+	* clicking the close button, if enabled, or clicking outside, if enabled).
+	* Returning `false` here prevents the modal from closing.
+	*/
 	onRequestClose: PropTypes.func,
+	/**
+	* Specifies an optional handler which is called when the CreateTearsheetNarrow
+	* primary button is pressed.
+	*/
 	onRequestSubmit: PropTypes.func,
+	/**
+	* Specifies whether the tearsheet is currently open.
+	*/
 	open: PropTypes.bool,
+	/**
+	* Specifies the primary button's text in the CreateTearsheetNarrow.
+	*/
 	primaryButtonText: PropTypes.string.isRequired,
+	/**
+	* Specifies the secondary button's text in the CreateTearsheetNarrow.
+	*/
 	secondaryButtonText: PropTypes.string.isRequired,
+	/**
+	* Specifies which DOM element in the form should be focused.
+	*/
 	selectorPrimaryFocus: PropTypes.node,
+	/**
+	* The main title of the tearsheet, displayed in the header area.
+	*/
 	title: PropTypes.node,
+	/**
+	* The position of the top of tearsheet in the viewport. The 'normal'
+	* position (the default) is a short distance down from the top of the
+	* viewport, leaving room at the top for a global header bar to show through
+	* from below. The 'lower' position provides a little extra room at the top
+	* to allow an action bar navigation or breadcrumbs to also show through.
+	*/
 	verticalPosition: PropTypes.oneOf(["normal", "lower"])
 };
-
 //#endregion
-export { CreateTearsheetNarrow };
+export { CreateTearsheetNarrow };

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -32,7 +32,6 @@ import { handleEditSubmit } from "./utils/handleEditSubmit.js";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { useBlockLayout, useColumnOrder, useTable } from "react-table";
-
 //#region src/components/DataSpreadsheet/DataSpreadsheet.tsx
 var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
 const blockClass = `${pkg.prefix}--data-spreadsheet`;
@@ -568,35 +567,94 @@ const DataSpreadsheet = React.forwardRef(({ cellSize = "sm", className, columns
 });
 DataSpreadsheet.displayName = componentName;
 DataSpreadsheet.propTypes = {
+	/**
+	* Specifies the cell height
+	*/
 	cellSize: PropTypes.oneOf([
 		"xs",
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
 	className: PropTypes.string,
+	/**
+	* 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]),
 		Cell: PropTypes.func
 	})),
+	/**
+	* 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
+	*/
 	defaultEmptyRowCount: PropTypes.number,
+	/**
+	* Disable column swapping, default false
+	*/
 	disableColumnSwapping: PropTypes.bool,
+	/**
+	* Check if spreadsheet is using custom row header component attached
+	*/
 	hasCustomRowHeader: PropTypes.bool,
+	/**
+	* The spreadsheet id
+	*/
 	id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+	/**
+	* The event handler that is called when the active cell changes
+	*/
 	onActiveCellChange: PropTypes.func,
+	/**
+	* Callback for when columns are dropped after dragged
+	*/
 	onColDrag: PropTypes.func,
+	/**
+	* The setter fn for the data prop
+	*/
 	onDataUpdate: PropTypes.func,
+	/**
+	* The event handler that is called when the selection area values change
+	*/
 	onSelectionAreaChange: PropTypes.func,
+	/**
+	* Read-only table
+	*/
 	readOnlyTable: PropTypes.bool,
+	/**
+	* Component next to numbering rows
+	*/
 	renderRowHeader: PropTypes.func,
+	/**
+	* Component next to numbering rows
+	*/
 	renderRowHeaderDirection: PropTypes.oneOf(["left", "right"]),
+	/**
+	* The aria label applied to the Select all button
+	*/
 	selectAllAriaLabel: PropTypes.string.isRequired,
+	/**
+	* The aria label applied to the Data spreadsheet component
+	*/
 	spreadsheetAriaLabel: PropTypes.string.isRequired,
+	/**
+	* The theme the DataSpreadsheet should use (only used to render active cell/selection area colors on dark theme)
+	*/
 	theme: PropTypes.oneOf(["light", "dark"]),
+	/**
+	* The total number of columns to be initially visible, additional columns will be rendered and
+	* visible via horizontal scrollbar
+	*/
 	totalVisibleColumns: PropTypes.number
 };
-
 //#endregion
-export { DataSpreadsheet };
+export { DataSpreadsheet };

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -22,7 +22,6 @@ import React, { forwardRef, useCallback, useEffect, useRef, useState } from "rea
 import PropTypes from "prop-types";
 import { px } from "@carbon/layout";
 import { FixedSizeList } from "react-window";
-
 //#region src/components/DataSpreadsheet/DataSpreadsheetBody.tsx
 /**
 * Copyright IBM Corp. 2022, 2022
@@ -384,50 +383,163 @@ const DataSpreadsheetBody = forwardRef(({ activeCellRef, columns, activeCellCoor
 	}, rows?.length ? RenderRow : RenderEmptyRows));
 });
 DataSpreadsheetBody.propTypes = {
+	/**
+	* Object containing the active cell coordinates
+	*/
+	/**@ts-ignore */
 	activeCellCoordinates: PropTypes.shape({
 		row: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 		column: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 	}),
+	/**
+	*This is the ref of the button input, which is the active cell element
+	*/
+	/**@ts-ignore */
 	activeCellRef: PropTypes.object,
+	/**
+	* Is the user clicking and holding in the data spreadsheet body
+	*/
 	clickAndHoldActive: PropTypes.bool,
+	/**
+	* All of the spreadsheet columns
+	*/
 	columns: PropTypes.array,
+	/**
+	* This represents the id of the current cell selection area
+	*/
 	currentMatcher: PropTypes.string,
+	/**
+	* Default spreadsheet sizing values
+	*/
+	/**@ts-ignore */
 	defaultColumn: PropTypes.shape({
 		rowHeight: PropTypes.number,
 		rowHeaderWidth: PropTypes.number,
 		width: PropTypes.number
 	}),
+	/**
+	* Sets the number of empty rows to be created when there is no data provided
+	*/
 	defaultEmptyRowCount: PropTypes.number,
+	/**
+	* Function to set table body prop values
+	*/
+	/**@ts-ignore */
 	getTableBodyProps: PropTypes.func,
+	/**
+	* Check if spreadsheet is using custom row header component attached
+	*/
 	hasCustomRowHeader: PropTypes.bool,
+	/**
+	* Headers provided from useTable hook
+	*/
 	headerGroups: PropTypes.arrayOf(PropTypes.object),
+	/**
+	* The spreadsheet id
+	*/
 	id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+	/**
+	* The event handler that is called when the active cell changes
+	*/
 	onActiveCellChange: PropTypes.func,
+	/**
+	* The event handler that is called to set the rows for the empty spreadsheet
+	*/
 	onDataUpdate: PropTypes.func,
+	/**
+	* The event handler that is called when the selection areas change
+	*/
 	onSelectionAreaChange: PropTypes.func,
+	/**
+	* Prepare row function from react-table
+	*/
 	prepareRow: PropTypes.func,
+	/**
+	* Component next to numbering rows
+	*/
 	renderRowHeader: PropTypes.func,
+	/**
+	* Component next to numbering rows
+	*/
 	renderRowHeaderDirection: PropTypes.string,
+	/**
+	* All of the spreadsheet row data
+	*/
 	rows: PropTypes.arrayOf(PropTypes.object),
+	/**
+	* The scrollbar width
+	*/
 	scrollBarSize: PropTypes.number,
+	/**
+	* Header reordering is active
+	*/
 	selectedHeaderReorderActive: PropTypes.bool,
+	/**
+	* Array of selection area data
+	*/
 	selectionAreaData: PropTypes.array,
+	/**
+	* Array of selection areas
+	*/
 	selectionAreas: PropTypes.array,
+	/**
+	* Setter fn for activeCellCoordinates state value
+	*/
 	setActiveCellCoordinates: PropTypes.func,
+	/**
+	* Setter fn for active cell inside of selection area
+	*/
 	setActiveCellInsideSelectionArea: PropTypes.func,
+	/**
+	* Setter fn for clickAndHold state value
+	*/
 	setClickAndHoldActive: PropTypes.func,
+	/**
+	* Setter fn for column ordering, provided from react-table
+	*/
 	setColumnOrder: PropTypes.func,
+	/**
+	* Setter fn for containerHasFocus state value
+	*/
 	setContainerHasFocus: PropTypes.func,
+	/**
+	* Set current columns after drag drop
+	*/
 	setCurrentColumns: PropTypes.func,
+	/**
+	* Setter fn for currentMatcher state value
+	*/
 	setCurrentMatcher: PropTypes.func,
+	/**
+	* Setter fn for header cell hold active value
+	*/
 	setHeaderCellHoldActive: PropTypes.func,
+	/**
+	* Set header reordering active or not
+	*/
 	setSelectedHeaderReorderActive: PropTypes.func,
+	/**
+	* Setter fn for selectionAreaData state value
+	*/
 	setSelectionAreaData: PropTypes.func,
+	/**
+	* Setter fn for selectionAreas state value
+	*/
 	setSelectionAreas: PropTypes.func,
+	/**
+	* The total columns width
+	*/
 	totalColumnsWidth: PropTypes.number,
+	/**
+	* The total number of columns to be initially visible, additional columns will be rendered and
+	* visible via horizontal scrollbar
+	*/
 	totalVisibleColumns: PropTypes.number,
+	/**
+	* Prop from react-table used to reorder columns
+	*/
+	/**@ts-ignore */
 	visibleColumns: PropTypes.array
 };
-
 //#endregion
-export { DataSpreadsheetBody };
+export { DataSpreadsheetBody };