@carbon/ibm-products
Version:
Carbon for IBM Products
214 lines (212 loc) • 9.15 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../node_modules/classnames/index.js");
const require_pconsole = require("../../global/js/utils/pconsole.js");
const require_settings = require("../../settings.js");
const require_usePreviousValue = require("../../global/js/hooks/usePreviousValue.js");
const require_useRetrieveStepData = require("../../global/js/hooks/useRetrieveStepData.js");
const require_CreateTearsheet = require("./CreateTearsheet.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
//#region src/components/CreateTearsheet/CreateTearsheetStep.tsx
/**
* Copyright IBM Corp. 2021, 2025
*
* 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 import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const componentName = "CreateTearsheetStep";
const blockClass = `${require_settings.pkg.prefix}--tearsheet-create__step`;
const defaults = {
hasFieldset: true,
includeStep: true
};
const CreateTearsheetStep = (0, react.forwardRef)(({ children, className, description, disableSubmit, experimentalSecondarySubmit, fieldsetLegendText, fieldsetLegendId, hasFieldset = defaults.hasFieldset, includeStep = defaults.includeStep, introStep, invalid, onMount, onNext, onPrevious, secondaryButtonDisabled, secondaryLabel, subtitle, title, ...rest }, ref) => {
const localRef = (0, react.useRef)(null);
const stepRef = ref || localRef;
const stepRefValue = stepRef.current;
const stepsContext = (0, react.useContext)(require_CreateTearsheet.StepsContext);
const stepNumber = (0, react.useContext)(require_CreateTearsheet.StepNumberContext);
const [shouldIncludeStep, setShouldIncludeStep] = (0, react.useState)(includeStep);
const previousState = require_usePreviousValue.usePreviousValue({ currentStep: stepsContext?.currentStep });
require_useRetrieveStepData.useRetrieveStepData({
stepsContext,
stepNumber,
introStep: !!introStep,
shouldIncludeStep,
secondaryLabel: secondaryLabel || "",
title,
invalid: !!invalid
});
(0, react.useEffect)(() => {
if (stepNumber === stepsContext?.currentStep && previousState?.currentStep !== stepsContext?.currentStep) {
stepsContext?.setOnMount(onMount);
stepsContext?.setExperimentalSecondarySubmit(experimentalSecondarySubmit);
}
}, [
onMount,
experimentalSecondarySubmit,
stepsContext,
stepNumber,
previousState?.currentStep
]);
(0, react.useEffect)(() => {
setShouldIncludeStep(includeStep);
}, [
includeStep,
stepsContext,
title
]);
(0, react.useEffect)(() => {
if (stepNumber === stepsContext?.currentStep) {
stepsContext.setIsDisabled(!!disableSubmit);
stepsContext?.setOnNext(onNext);
stepsContext?.setOnPrevious(onPrevious);
stepsContext?.setSecondaryButtonDisabled?.(!!secondaryButtonDisabled);
stepsContext?.setExperimentalSecondarySubmit(experimentalSecondarySubmit);
}
}, [
stepsContext,
stepNumber,
disableSubmit,
onNext,
onPrevious,
secondaryButtonDisabled,
stepRef,
stepRefValue,
experimentalSecondarySubmit
]);
const renderDescription = () => {
if (description) {
if (typeof description === "string") return /* @__PURE__ */ react.default.createElement("p", { className: `${blockClass}--description` }, description);
if ((0, react.isValidElement)(description)) return /* @__PURE__ */ react.default.createElement("div", { className: `${blockClass}--description` }, description);
}
return null;
};
return stepsContext ? /* @__PURE__ */ react.default.createElement("div", {
ref: stepRef,
inert: stepNumber !== stepsContext?.currentStep
}, /* @__PURE__ */ react.default.createElement(_carbon_react.Grid, {
...rest,
className: (0, import_classnames.default)(blockClass, className, {
[`${blockClass}__step--hidden-step`]: stepNumber !== stepsContext?.currentStep,
[`${blockClass}__step--visible-step`]: stepNumber === stepsContext?.currentStep
})
}, /* @__PURE__ */ react.default.createElement(_carbon_react.Column, {
xlg: 12,
lg: 12,
md: 8,
sm: 4
}, /* @__PURE__ */ react.default.createElement("h4", { className: `${blockClass}--title` }, title), subtitle && /* @__PURE__ */ react.default.createElement("h5", { className: `${blockClass}--subtitle` }, subtitle), renderDescription()), /* @__PURE__ */ react.default.createElement(_carbon_react.Column, { span: 100 }, hasFieldset ? /* @__PURE__ */ react.default.createElement(_carbon_react.FormGroup, {
legendText: fieldsetLegendText,
className: `${blockClass}--fieldset`,
legendId: fieldsetLegendId
}, children) : children))) : require_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: prop_types.default.node,
/**
* Sets an optional className to be added to the tearsheet step
*/
className: prop_types.default.string,
/**
* Sets an optional description on the step component
*/
description: prop_types.default.node,
/**
* This will conditionally disable the submit button in the multi step Tearsheet
*/
disableSubmit: prop_types.default.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: prop_types.default.shape({
labelText: prop_types.default.string,
disabled: prop_types.default.bool,
hideSecondarySubmit: prop_types.default.bool,
onClick: prop_types.default.func
}),
/**
* This is the required legend id that appears as the aria-labelledby of fieldset for accessibility purposes.
*/
/**@ts-ignore*/
fieldsetLegendId: prop_types.default.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: prop_types.default.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: prop_types.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
* 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: prop_types.default.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: prop_types.default.bool,
/**
* This optional prop will indicate an error icon on the progress indicator step item
*/
invalid: prop_types.default.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: prop_types.default.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: prop_types.default.func,
/**
* Optional function to be called when you move to the previous step.
*/
onPrevious: prop_types.default.func,
/**
* This will conditionally disable the secondary (Back) button in the multi step Tearsheet
*/
secondaryButtonDisabled: prop_types.default.bool,
/**
* Sets the optional secondary label on the progress step component
*/
secondaryLabel: prop_types.default.string,
/**
* Sets an optional subtitle on the step component
*/
subtitle: prop_types.default.string,
/**
* Sets the title text for a tearsheet step
*/
title: prop_types.default.node.isRequired
};
//#endregion
exports.CreateTearsheetStep = CreateTearsheetStep;