@carbon/ibm-products 2.89.0 → 2.90.0

package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js

@@ -8,7 +8,7 @@
 import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
 import { require_classnames } from "../../../node_modules/classnames/index.js";
 import uuidv4 from "../../../global/js/utils/uuidv4.js";
-import { HIERARCHICAL_VARIANT, NON_HIERARCHICAL_VARIANT, blockClass, focusThisField, manageTabIndexAndFocus } from "../utils/util.js";
+import { blockClass, focusThisField, manageTabIndexAndFocus } from "../utils/util.js";
 import { ConditionBuilderContext, getEmptyState } from "../ConditionBuilderContext/ConditionBuilderProvider.js";
 import { useTranslations } from "../utils/useTranslations.js";
 import { ConditionBuilderItem } from "../ConditionBuilderItem/ConditionBuilderItem.js";
@@ -19,7 +19,6 @@ import ConditionBlock from "../ConditionBlock/ConditionBlock.js";
 import ConditionPreview from "../ConditionPreview/ConditionPreview.js";
 import React, { Fragment, useContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
-
 //#region src/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.tsx
 /**
 * Copyright IBM Corp. 2024
@@ -35,7 +34,7 @@ const ConditionGroupBuilder = ({ group, aria, onRemove, onChange, className }) =
 		"conditionBuilderText"
 	]);
 	const { statementConfig } = useDataConfigs();
-	const { variant, conditionBuilderRef, statementConfigCustom } = useContext(ConditionBuilderContext);
+	const { variant, conditionBuilderRef, statementConfigCustom, onRemoveItem, rootState } = useContext(ConditionBuilderContext);
 	const [showConditionPreview, setShowConditionPreview] = useState(-1);
 	const [showConditionSubGroupPreview, setShowConditionSubGroupPreview] = useState(-1);
 	useState(false);
@@ -63,8 +62,17 @@ const ConditionGroupBuilder = ({ group, aria, onRemove, onChange, className }) =
 		return window;
 	};
 	const onRemoveHandler = (conditionId, evt, conditionIndex) => {
+		const itemToRemove = group?.conditions?.find((condition) => condition.id === conditionId);
+		const removeType = itemToRemove?.conditions ? "subgroup" : "condition";
+		const { preventRemove } = onRemoveItem?.({
+			type: removeType,
+			state: rootState,
+			item: itemToRemove,
+			group
+		}) ?? {};
+		if (preventRemove) return;
 		if (group && group.conditions && group.conditions.length > 1) {
-			if (variant == HIERARCHICAL_VARIANT) handleFocusOnCloseHierarchical(evt);
+			if (variant == "Hierarchical") handleFocusOnCloseHierarchical(evt);
 			else handleFocusOnClose(evt, conditionIndex);
 			if (!checkGroupHaveCondition(group.conditions, conditionId)) {
 				const allConditions = group?.conditions?.reduce((acc, condition) => {
@@ -308,15 +316,29 @@ const ConditionGroupBuilder = ({ group, aria, onRemove, onChange, className }) =
 			group
 		}))));
 	};
-	return /* @__PURE__ */ React.createElement(React.Fragment, null, variant == HIERARCHICAL_VARIANT && getHierarchicalVariant(), variant == NON_HIERARCHICAL_VARIANT && getNonHierarchicalVariant());
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, variant == "Hierarchical" && getHierarchicalVariant(), variant == "Non-Hierarchical" && getNonHierarchicalVariant());
 };
 ConditionGroupBuilder.propTypes = {
+	/**
+	* object contains the aria attributes
+	*/
 	aria: PropTypes.object,
+	/**
+	* state defines the current group
+	*/
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
 	className: PropTypes.string,
 	group: PropTypes.object,
+	/**
+	* callback to update the current condition of the state tree
+	*/
 	onChange: PropTypes.func,
+	/**
+	* call back to remove the particular group from the state tree
+	*/
 	onRemove: PropTypes.func
 };
-
 //#endregion
-export { ConditionGroupBuilder as default };
+export { ConditionGroupBuilder as default };

package/es/components/ConditionBuilder/ConditionPreview/ConditionPreview.js

@@ -14,7 +14,6 @@ import ConditionConnector from "../ConditionBuilderConnector/ConditionConnector.
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { Bee } from "@carbon/react/icons";
-
 //#region src/components/ConditionBuilder/ConditionPreview/ConditionPreview.tsx
 /**
 * Copyright IBM Corp. 2024
@@ -65,14 +64,22 @@ const ConditionPreview = ({ previewType, group, colorIndex, className }) => {
 };
 ConditionPreview.propTypes = {
 	className: PropTypes.string,
+	/**
+	* index of the color for next group
+	*/
 	colorIndex: PropTypes.number,
+	/**
+	* current conditional group
+	*/
 	group: PropTypes.object,
+	/**
+	* type of review to be displayed
+	*/
 	previewType: PropTypes.oneOf([
 		"condition",
 		"subGroup",
 		"newGroup"
 	])
 };
-
 //#endregion
-export { ConditionPreview as default };
+export { ConditionPreview as default };

package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js

@@ -5,8 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { HIERARCHICAL_VARIANT, blockClass, checkForHoldingKey, focusThisField, focusThisItem, manageTabIndexAndFocus, traverseClockwise, traverseReverse } from "./util.js";
-
+import { blockClass, checkForHoldingKey, focusThisField, focusThisItem, manageTabIndexAndFocus, traverseClockwise, traverseReverse } from "./util.js";
 //#region src/components/ConditionBuilder/utils/handleKeyboardEvents.js
 /**
 * Copyright IBM Corp. 2024
@@ -88,7 +87,7 @@ const handleKeyPressForMainContent = (evt, conditionBuilderRef, variant) => {
 	switch (evt.key) {
 		case "ArrowRight":
 			evt.preventDefault();
-			if (variant == HIERARCHICAL_VARIANT) {
+			if (variant == "Hierarchical") {
 				let allCellsInRow = Array.from(evt.target.closest("[role=\"row\"]")?.querySelectorAll("[role=\"gridcell\"] button"));
 				if (allCellsInRow.length === 1) {
 					evt.target = evt.target.closest("[role=\"row\"]");
@@ -102,7 +101,7 @@ const handleKeyPressForMainContent = (evt, conditionBuilderRef, variant) => {
 			break;
 		case "ArrowLeft":
 			evt.preventDefault();
-			if (variant == HIERARCHICAL_VARIANT) {
+			if (variant == "Hierarchical") {
 				if (evt.target.getAttribute("role") !== "row") {
 					let allCellsInRow = Array.from(evt.target.closest("[role=\"row\"]")?.querySelectorAll("[role=\"gridcell\"] button"));
 					let currentItemIndex = allCellsInRow.indexOf(evt.target);
@@ -114,7 +113,7 @@ const handleKeyPressForMainContent = (evt, conditionBuilderRef, variant) => {
 		case "ArrowUp":
 		case "ArrowDown":
 			evt.preventDefault();
-			if (variant == HIERARCHICAL_VARIANT) handleRowNavigationHierarchical(evt, conditionBuilderRef, variant);
+			if (variant == "Hierarchical") handleRowNavigationHierarchical(evt, conditionBuilderRef, variant);
 			else handleRowNavigation(evt, conditionBuilderRef, variant);
 			break;
 		case "Enter":
@@ -152,7 +151,7 @@ const navigateToNextRowCell = (evt, currentRowIndex, rows, variant, conditionBui
 	const nextRow = rows[nextRowIndex];
 	const itemName = evt.target.dataset.name;
 	if (nextRow?.querySelector(`[data-name="${itemName}"]`)) manageTabIndexAndFocus(nextRow?.querySelector(`[data-name="${itemName}"]`), conditionBuilderRef);
-	else if (variant === HIERARCHICAL_VARIANT) manageTabIndexAndFocus(nextRow, conditionBuilderRef);
+	else if (variant === "Hierarchical") manageTabIndexAndFocus(nextRow, conditionBuilderRef);
 };
 const handleCellNavigation = (evt, conditionBuilderRef) => {
 	conditionBuilderRef.current.querySelectorAll(`[role="gridcell"] button`).forEach((eachElem, index, allElements) => {
@@ -160,6 +159,5 @@ const handleCellNavigation = (evt, conditionBuilderRef) => {
 		else traverseReverse(eachElem, index, allElements, null, null, conditionBuilderRef);
 	});
 };
-
 //#endregion
-export { handleKeyDown, handleKeyDownForPopover };
+export { handleKeyDown, handleKeyDownForPopover };

package/es/components/ConditionBuilder/utils/useDataConfigs.js

@@ -8,7 +8,6 @@
 import { ConditionBuilderContext } from "../ConditionBuilderContext/ConditionBuilderProvider.js";
 import { useTranslations } from "./useTranslations.js";
 import { useContext } from "react";
-
 //#region src/components/ConditionBuilder/utils/useDataConfigs.js
 /**
 * Copyright IBM Corp. 2024
@@ -136,6 +135,5 @@ const useDataConfigs = () => {
 		]
 	};
 };
-
 //#endregion
-export { useDataConfigs };
+export { useDataConfigs };

package/es/components/ConditionBuilder/utils/useEvent.js

@@ -6,7 +6,6 @@
  */
 
 import { useEffect, useRef } from "react";
-
 //#region src/components/ConditionBuilder/utils/useEvent.ts
 /**
 * Copyright IBM Corp. 2016, 2025
@@ -31,6 +30,5 @@ const useEvent = (elementOrRef, eventName, callback) => {
 		};
 	}, [elementOrRef, eventName]);
 };
-
 //#endregion
-export { useEvent };
+export { useEvent };

package/es/components/ConditionBuilder/utils/useTranslations.js

@@ -8,7 +8,6 @@
 import { ConditionBuilderContext } from "../ConditionBuilderContext/ConditionBuilderProvider.js";
 import { translationsObject } from "../ConditionBuilderContext/translationObject.js";
 import { useContext } from "react";
-
 //#region src/components/ConditionBuilder/utils/useTranslations.js
 /**
 * Copyright IBM Corp. 2021, 2023
@@ -25,6 +24,5 @@ const useTranslations = (translationKeys, alterTranslationKeyMap) => {
 		else return translationKey;
 	});
 };
-
 //#endregion
-export { useTranslations };
+export { useTranslations };

package/es/components/ConditionBuilder/utils/util.js

@@ -6,7 +6,6 @@
  */
 
 import { pkg } from "../../../settings.js";
-
 //#region src/components/ConditionBuilder/utils/util.js
 /**
 * Copyright IBM Corp. 2024
@@ -76,6 +75,5 @@ const onKeyDownHandlerForSearch = (evt, conditionBuilderRef, closePopover) => {
 		closePopover?.();
 	}
 };
-
 //#endregion
-export { HIERARCHICAL_VARIANT, NON_HIERARCHICAL_VARIANT, blockClass, checkForHoldingKey, checkForMultiSelectOperator, checkIsValid, focusThisField, focusThisItem, getValue, manageTabIndexAndFocus, onKeyDownHandlerForSearch, traverseClockwise, traverseReverse };
+export { HIERARCHICAL_VARIANT, NON_HIERARCHICAL_VARIANT, blockClass, checkForHoldingKey, checkForMultiSelectOperator, checkIsValid, focusThisField, focusThisItem, getValue, manageTabIndexAndFocus, onKeyDownHandlerForSearch, traverseClockwise, traverseReverse };

package/es/components/CreateFullPage/CreateFullPage.js

@@ -21,7 +21,6 @@ import { lastIndexInArray } from "../../global/js/utils/lastIndexInArray.js";
 import React, { createContext, isValidElement, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { Button, ComposedModal, Form, ModalBody, ModalFooter, ModalHeader, Tooltip } from "@carbon/react";
-
 //#region src/components/CreateFullPage/CreateFullPage.tsx
 /**
 * Copyright IBM Corp. 2021, 2025
@@ -99,6 +98,7 @@ const CreateFullPage = React.forwardRef(({ breadcrumbsOverflowAriaLabel, breadcr
 		isSubmitDisabled: isDisabled,
 		setCurrentStep,
 		setIsSubmitting,
+		/**@ts-ignore */
 		setShouldViewAll,
 		onClose,
 		onRequestSubmit,
@@ -179,36 +179,112 @@ const CreateFullPage = React.forwardRef(({ breadcrumbsOverflowAriaLabel, breadcr
 });
 CreateFullPage.displayName = componentName;
 CreateFullPage.propTypes = {
+	/**
+	* The back button text
+	*/
 	backButtonText: PropTypes.string.isRequired,
+	/**
+	* align breadcrumb overflow tooltip
+	*/
 	breadcrumbOverflowTooltipAlign: Tooltip.propTypes.align,
+	/** The header breadcrumbs */
+	/**@ts-ignore */
 	breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
+		/** breadcrumb item key */
 		key: PropTypes.string.isRequired,
+		/** breadcrumb item label */
 		label: PropTypes.string.isRequired,
+		/** breadcrumb item link */
 		href: PropTypes.string,
+		/** breadcrumb item title tooltip */
 		title: PropTypes.string,
+		/** Provide if this breadcrumb item represents the current page */
 		isCurrentPage: PropTypes.bool
 	})),
+	/**
+	* Label for open/close overflow button used for breadcrumb items that do not fit
+	*/
 	breadcrumbsOverflowAriaLabel: PropTypes.string,
+	/**
+	* The cancel button text
+	*/
 	cancelButtonText: PropTypes.string.isRequired,
+	/**
+	* The main content of the full page
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specifies elements to focus on first on render.
+	*/
 	firstFocusElement: PropTypes.string,
+	/**
+	* 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,
+	/**	Maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1) */
 	maxVisibleBreadcrumbs: PropTypes.number,
+	/**
+	* The primary 'danger' button text in the modal
+	*/
 	modalDangerButtonText: PropTypes.string.isRequired,
+	/**
+	* The description located below the title in the modal
+	*/
 	modalDescription: PropTypes.string,
+	/**
+	* The secondary button text in the modal
+	*/
 	modalSecondaryButtonText: PropTypes.string.isRequired,
+	/**
+	* The title located in the header of the modal
+	*/
 	modalTitle: PropTypes.string.isRequired,
+	/**
+	* The next button text
+	*/
 	nextButtonText: PropTypes.string.isRequired,
+	/**
+	* A prop to omit the trailing slash for the breadcrumbs
+	*/
 	noTrailingSlash: PropTypes.bool,
+	/**
+	* onChange event for Progress Indicator in the Influencer
+	*/
 	onClickInfluencerStep: PropTypes.func,
+	/**
+	* An optional handler that is called when the user closes the full page (by
+	* clicking the secondary button, located in the modal, which triggers after
+	* clicking the ghost button in the modal
+	*/
 	onClose: PropTypes.func,
+	/**
+	* Specify a handler for submitting the multi step full page (final step).
+	* This function can _optionally_ return a promise that is either resolved or rejected and the CreateFullPage will handle the submitting state of the create button.
+	*/
 	onRequestSubmit: PropTypes.func.isRequired,
+	/**
+	* A secondary title of the full page, displayed in the influencer area
+	*/
 	secondaryTitle: PropTypes.string,
+	/**
+	* @ignore
+	* The aria label to be used for the UI Shell SideNav Carbon component
+	*/
 	sideNavAriaLabel: PropTypes.string,
+	/**
+	* The submit button text
+	*/
 	submitButtonText: PropTypes.string.isRequired,
+	/**
+	* The main title of the full page, displayed in the header area
+	*/
 	title: PropTypes.string
 };
-
 //#endregion
-export { CreateFullPage, StepNumberContext, StepsContext };
+export { CreateFullPage, StepNumberContext, StepsContext };

package/es/components/CreateFullPage/CreateFullPageStep.js

@@ -15,7 +15,6 @@ import { StepNumberContext, StepsContext } from "./CreateFullPage.js";
 import React, { forwardRef, isValidElement, useContext, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { Column, FormGroup, Grid, Heading, Section } from "@carbon/react";
-
 //#region src/components/CreateFullPage/CreateFullPageStep.tsx
 /**
 * Copyright IBM Corp. 2021, 2025
@@ -109,22 +108,71 @@ const CreateFullPageStep = forwardRef(({ children, className, subtitle, descript
 	}, children) : children) : pconsole_default.warn(`You have tried using a ${componentName} component outside of a CreateFullPage. This is not allowed. ${componentName}s should always be children of the CreateFullPage`);
 });
 CreateFullPageStep.propTypes = {
+	/**
+	* Content that shows in the CreateFullPage step
+	*/
 	children: PropTypes.node,
+	/**
+	* Sets an optional className to be added to the CreateFullPage step
+	*/
 	className: PropTypes.string,
+	/**
+	* Sets an optional description on the progress step component
+	*/
 	description: PropTypes.node,
+	/**
+	* This will conditionally disable the submit button in the multi step CreateFullPage
+	*/
 	disableSubmit: PropTypes.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: PropTypes.string,
+	/**
+	* This optional prop will render your form content inside of a fieldset html element
+	*/
 	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 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: PropTypes.func,
+	/**
+	* Optional function to be called when you move to the previous step.
+	*/
 	onPrevious: PropTypes.func,
+	/**
+	* Sets the optional secondary label on the progress step component
+	*/
 	secondaryLabel: PropTypes.string,
+	/**
+	* Sets an optional subtitle on the progress step component
+	*/
 	subtitle: PropTypes.string,
+	/**
+	* Sets the title text for a create full page step
+	*/
 	title: PropTypes.node.isRequired
 };
-
 //#endregion
-export { CreateFullPageStep };
+export { CreateFullPageStep };

package/es/components/CreateInfluencer/CreateInfluencer.js

@@ -12,7 +12,6 @@ import "../../global/js/utils/props-helper.js";
 import React from "react";
 import PropTypes from "prop-types";
 import { Heading, ProgressIndicator, ProgressStep, Section } from "@carbon/react";
-
 //#region src/components/CreateInfluencer/CreateInfluencer.tsx
 /**
 * Copyright IBM Corp. 2021, 2022
@@ -53,17 +52,31 @@ const CreateInfluencer = ({ className, currentStep, onClickStep, stepData, title
 };
 CreateInfluencer.displayName = componentName;
 CreateInfluencer.propTypes = {
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
 	className: PropTypes.string,
+	/**
+	* Used to mark the current step on the ProgressIndicator component
+	*/
 	currentStep: PropTypes.number.isRequired,
+	/**
+	* onChange event for Progress Indicator
+	*/
 	onClickStep: PropTypes.func,
+	/**
+	* The step data that renders the progress items
+	*/
 	stepData: PropTypes.arrayOf(PropTypes.shape({
 		introStep: PropTypes.bool,
 		secondaryLabel: PropTypes.string,
 		shouldIncludeStep: PropTypes.bool,
 		title: PropTypes.node
 	})),
+	/**
+	* The main title of the full page, displayed in the influencer area.
+	*/
 	title: PropTypes.string
 };
-
 //#endregion
-export { CreateInfluencer };
+export { CreateInfluencer };

package/es/components/CreateModal/CreateModal.js

@@ -13,7 +13,6 @@ import { usePortalTarget } from "../../global/js/hooks/usePortalTarget.js";
 import React from "react";
 import PropTypes from "prop-types";
 import { Button, ComposedModal, Form, ModalBody, ModalFooter, ModalHeader } from "@carbon/react";
-
 //#region src/components/CreateModal/CreateModal.tsx
 /**
 * Copyright IBM Corp. 2021, 2025
@@ -65,21 +64,62 @@ const CreateModal = React.forwardRef((props, ref) => {
 	}, primaryButtonText))));
 });
 CreateModal.propTypes = {
+	/**
+	* Children refers to all form items within a form inside of the modal's body.
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be applied to the modal root node
+	*/
 	className: PropTypes.string,
+	/**
+	* The description of the CreateModal serves to provide more information about the modal.
+	*/
 	description: PropTypes.node.isRequired,
+	/**
+	* 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 handler which is called when the CreateModal
+	* is closed.
+	*/
 	onRequestClose: PropTypes.func,
+	/**
+	* Specifies an optional handler which is called when the CreateModal
+	* primary button is pressed.
+	*/
 	onRequestSubmit: PropTypes.func,
+	/**
+	* Specifies whether the CreateModal is open or not.
+	*/
 	open: PropTypes.bool,
+	/**
+	* The DOM node the tearsheet should be rendered within. Defaults to document.body.
+	*/
 	portalTarget: PropTypes.node,
+	/**
+	* Specifies the primary button's text in the modal.
+	*/
 	primaryButtonText: PropTypes.string.isRequired,
+	/**
+	* Specifies the secondary button's text in the modal.
+	*/
 	secondaryButtonText: PropTypes.string.isRequired,
+	/**
+	* Specifies which DOM element in the form should be focused.
+	*/
 	selectorPrimaryFocus: PropTypes.string.isRequired,
+	/**
+	* The subtitle of the CreateModal is optional and serves to provide more information about the modal.
+	*/
 	subtitle: PropTypes.node,
+	/**
+	* The title of the CreateModal is usually the product or service name.
+	*/
 	title: PropTypes.node.isRequired
 };
 CreateModal.displayName = componentName;
-
 //#endregion
-export { CreateModal };
+export { CreateModal };

package/es/components/CreateSidePanel/CreateSidePanel.js

@@ -14,7 +14,6 @@ import { SidePanel } from "../SidePanel/SidePanel.js";
 import React from "react";
 import PropTypes from "prop-types";
 import { Form } from "@carbon/react";
-
 //#region src/components/CreateSidePanel/CreateSidePanel.tsx
 /**
 * Copyright IBM Corp. 2021, 2024
@@ -72,24 +71,81 @@ const CreateSidePanel = React.forwardRef(({ className, children, disableSubmit,
 });
 CreateSidePanel.displayName = componentName;
 CreateSidePanel.propTypes = {
+	/**
+	* Sets the body content of the create side panel
+	*/
+	/**@ts-ignore*/
 	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
 	className: PropTypes.string,
+	/**
+	* The description of the CreateSidePanel serves to provide more information about the form within the panel.
+	*/
 	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 required field that provides a title for a form
+	*/
 	formTitle: PropTypes.node.isRequired,
+	/**
+	* Unique identifier
+	*/
 	id: PropTypes.string,
+	/**
+	* Specifies an optional handler which is called when the CreateSidePanel
+	* is closed.
+	*/
 	onRequestClose: PropTypes.func,
+	/**
+	* Specifies an optional handler which is called when the CreateSidePanel
+	* primary button is pressed.
+	*/
 	onRequestSubmit: PropTypes.func,
+	/**
+	* Specifies whether the CreateSidePanel is open or not.
+	*/
+	/**@ts-ignore*/
 	open: PropTypes.bool,
+	/**
+	* Specifies the primary button's text in the modal.
+	*/
 	primaryButtonText: PropTypes.string.isRequired,
+	/**
+	* Specifies the secondary button's text in the modal.
+	*/
 	secondaryButtonText: PropTypes.string.isRequired,
+	/**
+	* This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
+	* This prop is required when using the `slideIn` variant of the side panel.
+	*/
 	selectorPageContent: PropTypes.string.isRequired,
+	/**
+	* Specifies which DOM element in the form should be focused.
+	*/
+	/**@ts-ignore*/
 	selectorPrimaryFocus: PropTypes.node.isRequired,
+	/**
+	*  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
+	*/
 	slug: PropTypes.node,
+	/**
+	* The subtitle of the CreateSidePanel is optional and serves to provide more information about the modal.
+	*/
 	subtitle: PropTypes.node,
+	/**
+	* The title of the CreateSidePanel is usually the product or service name.
+	*/
 	title: PropTypes.string.isRequired
 };
-
 //#endregion
-export { CreateSidePanel };
+export { CreateSidePanel };