@carbon/ibm-products 2.70.1 → 2.71.0

package/lib/components/EditTearsheet/EditTearsheetForm.d.ts

@@ -36,9 +36,11 @@ interface EditTearsheetFormBaseProps {
 type EditTearsheetFormFieldsetTypes = {
     hasFieldset?: false;
     fieldsetLegendText: string;
+    fieldsetLegendId?: React.ReactNode;
 } | {
     hasFieldset: true;
     fieldsetLegendText: string;
+    fieldsetLegendId: React.ReactNode;
 };
 type EditTearsheetFormProps = EditTearsheetFormBaseProps & EditTearsheetFormFieldsetTypes;
 export declare let EditTearsheetForm: React.ForwardRefExoticComponent<EditTearsheetFormProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/EditTearsheet/EditTearsheetForm.js

@@ -32,6 +32,7 @@ exports.EditTearsheetForm = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className,
     description,
     fieldsetLegendText,
+    fieldsetLegendId,
     hasFieldset = defaults.hasFieldset,
     subtitle,
     title,
@@ -58,7 +59,7 @@ exports.EditTearsheetForm = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     sm: 4
   }, /*#__PURE__*/React.createElement("h4", {
     className: `${blockClass}--title`
-  }, title), subtitle && /*#__PURE__*/React.createElement("h6", {
+  }, title), subtitle && /*#__PURE__*/React.createElement("h5", {
     className: `${blockClass}--subtitle`
   }, subtitle), description && /*#__PURE__*/React.createElement("p", {
     className: `${blockClass}--description`
@@ -66,7 +67,8 @@ exports.EditTearsheetForm = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     span: 100
   }, hasFieldset ? /*#__PURE__*/React.createElement(react.FormGroup, {
     legendText: fieldsetLegendText,
-    className: `${blockClass}--fieldset`
+    className: `${blockClass}--fieldset`,
+    legendId: fieldsetLegendId
   }, /*#__PURE__*/React.createElement(react.Grid, null, children)) : children))) : pconsole.default.warn(`You have tried using a ${componentName} component outside of a EditTearsheet. This is not allowed. ${componentName}s should always be children of the EditTearsheet`);
 });
 
@@ -85,16 +87,26 @@ exports.EditTearsheetForm.propTypes = {
    * Sets an optional description on the form component
    */
   description: index.default.string,
+  /**
+   * This is the required legend id that appears as the aria-labelledby of fieldset for accessibility purposes.
+   */
+  /**@ts-ignore */
+  fieldsetLegendId: index.default.node.isRequired.if(_ref2 => {
+    let {
+      hasFieldset
+    } = _ref2;
+    return !!hasFieldset;
+  }),
   /**
    * This is the required legend text that appears above a fieldset html element for accessibility purposes.
    * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's form content.
    * Otherwise, use CSS to hide/remove this label text.
    */
   /**@ts-ignore */
-  fieldsetLegendText: index.default.string.isRequired.if(_ref2 => {
+  fieldsetLegendText: index.default.string.isRequired.if(_ref3 => {
     let {
       hasFieldset
-    } = _ref2;
+    } = _ref3;
     return !!hasFieldset;
   }),
   /**

package/lib/components/EmptyStates/EmptyState.js

@@ -44,7 +44,6 @@ exports.EmptyState = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     v2 = false,
     ...props
   } = _ref;
-  // todo: deprecate v1
   if (v2) {
     return /*#__PURE__*/React.createElement(EmptyStateV2.EmptyStateV2, props);
   }

package/lib/components/FilterSummary/FilterSummary.d.ts

@@ -8,6 +8,7 @@ import React from 'react';
 export interface Filter {
     key: string;
     value: string;
+    onClose?: () => void;
 }
 export interface FilterSummaryProps {
     className?: string;

package/lib/components/FilterSummary/FilterSummary.js

@@ -55,9 +55,10 @@ const FilterSummary = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const localRef = filterSummaryRef || ref;
   const [overflowCount, setOverflowCount] = React.useState(0);
   const [multiline, setMultiline] = React.useState(false);
+  // @ts-ignore
   const previousState = usePreviousValue.usePreviousValue({
     multiline
-  }) || {};
+  }) ?? {};
   const handleViewAll = () => {
     if (overflowCount === 0) {
       setMultiline(false);

package/lib/components/Guidebanner/Guidebanner.js

@@ -40,8 +40,8 @@ const defaults = {
  * The guide banner sits at the top of a page, or page-level tab,
  * to introduce foundational concepts related to the page's content.
  */
-exports.Guidebanner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
+exports.Guidebanner = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
     children,
     className,
     collapsible = defaults.collapsible,
@@ -55,7 +55,7 @@ exports.Guidebanner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     previousIconDescription = defaults.previousIconDescription,
     title,
     ...rest
-  } = _ref;
+  } = props;
   const scrollRef = React.useRef(null);
   const toggleRef = React.useRef(null);
   const [scrollPosition, setScrollPosition] = React.useState(0);
@@ -156,23 +156,7 @@ exports.Guidebanner.propTypes = {
    * Provide the contents of the Guidebanner.
    * One or more GuidebannerElement components are required.
    */
-  children: (props, propName) => {
-    let error;
-    const prop = props[propName];
-    if (!prop) {
-      error = new Error('`Guidebanner` requires one or more children of type `GuidebannerElement`.');
-    }
-    React.Children.forEach(prop, child => {
-      if (child.type.displayName !== 'GuidebannerElement') {
-        // If child element is not `GuidebannerElement`, then show:
-        // Carbon Products component's `displayName` (child.type.displayName) or
-        // React component's `name` (child.type.name) or
-        // HTML element's tag name (child.type).
-        error = new Error(`\`Guidebanner\` only accepts children of type \`GuidebannerElement\`, found \`${child.type?.displayName || child.type?.name || child.type}\` instead.`);
-      }
-    });
-    return error;
-  },
+  children: index.default.node,
   /**
    * Provide an optional class to be applied to the containing node.
    */

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

@@ -8,6 +8,7 @@ import React, { ReactNode, RefObject } from 'react';
 import { InterstitialScreenHeaderProps } from './InterstitialScreenHeader';
 import { InterstitialScreenBodyProps } from './InterstitialScreenBody';
 import { InterstitialScreenFooterProps } from './InterstitialScreenFooter';
+export declare const blockClass: string;
 export type ActionType = 'close' | 'start' | 'skip' | 'back' | 'next';
 export interface InterstitialScreenProps {
     /**
@@ -21,7 +22,7 @@ export interface InterstitialScreenProps {
     /**
      * The aria label applied to the Interstitial Screen component
      */
-    interstitialAriaLabel?: string;
+    ariaLabel?: string;
     /**
      * Specifies whether the component is shown as a full-screen
      * experience, else it is shown as a modal by default.
@@ -30,7 +31,7 @@ export interface InterstitialScreenProps {
     /**
      * Specifies whether the component is currently open.
      */
-    isOpen?: boolean;
+    open?: boolean;
     /**
      * Function to call when the close button is clicked.
      */
@@ -40,7 +41,7 @@ export interface InterstitialScreenProps {
      */
     launcherButtonRef?: RefObject<HTMLElement>;
 }
-type InterstitialScreenComponent = React.ForwardRefExoticComponent<InterstitialScreenProps & React.RefAttributes<HTMLDivElement>> & {
+export type InterstitialScreenComponent = React.ForwardRefExoticComponent<InterstitialScreenProps & React.RefAttributes<HTMLDivElement>> & {
     Header: React.FC<InterstitialScreenHeaderProps>;
     Body: React.FC<InterstitialScreenBodyProps>;
     Footer: React.FC<InterstitialScreenFooterProps>;

package/lib/components/InterstitialScreen/InterstitialScreen.js

@@ -49,9 +49,9 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     children,
     className,
-    interstitialAriaLabel = 'Interstitial screen',
+    ariaLabel = 'Interstitial screen',
     isFullScreen = false,
-    isOpen = false,
+    open = false,
     launcherButtonRef,
     onClose,
     ...rest
@@ -78,21 +78,21 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
     onClose?.(actionName ?? 'close');
   }, [onClose]);
   React.useEffect(() => {
-    if (!isOpen) {
+    if (!open) {
       setProgStep(0);
     }
     startButtonRef.current?.focus();
-  }, [isOpen, progStep, onClose]);
+  }, [open, progStep, onClose]);
   React.useEffect(() => {
     // for modal only, "is-visible" triggers animation
-    setIsVisibleClass(!isFullScreen && isOpen ? 'is-visible' : null);
+    setIsVisibleClass(!isFullScreen && open ? 'is-visible' : null);
     nextButtonRef?.current?.focus();
-    if (!isOpen && launcherButtonRef) {
+    if (!open && launcherButtonRef) {
       setTimeout(() => {
         launcherButtonRef.current.focus();
       }, 0);
     }
-  }, [launcherButtonRef, isFullScreen, isOpen]);
+  }, [launcherButtonRef, isFullScreen, open]);
 
   // hitting escape key also closes this component
   React.useEffect(() => {
@@ -107,7 +107,7 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
     window.addEventListener('keydown', close);
     return () => window.removeEventListener('keydown', close);
   }, [handleClose]);
-  if (!isOpen) {
+  if (!open) {
     return null;
   }
   const renderModal = () => {
@@ -121,9 +121,9 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
       ),
       size: "lg",
       onClose: handleClose,
-      open: isOpen,
+      open: open,
       ref: _forwardedRef,
-      "aria-label": interstitialAriaLabel
+      "aria-label": ariaLabel
     }, devtools.getDevtoolsProps(componentName)), children));
   };
   const renderFullScreen = () => {
@@ -134,7 +134,7 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
       // Apply any supplied class names to the main HTML element.
       variantClass, isVisibleClass),
       role: "main",
-      "aria-label": interstitialAriaLabel,
+      "aria-label": ariaLabel,
       ref: ref
     }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
       className: `${blockClass}--container`
@@ -183,6 +183,10 @@ exports.InterstitialScreen.displayName = componentName;
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 exports.InterstitialScreen.propTypes = {
+  /**
+   * The aria label applied to the Interstitial Screen component
+   */
+  ariaLabel: index.default.string,
   children: index.default.node,
   /**
    * Provide an optional class to be applied to the containing node.
@@ -192,19 +196,11 @@ exports.InterstitialScreen.propTypes = {
    * Tooltip text and aria label for the Close button icon.
    */
   closeIconDescription: index.default.string,
-  /**
-   * The aria label applied to the Interstitial Screen component
-   */
-  interstitialAriaLabel: index.default.string,
   /**
    * Specifies whether the component is shown as a full-screen
    * experience, else it is shown as a modal by default.
    */
   isFullScreen: index.default.bool,
-  /**
-   * Specifies whether the component is currently open.
-   */
-  isOpen: index.default.bool,
   /**
    * Provide a ref to return focus to once the interstitial is closed.
    */
@@ -212,7 +208,12 @@ exports.InterstitialScreen.propTypes = {
   /**
    * Function to call when the close button is clicked.
    */
-  onClose: index.default.func
+  onClose: index.default.func,
+  /**
+   * Specifies whether the component is currently open.
+   */
+  open: index.default.bool
 };
 
 exports.InterstitialScreenContext = InterstitialScreenContext;
+exports.blockClass = blockClass;

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

@@ -13,15 +13,21 @@ type contentRendererArgs = {
     disableActionButton: (value: disableButtonConfigType) => void;
 };
 export interface InterstitialScreenBodyProps {
+    /**
+     * Optional static content for body
+     */
+    children?: ReactNode;
     /**
      * Provide an optional class to be applied to the containing node.
      */
     className?: string;
     /**
-     * This is a required callback that has to return the content to render in the body section.
-     * It can be a single child or an array of children depending on your need
+     *You can provide content either through a callback (contentRenderer) or as static children—but not both.
+     * If both are provided, contentRenderer always takes precedence. This optional callback should return the content
+     * to be rendered in the body section, which can be either a single element or an array of elements based on your needs.
+     * If internal state access isn’t required, you can simply use static children instead
      */
-    contentRenderer: (config: contentRendererArgs) => ReactElement<EnrichedChildren> | ReactNode;
+    contentRenderer?: (config: contentRendererArgs) => ReactElement<EnrichedChildren> | ReactNode;
 }
 declare const InterstitialScreenBody: React.ForwardRefExoticComponent<InterstitialScreenBodyProps & React.RefAttributes<HTMLDivElement>>;
 export default InterstitialScreenBody;

package/lib/components/InterstitialScreen/InterstitialScreenBody.js

@@ -14,9 +14,9 @@ var React = require('react');
 var index = require('../../_virtual/index.js');
 var InterstitialScreen = require('./InterstitialScreen.js');
 var react = require('@carbon/react');
-var settings = require('../../settings.js');
 var Carousel = require('../Carousel/Carousel.js');
 require('../Carousel/CarouselItem.js');
+var devtools = require('../../global/js/utils/devtools.js');
 
 const InterstitialScreenBody = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -24,8 +24,7 @@ const InterstitialScreenBody = /*#__PURE__*/React.forwardRef((props, ref) => {
     contentRenderer,
     ...rest
   } = props;
-  const blockClass = `${settings.pkg.prefix}--interstitial-screen`;
-  const bodyBlockClass = `${blockClass}--internal-body`;
+  const bodyBlockClass = `${InterstitialScreen.blockClass}--internal-body`;
   const [stepType, setStepType] = React.useState();
   const {
     setBodyChildrenData,
@@ -42,11 +41,11 @@ const InterstitialScreenBody = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = React.useContext(InterstitialScreen.InterstitialScreenContext);
   const [scrollPercent, setScrollPercent] = React.useState(-1);
   React.useEffect(() => {
-    const _bodyContent = contentRenderer({
+    const _bodyContent = contentRenderer?.({
       handleGotoStep,
       progStep,
       disableActionButton
-    });
+    }) ?? props.children;
     const isElement = /*#__PURE__*/React.isValidElement(_bodyContent);
     const children = isElement ? _bodyContent.props.children : _bodyContent;
 
@@ -78,32 +77,38 @@ const InterstitialScreenBody = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
   const onScrollHandler = scrollPercent => setScrollPercent(scrollPercent);
   const renderBody = () => /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
-    className: `${blockClass}--body ${className}`,
+    className: `${InterstitialScreen.blockClass}--body ${className}`,
     ref: bodyScrollRef ?? ref
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--content`
+  }, devtools.getDevtoolsProps('InterstitialScreenBody'), isFullScreen ? rest : {}), /*#__PURE__*/React.createElement("div", {
+    className: `${InterstitialScreen.blockClass}--content`
   }, stepType === 'multi' ? /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__carousel`
+    className: `${InterstitialScreen.blockClass}__carousel`
   }, /*#__PURE__*/React.createElement(Carousel.Carousel, {
     disableArrowScroll: true,
     ref: scrollRef,
     onScroll: onScrollHandler
   }, bodyChildrenData)) : stepType === 'single' ? bodyChildrenData : ''));
-  return isFullScreen ? renderBody() : /*#__PURE__*/React.createElement(react.ModalBody, {
+  return isFullScreen ? renderBody() : /*#__PURE__*/React.createElement(react.ModalBody, _rollupPluginBabelHelpers.extends({
     ref: ref,
     className: bodyBlockClass
-  }, renderBody());
+  }, rest), renderBody());
 });
 InterstitialScreenBody.propTypes = {
+  /**
+   * Optional static content for body
+   */
+  children: index.default.node,
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: index.default.string,
   /**
-   * This is a required callback that has to return the content to render in the body section.
-   * It can be a single child or an array of children depending on your need
+   *You can provide content either through a callback (contentRenderer) or as static children—but not both.
+   * If both are provided, contentRenderer always takes precedence. This optional callback should return the content
+   * to be rendered in the body section, which can be either a single element or an array of elements based on your needs.
+   * If internal state access isn’t required, you can simply use static children instead
    */
-  contentRenderer: index.default.func.isRequired
+  contentRenderer: index.default.func
 };
 
 exports.default = InterstitialScreenBody;

package/lib/components/InterstitialScreen/InterstitialScreenFooter.js

@@ -11,12 +11,12 @@ 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 devtools = require('../../global/js/utils/devtools.js');
 
 var _InlineLoading, _InlineLoading2, _InlineLoading3, _InlineLoading4;
 const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -27,9 +27,10 @@ const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
     nextButtonLabel = 'Next',
     startButtonLabel = 'Get Started',
     actionButtonRenderer,
-    onAction
+    onAction,
+    ...rest
   } = props;
-  const blockClass = `${settings.pkg.prefix}--interstitial-screen`;
+  const footerBlockClass = `${InterstitialScreen.blockClass}--footer`;
   const {
     handleClose,
     progStep,
@@ -38,8 +39,8 @@ const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
     disableButtonConfig,
     isFullScreen
   } = React.useContext(InterstitialScreen.InterstitialScreenContext);
-  const startButtonRef = React.useRef(undefined);
-  const nextButtonRef = React.useRef(undefined);
+  const startButtonRef = React.useRef(null);
+  const nextButtonRef = React.useRef(null);
   const [loadingAction, setLoadingAction] = React.useState('');
   const isMultiStep = !!stepCount;
   const progStepFloor = 0;
@@ -82,35 +83,32 @@ const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
     return {};
   }, [loadingAction, isMultiStep, progStep, progStepCeil]);
-  const getFooterContent = () => /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: `${blockClass}--footer ${className}`
-  }, isMultiStep && skipButtonLabel !== '' && /*#__PURE__*/React.createElement(react.Button, {
-    className: `${blockClass}--skip-btn`,
+  const getFooterContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, isMultiStep && skipButtonLabel !== '' && /*#__PURE__*/React.createElement(react.Button, {
+    className: `${InterstitialScreen.blockClass}--skip-btn`,
     kind: "ghost",
     size: "lg",
     title: skipButtonLabel,
     onClick: handleSkip,
     disabled: disableButtonConfig?.skip
   }, skipButtonLabel, loadingAction === 'skip' && (_InlineLoading || (_InlineLoading = /*#__PURE__*/React.createElement(react.InlineLoading, null)))), /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--footer-controls`
+    className: `${InterstitialScreen.blockClass}--footer-controls`
   }, isMultiStep && progStep > 0 && /*#__PURE__*/React.createElement(react.Button, {
-    className: `${blockClass}--prev-btn`,
+    className: `${InterstitialScreen.blockClass}--prev-btn`,
     kind: "secondary",
     size: "lg",
     title: previousButtonLabel,
     disabled: disableButtonConfig?.back,
     onClick: handleClickPrev
   }, previousButtonLabel, loadingAction === 'back' && (_InlineLoading2 || (_InlineLoading2 = /*#__PURE__*/React.createElement(react.InlineLoading, null)))), isMultiStep && progStep < progStepCeil && /*#__PURE__*/React.createElement(react.Button, {
-    className: `${blockClass}--next-btn`,
-    renderIcon: loadingAction !== 'next' ? icons.ArrowRight : null,
+    className: `${InterstitialScreen.blockClass}--next-btn`,
+    renderIcon: loadingAction !== 'next' ? icons.ArrowRight : undefined,
     ref: nextButtonRef,
     size: "lg",
     title: nextButtonLabel,
     disabled: 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: `${blockClass}--start-btn`,
+    className: `${InterstitialScreen.blockClass}--start-btn`,
     ref: startButtonRef,
     size: "lg",
     title: startButtonLabel,
@@ -119,7 +117,7 @@ const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, getRenderIcon), startButtonLabel, loadingAction === 'start' && (_InlineLoading4 || (_InlineLoading4 = /*#__PURE__*/React.createElement(react.InlineLoading, null))))));
   if (actionButtonRenderer) {
     return /*#__PURE__*/React.createElement("div", {
-      className: `${blockClass}--footer`
+      className: `${InterstitialScreen.blockClass}--footer`
     }, actionButtonRenderer({
       handleGotoStep,
       progStep,
@@ -127,9 +125,13 @@ const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
       disableButtonConfig
     }));
   }
-  return isFullScreen ? getFooterContent() : /*#__PURE__*/React.createElement(react.ModalFooter, {
+  return isFullScreen ? /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
+    ref: ref,
+    className: `${footerBlockClass} ${className}`
+  }, devtools.getDevtoolsProps('InterstitialScreenFooter'), isFullScreen ? rest : {}), getFooterContent()) : /*#__PURE__*/React.createElement(react.ModalFooter, _rollupPluginBabelHelpers.extends({
+    className: footerBlockClass,
     ref: ref
-  }, getFooterContent());
+  }, rest), getFooterContent());
 });
 InterstitialScreenFooter.propTypes = {
   /**

package/lib/components/InterstitialScreen/InterstitialScreenHeader.js

@@ -9,13 +9,14 @@
 
 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 devtools = require('../../global/js/utils/devtools.js');
 
 const InterstitialScreenHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _h, _h2;
@@ -25,7 +26,8 @@ const InterstitialScreenHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
     headerSubTitle,
     closeIconDescription,
     hideProgressIndicator,
-    children
+    children,
+    ...rest
   } = props;
   const {
     bodyChildrenData,
@@ -34,15 +36,14 @@ const InterstitialScreenHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
     handleClose,
     stepCount
   } = React.useContext(InterstitialScreen.InterstitialScreenContext);
-  const blockClass = `${settings.pkg.prefix}--interstitial-screen`;
-  const headerBlockClass = `${blockClass}--internal-header`;
+  const headerBlockClass = `${InterstitialScreen.blockClass}--internal-header`;
   const _useId = useId.useId();
   const carbonPrefix = react.usePrefix();
   const headerContent = () => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, (headerTitle || headerSubTitle) && /*#__PURE__*/React.createElement("div", {
-      className: `${blockClass}--titleContainer`
+      className: `${InterstitialScreen.blockClass}--titleContainer`
     }, headerTitle && (_h || (_h = /*#__PURE__*/React.createElement("h1", null, headerTitle))), headerSubTitle && (_h2 || (_h2 = /*#__PURE__*/React.createElement("h2", null, headerSubTitle)))), children, !hideProgressIndicator && bodyChildrenData && Array.isArray(bodyChildrenData) && /*#__PURE__*/React.createElement("div", {
-      className: `${blockClass}--progress`
+      className: `${InterstitialScreen.blockClass}--progress`
     }, /*#__PURE__*/React.createElement(react.ProgressIndicator, {
       vertical: false,
       currentIndex: progStep
@@ -61,19 +62,23 @@ const InterstitialScreenHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
       className: `${carbonPrefix}--visually-hidden`
     }, "Step ", progStep + 1, " of ", stepCount)));
   };
-  return isFullScreen ? /*#__PURE__*/React.createElement("header", {
+  const closeModal = () => {
+    handleClose?.('close');
+  };
+  return isFullScreen ? /*#__PURE__*/React.createElement("header", _rollupPluginBabelHelpers.extends({
     ref: ref,
+    role: "presentation",
     className: cx(headerBlockClass, className, {
       [`${headerBlockClass}--has-title`]: headerTitle || headerSubTitle || children
     })
-  }, headerContent()) : /*#__PURE__*/React.createElement(react.ModalHeader, {
+  }, devtools.getDevtoolsProps('InterstitialScreenHeader'), rest), headerContent()) : /*#__PURE__*/React.createElement(react.ModalHeader, _rollupPluginBabelHelpers.extends({
     ref: ref,
     className: cx(headerBlockClass, className, {
       [`${headerBlockClass}--has-title`]: headerTitle || headerSubTitle || children
     }),
-    closeModal: handleClose,
+    closeModal: closeModal,
     iconDescription: closeIconDescription
-  }, headerContent());
+  }, devtools.getDevtoolsProps('InterstitialScreenHeader'), rest), headerContent());
 });
 InterstitialScreenHeader.propTypes = {
   /**

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

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

package/lib/components/Nav/NavItemLink.js

@@ -14,7 +14,7 @@ var React = require('react');
 
 const NavItemLink = /*#__PURE__*/React.forwardRef(function NavItemLink(props, ref) {
   const {
-    element,
+    element = 'a',
     ...rest
   } = props;
   return /*#__PURE__*/React.createElement(element, {
@@ -27,8 +27,5 @@ NavItemLink.propTypes = {
   /** @type {elementType} The base element to use to build the link. Defaults to `a`, can also accept alternative tag names or custom components like `Link` from `react-router`. */
   element: index.default.elementType
 };
-NavItemLink.defaultProps = {
-  element: 'a'
-};
 
 exports.default = NavItemLink;

package/lib/components/PageHeader/PageHeaderTitle.js

@@ -47,7 +47,7 @@ const PageHeaderTitle = _ref => {
   } = title;
   let titleText;
   let isEditable = !!onSave;
-  const titleRef = React.useRef();
+  const titleRef = React.useRef(undefined);
   const isEllipsisApplied = useOverflowString.useOverflowStringWidth(titleRef);
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {