@carbon/ibm-products/es/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.
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef, useContext } from 'react';
import PropTypes from '../../_virtual/index.js';
import cx from 'classnames';
import { Grid, Column, FormGroup } from '@carbon/react';
import { FormContext, FormNumberContext } from './EditTearsheet.js';
import { pkg } from '../../settings.js';
import pconsole from '../../global/js/utils/pconsole.js';
import { useRetrieveFormTitles } from '../../global/js/hooks/useRetrieveFormTitles.js';

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

// Default values for props
const defaults = {
  hasFieldset: true
};
let EditTearsheetForm = /*#__PURE__*/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 = useContext(FormContext);
  const formNumber = useContext(FormNumberContext);
  useRetrieveFormTitles({
    formContext,
    formNumber,
    title
  });
  return formContext ? /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
    className: cx(blockClass, className, {
      [`${blockClass}__form--hidden-form`]: formNumber !== formContext?.currentForm,
      [`${blockClass}__form--visible-form`]: formNumber === formContext?.currentForm
    }),
    ref: ref
  }), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, {
    xlg: 12,
    lg: 12,
    md: 8,
    sm: 4
  }, /*#__PURE__*/React__default.createElement("h4", {
    className: `${blockClass}--title`
  }, title), subtitle && /*#__PURE__*/React__default.createElement("h6", {
    className: `${blockClass}--subtitle`
  }, subtitle), description && /*#__PURE__*/React__default.createElement("p", {
    className: `${blockClass}--description`
  }, description)), /*#__PURE__*/React__default.createElement(Column, {
    span: 100
  }, hasFieldset ? /*#__PURE__*/React__default.createElement(FormGroup, {
    legendText: fieldsetLegendText,
    className: `${blockClass}--fieldset`
  }, /*#__PURE__*/React__default.createElement(Grid, null, children)) : children))) : pconsole.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
EditTearsheetForm = pkg.checkComponentEnabled(EditTearsheetForm, componentName);
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 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.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: 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
};

export { EditTearsheetForm };