@carbon/ibm-products/lib/components/EditTearsheet/EditTearsheetForm.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 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.
 */

'use strict';

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index = require('../../_virtual/index.js');
var cx = require('classnames');
var react = require('@carbon/react');
var EditTearsheet = require('./EditTearsheet.js');
var settings = require('../../settings.js');
var pconsole = require('../../global/js/utils/pconsole.js');
var useRetrieveFormTitles = require('../../global/js/hooks/useRetrieveFormTitles.js');

const componentName = 'EditTearsheetForm';
const blockClass = `${settings.pkg.prefix}--tearsheet-edit__form`;

// Default values for props
const defaults = {
  hasFieldset: true
};
exports.EditTearsheetForm = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    // The component props, in alphabetical order (for consistency).

    children,
    className,
    description,
    fieldsetLegendText,
    hasFieldset = defaults.hasFieldset,
    subtitle,
    title,
    // Collect any other property values passed in.
    ...rest
  } = _ref;
  const formContext = React.useContext(EditTearsheet.FormContext);
  const formNumber = React.useContext(EditTearsheet.FormNumberContext);
  useRetrieveFormTitles.useRetrieveFormTitles({
    formContext,
    formNumber,
    title
  });
  return formContext ? /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
    className: cx(blockClass, className, {
      [`${blockClass}__form--hidden-form`]: formNumber !== formContext?.currentForm,
      [`${blockClass}__form--visible-form`]: formNumber === formContext?.currentForm
    }),
    ref: ref
  }), /*#__PURE__*/React.createElement(react.Grid, null, /*#__PURE__*/React.createElement(react.Column, {
    xlg: 12,
    lg: 12,
    md: 8,
    sm: 4
  }, /*#__PURE__*/React.createElement("h4", {
    className: `${blockClass}--title`
  }, title), subtitle && /*#__PURE__*/React.createElement("h6", {
    className: `${blockClass}--subtitle`
  }, subtitle), description && /*#__PURE__*/React.createElement("p", {
    className: `${blockClass}--description`
  }, description)), /*#__PURE__*/React.createElement(react.Column, {
    span: 100
  }, hasFieldset ? /*#__PURE__*/React.createElement(react.FormGroup, {
    legendText: fieldsetLegendText,
    className: `${blockClass}--fieldset`
  }, /*#__PURE__*/React.createElement(react.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`);
});

// Return a placeholder if not released and not enabled by feature flag
exports.EditTearsheetForm = settings.pkg.checkComponentEnabled(exports.EditTearsheetForm, componentName);
exports.EditTearsheetForm.propTypes = {
  /**
   * Content that shows in the tearsheet form
   */
  children: index.default.node,
  /**
   * Sets an optional className to be added to the tearsheet form
   */
  className: index.default.string,
  /**
   * Sets an optional description on the form component
   */
  description: index.default.string,
  /**
   * 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: index.default.string.isRequired.if(_ref2 => {
    let {
      hasFieldset
    } = _ref2;
    return !!hasFieldset;
  }),
  /**
   * 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: index.default.bool,
  /**
   * Sets an optional subtitle on the form component
   */
  /**@ts-ignore*/
  subtitle: index.default.string,
  /**
   * Sets the title text for a tearsheet form
   */
  title: index.default.node.isRequired
};