@carbon/ibm-products 2.64.0 → 2.65.0-rc.0

package/lib/components/InterstitialScreen/InterstitialScreenFooter.js

@@ -0,0 +1,188 @@
+/**
+ * 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';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var settings = require('../../settings.js');
+var index = require('../../_virtual/index.js');
+var InterstitialScreen = require('./InterstitialScreen.js');
+var react = require('@carbon/react');
+var clamp = require('../../global/js/utils/clamp.js');
+var icons = require('@carbon/react/icons');
+
+var _InlineLoading, _InlineLoading2, _InlineLoading3, _InlineLoading4;
+var InterstitialScreenFooter = /*#__PURE__*/React.forwardRef(function (props) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$skipButtonLabe = props.skipButtonLabel,
+    skipButtonLabel = _props$skipButtonLabe === void 0 ? 'Skip' : _props$skipButtonLabe,
+    _props$previousButton = props.previousButtonLabel,
+    previousButtonLabel = _props$previousButton === void 0 ? 'Back' : _props$previousButton,
+    _props$nextButtonLabe = props.nextButtonLabel,
+    nextButtonLabel = _props$nextButtonLabe === void 0 ? 'Next' : _props$nextButtonLabe,
+    _props$startButtonLab = props.startButtonLabel,
+    startButtonLabel = _props$startButtonLab === void 0 ? 'Get Started' : _props$startButtonLab,
+    actionButtonRenderer = props.actionButtonRenderer,
+    onAction = props.onAction;
+  var blockClass = "".concat(settings.pkg.prefix, "--interstitial-screen");
+  var _useContext = React.useContext(InterstitialScreen.InterstitialScreenContext),
+    handleClose = _useContext.handleClose,
+    progStep = _useContext.progStep,
+    handleGotoStep = _useContext.handleGotoStep,
+    stepCount = _useContext.stepCount,
+    disableButtonConfig = _useContext.disableButtonConfig,
+    isFullScreen = _useContext.isFullScreen;
+  var startButtonRef = React.useRef(undefined);
+  var nextButtonRef = React.useRef(undefined);
+  var _useState = React.useState(''),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    loadingAction = _useState2[0],
+    setLoadingAction = _useState2[1];
+  var isMultiStep = !!stepCount;
+  var progStepFloor = 0;
+  var progStepCeil = stepCount - 1;
+  var handleAction = /*#__PURE__*/function () {
+    var _ref = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(actionType) {
+      var stepDelta, targetStep;
+      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setLoadingAction(actionType);
+            _context.next = 3;
+            return onAction === null || onAction === void 0 ? void 0 : onAction(actionType, {
+              handleGotoStep: handleGotoStep,
+              progStep: progStep,
+              stepCount: stepCount,
+              disableButtonConfig: disableButtonConfig
+            });
+          case 3:
+            setLoadingAction('');
+            if (actionType === 'next' || actionType === 'back') {
+              stepDelta = actionType === 'next' ? 1 : -1;
+              targetStep = clamp.clamp(progStep + stepDelta, progStepFloor, progStepCeil);
+              handleGotoStep === null || handleGotoStep === void 0 || handleGotoStep(targetStep);
+            } else {
+              handleClose === null || handleClose === void 0 || handleClose(actionType);
+            }
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleAction(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  // Usage
+  var handleStart = function handleStart() {
+    return handleAction('start');
+  };
+  var handleSkip = function handleSkip() {
+    return handleAction('skip');
+  };
+  var handleClickNext = function handleClickNext() {
+    return handleAction('next');
+  };
+  var handleClickPrev = function handleClickPrev() {
+    return handleAction('back');
+  };
+  var getRenderIcon = React.useMemo(function () {
+    if (loadingAction !== 'start' && isMultiStep && progStep === progStepCeil) {
+      return {
+        renderIcon: icons.ArrowRight
+      };
+    }
+    return {};
+  }, [loadingAction, isMultiStep, progStep, progStepCeil]);
+  var getFooterContent = function getFooterContent() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "--footer ").concat(className)
+    }, isMultiStep && skipButtonLabel !== '' && /*#__PURE__*/React.createElement(react.Button, {
+      className: "".concat(blockClass, "--skip-btn"),
+      kind: "ghost",
+      size: "lg",
+      title: skipButtonLabel,
+      onClick: handleSkip,
+      disabled: disableButtonConfig === null || disableButtonConfig === void 0 ? void 0 : disableButtonConfig.skip
+    }, skipButtonLabel, loadingAction === 'skip' && (_InlineLoading || (_InlineLoading = /*#__PURE__*/React.createElement(react.InlineLoading, null)))), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "--footer-controls")
+    }, isMultiStep && progStep > 0 && /*#__PURE__*/React.createElement(react.Button, {
+      className: "".concat(blockClass, "--prev-btn"),
+      kind: "secondary",
+      size: "lg",
+      title: previousButtonLabel,
+      disabled: disableButtonConfig === null || disableButtonConfig === void 0 ? void 0 : disableButtonConfig.back,
+      onClick: handleClickPrev
+    }, previousButtonLabel, loadingAction === 'back' && (_InlineLoading2 || (_InlineLoading2 = /*#__PURE__*/React.createElement(react.InlineLoading, null)))), isMultiStep && progStep < progStepCeil && /*#__PURE__*/React.createElement(react.Button, {
+      className: "".concat(blockClass, "--next-btn"),
+      renderIcon: loadingAction !== 'next' ? icons.ArrowRight : null,
+      ref: nextButtonRef,
+      size: "lg",
+      title: nextButtonLabel,
+      disabled: disableButtonConfig === null || disableButtonConfig === void 0 ? void 0 : disableButtonConfig.next,
+      onClick: handleClickNext
+    }, nextButtonLabel, loadingAction === 'next' && (_InlineLoading3 || (_InlineLoading3 = /*#__PURE__*/React.createElement(react.InlineLoading, null)))), (isMultiStep && progStep === progStepCeil || !isMultiStep) && /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
+      className: "".concat(blockClass, "--start-btn"),
+      ref: startButtonRef,
+      size: "lg",
+      title: startButtonLabel,
+      disabled: disableButtonConfig === null || disableButtonConfig === void 0 ? void 0 : disableButtonConfig.start,
+      onClick: handleStart
+    }, getRenderIcon), startButtonLabel, loadingAction === 'start' && (_InlineLoading4 || (_InlineLoading4 = /*#__PURE__*/React.createElement(react.InlineLoading, null))))));
+  };
+  if (actionButtonRenderer) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "--footer")
+    }, actionButtonRenderer({
+      handleGotoStep: handleGotoStep,
+      progStep: progStep,
+      stepCount: stepCount,
+      disableButtonConfig: disableButtonConfig
+    }));
+  }
+  return isFullScreen ? getFooterContent() : /*#__PURE__*/React.createElement(react.ModalFooter, null, getFooterContent());
+});
+InterstitialScreenFooter.propTypes = {
+  /**
+   * This is an optional callback prop that allows to render your custom footer action buttons.
+   */
+  actionButtonRenderer: index.default.func,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index.default.string,
+  /**
+   * The label for the Next button.
+   */
+  nextButtonLabel: index.default.string,
+  /**
+   * optional asynchronous callback on action button click (skip, previous, next and start)
+   * note: this is applicable when not using custom actionButtonRenderer
+   */
+  onAction: index.default.func,
+  /**
+   * The label for the Previous button.
+   *
+   */
+  previousButtonLabel: index.default.string,
+  /**
+   * The label for the skip button.
+   */
+  skipButtonLabel: index.default.string,
+  /**
+   * The label for the start button.
+   */
+  startButtonLabel: index.default.string
+};
+
+exports.default = InterstitialScreenFooter;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+export interface InterstitialScreenHeaderProps {
+    /**
+     * Provide the optional content for header section and will be render after header titles and before progress indicator.
+     * People can make use of this if they want to have custom header.
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Provide an optional title to be applied to the header >.
+     */
+    headerTitle?: string;
+    /**
+     * Provide an optional sub title to be applied to the header >.
+     */
+    headerSubTitle?: string;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * Optional parameter to hide the progress indicator when multiple steps are used.
+     */
+    hideProgressIndicator?: boolean;
+}
+export type EnrichedChildren = {
+    children: React.ReactNode;
+    stepTitle: string;
+    translateWithId?: (id: string) => string;
+};
+declare const InterstitialScreenHeader: React.ForwardRefExoticComponent<InterstitialScreenHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default InterstitialScreenHeader;

package/lib/components/InterstitialScreen/InterstitialScreenHeader.js

@@ -0,0 +1,94 @@
+/**
+ * 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';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var react = require('@carbon/react');
+var React = require('react');
+var index = require('../../_virtual/index.js');
+var settings = require('../../settings.js');
+var cx = require('classnames');
+var InterstitialScreen = require('./InterstitialScreen.js');
+var useId = require('../../global/js/utils/useId.js');
+
+var InterstitialScreenHeader = /*#__PURE__*/React.forwardRef(function (props) {
+  var _h, _h2;
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    headerTitle = props.headerTitle,
+    headerSubTitle = props.headerSubTitle,
+    closeIconDescription = props.closeIconDescription,
+    hideProgressIndicator = props.hideProgressIndicator,
+    children = props.children;
+  var _React$useContext = React.useContext(InterstitialScreen.InterstitialScreenContext),
+    bodyChildrenData = _React$useContext.bodyChildrenData,
+    isFullScreen = _React$useContext.isFullScreen,
+    progStep = _React$useContext.progStep,
+    handleClose = _React$useContext.handleClose;
+  var blockClass = "".concat(settings.pkg.prefix, "--interstitial-screen");
+  var headerBlockClass = "".concat(blockClass, "--internal-header");
+  var _useId = useId.useId();
+  var headerContent = function headerContent() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, (headerTitle || headerSubTitle) && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "--titleContainer")
+    }, headerTitle && (_h || (_h = /*#__PURE__*/React.createElement("h2", null, headerTitle))), headerSubTitle && (_h2 || (_h2 = /*#__PURE__*/React.createElement("h3", null, headerSubTitle)))), children, !hideProgressIndicator && bodyChildrenData && Array.isArray(bodyChildrenData) && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "--progress")
+    }, /*#__PURE__*/React.createElement(react.ProgressIndicator, {
+      vertical: false,
+      currentIndex: progStep
+    }, bodyChildrenData === null || bodyChildrenData === void 0 ? void 0 : bodyChildrenData.map(function (child, idx) {
+      if (/*#__PURE__*/React.isValidElement(child)) {
+        var _child$props;
+        var stepKey = "".concat(_useId, "_").concat(((_child$props = child.props) === null || _child$props === void 0 || (_child$props = _child$props.stepTitle) === null || _child$props === void 0 ? void 0 : _child$props.replace(/\s+/g, '')) || idx);
+        return /*#__PURE__*/React.createElement(react.ProgressStep, {
+          key: stepKey,
+          label: child.props.stepTitle || '',
+          translateWithId: child.props.translateWithId
+        });
+      }
+    }))));
+  };
+  return isFullScreen ? /*#__PURE__*/React.createElement("header", {
+    className: cx(headerBlockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerBlockClass, "--has-title"), headerTitle || headerSubTitle || children))
+  }, headerContent()) : /*#__PURE__*/React.createElement(react.ModalHeader, {
+    className: cx(headerBlockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerBlockClass, "--has-title"), headerTitle || headerSubTitle || children)),
+    closeModal: handleClose,
+    iconDescription: closeIconDescription
+  }, headerContent());
+});
+InterstitialScreenHeader.propTypes = {
+  /**
+   * Provide the optional content for header section and will be render after header titles and before progress indicator.
+   * People can make use of this if they want to have custom header.
+   */
+  children: index.default.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index.default.string,
+  /**
+   * Tooltip text and aria label for the Close button icon.
+   */
+  closeIconDescription: index.default.string,
+  /**
+   * Provide an optional sub title to be applied to the header >.
+   */
+  headerSubTitle: index.default.string,
+  /**
+   * Provide an optional title to be applied to the header >.
+   */
+  headerTitle: index.default.string,
+  /**
+   * Optional parameter to hide the progress indicator when multiple steps are used.
+   */
+  hideProgressIndicator: index.default.bool
+};
+
+exports.default = InterstitialScreenHeader;

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

@@ -5,6 +5,7 @@
  * 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.

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

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import { disableButtonConfigType } from '../../InterstitialScreen';
+import './_interstitial-screen-view-module.scss';
 export interface InterstitialScreenViewModuleProps {
     /**
      * Provide an optional class to be applied to the containing node.
@@ -18,6 +20,12 @@ export interface InterstitialScreenViewModuleProps {
      * The title of this component.
      */
     title: string;
+    /**
+     *
+     * @param value This is callback to disable any action button dynamically
+     * @returns void
+     */
+    disableActionButton?: (value: disableButtonConfigType) => void;
 }
 /**
  * View module to help in building interstitial screen views.

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -26,6 +26,7 @@ var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMo
 var devtools = require('../../global/js/utils/devtools.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var getSupportedLocale = require('../../global/js/utils/getSupportedLocale.js');
+var useId = require('../../global/js/utils/useId.js');
 var settings = require('../../settings.js');
 var utils = require('./utils.js');
 var usePresence = require('../../global/js/hooks/usePresence.js');
@@ -186,6 +187,7 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     setAllNotifications = _useState2[1];
   var supportedLocale = getSupportedLocale.getSupportedLocale(dateTimeLocale, DefaultLocale);
   var carbonPrefix = react.usePrefix();
+  var headingId = useId.useId();
   var reducedMotion = usePrefersReducedMotion.usePrefersReducedMotion();
   var exitAnimationName = reducedMotion ? 'notifications-panel-exit-reduced' : 'notifications-panel-fade-out';
   var _usePresence = usePresence.usePresence(open, notificationPanelRef, exitAnimationName),
@@ -302,9 +304,10 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   var renderNotification = function renderNotification(group, notification, index) {
     var notificationClassName = cx(["".concat(blockClass, "__notification"), "".concat(blockClass, "__notification-").concat(group)]);
     var notificationHeaderClassName = cx(["".concat(blockClass, "__notification-title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__notification-title-unread"), notification.unread)]);
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(react.Section, {
       key: "".concat(notification.timestamp, "-").concat(notification.title, "-").concat(index),
       className: notificationClassName,
+      as: "div",
       role: "button",
       tabIndex: 0,
       onClick: function onClick() {
@@ -351,7 +354,7 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       yearsAgoText: yearsAgoText,
       yearAgoText: yearAgoText,
       nowText: nowText
-    })), /*#__PURE__*/React.createElement("h6", {
+    })), /*#__PURE__*/React.createElement(react.Heading, {
       className: notificationHeaderClassName
     }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/React.createElement(react.Link, _rollupPluginBabelHelpers.extends({
       href: notification.link.url,
@@ -379,9 +382,10 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     type: "button",
     className: "".concat(carbonPrefix, "--visually-hidden"),
     ref: startSentinel
-  }, "Focus sentinel start"), /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
+  }, "Focus sentinel start"), /*#__PURE__*/React.createElement(react.Section, _rollupPluginBabelHelpers.extends({
+    as: "div",
     role: "dialog",
-    "aria-label": "Notification Panel",
+    "aria-labelledby": headingId,
     onKeyDown: handleKeydown,
     tabIndex: 0
   }, rest, {
@@ -394,7 +398,8 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     className: "".concat(blockClass, "__header-container")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__header-flex")
-  }, /*#__PURE__*/React.createElement("h2", {
+  }, /*#__PURE__*/React.createElement(react.Heading, {
+    id: headingId,
     className: "".concat(blockClass, "__header")
   }, title), /*#__PURE__*/React.createElement(react.Button, {
     size: "sm",
@@ -413,17 +418,17 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     defaultToggled: doNotDisturbDefaultToggled,
     "aria-label": doNotDisturbLabel,
     labelText: doNotDisturbLabel
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement(react.Section, {
     className: mainSectionClassName
-  }, withinLastDayNotifications && withinLastDayNotifications.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h6", {
+  }, withinLastDayNotifications && withinLastDayNotifications.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.Heading, {
     className: "".concat(blockClass, "__time-section-label")
   }, todayLabel), withinLastDayNotifications.map(function (notification, index) {
     return renderNotification('today', notification, index);
-  })) : null, previousDayNotifications && previousDayNotifications.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h6", {
+  })) : null, previousDayNotifications && previousDayNotifications.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.Heading, {
     className: "".concat(blockClass, "__time-section-label")
   }, yesterdayLabel), previousDayNotifications.map(function (notification, index) {
     return renderNotification('yesterday', notification, index);
-  })) : null, previousNotifications && previousNotifications.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h6", {
+  })) : null, previousNotifications && previousNotifications.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.Heading, {
     className: "".concat(blockClass, "__time-section-label")
   }, previousLabel), previousNotifications.map(function (notification, index) {
     return renderNotification('previous', notification, index);

package/lib/components/PageHeader/PageHeader.js

@@ -386,7 +386,7 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(PageHeaderUtils.blockClass, "--offset-top-measuring-element"),
     ref: offsetTopMeasuringRef
   }), /*#__PURE__*/React.createElement("section", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx([PageHeaderUtils.blockClass, "".concat(PageHeaderUtils.blockClass, "--no-margins-below-row"), className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), "".concat(PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags)]),
+    className: cx([PageHeaderUtils.blockClass, "".concat(PageHeaderUtils.blockClass, "--no-margins-below-row"), className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), "".concat(PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags), "".concat(PageHeaderUtils.blockClass, "--without-background"), withoutBackground)]),
     ref: headerRef
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(react.FlexGrid, {
     fullWidth: fullWidthGrid === true || fullWidthGrid === 'xl',

package/lib/components/SidePanel/SidePanel.js

@@ -395,7 +395,8 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       },
       iconDescription: navigationBackIconDescription,
       className: "".concat(blockClass, "__navigation-back-button"),
-      onClick: onNavigationBack
+      onClick: onNavigationBack,
+      "aria-label": navigationBackIconDescription
     }), title && title.length && labelText && labelText.length && /*#__PURE__*/React.createElement("p", {
       className: "".concat(blockClass, "__label-text"),
       ref: labelTextRef
@@ -469,7 +470,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: mainPanelClassNames,
     ref: sidePanelRef,
     role: "complementary",
-    "aria-label": title,
+    "aria-label": title || rest['aria-label'],
     onAnimationEnd: onAnimationEnd,
     onAnimationStart: onAnimationStart,
     onKeyDown: handleKeyDown

package/lib/components/Tearsheet/Tearsheet.js

@@ -17,7 +17,7 @@ var propsHelper = require('../../global/js/utils/props-helper.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-var _excluded = ["influencerPosition", "influencerWidth"];
+var _excluded = ["influencerPosition", "influencerWidth", "children"];
 var componentName = 'Tearsheet';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -45,13 +45,14 @@ exports.Tearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     influencerPosition = _ref$influencerPositi === void 0 ? 'left' : _ref$influencerPositi,
     _ref$influencerWidth = _ref.influencerWidth,
     influencerWidth = _ref$influencerWidth === void 0 ? 'narrow' : _ref$influencerWidth,
+    children = _ref.children,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(TearsheetShell.TearsheetShell, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, devtools.getDevtoolsProps(componentName)), rest), {}, {
     influencerPosition: influencerPosition,
     influencerWidth: influencerWidth,
     ref: ref,
     size: 'wide'
-  }));
+  }), children);
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/index.d.ts

@@ -50,8 +50,6 @@ export * from './NonLinearReading';
 export * from './BigNumbers';
 export * from './TruncatedList';
 export * from './InterstitialScreen';
-export * from './InterstitialScreenView';
-export * from './InterstitialScreenViewModule';
 export * from './DelimitedList';
 export * from './Decorator';
 export * from './DecoratorLink';

package/lib/global/js/hooks/useOverflowItems/useOverflowItems.d.ts

@@ -14,8 +14,8 @@ export declare function useOverflowItems<T extends Item>(items: T[] | undefined,
     maxWidth?: number;
 }) => void): {
     visibleItems: T[];
-    itemRefHandler: (id: string, node: HTMLElement | null) => () => void;
+    itemRefHandler: (id: string, node: HTMLElement | null) => void;
     hiddenItems: T[];
-    offsetRefHandler: (node: any) => any;
+    offsetRefHandler: (node: HTMLElement | null) => HTMLElement;
 };
 export {};

package/lib/global/js/package-settings.d.ts

@@ -125,8 +125,6 @@ declare namespace defaults {
         let InlineTipButton: boolean;
         let InlineTipLink: boolean;
         let InterstitialScreen: boolean;
-        let InterstitialScreenView: boolean;
-        let InterstitialScreenViewModule: boolean;
         let NonLinearReading: boolean;
     }
     export { component_1 as component };

package/lib/global/js/package-settings.js

@@ -134,8 +134,6 @@ var defaults = {
     InlineTipButton: false,
     InlineTipLink: false,
     InterstitialScreen: false,
-    InterstitialScreenView: false,
-    InterstitialScreenViewModule: false,
     NonLinearReading: false
   },
   // feature level flags

package/lib/index.js

@@ -98,8 +98,6 @@ var NonLinearReading = require('./components/NonLinearReading/NonLinearReading.j
 var BigNumbers = require('./components/BigNumbers/BigNumbers.js');
 var TruncatedList = require('./components/TruncatedList/TruncatedList.js');
 var InterstitialScreen = require('./components/InterstitialScreen/InterstitialScreen.js');
-var InterstitialScreenView = require('./components/InterstitialScreenView/InterstitialScreenView.js');
-var InterstitialScreenViewModule = require('./components/InterstitialScreenViewModule/InterstitialScreenViewModule.js');
 var DelimitedList = require('./components/DelimitedList/DelimitedList.js');
 var FullPageError = require('./components/FullPageError/FullPageError.js');
 var SearchBar = require('./components/SearchBar/SearchBar.js');
@@ -438,14 +436,6 @@ Object.defineProperty(exports, "InterstitialScreen", {
 	enumerable: true,
 	get: function () { return InterstitialScreen.InterstitialScreen; }
 });
-Object.defineProperty(exports, "InterstitialScreenView", {
-	enumerable: true,
-	get: function () { return InterstitialScreenView.InterstitialScreenView; }
-});
-Object.defineProperty(exports, "InterstitialScreenViewModule", {
-	enumerable: true,
-	get: function () { return InterstitialScreenViewModule.InterstitialScreenViewModule; }
-});
 Object.defineProperty(exports, "DelimitedList", {
 	enumerable: true,
 	get: function () { return DelimitedList.DelimitedList; }

package/lib/settings.d.ts

@@ -111,8 +111,6 @@ export const pkg: {
         InlineTipButton: boolean;
         InlineTipLink: boolean;
         InterstitialScreen: boolean;
-        InterstitialScreenView: boolean;
-        InterstitialScreenViewModule: boolean;
         NonLinearReading: boolean;
     };
     feature: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.64.0",
+  "version": "2.65.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -50,7 +50,7 @@
     "clean": "rimraf es lib css scss",
     "generate": "cross-env FORCE_COLOR=1 node scripts/generate",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
-    "telemetry-config": "ibmtelemetry-config generate --id 495342db-5046-4ecf-85ea-9ffceb6f8cdf --endpoint https://collector-prod.1am6wm210aow.us-south.codeengine.appdomain.cloud/v1/metrics --files ./src/components/**/*.(tsx|js|jsx)",
+    "telemetry-config": "ibmtelemetry-config generate --id 495342db-5046-4ecf-85ea-9ffceb6f8cdf --endpoint https://www-api.ibm.com/ibm-telemetry/v1/metrics --files ./src/components/**/*.(tsx|js|jsx)",
     "test": "jest --colors",
     "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency), chalk (issue #1596)",
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^namor)/'"
@@ -72,7 +72,7 @@
     "@rollup/plugin-typescript": "^12.1.2",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.22.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.23.0-rc.0",
     "chalk": "^4.1.2",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
@@ -81,7 +81,7 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.23.0",
+    "jest-config-ibm-cloud-cognitive": "^1.24.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^17.1.15",
@@ -90,13 +90,13 @@
     "rollup": "^4.35.0",
     "rollup-plugin-strip-banner": "^3.1.0",
     "sass": "^1.85.1",
-    "typescript-config-carbon": "^0.3.0",
+    "typescript-config-carbon": "^0.5.0",
     "yargs": "^17.7.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.26.10",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.60.0",
+    "@carbon/ibm-products-styles": "^2.61.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
     "@carbon/utilities": "^0.4.0",
     "@dnd-kit/core": "^6.3.1",
@@ -117,5 +117,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0"
   },
-  "gitHead": "cc3ffcb1d51b9f3d99550cb9768deb8bc22eab5e"
+  "gitHead": "1ae84b1d3e24190c7235618e084dc950a1cc8842"
 }

package/scss/components/Coachmark/_coachmark-overlay.scss

@@ -234,6 +234,8 @@ $draghandle-btn-class: #{$block-class}__handle;
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    margin-block-start: $spacing-05;
+    padding-block-end: $spacing-05;
   }
 
   // THEME

package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss

@@ -27,6 +27,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay-elements;
 
 .#{$block-class} {
   &__element-stepped-media {
+    padding: 0 $spacing-05;
     /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
     block-size: to-rem(128px);
     margin-block-end: $spacing-05;