@carbon/ibm-products 2.78.0-rc.0 → 2.79.0-rc.0

package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -186,114 +186,117 @@ const ConditionBlock = props => {
       group: group
     });
   };
-  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
-    className: cx(`${util.blockClass}__condition-block`, {
-      [`${util.blockClass}__condition__deletion-preview`]: showDeletionPreview
-    }, {
-      [`${util.blockClass}__gap-bottom`]: variant == util.HIERARCHICAL_VARIANT
-    }, {
-      [`${util.blockClass}__gap ${util.blockClass}__gap-bottom`]: variant == util.NON_HIERARCHICAL_VARIANT
-    }, {
-      [`${util.blockClass}__condition--interacting`]: showAllActions
-    }),
-    role: "row",
-    "aria-label": conditionRowText
-  }, getAriaAttributes(), {
-    tabIndex: -1,
-    onMouseEnter: showAllActionsHandler,
-    onMouseLeave: hideAllActionsHandler,
-    onBlur: hideAllActionsHandler
-  }), conjunction ? /*#__PURE__*/React.createElement(ConditionConnector.default, {
-    className: `${util.blockClass}__gap`,
-    operator: conjunction,
-    onChange: op => onConnectorOperatorChange?.(op)
-  }) : '', isStatement && /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
-    label: group.statement,
-    title: conditionText,
-    "data-name": "connectorField",
-    popOverClassName: `${util.blockClass}__gap ${util.blockClass}__connector`,
-    className: `${util.blockClass}__statement-button`,
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(ItemOption.ItemOption, {
-    conditionState: {
-      value: group.statement,
-      label: conditionText
-    },
-    onChange: onStatementChangeHandler,
-    config: {
-      options: statementConfig,
-      isStatement: true
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: `${util.blockClass}__condition-inner-block`
-  }, /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
-    label: label ?? condition?.property,
-    title: propertyText,
-    renderIcon: icon ?? undefined,
-    className: `${util.blockClass}__property-field`,
-    "data-name": "propertyField",
-    condition: condition,
-    type: type,
-    description: description,
-    onChange: onPropertyChangeHandler,
-    renderChildren: renderItemOption
-  }), util.checkIsValid(property) && /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
-    label: operator,
-    title: operatorText,
-    "data-name": "operatorField",
-    condition: condition,
-    type: type,
-    config: config,
-    onChange: onOperatorChangeHandler
-  }, /*#__PURE__*/React.createElement(ItemOption.ItemOption, {
-    config: {
-      options: getOperators()
-    },
-    conditionState: {
-      value: operator,
-      label: operatorText
-    },
-    onChange: onOperatorChangeHandler
-  })), util.checkIsValid(property) && util.checkIsValid(operator) && /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
-    label: value,
-    type: type,
-    title: label,
-    showToolTip: true,
-    "data-name": "valueField",
-    condition: condition,
-    config: config,
-    onChange: onValueChangeHandler,
-    renderChildren: renderChildren
-  })), !readOnly && /*#__PURE__*/React.createElement("span", {
-    role: "gridcell",
-    "aria-label": removeConditionText
-  }, /*#__PURE__*/React.createElement(ConditionBuilderButton.ConditionBuilderButton, {
-    hideLabel: true,
-    label: removeConditionText,
-    onClick: onRemove,
-    onMouseEnter: handleShowDeletionPreview,
-    onMouseLeave: handleHideDeletionPreview,
-    onFocus: handleShowDeletionPreview,
-    onBlur: handleHideDeletionPreview,
-    renderIcon: icons.Close,
-    className: `${util.blockClass}__close-condition`,
-    "data-name": "closeCondition",
-    wrapperClassName: `${util.blockClass}__close-condition-wrapper`
-  })), !readOnly && manageActionButtons(conditionIndex, group.conditions) ? /*#__PURE__*/React.createElement(ConditionBuilderAdd.default, {
-    onClick: () => {
-      addConditionHandler?.(conditionIndex);
-    },
-    addConditionSubGroupHandler: () => {
-      addConditionSubGroupHandler?.(conditionIndex);
-    },
-    showConditionSubGroupPreviewHandler: showConditionSubGroupPreviewHandler,
-    hideConditionSubGroupPreviewHandler: hideConditionSubGroupPreviewHandler,
-    enableSubGroup: variant == util.HIERARCHICAL_VARIANT,
-    showConditionPreviewHandler: showConditionPreviewHandler,
-    hideConditionPreviewHandler: hideConditionPreviewHandler,
-    className: `${util.blockClass}__gap ${util.blockClass}__gap-left`,
-    group: group
-  }) : null);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    React.createElement("div", _rollupPluginBabelHelpers.extends({
+      className: cx(`${util.blockClass}__condition-block`, {
+        [`${util.blockClass}__condition__deletion-preview`]: showDeletionPreview
+      }, {
+        [`${util.blockClass}__gap-bottom`]: variant == util.HIERARCHICAL_VARIANT
+      }, {
+        [`${util.blockClass}__gap ${util.blockClass}__gap-bottom`]: variant == util.NON_HIERARCHICAL_VARIANT
+      }, {
+        [`${util.blockClass}__condition--interacting`]: showAllActions
+      }),
+      role: "row",
+      "aria-label": conditionRowText
+    }, getAriaAttributes(), {
+      onMouseEnter: showAllActionsHandler,
+      onMouseLeave: hideAllActionsHandler,
+      onBlur: hideAllActionsHandler
+    }), conjunction ? /*#__PURE__*/React.createElement(ConditionConnector.default, {
+      className: `${util.blockClass}__gap`,
+      operator: conjunction,
+      onChange: op => onConnectorOperatorChange?.(op)
+    }) : '', isStatement && /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: group.statement,
+      title: conditionText,
+      "data-name": "connectorField",
+      popOverClassName: `${util.blockClass}__gap ${util.blockClass}__connector`,
+      className: `${util.blockClass}__statement-button`,
+      tabIndex: 0
+    }, /*#__PURE__*/React.createElement(ItemOption.ItemOption, {
+      conditionState: {
+        value: group.statement,
+        label: conditionText
+      },
+      onChange: onStatementChangeHandler,
+      config: {
+        options: statementConfig,
+        isStatement: true
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      className: `${util.blockClass}__condition-inner-block`
+    }, /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: label ?? condition?.property,
+      title: propertyText,
+      renderIcon: icon ?? undefined,
+      className: `${util.blockClass}__property-field`,
+      "data-name": "propertyField",
+      condition: condition,
+      type: type,
+      description: description,
+      onChange: onPropertyChangeHandler,
+      renderChildren: renderItemOption
+    }), util.checkIsValid(property) && /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: operator,
+      title: operatorText,
+      "data-name": "operatorField",
+      condition: condition,
+      type: type,
+      config: config,
+      onChange: onOperatorChangeHandler
+    }, /*#__PURE__*/React.createElement(ItemOption.ItemOption, {
+      config: {
+        options: getOperators()
+      },
+      conditionState: {
+        value: operator,
+        label: operatorText
+      },
+      onChange: onOperatorChangeHandler
+    })), util.checkIsValid(property) && util.checkIsValid(operator) && /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: value,
+      type: type,
+      title: label,
+      showToolTip: true,
+      "data-name": "valueField",
+      condition: condition,
+      config: config,
+      onChange: onValueChangeHandler,
+      renderChildren: renderChildren
+    })), !readOnly && /*#__PURE__*/React.createElement("span", {
+      role: "gridcell",
+      "aria-label": removeConditionText
+    }, /*#__PURE__*/React.createElement(ConditionBuilderButton.ConditionBuilderButton, {
+      hideLabel: true,
+      label: removeConditionText,
+      onClick: onRemove,
+      onMouseEnter: handleShowDeletionPreview,
+      onMouseLeave: handleHideDeletionPreview,
+      onFocus: handleShowDeletionPreview,
+      onBlur: handleHideDeletionPreview,
+      renderIcon: icons.Close,
+      className: `${util.blockClass}__close-condition`,
+      "data-name": "closeCondition",
+      wrapperClassName: `${util.blockClass}__close-condition-wrapper`
+    })), !readOnly && manageActionButtons(conditionIndex, group.conditions) ? /*#__PURE__*/React.createElement(ConditionBuilderAdd.default, {
+      onClick: () => {
+        addConditionHandler?.(conditionIndex);
+      },
+      addConditionSubGroupHandler: () => {
+        addConditionSubGroupHandler?.(conditionIndex);
+      },
+      showConditionSubGroupPreviewHandler: showConditionSubGroupPreviewHandler,
+      hideConditionSubGroupPreviewHandler: hideConditionSubGroupPreviewHandler,
+      enableSubGroup: variant == util.HIERARCHICAL_VARIANT,
+      showConditionPreviewHandler: showConditionPreviewHandler,
+      hideConditionPreviewHandler: hideConditionPreviewHandler,
+      className: `${util.blockClass}__gap ${util.blockClass}__gap-left`,
+      group: group
+    }) : null)
+  );
 };
 ConditionBlock.propTypes = {
   /**

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js

@@ -134,7 +134,7 @@ const ConditionBuilderItem = _ref => {
     if (!popoverEl) {
       return;
     }
-    const focusLeftPopover = !popoverEl.contains(relatedTarget);
+    const focusLeftPopover = relatedTarget && !popoverEl.contains(relatedTarget);
     const targetInsidePopover = popoverEl.contains(focusEvent.target);
     const targetEl = focusEvent.target;
     const focusMovedToDatePicker = targetEl?.closest('.flatpickr-calendar');

package/lib/components/InterstitialScreen/InterstitialScreenBody.js

@@ -41,26 +41,33 @@ const InterstitialScreenBody = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = React.useContext(context.InterstitialScreenContext);
   const [scrollPercent, setScrollPercent] = React.useState(-1);
   React.useEffect(() => {
+    // Get the content either from contentRenderer or fallback to props.children
     const _bodyContent = contentRenderer?.({
       handleGotoStep,
       progStep,
       disableActionButton
     }) ?? props.children;
-    const isElement = /*#__PURE__*/React.isValidElement(_bodyContent);
-    const children = isElement ? _bodyContent.props.children : _bodyContent;
 
-    // Set body children data
-    setBodyChildrenData?.(children);
-    // If the children is an array, treat it as a multiStep
-    if (isElement && Array.isArray(children)) {
+    // If content is a valid React element and has children, use its children; otherwise use the content itself
+    const children = /*#__PURE__*/React.isValidElement(_bodyContent) && _bodyContent.props.children != null ? _bodyContent.props.children : _bodyContent;
+
+    // Convert to a valid array of React elements
+    const validChildren = React.Children.toArray(children).filter(React.isValidElement);
+
+    // Determine step type and count
+    if (validChildren.length > 1) {
       setStepType('multi');
-      setStepCount?.(children.length);
+      setStepCount?.(validChildren.length);
+      // Store content for rendering
+      setBodyChildrenData?.(validChildren);
     } else {
       setStepType('single');
+      setStepCount?.(1);
+      setBodyChildrenData?.(_bodyContent);
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [progStep]);
+  }, [props.children, contentRenderer, progStep]);
   React.useEffect(() => {
     if (scrollPercent !== -1) {
       const stepSize = bodyChildrenData && bodyChildrenData.length > 1 ? parseFloat((1 / (bodyChildrenData.length - 1)).toFixed(2)) : 0;

package/lib/components/InterstitialScreen/InterstitialScreenFooter.js

@@ -54,13 +54,18 @@ const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [progStep]);
   const handleAction = async actionType => {
     setLoadingAction(actionType);
-    await onAction?.(actionType, {
+    const abortContinue = await onAction?.(actionType, {
       handleGotoStep,
       progStep,
       stepCount,
       disableButtonConfig
     });
     setLoadingAction('');
+
+    // Skip navigation if onAction explicitly returns true
+    if (abortContinue) {
+      return;
+    }
     if (actionType === 'next' || actionType === 'back') {
       const stepDelta = actionType === 'next' ? 1 : -1;
       const targetStep = clamp.clamp(progStep + stepDelta, progStepFloor, progStepCeil);

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

@@ -34,7 +34,7 @@ export interface InterstitialScreenHeaderProps {
 }
 export type EnrichedChildren = {
     children: React.ReactNode;
-    stepTitle: string;
+    stepTitle?: string;
     translateWithId?: (id: string) => string;
 };
 declare const InterstitialScreenHeader: React.ForwardRefExoticComponent<InterstitialScreenHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/InterstitialScreen/InterstitialScreenHeader.js

@@ -52,7 +52,7 @@ const InterstitialScreenHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
         const stepKey = `${_useId}_${child.props?.stepTitle?.replace(/\s+/g, '') || idx}`;
         return /*#__PURE__*/React.createElement(react.ProgressStep, {
           key: stepKey,
-          label: child.props.stepTitle || '',
+          label: child.props.stepTitle ?? `Step ${idx + 1}`,
           translateWithId: child.props.translateWithId
         });
       }

package/lib/components/InterstitialScreen/{_story-assets/InterstitialScreenView/InterstitialScreenView.d.ts → InterstitialScreenView.d.ts}

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { PropsWithChildren, ReactNode } from 'react';
-import './_interstitial-screen-view.scss';
 export interface InterstitialScreenViewProps extends PropsWithChildren {
     /**
      * Provide the contents of the InterstitialScreenView.
@@ -18,13 +17,13 @@ export interface InterstitialScreenViewProps extends PropsWithChildren {
     /**
      * The label to pass to the ProgressStep component.
      */
-    stepTitle: string;
+    stepTitle?: string;
     /**
      * Optional method that takes in a message id and returns an internationalized string.
      */
     translateWithId?: (id: string) => string;
 }
 /**
- * An Onboarding component intended to be used as the child elements of the InterstitialScreen component.
+ * An Onboarding component intended to be used as the child elements of the InterstitialScreen body component.
  */
 export declare const InterstitialScreenView: React.ForwardRefExoticComponent<InterstitialScreenViewProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/InterstitialScreen/InterstitialScreenView.js

@@ -0,0 +1,62 @@
+/**
+ * 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 index = require('../../_virtual/index.js');
+var settings = require('../../settings.js');
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${settings.pkg.prefix}--interstitial-screen-view`;
+const componentName = 'InterstitialScreenView';
+/**
+ * An Onboarding component intended to be used as the child elements of the InterstitialScreen body component.
+ */
+const InterstitialScreenView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    stepTitle,
+    translateWithId,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: `${blockClass} ${className}`,
+    ref: ref
+  }), children);
+});
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+InterstitialScreenView.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.
+InterstitialScreenView.propTypes = {
+  /**
+   * Provide the contents of the InterstitialScreenView.
+   */
+  children: index.default.node,
+  /**
+   * Optional class name for this component.
+   */
+  className: index.default.string,
+  /**
+   * The label to pass to the ProgressStep component.
+   */
+  stepTitle: index.default.string.isRequired,
+  /**
+   * Optional method that takes in a message id and returns an internationalized string.
+   */
+  translateWithId: index.default.func
+};
+
+exports.InterstitialScreenView = InterstitialScreenView;

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

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 export { InterstitialScreen } from './InterstitialScreen';
+export { InterstitialScreenView } from './InterstitialScreenView';
 export type { InterstitialScreenProps, InterstitialScreenComponent, } from './InterstitialScreen';
 export type { disableButtonConfigType, ActionType } from './context';
 export type { InterstitialScreenBodyProps } from './InterstitialScreenBody';

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

@@ -0,0 +1,85 @@
+/**
+ * Copyright IBM Corp. 2025, 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.
+ */
+import React, { ReactNode, FC } from 'react';
+import PropTypes from 'prop-types';
+import { ComposedModalProps } from '@carbon/react';
+import { TearsheetHeaderProps, TearsheetNavigationBarProps, TearsheetScrollButtonProps } from './TearsheetHeader';
+import { TearsheetHeaderContentProps } from './TearsheetHeaderContent';
+import { InfluencerProps, MainContentProps, SummaryContentProps, TearsheetBodyProps } from './TearsheetBody';
+import { TearsheetHeaderActionItemProps, TearsheetHeaderActionsProps } from './TearsheetHeaderActions';
+/**
+ * ----------
+ * Tearsheet
+ * ----------
+ */
+export interface TearsheetProps {
+    children?: React.ReactNode;
+    /**
+     * Specifies whether the tearsheet is currently open.
+     */
+    open?: boolean;
+    className?: string;
+    /**
+     * Default influencer takes 256px, this allow to override eg: 300px , 20rem
+     */
+    influencerWidth?: string;
+    /**
+     * Default rightContent takes 256px, this allow to override eg: 300px , 20rem
+     */
+    summaryContentWidth?: string;
+    /**
+     * Default to wide variant. Pass in narrow for narrow tearsheet
+     */
+    variant?: 'wide' | 'narrow';
+    /**
+     * Optional prop that allows you to pass any component.
+     */
+    decorator?: ReactNode;
+    /**
+     * Specify the CSS selectors that match the floating menus.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+     */
+    selectorsFloatingMenus?: string[];
+    /**
+     * The aria label applied to the tearsheet
+     */
+    ariaLabel?: string;
+    /**
+     * 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;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
+     */
+    selectorPrimaryFocus?: PropTypes.string;
+    /**
+     * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: HTMLElement;
+}
+export type TearsheetComponentType = React.ForwardRefExoticComponent<TearsheetProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: FC<TearsheetHeaderProps>;
+    HeaderContent: FC<TearsheetHeaderContentProps>;
+    Influencer: FC<InfluencerProps>;
+    NavigationBar: FC<TearsheetNavigationBarProps>;
+    ScrollButton: FC<TearsheetScrollButtonProps>;
+    HeaderActions: FC<TearsheetHeaderActionsProps>;
+    HeaderActionItem: FC<TearsheetHeaderActionItemProps>;
+    MainContent: FC<MainContentProps>;
+    SummaryContent: FC<SummaryContentProps>;
+    Body: FC<TearsheetBodyProps>;
+    Footer: FC<FooterProps>;
+} & ComposedModalProps;
+export declare const Tearsheet: TearsheetComponentType;
+export interface FooterProps {
+    children: ReactNode;
+    className?: string;
+}

package/lib/components/Tearsheet/next/Tearsheet.js

@@ -0,0 +1,131 @@
+/**
+ * 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 cx = require('classnames');
+var react = require('@carbon/react');
+var context = require('./context.js');
+var TearsheetHeader = require('./TearsheetHeader.js');
+var TearsheetHeaderContent = require('./TearsheetHeaderContent.js');
+var TearsheetBody = require('./TearsheetBody.js');
+var TearsheetHeaderActions = require('./TearsheetHeaderActions.js');
+var layout = require('@carbon/layout');
+var usePortalTarget = require('../../../global/js/hooks/usePortalTarget.js');
+var useMatchMedia = require('../../../global/js/hooks/useMatchMedia.js');
+
+/**
+ * ----------
+ * Tearsheet
+ * ----------
+ */
+
+const Tearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    variant = 'wide',
+    selectorsFloatingMenus = [],
+    className,
+    influencerWidth,
+    summaryContentWidth,
+    ariaLabel,
+    onClose,
+    selectorPrimaryFocus,
+    open,
+    portalTarget,
+    ...rest
+  } = _ref;
+  const carbonPrefix = react.usePrefix();
+  const localRef = React.useRef(undefined);
+  const bodyRef = React.useRef(undefined);
+  const modalRef = ref || localRef;
+  const smMediaQuery = `(max-width: ${layout.breakpoints.md.width})`;
+  const isSm = useMatchMedia.useMatchMedia(smMediaQuery) || variant === 'narrow';
+  const [hasCloseIcon, setHasCloseIcon] = React.useState(true);
+  const [fullyCollapsed, setFullyCollapsed] = React.useState(false);
+  const [disableHeaderCollapse, setDisableHeaderCollapse] = React.useState(false);
+  const arr = React.Children.toArray(children);
+  const header = arr.find(child => child.type === TearsheetHeader.default);
+  const influencer = arr.find(child => child.type === TearsheetBody.Influencer);
+  const body = arr.find(child => child.type === TearsheetBody.default);
+  const footer = arr.find(child => child.type === Footer);
+  const renderPortalUse = usePortalTarget.usePortalTarget(portalTarget);
+  React.useLayoutEffect(() => {
+    const AILabelWidth = modalRef.current?.querySelector(`.${carbonPrefix}--ai-label`)?.clientWidth ?? 0;
+    const headerActionMarginRight = AILabelWidth + 24 + (isSm ? 8 : 0); // 24 is to compeNsate for close button
+    document.documentElement.style.setProperty('--tearsheet-header-action-offset', `${headerActionMarginRight}px`);
+    if (influencerWidth) {
+      document.documentElement.style.setProperty('--tearsheet-influencer-width', `${influencerWidth}`);
+    }
+    if (summaryContentWidth) {
+      document.documentElement.style.setProperty('--tearsheet-summary-content-width', `${summaryContentWidth}`);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSm]);
+  return renderPortalUse(/*#__PURE__*/React.createElement(context.TearsheetContext.Provider, {
+    value: {
+      hasCloseIcon,
+      setHasCloseIcon,
+      fullyCollapsed,
+      setFullyCollapsed,
+      onClose,
+      disableHeaderCollapse,
+      setDisableHeaderCollapse,
+      variant,
+      isSm
+    }
+  }, /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
+    enableExperimentalFocusWrapWithoutSentinels: true
+  }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
+    "aria-label": ariaLabel,
+    className: cx(context.blockClass, className, {
+      [`${context.blockClass}--wide`]: variant === 'wide',
+      [`${context.blockClass}--narrow`]: variant === 'narrow',
+      [`${context.blockClass}--has-ai-label`]: !!rest.decorator && rest.decorator['type']?.displayName === 'AILabel',
+      [`${context.blockClass}--has-decorator`]: !!rest.decorator && rest.decorator['type']?.displayName !== 'AILabel',
+      [`${context.blockClass}--has-close`]: hasCloseIcon
+    }),
+    containerClassName: cx(`${context.blockClass}__container`, {}),
+    onClose,
+    open,
+    selectorPrimaryFocus,
+    ref: modalRef,
+    selectorsFloatingMenus: [`.${carbonPrefix}--overflow-menu-options`, `.${carbonPrefix}--tooltip`, '.flatpickr-calendar', `.${context.blockClass}__container`, `.${carbonPrefix}--menu`, ...selectorsFloatingMenus],
+    isFullWidth: true,
+    size: variant === 'narrow' ? 'sm' : ''
+  }), header, /*#__PURE__*/React.createElement(react.ModalBody, {
+    className: `${context.blockClass}__body-layout`,
+    ref: bodyRef
+  }, influencer, body, footer)))));
+});
+const Footer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    children
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(react.Layer, {
+    as: "footer",
+    withBackground: true,
+    className: `${context.blockClass}__footer`,
+    ref: ref
+  }, children);
+});
+Tearsheet.Header = TearsheetHeader.default;
+Tearsheet.HeaderContent = TearsheetHeaderContent.default;
+Tearsheet.Body = TearsheetBody.default;
+Tearsheet.Influencer = TearsheetBody.Influencer;
+Tearsheet.MainContent = TearsheetBody.MainContent;
+Tearsheet.SummaryContent = TearsheetBody.SummaryContent;
+Tearsheet.Footer = Footer;
+Tearsheet.NavigationBar = TearsheetHeader.TearsheetNavigationBar;
+Tearsheet.ScrollButton = TearsheetHeader.TearsheetScrollButton;
+Tearsheet.HeaderActions = TearsheetHeaderActions.TearsheetHeaderActions;
+Tearsheet.HeaderActionItem = TearsheetHeaderActions.TearsheetHeaderActionItem;
+
+exports.Tearsheet = Tearsheet;