@carbon/ibm-products
Version:
Carbon for IBM Products
168 lines (166 loc) • 6.12 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../node_modules/classnames/index.js");
const require_devtools = require("../../global/js/utils/devtools.js");
const require_context = require("./context.js");
const require_InterstitialScreenHeader = require("./InterstitialScreenHeader.js");
const require_InterstitialScreenBody = require("./InterstitialScreenBody.js");
const require_InterstitialScreenFooter = require("./InterstitialScreenFooter.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
//#region src/components/InterstitialScreen/InterstitialScreen.tsx
/**
* Copyright IBM Corp. 2024, 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.
*/
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const componentName = "InterstitialScreen";
/**
* 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).
*/
const InterstitialScreen = react.default.forwardRef((props, ref) => {
const { children, className, ariaLabel = "Interstitial screen", isFullScreen = false, open = false, launcherButtonRef, onClose, ...rest } = props;
const backupRef = (0, react.useRef)(null);
const _forwardedRef = ref || backupRef;
const startButtonRef = (0, react.useRef)(void 0);
const nextButtonRef = (0, react.useRef)(void 0);
const [isVisibleClass, setIsVisibleClass] = (0, react.useState)(null);
const [progStep, setProgStep] = (0, react.useState)(0);
const bodyScrollRef = (0, react.useRef)(null);
const [stepCount, setStepCount] = (0, react.useState)(0);
const [disableButtonConfig, setDisableButtonConfig] = (0, react.useState)({
skip: false,
back: false,
next: false,
start: false
});
const variantClass = isFullScreen ? `${require_context.blockClass}--full-screen` : `${require_context.blockClass}--modal`;
const [bodyChildrenData, setBodyChildrenData] = (0, react.useState)(null);
const handleClose = (0, react.useCallback)((actionName) => {
setProgStep(0);
onClose?.(actionName ?? "close");
}, [onClose]);
(0, react.useEffect)(() => {
if (!open) setProgStep(0);
startButtonRef.current?.focus();
}, [
open,
progStep,
onClose
]);
(0, react.useEffect)(() => {
setIsVisibleClass(!isFullScreen && open ? "is-visible" : null);
nextButtonRef?.current?.focus();
if (!open && launcherButtonRef) setTimeout(() => {
launcherButtonRef.current.focus();
}, 0);
}, [
launcherButtonRef,
isFullScreen,
open
]);
(0, react.useEffect)(() => {
const close = (e) => {
const { key } = e;
if (key === "Escape") handleClose("close");
};
window.addEventListener("keydown", close);
return () => window.removeEventListener("keydown", close);
}, [handleClose]);
if (!open) return null;
const renderModal = () => {
return /* @__PURE__ */ react.default.createElement(_carbon_react.unstable_FeatureFlags, { enableExperimentalFocusWrapWithoutSentinels: true }, /* @__PURE__ */ react.default.createElement(_carbon_react.ComposedModal, {
...rest,
preventCloseOnClickOutside: true,
className: (0, import_classnames.default)(require_context.blockClass, className),
size: "lg",
onClose: handleClose,
open,
ref: _forwardedRef,
"aria-label": ariaLabel,
...require_devtools.getDevtoolsProps(componentName)
}, children));
};
const renderFullScreen = () => {
return /* @__PURE__ */ react.default.createElement("div", {
...rest,
className: (0, import_classnames.default)(require_context.blockClass, className, variantClass, isVisibleClass),
role: "main",
"aria-label": ariaLabel,
ref,
...require_devtools.getDevtoolsProps(componentName)
}, /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}--container` }, children));
};
const handleGotoStep = (targetStep) => {
setProgStep(targetStep);
scrollBodyToTop();
};
const scrollBodyToTop = () => {
bodyScrollRef?.current?.scroll?.({ top: 0 });
};
return /* @__PURE__ */ react.default.createElement(require_context.InterstitialScreenContext.Provider, { value: {
bodyChildrenData,
setBodyChildrenData,
isFullScreen,
handleClose,
progStep,
setProgStep,
bodyScrollRef,
handleGotoStep,
stepCount,
setStepCount,
disableButtonConfig,
setDisableButtonConfig
} }, isFullScreen ? renderFullScreen() : renderModal());
});
InterstitialScreen.Header = require_InterstitialScreenHeader.default;
InterstitialScreen.Body = require_InterstitialScreenBody.default;
InterstitialScreen.Footer = require_InterstitialScreenFooter.default;
InterstitialScreen.displayName = componentName;
InterstitialScreen.propTypes = {
/**
* The aria label applied to the Interstitial Screen component
*/
ariaLabel: prop_types.default.string,
children: prop_types.default.node,
/**
* Provide an optional class to be applied to the containing node.
*/
className: prop_types.default.string,
/**
* Tooltip text and aria label for the Close button icon.
*/
closeIconDescription: prop_types.default.string,
/**
* Specifies whether the component is shown as a full-screen
* experience, else it is shown as a modal by default.
*/
isFullScreen: prop_types.default.bool,
/**
* Provide a ref to return focus to once the interstitial is closed.
*/
launcherButtonRef: prop_types.default.any,
/**
* Function to call when the close button is clicked.
*/
onClose: prop_types.default.func,
/**
* Specifies whether the component is currently open.
*/
open: prop_types.default.bool
};
//#endregion
exports.InterstitialScreen = InterstitialScreen;