@carbon/ibm-products/lib/components/Tearsheet/Tearsheet.js

Carbon for IBM Products

/**
 * 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.
 */

const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_devtools = require("../../global/js/utils/devtools.js");
const require_props_helper = require("../../global/js/utils/props-helper.js");
const require_TearsheetShell = require("./TearsheetShell.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
//#region src/components/Tearsheet/Tearsheet.tsx
/**
* Copyright IBM Corp. 2020, 2023
*
* 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 = "Tearsheet";
/**
* A tearsheet is a mostly full-screen type of dialog that keeps users
* in-context and focused by bringing actionable content front and center while
* revealing parts of the UI behind it. There is also a narrow variant of the
* tearsheet.
*
* A tearsheet comprises up to 5 zones, allowing for flexibility depending on
* the content: a heading area including a title, an optional navigation area
* that sits just below the heading, an optional influencer which is a side
* panel on either the left or right side, the main content area, and a set of
* action buttons.
*/
const Tearsheet = react.default.forwardRef((props, ref) => {
	const { influencerPosition = "left", influencerWidth = "narrow", children, ...rest } = props;
	return /* @__PURE__ */ react.default.createElement(require_TearsheetShell.TearsheetShell, {
		...require_devtools.getDevtoolsProps(componentName),
		...rest,
		influencerPosition,
		influencerWidth,
		ref,
		size: "wide"
	}, children);
});
Tearsheet.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: prop_types.default.oneOf(["normal", "lower"]) };
Tearsheet.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, except 'size'. 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: require_props_helper.allPropTypes([prop_types.default.arrayOf(prop_types.default.shape({
		..._carbon_react.Button.propTypes,
		kind: prop_types.default.oneOf([
			"ghost",
			"danger--ghost",
			"secondary",
			"danger",
			"primary"
		]),
		label: prop_types.default.string,
		loading: prop_types.default.bool,
		/**@ts-ignore*/
		onClick: _carbon_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: prop_types.default.string,
	/**
	* An optional class or classes to be added to the outermost element.
	*/
	className: prop_types.default.string,
	/**
	* The accessibility title for the close icon (if shown).
	*
	*/
	closeIconDescription: prop_types.default.string,
	/**
	* A description of the flow, displayed in the header area of the tearsheet.
	*/
	description: prop_types.default.node,
	/**
	* Enable a close icon ('x') in the header area of the tearsheet. By default,
	* (when this prop is omitted, or undefined or null) a tearsheet does not
	* display a close icon if there are navigation actions ("transactional
	* tearsheet") and displays one if there are no navigation actions ("passive
	* tearsheet"), and that behavior can be overridden if required by setting
	* this prop to either true or false.
	*/
	hasCloseIcon: prop_types.default.bool,
	/**
	* The content for the header actions area, displayed alongside the title in
	* the header area of the tearsheet. This is typically a drop-down, or a set
	* of small buttons, or similar. NB the headerActions is only applicable for
	* wide tearsheets.
	*/
	headerActions: prop_types.default.element,
	/**
	* The content for the influencer section of the tearsheet, displayed
	* alongside the main content. This is typically a menu, or filter, or
	* progress indicator, or similar.
	*/
	influencer: prop_types.default.element,
	/**
	* The position of the influencer section, 'left' or 'right'.
	*/
	influencerPosition: prop_types.default.oneOf(["left", "right"]),
	/**
	* The width of the influencer: 'narrow' (the default) is 256px, and 'wide'
	* is 320px.
	*/
	influencerWidth: prop_types.default.oneOf(["narrow", "wide"]),
	/**
	* 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: prop_types.default.node,
	/**
	* Provide a ref to return focus to once the tearsheet is closed.
	*/
	launcherButtonRef: prop_types.default.any,
	/**
	* Navigation content, such as a set of tabs, to be displayed at the bottom
	* of the header area of the tearsheet.
	*/
	navigation: prop_types.default.element,
	/**
	* 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: prop_types.default.func,
	/**
	* Specifies whether the tearsheet is currently open.
	*/
	open: prop_types.default.bool,
	/**
	* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
	*/
	/**@ts-ignore */
	portalTarget: require_TearsheetShell.portalType,
	/**
	* Specify a CSS selector that matches the DOM element that should be
	* focused when the Modal opens.
	*/
	selectorPrimaryFocus: prop_types.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: prop_types.default.arrayOf(prop_types.default.string),
	/**
	* The main title of the tearsheet, displayed in the header area.
	*/
	title: prop_types.default.node,
	...deprecatedProps
};
//#endregion
exports.Tearsheet = Tearsheet;