@carbon/ibm-products 2.36.0-alpha.27 → 2.37.0

package/lib/components/InterstitialScreen/InterstitialScreen.d.ts

@@ -1,8 +1,106 @@
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
+import React, { PropsWithChildren, ReactNode } from 'react';
+type Media = {
+    breakpoints?: {
+        xlg?: number;
+        lg?: number;
+    };
+} & ({
+    render?: () => ReactNode;
+    filePaths?: never;
+} | {
+    render?: never;
+    filePaths?: string[];
+});
+interface InterstitialScreenProps extends PropsWithChildren {
+    /**
+     * Provide the contents of the InterstitialScreen.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * The domain this app belongs to, e.g. "IBM Cloud Pak".
+     */
+    domainName?: string;
+    /**
+     * Provide an optional class to be applied to the <header> element >.
+     */
+    headerClassName?: string;
+    /**
+     * Provide an optional class to be applied to the <header> element >.
+     */
+    headerTitle?: string;
+    /**
+     * Optional parameter to hide the progress indicator when multiple steps are used.
+     */
+    hideProgressIndicator?: boolean;
+    /**
+     * The aria label applied to the Interstitial Screen component
+     */
+    interstitialAriaLabel?: string;
+    /**
+     * Specifies whether the component is shown as a full-screen
+     * experience, else it is shown as a modal by default.
+     */
+    isFullScreen?: boolean;
+    /**
+     * Specifies whether the component is currently open.
+     */
+    isOpen?: boolean;
+    /**
+     * The object describing an image in one of two shapes.
+     *
+     * If a single media element is required, use `{render}`.
+     *
+     * If a stepped animation is required, use `{filePaths}`.
+     *
+     * Breakpoints are used to set the media content column size as well as the remainder for the main content areas column size.
+     * Medium and small breakpoints will be set to 0 internally to focus on the main content area.
+     * @see {@link MEDIA_PROP_TYPE}.
+     */
+    media?: Media;
+    /**
+     * The label for the Next button.
+     */
+    nextButtonLabel?: string;
+    /**
+     * Function to call when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * The label for the Previous button.
+     */
+    previousButtonLabel?: string;
+    /**
+     * The name of this app, e.g. "QRadar".
+     */
+    productName?: string;
+    /**
+     * The label for the skip button.
+     */
+    skipButtonLabel?: string;
+    /**
+     * The label for the start button.
+     */
+    startButtonLabel?: string;
+}
 /**
  * InterstitialScreen can be a full page or an overlay, and are
  * shown on the first time a user accesses a new experience
  * (e.g. upon first login or first time opening a page where a
  * newly purchased capability is presented).
  */
-export let InterstitialScreen: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let InterstitialScreen: React.ForwardRefExoticComponent<InterstitialScreenProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/InterstitialScreen/InterstitialScreen.js

@@ -60,7 +60,6 @@ var defaults = {
   skipButtonLabel: '',
   startButtonLabel: 'Get started'
 };
-
 /**
  * InterstitialScreen can be a full page or an overlay, and are
  * shown on the first time a user accesses a new experience
@@ -115,7 +114,7 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
   var childArray = React.Children.toArray(children);
   var isMultiStep = childArray.length > 1;
   var mediaIsDefined = (media === null || media === void 0 ? void 0 : media.render) || (media === null || media === void 0 ? void 0 : media.filePaths);
-  var bodyScrollRef = React.useRef();
+  var bodyScrollRef = React.useRef(null);
   var mediaBreakpoints = {
     xlg: (media === null || media === void 0 || (_media$breakpoints = media.breakpoints) === null || _media$breakpoints === void 0 ? void 0 : _media$breakpoints.xlg) || 0,
     lg: (media === null || media === void 0 || (_media$breakpoints2 = media.breakpoints) === null || _media$breakpoints2 === void 0 ? void 0 : _media$breakpoints2.lg) || 0,
@@ -136,7 +135,8 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
     onClose();
   }, [onClose]);
   var scrollBodyToTop = function scrollBodyToTop() {
-    bodyScrollRef.current.scroll({
+    var _bodyScrollRef$curren;
+    (_bodyScrollRef$curren = bodyScrollRef.current) === null || _bodyScrollRef$curren === void 0 || _bodyScrollRef$curren.scroll({
       top: 0,
       behavior: 'smooth'
     });
@@ -206,10 +206,12 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
       vertical: false,
       currentIndex: progStep
     }, childArray.map(function (child, idx) {
-      return /*#__PURE__*/React__default["default"].createElement(react.ProgressStep, {
-        key: idx,
-        label: child.props.stepTitle
-      });
+      if ( /*#__PURE__*/React.isValidElement(child)) {
+        return /*#__PURE__*/React__default["default"].createElement(react.ProgressStep, {
+          key: idx,
+          label: child.props.stepTitle
+        });
+      }
     })))), /*#__PURE__*/React__default["default"].createElement(react.ModalBody, {
       className: bodyBlockClass
     }, childElements), /*#__PURE__*/React__default["default"].createElement(react.ModalFooter, null, renderFooter()));
@@ -235,10 +237,12 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
       vertical: false,
       currentIndex: progStep
     }, childArray.map(function (child, idx) {
-      return /*#__PURE__*/React__default["default"].createElement(react.ProgressStep, {
-        key: idx,
-        label: child.props.stepTitle
-      });
+      if ( /*#__PURE__*/React.isValidElement(child)) {
+        return /*#__PURE__*/React__default["default"].createElement(react.ProgressStep, {
+          key: idx,
+          label: child.props.stepTitle
+        });
+      }
     })))), childElements, renderFooter()));
   };
   var renderBody = function renderBody() {
@@ -261,7 +265,10 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
       className: "".concat(blockClass, "__carousel")
     }, /*#__PURE__*/React__default["default"].createElement(Carousel.Carousel, {
       disableArrowScroll: true,
-      ref: scrollRef
+      ref: scrollRef,
+      onScroll: function onScroll(scrollPercent) {
+        scrollPercent === 0 && setProgStep(0);
+      }
     }, children)) : childArray[0])), mediaIsDefined && /*#__PURE__*/React__default["default"].createElement(react.Column, {
       xlg: mediaBreakpoints.xlg,
       lg: mediaBreakpoints.lg,
@@ -280,7 +287,10 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
       className: "".concat(blockClass, "__carousel")
     }, /*#__PURE__*/React__default["default"].createElement(Carousel.Carousel, {
       disableArrowScroll: true,
-      ref: scrollRef
+      ref: scrollRef,
+      onScroll: function onScroll(scrollPercent) {
+        scrollPercent === 0 && setProgStep(0);
+      }
     }, children)) : /*#__PURE__*/React__default["default"].createElement("div", null, childArray[0])));
   };
   var renderFooter = function renderFooter() {
@@ -388,6 +398,7 @@ exports.InterstitialScreen.propTypes = {
    * Medium and small breakpoints will be set to 0 internally to focus on the main content area.
    * @see {@link MEDIA_PROP_TYPE}.
    */
+  /**@ts-ignore */
   media: index["default"].oneOfType([index["default"].shape({
     render: index["default"].func,
     breakpoints: index["default"].shape({

package/lib/components/Nav/NavItem.js

@@ -16,7 +16,7 @@ var cx = require('classnames');
 var settings = require('../../settings.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var NavItemLink = require('./NavItemLink.js');
-var bucket8 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-8.js');
+var bucket9 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-9.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -91,7 +91,7 @@ var NavItem = function NavItem(_ref) {
     element: element,
     href: href,
     tabIndex: navItemTabIndex
-  }, rest, externalLinkProps), children, externalLink && /*#__PURE__*/React__default["default"].createElement(bucket8.Launch, {
+  }, rest, externalLinkProps), children, externalLink && /*#__PURE__*/React__default["default"].createElement(bucket9.Launch, {
     className: "".concat(blockClass, "__link--external__icon")
   })));
 };

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -17,6 +17,7 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var utils = require('./utils.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
+var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
@@ -162,9 +163,7 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
   var previousState = usePreviousValue.usePreviousValue({
     open: open
   });
-  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
-    matches: true
-  };
+  var reducedMotion = usePrefersReducedMotion["default"]();
   React.useEffect(function () {
     // Set the notifications passed to the state within this component
     setAllNotifications(data);
@@ -183,10 +182,10 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     !open && setRender(false);
   };
   React.useEffect(function () {
-    if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
+    if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion) {
       setRender(false);
     }
-  }, [open, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
+  }, [open, previousState === null || previousState === void 0 ? void 0 : previousState.open, reducedMotion]);
   var sortChronologically = function sortChronologically(arr) {
     if (!arr || arr && !arr.length) {
       return;
@@ -326,7 +325,7 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     id: blockClass,
     className: cx__default["default"](blockClass, className, "".concat(blockClass, "__container")),
     style: {
-      animation: !reducedMotion.matches ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : null
+      animation: !reducedMotion ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : null
     },
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef

package/lib/components/PageHeader/PageHeader.js

@@ -34,13 +34,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "enableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground"];
+var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "enableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground", "breadcrumbOverflowTooltipAlign"];
 var componentName = 'PageHeader';
 
 // Default values for props
 var defaults = {
   fullWidthGrid: false,
-  narrowGrid: false
+  narrowGrid: false,
+  breadcrumbOverflowTooltipAlign: 'right'
 };
 exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _withoutBackground, _enableBreadcrumbScro;
@@ -75,6 +76,8 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     tags = _ref.tags,
     title = _ref.title,
     withoutBackground = _ref.withoutBackground,
+    _ref$breadcrumbOverfl = _ref.breadcrumbOverflowTooltipAlign,
+    breadcrumbOverflowTooltipAlign = _ref$breadcrumbOverfl === void 0 ? defaults.breadcrumbOverflowTooltipAlign : _ref$breadcrumbOverfl,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   // handle deprecated props - START
   // if withoutBackground is nullish check deprecated_hasBackgroundAlways and default false
@@ -346,6 +349,8 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     noTrailingSlash: !!title,
     overflowAriaLabel: breadcrumbOverflowAriaLabel,
     breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
+    ,
+    overflowTooltipAlign: breadcrumbOverflowTooltipAlign
   }) : null), /*#__PURE__*/React__default["default"].createElement(react.Column, {
     className: cx__default["default"](["".concat(PageHeaderUtils.blockClass, "__action-bar-column ").concat(PageHeaderUtils.blockClass, "__action-bar-column--background"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), "".concat(PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -537,6 +542,10 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
     var breadcrumbs = _ref11.breadcrumbs;
     return breadcrumbs && breadcrumbs.length > 0;
   }),
+  /**
+   * align breadcrumb overflow tooltip
+   */
+  breadcrumbOverflowTooltipAlign: react.Tooltip.propTypes.align,
   /**
    * Specifies the breadcrumb components to be shown in the breadcrumb area of
    * the page header. Each item is specified as an object with optional fields

package/lib/components/SidePanel/SidePanel.js

@@ -160,7 +160,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       titleItemsStyles(animationProgress);
     }
   }, [doAnimateTitle, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style, scrollAnimationDistance, titleItemsStyles]);
-  var reducedMotion = typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
+  var reducedMotion = typeof document !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
     matches: true
   };
 

package/lib/components/SimpleHeader/SimpleHeader.d.ts

@@ -16,7 +16,7 @@ export function SimpleHeader({ breadcrumbs, className, title, noTrailingSlash, m
     breadcrumbs: any;
     className: any;
     title: any;
-    noTrailingSlash: any;
+    noTrailingSlash?: boolean | undefined;
     maxVisible: any;
     overflowAriaLabel: any;
 }): import("react/jsx-runtime").JSX.Element;
@@ -40,9 +40,5 @@ export namespace SimpleHeader {
         export { overflowAriaLabel_required_if_breadcrumbs_exist as overflowAriaLabel };
         export let title: PropTypes.Requireable<string>;
     }
-    namespace defaultProps {
-        let noTrailingSlash_1: boolean;
-        export { noTrailingSlash_1 as noTrailingSlash };
-    }
 }
 import PropTypes from 'prop-types';

package/lib/components/SimpleHeader/SimpleHeader.js

@@ -42,7 +42,8 @@ var SimpleHeader = function SimpleHeader(_ref) {
   var breadcrumbs = _ref.breadcrumbs,
     className = _ref.className,
     title = _ref.title,
-    noTrailingSlash = _ref.noTrailingSlash,
+    _ref$noTrailingSlash = _ref.noTrailingSlash,
+    noTrailingSlash = _ref$noTrailingSlash === void 0 ? true : _ref$noTrailingSlash,
     maxVisible = _ref.maxVisible,
     overflowAriaLabel = _ref.overflowAriaLabel,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -95,9 +96,6 @@ SimpleHeader.propTypes = {
   /** Header title */
   title: index["default"].string
 };
-SimpleHeader.defaultProps = {
-  noTrailingSlash: true
-};
 
 exports.SimpleHeader = SimpleHeader;
 exports.overflowAriaLabel_required_if_breadcrumbs_exist = overflowAriaLabel_required_if_breadcrumbs_exist;

package/lib/components/Tearsheet/TearsheetNarrow.d.ts

@@ -8,11 +8,8 @@
 import React, { ReactNode, PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
 import { ButtonProps } from '@carbon/react';
-type closeIconDescriptionTypes = {
-    hasCloseIcon: true;
-    closeIconDescription: string;
-};
-interface TearsheetNarrowProps extends PropsWithChildren {
+import { CloseIconDescriptionTypes } from './TearsheetShell';
+interface TearsheetNarrowBaseProps extends PropsWithChildren {
     /**
      * 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
@@ -36,13 +33,6 @@ interface TearsheetNarrowProps extends PropsWithChildren {
      * An optional class or classes to be added to the outermost element.
      */
     className?: string;
-    /**
-     * The accessibility title for the close icon (if shown).
-     *
-     * **Note:** This prop is only required if a close icon is shown, i.e. if
-     * there are a no navigation actions and/or hasCloseIcon is true.
-     */
-    closeIconDescription?: closeIconDescriptionTypes;
     /**
      * A description of the flow, displayed in the header area of the tearsheet.
      */
@@ -89,6 +79,7 @@ interface TearsheetNarrowProps extends PropsWithChildren {
      */
     verticalPosition?: 'normal' | 'lower';
 }
+type TearsheetNarrowProps = TearsheetNarrowBaseProps & CloseIconDescriptionTypes;
 /**
  * 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
@@ -97,7 +88,7 @@ interface TearsheetNarrowProps extends PropsWithChildren {
  * A narrow tearsheet comprises 3 zones: a heading area including a title, the
  * main content area, and a set of action buttons.
  */
-export declare let TearsheetNarrow: React.ForwardRefExoticComponent<TearsheetNarrowProps & React.RefAttributes<unknown>>;
+export declare let TearsheetNarrow: React.ForwardRefExoticComponent<TearsheetNarrowProps & React.RefAttributes<HTMLDivElement>>;
 export declare const deprecatedProps: {
     /**
      * **Deprecated**

package/lib/components/Tearsheet/TearsheetShell.d.ts

@@ -1,6 +1,107 @@
-export const tearsheetShellWideProps: string[];
-export function tearsheetIsPassive(actions: any): boolean;
-export function tearsheetHasCloseIcon(actions: any, hasCloseIcon: any): any;
+/**
+ * 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.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { PropsWithChildren, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { type ButtonProps } from '@carbon/react';
+interface TearsheetShellProps extends PropsWithChildren {
+    actions?: ButtonProps[];
+    ariaLabel?: string;
+    /**
+     * An optional class or classes to be added to the outermost element.
+     */
+    className?: string;
+    /**
+     * A description of the flow, displayed in the header area of the tearsheet.
+     */
+    description?: ReactNode;
+    /**
+     * 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?: boolean;
+    /**
+     * 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?: ReactNode;
+    /**
+     * 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. NB the influencer is only applicable for
+     * wide tearsheets.
+     */
+    influencer?: ReactNode;
+    /**
+     * The position of the influencer section, 'left' or 'right'.
+     */
+    influencerPosition?: 'left' | 'right';
+    /**
+     * The width of the influencer: 'narrow' (the default) is 256px, and 'wide'
+     * is 320px.
+     */
+    influencerWidth?: '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?: ReactNode;
+    /**
+     * Navigation content, such as a set of tabs, to be displayed at the bottom
+     * of the header area of the tearsheet. NB the navigation is only applicable
+     * for wide tearsheets.
+     */
+    navigation?: ReactNode;
+    /**
+     * 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?: () => void;
+    /**
+     * Specifies whether the tearsheet is currently open.
+     */
+    open?: boolean;
+    /**
+     * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: ReactNode;
+    selectorPrimaryFocus?: string;
+    /**
+     * Specifies the width of the tearsheet, 'narrow' or 'wide'.
+     */
+    size: 'narrow' | 'wide';
+    /**
+     *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
+     */
+    slug?: ReactNode;
+    /**
+     * The main title of the tearsheet, displayed in the header area.
+     */
+    title?: ReactNode;
+    verticalPosition?: 'normal' | 'lower';
+}
+export type CloseIconDescriptionTypes = {
+    hasCloseIcon?: false;
+    closeIconDescription?: string;
+} | {
+    hasCloseIcon: true;
+    closeIconDescription: string;
+};
+export declare const tearsheetShellWideProps: string[];
+export declare const tearsheetIsPassive: (actions: any) => boolean;
+export declare const tearsheetHasCloseIcon: (actions: any, hasCloseIcon: any) => any;
 /**
  *  TearSheetShell is used internally by TearSheet and TearSheetNarrow
  *
@@ -8,10 +109,18 @@ export function tearsheetHasCloseIcon(actions: any, hasCloseIcon: any): any;
  *
  * See the canvas tab for the component API details.
  * */
-export const TearsheetShell: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export const portalType: PropTypes.Requireable<object>;
-export namespace deprecatedProps {
-    let verticalPosition: PropTypes.Requireable<string>;
-}
-import React from 'react';
-import PropTypes from 'prop-types';
+export declare const TearsheetShell: React.ForwardRefExoticComponent<(TearsheetShellProps & CloseIconDescriptionTypes) & React.RefAttributes<HTMLDivElement>>;
+export declare const portalType: PropTypes.Requireable<object>;
+export declare 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.Requireable<string>;
+};
+export {};

package/lib/components/Tearsheet/TearsheetShell.js

@@ -46,6 +46,7 @@ var maxDepth = 3;
 // The 'sizes' array contains an array of the sizes for every stacked tearsheet.
 // This is so we can opt-out of including the stacking scale effect when there
 // are stacked tearsheets with mixed sizes (ie, using wide and narrow together)
+
 var stack = {
   open: [],
   all: [],
@@ -103,6 +104,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
   var _useFocus = useFocus.useFocus(modalRef),
     firstElement = _useFocus.firstElement,
     keyDownListener = _useFocus.keyDownListener;
+  var modalRefValue = modalRef.current;
   var wide = size === 'wide';
 
   // Keep track of the stack depth and our position in it (1-based, 0=closed)
@@ -133,7 +135,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
   }
   handleStackChange.checkFocus = function () {
     // if we are now the topmost tearsheet, ensure we have focus
-    if (open && position === depth && modalRef.current && !modalRef.current.contains(document.activeElement)) {
+    if (open && position === depth && modalRefValue && !modalRefValue.contains(document.activeElement)) {
       handleStackChange.claimFocus();
     }
   };
@@ -161,8 +163,9 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
   React.useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
+        var _handler$checkFocus;
         handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
-        handler.checkFocus();
+        (_handler$checkFocus = handler.checkFocus) === null || _handler$checkFocus === void 0 || _handler$checkFocus.call(handler);
       });
     };
 
@@ -201,10 +204,12 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
     // If something within us is receiving focus but we are not the topmost
     // stacked tearsheet, transfer focus to the topmost tearsheet instead
     if (position < depth) {
-      stack.open[stack.open.length - 1].claimFocus();
+      var _stack$open$claimFocu, _stack$open;
+      (_stack$open$claimFocu = (_stack$open = stack.open[stack.open.length - 1]).claimFocus) === null || _stack$open$claimFocu === void 0 || _stack$open$claimFocu.call(_stack$open);
     }
   }
   if (position <= depth) {
+    var _prevDepth$current;
     // Include a modal header if and only if one or more of these is given.
     // We can't use a Wrap for the ModalHeader because ComposedModal requires
     // the direct child to be the ModalHeader instance.
@@ -225,7 +230,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       "aria-label": ariaLabel || getNodeTextContent.getNodeTextContent(title),
       className: cx__default["default"](bc, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
+      depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
       slug: slug,
       style: setScaleValues(),
       containerClassName: cx__default["default"]("".concat(bc, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !areAllSameSizeVariant())),
@@ -273,7 +278,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       alwaysRender: includeActions
     }, /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
       className: "".concat(bc, "__content"),
-      alwaysRender: influencer && influencerPosition === 'right'
+      alwaysRender: !!(influencer && influencerPosition === 'right')
     }, children), /*#__PURE__*/React__default["default"].createElement(Wrap.Wrap, {
       className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition !== 'right'
@@ -281,7 +286,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       className: "".concat(bc, "__button-container")
     }, /*#__PURE__*/React__default["default"].createElement(ActionSet.ActionSet, {
       actions: actions,
-      buttonSize: wide ? '2xl' : null,
+      buttonSize: wide ? '2xl' : undefined,
       className: "".concat(bc, "__buttons"),
       size: wide ? '2xl' : 'lg',
       "aria-hidden": !open
@@ -332,6 +337,7 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
+  /**@ts-ignore*/
   actions: index["default"].arrayOf(
   // NB we don't include the validator here, as the component wrapping this
   // one should ensure appropriate validation is done.
@@ -356,6 +362,7 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * **Note:** This prop is only required if a close icon is shown, i.e. if
    * there are a no navigation actions and/or hasCloseIcon is true.
    */
+  /**@ts-ignore*/
   closeIconDescription: index["default"].string.isRequired.if(function (_ref4) {
     var actions = _ref4.actions,
       hasCloseIcon = _ref4.hasCloseIcon;
@@ -373,6 +380,7 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * tearsheet"), and that behavior can be overridden if required by setting
    * this prop to either true or false.
    */
+  /**@ts-ignore*/
   hasCloseIcon: index["default"].bool,
   /**
    * The content for the header actions area, displayed alongside the title in
@@ -422,10 +430,12 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
+  /**@ts-ignore*/
   portalTarget: portalType,
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */
+  /**@ts-ignore*/
   size: index["default"].oneOf(['narrow', 'wide']).isRequired,
   /**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component