@carbon/ibm-products
Version:
Carbon for IBM Products
98 lines (96 loc) • 4.21 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.
*/
import { __toESM } from "../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../node_modules/classnames/index.js";
import pconsole_default from "../../global/js/utils/pconsole.js";
import { pkg } from "../../settings.js";
import { FormContext, FormNumberContext } from "./EditTearsheet.js";
import { useRetrieveFormTitles } from "../../global/js/hooks/useRetrieveFormTitles.js";
import React, { forwardRef, useContext } from "react";
import PropTypes from "prop-types";
import { Column, FormGroup, Grid } from "@carbon/react";
//#region src/components/EditTearsheet/EditTearsheetForm.tsx
/**
* Copyright IBM Corp. 2022, 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__ */ __toESM(require_classnames());
const componentName = "EditTearsheetForm";
const blockClass = `${pkg.prefix}--tearsheet-edit__form`;
const defaults = { hasFieldset: true };
const EditTearsheetForm = forwardRef(({ children, className, description, fieldsetLegendText, fieldsetLegendId, hasFieldset = defaults.hasFieldset, subtitle, title, ...rest }, ref) => {
const formContext = useContext(FormContext);
const formNumber = useContext(FormNumberContext);
useRetrieveFormTitles({
formContext,
formNumber,
title
});
return formContext ? /* @__PURE__ */ React.createElement("div", {
...rest,
className: (0, import_classnames.default)(blockClass, className, {
[`${blockClass}__form--hidden-form`]: formNumber !== formContext?.currentForm,
[`${blockClass}__form--visible-form`]: formNumber === formContext?.currentForm
}),
ref
}, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Column, {
xlg: 12,
lg: 12,
md: 8,
sm: 4
}, /* @__PURE__ */ React.createElement("h4", { className: `${blockClass}--title` }, title), subtitle && /* @__PURE__ */ React.createElement("h5", { className: `${blockClass}--subtitle` }, subtitle), description && /* @__PURE__ */ React.createElement("p", { className: `${blockClass}--description` }, description)), /* @__PURE__ */ React.createElement(Column, { span: 100 }, hasFieldset ? /* @__PURE__ */ React.createElement(FormGroup, {
legendText: fieldsetLegendText,
className: `${blockClass}--fieldset`,
legendId: fieldsetLegendId
}, /* @__PURE__ */ React.createElement(Grid, null, children)) : children))) : pconsole_default.warn(`You have tried using a ${componentName} component outside of a EditTearsheet. This is not allowed. ${componentName}s should always be children of the EditTearsheet`);
});
EditTearsheetForm.propTypes = {
/**
* Content that shows in the tearsheet form
*/
children: PropTypes.node,
/**
* Sets an optional className to be added to the tearsheet form
*/
className: PropTypes.string,
/**
* Sets an optional description on the form component
*/
description: PropTypes.string,
/**
* 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 form 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 form content.
*/
/**@ts-ignore*/
hasFieldset: PropTypes.bool,
/**
* Sets an optional subtitle on the form component
*/
/**@ts-ignore*/
subtitle: PropTypes.string,
/**
* Sets the title text for a tearsheet form
*/
title: PropTypes.node.isRequired
};
//#endregion
export { EditTearsheetForm };