@carbon/ibm-products/lib/components/Tearsheet/TearsheetNarrow.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('@carbon/react');
var TearsheetShell = require('./TearsheetShell.js');
var React = require('react');
var propsHelper = require('../../global/js/utils/props-helper.js');
var ActionSet = require('../ActionSet/ActionSet.js');
var index = require('../../_virtual/index.js');
var devtools = require('../../global/js/utils/devtools.js');
var settings = require('../../settings.js');

const componentName = 'TearsheetNarrow';

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

// Default values for props
const defaults = {
  verticalPosition: 'lower'
};

/**
 * A narrow tearsheet is a slimmer variant of the tearsheet, providing a dialog
 * that keeps users in-context and focused by bringing actionable content front
 * and center while revealing more of the UI behind it.
 *
 * A narrow tearsheet comprises 3 zones: a heading area including a title, the
 * main content area, and a set of action buttons.
 */

exports.TearsheetNarrow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    verticalPosition = defaults.verticalPosition,
    ...rest
  } = _ref;
  return /*#__PURE__*/React.createElement(TearsheetShell.TearsheetShell, _rollupPluginBabelHelpers.extends({}, devtools.getDevtoolsProps(componentName), propsHelper.prepareProps(rest, TearsheetShell.tearsheetShellWideProps), {
    verticalPosition,
    ref,
    size: 'narrow'
  }));
});

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

// The display name of the component, used by React. Note that displayName
// is used in preference to relying on function.name.
exports.TearsheetNarrow.displayName = componentName;
const deprecatedProps = {
  /**
   * **Deprecated**
   *
   * The position of the top of tearsheet in the viewport. The 'normal'
   * position 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 (the default) 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'])
};

// The types and DocGen commentary for the component props,
// in alphabetical order (for consistency).
// See https://www.npmjs.com/package/prop-types#usage.

// Note that the descriptions here should be kept in sync with those for the
// corresponding props for Tearsheet and TearsheetShell components.
exports.TearsheetNarrow.propTypes = {
  /**
   * The navigation actions to be shown as buttons in the action area at the
   * bottom of the tearsheet. Each action is specified as an object with
   * optional fields: 'label' to supply the button label, 'kind' to select the
   * button kind (must be 'primary', 'secondary' or 'ghost'), 'loading' to
   * display a loading indicator, and 'onClick' to receive notifications when
   * the button is clicked. Additional fields in the object will be passed to
   * the Button component, and these can include 'disabled', 'ref', 'className',
   * and any other Button props. Any other fields in the object will be passed
   * through to the button element as HTML attributes.
   *
   * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
   */
  actions: propsHelper.allPropTypes([/**@ts-ignore */
  ActionSet.ActionSet.validateActions(() => 'lg'), index.default.arrayOf(index.default.shape({
    /**@ts-ignore*/
    ...react.Button.propTypes,
    kind: index.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
    label: index.default.string,
    loading: index.default.bool,
    // we duplicate this Button prop to improve the DocGen here
    /**@ts-ignore*/
    onClick: react.Button.propTypes.onClick
  }))]),
  /**
   * The aria-label for the tearsheet, which is optional.
   * if it is not passed, the title will be used as the aria-label.
   */
  ariaLabel: index.default.string,
  /**
   * An optional class or classes to be added to the outermost element.
   */
  className: index.default.string,
  /**
   * The accessibility title for the close icon (if shown).
   *
   */
  closeIconDescription: index.default.string,
  /**
   * A description of the flow, displayed in the header area of the tearsheet.
   */
  description: index.default.node,
  /**
   * Enable a close icon ('x') in the header area of the tearsheet. By default,
   * a tearsheet does not display a close icon, but one should be enabled if
   * the tearsheet is read-only or has no navigation actions (sometimes called
   * a "passive tearsheet").
   */
  hasCloseIcon: index.default.bool,
  /**
   * 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.
   */
  onClose: index.default.func,
  /**
   * Specifies whether the tearsheet is currently open.
   */
  open: index.default.bool,
  /**
   * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
   */
  /**@ts-ignore */
  portalTarget: TearsheetShell.portalType,
  /**
   * Specify a CSS selector that matches the DOM element that should be
   * focused when the Modal opens.
   */
  selectorPrimaryFocus: index.default.string,
  /**
   * Specify the CSS selectors that match the floating menus.
   *
   * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
   */
  /**@ts-ignore*/
  selectorsFloatingMenus: index.default.arrayOf(index.default.string),
  /**
   * The main title of the tearsheet, displayed in the header area.
   */
  title: index.default.node,
  ...deprecatedProps
};

exports.deprecatedProps = deprecatedProps;