@carbon/ibm-products
Version:
Carbon for IBM Products
144 lines (142 loc) • 5.18 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 { getDevtoolsProps } from "../../global/js/utils/devtools.js";
import { allPropTypes, prepareProps } from "../../global/js/utils/props-helper.js";
import { TearsheetShell, portalType, tearsheetShellWideProps } from "./TearsheetShell.js";
import React from "react";
import PropTypes from "prop-types";
import { Button } from "@carbon/react";
//#region src/components/Tearsheet/TearsheetNarrow.tsx
/**
* Copyright IBM Corp. 2020, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const componentName = "TearsheetNarrow";
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.
*/
const TearsheetNarrow = React.forwardRef(({ verticalPosition = defaults.verticalPosition, ...rest }, ref) => /* @__PURE__ */ React.createElement(TearsheetShell, {
...getDevtoolsProps(componentName),
...prepareProps(rest, tearsheetShellWideProps),
verticalPosition,
ref,
size: "narrow"
}));
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: PropTypes.oneOf(["normal", "lower"]) };
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: allPropTypes([PropTypes.arrayOf(PropTypes.shape({
...Button.propTypes,
kind: PropTypes.oneOf([
"ghost",
"danger--ghost",
"secondary",
"danger",
"primary"
]),
label: PropTypes.string,
loading: PropTypes.bool,
/**@ts-ignore*/
onClick: 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: PropTypes.string,
/**
* An optional class or classes to be added to the outermost element.
*/
className: PropTypes.string,
/**
* The accessibility title for the close icon (if shown).
*
*/
closeIconDescription: PropTypes.string,
/**
* A description of the flow, displayed in the header area of the tearsheet.
*/
description: PropTypes.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: PropTypes.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: PropTypes.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: PropTypes.func,
/**
* Specifies whether the tearsheet is currently open.
*/
open: PropTypes.bool,
/**
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
*/
/**@ts-ignore */
portalTarget: portalType,
/**
* Specify a CSS selector that matches the DOM element that should be
* focused when the Modal opens.
*/
selectorPrimaryFocus: PropTypes.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: PropTypes.arrayOf(PropTypes.string),
/**
* The main title of the tearsheet, displayed in the header area.
*/
title: PropTypes.node,
...deprecatedProps
};
//#endregion
export { TearsheetNarrow };