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

package/es/components/InterstitialScreen/InterstitialScreenFooter.js

@@ -0,0 +1,184 @@
+/**
+ * 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.
+ */
+
+import { slicedToArray as _slicedToArray, extends as _extends, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useContext, useRef, useState, useMemo } from 'react';
+import { pkg } from '../../settings.js';
+import PropTypes from '../../_virtual/index.js';
+import { InterstitialScreenContext } from './InterstitialScreen.js';
+import { ModalFooter, Button, InlineLoading } from '@carbon/react';
+import { clamp } from '../../global/js/utils/clamp.js';
+import { ArrowRight } from '@carbon/react/icons';
+
+var _InlineLoading, _InlineLoading2, _InlineLoading3, _InlineLoading4;
+var InterstitialScreenFooter = /*#__PURE__*/React__default.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(pkg.prefix, "--interstitial-screen");
+  var _useContext = useContext(InterstitialScreenContext),
+    handleClose = _useContext.handleClose,
+    progStep = _useContext.progStep,
+    handleGotoStep = _useContext.handleGotoStep,
+    stepCount = _useContext.stepCount,
+    disableButtonConfig = _useContext.disableButtonConfig,
+    isFullScreen = _useContext.isFullScreen;
+  var startButtonRef = useRef(undefined);
+  var nextButtonRef = useRef(undefined);
+  var _useState = useState(''),
+    _useState2 = _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 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(actionType) {
+      var stepDelta, targetStep;
+      return _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(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 = useMemo(function () {
+    if (loadingAction !== 'start' && isMultiStep && progStep === progStepCeil) {
+      return {
+        renderIcon: ArrowRight
+      };
+    }
+    return {};
+  }, [loadingAction, isMultiStep, progStep, progStepCeil]);
+  var getFooterContent = function getFooterContent() {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(blockClass, "--footer ").concat(className)
+    }, isMultiStep && skipButtonLabel !== '' && /*#__PURE__*/React__default.createElement(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__default.createElement(InlineLoading, null)))), /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(blockClass, "--footer-controls")
+    }, isMultiStep && progStep > 0 && /*#__PURE__*/React__default.createElement(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__default.createElement(InlineLoading, null)))), isMultiStep && progStep < progStepCeil && /*#__PURE__*/React__default.createElement(Button, {
+      className: "".concat(blockClass, "--next-btn"),
+      renderIcon: loadingAction !== 'next' ? 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__default.createElement(InlineLoading, null)))), (isMultiStep && progStep === progStepCeil || !isMultiStep) && /*#__PURE__*/React__default.createElement(Button, _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__default.createElement(InlineLoading, null))))));
+  };
+  if (actionButtonRenderer) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(blockClass, "--footer")
+    }, actionButtonRenderer({
+      handleGotoStep: handleGotoStep,
+      progStep: progStep,
+      stepCount: stepCount,
+      disableButtonConfig: disableButtonConfig
+    }));
+  }
+  return isFullScreen ? getFooterContent() : /*#__PURE__*/React__default.createElement(ModalFooter, null, getFooterContent());
+});
+InterstitialScreenFooter.propTypes = {
+  /**
+   * This is an optional callback prop that allows to render your custom footer action buttons.
+   */
+  actionButtonRenderer: PropTypes.func,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * The label for the Next button.
+   */
+  nextButtonLabel: PropTypes.string,
+  /**
+   * optional asynchronous callback on action button click (skip, previous, next and start)
+   * note: this is applicable when not using custom actionButtonRenderer
+   */
+  onAction: PropTypes.func,
+  /**
+   * The label for the Previous button.
+   *
+   */
+  previousButtonLabel: PropTypes.string,
+  /**
+   * The label for the skip button.
+   */
+  skipButtonLabel: PropTypes.string,
+  /**
+   * The label for the start button.
+   */
+  startButtonLabel: PropTypes.string
+};
+
+export { InterstitialScreenFooter as default };

package/es/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/es/components/InterstitialScreen/InterstitialScreenHeader.js

@@ -0,0 +1,90 @@
+/**
+ * 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.
+ */
+
+import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { ModalHeader, ProgressIndicator, ProgressStep } from '@carbon/react';
+import React__default from 'react';
+import PropTypes from '../../_virtual/index.js';
+import { pkg } from '../../settings.js';
+import cx from 'classnames';
+import { InterstitialScreenContext } from './InterstitialScreen.js';
+import { useId } from '../../global/js/utils/useId.js';
+
+var InterstitialScreenHeader = /*#__PURE__*/React__default.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__default.useContext(InterstitialScreenContext),
+    bodyChildrenData = _React$useContext.bodyChildrenData,
+    isFullScreen = _React$useContext.isFullScreen,
+    progStep = _React$useContext.progStep,
+    handleClose = _React$useContext.handleClose;
+  var blockClass = "".concat(pkg.prefix, "--interstitial-screen");
+  var headerBlockClass = "".concat(blockClass, "--internal-header");
+  var _useId = useId();
+  var headerContent = function headerContent() {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (headerTitle || headerSubTitle) && /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(blockClass, "--titleContainer")
+    }, headerTitle && (_h || (_h = /*#__PURE__*/React__default.createElement("h2", null, headerTitle))), headerSubTitle && (_h2 || (_h2 = /*#__PURE__*/React__default.createElement("h3", null, headerSubTitle)))), children, !hideProgressIndicator && bodyChildrenData && Array.isArray(bodyChildrenData) && /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(blockClass, "--progress")
+    }, /*#__PURE__*/React__default.createElement(ProgressIndicator, {
+      vertical: false,
+      currentIndex: progStep
+    }, bodyChildrenData === null || bodyChildrenData === void 0 ? void 0 : bodyChildrenData.map(function (child, idx) {
+      if (/*#__PURE__*/React__default.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__default.createElement(ProgressStep, {
+          key: stepKey,
+          label: child.props.stepTitle || '',
+          translateWithId: child.props.translateWithId
+        });
+      }
+    }))));
+  };
+  return isFullScreen ? /*#__PURE__*/React__default.createElement("header", {
+    className: cx(headerBlockClass, className, _defineProperty({}, "".concat(headerBlockClass, "--has-title"), headerTitle || headerSubTitle || children))
+  }, headerContent()) : /*#__PURE__*/React__default.createElement(ModalHeader, {
+    className: cx(headerBlockClass, className, _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: PropTypes.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * Tooltip text and aria label for the Close button icon.
+   */
+  closeIconDescription: PropTypes.string,
+  /**
+   * Provide an optional sub title to be applied to the header >.
+   */
+  headerSubTitle: PropTypes.string,
+  /**
+   * Provide an optional title to be applied to the header >.
+   */
+  headerTitle: PropTypes.string,
+  /**
+   * Optional parameter to hide the progress indicator when multiple steps are used.
+   */
+  hideProgressIndicator: PropTypes.bool
+};
+
+export { InterstitialScreenHeader as default };

package/es/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/{lib/components → es/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/es/components/NotificationsPanel/NotificationsPanel.js

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { usePrefix, Button, Toggle, Link, IconButton } from '@carbon/react';
+import { usePrefix, Section, Heading, Button, Toggle, Link, IconButton } from '@carbon/react';
 import { dateTimeFormat } from '@carbon/utilities';
 import { Settings, ErrorFilled, CheckmarkFilled, WarningAltFilled, InformationSquareFilled, Close, ChevronDown } from '@carbon/react/icons';
 import React__default, { useRef, useState, useEffect } from 'react';
@@ -24,6 +24,7 @@ import { usePrefersReducedMotion } from '../../global/js/hooks/usePrefersReduced
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { getSupportedLocale } from '../../global/js/utils/getSupportedLocale.js';
+import { useId } from '../../global/js/utils/useId.js';
 import { pkg } from '../../settings.js';
 import { timeAgo } from './utils.js';
 import { usePresence } from '../../global/js/hooks/usePresence.js';
@@ -184,6 +185,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     setAllNotifications = _useState2[1];
   var supportedLocale = getSupportedLocale(dateTimeLocale, DefaultLocale);
   var carbonPrefix = usePrefix();
+  var headingId = useId();
   var reducedMotion = usePrefersReducedMotion();
   var exitAnimationName = reducedMotion ? 'notifications-panel-exit-reduced' : 'notifications-panel-fade-out';
   var _usePresence = usePresence(open, notificationPanelRef, exitAnimationName),
@@ -300,9 +302,10 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_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"), _defineProperty({}, "".concat(blockClass, "__notification-title-unread"), notification.unread)]);
-    return /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(Section, {
       key: "".concat(notification.timestamp, "-").concat(notification.title, "-").concat(index),
       className: notificationClassName,
+      as: "div",
       role: "button",
       tabIndex: 0,
       onClick: function onClick() {
@@ -349,7 +352,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
       yearsAgoText: yearsAgoText,
       yearAgoText: yearAgoText,
       nowText: nowText
-    })), /*#__PURE__*/React__default.createElement("h6", {
+    })), /*#__PURE__*/React__default.createElement(Heading, {
       className: notificationHeaderClassName
     }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/React__default.createElement(Link, _extends({
       href: notification.link.url,
@@ -377,9 +380,10 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     type: "button",
     className: "".concat(carbonPrefix, "--visually-hidden"),
     ref: startSentinel
-  }, "Focus sentinel start"), /*#__PURE__*/React__default.createElement("div", _extends({
+  }, "Focus sentinel start"), /*#__PURE__*/React__default.createElement(Section, _extends({
+    as: "div",
     role: "dialog",
-    "aria-label": "Notification Panel",
+    "aria-labelledby": headingId,
     onKeyDown: handleKeydown,
     tabIndex: 0
   }, rest, {
@@ -392,7 +396,8 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     className: "".concat(blockClass, "__header-container")
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__header-flex")
-  }, /*#__PURE__*/React__default.createElement("h2", {
+  }, /*#__PURE__*/React__default.createElement(Heading, {
+    id: headingId,
     className: "".concat(blockClass, "__header")
   }, title), /*#__PURE__*/React__default.createElement(Button, {
     size: "sm",
@@ -411,17 +416,17 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     defaultToggled: doNotDisturbDefaultToggled,
     "aria-label": doNotDisturbLabel,
     labelText: doNotDisturbLabel
-  })), /*#__PURE__*/React__default.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement(Section, {
     className: mainSectionClassName
-  }, withinLastDayNotifications && withinLastDayNotifications.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("h6", {
+  }, withinLastDayNotifications && withinLastDayNotifications.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Heading, {
     className: "".concat(blockClass, "__time-section-label")
   }, todayLabel), withinLastDayNotifications.map(function (notification, index) {
     return renderNotification('today', notification, index);
-  })) : null, previousDayNotifications && previousDayNotifications.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("h6", {
+  })) : null, previousDayNotifications && previousDayNotifications.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Heading, {
     className: "".concat(blockClass, "__time-section-label")
   }, yesterdayLabel), previousDayNotifications.map(function (notification, index) {
     return renderNotification('yesterday', notification, index);
-  })) : null, previousNotifications && previousNotifications.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("h6", {
+  })) : null, previousNotifications && previousNotifications.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Heading, {
     className: "".concat(blockClass, "__time-section-label")
   }, previousLabel), previousNotifications.map(function (notification, index) {
     return renderNotification('previous', notification, index);

package/es/components/PageHeader/PageHeader.js

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

package/es/components/SidePanel/SidePanel.js

@@ -393,7 +393,8 @@ var SidePanel = /*#__PURE__*/React__default.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__default.createElement("p", {
       className: "".concat(blockClass, "__label-text"),
       ref: labelTextRef
@@ -467,7 +468,7 @@ var SidePanel = /*#__PURE__*/React__default.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/es/components/Tearsheet/Tearsheet.js

@@ -15,7 +15,7 @@ import { allPropTypes } from '../../global/js/utils/props-helper.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../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.
@@ -43,13 +43,14 @@ var Tearsheet = /*#__PURE__*/React__default.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 = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default.createElement(TearsheetShell, _objectSpread2(_objectSpread2(_objectSpread2({}, 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/es/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/es/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/es/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/es/global/js/package-settings.js

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

package/es/index.js

@@ -96,8 +96,6 @@ export { NonLinearReading } from './components/NonLinearReading/NonLinearReading
 export { BigNumbers } from './components/BigNumbers/BigNumbers.js';
 export { TruncatedList } from './components/TruncatedList/TruncatedList.js';
 export { InterstitialScreen } from './components/InterstitialScreen/InterstitialScreen.js';
-export { InterstitialScreenView } from './components/InterstitialScreenView/InterstitialScreenView.js';
-export { InterstitialScreenViewModule } from './components/InterstitialScreenViewModule/InterstitialScreenViewModule.js';
 export { DelimitedList } from './components/DelimitedList/DelimitedList.js';
 export { FullPageError } from './components/FullPageError/FullPageError.js';
 export { SearchBar } from './components/SearchBar/SearchBar.js';

package/es/settings.d.ts

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

package/lib/components/Checklist/Checklist.js

@@ -114,8 +114,9 @@ exports.Checklist = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   React.useEffect(function () {
     setIsOpen(open);
   }, [open]);
-  return /*#__PURE__*/React.createElement("aside", _rollupPluginBabelHelpers.extends({}, rest, {
+  return /*#__PURE__*/React.createElement(react.Section, _rollupPluginBabelHelpers.extends({}, rest, {
     "aria-label": checklistAriaLabel,
+    as: "aside",
     className: cx(blockClass,
     // Apply the block class to the main HTML element
     className, // Apply any supplied class names to the main HTML element.
@@ -130,9 +131,9 @@ exports.Checklist = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     value: chartValue
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__titles")
-  }, title && /*#__PURE__*/React.createElement("h2", {
+  }, title && /*#__PURE__*/React.createElement(react.Heading, {
     className: "".concat(blockClass, "__title")
-  }, title), chartLabelAndValue && /*#__PURE__*/React.createElement("h3", {
+  }, title), chartLabelAndValue && /*#__PURE__*/React.createElement("p", {
     id: chartLabelId,
     className: "".concat(blockClass, "__chart-label")
   }, chartLabel)), enableToggle && /*#__PURE__*/React.createElement(react.IconButton, {
@@ -153,13 +154,13 @@ exports.Checklist = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__content-outer")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__content-inner")
-  }, /*#__PURE__*/React.createElement("section", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: cx("".concat(blockClass, "__body"))
   }, taskLists.map(function (list, index) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(react.Section, {
       className: "".concat(blockClass, "__list-group"),
       key: "".concat(list.title, "-").concat(index)
-    }, list.title && /*#__PURE__*/React.createElement("h3", {
+    }, list.title && /*#__PURE__*/React.createElement(react.Heading, {
       title: list.title,
       className: "".concat(blockClass, "__list-title")
     }, list.title), /*#__PURE__*/React.createElement("ol", {

package/lib/components/CoachmarkStack/CoachmarkStack.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
+type TooltipAlignment = 'top' | 'bottom';
 interface CoachmarkStackProps {
     /**
      * CoachmarkStack should use a single CoachmarkOverlayElements component as a child.
@@ -51,6 +52,10 @@ interface CoachmarkStackProps {
      * The title of the Coachmark.
      */
     title: string;
+    /**
+     * Label's tooltip position
+     */
+    tooltipAlign?: TooltipAlignment;
 }
 /**
  * Stacked coachmarks are used to call out specific functionality or concepts

package/lib/components/CoachmarkStack/CoachmarkStack.js

@@ -21,7 +21,7 @@ var context = require('../Coachmark/utils/context.js');
 var enums = require('../Coachmark/utils/enums.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-var _excluded = ["children", "className", "onClose", "description", "renderMedia", "navLinkLabels", "portalTarget", "closeButtonLabel", "tagline", "theme", "title"];
+var _excluded = ["children", "className", "onClose", "description", "renderMedia", "navLinkLabels", "portalTarget", "closeButtonLabel", "tagline", "theme", "title", "tooltipAlign"];
 
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
@@ -65,6 +65,7 @@ exports.CoachmarkStack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     title = _ref.title,
+    tooltipAlign = _ref.tooltipAlign,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var portalNode = React.useRef(null);
   useIsomorphicEffect.useIsomorphicEffect(function () {
@@ -222,7 +223,8 @@ exports.CoachmarkStack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     },
     portalTarget: portalTarget,
     closeButtonLabel: closeButtonLabel,
-    title: title
+    title: title,
+    tooltipAlign: tooltipAlign
   }), portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/reactDom.createPortal(wrappedChildren, portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) : null));
 });
 
@@ -282,5 +284,9 @@ exports.CoachmarkStack.propTypes = {
   /**
    * The title of the Coachmark.
    */
-  title: index.default.string.isRequired
+  title: index.default.string.isRequired,
+  /**
+   * Label's tooltip position
+   */
+  tooltipAlign: index.default.oneOf(['top', 'bottom'])
 };