@carbon/ibm-products 2.22.0 → 2.24.0

package/es/components/FilterSummary/FilterSummary.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "clearFiltersText", "clearFilters", "filters", "renderLabel", "overflowType", "clearButtonInline"],
@@ -6,22 +7,28 @@ var _excluded = ["className", "clearFiltersText", "clearFilters", "filters", "re
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * Copyright IBM Corp. 2022, 2023
+ * Copyright IBM Corp. 2022, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Button } from '@carbon/react';
-import React, { useRef } from 'react';
+
+import React, { useRef, useState } from 'react';
+import { Button, IconButton } from '@carbon/react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { ChevronDown } from '@carbon/react/icons';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { TagSet } from '../TagSet';
 import { pkg } from '../../settings';
 import uuidv4 from '../../global/js/utils/uuidv4';
+import { DURATIONS, EASINGS } from '../../global/js/utils/motionConstants';
+import { useWindowResize, usePreviousValue } from '../../global/js/hooks';
+import debounce from 'lodash/debounce';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 var blockClass = "".concat(pkg.prefix, "--filter-summary");
 var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _filterSummaryClearBu;
+  var _viewAllButtonRef$cur, _filterSummaryClearBu;
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$clearFiltersText = _ref.clearFiltersText,
@@ -47,29 +54,103 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     });
   });
   var filterSummaryClearButton = useRef();
+  var viewAllButtonRef = useRef();
   var filterSummaryRef = useRef();
-  var localRef = ref || filterSummaryRef;
+  var localRef = filterSummaryRef || ref;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    overflowCount = _useState2[0],
+    setOverflowCount = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    multiline = _useState4[0],
+    setMultiline = _useState4[1];
+  var previousState = usePreviousValue({
+    multiline: multiline
+  });
+  var handleViewAll = function handleViewAll() {
+    if (overflowCount === 0) {
+      setMultiline(false);
+      return;
+    }
+    setMultiline(function (prev) {
+      return !prev;
+    });
+  };
+  var viewAllWidth = typeof (viewAllButtonRef === null || viewAllButtonRef === void 0 || (_viewAllButtonRef$cur = viewAllButtonRef.current) === null || _viewAllButtonRef$cur === void 0 ? void 0 : _viewAllButtonRef$cur.offsetWidth) === 'undefined' ? 0 : overflowCount > 0 ? 48 : 0;
+  var measurementOffset = (filterSummaryClearButton === null || filterSummaryClearButton === void 0 || (_filterSummaryClearBu = filterSummaryClearButton.current) === null || _filterSummaryClearBu === void 0 ? void 0 : _filterSummaryClearBu.offsetWidth) + viewAllWidth;
+  var renderTagSet = function renderTagSet(type) {
+    return /*#__PURE__*/React.createElement(motion.div, {
+      key: type,
+      initial: {
+        opacity: 0,
+        y: -16
+      },
+      animate: {
+        opacity: 1,
+        y: 0
+      },
+      exit: {
+        opacity: 0,
+        y: -16
+      },
+      transition: {
+        duration: DURATIONS.moderate01,
+        ease: EASINGS.productive.entrance
+      }
+    }, /*#__PURE__*/React.createElement(TagSet, {
+      allTagsModalSearchLabel: "Search all tags",
+      allTagsModalSearchPlaceholderText: "Search all tags",
+      allTagsModalTitle: "All tags",
+      showAllTagsLabel: "View all tags",
+      tags: tagFilters,
+      overflowType: overflowType,
+      className: cx(_defineProperty({}, "".concat(blockClass, "__clear-button-inline"), clearButtonInline)),
+      containingElementRef: localRef,
+      measurementOffset: measurementOffset,
+      onOverflowTagChange: function onOverflowTagChange(overflowTags) {
+        return setOverflowCount(overflowTags.length);
+      },
+      multiline: multiline
+    }));
+  };
+  useWindowResize(function () {
+    var handleFilterSummaryResize = function handleFilterSummaryResize() {
+      var _localRef$current;
+      if (multiline && (localRef === null || localRef === void 0 || (_localRef$current = localRef.current) === null || _localRef$current === void 0 ? void 0 : _localRef$current.offsetHeight) <= 50) {
+        setMultiline(false);
+      }
+    };
+    var filterResize = debounce(handleFilterSummaryResize, 500);
+    filterResize();
+  }, [previousState === null || previousState === void 0 ? void 0 : previousState.multiline, multiline]);
   return /*#__PURE__*/React.createElement("div", _extends({}, getDevtoolsProps(componentName), {
     id: filterSummaryId
   }, rest, {
     ref: localRef,
-    className: cx([blockClass, className])
-  }), /*#__PURE__*/React.createElement(TagSet, {
-    allTagsModalSearchLabel: "Search all tags",
-    allTagsModalSearchPlaceholderText: "Search all tags",
-    allTagsModalTitle: "All tags",
-    showAllTagsLabel: "View all tags",
-    tags: tagFilters,
-    overflowType: overflowType,
-    className: cx(_defineProperty({}, "".concat(blockClass, "__clear-button-inline"), clearButtonInline)),
-    containingElementRef: localRef,
-    measurementOffset: filterSummaryClearButton === null || filterSummaryClearButton === void 0 || (_filterSummaryClearBu = filterSummaryClearButton.current) === null || _filterSummaryClearBu === void 0 ? void 0 : _filterSummaryClearBu.offsetWidth
-  }), /*#__PURE__*/React.createElement(Button, {
+    className: cx([blockClass, className], _defineProperty({}, "".concat(blockClass, "__expanded"), multiline))
+  }), /*#__PURE__*/React.createElement(AnimatePresence, {
+    mode: "wait",
+    exitBeforeEnter: true
+  }, !multiline && renderTagSet('single'), multiline && renderTagSet('multiline')), /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
     size: "sm",
     onClick: clearFilters,
-    ref: filterSummaryClearButton
-  }, clearFiltersText));
+    ref: filterSummaryClearButton,
+    className: "".concat(blockClass, "__clear-all-button")
+  }, clearFiltersText), (overflowCount > 0 || multiline) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__view-all--wrapper")
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    ref: viewAllButtonRef,
+    kind: "ghost",
+    label: 'View all',
+    className: "".concat(blockClass, "__view-all--trigger"),
+    align: "left",
+    onClick: handleViewAll,
+    size: "sm"
+  }, /*#__PURE__*/React.createElement(ChevronDown, {
+    className: cx("".concat(blockClass, "__view-all--chevron"), _defineProperty({}, "".concat(blockClass, "__view-all--chevron-multiline"), multiline))
+  }))));
 });
 var componentName = 'FilterSummary';
 FilterSummary.displayName = componentName;

package/es/components/InterstitialScreen/InterstitialScreen.js

@@ -0,0 +1,427 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className", "closeIconDescription", "domainName", "hideProgressIndicator", "interstitialAriaLabel", "isFullScreen", "isOpen", "media", "nextButtonLabel", "onClose", "previousButtonLabel", "productName", "headerClassName", "headerTitle", "startButtonLabel", "skipButtonLabel"];
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Import portions of React that are needed.
+import React, { Children, useCallback, useEffect, useRef, useState } from 'react';
+
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg /*, carbon */ } from '../../settings';
+
+// Other standard imports.
+import { clamp } from 'lodash';
+import { ArrowRight } from '@carbon/icons-react'; //Close16
+import { Button, Column, ComposedModal, ModalBody, ModalHeader, ModalFooter, FlexGrid, ProgressIndicator, ProgressStep, Row } from '@carbon/react';
+import { Carousel } from '../Carousel';
+import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--interstitial-screen");
+var headerBlockClass = "".concat(blockClass, "--internal-header");
+var bodyBlockClass = "".concat(blockClass, "--internal-body");
+var componentName = 'InterstitialScreen';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values can be included here and then assigned to the prop params,
+// e.g. prop = defaults.prop,
+// This gathers default values together neatly and ensures non-primitive
+// values are initialized early to avoid react making unnecessary re-renders.
+// Note that default values are not required for props that are 'required',
+// nor for props where the component can apply undefined values reasonably.
+// Default values should be provided when the component needs to make a choice
+// or assumption when a prop is not supplied.
+
+// Default values for props
+var defaults = {
+  closeIconDescription: 'Close',
+  domainName: '',
+  hideProgressIndicator: false,
+  interstitialAriaLabel: 'Interstitial screen',
+  isFullScreen: false,
+  isOpen: false,
+  nextButtonLabel: 'Next',
+  onClose: function onClose() {},
+  previousButtonLabel: 'Back',
+  productName: '',
+  skipButtonLabel: '',
+  startButtonLabel: 'Get started'
+};
+
+/**
+ * InterstitialScreen can be a full page or an overlay, and are
+ * shown on the first time a user accesses a new experience
+ * (e.g. upon first login or first time opening a page where a
+ * newly purchased capability is presented).
+ */
+export var InterstitialScreen = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _media$breakpoints, _media$breakpoints2;
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$closeIconDescrip = _ref.closeIconDescription,
+    closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
+    _ref$domainName = _ref.domainName,
+    domainName = _ref$domainName === void 0 ? defaults.domainName : _ref$domainName,
+    _ref$hideProgressIndi = _ref.hideProgressIndicator,
+    hideProgressIndicator = _ref$hideProgressIndi === void 0 ? defaults.hideProgressIndicator : _ref$hideProgressIndi,
+    _ref$interstitialAria = _ref.interstitialAriaLabel,
+    interstitialAriaLabel = _ref$interstitialAria === void 0 ? defaults.interstitialAriaLabel : _ref$interstitialAria,
+    _ref$isFullScreen = _ref.isFullScreen,
+    isFullScreen = _ref$isFullScreen === void 0 ? defaults.isFullScreen : _ref$isFullScreen,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? defaults.isOpen : _ref$isOpen,
+    media = _ref.media,
+    _ref$nextButtonLabel = _ref.nextButtonLabel,
+    nextButtonLabel = _ref$nextButtonLabel === void 0 ? defaults.nextButtonLabel : _ref$nextButtonLabel,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? defaults.onClose : _ref$onClose,
+    _ref$previousButtonLa = _ref.previousButtonLabel,
+    previousButtonLabel = _ref$previousButtonLa === void 0 ? defaults.previousButtonLabel : _ref$previousButtonLa,
+    _ref$productName = _ref.productName,
+    productName = _ref$productName === void 0 ? defaults.productName : _ref$productName,
+    headerClassName = _ref.headerClassName,
+    headerTitle = _ref.headerTitle,
+    _ref$startButtonLabel = _ref.startButtonLabel,
+    startButtonLabel = _ref$startButtonLabel === void 0 ? defaults.startButtonLabel : _ref$startButtonLabel,
+    _ref$skipButtonLabel = _ref.skipButtonLabel,
+    skipButtonLabel = _ref$skipButtonLabel === void 0 ? defaults.skipButtonLabel : _ref$skipButtonLabel,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var backupRef = useRef();
+  var _forwardedRef = ref || backupRef;
+  var scrollRef = useRef();
+  var startButtonRef = useRef();
+  var nextButtonRef = useRef();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    isVisibleClass = _useState2[0],
+    setIsVisibleClass = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    progStep = _useState4[0],
+    setProgStep = _useState4[1];
+  var childArray = Children.toArray(children);
+  var isMultiStep = childArray.length > 1;
+  var mediaIsDefined = (media === null || media === void 0 ? void 0 : media.render) || (media === null || media === void 0 ? void 0 : media.filePaths);
+  var bodyScrollRef = useRef();
+  var mediaBreakpoints = {
+    xlg: (media === null || media === void 0 || (_media$breakpoints = media.breakpoints) === null || _media$breakpoints === void 0 ? void 0 : _media$breakpoints.xlg) || 0,
+    lg: (media === null || media === void 0 || (_media$breakpoints2 = media.breakpoints) === null || _media$breakpoints2 === void 0 ? void 0 : _media$breakpoints2.lg) || 0,
+    md: 0,
+    sm: 0
+  };
+  var contentBreakpoints = {
+    xlg: 16 - mediaBreakpoints.xlg,
+    lg: 16 - mediaBreakpoints.lg,
+    md: 8,
+    sm: 4
+  };
+  var variantClass = isFullScreen ? "".concat(blockClass, "--full-screen") : "".concat(blockClass, "--modal");
+  var progStepFloor = 0;
+  var progStepCeil = childArray.length - 1;
+  var handleClose = useCallback(function () {
+    setProgStep(0);
+    onClose();
+  }, [onClose]);
+  var scrollBodyToTop = function scrollBodyToTop() {
+    bodyScrollRef.current.scroll({
+      top: 0,
+      behavior: 'smooth'
+    });
+  };
+  var handleClickPrev = function handleClickPrev() {
+    var targetStep = clamp(progStep - 1, progStepFloor, progStepCeil);
+    scrollRef.current.scrollPrev();
+    scrollBodyToTop();
+    setProgStep(targetStep);
+  };
+  var handleClickNext = function handleClickNext() {
+    var targetStep = clamp(progStep + 1, progStepFloor, progStepCeil);
+    scrollRef.current.scrollNext();
+    scrollBodyToTop();
+    setProgStep(targetStep);
+  };
+  useEffect(function () {
+    var _startButtonRef$curre;
+    if (!isOpen) {
+      setProgStep(0);
+    }
+    (_startButtonRef$curre = startButtonRef.current) === null || _startButtonRef$curre === void 0 || _startButtonRef$curre.focus();
+  }, [isOpen, progStep, onClose]);
+  useEffect(function () {
+    var _nextButtonRef$curren;
+    // for modal only, "is-visible" triggers animation
+    setIsVisibleClass(!isFullScreen && isOpen ? 'is-visible' : null);
+    nextButtonRef === null || nextButtonRef === void 0 || (_nextButtonRef$curren = nextButtonRef.current) === null || _nextButtonRef$curren === void 0 || _nextButtonRef$curren.focus();
+  }, [isFullScreen, isOpen]);
+
+  // hitting escape key also closes this component
+  useEffect(function () {
+    var close = function close(e) {
+      var key = e.key;
+      if (key === 'Escape') {
+        handleClose();
+      }
+    };
+    window.addEventListener('keydown', close);
+    return function () {
+      return window.removeEventListener('keydown', close);
+    };
+  }, [handleClose]);
+  if (!isOpen) {
+    return null;
+  }
+  var domainProductDelimiter = domainName !== '' && productName !== '' ? ' | ' : '';
+  var renderModal = function renderModal(childElements) {
+    return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
+      preventCloseOnClickOutside: true,
+      className: cx(blockClass,
+      // Apply the block class to the main HTML element
+      className // Apply any supplied class names to the main HTML element.
+      ),
+
+      size: "lg",
+      onClose: onClose,
+      open: isOpen,
+      ref: _forwardedRef,
+      "aria-label": interstitialAriaLabel
+    }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(ModalHeader, {
+      className: cx(headerBlockClass, headerTitle && "".concat(headerBlockClass, "--has-title"), headerClassName),
+      iconDescription: closeIconDescription,
+      buttonOnClick: handleClose
+    }, headerTitle && /*#__PURE__*/React.createElement("h2", null, headerTitle), !hideProgressIndicator && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "--progress")
+    }, /*#__PURE__*/React.createElement(ProgressIndicator, {
+      vertical: false,
+      currentIndex: progStep
+    }, childArray.map(function (child, idx) {
+      return /*#__PURE__*/React.createElement(ProgressStep, {
+        key: idx,
+        label: child.props.stepTitle
+      });
+    })))), /*#__PURE__*/React.createElement(ModalBody, {
+      className: bodyBlockClass
+    }, childElements), /*#__PURE__*/React.createElement(ModalFooter, null, renderFooter()));
+  };
+  var renderFullScreen = function renderFullScreen(childElements) {
+    return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+      className: cx(blockClass,
+      // Apply the block class to the main HTML element
+      className,
+      // Apply any supplied class names to the main HTML element.
+      variantClass, isVisibleClass),
+      "aria-label": interstitialAriaLabel,
+      ref: ref
+    }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
+      className: cx([_defineProperty({}, "".concat(blockClass, "--container"), isFullScreen)])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "--header")
+    }, domainName, domainProductDelimiter, /*#__PURE__*/React.createElement("strong", null, productName)), /*#__PURE__*/React.createElement("header", {
+      className: cx(headerBlockClass, headerTitle && "".concat(headerBlockClass, "--has-title"), headerClassName)
+    }, headerTitle && /*#__PURE__*/React.createElement("h2", null, headerTitle), !hideProgressIndicator && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "--progress")
+    }, /*#__PURE__*/React.createElement(ProgressIndicator, {
+      vertical: false,
+      currentIndex: progStep
+    }, childArray.map(function (child, idx) {
+      return /*#__PURE__*/React.createElement(ProgressStep, {
+        key: idx,
+        label: child.props.stepTitle
+      });
+    })))), childElements, renderFooter()));
+  };
+  var renderBody = function renderBody() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cx("".concat(blockClass, "--body")),
+      ref: bodyScrollRef
+    }, mediaIsDefined ? /*#__PURE__*/React.createElement(FlexGrid, {
+      fullWidth: true,
+      className: cx("".concat(blockClass, "--body-grid"))
+    }, /*#__PURE__*/React.createElement(Row, {
+      className: cx("".concat(blockClass, "--body-row"))
+    }, /*#__PURE__*/React.createElement(Column, {
+      xlg: contentBreakpoints.xlg,
+      lg: contentBreakpoints.lg,
+      md: contentBreakpoints.md,
+      sm: contentBreakpoints.sm
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cx("".concat(blockClass, "--content"))
+    }, isMultiStep ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__carousel")
+    }, /*#__PURE__*/React.createElement(Carousel, {
+      disableArrowScroll: true,
+      ref: scrollRef
+    }, children)) : childArray[0])), mediaIsDefined && /*#__PURE__*/React.createElement(Column, {
+      xlg: mediaBreakpoints.xlg,
+      lg: mediaBreakpoints.lg,
+      md: mediaBreakpoints.md,
+      sm: mediaBreakpoints.sm,
+      className: cx("".concat(blockClass, "--media-container"))
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "--media")
+    }, media.render ? media.render() : /*#__PURE__*/React.createElement(SteppedAnimatedMedia, {
+      className: "".concat(blockClass, "--stepped-animated-media"),
+      filePaths: media.filePaths,
+      playStep: progStep
+    }))))) : /*#__PURE__*/React.createElement("div", {
+      className: cx("".concat(blockClass, "--content"))
+    }, isMultiStep ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__carousel")
+    }, /*#__PURE__*/React.createElement(Carousel, {
+      disableArrowScroll: true,
+      ref: scrollRef
+    }, children)) : /*#__PURE__*/React.createElement("div", null, childArray[0])));
+  };
+  var renderFooter = function renderFooter() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "--footer")
+    }, isMultiStep && skipButtonLabel !== '' && /*#__PURE__*/React.createElement(Button, {
+      className: "".concat(blockClass, "--skip-btn"),
+      kind: "ghost",
+      size: "lg",
+      title: skipButtonLabel,
+      onClick: handleClose
+    }, skipButtonLabel), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "--footer-controls")
+    }, isMultiStep && progStep > 0 && /*#__PURE__*/React.createElement(Button, {
+      className: "".concat(blockClass, "--prev-btn"),
+      kind: "secondary",
+      size: "lg",
+      title: previousButtonLabel,
+      onClick: handleClickPrev
+    }, previousButtonLabel), isMultiStep && progStep < progStepCeil && /*#__PURE__*/React.createElement(Button, {
+      className: "".concat(blockClass, "--next-btn"),
+      renderIcon: ArrowRight,
+      ref: nextButtonRef,
+      size: "lg",
+      title: nextButtonLabel,
+      onClick: handleClickNext
+    }, nextButtonLabel), isMultiStep && progStep === progStepCeil && /*#__PURE__*/React.createElement(Button, {
+      className: "".concat(blockClass, "--start-btn"),
+      ref: startButtonRef,
+      renderIcon: ArrowRight,
+      size: "lg",
+      title: startButtonLabel,
+      onClick: handleClose
+    }, startButtonLabel), !isMultiStep && /*#__PURE__*/React.createElement(Button, {
+      className: "".concat(blockClass, "--start-btn"),
+      ref: startButtonRef,
+      size: "lg",
+      title: startButtonLabel,
+      onClick: handleClose
+    }, startButtonLabel)));
+  };
+  return isFullScreen ? renderFullScreen(renderBody()) : renderModal(renderBody());
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+InterstitialScreen = pkg.checkComponentEnabled(InterstitialScreen, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+InterstitialScreen.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.
+InterstitialScreen.propTypes = {
+  /**
+   * Provide the contents of the InterstitialScreen.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * 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,
+  /**
+   * The domain this app belongs to, e.g. "IBM Cloud Pak".
+   */
+  domainName: PropTypes.string,
+  /**
+   * Provide an optional class to be applied to the <header> element >.
+   */
+  headerClassName: PropTypes.string,
+  /**
+   * Provide an optional class to be applied to the <header> element >.
+   */
+  headerTitle: PropTypes.string,
+  /**
+   * Optional parameter to hide the progress indicator when multiple steps are used.
+   */
+  hideProgressIndicator: PropTypes.bool,
+  /**
+   * The aria label applied to the Interstitial Screen component
+   */
+  interstitialAriaLabel: PropTypes.string,
+  /**
+   * Specifies whether the component is shown as a full-screen
+   * experience, else it is shown as a modal by default.
+   */
+  isFullScreen: PropTypes.bool,
+  /**
+   * Specifies whether the component is currently open.
+   */
+  isOpen: PropTypes.bool,
+  /**
+   * The object describing an image in one of two shapes.
+   *
+   * If a single media element is required, use `{render}`.
+   *
+   * If a stepped animation is required, use `{filePaths}`.
+   *
+   * Breakpoints are used to set the media content column size as well as the remainder for the main content areas column size.
+   * Medium and small breakpoints will be set to 0 internally to focus on the main content area.
+   * @see {@link MEDIA_PROP_TYPE}.
+   */
+  media: PropTypes.oneOfType([PropTypes.shape({
+    render: PropTypes.func,
+    breakpoints: PropTypes.shape({
+      xlg: PropTypes.number,
+      lg: PropTypes.number
+    })
+  }), PropTypes.shape({
+    filePaths: PropTypes.arrayOf(PropTypes.string),
+    breakpoints: PropTypes.shape({
+      xlg: PropTypes.number,
+      lg: PropTypes.number
+    })
+  })]),
+  /**
+   * The label for the Next button.
+   */
+  nextButtonLabel: PropTypes.string,
+  /**
+   * Function to call when the close button is clicked.
+   */
+  onClose: PropTypes.func,
+  /**
+   * The label for the Previous button.
+   */
+  previousButtonLabel: PropTypes.string,
+  /**
+   * The name of this app, e.g. "QRadar".
+   */
+  productName: PropTypes.string,
+  /**
+   * The label for the skip button.
+   */
+  skipButtonLabel: PropTypes.string,
+  /**
+   * The label for the start button.
+   */
+  startButtonLabel: PropTypes.string
+};

package/es/components/InterstitialScreen/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { InterstitialScreen } from './InterstitialScreen';

package/es/components/InterstitialScreenView/InterstitialScreenView.js

@@ -0,0 +1,75 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className", "stepTitle"];
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Import portions of React that are needed.
+import React from 'react';
+
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg /*, carbon */ } from '../../settings';
+
+// Carbon and package components we use.
+/* TODO: @import(s) of carbon components and other package components. */
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--interstitial-screen-view");
+var componentName = 'InterstitialScreenView';
+
+/**
+ * A Novice to Pro component intended to be used as the child elements of the InterstitialScreen component.
+ */
+export var InterstitialScreenView = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    stepTitle = _ref.stepTitle,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    role: "complementary",
+    "aria-label": stepTitle
+  }, rest, {
+    className: cx(blockClass,
+    // Apply the block class to the main HTML element
+    className,
+    // Apply any supplied class names to the main HTML element.
+    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
+    {
+      // switched classes dependant on props or state
+      // example: [`${blockClass}__here-if-small`]: size === 'sm',
+    }),
+    ref: ref
+  }, getDevtoolsProps(componentName)), children);
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+InterstitialScreenView = pkg.checkComponentEnabled(InterstitialScreenView, componentName);
+
+// 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: PropTypes.node,
+  /**
+   * Optional class name for this component.
+   */
+  className: PropTypes.string,
+  /**
+   * The label to pass to the ProgressStep component.
+   */
+  stepTitle: PropTypes.string.isRequired
+};

package/es/components/InterstitialScreenView/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { InterstitialScreenView } from './InterstitialScreenView';