@carbon/ibm-products/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.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 react = require('@carbon/react');
var index = require('../../_virtual/index.js');
var TearsheetNarrow = require('../Tearsheet/TearsheetNarrow.js');
var cx = require('classnames');
var devtools = require('../../global/js/utils/devtools.js');
var settings = require('../../settings.js');
var uuidv4 = require('../../global/js/utils/uuidv4.js');

// The block part of our conventional BEM class names (blockClass__E--M).
const blockClass = `${settings.pkg.prefix}--create-tearsheet-narrow`;
const componentName = 'CreateTearsheetNarrow';

// NOTE: the component SCSS is not imported here: it is rolled up separately.

/**
 * Use a narrow tearsheet as an alternative to a modal when there is scrolling.
 * Use when the form fields can be broken down into sections using section headers.
 */
exports.CreateTearsheetNarrow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    children,
    className,
    description,
    disableSubmit,
    formDescription,
    formTitle,
    label,
    open,
    onRequestClose,
    onRequestSubmit,
    primaryButtonText,
    secondaryButtonText,
    selectorPrimaryFocus,
    title,
    verticalPosition,
    ...rest
  } = _ref;
  const actions = [{
    label: primaryButtonText,
    onClick: onRequestSubmit,
    kind: 'primary',
    disabled: disableSubmit
  }, {
    label: secondaryButtonText,
    onClick: onRequestClose,
    kind: 'secondary'
  }];
  const formTextClass = `${blockClass}__content-text`;
  const formTitleId = uuidv4.default();
  return /*#__PURE__*/React.createElement(TearsheetNarrow.TearsheetNarrow, _rollupPluginBabelHelpers.extends({}, rest, {
    title: title,
    description: description,
    className: cx(blockClass, className),
    actions: actions,
    open: open,
    ref: ref,
    onClose: () => {
      onRequestClose?.();
      return false;
    },
    label: label,
    selectorPrimaryFocus: selectorPrimaryFocus,
    verticalPosition: verticalPosition,
    role: "presentation"
  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("h3", {
    className: cx(`${blockClass}__form-title-text`, formTextClass),
    id: formTitleId
  }, formTitle), /*#__PURE__*/React.createElement("p", {
    className: cx(`${blockClass}__form-description-text`, formTextClass)
  }, formDescription), /*#__PURE__*/React.createElement(react.Form, {
    className: `${blockClass}__form`,
    "aria-labelledby": formTitleId
  }, children));
});

// Return a placeholder if not released and not enabled by feature flag
exports.CreateTearsheetNarrow = settings.pkg.checkComponentEnabled(exports.CreateTearsheetNarrow, componentName);

// The display name of the component, used by React. Note that displayName
// is used in preference to relying on function.name.
exports.CreateTearsheetNarrow.displayName = componentName;

// The types and DocGen commentary for the component props,
// in alphabetical order (for consistency).
// See https://www.npmjs.com/package/prop-types#usage.
exports.CreateTearsheetNarrow.propTypes = {
  /**
   * Provide the contents of the CreateTearsheetNarrow.
   */
  children: index.default.node.isRequired,
  /**
   * Provide an optional class to be applied to the containing node.
   */
  className: index.default.string,
  /**
   * A description of the flow, displayed in the header area of the tearsheet.
   */
  description: index.default.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: index.default.bool,
  /**
   * Specifies an optional field that provides a additional context for a form
   */
  formDescription: index.default.node,
  /**
   * Specifies a field that provides a title for a form
   */
  formTitle: index.default.node,
  /**
   * A label for the tearsheet, displayed in the header area of the tearsheet
   * to maintain context for the tearsheet (e.g. as the title changes from page
   * to page of a multi-page task).
   */
  label: index.default.node,
  /**
   * An optional handler that is called when the user closes the tearsheet (by
   * clicking the close button, if enabled, or clicking outside, if enabled).
   * Returning `false` here prevents the modal from closing.
   */
  onRequestClose: index.default.func,
  /**
   * Specifies an optional handler which is called when the CreateTearsheetNarrow
   * primary button is pressed.
   */
  onRequestSubmit: index.default.func,
  /**
   * Specifies whether the tearsheet is currently open.
   */
  open: index.default.bool,
  /**
   * Specifies the primary button's text in the CreateTearsheetNarrow.
   */
  primaryButtonText: index.default.string.isRequired,
  /**
   * Specifies the secondary button's text in the CreateTearsheetNarrow.
   */
  secondaryButtonText: index.default.string.isRequired,
  /**
   * Specifies which DOM element in the form should be focused.
   */
  selectorPrimaryFocus: index.default.node,
  /**
   * The main title of the tearsheet, displayed in the header area.
   */
  title: index.default.node,
  /**
   * The position of the top of tearsheet in the viewport. The 'normal'
   * position (the default) is a short distance down from the top of the
   * viewport, leaving room at the top for a global header bar to show through
   * from below. The 'lower' position provides a little extra room at the top
   * to allow an action bar navigation or breadcrumbs to also show through.
   */
  verticalPosition: index.default.oneOf(['normal', 'lower'])
};