@carbon/ibm-products 2.70.0 → 2.71.0-rc.0

package/es/components/InterstitialScreen/InterstitialScreen.js

@@ -47,9 +47,9 @@ let InterstitialScreen = /*#__PURE__*/React__default.forwardRef((props, ref) =>
   const {
     children,
     className,
-    interstitialAriaLabel = 'Interstitial screen',
+    ariaLabel = 'Interstitial screen',
     isFullScreen = false,
-    isOpen = false,
+    open = false,
     launcherButtonRef,
     onClose,
     ...rest
@@ -76,21 +76,21 @@ let InterstitialScreen = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     onClose?.(actionName ?? 'close');
   }, [onClose]);
   useEffect(() => {
-    if (!isOpen) {
+    if (!open) {
       setProgStep(0);
     }
     startButtonRef.current?.focus();
-  }, [isOpen, progStep, onClose]);
+  }, [open, progStep, onClose]);
   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
   useEffect(() => {
@@ -105,7 +105,7 @@ let InterstitialScreen = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     window.addEventListener('keydown', close);
     return () => window.removeEventListener('keydown', close);
   }, [handleClose]);
-  if (!isOpen) {
+  if (!open) {
     return null;
   }
   const renderModal = () => {
@@ -119,9 +119,9 @@ let InterstitialScreen = /*#__PURE__*/React__default.forwardRef((props, ref) =>
       ),
       size: "lg",
       onClose: handleClose,
-      open: isOpen,
+      open: open,
       ref: _forwardedRef,
-      "aria-label": interstitialAriaLabel
+      "aria-label": ariaLabel
     }, getDevtoolsProps(componentName)), children));
   };
   const renderFullScreen = () => {
@@ -132,7 +132,7 @@ let InterstitialScreen = /*#__PURE__*/React__default.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
     }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
       className: `${blockClass}--container`
@@ -181,6 +181,10 @@ InterstitialScreen.displayName = componentName;
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 InterstitialScreen.propTypes = {
+  /**
+   * The aria label applied to the Interstitial Screen component
+   */
+  ariaLabel: PropTypes.string,
   children: PropTypes.node,
   /**
    * Provide an optional class to be applied to the containing node.
@@ -190,19 +194,11 @@ InterstitialScreen.propTypes = {
    * Tooltip text and aria label for the Close button icon.
    */
   closeIconDescription: PropTypes.string,
-  /**
-   * 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,
   /**
    * Provide a ref to return focus to once the interstitial is closed.
    */
@@ -210,7 +206,11 @@ InterstitialScreen.propTypes = {
   /**
    * Function to call when the close button is clicked.
    */
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  /**
+   * Specifies whether the component is currently open.
+   */
+  open: PropTypes.bool
 };
 
-export { InterstitialScreen, InterstitialScreenContext };
+export { InterstitialScreen, InterstitialScreenContext, blockClass };

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

@@ -8,11 +8,11 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useContext, useEffect, isValidElement } from 'react';
 import PropTypes from '../../_virtual/index.js';
-import { InterstitialScreenContext } from './InterstitialScreen.js';
+import { InterstitialScreenContext, blockClass } from './InterstitialScreen.js';
 import { ModalBody } from '@carbon/react';
-import { pkg } from '../../settings.js';
 import { Carousel } from '../Carousel/Carousel.js';
 import '../Carousel/CarouselItem.js';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 
 const InterstitialScreenBody = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
@@ -20,7 +20,6 @@ const InterstitialScreenBody = /*#__PURE__*/React__default.forwardRef((props, re
     contentRenderer,
     ...rest
   } = props;
-  const blockClass = `${pkg.prefix}--interstitial-screen`;
   const bodyBlockClass = `${blockClass}--internal-body`;
   const [stepType, setStepType] = useState();
   const {
@@ -38,11 +37,11 @@ const InterstitialScreenBody = /*#__PURE__*/React__default.forwardRef((props, re
   } = useContext(InterstitialScreenContext);
   const [scrollPercent, setScrollPercent] = useState(-1);
   useEffect(() => {
-    const _bodyContent = contentRenderer({
+    const _bodyContent = contentRenderer?.({
       handleGotoStep,
       progStep,
       disableActionButton
-    });
+    }) ?? props.children;
     const isElement = /*#__PURE__*/isValidElement(_bodyContent);
     const children = isElement ? _bodyContent.props.children : _bodyContent;
 
@@ -76,7 +75,7 @@ const InterstitialScreenBody = /*#__PURE__*/React__default.forwardRef((props, re
   const renderBody = () => /*#__PURE__*/React__default.createElement("div", _extends({
     className: `${blockClass}--body ${className}`,
     ref: bodyScrollRef ?? ref
-  }, rest), /*#__PURE__*/React__default.createElement("div", {
+  }, getDevtoolsProps('InterstitialScreenBody'), isFullScreen ? rest : {}), /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}--content`
   }, stepType === 'multi' ? /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}__carousel`
@@ -85,21 +84,27 @@ const InterstitialScreenBody = /*#__PURE__*/React__default.forwardRef((props, re
     ref: scrollRef,
     onScroll: onScrollHandler
   }, bodyChildrenData)) : stepType === 'single' ? bodyChildrenData : ''));
-  return isFullScreen ? renderBody() : /*#__PURE__*/React__default.createElement(ModalBody, {
+  return isFullScreen ? renderBody() : /*#__PURE__*/React__default.createElement(ModalBody, _extends({
     ref: ref,
     className: bodyBlockClass
-  }, renderBody());
+  }, rest), renderBody());
 });
 InterstitialScreenBody.propTypes = {
+  /**
+   * Optional static content for body
+   */
+  children: PropTypes.node,
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.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: PropTypes.func.isRequired
+  contentRenderer: PropTypes.func
 };
 
 export { InterstitialScreenBody as default };

package/es/components/InterstitialScreen/InterstitialScreenFooter.js

@@ -7,12 +7,12 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext, useRef, useState, useEffect, useMemo } from 'react';
-import { pkg } from '../../settings.js';
 import PropTypes from '../../_virtual/index.js';
-import { InterstitialScreenContext } from './InterstitialScreen.js';
+import { InterstitialScreenContext, blockClass } from './InterstitialScreen.js';
 import { ModalFooter, Button, InlineLoading } from '@carbon/react';
 import { clamp } from '../../global/js/utils/clamp.js';
 import { ArrowRight } from '@carbon/react/icons';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 
 var _InlineLoading, _InlineLoading2, _InlineLoading3, _InlineLoading4;
 const InterstitialScreenFooter = /*#__PURE__*/React__default.forwardRef((props, ref) => {
@@ -23,9 +23,10 @@ const InterstitialScreenFooter = /*#__PURE__*/React__default.forwardRef((props,
     nextButtonLabel = 'Next',
     startButtonLabel = 'Get Started',
     actionButtonRenderer,
-    onAction
+    onAction,
+    ...rest
   } = props;
-  const blockClass = `${pkg.prefix}--interstitial-screen`;
+  const footerBlockClass = `${blockClass}--footer`;
   const {
     handleClose,
     progStep,
@@ -34,8 +35,8 @@ const InterstitialScreenFooter = /*#__PURE__*/React__default.forwardRef((props,
     disableButtonConfig,
     isFullScreen
   } = useContext(InterstitialScreenContext);
-  const startButtonRef = useRef(undefined);
-  const nextButtonRef = useRef(undefined);
+  const startButtonRef = useRef(null);
+  const nextButtonRef = useRef(null);
   const [loadingAction, setLoadingAction] = useState('');
   const isMultiStep = !!stepCount;
   const progStepFloor = 0;
@@ -78,10 +79,7 @@ const InterstitialScreenFooter = /*#__PURE__*/React__default.forwardRef((props,
     }
     return {};
   }, [loadingAction, isMultiStep, progStep, progStepCeil]);
-  const getFooterContent = () => /*#__PURE__*/React__default.createElement("div", {
-    ref: ref,
-    className: `${blockClass}--footer ${className}`
-  }, isMultiStep && skipButtonLabel !== '' && /*#__PURE__*/React__default.createElement(Button, {
+  const getFooterContent = () => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isMultiStep && skipButtonLabel !== '' && /*#__PURE__*/React__default.createElement(Button, {
     className: `${blockClass}--skip-btn`,
     kind: "ghost",
     size: "lg",
@@ -99,7 +97,7 @@ const InterstitialScreenFooter = /*#__PURE__*/React__default.forwardRef((props,
     onClick: handleClickPrev
   }, previousButtonLabel, loadingAction === 'back' && (_InlineLoading2 || (_InlineLoading2 = /*#__PURE__*/React__default.createElement(InlineLoading, null)))), isMultiStep && progStep < progStepCeil && /*#__PURE__*/React__default.createElement(Button, {
     className: `${blockClass}--next-btn`,
-    renderIcon: loadingAction !== 'next' ? ArrowRight : null,
+    renderIcon: loadingAction !== 'next' ? ArrowRight : undefined,
     ref: nextButtonRef,
     size: "lg",
     title: nextButtonLabel,
@@ -123,9 +121,13 @@ const InterstitialScreenFooter = /*#__PURE__*/React__default.forwardRef((props,
       disableButtonConfig
     }));
   }
-  return isFullScreen ? getFooterContent() : /*#__PURE__*/React__default.createElement(ModalFooter, {
+  return isFullScreen ? /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: ref,
+    className: `${footerBlockClass} ${className}`
+  }, getDevtoolsProps('InterstitialScreenFooter'), isFullScreen ? rest : {}), getFooterContent()) : /*#__PURE__*/React__default.createElement(ModalFooter, _extends({
+    className: footerBlockClass,
     ref: ref
-  }, getFooterContent());
+  }, rest), getFooterContent());
 });
 InterstitialScreenFooter.propTypes = {
   /**

package/es/components/InterstitialScreen/InterstitialScreenHeader.js

@@ -5,13 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { usePrefix, 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 { InterstitialScreenContext, blockClass } from './InterstitialScreen.js';
 import { useId } from '../../global/js/utils/useId.js';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 
 const InterstitialScreenHeader = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   var _h, _h2;
@@ -21,7 +22,8 @@ const InterstitialScreenHeader = /*#__PURE__*/React__default.forwardRef((props,
     headerSubTitle,
     closeIconDescription,
     hideProgressIndicator,
-    children
+    children,
+    ...rest
   } = props;
   const {
     bodyChildrenData,
@@ -30,7 +32,6 @@ const InterstitialScreenHeader = /*#__PURE__*/React__default.forwardRef((props,
     handleClose,
     stepCount
   } = React__default.useContext(InterstitialScreenContext);
-  const blockClass = `${pkg.prefix}--interstitial-screen`;
   const headerBlockClass = `${blockClass}--internal-header`;
   const _useId = useId();
   const carbonPrefix = usePrefix();
@@ -57,19 +58,23 @@ const InterstitialScreenHeader = /*#__PURE__*/React__default.forwardRef((props,
       className: `${carbonPrefix}--visually-hidden`
     }, "Step ", progStep + 1, " of ", stepCount)));
   };
-  return isFullScreen ? /*#__PURE__*/React__default.createElement("header", {
+  const closeModal = () => {
+    handleClose?.('close');
+  };
+  return isFullScreen ? /*#__PURE__*/React__default.createElement("header", _extends({
     ref: ref,
+    role: "presentation",
     className: cx(headerBlockClass, className, {
       [`${headerBlockClass}--has-title`]: headerTitle || headerSubTitle || children
     })
-  }, headerContent()) : /*#__PURE__*/React__default.createElement(ModalHeader, {
+  }, getDevtoolsProps('InterstitialScreenHeader'), rest), headerContent()) : /*#__PURE__*/React__default.createElement(ModalHeader, _extends({
     ref: ref,
     className: cx(headerBlockClass, className, {
       [`${headerBlockClass}--has-title`]: headerTitle || headerSubTitle || children
     }),
-    closeModal: handleClose,
+    closeModal: closeModal,
     iconDescription: closeIconDescription
-  }, headerContent());
+  }, getDevtoolsProps('InterstitialScreenHeader'), rest), headerContent());
 });
 InterstitialScreenHeader.propTypes = {
   /**

package/es/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/es/components/Nav/NavItemLink.js

@@ -10,7 +10,7 @@ import React__default from 'react';
 
 const NavItemLink = /*#__PURE__*/React__default.forwardRef(function NavItemLink(props, ref) {
   const {
-    element,
+    element = 'a',
     ...rest
   } = props;
   return /*#__PURE__*/React__default.createElement(element, {
@@ -23,8 +23,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: PropTypes.elementType
 };
-NavItemLink.defaultProps = {
-  element: 'a'
-};
 
 export { NavItemLink as default };

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -28,7 +28,6 @@ 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';
-import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
 
 var _Close;
 
@@ -143,15 +142,17 @@ let NotificationsPanel = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     // Set the notifications passed to the state within this component
     setAllNotifications(data);
   }, [data]);
-  useClickOutside(ref || notificationPanelRef, target => {
-    const element = target;
-    if (!isActionableElement(element)) {
-      setTimeout(() => {
-        triggerButtonRef?.current?.focus();
-      }, 100);
-    }
-    onClickOutside?.();
-  });
+
+  // useClickOutside(ref || notificationPanelRef, (target) => {
+  //   const element = target as HTMLElement;
+  //   if (!isActionableElement(element)) {
+  //     setTimeout(() => {
+  //       triggerButtonRef?.current?.focus();
+  //     }, 100);
+  //   }
+  //   onClickOutside?.();
+  // });
+
   const handleKeydown = event => {
     event.stopPropagation();
     if (event.key === 'Escape') {
@@ -309,17 +310,6 @@ let NotificationsPanel = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       size: 16
     }))));
   };
-  const isActionableElement = el => {
-    if (!el) {
-      return false;
-    }
-    const interactiveRoles = new Set(['button', 'link', 'textbox', 'checkbox', 'radio', 'slider', 'spinbutton', 'combobox', 'switch', 'menuitem']);
-    const actionableAncestor = el.closest('button, a, input, select, textarea, [tabindex], [contenteditable="true"], [role]');
-    if (!actionableAncestor) {
-      return false;
-    }
-    return actionableAncestor instanceof HTMLButtonElement || actionableAncestor instanceof HTMLAnchorElement || actionableAncestor instanceof HTMLInputElement || actionableAncestor instanceof HTMLSelectElement || actionableAncestor instanceof HTMLTextAreaElement || actionableAncestor.tabIndex >= 0 || actionableAncestor.isContentEditable || interactiveRoles.has(actionableAncestor.getAttribute('role')?.toLowerCase() ?? '');
-  };
   const dismissSingleNotification = (event, notification) => {
     event.preventDefault();
     event.stopPropagation();

package/es/components/PageHeader/PageHeaderTitle.js

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